@loadsmart/miranda-wc
Version:
Miranda Web Components component library
21,062 lines • 719 kB
JavaScript
import { toCSSValue as toCSSValue$1, getToken as getToken$2, toSpacingCSSValue } from './tokens.js';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __classPrivateFieldGet$1(receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$5=globalThis,e$7=t$5.ShadowRoot&&(void 0===t$5.ShadyCSS||t$5.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$7=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$7)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$8=t=>new n$7("string"==typeof t?t:t+"",void 0,s$7),i$9=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$7(o,t,s$7)},S$3=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$5.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$5=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$8(e)})(t):t;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{is:i$8,defineProperty:e$6,getOwnPropertyDescriptor:r$7,getOwnPropertyNames:h$3,getOwnPropertySymbols:o$6,getPrototypeOf:n$6}=Object,a$4=globalThis,c$4=a$4.trustedTypes,l$4=c$4?c$4.emptyScript:"",p$4=a$4.reactiveElementPolyfillSupport,d$3=(t,s)=>t,u$4={toAttribute(t,s){switch(s){case Boolean:t=t?l$4:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$3=(t,s)=>!i$8(t,s),y$3={attribute:true,type:String,converter:u$4,reflect:false,hasChanged:f$3};Symbol.metadata??=Symbol("metadata"),a$4.litPropertyMetadata??=new WeakMap;let b$3 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$3){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$6(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$7(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$3}static _$Ei(){if(this.hasOwnProperty(d$3("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$3("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$3("properties"))){const t=this.properties,s=[...h$3(t),...o$6(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$5(s));}else void 0!==s&&i.push(c$5(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$3(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$4).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$4;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$3)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$3.elementStyles=[],b$3.shadowRootOptions={mode:"open"},b$3[d$3("elementProperties")]=new Map,b$3[d$3("finalized")]=new Map,p$4?.({ReactiveElement:b$3}),(a$4.reactiveElementVersions??=[]).push("2.0.4");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$4=globalThis,i$7=t$4.trustedTypes,s$6=i$7?i$7.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$5="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$2,n$5=`<${o$5}>`,r$6=document,l$3=()=>r$6.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$3=Array.isArray,u$3=t=>a$3(t)||"function"==typeof t?.[Symbol.iterator],d$2="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$1=/"/g,$$1=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$2(1),b$2=y$2(2),T$1=Symbol.for("lit-noChange"),E$1=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$6.createTreeWalker(r$6,129);function P$1(t,i){if(!a$3(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$6?s$6.createHTML(i):i}const V$1=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($$1.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):void 0!==u[3]&&(c=m$2):c===m$2?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$1:p$3):c===g$1||c===p$3?c=m$2:c===v$1||c===_$1?c=f$2:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$5:d>=0?(o.push(a),s.slice(0,d)+e$5+s.slice(d)+h$2+x):s+h$2+(-2===d?i:x);}return [P$1(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V$1(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$5)){const i=v[a++],s=r.getAttribute(t).split(h$2),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I$1:"@"===e[1]?L$1:k$1}),r.removeAttribute(t);}else t.startsWith(h$2)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($$1.test(r.tagName)){const t=r.textContent.split(h$2),s=t.length-1;if(s>0){r.textContent=i$7?i$7.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$3()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$3());}}}else if(8===r.nodeType)if(r.data===o$5)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$2,t+1));)d.push({type:7,index:c}),t+=h$2.length-1;}c++;}}static createElement(t,i){const s=r$6.createElement("template");return s.innerHTML=t,s}};function S$2(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$3(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S$2(t,h._$AS(t,i.values),h,e)),i}let M$1 = class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$6).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$1(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r$6,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E$1,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S$2(this,t,i),c$3(t)?t===E$1||null==t||""===t?(this._$AH!==E$1&&this._$AR(),this._$AH=E$1):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$3(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E$1&&c$3(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$6.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N$1.createElement(P$1(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$3(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$3()),this.O(l$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$1 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E$1,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$2(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$2(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$3(r)||r!==this._$AH[n],r===E$1?t=E$1:t!==E$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E$1?void 0:t;}};let I$1 = class I extends k$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E$1);}};let L$1 = class L extends k$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$2(this,t,i,0)??E$1)===T$1)return;const s=this._$AH,e=t===E$1&&s!==E$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E$1&&(s===E$1||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};let z$1 = class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S$2(this,t);}};const j$1=t$4.litHtmlPolyfillSupport;j$1?.(N$1,R$1),(t$4.litHtmlVersions??=[]).push("3.2.1");const B$1=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R$1(i.insertBefore(l$3(),t),t,void 0,s??{});}return h._$AI(t),h};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let r$5 = class r extends b$3{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};r$5._$litElement$=true,r$5["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$5});const i$6=globalThis.litElementPolyfillSupport;i$6?.({LitElement:r$5});(globalThis.litElementVersions??=[]).push("4.1.1");
/* eslint-disable no-underscore-dangle */
/**
* We use a global variable to enable/disable logging because it's easier to
* control from the outside in a non-component context.
* This is useful for testing and development.
*/
// Initialize the global variable
window.__MIRANDA_ENABLE_LOGGING__ = false;
try {
const isLoggingEnabledInStorybook = false === 'true';
if (isLoggingEnabledInStorybook) ;
else {
// Add a message to instruct developers how to enable logging
console.info('To enable logging for Miranda components, run this command in the console:', 'window.__MIRANDA_ENABLE_LOGGING__ = true');
}
}
catch {
// If there's an error (e.g., running in a non-browser environment), keep logging disabled
console.warn('Unable to determine logging status, defaulting to disabled');
}
function isLoggingEnabled() {
return window.__MIRANDA_ENABLE_LOGGING__ === true;
}
function log(fn, level, prefix, ...args) {
if (!isLoggingEnabled()) {
return;
}
fn(`[miranda|${level}] [${prefix}]`, ...args);
}
/**
* Creates a logger object that contains four levels of logging: debug, info, warn, and error.
* @param prefix kebab-case prefix to be added to the start of all log messages
* @default prefix 'miranda'
*/
function createLogger(prefix = 'miranda') {
const logger = {
debug: (...args) => log(console.debug, 'debug', prefix, ...args),
info: (...args) => log(console.log, 'info', prefix, ...args),
warn: (...args) => log(console.warn, 'warn', prefix, ...args),
error: (...args) => log(console.error, 'error', prefix, ...args),
};
return Object.freeze(logger);
}
createLogger();
/**
* Re-dispatches an event from the provided element.
*
* This function is useful for forwarding non-composed events, such as `change`
* events.
*
* @example
* class MyInput extends LitElement {
* render() {
* return html`<input @change=${this.redispatchEvent}>`;
* }
*
* protected redispatchEvent(event: Event) {
* redispatchEvent(this, event);
* }
* }
*
* Source: https://github.com/material-components/material-web/blob/c633e85192b20d7ad0930f131957ecefbb8a2f96/controller/events.ts
*
* @param element The element to dispatch the event from.
* @param event The event to re-dispatch.
* @return Whether or not the event was dispatched (if cancelable).
*/
function redispatchEvent(element, event) {
/**
* For composed events or bubbling events in SSR light DOM, stop their
* propagation and dispatch the copy.
*/
if (event.bubbles && (!element.shadowRoot || event.composed)) {
event.stopPropagation();
}
const copy = Reflect.construct(event.constructor, [event.type, event]);
const dispatched = element.dispatchEvent(copy);
if (!dispatched) {
event.preventDefault();
}
return dispatched;
}
/**
* Check if `event` happened on the given `element`.
* @returns `true` if the event happened on the given element, `false` otherwise.
*/
function isInsideElement(event, element) {
if (element.shadowRoot) {
return event.composedPath().includes(element);
}
if (event.target == null) {
return false;
}
return element.contains(event.target);
}
const logger$d = createLogger('miranda');
class Component extends r$5 {
static define(config) {
const { name, constructor } = config;
try {
window.customElements.define(name, constructor);
}
catch (error) {
logger$d.error(`Failed to define component ${name}: ${error}. Please, ensure definitions are compatible so the application does not break or have bugs due to overridden definitions.`);
}
}
constructor() {
super();
this.internals = null;
this.emit = (eventName, options) => {
const event = new CustomEvent(eventName, {
bubbles: true,
cancelable: true,
composed: true,
...options,
});
this.dispatchEvent(event);
};
/**
* Re-dispatches an event.
* This function is useful for forwarding non-composed events, such as `change`
* events.
*
* @example
* class MyInput extends LitElement {
* render() {
* return html`<input @change=${this.reemit}>`;
* }
*
* }
*
* @param event The event to re-dispatch.
*/
this.reemit = (event) => {
redispatchEvent(this, event);
};
if ('attachInternals' in this &&
typeof this.attachInternals === 'function' &&
this.internals == null) {
this.internals = this.attachInternals();
}
}
}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
let s$5 = class s extends Event{constructor(s,t,e){super("context-request",{bubbles:true,composed:true}),this.context=s,this.callback=t,this.subscribe=e??false;}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function n$4(n){return n}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let s$4 = class s{constructor(t,s,i,h){if(this.subscribe=false,this.provided=false,this.value=void 0,this.t=(t,s)=>{this.unsubscribe&&(this.unsubscribe!==s&&(this.provided=false,this.unsubscribe()),this.subscribe||this.unsubscribe()),this.value=t,this.host.requestUpdate(),this.provided&&!this.subscribe||(this.provided=true,this.callback&&this.callback(t,s)),this.unsubscribe=s;},this.host=t,void 0!==s.context){const t=s;this.context=t.context,this.callback=t.callback,this.subscribe=t.subscribe??false;}else this.context=s,this.callback=i,this.subscribe=h??false;this.host.addController(this);}hostConnected(){this.dispatchRequest();}hostDisconnected(){this.unsubscribe&&(this.unsubscribe(),this.unsubscribe=void 0);}dispatchRequest(){this.host.dispatchEvent(new s$5(this.context,this.t,this.subscribe));}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
let s$3 = class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=false){const i=t||!Object.is(s,this.o);this.o=s,i&&this.updateObservers();}constructor(s){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:t}]of this.subscriptions)s(this.o,t);},void 0!==s&&(this.value=s);}addCallback(s,t,i){if(!i)return void s(this.value);this.subscriptions.has(s)||this.subscriptions.set(s,{disposer:()=>{this.subscriptions.delete(s);},consumerHost:t});const{disposer:h}=this.subscriptions.get(s);s(this.value,h);}clearCallbacks(){this.subscriptions.clear();}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let e$4 = class e extends Event{constructor(t){super("context-provider",{bubbles:true,composed:true}),this.context=t;}};let i$5 = class i extends s$3{constructor(s,e,i){super(void 0!==e.context?e.initialValue:i),this.onContextRequest=t=>{const s=t.composedPath()[0];t.context===this.context&&s!==this.host&&(t.stopPropagation(),this.addCallback(t.callback,s,t.subscribe));},this.onProviderRequest=s=>{const e=s.composedPath()[0];if(s.context!==this.context||e===this.host)return;const i=new Set;for(const[s,{consumerHost:e}]of this.subscriptions)i.has(s)||(i.add(s),e.dispatchEvent(new s$5(this.context,s,true)));s.stopPropagation();},this.host=s,void 0!==e.context?this.context=e.context:this.context=e,this.attachListeners(),this.host.addController?.(this);}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest);}hostConnected(){this.host.dispatchEvent(new e$4(this.context));}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let t$3 = class t{constructor(){this.pendingContextRequests=new Map,this.onContextProvider=t=>{const s=this.pendingContextRequests.get(t.context);if(void 0===s)return;this.pendingContextRequests.delete(t.context);const{requests:o}=s;for(const{elementRef:s,callbackRef:n}of o){const o=s.deref(),c=n.deref();void 0===o||void 0===c||o.dispatchEvent(new s$5(t.context,c,true));}},this.onContextRequest=e=>{if(true!==e.subscribe)return;const t=e.composedPath()[0],s=e.callback;let o=this.pendingContextRequests.get(e.context);void 0===o&&this.pendingContextRequests.set(e.context,o={callbacks:new WeakMap,requests:[]});let n=o.callbacks.get(t);void 0===n&&o.callbacks.set(t,n=new WeakSet),n.has(s)||(n.add(s),o.requests.push({elementRef:new WeakRef(t),callbackRef:new WeakRef(s)}));};}attach(e){e.addEventListener("context-request",this.onContextRequest),e.addEventListener("context-provider",this.onContextProvider);}detach(e){e.removeEventListener("context-request",this.onContextRequest),e.removeEventListener("context-provider",this.onContextProvider);}};
function getFormAncestor(element, form) {
if (form) {
const rootNode = element.getRootNode();
if (rootNode instanceof ShadowRoot) {
return rootNode.getElementById(form);
}
return document.getElementById(form);
}
return null;
}
/**
* Perform a form submission without causing a browser navigation.
* @param form The form to submit.
*/
function performVirtualFormSubmission(element, form) {
if (form.checkValidity()) {
// Based on https://github.dev/adobe/spectrum-web-components/blob/main/packages/button/src/Button.ts
const proxy = document.createElement('button');
proxy.type = 'submit';
/**
* we do this to cover the case where the submitter has been associated with a form
* via the `form` attribute, but is not a descendant of the form.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form|MDN button element, form attribute}
*/
if (form.id) {
proxy.setAttribute('form', form.id);
}
element.appendChild(proxy);
/**
* we CANNOT `proxy.click()` here; that could create very nasty infinite loop in components
* that listen for click events.
*/
form.requestSubmit(proxy);
proxy.remove();
return true;
}
return false;
}
const fieldContext = n$4(Symbol('field'));
const WithFormComponentMixin = (superClass) => {
var _FormComponent_handleStatusChange;
class FormComponent extends superClass {
constructor() {
super(...arguments);
this.formDisabled = false;
/**
* If there's a m-field ancestor, we want to consume its context.
*/
this.field = new s$4(this, {
context: fieldContext,
subscribe: true,
callback: ({ status }) => {
this.status = status;
},
});
_FormComponent_handleStatusChange.set(this, (status) => {
/**
* If an m-field ancestor has a status, it has priority over any status
* provided to the component.
*/
this.status = this.field.value?.status ?? status;
});
}
static get properties() {
return {
/**
* FIXME: This is correct according to both lit docs and TS docs.
* If you have any clue about how to fix it, please feel free to submit a solution.
* Reference:
* - https://lit.dev/docs/composition/mixins/#typing-the-superclass
* - https://www.typescriptlang.org/docs/handbook/mixins.html#constrained-mixins
*/
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
...super.properties,
name: { type: String, reflect: true },
form: { type: String },
disabled: { type: Boolean, reflect: true },
status: { type: String, reflect: true },
};
}
update(changedProperties) {
if (changedProperties.has('status')) {
__classPrivateFieldGet$1(this, _FormComponent_handleStatusChange, "f").call(this, this.status);
}
super.update(changedProperties);
}
getAssociatedForm() {
if (this.internals) {
return this.internals.form;
}
return null;
}
get disabled() {
return this.hasAttribute('disabled') || this.formDisabled;
}
/**
* This Boolean attribute indicates that the user cannot interact with the control. If this
* attribute is not specified, the control inherits its setting from the containing element,
* for example [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset);
* if there is no containing element when the `disabled` attribute is set, the control is enabled.
*/
set disabled(value) {
this.toggleAttribute('disabled', value);
}
/**
* Sets both the state and submission value of internals's target element to value.
*
* If value is null, the element won't participate in form submission.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue)
*/
setFormValue(value, state) {
if (this.internals) {
this.internals.setFormValue(value, state);
}
}
formDisabledCallback(disabled) {
this.formDisabled = disabled;
}
getActualForm() {
const associatedForm = this.getAssociatedForm();
if (associatedForm) {
return associatedForm;
}
return getFormAncestor(this, this.form);
}
}
_FormComponent_handleStatusChange = new WeakMap();
FormComponent.formAssociated = true;
return FormComponent;
};
class FormComponent extends WithFormComponentMixin(Component) {
}
/**
* Get token as lit's `CSSResult`
* @param token Miranda token
*/
function getToken$1(token) {
return r$8(toCSSValue$1(token));
}
/**
* Get color token as lit's `CSSResult`
* @param token One of the color tokens
* @param alpha How opaque the color should be
*/
function getColor(token, alpha = 1) {
return r$8(toCSSValue$1(token, alpha));
}
/**
* Apply right margin.
*/
function mr(margin) {
return r$8(`
margin-inline-end: ${margin}
`);
}
/**
* Apply left margin.
*/
function ml(margin) {
return r$8(`
margin-inline-start: ${margin}
`);
}
/**
* Apply right/left margins.
*/
function mx(margin) {
return r$8(`
${ml(margin)};
${mr(margin)}
`);
}
/**
* Apply top margin.
*/
function mt(margin) {
return r$8(`
margin-block-start: ${margin}
`);
}
/**
* Apply bottom margin.
*/
function mb(margin) {
return r$8(`
margin-block-end: ${margin}
`);
}
/**
* Apply top/bottom margins.
*/
function my(margin) {
return r$8(`
${mt(margin)};
${mb(margin)}
`);
}
/**
* Apply right/left/top/bottom margins.
*/
function m$1(margin) {
return r$8(`
${mx(margin)};
${my(margin)}
`);
}
/**
* Convert a screen media query config to its CSS equivalent.
*
* Receives the style content to be applied inside this media query setup.
* Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
*/
function mediaDesktop(content) {
return r$8(`
@media screen and (min-width: ${getToken$2('media-screen-desktop')}) {
${content}
}
`);
}
/**
* Convert a screen media query config to its CSS equivalent.
*
* Receives the style content to be applied inside this media query setup.
* Notice that we consume the raw token value for the media query because variables do not work in media or container queries.
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties MDN, Using CSS Custom Properties}
*/
function mediaTablet(content) {
return r$8(`
@media screen and (min-width: ${getToken$2('media-screen-tablet')}) {
${content}
}
`);
}
/**
* Produces array for non-array value.
*
* @param value Value to be converted/returned.
* @return Returns `value` itself if it is an array or
* an array containing the provided `value`.
*/
function toArray(value) {
if (value == null) {
return [];
}
if (Array.isArray(value)) {
return value;
}
return [value];
}
const pseudoClassMap = {
active: [':active'],
disabled: ['.is-disabled', ':disabled'],
focus: ['.is-focused', ':focus', ':focus-visible', ':focus-within'],
hover: [':hover'],
visited: [':visited'],
};
function isPseudoClass(value) {
return Object.keys(pseudoClassMap).includes(value);
}
function isNegated(pseudoClass) {
return pseudoClass.startsWith('not.');
}
function joinIs(value) {
const array = toArray(value).filter((item) => item.trim() !== '');
if (array.length === 0) {
return '';
}
if (array.length === 1) {
return array[0];
}
return `:is(${array.join(', ')})`;
}
function toString(selectors, subSelectors, combinator, pseudoClasses) {
let result = joinIs(selectors);
for (const pseudoClass of pseudoClasses) {
if (isNegated(pseudoClass)) {
const posPseudoClass = pseudoClass.slice(4);
result = `${result}:not(${pseudoClassMap[posPseudoClass].join(', ')})`;
}
else {
result = `${result}${joinIs(pseudoClassMap[pseudoClass])}`;
}
}
const resultSubSelector = joinIs(subSelectors);
if (resultSubSelector) {
let resultCombinator = ` ${combinator} `;
if (combinator == null) {
resultCombinator = '';
}
if (combinator === ' ') {
resultCombinator = combinator;
}
return `${result}${resultCombinator}${resultSubSelector}`;
}
return result;
}
/**
* # on
*
* Style utility to compose pseudo-classes.
*
* ## List of supported pseudo-classes
* - active
* - disabled
* - focus
* - hover
* - visited
*
* ## Usage
* You can compose multiple pseudo-classes by chaining them. You can also negate
* some pseudo-class calling `.not` before it. The order that they are chained
* will be respected.
*
* ```js
* css`
* ${on('.button').not.disabled.not.active.focus} {
* color: tomato;
* }
* `;
* ```
* Will result in:
* ```css
* .button:not(.is-disabled, :disabled):not(:active):is(.is-focused, :focus, :focus-visible, :focus-within) {
* color: tomato;
* }
* ```
*
* @param selectors A single selector or a list of selectors that will have the
* pseudo-classes concatenated to it.
* @param subSelectors A single selector or a list of selectors that will be
* combined with the resulting selectors.
* @param combinator Will be used to combine the resulting selectors with the
* subSelectors. The default value is the [Descendant Combinator (`' '`)](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
* If `null` is provided, no combinator will be used, i.e., they will be joined
* without any character between them.
*/
function on(selectors, subSelectors, combinator = ' ') {
const pseudoClasses = [];
let not = false;
/*
* It's not possible to instantiate a CSSResult manually as `lit` has a
* mecanism to prevent this.
* https://github.com/lit/lit/blob/main/packages/reactive-element/src/css-tag.ts#L58
*
* To circunvent this limitation, a `Proxy` arround an instance returned by
* the `unsafeCSS` is being created and it is overriding the getter for
* `cssText`, which holds the css text, allowing to customize the selector.
* Additional getters for each supported pseudo-class and a getter for the
* negating condition `not` are also being created at this time. These
* additional getters return the same proxy instance, so they can be
* chained.
*/
const augumentedCSSResult = new Proxy(r$8(''), {
get(target, prop, receiver) {
if (prop === 'cssText') {
return toString(selectors, subSelectors, combinator, pseudoClasses);
}
if (prop === 'not') {
not = !not;
return augumentedCSSResult;
}
if (isPseudoClass(prop)) {
pseudoClasses.push(not ? `not.${prop}` : prop);
not = false;
return augumentedCSSResult;
}
return Reflect.get(target, prop, receiver);
},
});
return augumentedCSSResult;
}
/**
* Apply right padding.
*/
function pr(padding) {
return r$8(`
padding-inline-start: ${padding}
`);
}
/**
* Apply left padding.
*/
function pl(padding) {
return r$8(`
padding-inline-end: ${padding}
`);
}
/**
* Apply right/left paddings.
*/
function px(padding) {
return r$8(`
${pl(padding)};
${pr(padding)}
`);
}
/**
* Apply top padding.
*/
function pt(padding) {
return r$8(`
padding-block-start: ${padding}
`);
}
/**
* Apply bottom padding.
*/
function pb(padding) {
return r$8(`
padding-block-end: ${padding}
`);
}
/**
* Apply top/bottom paddings.
*/
function py(padding) {
return r$8(`
${pt(padding)};
${pb(padding)}
`);
}
/**
* Apply right/left/top/bottom paddings.
*/
function p$2(padding) {
return r$8(`
${px(padding)};
${py(padding)}
`);
}
function skeleton() {
return r$8(`animation: skeleton-loading 1s linear infinite alternate;`);
}
skeleton.styles = () => {
return i$9 `
@keyframes skeleton-loading {
0% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
opacity: 0.3;
}
50% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
opacity: 0.6;
}
100% {
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-background-tertiary')};
}
}
`;
};
/** @type {TransitionConfig} */
const DEFAULT_TRANSITION_CONFIG = {
property: 'all',
delay: '0s',
duration: '0.35s',
easing: 'ease-in-out',
};
function toTransition(config) {
const safeConfig = { ...DEFAULT_TRANSITION_CONFIG, ...config };
// property name | duration | easing function | delay
return r$8(`${safeConfig.property} ${safeConfig.duration} ${safeConfig.easing} ${safeConfig.delay}`);
}
/**
* Convert a transition config to its CSS equivalent.
*/
function transition(configs) {
const transitionStyle = toArray(configs)
.map((config) => toTransition(config))
.join(', ');
return r$8(`
transition: ${transitionStyle}
`);
}
const typographyVariants = [
'body-lg-bold',
'body-lg',
'body-md-bold-underline',
'body-md-bold',
'body-md-underline',
'body-md',
'body-sm-bold-underline',
'body-sm-bold',
'body-sm-underline',
'body-sm',
'button-lg',
'button-md',
'button-sm',
'chips-md',
'chips-sm',
'heading-lg-bold',
'heading-lg',
'heading-md-bold',
'heading-md',
'heading-sm-bold',
'heading-sm',
'hero-lg-bold',
'hero-lg',
'hero-md-bold',
'hero-md',
'hero-sm-bold',
'hero-sm',
'number-md',
'number-sm',
'table-header-md',
'table-header-sm',
];
/**
* Apply set of tokens for a given typography `variant`.
*/
function getVariant(variant) {
switch (variant) {
case 'hero-lg-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-9',
'font-weight': 'font-weight-bold',
};
case 'hero-lg':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-9',
'font-weight': 'font-weight-regular',
};
case 'hero-md-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-8',
'font-weight': 'font-weight-bold',
};
case 'hero-md':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-8',
'font-weight': 'font-weight-regular',
};
case 'hero-sm-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-7',
'font-weight': 'font-weight-bold',
};
case 'hero-sm':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-6',
'font-size': 'font-size-7',
'font-weight': 'font-weight-regular',
};
case 'heading-lg-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-6',
'font-weight': 'font-weight-bold',
};
case 'heading-lg':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-6',
'font-weight': 'font-weight-regular',
};
case 'heading-md-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-5',
'font-weight': 'font-weight-bold',
};
case 'heading-md':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-5',
'font-weight': 'font-weight-regular',
};
case 'heading-sm-bold':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-4',
'font-weight': 'font-weight-bold',
};
case 'heading-sm':
return {
'font-family': 'font-family-title',
'line-height': 'line-height-5',
'font-size': 'font-size-4',
'font-weight': 'font-weight-regular',
};
case 'body-lg-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-6',
'font-size': 'font-size-5',
'font-weight': 'font-weight-bold',
};
case 'body-lg':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-6',
'font-size': 'font-size-5',
'font-weight': 'font-weight-regular',
};
case 'body-md':
case 'number-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-regular',
};
case 'body-md-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-regular',
'text-decoration': 'underline',
};
case 'body-md-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
};
case 'body-md-bold-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-5',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
'text-decoration': 'underline',
};
case 'body-sm':
case 'number-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
};
case 'body-sm-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
'text-decoration': 'underline',
};
case 'body-sm-bold':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'body-sm-bold-underline':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-4',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
'text-decoration': 'underline',
};
case 'button-lg':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-4',
'font-weight': 'font-weight-bold',
};
case 'button-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-3',
'font-weight': 'font-weight-bold',
};
case 'button-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'table-header-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-3',
'font-weight': 'font-weight-medium',
'text-transform': 'uppercase',
};
case 'table-header-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-regular',
};
case 'chips-md':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-2',
'font-weight': 'font-weight-bold',
};
case 'chips-sm':
return {
'font-family': 'font-family-default',
'line-height': 'line-height-1',
'font-size': 'font-size-1',
'font-weight': 'font-weight-medium',
'text-transform': 'uppercase',
};
default:
return {};
}
}
function styleObjectToCSSString(styleObject) {
if (typeof styleObject === 'string')
return styleObject;
return Object.entries(styleObject)
.map(([key, value]) => {
const tokenValue = getToken$2(value) ?? value;
return `${key}: ${r$8(tokenValue)}`;
})
.join('; ');
}
/**
* Apply set of tokens for a given typography `variant`.
*/
function typography(variant) {
const defaultStyle = r$8(`
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
`);
const variantStyle = styleObjectToCSSString(getVariant(variant));
return r$8(`${defaultStyle}\n${variantStyle}`);
}
function styles$H() {
return i$9 `
:host {
background-color: ${getColor('color-background-primary')};
width: 100%;
}
slot[name='title']::slotted(:not(m-accordion-title)),
slot[name='content']::slotted(:not(m-accordion-content)) {
display: none;
}
.m-accordion {
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: ${getToken$1('border-radius-s')};
border: 1px solid ${getColor('color-border-input')};
overflow: hidden;
}
.m-accordion-header {
margin: 0;
width: 100%;
}
.m-accordion-trigger {
${typography('body-md-bold')};
display: flex;
margin: 0;
cursor: pointer;
width: 100%;
padding: ${getToken$1('spacing-3')} ${getToken$1('spacing-4')};
color: ${getColor('color-text-primary')};
outline: none;
border: none;
align-items: center;
background-color: ${getColor('color-background-primary')};
}
.m-accordion-trigger:focus {
background-color: ${getColor('color-background-tertiary')};
}
.m-accordion-trigger:hover {
background-color: ${getColor('color-background-tertiary')};
}
.m-accordion-trigger:active {
background-color: ${getColor('color-background-highlight')};
}
.m-accordion-trigger:disabled {
background-color: ${getColor('color-background-primary')};
cursor: default;
color: ${getColor('color-text-disabled')};
}
.m-accordion-trigger[aria-expanded='true']:not([disabled]) m-icon {
transform: rotate(180deg);
}
.m-accordion-panel {
height: auto;
width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
.m-accordion-trigger {
${transition([{ property: 'background-color' }])};
}
m-icon {
${transition([{ property: 'transform' }])};
}
.m-accordion-panel {
${transition([{ property: 'height' }, { property: 'visibility' }])};
will-change: height;
}
}
`;
}
function accordionTitleStyles() {
return i$9 `
:host {
${typography('button-md')};
line-height: normal;
color: ${getColor('color-text-primary')};
display: flex;
text-align: left;
justify-content: center;
width: 100%;
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
.m-accordion-text {
flex: 1;
padding-left: ${getToken$1('spacing-1')};
}
`;
}
function accordionContentStyles() {
return i$9 `
.m-accordion-content {
padding: ${getToken$1('spacing-2')} ${getToken$1('spacing-4')} ${getToken$1('spacing-4')};
}
`;
}
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __classPrivateFieldGet(receiver, state, kind, f) {
if (typeof state === "function" ? receiver !== state || true : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$1$1=globalThis,e$2$1=t$1$1.ShadowRoot&&(void 0===t$1$1.ShadyCSS||t$1$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$2$1=new WeakMap;let n$2$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2$1.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$2$1("string"==typeof t?t:t+"",void 0,s$1),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$2$1(o,t,s$1)},S$1=(s,o)=>{if(e$2$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$2$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const{is:i$2$1,defineProperty:e$1$1,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$1$1,getPrototypeOf:n$1$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2$1(t,s),y$1={attribute:true,type:String,converter:u$1,reflect:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let b$1 = class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=false),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$1$1(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$1$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),true===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t) true!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=false,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}};b$1.elementStyles=[],b$1.shadowRootOptions={mode:"open"},b$1[d$1("elementProperties")]=new Map,b$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b$1}),(a$1.reactiveElementVersions??=[]).push("2.0.4");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$2=globalThis,i$1$1=t$2.trustedTypes,s$2=i$1$1?i$1$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h,n$3=`<${o$4}>`,r$1=document,l$2=()=>r$1.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$2=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=y(2),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$1.createTreeWalker(r$1,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$3+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$3)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$1$1?i$1$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$1.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$1).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$1,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$2(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$1.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$2(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$2()),this.O(l$2()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$2.litHtmlPolyfillSupport;j?.(N,R),(t$2.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/let r$4 = class r extends b$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};r$4._$litElement$=true,r$4["finalized"]=true,globalThis.litElementHydrateSupport?.({LitElement:r$4});const i$4=globalThis.litElementPolyfillSupport;i$4?.({LitElement:r$4});(globalThis.litElementVersions??=[]).push("4.1.1");
/**
* Auto-generated file
* Do not edit directly
*/
var LoadsmartTheme = {
"brand-color-brand": "20, 214, 77",
"brand-color-brand-accent-1": "0, 215, 215",
"brand-color-brand-accent-2": "132, 241, 30",
"border-radius-none": "0px",
"border-radius-s": "4px",
"border-radius-m": "8px",
"border-radius-l": "16px",
"border-radius-circle": "50%",
"border-none": 0,
"border-thin": "1px",
"border-medium": "2px",
"border-thick": "4px",
"color-background-primary": "252, 252, 255",
"color-background-secondary": "248, 249, 251",
"color-background-tertiary": "230, 237, 242",
"color-background-highlight": "202, 219, 221",
"color-background-inverted": "32, 41, 49",
"color-background-secondary-inverted": "61, 74, 85",
"color-border-input": "193, 206, 217",
"color-border": "230, 237, 242",
"color-divider": "230, 237, 242",
"color-brand": "20, 214, 77",
"color-brand-accent-1": "0, 215, 215",
"color-brand-accent-2": "132, 241, 30",
"color-primary-20": "202, 219, 221",
"color-primary-60": "0, 84, 84",
"color-primary-100": "0, 51, 51",
"color-accent-20": "229, 245, 255",
"color-accent-60": "0, 98, 159",
"color-accent-100": "15, 66, 97",
"color-neutral-0": "252, 252, 255",
"color-neutral-10": "248, 249, 251",
"color-neutral-20": "230, 237, 242",
"color-neutral-40": "193, 206, 217",
"color-neutral-60": "94, 118, 138",
"color-neutral-80": "92, 106, 118",
"color-neutral-90": "61, 74, 85",
"color-neutral-100": "32, 41, 49",
"color-success-20": "227, 247, 239",
"color-success-60": "3, 124, 94",
"color-success-100": "0, 94, 71",
"color-danger-20": "255, 233, 230",
"color-danger-60": "186, 27, 27",
"color-danger-100": "104, 0, 3",
"color-warning-20": "255, 243, 214",
"color-warning-60": "248, 182, 14",
"color-warning-100": "102, 63, 25",
"color-text-primary": "32, 41, 49",
"color-text-secondary": "61, 74, 85",
"color-text-tertiary": "92, 106, 118",
"color-text-placeholder": "94, 118, 138",
"color-text-disabled": "193, 206, 217",
"color-text-inverted": "252, 252, 255",
"color-text-secondary-inverted": "193, 206, 217",
"color-text-error": "186, 27, 27",
"color-text-highlight": "0, 98, 159",
"color-text-link": "0, 84, 84",
"font-family-default": "'Manrope', sans-serif",
"font-family-title": "'Plus Jakarta Sans', 'Manrope', sans-serif",
"font-size-1": "0.625rem",
"font-size-2": "0.75rem",
"font-size-3": "0.875rem",
"font-size-4": "1rem",
"font-size-5": "1.25rem",
"font-size-6": "1.625rem",
"font-size-7": "2.375rem",
"font-size-8": "3rem",
"font-size-9": "3.625rem",
"font-weight-regular": 500,
"font-weight-medium": 600,
"font-weight-bold": 700,
"line-height-1": "100%",
"line-height-2": "125%",
"line-height-3": "130%",
"line-height-4": "140%",
"line-height-5": "150%",
"line-height-6": "180%",
"global-height-small": "1.75rem",
"global-height-default": "2.5rem",
"global-height-large": "3rem",
"media-screen-desktop": "1025px",
"media-screen-tablet": "481px",
"opacity-0": "0%",
"opacity-20": "20%",
"opacity-40": "40%",
"opacity-60": "60%",
"opacity-100": "100%",
"elevation-1": "0px 0px 2px rgba(94, 118, 138, 0.1), 0px 1px 6px 2px rgba(61, 74, 85, 0.15)",
"elevation-2": "0px 1px 3px rgba(94, 118, 138, 0.2), 0px 4px 8px 3px rgba(61, 74, 85, 0.15)",
"elevation-3": "0px 0px 4px rgba(94, 118, 138, 0.2), 0px 6px 12px 6px rgba(61, 74, 85, 0.15)",
"elevation-4": "0px 5px 6px 4px rgba(94, 118, 138, 0.2), 0px 8px 10px rgba(61, 74, 85, 0.1)",
"glow-primary": "0.0px 0.0px 4.0px 0px rgba(3, 124, 94, .5)",
"glow-warning": "0.0px 0.0px 4.0px 0px rgba(255, 206, 79, 1.0)",
"spacing-1": "4px",
"spacing-2": "8px",
"spacing-3": "12px",
"spacing-4": "16px",
"spacing-5": "20px",
"spacing-6": "24px",
"spacing-8": "32px",
"spacing-10": "40px",
"spacing-12": "48px",
"spacing-14": "56px",
"spacing-16": "64px",
"spacing-20": "80px",
"spacing-30": "120px",
"spacing-0-5": "2px",
"platform-font-default": "'Manrope', sans-serif",
"platform-font-title": "'Plus Jakarta Sans', 'Manrope', sans-serif"
};
/**
* Sort an array of strings in a special way that considers numeric parts within the strings.
*
* @param values An array of strings to be sorted.
* @returns A new array containing the sorted strings.
*/
function sortNumericValues(values) {
// Create a copy of the input array to avoid modifying the original array.
return [...values].sort((a, b) => {
return a.localeCompare(b, undefined, {
numeric: true,
sensitivity: 'base',
});
});
}
function extractTokens(tokens, prefix) {
return tokens.filter((token) => {
return token.startsWith(prefix);
});
}
function excludeTokens(tokens, prefix) {
return tokens.filter((token) => {
return !token.startsWith(prefix);
});
}
const ALL_TOKENS = Object.keys(LoadsmartTheme);
// We strip brand and platform-specific tokens as they should not be used directly.
const TOKENS = sortNumericValues(excludeTokens(excludeTokens(ALL_TOKENS, 'brand-'), 'platform-'));
extractTokens(TOKENS, 'color-background-');
extractTokens(TOKENS, 'border-radius-');
extractTokens(TOKENS, 'border-');
extractTokens(TOKENS, 'color-');
extractTokens(TOKENS, 'elevation-');
extractTokens(TOKENS, 'font-family-');
extractTokens(TOKENS, 'font-size-');
extractTokens(TOKENS, 'font-weight-');
extractTokens(TOKENS, 'global-');
extractTokens(TOKENS, 'glow-');
extractTokens(TOKENS, 'line-height-');
extractTokens(TOKENS, 'opacity-');
const SPACING_TOKENS = extractTokens(TOKENS, 'spacing-');
extractTokens(TOKENS, 'media-');
['none', ...SPACING_TOKENS];
/**
* Get token value.
*
* @example
* ```js
* getToken('color-primary')
* ```
*
* @param token Token whose value should be retrieved.
* @returns Token value or `undefined` otherwise.
*/
function getToken(token) {
return LoadsmartTheme[token];
}
function toCSSVariable(token) {
const value = getToken(token);
if (value == null) {
return value;
}
return `--m-${token}`;
}
function toCSSValue(token, alpha) {
const value = getToken(token);
if (value == null) {
return '';
}
if (token.startsWith('color-')) {
return `rgba(var(${toCSSVariable(token)}, ${value}), ${1})`;
}
return `var(${toCSSVariable(token)}, ${value})`;
}
function styles$G() {
return [
i$3 `
:host {
--m-icon-size: 16px;
--m-icon-color: currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--m-icon-size);
block-size: var(--m-icon-size);
}
svg {
inline-size: var(--m-icon-size);
block-size: var(--m-icon-size);
color: var(--m-icon-color);
fill: var(--m-icon-color);
}
@media (prefers-reduced-motion: no-preference) {
:host {
transition: transform 0.35s ease-in-out;
}
svg {
transition: color 0.35s ease-in-out 0s, fill 0.35s ease-in-out 0s;
}
}
`,
];
}
function __variableDynamicImportRuntime0__(path) {
switch (path) {
case './icons/add-circle.ts': return import('./add-circle-DG36-47h-GTK8RGof.js');
case './icons/alarm.ts': return import('./alarm-D3R0RR-7-D_R2CT-K.js');
case './icons/alert-circle.ts': return import('./alert-circle-DO-k51nu-k7V7wQEi.js');
case './icons/anchor.ts': return import('./anchor-01MxGT3G-CqnxGd3R.js');
case './icons/arrow-left.ts': return import('./arrow-left-D3h-6Nnu-fPyQsr1_.js');
case './icons/arrow-right.ts': return import('./arrow-right-CoZQe9Hm-DsTcqLEk.js');
case './icons/arrow-sort-down.ts': return import('./arrow-sort-down-Dv785jwL-Ae8Ar25G.js');
case './icons/arrow-sort-up-down.ts': return import('./arrow-sort-up-down-PF5U-sjZ-4lGLXFwQ.js');
case './icons/arrow-sort-up.ts': return import('./arrow-sort-up-B3VnMcct-C8SBwysx.js');
case './icons/asterisk.ts': return import('./asterisk-C24115OD-Dg8TPVVU.js');
case './icons/attention.ts': return import('./attention-B3Np_Hol-CRy1GRL8.js');
case './icons/automatic.ts': return import('./automatic-u-oMZ_k5-C1a6A3rc.js');
case './icons/bank.ts': return import('./bank-HCEsjrFi-EFEfbmGP.js');
case './icons/bell-cancel.ts': return import('./bell-cancel-BNQ5ZmLn-DAKslgP4.js');
case './icons/bell.ts': return import('./bell-DkNQtQvt-Bp3mk1sM.js');
case './icons/blind-bol.ts': return import('./blind-bol-B-LirbRQ-B-zA2cRc.js');
case './icons/board.ts': return import('./board-D-H79ypG-Cd4WPF4k.js');
case './icons/bol.ts': return import('./bol-D4g-4KEx-Cuf5Hjdz.js');
case './icons/bolt-off.ts': return import('./bolt-off-C0hy7jpS-CIbVZ4tk.js');
case './icons/bolt.ts': return import('./bolt-BEG2G4oC-BZSwmQhD.js');
case './icons/box.ts': return import('./box-EjxEPoZE-_9LgvG_q.js');
case './icons/broadcast.ts': return import('./broadcast-BqL_4gRz-ufX-XnIF.js');
case './icons/burguer-menu.ts': return import('./burguer-menu-CUl15TV7-BsT1uPkL.js');
case './icons/calendar.ts': return import('./calendar-D05JqcKp-Ck8wzWA8.js');
case './icons/camera.ts': return import('./camera-D_PSlfGN-DGKKxKER.js');
case './icons/canada-flag.ts': return import('./canada-flag-D758a1Lk-G1RoKSbY.js');
case './icons/caret-down.ts': return import('./caret-down-CK6m-cnU-C9BSeG2t.js');
case './icons/caret-left.ts': return import('./caret-left-BqVATDWe-DYXKEOh6.js');
case './icons/caret-right.ts': return import('./caret-right-Cfh4y8T9-BAb64JJ7.js');
case './icons/caret-up.ts': return import('./caret-up-BHaf2H0u-Gzz2UVFs.js');
case './icons/carrier-contract.ts': return import('./carrier-contract-BB_YXEHR-C4bJ0HgD.js');
case './icons/chat.ts': return import('./chat-DefQC71E-DUXIcjcT.js');
case './icons/check.ts': return import('./check-B7q--RPk-5ylRJLsQ.js');
case './icons/clip.ts': return import('./clip-BKAJZECu-BO7bB0Tm.js');
case './icons/clock.ts': return import('./clock-BVskvrmA-CR6MUQlY.js');
case './icons/clown.ts': return import('./clown-BHJAONnK-Cjusd-aY.js');
case './icons/code.ts': return import('./code-ZlmHenOn-Dc7P_4bs.js');
case './icons/comment.ts': return import('./comment-ClurI3LW-CbiBtwWf.js');
case './icons/company.ts': return import('./company-2F_1Ojs7-BK4ltT5h.js');
case './icons/contract.ts': return import('./contract-Di4W-5RX-D9y11zba.js');
case './icons/copy.ts': return import('./copy-C40sxxyL-DBeTFAym.js');
case './icons/corner-down-r.ts': return import('./corner-down-r-DwNjox8J-FWCqItDZ.js');
case './icons/corner-down.ts': return import('./corner-down-aiifCHCZ-CabE2eET.js');
case './icons/corner-up.ts': return import('./corner-up-D72HJl81-DLWeGSSF.js');
case './icons/credit-card.ts': return import('./credit-card-Dh7aP2Wc-kzXtUHLT.js');
case './icons/delivery.ts': return import('./delivery-BWGNw201-DofAazx3.js');
case './icons/dislike.ts': return import('./dislike-BM1aSNsI-CQJVg0UI.js');
case './icons/document-csv.ts': return import('./document-csv-DPAdZbp1-B85NwHhV.js');
case './icons/document-file.ts': return import('./document-file-IubmR4MP-Bb50IGui.js');
case './icons/document-image.ts': return import('./document-image-B4SomWir-BxBYEsow.js');
case './icons/dollar-circle.ts': return import('./dollar-circle-mW6mW_Eu-BCpiwxqg.js');
case './icons/dollar.ts': return import('./dollar-fmxqd590-Vms9a-iv.js');
case './icons/dots-horizontal.ts': return import('./dots-horizontal-hNtVS-87-Cmd177IR.js');
case './icons/dots-vertical.ts': return import('./dots-vertical-D0dbwYCm-BtvZDDXR.js');
case './icons/double-caret-left.ts': return import('./double-caret-left-B3iOD7-7-D2zHPCaF.js');
case './icons/double-caret-right.ts': return import('./double-caret-right-4ToiUsuI-CP82UAv7.js');
case './icons/down.ts': return import('./down-ouuAkVow-uvKjFcdO.js');
case './icons/download.ts': return import('./download-TrkSIZwr-Cf61v8vn.js');
case './icons/dropdown.ts': return import('./dropdown-BFUS8kZn-Diaiso46.js');
case './icons/email-filled.ts': return import('./email-filled-BGz0fvDN-_fi_OO2o.js');
case './icons/email.ts': return import('./email-Cc4p3npf-jon9704O.js');
case './icons/export.ts': return import('./export-C0_dfu6t-BrT3Eiww.js');
case './icons/eye.ts': return import('./eye-D4axk2VX-D3QlRI6A.js');
case './icons/fast.ts': return import('./fast-BA6wRYse-DUy94fcr.js');
case './icons/favorite.ts': return import('./favorite-Dq8xdgro-B3rCbzvC.js');
case './icons/file.ts': return import('./file-Dv-SjjZg-B5ssywXK.js');
case './icons/filter.ts': return import('./filter-B6ZbXWet-Jd2-UXcw.js');
case './icons/flag.ts': return import('./flag-DamX8fIF-DlGxWa8L.js');
case './icons/folder.ts': return import('./folder-xoHjUGrm-CvubSo7S.js');
case './icons/funnel.ts': return import('./funnel-6oWZ4S4f-BNT-N_zZ.js');
case './icons/gear.ts': return import('./gear-DsiTbLJ9-BCQl39XI.js');
case './icons/graph.ts': return import('./graph-VTKEFiWm-xMhSn1cM.js');
case './icons/hand-tap.ts': return import('./hand-tap-CRvBr3cu-DaPw7KT1.js');
case './icons/hand.ts': return import('./hand-CGcYbrtk-CorWi7g2.js');
case './icons/high-signal.ts': return import('./high-signal-vwuG2ISb-BGgdoQC7.js');
case './icons/history.ts': return import('./history-C1VS5w-W-C3kHzbCD.js');
case './icons/home.ts': return import('./home-DvxGYDu3-Dch_QmRO.js');
case './icons/hourglass.ts': return import('./hourglass-Bhgd2Yvm-5AQiUp3J.js');
case './icons/import-2.ts': return import('./import-2-BUa6BWBd-FqSneJT_.js');
case './icons/import.ts': return import('./import-BHDV1jI8-Bxi2SMgj.js');
case './icons/indeterminate.ts': return import('./indeterminate-D-HO5uwr-D34IXt4d.js');
case './icons/info.ts': return import('./info-6gpzPFz3-BY2HWGSa.js');
case './icons/invoice-items.ts': return import('./invoice-items-Bd4lWZRE-DsR2Ctes.js');
case './icons/invoice.ts': return import('./invoice-Dz3fkDFy-DW-qWqGY.js');
case './icons/kanban.ts': return import('./kanban-CoIQcEgx-JJpeEPxM.js');
case './icons/light-bulb.ts': return import('./light-bulb-BHHuYYvf-LR3k4lRo.js');
case './icons/like.ts': return import('./like-TmiPdB3y-DzSIVHzS.js');
case './icons/link.ts': return import('./link-tJrc2YI3-Bs-4MNwm.js');
case './icons/list.ts': return import('./list-o-8fzVwe-CpWQnW--.js');
case './icons/loadsmart-logo.ts': return import('./loadsmart-logo-LVgkO-OY-DxbJlErK.js');
case './icons/log-out.ts': return import('./log-out-62ek3tMd-B4gC8Ls6.js');
case './icons/low-signal.ts': return import('./low-signal-BhU6MvJ7-CBjNRXGO.js');
case './icons/map.ts': return import('./map-D3mPWQDw-D1JnJd6D.js');
case './icons/medal.ts': return import('./medal-JSPrwii0-OEySCvp3.js');
case './icons/megaphone.ts': return import('./megaphone-Bhew65e_-DaQV4zWM.js');
case './icons/mexico-flag.ts': return import('./mexico-flag-C1c8OtNq-IsjB4zt_.js');
case './icons/minus.ts': return import('./minus-DOzZEKIF-BQQOjpdB.js');
case './icons/network-signal.ts': return import('./network-signal-BdwZKSQi-jD1ouLLv.js');
case './icons/no-awarded.ts': return import('./no-awarded-CWTLyN5E-CMXY7vZh.js');
case './icons/notes-lock.ts': return import('./notes-lock-Do1iPYCI-BsX8d3VK.js');
case './icons/notes.ts': return import('./notes-BoAJAtsx-D-0K5kRK.js');
case './icons/order.ts': return import('./order-DxhUkc8f-D_40VtyW.js');
case './icons/package-tracking.ts': return import('./package-tracking-BylZrzLV-E90I5MzM.js');
case './icons/padlock-open.ts': return import('./padlock-open-C8wNysrM-Du4qCmCT.js');
case './icons/padlock.ts': return import('./padlock-9dPM6z_s-CTqtabPJ.js');
case './icons/pencil.ts': return import('./pencil-BzpSkGCq-DmJhUtRN.js');
case './icons/phone.ts': return import('./phone-Cwh20wkj-DvhFnBn5.js');
case './icons/pin-filled.ts': return import('./pin-filled-SG8Pn7K--B2YRhz4N.js');
case './icons/pin-map.ts': return import('./pin-map-CwrFR4nx-335FEqAL.js');
case './icons/pin.ts': return import('./pin-zSgUzBJz-CT2wKQv0.js');
case './icons/plugs.ts': return import('./plugs-Cg6fJCLP-KbB_mF1t.js');
case './icons/plus.ts': return import('./plus-BozRZtI9-C_eo1CZe.js');
case './icons/pod.ts': return import('./pod-C6zQzc5v-BVzErwPy.js');
case './icons/pre-confirmed-load.ts': return import('./pre-confirmed-load-Clmr6f3Z-5ckg655J.js');
case './icons/print.ts': return import('./print-nCSFLfAt-Bnx_LkO9.js');
case './icons/profile.ts': return import('./profile-CfCDOHFO-D6HeZbt0.js');
case './icons/question-dot.ts': return import('./question-dot-SH4BtV91-C5BsespG.js');
case './icons/receipt.ts': return import('./receipt-W3N4N7BR-DktV62aL.js');
case './icons/redo.ts': return import('./redo-C_ig5IiQ-3uIu3LS-.js');
case './icons/refresh.ts': return import('./refresh-BA1X5WBw-D3u6qV_F.js');
case './icons/reloading.ts': return import('./reloading--qP0I2Kp-CnZa-YDc.js');
case './icons/road.ts': return import('./road-DcwLA5Nz-BZQQXk5u.js');
case './icons/round-trip.ts': return import('./round-trip-v4tpsoDb-DGZjxZ64.js');
case './icons/satellite.ts': return import('./satellite-CpgBwjL_-CZoHtgXE.js');
case './icons/search.ts': return import('./search-BIIUWayo-CwW57AaP.js');
case './icons/send.ts': return import('./send-CBDcAboE-BfEW04T9.js');
case './icons/share.ts': return import('./share-CqI6kG7e-BTCH2LkS.js');
case './icons/ship.ts': return import('./ship-DjlGWJKe-IquztDmw.js');
case './icons/signal.ts': return import('./signal-CuORWWr--vaNX2ML8.js');
case './icons/sparkle.ts': return import('./sparkle-DpbNJZD1-BgD2caJp.js');
case './icons/star.ts': return import('./star-RutNrvr5-B7xrsKik.js');
case './icons/swap.ts': return import('./swap-CZEx_RXN-E8njWaw7.js');
case './icons/tag-chevron.ts': return import('./tag-chevron-Bjy4zyjC-B6Vk5yI_.js');
case './icons/tag.ts': return import('./tag-B_ZrjYsk-BqlYl3Pr.js');
case './icons/telephone.ts': return import('./telephone-CFO-9HQC-cRwevQvy.js');
case './icons/terminal.ts': return import('./terminal-C-J7E16g-sh_M3pVh.js');
case './icons/timer.ts': return import('./timer-C3R38-AJ-Td3_07FX.js');
case './icons/tms-ready.ts': return import('./tms-ready-BTW3cb1y-DB33PExM.js');
case './icons/train.ts': return import('./train-DdfqWct7-CIX_s2pj.js');
case './icons/trash.ts': return import('./trash-BzxJFQPi-NYThmwW3.js');
case './icons/trend-down.ts': return import('./trend-down-BbAx8rfH-C_w_lwAi.js');
case './icons/trend-up.ts': return import('./trend-up-BCUJmXNS-CHYQNQEC.js');
case './icons/trophee.ts': return import('./trophee-CpFQni4M-arjAjuNg.js');
case './icons/truck.ts': return import('./truck-CBD0w2bS-BcslX4C7.js');
case './icons/undo.ts': return import('./undo-CvlR35i--CndyzTGh.js');
case './icons/united-states-flag.ts': return import('./united-states-flag-DQoSmeaD-BE8FMDi3.js');
case './icons/up.ts': return import('./up-D38a4YKJ-CXSVSdMB.js');
case './icons/upgrade.ts': return import('./upgrade-D9Tu6PyV-C4O1GLrj.js');
case './icons/upload.ts': return import('./upload-UOSrjt-x-4cg4KeeD.js');
case './icons/user.ts': return import('./user-D4sehfxu-ByCg9I94.js');
case './icons/wallet.ts': return import('./wallet-gglOXsti-D_IiLwcM.js');
case './icons/warehouse.ts': return import('./warehouse-CuDbuM9g-DyP0M2oS.js');
case './icons/wifi-off.ts': return import('./wifi-off-DXEb8fT5-CIl-rlAv.js');
case './icons/wifi.ts': return import('./wifi-ml2eHhY5-DrK5CFC0.js');
case './icons/x-small.ts': return import('./x-small-JY1ZeBut-B5K5zmiB.js');
case './icons/x.ts': return import('./x-lR-J5r80-mlFJ51Tq.js');
case './icons/zoom-in.ts': return import('./zoom-in-B4acf-r--DwvmbOXu.js');
case './icons/zoom-out.ts': return import('./zoom-out-Cytp3iGv-55VQt_SK.js');
default: return new Promise(function(resolve, reject) {
(typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
reject.bind(null, new Error("Unknown variable dynamic import: " + path))
);
})
}
}
/**
* Canonical list of available icon names that correspond to .ts files in the ./icons/ directory.
*/
const AVAILABLE_ICONS = [
'add-circle',
'alarm',
'alert-circle',
'anchor',
'arrow-left',
'arrow-right',
'arrow-sort-down',
'arrow-sort-up-down',
'arrow-sort-up',
'asterisk',
'attention',
'automatic',
'bank',
'bell-cancel',
'bell',
'blind-bol',
'board',
'bol',
'bolt-off',
'bolt',
'box',
'broadcast',
'burguer-menu',
'calendar',
'camera',
'canada-flag',
'caret-down',
'caret-left',
'caret-right',
'caret-up',
'carrier-contract',
'chat',
'check',
'clip',
'clock',
'clown',
'code',
'comment',
'company',
'contract',
'copy',
'corner-down-r',
'corner-down',
'corner-up',
'delivery',
'dislike',
'document-csv',
'document-file',
'document-image',
'dollar',
'dots-horizontal',
'dots-vertical',
'double-caret-left',
'double-caret-right',
'down',
'download',
'dropdown',
'email-filled',
'email',
'export',
'eye',
'fast',
'favorite',
'file',
'filter',
'flag',
'folder',
'funnel',
'gear',
'graph',
'hand-tap',
'high-signal',
'history',
'home',
'hourglass',
'import-2',
'import',
'indeterminate',
'invoice',
'invoice-items',
'info',
'kanban',
'like',
'link',
'list',
'light-bulb',
'loadsmart-logo',
'log-out',
'low-signal',
'map',
'medal',
'megaphone',
'mexico-flag',
'minus',
'network-signal',
'no-awarded',
'notes',
'notes-lock',
'order',
'package-tracking',
'padlock-open',
'padlock',
'pencil',
'phone',
'pin-map',
'pin',
'pin-filled',
'plugs',
'plus',
'pod',
'pre-confirmed-load',
'print',
'profile',
'question-dot',
'receipt',
'redo',
'refresh',
'reloading',
'road',
'round-trip',
'satellite',
'search',
'send',
'share',
'ship',
'signal',
'sparkle',
'star',
'swap',
'tag-chevron',
'tag',
'telephone',
'terminal',
'timer',
'tms-ready',
'train',
'trash',
'trend-down',
'trend-up',
'trophee',
'truck',
'undo',
'united-states-flag',
'up',
'upgrade',
'upload',
'user',
'wallet',
'warehouse',
'wifi-off',
'wifi',
'x-small',
'x',
'zoom-in',
'zoom-out',
];
const DEPRECATED_OR_ALIAS_ICONS = {
'arrow-corner-up': { aliasFor: 'corner-up', deprecated: true },
'arrow-download': { aliasFor: 'download', deprecated: true },
'arrow-upload': { aliasFor: 'upload', deprecated: true },
back: { aliasFor: 'arrow-left', deprecated: true },
close: { aliasFor: 'x' },
'info-circle': { aliasFor: 'alert-circle', deprecated: true },
next: { aliasFor: 'arrow-right', deprecated: true },
question: { aliasFor: 'question-dot', deprecated: true },
'up-down': { aliasFor: 'arrow-sort-up-down', deprecated: true },
};
const ICON_DATA_MAP = new Map();
function getLoader(iconName) {
return () => __variableDynamicImportRuntime0__(`./icons/${iconName}.ts`);
}
// 1. Populate map with canonical icons from AVAILABLE_ICONS
AVAILABLE_ICONS.forEach((iconName) => {
ICON_DATA_MAP.set(iconName, {
loader: getLoader(iconName),
deprecated: false,
});
});
// 2. Populate map with deprecated or alias icons, potentially overwriting if an AVAILABLE_ICON is also explicitly configured (e.g. to mark it as deprecated but loading itself)
Object.entries(DEPRECATED_OR_ALIAS_ICONS).forEach(([name, config]) => {
const iconNameKey = name;
if (!AVAILABLE_ICONS.includes(config.aliasFor)) {
console.error(`Configuration Error: Icon "${iconNameKey}" is an alias for "${config.aliasFor}" ` +
`which is not a recognized icon name in AVAILABLE_ICONS. ` +
`Skipping this entry in ICON_DATA_MAP. Please fix the configuration in DEPRECATED_OR_ALIAS_ICONS.`);
return;
}
const isDeprecated = 'deprecated' in config ? config.deprecated : false;
ICON_DATA_MAP.set(iconNameKey, {
// Use the actual icon name to load, not the alias or deprecated one
loader: getLoader(config.aliasFor),
deprecated: isDeprecated,
aliasFor: config.aliasFor,
});
});
var iconPlaceholder = b `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="44" height="44" x="2" y="2" fill="currentColor" rx="4"/></svg>`;
var _Icon_setError, _Icon_loadIcon;
/**
* The icon's `color` and `size` are intentionally not set by default so that they can be customized via:
* - setting color and size CSS custom properties
* - setting color and size attributes
* Notice that setting color and size through their attributes will override any set CSS custom properties!
*/
class Icon extends r$4 {
static get properties() {
return {
name: { type: String, reflect: true },
size: { type: String },
color: { type: String },
status: { type: String, state: true },
};
}
static define() {
try {
window.customElements.define('m-icon', Icon);
}
catch (error) {
console.error(`Failed to define component m-icon: ${error}. Please, ensure definitions are compatible so the application does not break or have bugs due to overridden definitions.`);
}
}
constructor() {
super();
this.icon = null;
this.status = 'idle';
_Icon_setError.set(this, (message) => {
this.status = 'error';
this.setAttribute('data-error', message);
});
_Icon_loadIcon.set(this, async () => {
this.icon = null;
this.status = 'loading';
const providedIconName = (this.name ??
this.getAttribute('name'));
if (providedIconName == null) {
__classPrivateFieldGet(this, _Icon_setError, "f").call(this, 'Missing icon name');
return;
}
const iconDetails = ICON_DATA_MAP.get(providedIconName);
if (!iconDetails) {
__classPrivateFieldGet(this, _Icon_setError, "f").call(this, `Icon "${providedIconName}" is not a recognized icon. Please check the icon name.`);
return;
}
const { loader, deprecated, aliasFor } = iconDetails;
if (deprecated) {
let warningMessage = `Icon "${providedIconName}" is deprecated.`;
if (aliasFor && aliasFor !== providedIconName) {
warningMessage += ` Please use "${aliasFor}" instead.`;
}
console.warn(warningMessage);
}
try {
const { default: iconModule } = (await loader());
this.removeAttribute('data-error');
this.icon = iconModule;
this.status = 'loaded';
}
catch (e) {
console.error(`Error loading icon module for "${aliasFor}" (requested as "${providedIconName}"):`, e);
__classPrivateFieldGet(this, _Icon_setError, "f").call(this, `Failed to load icon "${aliasFor}" (requested as "${providedIconName}"). Check console for details.`);
}
});
this.icon = null;
this.status = 'idle';
}
connectedCallback() {
super.connectedCallback();
__classPrivateFieldGet(this, _Icon_loadIcon, "f").call(this);
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('name')) {
__classPrivateFieldGet(this, _Icon_loadIcon, "f").call(this);
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('size') && this.size != null) {
this.style.setProperty('--m-icon-size', `${parseInt(String(this.size), 10) || 16}px`);
}
if (changedProperties.has('color') && this.color != null) {
this.style.setProperty('--m-icon-color', toCSSValue(this.color));
}
}
render() {
if (this.status === 'error') {
return iconPlaceholder;
}
return this.icon;
}
}
_Icon_setError = new WeakMap(), _Icon_loadIcon = new WeakMap();
Icon.styles = [styles$G()];
Icon.define();
var _Accordion_instances, _Accordion_accordionTrigger_get, _Accordion_accordionPanel_get, _Accordion_accordionContent_get, _Accordion_handleExpand, _Accordion_toggle, _Accordion_handleTransition;
class Accordion extends Component {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
expanded: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-accordion', constructor: Accordion });
}
constructor() {
super();
_Accordion_instances.add(this);
_Accordion_handleTransition.set(this, () => {
if (this.expanded && !this.disabled) {
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get).style.height = 'auto';
}
});
this.disabled = false;
this.expanded = false;
this.resizeObserver = new ResizeObserver((records) => {
this.panelHeight = records[0].target.scrollHeight;
});
}
firstUpdated() {
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionContent_get).style.transition = 'visibility 0.35s';
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionContent_get).setAttribute('role', 'region');
this.resizeObserver.observe(__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get));
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get).addEventListener('transitionend', __classPrivateFieldGet$1(this, _Accordion_handleTransition, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('expanded') ||
changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Accordion_instances, "m", _Accordion_handleExpand).call(this);
}
}
disconnectedCallback() {
super.disconnectedCallback();
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get).removeEventListener('transitionend', __classPrivateFieldGet$1(this, _Accordion_handleTransition, "f"));
this.resizeObserver.disconnect();
}
render() {
return x `
<article class="m-accordion">
<h3 class="m-accordion-header">
<button
id="accordion-trigger"
class="m-accordion-trigger"
@click="${__classPrivateFieldGet$1(this, _Accordion_instances, "m", _Accordion_toggle)}"
?disabled=${Boolean(this.disabled)}
aria-controls="section"
tabindex="0"
type="button"
>
<slot name="title"></slot>
<m-icon name="caret-down"></m-icon>
</button>
</h3>
<section
id="section"
class="m-accordion-panel"
aria-labelledby="accordion-trigger"
>
<slot name="content"></slot>
</section>
</article>
`;
}
}
_Accordion_handleTransition = new WeakMap(), _Accordion_instances = new WeakSet(), _Accordion_accordionTrigger_get = function _Accordion_accordionTrigger_get() {
return this.renderRoot.querySelector('.m-accordion-trigger');
}, _Accordion_accordionPanel_get = function _Accordion_accordionPanel_get() {
return this.renderRoot.querySelector('.m-accordion-panel');
}, _Accordion_accordionContent_get = function _Accordion_accordionContent_get() {
return this.querySelector('m-accordion-content');
}, _Accordion_handleExpand = function _Accordion_handleExpand() {
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionTrigger_get).setAttribute('aria-expanded', `${this.expanded && !this.disabled}`);
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get).style.height = `${this.panelHeight}px`;
if (this.expanded && !this.disabled) {
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionContent_get).style.visibility = 'visible';
}
else {
setTimeout(() => {
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionPanel_get).style.height = '0px';
__classPrivateFieldGet$1(this, _Accordion_instances, "a", _Accordion_accordionContent_get).style.visibility = 'hidden';
});
}
}, _Accordion_toggle = function _Accordion_toggle() {
this.expanded = !this.expanded;
this.emit('toggle', {
detail: { name: 'accordion', value: this.expanded },
});
};
Accordion.styles = [styles$H()];
Accordion.define();
class AccordionTitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-accordion-title',
constructor: AccordionTitle,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'button');
this.slot = 'title';
}
render() {
return x `
<slot name="leading"></slot>
<div class="m-accordion-text"><slot></slot></div>
`;
}
}
AccordionTitle.styles = [accordionTitleStyles()];
AccordionTitle.define();
class AccordionContent extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-accordion-content',
constructor: AccordionContent,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'content';
}
render() {
return x `<div class="m-accordion-content"><slot></slot></div>`;
}
}
AccordionContent.styles = [accordionContentStyles()];
AccordionContent.define();
function avatarStyles() {
return i$9 `
:host {
--m-avatar-size: 32px;
}
.avatar {
display: flex;
align-items: center;
justify-content: center;
width: var(--m-avatar-size);
height: var(--m-avatar-size);
border-radius: 50%;
background-color: ${getColor('color-primary-20')};
color: ${getColor('color-primary-60')};
font-family: ${getToken$1('font-family-title')};
line-height: ${getToken$1('line-height-1')};
font-size: ${getToken$1('font-size-2')};
font-weight: ${getToken$1('font-weight-bold')};
}
`;
}
var _Avatar_instances, _Avatar_getInitials;
class Avatar extends Component {
constructor() {
super(...arguments);
_Avatar_instances.add(this);
}
static get properties() {
return {
name: { type: String, reflect: true },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-avatar',
constructor: Avatar,
});
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('size') && this.size != null) {
this.style.setProperty('--m-avatar-size', `${parseInt(String(this.size), 10) || 32}px`);
}
}
render() {
return x `<div class="avatar">${__classPrivateFieldGet$1(this, _Avatar_instances, "m", _Avatar_getInitials).call(this)}</div>`;
}
}
_Avatar_instances = new WeakSet(), _Avatar_getInitials = function _Avatar_getInitials() {
return this.name
.split(' ')
.map((name) => name[0])
.join('');
};
Avatar.styles = [avatarStyles()];
Avatar.define();
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const o$3=o=>o??E$1;
function styles$F(selector = '#button') {
return i$9 `
:host {
${typography('button-md')};
contain: layout style;
--m-button-background-color: transparent;
--m-button-base-size: ${getToken$1('global-height-default')};
--m-button-border-color: ${getColor('color-neutral-90')};
--m-button-border-radius: ${getToken$1('border-radius-s')};
--m-button-color: ${getColor('color-text-secondary')};
--m-button-outline-color: transparent;
--m-button-outline-offset: 2px;
--m-button-padding-x: ${getToken$1('spacing-4')};
--m-button-padding-y: ${getToken$1('spacing-3')};
display: inline-block;
min-block-size: var(--m-button-base-size);
block-size: var(--m-button-base-size);
border-radius: var(--m-button-border-radius);
}
:host([hidden]) {
display: none;
}
:host([size='small']) {
--m-button-base-size: ${getToken$1('global-height-small')};
}
:host([size='large']) {
--m-button-base-size: ${getToken$1('global-height-large')};
}
:host([variant|='icon']) {
--m-button-border-radius: ${getToken$1('border-radius-circle')};
min-inline-size: var(--m-button-base-size);
inline-size: var(--m-button-base-size);
min-block-size: var(--m-button-base-size);
block-size: var(--m-button-base-size);
}
${r$8(selector)} {
${transition([
{ property: 'color' },
{ property: 'background-color' },
{ property: 'border-color' },
{ property: 'outline-color' },
])};
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
block-size: 100%;
inline-size: 100%;
box-sizing: border-box;
font: inherit;
text-decoration: none;
gap: ${getToken$1('spacing-2')};
padding-inline: var(--m-button-padding-x);
padding-block: var(--m-button-padding-y);
background-color: var(--m-button-background-color);
color: var(--m-button-color);
border: 1px solid var(--m-button-border-color);
border-radius: var(--m-button-border-radius);
outline: 1px solid var(--m-button-outline-color);
outline-offset: var(--m-button-outline-offset);
}
:host(:disabled) {
cursor: default;
}
:host(:disabled) * {
pointer-events: none;
}
:host(:enabled:focus-within) {
--m-button-outline-color: ${getColor('color-primary-100')};
}
:host(:enabled:hover) {
--m-button-background-color: ${getColor('color-background-inverted')};
--m-button-border-color: ${getColor('color-background-inverted')};
--m-button-color: ${getColor('color-text-inverted')};
}
::slotted(*) {
display: inline-flex;
align-items: center;
${p$2(0)};
${m$1(0)};
pointer-events: none;
}
slot[name='leading']::slotted(span),
slot[name='trailing']::slotted(span) {
justify-content: center;
}
`;
}
function styles$E() {
return [
styles$F(),
i$9 `
:host([variant='primary']) {
--m-button-background-color: ${getColor('color-primary-60')};
--m-button-border-color: ${getColor('color-primary-60')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant='primary']:disabled) {
--m-button-background-color: ${getColor('color-primary-20')};
--m-button-border-color: ${getColor('color-primary-20')};
}
:host([variant='primary']:enabled:focus-within) {
--m-button-border-color: ${getColor('color-primary-60')};
--m-button-outline-color: ${getColor('color-primary-60')};
}
:host([variant='primary']:not([loading]):enabled:hover),
:host([variant='primary']:not([loading]):enabled:active) {
--m-button-background-color: ${getColor('color-primary-100')};
--m-button-border-color: ${getColor('color-primary-100')};
}
:host([variant='primary'][loading]) {
--m-button-background-color: ${getColor('color-primary-60')};
--m-button-border-color: ${getColor('color-primary-60')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant='secondary']) {
--m-button-background-color: transparent;
--m-button-border-color: ${getColor('color-primary-100')};
--m-button-color: ${getColor('color-primary-100')};
}
:host([variant='secondary']:disabled) {
--m-button-border-color: ${getColor('color-text-disabled')};
--m-button-color: ${getColor('color-text-disabled')};
}
:host([variant='secondary']:enabled:focus-within) {
--m-button-border-color: ${getColor('color-primary-100')};
--m-button-color: ${getColor('color-primary-100')};
--m-button-outline-color: ${getColor('color-primary-60')};
}
:host([variant='secondary']:not([loading]):enabled:hover),
:host([variant='secondary']:not([loading]):enabled:active) {
--m-button-background-color: ${getColor('color-background-tertiary')};
--m-button-border-color: ${getColor('color-primary-60')};
--m-button-color: ${getColor('color-primary-60')};
}
:host([variant='secondary'][loading]) {
--m-button-background-color: transparent;
--m-button-border-color: ${getColor('color-primary-100')};
--m-button-color: ${getColor('color-primary-100')};
}
:host([variant='tertiary']) {
--m-button-background-color: transparent;
--m-button-border-color: transparent;
--m-button-color: ${getColor('color-primary-100')};
}
:host([variant='tertiary']:disabled) {
--m-button-color: ${getColor('color-text-disabled')};
}
:host([variant='tertiary']:enabled:focus-within) {
--m-button-color: ${getColor('color-primary-100')};
--m-button-outline-color: ${getColor('color-primary-60')};
}
:host([variant='tertiary']:enabled:hover) {
--m-button-background-color: ${getColor('color-background-tertiary')};
--m-button-border-color: ${getColor('color-background-tertiary')};
--m-button-color: ${getColor('color-primary-60')};
}
:host([variant='tertiary']) #button:active {
--m-button-background-color: ${getColor('color-neutral-20')};
--m-button-border-color: ${getColor('color-neutral-20')};
--m-button-color: ${getColor('color-primary-60')};
}
:host([variant='tertiary'][loading]) {
--m-button-background-color: transparent;
--m-button-border-color: transparent;
--m-button-color: ${getColor('color-primary-100')};
}
:host([variant='warning']) {
--m-button-background-color: ${getColor('color-warning-60')};
--m-button-border-color: ${getColor('color-warning-60')};
--m-button-color: ${getColor('color-text-primary')};
}
:host([variant='warning']:disabled) {
--m-button-background-color: ${getColor('color-warning-20')};
--m-button-border-color: ${getColor('color-warning-20')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant='warning']:enabled:focus-within) {
--m-button-background-color: ${getColor('color-warning-60')};
--m-button-outline-color: ${getColor('color-warning-60')};
}
:host([variant='warning']:not([loading]):enabled:hover),
:host([variant='warning']:not([loading]):enabled:active) {
--m-button-background-color: ${getColor('color-warning-100')};
--m-button-border-color: ${getColor('color-warning-100')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant='warning'][loading]) {
--m-button-background-color: ${getColor('color-warning-60')};
--m-button-border-color: ${getColor('color-warning-60')};
--m-button-color: ${getColor('color-text-primary')};
}
:host([variant='danger']) {
--m-button-background-color: ${getColor('color-danger-60')};
--m-button-border-color: ${getColor('color-danger-60')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant='danger']:disabled) {
--m-button-background-color: ${getColor('color-danger-20')};
--m-button-border-color: ${getColor('color-danger-20')};
}
:host([variant='danger']:enabled:focus-within) {
--m-button-background-color: ${getColor('color-danger-60')};
--m-button-outline-color: ${getColor('color-danger-60')};
}
:host([variant='danger']:not([loading]):enabled:hover),
:host([variant='danger']:not([loading]):enabled:active) {
--m-button-background-color: ${getColor('color-danger-100')};
--m-button-border-color: ${getColor('color-danger-100')};
}
:host([variant='danger'][loading]) {
--m-button-background-color: ${getColor('color-danger-60')};
--m-button-border-color: ${getColor('color-danger-60')};
--m-button-color: ${getColor('color-text-inverted')};
}
:host([variant|='icon']) {
--m-button-color: ${getColor('color-neutral-90')};
--m-button-padding-x: ${getToken$1('spacing-1')};
--m-button-padding-y: ${getToken$1('spacing-1')};
}
:host([variant='icon']) {
--m-button-background-color: ${getColor('color-background-tertiary')};
--m-button-border-color: ${getColor('color-background-tertiary')};
}
:host([variant='icon-secondary']) {
--m-button-background-color: transparent;
--m-button-border-color: transparent;
}
:host([variant|='icon']) slot[name='leading']::slotted(*),
:host([variant|='icon']) slot[name='trailing']::slotted(*) {
display: none;
}
:host([variant|='icon']:disabled) {
--m-button-color: ${getColor('color-neutral-40')};
}
:host([variant='icon']:disabled) {
--m-button-background-color: ${getColor('color-neutral-20')};
--m-button-border-color: ${getColor('color-neutral-20')};
}
:host([variant='icon-secondary']:disabled) {
--m-button-background-color: transparent;
--m-button-border-color: transparent;
}
:host([variant|='icon']:enabled:focus-within) {
--m-button-color: ${getColor('color-primary-60')};
--m-button-outline-color: ${getColor('color-primary-60')};
}
:host([variant='icon']:enabled:focus-within) {
--m-button-background-color: ${getColor('color-neutral-20')};
}
:host([variant='icon-secondary']:enabled:focus-within) {
--m-button-background-color: transparent;
}
:host([variant|='icon']:not([loading]):enabled:hover),
:host([variant|='icon']:not([loading]):enabled:active) {
--m-button-color: ${getColor('color-primary-60')};
}
:host([variant='icon']:not([loading]):enabled:hover),
:host([variant='icon']:not([loading]):enabled:active) {
--m-button-background-color: ${getColor('color-background-highlight')};
--m-button-border-color: ${getColor('color-background-highlight')};
}
:host([variant|='icon']:not([loading]):enabled:hover),
:host([variant|='icon']:not([loading]):enabled:active) {
--m-button-background-color: transparent;
--m-button-border-color: transparent;
}
:host([size='small']:not([variant|='icon'])) {
--m-button-padding-y: ${getToken$1('spacing-2')};
}
:host([size='large']:not([variant|='icon'])) {
--m-button-padding-y: ${getToken$1('spacing-4')};
}
:host([size='small']) {
${typography('button-sm')};
}
:host([size='large']) {
${typography('button-lg')};
}
#loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
background-color: var(--m-button-background-color);
color: var(--m-button-color);
border: 1px solid var(--m-button-border-color);
border-radius: var(--m-button-border-radius);
z-index: 1;
}
:host(:not([variant|='icon'])[loading]) *:not(#loader) {
visibility: hidden;
}
:host #loader {
--m-dot-size: 8px;
}
:host([size='small']) #loader {
--m-dot-size: 6px;
}
:host([size='large']) #loader {
--m-dot-size: 10px;
}
`,
];
}
const DEFAULT_SIZE$2 = 10;
function styles$D() {
return i$9 `
:host {
color: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: ${getToken$1('spacing-0-5')};
}
:host svg {
block-size: var(--m-dot-size, ${DEFAULT_SIZE$2}px);
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
:host svg circle {
animation: fade-out 1s infinite;
}
:host #dot-1 {
animation-delay: 0s;
}
:host #dot-2 {
animation-delay: 0.1s;
}
:host #dot-3 {
animation-delay: 0.2s;
}
`;
}
var _DotsLoader_instances, _DotsLoader_getSize;
function createDot(id) {
return b$2 `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 48 48"><circle id=dot-${id} cx="24" cy="24" r="24"/></svg>`;
}
class DotsLoader extends Component {
constructor() {
super(...arguments);
_DotsLoader_instances.add(this);
}
static get properties() {
return {
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-dots-loader', constructor: DotsLoader });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('size')) {
this.style.setProperty('--m-dot-size', __classPrivateFieldGet$1(this, _DotsLoader_instances, "m", _DotsLoader_getSize).call(this));
}
}
render() {
return x `${[createDot(1), createDot(2), createDot(3)]}`;
}
}
_DotsLoader_instances = new WeakSet(), _DotsLoader_getSize = function _DotsLoader_getSize() {
const parsedSize = parseInt(this.size ?? String(DEFAULT_SIZE$2), 10);
if (Number.isNaN(parsedSize)) {
return `${DEFAULT_SIZE$2}px`;
}
return `${parsedSize || DEFAULT_SIZE$2}px`;
};
DotsLoader.styles = [styles$D()];
DotsLoader.define();
var _Button_handleDisabledChange, _Button_handleClick, _Button_handleLinkClick, _Button_handleSubmit, _Button_handleReset, _Button_isDisabled, _Button_isLink;
class Button extends WithFormComponentMixin(Component) {
static get properties() {
return {
...super.properties,
loading: { type: Boolean, reflect: true },
variant: { type: String, reflect: true },
size: { type: String, reflect: true },
type: { type: String, reflect: true },
formaction: { type: String },
formenctype: { type: String },
formmethod: { type: String },
formnovalidate: { type: Boolean },
formtarget: { type: String },
// anchor attributes
href: { type: String, reflect: true },
target: { type: String },
download: { type: String },
};
}
static define() {
Component.define({ name: 'm-button', constructor: Button });
}
constructor() {
super();
_Button_handleDisabledChange.set(this, (disabled) => {
if (this.button) {
this.button.disabled = disabled;
}
});
_Button_handleClick.set(this, (event) => {
if (__classPrivateFieldGet$1(this, _Button_isDisabled, "f").call(this)) {
event.preventDefault();
event.stopPropagation();
return;
}
if (this.type === 'submit') {
__classPrivateFieldGet$1(this, _Button_handleSubmit, "f").call(this);
}
else if (this.type === 'reset') {
__classPrivateFieldGet$1(this, _Button_handleReset, "f").call(this);
}
});
_Button_handleLinkClick.set(this, (event) => {
/**
* TODO: check why clicking the link is not working with the shortcut (Ctrl+Option+Space) Voice Over suggests.
* We can use https://www.w3.org/WAI/ARIA/apg/patterns/link/examples/link/ as a reference.
*/
if (__classPrivateFieldGet$1(this, _Button_isDisabled, "f").call(this)) {
event.preventDefault();
event.stopPropagation();
}
});
_Button_handleSubmit.set(this, () => {
const form = this.getActualForm();
if (!form) {
return;
}
const hasSubmitted = performVirtualFormSubmission(this, form);
if (hasSubmitted) {
this.focus();
}
else {
form.reportValidity();
}
});
_Button_handleReset.set(this, () => {
const form = this.getActualForm();
form?.reset();
});
_Button_isDisabled.set(this, () => {
return Boolean(this.disabled) || Boolean(this.loading);
});
_Button_isLink.set(this, () => {
return Boolean(this.href);
});
this.disabled = false;
this.loading = false;
this.size = 'default';
this.type = 'button';
this.variant = 'secondary';
this.target = '_self';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Button_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Button_handleClick, "f"));
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('disabled') || changedProperties.has('loading')) {
__classPrivateFieldGet$1(this, _Button_handleDisabledChange, "f").call(this, __classPrivateFieldGet$1(this, _Button_isDisabled, "f").call(this));
}
}
// eslint-disable-next-line class-methods-use-this
renderContent() {
return x `
<slot name="leading"></slot>
<slot></slot>
<slot name="trailing"></slot>
`;
}
renderAsButton() {
return x `
<button
id="button"
type=${this.type ?? 'button'}
formaction=${o$3(this.formaction)}
formenctype=${o$3(this.formenctype)}
formmethod=${o$3(this.formmethod)}
formnovalidate=${o$3(this.formnovalidate)}
formtarget=${o$3(this.formtarget)}
?disabled="${__classPrivateFieldGet$1(this, _Button_isDisabled, "f").call(this)}"
>
${this.renderContent()}
</button>
`;
}
renderAsLink() {
return x `
<a
id="button"
aria-disabled=${this.disabled ? 'true' : 'false'}
tabindex=${this.disabled ? '-1' : E$1}
href=${o$3(this.href)}
target=${o$3(this.target)}
download=${o$3(this.download)}
rel=${this.target === '_blank' ? 'noreferrer noopener' : E$1}
@click=${__classPrivateFieldGet$1(this, _Button_handleLinkClick, "f")}
>
${this.renderContent()}
</a>
`;
}
render() {
const isLink = __classPrivateFieldGet$1(this, _Button_isLink, "f").call(this);
return x `
<!-- TODO: Replace this with the loading dots component as soon as it is ready. -->
${this.loading && !['icon', 'icon-secondary'].includes(this.variant)
? x `<m-dots-loader id="loader"></m-dots-loader>`
: E$1}
${isLink ? this.renderAsLink() : this.renderAsButton()}
`;
}
get button() {
return this.renderRoot?.querySelector('button') ?? null;
}
get anchor() {
return this.renderRoot?.querySelector('a') ?? null;
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _Button_handleDisabledChange, "f").call(this, disabled);
}
}
_Button_handleDisabledChange = new WeakMap(), _Button_handleClick = new WeakMap(), _Button_handleLinkClick = new WeakMap(), _Button_handleSubmit = new WeakMap(), _Button_handleReset = new WeakMap(), _Button_isDisabled = new WeakMap(), _Button_isLink = new WeakMap();
Button.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
Button.styles = [styles$E()];
Button.define();
var _BackButton_handleLabelChange;
class BackButton extends Button {
static get properties() {
return {
...Button.properties,
label: { type: String },
};
}
static define() {
Component.define({ name: 'm-back-button', constructor: BackButton });
}
constructor() {
super();
_BackButton_handleLabelChange.set(this, (label) => {
// eslint-disable-next-line prefer-destructuring
const button = this.button;
if (!button) {
return;
}
if (label) {
button.setAttribute('aria-label', label);
}
else {
button.removeAttribute('aria-label');
}
});
this.variant = 'icon';
this.type = 'button';
this.label = 'Navigate back';
}
connectedCallback() {
super.connectedCallback();
this.slot = 'back-button';
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('label')) {
__classPrivateFieldGet$1(this, _BackButton_handleLabelChange, "f").call(this, this.label);
}
}
// eslint-disable-next-line class-methods-use-this
renderContent() {
return x `<m-icon name="arrow-left"></m-icon>`;
}
}
_BackButton_handleLabelChange = new WeakMap();
BackButton.define();
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t$1={ATTRIBUTE:1},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const e$1=e$2(class extends i$2{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}});
function styles$C() {
return i$9 `
:host {
--m-host-size: 24px;
--m-badge-size: 12px;
--m-badge-border-radius: ${getToken$1('border-radius-circle')};
display: inline-flex;
position: relative;
inline-size: var(--m-host-size);
block-size: var(--m-host-size);
}
:host([size='small']) {
--m-host-size: 16px;
--m-badge-size: 8px;
}
.badge {
display: flex;
position: absolute;
top: 0;
inline-size: var(--m-badge-size);
block-size: var(--m-badge-size);
align-items: center;
justify-content: center;
color: ${getColor('color-text-inverted')};
background-color: ${getColor('color-text-error')};
font-size: ${getToken$1('font-size-1')};
border-radius: var(--m-badge-border-radius);
}
:host([placement='top-left']) .badge {
right: calc(100% - var(--m-badge-size) / 2);
}
:host([placement='top-right']) .badge {
left: calc(100% - var(--m-badge-size) / 2);
}
.badge.-hidden {
display: none;
}
:host([size='default']) .badge.-large-badge {
inline-size: 18px;
--m-badge-border-radius: ${getToken$1('border-radius-m')};
}
:host([size='default']) .badge.-extra-large-badge {
inline-size: 24px;
--m-badge-border-radius: ${getToken$1('border-radius-m')};
}
`;
}
var _Badge_instances, _Badge_counter_get, _Badge_formatCounter;
class Badge extends Component {
static get properties() {
return {
counter: { type: Number, reflect: true },
placement: { type: String, reflect: true },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-badge', constructor: Badge });
}
constructor() {
super();
_Badge_instances.add(this);
this.counter = 1;
this.placement = 'top-right';
this.size = 'default';
}
render() {
return x `
<slot></slot>
<span
class=${e$1({
badge: true,
'-hidden': __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get) <= 0,
'-large-badge': __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get) >= 10 && __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get) < 100,
'-extra-large-badge': __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get) >= 100,
})}
>${__classPrivateFieldGet$1(this, _Badge_instances, "m", _Badge_formatCounter).call(this)}</span
>
`;
}
}
_Badge_instances = new WeakSet(), _Badge_counter_get = function _Badge_counter_get() {
if (typeof this.counter !== 'number' ||
Number.isNaN(this.counter) ||
this.counter < 0) {
return 0;
}
return this.counter;
}, _Badge_formatCounter = function _Badge_formatCounter() {
if (this.size === 'default') {
return __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get) > 99 ? '99+' : __classPrivateFieldGet$1(this, _Badge_instances, "a", _Badge_counter_get);
}
return E$1;
};
Badge.styles = [styles$C()];
Badge.define();
class BannerActionPrimary extends Button {
static define() {
Component.define({
name: 'm-banner-action-primary',
constructor: BannerActionPrimary,
});
}
constructor() {
super();
this.size = 'small';
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-action-primary should be assigned inside the banner-actions component.
this.setAttribute('slot', 'primary-action');
}
}
BannerActionPrimary.define();
class BannerActionSecondary extends Button {
static define() {
Component.define({
name: 'm-banner-action-secondary',
constructor: BannerActionSecondary,
});
}
constructor() {
super();
this.variant = 'tertiary';
this.size = 'small';
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-action-secondary should be assigned inside the banner-actions component.
this.setAttribute('slot', 'secondary-action');
}
}
BannerActionSecondary.define();
function styles$B() {
return i$9 `
:host {
display: flex;
justify-content: flex-end;
gap: ${getToken$1('spacing-2')};
}
`;
}
class BannerActions extends Component {
static define() {
Component.define({
name: 'm-banner-actions',
constructor: BannerActions,
});
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-actions should be assigned inside the banner component.
this.setAttribute('slot', 'actions');
}
render() {
return x `
<slot name="secondary-action"></slot>
<slot name="primary-action"></slot>
`;
}
}
BannerActions.styles = [styles$B()];
BannerActions.define();
function styles$A() {
return i$9 `
:host {
${typography('body-md')};
color: ${getColor('color-text-primary')};
}
`;
}
class BannerDescription extends Component {
static define() {
Component.define({
name: 'm-banner-description',
constructor: BannerDescription,
});
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-description should be assigned inside the banner component.
this.setAttribute('slot', 'description');
}
render() {
return x `<slot></slot>`;
}
}
BannerDescription.styles = [styles$A()];
BannerDescription.define();
class BannerIcon extends Component {
static define() {
Component.define({
name: 'm-banner-icon',
constructor: BannerIcon,
});
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-icon should be assigned inside the banner component.
this.setAttribute('slot', 'icon');
}
render() {
return x `<slot></slot>`;
}
}
BannerIcon.define();
function styles$z() {
return i$9 `
:host {
${typography('body-md-bold')};
line-height: normal;
color: ${getColor('color-text-primary')};
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
class BannerTitle extends Component {
static define() {
Component.define({
name: 'm-banner-title',
constructor: BannerTitle,
});
}
connectedCallback() {
super.connectedCallback();
// This sets the slot to which the banner-title should be assigned inside the banner component.
this.setAttribute('slot', 'title');
}
render() {
return x `<slot></slot>`;
}
}
BannerTitle.styles = [styles$z()];
BannerTitle.define();
function styles$y() {
return i$9 `
:host {
display: block;
width: 100%;
}
:host([dismissed]) {
display: none;
}
.banner {
background-color: var(
--m-banner-background-color,
${getColor('color-background-secondary')}
);
border: var(--m-banner-border, 1px solid ${getColor('color-border-input')});
border-radius: var(--m-banner-border-radius, ${getToken$1('border-radius-m')});
padding-inline: var(--m-banner-padding-x, ${getToken$1('spacing-6')});
padding-block: var(--m-banner-padding-y, ${getToken$1('spacing-4')});
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: ${getToken$1('spacing-6')};
}
.banner.-success {
--m-banner-background-color: ${getColor('color-success-20')};
--m-banner-border: 1px solid ${getColor('color-success-20')};
--m-banner-icon-color: ${getColor('color-success-60')};
}
.banner.-warning {
--m-banner-background-color: ${getColor('color-warning-20')};
--m-banner-border: 1px solid ${getColor('color-warning-20')};
--m-banner-icon-color: ${getColor('color-warning-100')};
}
.banner.-danger {
--m-banner-background-color: ${getColor('color-danger-20')};
--m-banner-border: 1px solid ${getColor('color-danger-20')};
--m-banner-icon-color: ${getColor('color-danger-60')};
}
.banner.-marketing {
--m-banner-background-color: transparent;
--m-banner-icon-color: ${getColor('color-primary-60')};
background-image: repeating-linear-gradient(
10deg,
rgba(0, 215, 215, 0.15) 0%,
rgba(0, 215, 215, 0.15) 20%,
rgba(132, 241, 30, 0.15) 40%,
rgba(0, 215, 215, 0.15) 60%,
rgba(132, 241, 30, 0.15) 80%,
rgba(0, 215, 215, 0.15) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
border: none;
border-radius: ${getToken$1('border-radius-m')};
}
@media (prefers-reduced-motion: no-preference) {
.banner.-marketing {
animation: banner-glow-scroll 5s linear infinite;
}
@keyframes banner-glow-scroll {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
}
.banner.-with-description {
flex-direction: column;
}
.wrapper {
display: flex;
gap: ${getToken$1('spacing-6')};
align-items: center;
flex-grow: 1;
}
slot[name='icon'] > m-icon,
slot[name='icon']::slotted(*) {
--m-icon-size: var(--m-banner-icon-size, 24px);
color: var(--m-banner-icon-color, ${getColor('color-neutral-90')});
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: ${getToken$1('spacing-1')};
}
`;
}
const BASE_PIXELS = 16;
/**
* Convert the provided value from `px` to `rem` as lit's `CSSResult`.
*
* @example
* // Considering 1rem = 16px
* toRem(10); // returns '0.625rem'
* toRem('16px'); // returns '1rem'
*
* @param value value, in pixels, to convert.
* @param base value, in pixels, to be considered for 1rem.
*/
function toRem(value, base = BASE_PIXELS) {
return r$8(`${parseInt(String(value), 10) / base}rem`);
}
function styles$x() {
return i$9 `
:host {
--m-close-button-base-color: ${getColor('color-text-primary')};
--m-close-button-color: var(--m-close-button-base-color);
--m-close-button-background-color: transparent;
--m-close-button-outline-color: transparent;
--m-close-button-outline-offset: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: var(--button-size);
min-block-size: var(--button-size);
max-inline-size: var(--button-size);
max-block-size: var(--button-size);
inline-size: var(--button-size);
block-size: var(--button-size);
border: none;
border-radius: 50%;
outline: 1px solid var(--m-close-button-outline-color);
outline-offset: var(--m-close-button-outline-offset);
}
:host([hidden]) {
display: none;
}
:host([size='small']) {
--button-size: ${toRem('12px')};
}
:host([size='default']) {
--button-size: ${toRem('16px')};
}
:host([size='large']) {
--button-size: ${toRem('20px')};
}
button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
${m$1(0)};
${p$2(0)};
background-color: var(--m-close-button-background-color);
color: var(--m-close-button-color);
border: none;
border-radius: 50%;
min-inline-size: var(--button-size);
min-block-size: var(--button-size);
max-inline-size: var(--button-size);
max-block-size: var(--button-size);
inline-size: var(--button-size);
block-size: var(--button-size);
margin: 0;
padding: 0;
outline: none;
}
m-icon {
--m-icon-size: 0.75em;
}
:host(:not([disabled]):focus) {
--m-close-button-outline-color: var(--m-close-button-base-color);
}
:host(:not([inverted]):not([disabled]):hover) {
--m-close-button-color: ${getColor('color-text-inverted')};
--m-close-button-background-color: var(--m-close-button-base-color);
}
:host([inverted]) {
--m-close-button-color: ${getColor('color-text-inverted')};
--m-close-button-background-color: transparent;
}
:host([inverted]:not([disabled]):hover) {
--m-close-button-color: var(--m-close-button-base-color);
--m-close-button-background-color: ${getColor('color-text-inverted')};
}
:host([disabled]) {
--m-close-button-color: ${getColor('color-text-disabled')};
--m-close-button-background-color: transparent;
cursor: default;
pointer-events: none;
}
:host([disabled]) * {
pointer-events: none;
user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
:host {
${transition([{ property: 'outline-color' }])};
}
button {
${transition([
{ property: 'background-color' },
{ property: 'color' },
])};
}
}
`;
}
var _CloseButton_handleClick;
class CloseButton extends Component {
static get properties() {
return {
controls: { type: String },
disabled: { type: Boolean, reflect: true },
inverted: { type: Boolean, reflect: true },
label: { type: String },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-close-button', constructor: CloseButton });
}
constructor() {
super();
_CloseButton_handleClick.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
event.stopImmediatePropagation();
}
});
this.disabled = false;
this.inverted = false;
this.size = 'default';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _CloseButton_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _CloseButton_handleClick, "f"));
}
render() {
return x `
<button
type="button"
aria-controls=${this.controls || E$1}
aria-label=${this.label || E$1}
?disabled=${this.disabled}
>
<m-icon name="x"></m-icon>
</button>
`;
}
}
_CloseButton_handleClick = new WeakMap();
CloseButton.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
CloseButton.styles = [styles$x()];
CloseButton.define();
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const a=Symbol.for(""),o$2=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$2(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n$2(x);
const TEXT_CONTENT_HTML_TAGS = [
'a', // Links
'abbr', // Abbreviations
'address', // Contact information
'b', // Bring attention
'bdi', // Bidirectional text isolation
'bdo', // Bidirectional text override
'blockquote', // Quoted content
'button', // Buttons
'cite', // Citations
'code', // Code snippets
'data', // Machine-readable value
'dd', // Description details
'del', // Deleted text
'dfn', // Definition
'dt', // Description term
'em', // Emphasized text
'h1', // Headings
'h2',
'h3',
'h4',
'h5',
'h6',
'i', // Idiomatic text
'ins', // Inserted text
'kbd', // Keyboard input
'label', // Form labels
'legend', // Fieldset caption
'li', // List items
'mark', // Highlighted text
'meter', // Scalar measurement
'option', // Select options
'output', // Calculation result
'p', // Paragraphs
'pre', // Preformatted text
'q', // Short quotations
'rp', // Ruby parentheses
'rt', // Ruby text
's', // Strikethrough
'samp', // Sample output
'small', // Side comments
'span', // Generic inline container
'strong', // Strong importance
'sub', // Subscript
'summary', // Details summary
'sup', // Superscript
'td', // Table cell
'textarea', // Multiline input
'th', // Table header
'time', // Time
'u', // Unarticulated annotation
'var', // Variables
];
function styles$w() {
return i$9 `
:host {
--m-text-color: ${getColor('color-text-primary')};
--m-text-display: inline-block;
--m-text-max-width: 100%;
--m-text-padding: 0;
--m-text-margin: 0;
color: var(--m-text-color);
display: var(--m-text-display);
padding: var(--m-text-padding);
margin: var(--m-text-margin);
${typography()};
${transition([{ property: 'color' }])};
}
::slotted(:is(${r$8(TEXT_CONTENT_HTML_TAGS.join(','))})) {
color: inherit;
font: inherit;
}
:host([variant='body-lg-bold']) {
${typography('body-lg-bold')};
}
:host([variant='body-lg']) {
${typography('body-lg')};
}
:host([variant='body-md-bold-underline']) {
${typography('body-md-bold-underline')};
}
:host([variant='body-md-bold']) {
${typography('body-md-bold')};
}
:host([variant='body-md-underline']) {
${typography('body-md-underline')};
}
:host([variant='body-md']) {
${typography('body-md')};
}
:host([variant='body-sm-bold-underline']) {
${typography('body-sm-bold-underline')};
}
:host([variant='body-sm-bold']) {
${typography('body-sm-bold')};
}
:host([variant='body-sm-underline']) {
${typography('body-sm-underline')};
}
:host([variant='body-sm']) {
${typography('body-sm')};
}
:host([variant='button-lg']) {
${typography('button-lg')};
}
:host([variant='button-md']) {
${typography('button-md')};
}
:host([variant='button-sm']) {
${typography('button-sm')};
}
:host([variant='chips-md']) {
${typography('chips-md')};
}
:host([variant='chips-sm']) {
${typography('chips-sm')};
}
:host([variant='heading-lg-bold']) {
${typography('heading-lg-bold')};
}
:host([variant='heading-lg']) {
${typography('heading-lg')};
}
:host([variant='heading-md-bold']) {
${typography('heading-md-bold')};
}
:host([variant='heading-md']) {
${typography('heading-md')};
}
:host([variant='heading-sm-bold']) {
${typography('heading-sm-bold')};
}
:host([variant='heading-sm']) {
${typography('heading-sm')};
}
:host([variant='hero-lg-bold']) {
${typography('hero-lg-bold')};
}
:host([variant='hero-lg']) {
${typography('hero-lg')};
}
:host([variant='hero-md-bold']) {
${typography('hero-md-bold')};
}
:host([variant='hero-md']) {
${typography('hero-md')};
}
:host([variant='hero-sm-bold']) {
${typography('hero-sm-bold')};
}
:host([variant='hero-sm']) {
${typography('hero-sm')};
}
:host([variant='number-md']) {
${typography('number-md')};
}
:host([variant='number-sm']) {
${typography('number-sm')};
}
:host([variant='table-header-md']) {
${typography('table-header-md')};
}
:host([variant='table-header-sm']) {
${typography('table-header-sm')};
}
:host([ellipsized]) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-inline-size: var(--m-text-max-width);
}
`;
}
class Text extends Component {
static get properties() {
return {
as: { type: String, reflect: true },
color: { type: String, reflect: true },
ellipsized: { type: Boolean, reflect: true },
variant: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-text', constructor: Text });
}
constructor() {
super();
this.ellipsized = false;
this.variant = 'body-md';
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('color') && this.color) {
this.style.setProperty('--m-text-color', toCSSValue$1(this.color));
}
if (changedProperties.has('as') && this.as) {
const [, ariaLevel] = this.as.split('h');
if (ariaLevel) {
this.ariaLevel = ariaLevel;
this.role = 'heading';
}
else {
this.ariaLevel = null;
this.role = null;
}
}
}
render() {
return u `<slot></slot>`;
}
}
Text.styles = [styles$w()];
Text.define();
var _Banner_primaryAction, _Banner_handleDismissClick;
function getIcon(variant) {
switch (variant) {
case 'success': {
return 'check';
}
case 'warning':
case 'danger': {
return 'attention';
}
case 'marketing': {
return 'star';
}
case 'neutral':
default: {
return 'alert-circle';
}
}
}
function getPrimaryActionVariant(variant) {
switch (variant) {
case 'warning': {
return 'warning';
}
case 'danger': {
return 'danger';
}
case 'marketing':
case 'success':
case 'neutral':
default: {
return 'primary';
}
}
}
class Banner extends Component {
static get properties() {
return {
variant: { type: String },
dismissible: { type: Boolean },
dismissed: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-banner', constructor: Banner });
}
constructor() {
super();
/**
* Reference for the Primary Action
*/
_Banner_primaryAction.set(this, void 0);
_Banner_handleDismissClick.set(this, () => {
this.dismissed = true;
this.emit('dismiss');
});
this.variant = 'neutral';
this.dismissible = false;
this.dismissed = false;
}
get primaryAction() {
if (__classPrivateFieldGet$1(this, _Banner_primaryAction, "f") == null) {
__classPrivateFieldSet(this, _Banner_primaryAction, this.querySelector('m-banner-action-primary'), "f");
}
return __classPrivateFieldGet$1(this, _Banner_primaryAction, "f");
}
updated(changedProperties) {
super.updated(changedProperties);
// Force the primary action to have a variant based on the banner's variant
if (changedProperties.has('variant') && this.primaryAction != null) {
this.primaryAction.variant = getPrimaryActionVariant(this.variant);
}
}
render() {
if (this.dismissed) {
return E$1;
}
const hasDescription = this.querySelector(`*[slot='description']`) != null;
const hasActions = this.querySelector(`*[slot='actions']`) != null;
const closeButton = x `
<m-close-button
id="close"
label="Dismiss"
@click=${__classPrivateFieldGet$1(this, _Banner_handleDismissClick, "f")}
></m-close-button>
`;
return x `
<div
class=${e$1({
banner: true,
'-success': this.variant === 'success',
'-warning': this.variant === 'warning',
'-danger': this.variant === 'danger',
'-marketing': this.variant === 'marketing',
'-with-description': hasDescription,
})}
>
<div class="wrapper">
<slot name="icon">
<m-icon name="${getIcon(this.variant)}"></m-icon>
</slot>
<div class="content">
<slot name="title"></slot>
<slot name="description"></slot>
</div>
${this.dismissible && !hasActions ? closeButton : E$1}
</div>
<slot name="actions"></slot>
</div>
`;
}
}
_Banner_primaryAction = new WeakMap(), _Banner_handleDismissClick = new WeakMap();
Banner.styles = [styles$y()];
Banner.define();
var _BaseLayout_setOrRemoveProperty;
class BaseLayout extends Component {
constructor() {
super(...arguments);
_BaseLayout_setOrRemoveProperty.set(this, (cssVar, value) => {
if (value) {
this.style.setProperty(cssVar, toSpacingCSSValue(value));
}
else {
this.style.removeProperty(cssVar);
}
});
}
static get properties() {
return {
padding: { type: String },
paddingX: { type: String, attribute: 'padding-x' },
paddingY: { type: String, attribute: 'padding-y' },
paddingT: { type: String, attribute: 'padding-t' },
paddingB: { type: String, attribute: 'padding-b' },
paddingL: { type: String, attribute: 'padding-l' },
paddingR: { type: String, attribute: 'padding-r' },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return 'layout';
}
update(changedProperties) {
super.update(changedProperties);
const cssPropertiesPrefix = this.getCSSPropertiesPrefix();
if (changedProperties.has('padding')) {
this.style.setProperty(`--m-${cssPropertiesPrefix}-padding`, toSpacingCSSValue(this.padding));
}
if (changedProperties.has('paddingX')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-x`, this.paddingX);
}
if (changedProperties.has('paddingY')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-y`, this.paddingY);
}
if (changedProperties.has('paddingT')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-t`, this.paddingT);
}
if (changedProperties.has('paddingB')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-b`, this.paddingB);
}
if (changedProperties.has('paddingL')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-l`, this.paddingL);
}
if (changedProperties.has('paddingR')) {
__classPrivateFieldGet$1(this, _BaseLayout_setOrRemoveProperty, "f").call(this, `--m-${cssPropertiesPrefix}-padding-r`, this.paddingR);
}
}
render() {
return x `<slot></slot>`;
}
}
_BaseLayout_setOrRemoveProperty = new WeakMap();
function getBaseLayoutStyles(cssPropertiesPrefix) {
return i$9 `
:host {
/** reset layout custom properties to avoid inheritance */
--m-${r$8(cssPropertiesPrefix)}-padding-x: initial;
--m-${r$8(cssPropertiesPrefix)}-padding-y: initial;
--m-${r$8(cssPropertiesPrefix)}-padding-t: initial;
--m-${r$8(cssPropertiesPrefix)}-padding-r: initial;
--m-${r$8(cssPropertiesPrefix)}-padding-b: initial;
--m-${r$8(cssPropertiesPrefix)}-padding-l: initial;
--m-${r$8(cssPropertiesPrefix)}-padding: initial;
padding-block-start: var(
--m-${r$8(cssPropertiesPrefix)}-padding-t,
var(
--m-${r$8(cssPropertiesPrefix)}-padding-y,
var(--m-${r$8(cssPropertiesPrefix)}-padding, 0)
)
);
padding-block-end: var(
--m-${r$8(cssPropertiesPrefix)}-padding-b,
var(
--m-${r$8(cssPropertiesPrefix)}-padding-y,
var(--m-${r$8(cssPropertiesPrefix)}-padding, 0)
)
);
padding-inline-start: var(
--m-${r$8(cssPropertiesPrefix)}-padding-l,
var(
--m-${r$8(cssPropertiesPrefix)}-padding-x,
var(--m-${r$8(cssPropertiesPrefix)}-padding, 0)
)
);
padding-inline-end: var(
--m-${r$8(cssPropertiesPrefix)}-padding-r,
var(
--m-${r$8(cssPropertiesPrefix)}-padding-x,
var(--m-${r$8(cssPropertiesPrefix)}-padding, 0)
)
);
}
`;
}
function styles$v() {
return i$9 `
:host {
--m-body-padding: ${getToken$1('spacing-4')};
--m-body-background-color: ${getColor('color-background-secondary')};
flex: 1;
display: block;
box-sizing: border-box;
width: 100%;
background-color: var(--m-body-background-color);
${mediaDesktop(i$9 `
--m-body-padding: ${getToken$1('spacing-6')};
`)}
}
`;
}
class Body extends BaseLayout {
static get properties() {
return {
...super.properties,
slot: { type: String, reflect: true },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Body.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-body', constructor: Body });
}
constructor() {
super();
// this sets the slot to which the m-body should be assigned inside the page-content component.
this.slot = 'page-body';
}
render() {
return x `<slot></slot>`;
}
}
Body.CSSPropertiesPrefix = 'body';
Body.styles = [
getBaseLayoutStyles(Body.CSSPropertiesPrefix),
styles$v(),
];
Body.define();
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const n$1="important",i=" !"+n$1,o$1=e$2(class extends i$2{constructor(t){if(super(t),t.type!==t$1.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,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n$1:""):s[t]=e;}}return T$1}});
function cardStyles() {
return i$9 `
:host {
--m-card-background-color: ${getColor('color-background-primary')};
--m-card-padding: ${getToken$1('spacing-6')};
--m-card-body-padding: var(--m-card-padding);
--m-card-border-default: solid 1px ${getColor('color-border')};
--m-card-border-top: var(--m-card-border-default);
--m-card-border-left: var(--m-card-border-default);
--m-card-border-bottom: var(--m-card-border-default);
--m-card-border-right: var(--m-card-border-default);
--m-card-border-radius: ${getToken$1('border-radius-s')};
}
.m-card {
position: relative;
display: flex;
flex-direction: row;
background-color: var(--m-card-background-color);
border-radius: var(--m-card-border-radius);
border-top: var(--m-card-border-top);
border-left: var(--m-card-border-left);
border-bottom: var(--m-card-border-bottom);
border-right: var(--m-card-border-right);
}
.m-card-flag {
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
display: block;
box-sizing: border-box;
border: 1px solid var(--m-card-flag-color);
background-color: var(--m-card-flag-color);
width: ${getToken$1('border-thick')};
border-top-left-radius: ${getToken$1('border-radius-s')};
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: ${getToken$1('border-radius-s')};
}
.m-card-content {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
::slotted(m-divider) {
--m-divider-margin-top: ${getToken$1('spacing-4')};
}
.m-title-wrapper {
padding: var(--m-card-padding);
}
.hidden {
display: none;
}
.m-title-wrapper > m-stack {
flex: 1;
}
.m-collapse-trigger {
${typography('body-md-bold')};
display: flex;
margin: 0;
cursor: pointer;
color: ${getColor('color-text-primary')};
outline: none;
border: none;
align-items: center;
background-color: ${getColor('color-background-primary')};
}
.m-collapsed-content {
display: none;
}
.m-collapse-trigger[aria-expanded='true'] m-icon {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
m-icon {
${transition([{ property: 'transform' }])};
}
}
`;
}
function cardBodyStyles() {
return i$9 `
.m-card-body {
padding: var(--m-card-body-padding);
}
`;
}
function cardSubtitleStyles() {
return i$9 `
:host {
${typography('body-md')};
line-height: normal;
color: ${getColor('color-text-tertiary')};
--m-card-subtitle-margin-top: ${getToken$1('spacing-2')};
}
.m-card-subtitle {
margin-block-start: var(--m-card-subtitle-margin-top);
color: ${getColor('color-text-tertiary')};
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
function cardTitleStyles() {
return i$9 `
:host {
${typography('heading-sm-bold')};
line-height: normal;
color: ${getColor('color-text-primary')};
}
.m-card-title {
display: flex;
align-items: center;
gap: ${getToken$1('spacing-1')};
}
slot[name='leading']::slotted(*) {
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
pointer-events: none;
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
function cardDividerStyles() {
return i$9 `
:host {
--m-divider-margin-top: 0;
}
`;
}
const ALIGN_ITEMS_VALUES = [
'baseline',
'center',
'flex-start',
'flex-end',
'stretch',
];
const JUSTIFY_CONTENT_VALUES = [
'center',
'flex-start',
'flex-end',
'space-between',
'space-around',
'space-evenly',
];
const defaultBoxProps = {
padding: 'spacing-4',
borderRadius: 'border-radius-s',
borderWidth: 'border-none',
borderColor: 'color-border',
textAlign: 'left',
};
function boxStyles() {
return i$9 `
:host {
--m-box-padding: ${getToken$1(defaultBoxProps.padding)};
--m-box-background-color: transparent;
--m-box-border-radius: ${getToken$1(defaultBoxProps.borderRadius)};
--m-box-border-width: ${getToken$1(defaultBoxProps.borderWidth)};
--m-box-border-color: ${getColor(defaultBoxProps.borderColor)};
--m-box-text-align: ${r$8(defaultBoxProps.textAlign)};
box-sizing: border-box;
background-color: var(--m-box-background-color);
border-radius: var(--m-box-border-radius);
border-style: solid;
border-width: var(--m-box-border-width);
border-color: var(--m-box-border-color);
text-align: var(--m-box-text-align);
display: block;
}
`;
}
class Box extends BaseLayout {
static get properties() {
return {
...super.properties,
backgroundColor: { type: String, attribute: 'background-color' },
borderRadius: { type: String, attribute: 'border-radius' },
borderWidth: { type: String, attribute: 'border-width' },
borderColor: { type: String, attribute: 'border-color' },
textAlign: { type: String, attribute: 'text-align' },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Box.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-box', constructor: Box });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('backgroundColor')) {
this.style.setProperty('--m-box-background-color', (this.backgroundColor && toCSSValue$1(this.backgroundColor)) ??
'transparent');
}
if (changedProperties.has('borderRadius')) {
this.style.setProperty('--m-box-border-radius', (this.borderRadius && toCSSValue$1(this.borderRadius)) ??
toCSSValue$1(defaultBoxProps.borderRadius));
}
if (changedProperties.has('borderWidth')) {
this.style.setProperty('--m-box-border-width', (this.borderWidth && toCSSValue$1(this.borderWidth)) ??
toCSSValue$1(defaultBoxProps.borderWidth));
}
if (changedProperties.has('borderColor')) {
this.style.setProperty('--m-box-border-color', (this.borderColor && toCSSValue$1(this.borderColor)) ??
toCSSValue$1(defaultBoxProps.borderColor));
}
if (changedProperties.has('textAlign')) {
this.style.setProperty('--m-box-text-align', this.textAlign || defaultBoxProps.textAlign);
}
}
render() {
return x `<slot></slot>`;
}
}
Box.CSSPropertiesPrefix = 'box';
Box.styles = [
getBaseLayoutStyles(Box.CSSPropertiesPrefix),
boxStyles(),
];
Box.define();
const defaultGroupProps = {
gap: 'spacing-4',
align: 'stretch',
justify: 'flex-start',
};
function groupStyles() {
return i$9 `
:host {
--m-group-gap: ${getToken$1(defaultGroupProps.gap)};
--m-group-align: ${r$8(defaultGroupProps.align)};
--m-group-justify: ${r$8(defaultGroupProps.justify)};
display: flex;
flex-wrap: wrap;
gap: var(--m-group-gap);
align-items: var(--m-group-align);
justify-content: var(--m-group-justify);
}
`;
}
class Group extends BaseLayout {
static get properties() {
return {
...super.properties,
gap: { type: String },
align: { type: String },
justify: { type: String },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Group.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-group', constructor: Group });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
this.style.setProperty('--m-group-gap', toSpacingCSSValue(this.gap, defaultGroupProps.gap));
}
if (changedProperties.has('align')) {
this.style.setProperty('--m-group-align', this.align || defaultGroupProps.align);
}
if (changedProperties.has('justify')) {
this.style.setProperty('--m-group-justify', this.justify || defaultGroupProps.justify);
}
}
render() {
return x `<slot></slot>`;
}
}
Group.CSSPropertiesPrefix = 'group';
Group.styles = [
getBaseLayoutStyles(Group.CSSPropertiesPrefix),
groupStyles(),
];
Group.define();
const defaultStackProps = {
gap: 'spacing-4',
align: 'stretch',
justify: 'flex-start',
};
function stackStyles() {
return i$9 `
:host {
--m-stack-gap: ${getToken$1(defaultStackProps.gap)};
--m-stack-align: ${r$8(defaultStackProps.align)};
--m-stack-justify: ${r$8(defaultStackProps.justify)};
display: flex;
flex-direction: column;
row-gap: var(--m-stack-gap);
align-items: var(--m-stack-align);
justify-content: var(--m-stack-justify);
}
`;
}
class Stack extends BaseLayout {
static get properties() {
return {
...super.properties,
gap: { type: String },
align: { type: String },
justify: { type: String },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Stack.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-stack', constructor: Stack });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
this.style.setProperty('--m-stack-gap', toSpacingCSSValue(this.gap, defaultStackProps.gap));
}
if (changedProperties.has('align')) {
this.style.setProperty('--m-stack-align', this.align || defaultStackProps.align);
}
if (changedProperties.has('justify')) {
this.style.setProperty('--m-stack-justify', this.justify || defaultStackProps.justify);
}
}
render() {
return x `<slot></slot>`;
}
}
Stack.CSSPropertiesPrefix = 'stack';
Stack.styles = [
getBaseLayoutStyles(Stack.CSSPropertiesPrefix),
stackStyles(),
];
Stack.define();
const defaultGridProps = {
gap: 'spacing-4',
minColumnWidth: getToken$2('spacing-30'),
};
function gridStyles() {
return i$9 `
:host {
--m-grid-gap: ${getToken$1(defaultGridProps.gap)};
--m-grid-min-column-width: ${r$8(defaultGridProps.minColumnWidth)};
display: grid;
row-gap: var(--m-grid-row-gap, var(--m-grid-gap));
column-gap: var(--m-grid-column-gap, var(--m-grid-gap));
grid-template-columns: repeat(
auto-fit,
minmax(min(var(--m-grid-min-column-width), 100%), 1fr)
);
}
`;
}
class Grid extends BaseLayout {
static get properties() {
return {
...super.properties,
gap: { type: String },
rowGap: { type: String, attribute: 'row-gap' },
columnGap: { type: String, attribute: 'column-gap' },
minColumnWidth: { type: String, attribute: 'min-column-width' },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Grid.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-grid', constructor: Grid });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
this.style.setProperty('--m-grid-gap', toSpacingCSSValue(this.gap, defaultGridProps.gap));
}
if (changedProperties.has('rowGap')) {
if (this.rowGap) {
this.style.setProperty('--m-grid-row-gap', toSpacingCSSValue(this.rowGap));
}
else {
this.style.removeProperty('--m-grid-row-gap');
}
}
if (changedProperties.has('columnGap')) {
if (this.columnGap) {
this.style.setProperty('--m-grid-column-gap', toSpacingCSSValue(this.columnGap));
}
else {
this.style.removeProperty('--m-grid-column-gap');
}
}
if (changedProperties.has('minColumnWidth')) {
this.style.setProperty('--m-grid-min-column-width', this.minColumnWidth || defaultGridProps.minColumnWidth);
}
}
render() {
return x `<slot></slot>`;
}
}
Grid.CSSPropertiesPrefix = 'grid';
Grid.styles = [
getBaseLayoutStyles(Grid.CSSPropertiesPrefix),
gridStyles(),
];
Grid.define();
const defaultSidebarProps = {
gap: 'spacing-4',
sideWidth: 'auto',
minContentWidth: '50%',
reversed: false,
};
function getFlexDirectionValue(reversed) {
return reversed ? 'row-reverse' : 'row';
}
function sidebarStyles() {
return i$9 `
:host {
--m-sidebar-gap: ${getToken$1(defaultSidebarProps.gap)};
--m-sidebar-flex-direction: ${r$8(getFlexDirectionValue(defaultSidebarProps.reversed))};
--m-sidebar-side-width: ${r$8(defaultSidebarProps.sideWidth)};
--m-sidebar-min-content-width: ${r$8(defaultSidebarProps.minContentWidth)};
display: flex;
flex-wrap: wrap;
flex-direction: var(--m-sidebar-flex-direction);
gap: var(--m-sidebar-gap);
}
slot[name='sidebar']::slotted(*) {
flex-basis: var(--m-sidebar-side-width);
flex-grow: 1;
}
slot[name='content']::slotted(*) {
flex-basis: 0;
flex-grow: 999;
min-width: var(--m-sidebar-min-content-width);
}
`;
}
class Sidebar extends BaseLayout {
static get properties() {
return {
...super.properties,
gap: { type: String },
sideWidth: { type: String, attribute: 'side-width' },
minContentWidth: { type: String, attribute: 'min-content-width' },
reversed: { type: Boolean },
};
}
static define() {
Component.define({ name: 'm-sidebar', constructor: Sidebar });
}
constructor() {
super();
this.gap = defaultSidebarProps.gap;
this.sideWidth = defaultSidebarProps.sideWidth;
this.minContentWidth = defaultSidebarProps.minContentWidth;
this.reversed = defaultSidebarProps.reversed;
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Sidebar.CSSPropertiesPrefix;
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
this.style.setProperty('--m-sidebar-gap', toSpacingCSSValue(this.gap, defaultSidebarProps.gap));
}
if (changedProperties.has('sideWidth')) {
this.style.setProperty('--m-sidebar-side-width', this.sideWidth || defaultSidebarProps.sideWidth);
}
if (changedProperties.has('minContentWidth')) {
this.style.setProperty('--m-sidebar-min-content-width', this.minContentWidth || defaultSidebarProps.minContentWidth);
}
if (changedProperties.has('reversed')) {
this.style.setProperty('--m-sidebar-flex-direction', getFlexDirectionValue(this.reversed));
}
}
render() {
return x `
<slot name="sidebar"></slot>
<slot name="content"></slot>
`;
}
}
Sidebar.CSSPropertiesPrefix = 'sidebar';
Sidebar.styles = [
getBaseLayoutStyles(Sidebar.CSSPropertiesPrefix),
sidebarStyles(),
];
Sidebar.define();
const defaultSwitcherProps = {
gap: 'spacing-4',
threshold: '10rem',
};
function switcherStyles() {
return i$9 `
:host {
--m-switcher-gap: ${getToken$1(defaultSwitcherProps.gap)};
--m-switcher-threshold: ${r$8(defaultSwitcherProps.threshold)};
display: flex;
flex-wrap: wrap;
row-gap: var(--m-switcher-row-gap, var(--m-switcher-gap));
column-gap: var(--m-switcher-column-gap, var(--m-switcher-gap));
}
::slotted(*) {
flex-basis: calc((var(--m-switcher-threshold) - 100%) * 999);
flex-grow: 1;
}
`;
}
class Switcher extends BaseLayout {
static get properties() {
return {
...super.properties,
gap: { type: String },
rowGap: { type: String, attribute: 'row-gap' },
columnGap: { type: String, attribute: 'column-gap' },
threshold: { type: String },
limit: { type: Number },
};
}
/* eslint-disable-next-line class-methods-use-this */
getCSSPropertiesPrefix() {
return Switcher.CSSPropertiesPrefix;
}
static define() {
Component.define({ name: 'm-switcher', constructor: Switcher });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
this.style.setProperty('--m-switcher-gap', toSpacingCSSValue(this.gap, defaultSwitcherProps.gap));
}
if (changedProperties.has('rowGap')) {
if (this.rowGap) {
this.style.setProperty('--m-switcher-row-gap', toSpacingCSSValue(this.rowGap));
}
else {
this.style.removeProperty('--m-switcher-row-gap');
}
}
if (changedProperties.has('columnGap')) {
if (this.columnGap) {
this.style.setProperty('--m-switcher-column-gap', toSpacingCSSValue(this.columnGap));
}
else {
this.style.removeProperty('--m-switcher-column-gap');
}
}
if (changedProperties.has('threshold')) {
this.style.setProperty('--m-switcher-threshold', this.threshold || defaultSwitcherProps.threshold);
}
}
render() {
const limitStyles = this.limit
? x `
<style>
::slotted(*:nth-last-child(n + ${this.limit + 1})) {
flex-basis: 100%;
}
::slotted(*:nth-last-child(n + ${this.limit + 1}) ~ *) {
flex-basis: 100%;
}
</style>
`
: '';
return x `
${limitStyles}
<slot></slot>
`;
}
}
Switcher.CSSPropertiesPrefix = 'switcher';
Switcher.styles = [
getBaseLayoutStyles(Switcher.CSSPropertiesPrefix),
switcherStyles(),
];
Switcher.define();
/**
* Create an array containing a range of numbers between
* and including the specified `start` and `stop` values,
* with a fixed step interval of 1.
* @param start the start value of the range
* @param stop the stop value of the range
*/
function range(start, stop) {
const step = 1;
return Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
}
const COLUMNS = 12;
const defaultRowProps = {
gap: 'spacing-4',
};
function generateSlicedStyles(prefix) {
return r$8(range(1, COLUMNS)
.map((index) => {
return `
:host {
flex: 1 1 0%;
max-inline-size: ${(index * 100) / COLUMNS}%;
}
:host([${prefix}="${index}"]) {
flex: 0 0 ${(index * 100) / COLUMNS}%;
max-inline-size: ${(index * 100) / COLUMNS}%;
}
:host([offset-${prefix}="${index}"]) {
margin-inline-start: ${(index * 100) / COLUMNS}%;
}
`;
})
.join('\n'));
}
function containerStyles() {
return i$9 `
:host {
--m-column-gap: ${getToken$1(defaultRowProps.gap)};
--m-row-gap: ${getToken$1(defaultRowProps.gap)};
display: block;
box-sizing: border-box;
inline-size: 100%;
padding-inline: calc(var(--m-column-gap) / -2);
padding-block: 0;
margin-inline: auto;
margin-block: 0;
}
`;
}
function rowStyles() {
return i$9 `
:host {
display: flex;
flex-wrap: wrap;
margin-inline: calc(var(--m-column-gap) / -2);
box-sizing: border-box;
row-gap: var(--m-row-gap);
}
:host(:not(:first-of-type)) {
margin-block: var(--m-row-gap);
}
`;
}
function columnStyles() {
return i$9 `
:host {
position: relative;
inline-size: 100%;
min-block-size: 1px;
padding-inline: calc(var(--m-column-gap) / 2);
box-sizing: border-box;
}
${generateSlicedStyles('sm')}
${mediaTablet(generateSlicedStyles('md'))}
${mediaDesktop(generateSlicedStyles('lg'))}
`;
}
class Container extends Component {
static define() {
Component.define({ name: 'm-container', constructor: Container });
}
render() {
return x `<slot name="row"></slot>`;
}
}
Container.CSSPropertiesPrefix = 'container';
Container.styles = [containerStyles()];
Container.define();
class Row extends Component {
static get properties() {
return {
...super.properties,
gap: { type: String },
columnGap: { type: String, attribute: 'column-gap' },
rowGap: { type: String, attribute: 'row-gap' },
};
}
static define() {
Component.define({ name: 'm-row', constructor: Row });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'row');
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('gap')) {
const gap = toSpacingCSSValue(this.gap, defaultRowProps.gap);
this.style.setProperty('--m-row-gap', gap);
this.style.setProperty('--m-column-gap', gap);
}
if (changedProperties.has('rowGap')) {
if (this.rowGap) {
this.style.setProperty('--m-row-gap', toSpacingCSSValue(this.rowGap));
}
else {
this.style.removeProperty('--m-row-gap');
}
}
if (changedProperties.has('columnGap')) {
if (this.columnGap) {
this.style.setProperty('--m-column-gap', toSpacingCSSValue(this.columnGap));
}
else {
this.style.removeProperty('--m-column-gap');
}
}
}
render() {
return x `<slot name="column"></slot>`;
}
}
Row.CSSPropertiesPrefix = 'row';
Row.styles = [rowStyles()];
Row.define();
class Column extends Component {
static get properties() {
return {
...super.properties,
sm: { type: String, reflect: true },
md: { type: String, reflect: true },
lg: { type: String, reflect: true },
offsetSm: {
type: String,
reflect: true,
attribute: 'offset-sm',
},
offsetMd: { type: String, reflect: true, attribute: 'offset-md' },
offsetLg: {
type: String,
reflect: true,
attribute: 'offset-lg',
},
};
}
static define() {
Component.define({ name: 'm-column', constructor: Column });
}
connectedCallback() {
super.connectedCallback();
this.slot = 'column';
}
update(changedProperties) {
/**
* before the update happens, we ensure that the column size set for the `sm` and `md` breakpoint are
* replicated to the `md` and `lg` breakpoints, respectively, in case there is no value
* set for them.
* the same applies for the offset values.
*/
if (changedProperties.has('sm')) {
this.md = this.md ?? this.sm;
this.lg = this.lg ?? this.md;
}
if (changedProperties.has('md')) {
this.lg = this.lg ?? this.md;
}
this.offsetSm = this.offsetSm ?? undefined;
if (changedProperties.has('offsetSm')) {
this.offsetMd = this.offsetMd ?? this.offsetSm;
this.offsetLg = this.offsetLg ?? this.offsetMd;
}
if (changedProperties.has('offsetMd')) {
this.offsetLg = this.offsetLg ?? this.offsetMd;
}
super.update(changedProperties);
}
render() {
return x `<slot></slot>`;
}
}
Column.CSSPropertiesPrefix = 'column';
Column.styles = [columnStyles()];
Column.define();
var _Card_instances, _Card_toggle;
const defaultFlagColor = 'color-background-inverted';
class Card extends Component {
static get properties() {
return {
flagged: { type: Boolean },
flagColor: { type: String, attribute: 'flag-color' },
collapsible: { type: Boolean },
collapsed: { type: Boolean, reflect: true },
initialCollapsed: { type: Boolean, attribute: 'initial-collapsed' },
};
}
static define() {
Component.define({ name: 'm-card', constructor: Card });
}
constructor() {
super();
_Card_instances.add(this);
this.flagged = false;
this.flagColor = defaultFlagColor;
this.collapsible = false;
this.collapsed = false;
this.initialCollapsed = false;
}
/**
* Keeping the method name to avoid breaking changes.
* #toggle was added to keep the pattern used in all
* the other components, with the same behavior.
*/
toggleCollapse() {
__classPrivateFieldGet$1(this, _Card_instances, "m", _Card_toggle).call(this);
}
isExpanded() {
if (!this.collapsible) {
return undefined;
}
return this.collapsed ? 'false' : 'true';
}
firstUpdated() {
this.collapsed = Boolean(this.initialCollapsed);
const title = this.querySelector('m-card-title');
const subTitle = this.querySelector('m-card-subtitle');
const wrapperElement = this.renderRoot.querySelector('.m-title-wrapper');
if (wrapperElement) {
if (title || subTitle) {
wrapperElement.classList.remove('hidden');
}
else {
wrapperElement.classList.add('hidden');
}
}
}
render() {
return x `
<div
class="m-card"
style="${o$1({
'--m-card-flag-color': toCSSValue$1(this.flagColor),
})}"
>
${this.flagged ? x `<span class="m-card-flag"></span>` : E$1}
<div class="m-card-content">
<m-group justify="space-between" class="m-title-wrapper">
<m-stack gap="none">
<slot name="title"></slot>
<slot name="subtitle"></slot>
</m-stack>
${this.collapsible
? x `<button
title="toggle card collapse"
id="collapse-trigger"
class="m-collapse-trigger"
@click="${__classPrivateFieldGet$1(this, _Card_instances, "m", _Card_toggle)}"
aria-expanded="${o$3(this.isExpanded())}"
type="button"
>
<m-icon
aria-label="toggle card collapse"
name="caret-down"
></m-icon>
</button>`
: E$1}
</m-group>
${this.collapsed ? E$1 : x `<slot name="divider"></slot>`}
<m-stack
class="${e$1({
'm-collapsed-content': !!this.collapsed,
'm-card-content': !this.collapsed,
})}"
gap="none"
>
<slot name="body"></slot>
<slot name="footer"></slot>
</m-stack>
</div>
</div>
`;
}
}
_Card_instances = new WeakSet(), _Card_toggle = function _Card_toggle() {
if (!this.collapsible) {
return;
}
this.collapsed = !this.collapsed;
this.emit('toggle', {
detail: { name: 'card', value: this.collapsed },
});
};
Card.styles = [cardStyles()];
Card.define();
class CardBody extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-card-body', constructor: CardBody });
}
constructor() {
super();
this.slot = 'body';
}
render() {
return x `
<div class="m-card-body">
<slot></slot>
</div>
`;
}
}
CardBody.styles = [cardBodyStyles()];
CardBody.define();
class CardSubtitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-card-subtitle', constructor: CardSubtitle });
}
constructor() {
super();
this.slot = 'subtitle';
}
render() {
return x `
<div class="m-card-subtitle">
<slot></slot>
</div>
`;
}
}
CardSubtitle.styles = [cardSubtitleStyles()];
CardSubtitle.define();
class CardTitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-card-title', constructor: CardTitle });
}
constructor() {
super();
this.slot = 'title';
}
render() {
return x `
<div class="m-card-title">
<slot name="leading"></slot>
<slot></slot>
</div>
`;
}
}
CardTitle.styles = [cardTitleStyles()];
CardTitle.define();
function styles$u() {
return i$9 `
.m-divider {
border: 0;
border-block-end: solid 1px ${getColor('color-divider')};
margin-block-start: var(
--m-divider-margin-top,
var(--m-divider-margin-y, 0)
);
margin-block-end: var(
--m-divider-margin-bottom,
var(--m-divider-margin-y, 0)
);
}
`;
}
class Divider extends Component {
static define() {
Component.define({ name: 'm-divider', constructor: Divider });
}
render() {
return x `<hr class="m-divider" />`;
}
}
Divider.styles = [styles$u()];
Divider.define();
class CardDivider extends Divider {
static define() {
Component.define({
name: 'm-card-divider',
constructor: CardDivider,
});
}
constructor() {
super();
this.slot = 'divider';
}
}
CardDivider.styles = [...Divider.styles, cardDividerStyles()];
CardDivider.properties = {
slot: { attribute: true, type: String, reflect: true },
};
CardDivider.define();
class CardFooter extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
gap: { type: String },
align: { type: String },
justify: { type: String },
};
}
static define() {
Component.define({ name: 'm-card-footer', constructor: CardFooter });
}
constructor() {
super();
this.slot = 'footer';
this.gap = 'spacing-2';
this.align = 'stretch';
this.justify = 'flex-start';
}
render() {
return x `<div class="m-card-footer">
<m-card-divider></m-card-divider>
<m-group
gap=${o$3(this.gap)}
align=${o$3(this.align)}
justify=${o$3(this.justify)}
padding-x="spacing-6"
padding-y="spacing-6"
>
<slot></slot>
</m-group>
</div>`;
}
}
CardFooter.define();
class CardActionPrimary extends Button {
static define() {
Component.define({
name: 'm-card-action-primary',
constructor: CardActionPrimary,
});
}
constructor() {
super();
this.type = 'button';
this.variant = 'primary';
}
}
CardActionPrimary.define();
class CardActionSecondary extends Button {
static define() {
Component.define({
name: 'm-card-action-secondary',
constructor: CardActionSecondary,
});
}
constructor() {
super();
this.type = 'button';
this.variant = 'secondary';
}
}
CardActionSecondary.define();
class CardActionTertiary extends Button {
static define() {
Component.define({
name: 'm-card-action-tertiary',
constructor: CardActionTertiary,
});
}
constructor() {
super();
this.type = 'button';
this.variant = 'tertiary';
}
}
CardActionTertiary.define();
function styles$t() {
return i$9 `
:host {
--m-caret-button-base-color: ${getColor('color-text-primary')};
--m-caret-button-color: var(--m-caret-button-base-color);
--m-caret-button-background-color: transparent;
--m-caret-button-outline-color: transparent;
--m-caret-button-outline-offset: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: var(--button-size);
min-block-size: var(--button-size);
max-inline-size: var(--button-size);
max-block-size: var(--button-size);
inline-size: var(--button-size);
block-size: var(--button-size);
border: none;
border-radius: 50%;
outline: 1px solid var(--m-caret-button-outline-color);
outline-offset: var(--m-caret-button-outline-offset);
}
:host([hidden]) {
display: none;
}
:host([size='small']) {
--button-size: ${toRem('12px')};
}
:host([size='default']) {
--button-size: ${toRem('16px')};
}
:host([size='large']) {
--button-size: ${toRem('20px')};
}
button {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
${m$1(0)};
${p$2(0)};
background-color: var(--m-caret-button-background-color);
color: var(--m-caret-button-color);
border: none;
border-radius: 50%;
min-inline-size: var(--button-size);
min-block-size: var(--button-size);
max-inline-size: var(--button-size);
max-block-size: var(--button-size);
inline-size: var(--button-size);
block-size: var(--button-size);
margin: 0;
padding: 0;
outline: none;
}
m-icon {
--m-icon-size: 0.75em;
}
:host(:not([disabled]):focus) {
--m-caret-button-outline-color: var(--m-caret-button-base-color);
}
:host(:not([inverted]):not([disabled]):hover) {
--m-caret-button-color: ${getColor('color-text-inverted')};
--m-caret-button-background-color: var(--m-caret-button-base-color);
}
:host([inverted]) {
--m-caret-button-color: ${getColor('color-text-inverted')};
--m-caret-button-background-color: transparent;
}
:host([inverted]:not([disabled]):hover) {
--m-caret-button-color: var(--m-caret-button-base-color);
--m-caret-button-background-color: ${getColor('color-text-inverted')};
}
:host([disabled]) {
--m-caret-button-color: ${getColor('color-text-disabled')};
--m-caret-button-background-color: transparent;
cursor: default;
pointer-events: none;
}
:host([disabled]) * {
pointer-events: none;
user-select: none;
}
:host([rotated]) m-icon {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
:host(:not([disabled]):focus) {
${transition([{ property: 'outline-color' }])};
}
button {
${transition([
{ property: 'background-color' },
{ property: 'color' },
])};
}
}
`;
}
var _CaretButton_handleClick;
class CaretButton extends Component {
static get properties() {
return {
controls: { type: String },
disabled: { type: Boolean, reflect: true },
inverted: { type: Boolean, reflect: true },
rotated: { type: Boolean, reflect: true },
label: { type: String },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-caret-button', constructor: CaretButton });
}
constructor() {
super();
_CaretButton_handleClick.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
event.stopImmediatePropagation();
}
});
this.disabled = false;
this.inverted = false;
this.size = 'default';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _CaretButton_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _CaretButton_handleClick, "f"));
}
render() {
return x `
<button
type="button"
aria-controls=${this.controls || E$1}
aria-label=${this.label || E$1}
?disabled=${this.disabled}
>
<m-icon name="caret-down"></m-icon>
</button>
`;
}
}
_CaretButton_handleClick = new WeakMap();
CaretButton.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
CaretButton.styles = [styles$t()];
CaretButton.define();
function styles$s() {
return i$9 `
:host {
${typography('body-md')};
${transition([
{
property: 'outline-color',
},
{
property: 'color',
},
])};
contain: layout style;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: ${getToken$1('spacing-2')};
box-sizing: border-box;
min-block-size: 20px;
border-radius: 2px;
outline: 1px solid transparent;
outline-offset: 2px;
color: ${getColor('color-text-tertiary')};
line-height: normal;
}
:host([hidden]) {
display: none;
}
:host(:enabled:hover) {
color: ${getColor('color-text-primary')};
}
:host(:disabled) {
color: ${getColor('color-text-disabled')};
}
#input,
#box,
#check,
#indeterminate {
font-size: 100%;
line-height: 1;
}
#input {
outline: none;
box-sizing: border-box;
opacity: 0.00001;
z-index: 1;
cursor: pointer;
block-size: 100%;
inline-size: 100%;
margin: 0;
padding: 0;
position: absolute;
overflow: visible;
}
#box {
--checkbox-input-size: 1rem;
display: inline-flex;
justify-content: center;
align-items: center;
color: ${getColor('color-text-tertiary')};
inline-size: var(--checkbox-input-size);
block-size: var(--checkbox-input-size);
box-sizing: border-box;
background-color: ${getColor('color-background-primary')};
border-style: solid;
border-radius: ${getToken$1('border-radius-s')};
border-color: ${getColor('color-border-input')};
border-width: ${getToken$1('border-thin')};
margin: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: var(--checkbox-input-size);
${transition([
{
property: 'border-color',
},
{
property: 'background-color',
},
])};
}
#check,
#indeterminate {
--m-icon-size: 1em;
position: absolute;
pointer-events: none;
display: none;
color: transparent;
}
#label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#input:is(:indeterminate, :checked) ~ #box {
background-color: ${getColor('color-primary-60')};
border-color: ${getColor('color-primary-60')};
}
#input:enabled:hover ~ #box {
border-color: ${getColor('color-primary-100')};
}
#input:is(:indeterminate, :checked):enabled:hover ~ #box {
background-color: ${getColor('color-primary-100')};
}
#input:indeterminate ~ #box #indeterminate,
#input:checked:not(:indeterminate) ~ #box #check {
display: block;
color: ${getColor('color-text-inverted')};
}
:host(:focus-within) {
outline-color: ${getColor('color-primary-60')};
}
#input:disabled {
cursor: default;
}
#input:disabled ~ #box {
background-color: ${getColor('color-background-tertiary')};
}
#input:indeterminate:disabled ~ #box,
#input:checked:disabled ~ #box {
background-color: ${getColor('color-primary-20')};
border-color: ${getColor('color-primary-20')};
}
`;
}
var _Checkbox_instances, _Checkbox_initialize, _Checkbox_handleCheckedChange, _Checkbox_handleDisabledChange, _Checkbox_handleIndeterminateChange, _Checkbox_handleValueChange, _Checkbox_handleInternalClick, _Checkbox_handleHostClick, _Checkbox_handleChange;
class Checkbox extends FormComponent {
constructor() {
super(...arguments);
_Checkbox_instances.add(this);
_Checkbox_handleCheckedChange.set(this, (checked) => {
/**
* As the input won't be rendered yet by the time
* the react wrapper calls the setter,
* we need this so we can hydrate the input with the proper
* `checked` value.
*/
this.toggleAttribute('checked', checked);
if (this.input) {
this.input.checked = checked;
__classPrivateFieldGet$1(this, _Checkbox_handleValueChange, "f").call(this, this.value);
}
});
_Checkbox_handleDisabledChange.set(this, (disabled) => {
this.disabled = disabled;
if (this.input) {
this.input.disabled = disabled;
}
});
_Checkbox_handleIndeterminateChange.set(this, (indeterminate) => {
/**
* As the input won't be rendered yet by the time
* the react wrapper calls the setter,
* we need this so we can hydrate the input with the proper
* `indeterminate` value.
*/
this.toggleAttribute('indeterminate', indeterminate);
if (this.input) {
this.input.indeterminate = indeterminate;
}
});
_Checkbox_handleValueChange.set(this, (value) => {
/**
* "If a checkbox is unchecked when its form is submitted, neither the name
* nor the value is submitted to the server.
* There is no HTML-only method of representing a checkbox's unchecked state
* (e.g. value=unchecked). If you wanted to submit a default value for the
* checkbox when it is unchecked, you could include JavaScript to create a
* <input type="hidden"> within the form with a value indicating an unchecked state."
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value|Checkbox value}
*/
this.setFormValue(this.input?.checked ? value ?? 'on' : null);
});
/**
* This handler will kick in when the user clicks the checkbox.
*/
_Checkbox_handleInternalClick.set(this, (event) => {
if (this.disabled) {
event.preventDefault();
return;
}
/**
* Do **NOT** remove this event.stopPropagation() because it will cause
* the `#handleHostClick` to` enter an infinite loop, if called.
*/
event.stopPropagation();
__classPrivateFieldGet$1(this, _Checkbox_handleValueChange, "f").call(this, this.value);
});
/**
* This handler is here FOR TESTING PURPOSES ONLY, so we manually
* forward the click on the host to the checkbox input.
*
* Based on https://github.com/adobe/spectrum-web-components/blob/main/packages/checkbox/src/Checkbox.ts;
*/
_Checkbox_handleHostClick.set(this, () => {
this.input?.click();
});
_Checkbox_handleChange.set(this, (event) => {
if (this.disabled) {
event.preventDefault();
return;
}
this.reemit(event);
});
}
static get properties() {
return {
...super.properties,
checked: { type: Boolean, reflect: true },
initialChecked: { type: Boolean, attribute: 'initial-checked' },
indeterminate: { type: Boolean, reflect: true },
value: { type: String },
};
}
static define() {
Component.define({ name: 'm-checkbox', constructor: Checkbox });
}
createRenderRoot() {
const root = super.createRenderRoot();
/**
* We add the event listener to the shadow root because `change` event is not
* composed, so it will not bubble outside the host.
*/
root.addEventListener('change', __classPrivateFieldGet$1(this, _Checkbox_handleChange, "f"));
return root;
}
async connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Checkbox_handleHostClick, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_initialize).call(this, this.hasAttribute('checked') || this.hasAttribute('initial-checked'));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Checkbox_handleHostClick, "f"));
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Checkbox_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('value')) {
__classPrivateFieldGet$1(this, _Checkbox_handleValueChange, "f").call(this, this.value);
}
}
render() {
return x `
<input
id="input"
type="checkbox"
name="${o$3(this.name)}"
@click=${__classPrivateFieldGet$1(this, _Checkbox_handleInternalClick, "f")}
/>
<span id="box">
<m-icon id="check" name="check" aria-hidden="true"></m-icon>
<m-icon
id="indeterminate"
name="indeterminate"
aria-hidden="true"
></m-icon>
</span>
<slot name="leading"></slot>
<label id="label" for="input">
<slot></slot>
</label>
`;
}
get input() {
return this.renderRoot?.querySelector('#input') ?? null;
}
set checked(checked) {
__classPrivateFieldGet$1(this, _Checkbox_handleCheckedChange, "f").call(this, checked);
}
get checked() {
return Boolean(this.input?.checked);
}
set indeterminate(indeterminate) {
__classPrivateFieldGet$1(this, _Checkbox_handleIndeterminateChange, "f").call(this, indeterminate);
}
get indeterminate() {
return Boolean(this.input?.indeterminate);
}
formResetCallback() {
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_initialize).call(this);
}
formStateRestoreCallback(state) {
if (state != null) {
this.checked = Boolean(state);
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _Checkbox_handleDisabledChange, "f").call(this, disabled);
}
}
_Checkbox_handleCheckedChange = new WeakMap(), _Checkbox_handleDisabledChange = new WeakMap(), _Checkbox_handleIndeterminateChange = new WeakMap(), _Checkbox_handleValueChange = new WeakMap(), _Checkbox_handleInternalClick = new WeakMap(), _Checkbox_handleHostClick = new WeakMap(), _Checkbox_handleChange = new WeakMap(), _Checkbox_instances = new WeakSet(), _Checkbox_initialize = function _Checkbox_initialize(checked) {
__classPrivateFieldGet$1(this, _Checkbox_handleCheckedChange, "f").call(this, checked ?? this.hasAttribute('initial-checked'));
/**
* The indeterminate state is only set via JavaScript
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
*/
__classPrivateFieldGet$1(this, _Checkbox_handleIndeterminateChange, "f").call(this, this.hasAttribute('indeterminate'));
};
Checkbox.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
Checkbox.styles = [styles$s()];
Checkbox.define();
/**
* Function that returns a `Promise` that will resolve when all the scheduled
* animations for the provided target are either finished or canceled.
*
* Optionally, you can pass an option to include the animations for the elements
* that are part of the subtree of the provided target.
*/
async function waitForAnimations(animatable, options) {
const animations = animatable.getAnimations(options);
const promises = animations.map(({ finished }) => finished);
await Promise.allSettled(promises);
}
let isAttached = false;
/**
* This function cover the late upgrade for context providers.
* Check https://github.com/lit/lit/tree/main/packages/labs/context#late-upgraded-context-providers
* for more details.
*/
function attachContextRoot() {
if (isAttached) {
return;
}
const root = new t$3();
root.attach(document.body);
isAttached = true;
}
const dialogContext = n$4(Symbol('dialog'));
function styles$r() {
return i$9 `
:host {
--margin: ${getToken$1('spacing-6')};
--padding: ${getToken$1('spacing-6')};
--gap: ${getToken$1('spacing-6')};
}
slot::slotted(*) {
padding-inline: var(--padding);
padding-block: calc(var(--gap) / 2);
}
dialog {
box-sizing: border-box;
padding: calc(var(--padding) - (var(--gap) / 2)) 0;
border: none;
border-radius: ${getToken$1('border-radius-m')};
background-color: ${getColor('color-background-primary')};
box-shadow: ${getToken$1('elevation-4')};
width: auto;
max-height: calc(100% - var(--margin));
${transition([{ property: 'max-width' }])};
}
dialog[open] {
display: flex;
flex-direction: column;
}
dialog.-size-small {
max-width: min(${toRem('400px')}, calc(100vw - var(--margin)));
}
dialog.-size-medium {
max-width: min(${toRem('600px')}, calc(100% - var(--margin)));
}
dialog.-size-large {
max-width: min(${toRem('800px')}, calc(100% - var(--margin)));
}
dialog.-size-extra-large {
max-width: min(${toRem('1000px')}, calc(100% - var(--margin)));
}
dialog.-size-full-page {
max-width: calc(100% - var(--margin));
max-height: calc(100% - var(--margin)) !important;
}
dialog::backdrop {
background-color: ${getColor('color-background-secondary-inverted', 0.4)};
}
@media (prefers-reduced-motion: no-preference) {
dialog[open] {
animation: show-dialog 0.25s ease forwards;
}
dialog.is-hiding {
animation: hide-dialog 0.25s ease forwards;
}
dialog[open]::backdrop {
animation: show-backdrop 0.25s ease forwards;
}
dialog.is-hiding::backdrop {
animation: hide-backdrop 0.25s ease forwards;
}
}
@keyframes show-dialog {
from {
opacity: 0;
transform: translateY(250px);
}
}
@keyframes hide-dialog {
to {
opacity: 0;
transform: scale(0.75);
}
}
@keyframes show-backdrop {
from {
opacity: 0;
}
}
@keyframes hide-backdrop {
to {
opacity: 0;
}
}
`;
}
var _Dialog_instances, _Dialog_contextProvider, _Dialog_dialog_get, _Dialog_toggleVisibility, _Dialog_emitLifecycleEvent, _Dialog_emitCloseEvent, _Dialog_handleClick, _Dialog_handleDialogClick, _Dialog_handleCancel;
attachContextRoot();
class Dialog extends Component {
static get properties() {
return {
open: { type: Boolean, reflect: true },
size: { type: String, reflect: true },
variant: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-dialog', constructor: Dialog });
}
constructor() {
super();
_Dialog_instances.add(this);
_Dialog_contextProvider.set(this, new i$5(this, {
context: dialogContext,
initialValue: { variant: 'neutral' },
}));
_Dialog_handleClick.set(this, (event) => {
const element = event.target;
if (element.matches('m-dialog-close')) {
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitCloseEvent).call(this);
}
});
this.open = false;
this.size = 'small';
this.variant = 'neutral';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Dialog_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Dialog_handleClick, "f"));
}
render() {
return x `
<dialog
class="${e$1({
'-size-small': this.size === 'small' || !this.size,
'-size-medium': this.size === 'medium',
'-size-large': this.size === 'large',
'-size-extra-large': this.size === 'extra-large',
'-size-full-page': this.size === 'full-page',
})}"
@click=${__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_handleDialogClick)}
@cancel=${__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_handleCancel)}
>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
<slot name="actions"></slot>
</dialog>
`;
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('variant')) {
__classPrivateFieldGet$1(this, _Dialog_contextProvider, "f").setValue({
variant: this.variant ?? 'neutral',
});
}
if (changedProperties.has('open')) {
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_toggleVisibility).call(this, changedProperties.get('open'));
}
}
/**
* Make the dialog visible
*/
show() {
this.open = true;
}
/**
* Hide the dialog
*/
hide() {
this.open = false;
}
}
_Dialog_contextProvider = new WeakMap(), _Dialog_handleClick = new WeakMap(), _Dialog_instances = new WeakSet(), _Dialog_dialog_get = function _Dialog_dialog_get() {
return this.renderRoot?.querySelector('dialog');
}, _Dialog_toggleVisibility = async function _Dialog_toggleVisibility(wasOpen) {
const dialog = __classPrivateFieldGet$1(this, _Dialog_instances, "a", _Dialog_dialog_get);
if (dialog) {
if (!wasOpen && this.open) {
this.style.display = 'contents';
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitLifecycleEvent).call(this, 'opening');
dialog.showModal();
await waitForAnimations(dialog);
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitLifecycleEvent).call(this, 'opened');
}
else if (wasOpen && !this.open) {
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitLifecycleEvent).call(this, 'closing');
dialog.classList.add('is-hiding');
await waitForAnimations(dialog);
dialog.classList.remove('is-hiding');
dialog.close();
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitLifecycleEvent).call(this, 'closed');
this.style.display = 'none';
}
else if (wasOpen == null && !this.open) {
this.style.display = 'none';
}
}
}, _Dialog_emitLifecycleEvent = function _Dialog_emitLifecycleEvent(type) {
this.emit(type, {
cancelable: false,
bubbles: false,
});
}, _Dialog_emitCloseEvent = function _Dialog_emitCloseEvent() {
/**
* [!] Warning: the `close` event is already emitted by the `dialog` element
* when it is closed via the `esc` key or when the `.close` method is called.
* However, since it does not bubble and it is not composed, we are deliberatedly
* to mimic dialog's `close` event and to complement our opening/closing event lifecycle.
*
* For clarity, the difference between the native `close` event and our custom `close` event is that,
* the dialog's close event is emitted when the dialog is actually closed, whereas our custom `close`
* event is emitted as a cue to the m-dialog component consumer that there has been an interaction
* **requesting** the dialog to be closed.
*/
if (this.open) {
this.emit('close');
}
}, _Dialog_handleDialogClick = function _Dialog_handleDialogClick(event) {
const isClickingOnTheDialog = event.target instanceof HTMLDialogElement;
const rect = __classPrivateFieldGet$1(this, _Dialog_instances, "a", _Dialog_dialog_get)?.getBoundingClientRect();
if (isClickingOnTheDialog && rect) {
const isClickingOnTheBackdrop = event.clientY < rect.top ||
event.clientY > rect.bottom ||
event.clientX < rect.left ||
event.clientX > rect.right;
if (isClickingOnTheBackdrop) {
event.preventDefault();
event.stopPropagation();
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitCloseEvent).call(this);
}
}
}, _Dialog_handleCancel = function _Dialog_handleCancel(event) {
event.preventDefault();
__classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitCloseEvent).call(this);
};
Dialog.styles = [styles$r()];
Dialog.define();
const DIALOG_SIZES = [
'small',
'medium',
'large',
'extra-large',
'full-page',
];
const DIALOG_VARIANTS = [
'neutral',
'success',
'warning',
'danger',
];
var _DialogActionPrimary_contextCallback;
class DialogActionPrimary extends Button {
static define() {
Component.define({
name: 'm-dialog-action-primary',
constructor: DialogActionPrimary,
});
}
constructor() {
super();
_DialogActionPrimary_contextCallback.set(this, (value) => {
switch (value.variant) {
case 'danger':
this.variant = 'danger';
break;
case 'warning':
this.variant = 'warning';
break;
case 'neutral':
case 'success':
default:
this.variant = 'primary';
}
});
this.type = 'button';
this.variant = 'primary';
this.context = new s$4(this, {
context: dialogContext,
callback: __classPrivateFieldGet$1(this, _DialogActionPrimary_contextCallback, "f"),
subscribe: true,
});
}
}
_DialogActionPrimary_contextCallback = new WeakMap();
DialogActionPrimary.define();
class DialogActionSecondary extends Button {
constructor() {
super();
this.type = 'button';
this.variant = 'secondary';
}
static define() {
Component.define({
name: 'm-dialog-action-secondary',
constructor: DialogActionSecondary,
});
}
}
DialogActionSecondary.define();
class DialogActionTertiary extends Button {
static define() {
Component.define({
name: 'm-dialog-action-tertiary',
constructor: DialogActionTertiary,
});
}
constructor() {
super();
this.type = 'button';
this.variant = 'tertiary';
}
}
DialogActionTertiary.define();
class DialogActions extends Group {
static define() {
Component.define({
name: 'm-dialog-actions',
constructor: DialogActions,
});
}
constructor() {
super();
this.align = 'center';
this.gap = 'spacing-3';
this.justify = 'flex-end';
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'actions');
}
}
DialogActions.define();
function styles$q() {
return i$9 `
:host {
overflow-y: auto;
overscroll-behavior: contain;
${typography('body-md')};
}
`;
}
class DialogBody extends Component {
static define() {
Component.define({ name: 'm-dialog-body', constructor: DialogBody });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'body');
}
render() {
return x `<slot></slot>`;
}
}
DialogBody.styles = [styles$q()];
DialogBody.define();
class DialogClose extends CloseButton {
static define() {
Component.define({ name: 'm-dialog-close', constructor: DialogClose });
}
constructor() {
super();
this.size = 'large';
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'close');
}
}
DialogClose.define();
class DialogFooter extends Component {
static define() {
Component.define({
name: 'm-dialog-footer',
constructor: DialogFooter,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'footer');
}
render() {
return x `<slot></slot>`;
}
}
DialogFooter.define();
function styles$p() {
return i$9 `
:host {
${typography('heading-md-bold')};
line-height: normal;
color: ${getColor('color-text-primary')};
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
var _DialogHeader_instances, _DialogHeader_context, _DialogHeader_icon_get;
class DialogHeader extends Component {
static define() {
Component.define({
name: 'm-dialog-header',
constructor: DialogHeader,
});
}
constructor() {
super();
_DialogHeader_instances.add(this);
_DialogHeader_context.set(this, void 0);
__classPrivateFieldSet(this, _DialogHeader_context, new s$4(this, {
context: dialogContext,
subscribe: true,
}), "f");
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'header');
}
render() {
return x `
<m-group gap="spacing-6" align="center">
<m-group gap="spacing-1" align="center" style="flex-grow: 1;">
${__classPrivateFieldGet$1(this, _DialogHeader_instances, "a", _DialogHeader_icon_get)}
<slot></slot>
</m-group>
<slot name="close"></slot>
</m-group>
`;
}
}
_DialogHeader_context = new WeakMap(), _DialogHeader_instances = new WeakSet(), _DialogHeader_icon_get = function _DialogHeader_icon_get() {
const { value } = __classPrivateFieldGet$1(this, _DialogHeader_context, "f");
let name;
let color;
switch (value?.variant) {
case 'danger':
name = 'attention';
color = 'color-danger-60';
break;
case 'warning':
name = 'alert-circle';
color = 'color-warning-60';
break;
case 'success':
name = 'check';
color = 'color-success-60';
break;
case 'neutral':
default:
return E$1;
}
return x `
<m-icon name=${name} color=${color} size="24" aria-hidden="true"></m-icon>
`;
};
DialogHeader.styles = [styles$p()];
DialogHeader.define();
function styles$o() {
return i$9 `
:host {
--padding: ${getToken$1('spacing-6')};
--m-drawer-header-border: none;
--m-drawer-actions-border: none;
--m-drawer-body-padding-block: 0;
--m-drawer-background-color: ${getColor('color-background-primary')};
}
:host([divided]) {
--m-drawer-header-border: 1px solid ${getColor('color-divider')};
--m-drawer-actions-border: 1px solid ${getColor('color-divider')};
--m-drawer-body-padding-block: var(--padding);
--m-drawer-background-color: ${getColor('color-background-secondary')};
}
:host([size='small']) dialog {
max-width: ${toRem('416px')};
}
:host([size='medium']) dialog {
max-width: 640px;
}
:host([size='large']) dialog {
max-width: 760px;
}
dialog {
box-sizing: border-box;
padding: 0;
border: none;
background-color: var(--m-drawer-background-color);
box-shadow: ${getToken$1('elevation-4')};
width: 100%;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
right: 0;
left: auto;
margin: 0;
${transition([{ property: 'max-width' }])};
}
dialog[open] {
display: flex;
flex-direction: column;
}
dialog::backdrop {
background-color: ${getColor('color-background-secondary-inverted', 0.4)};
}
@media (prefers-reduced-motion: no-preference) {
dialog[open] {
animation: show-dialog 0.25s ease forwards;
}
dialog.is-hiding {
animation: hide-dialog 0.25s ease forwards;
}
dialog[open]::backdrop {
animation: show-backdrop 0.25s ease forwards;
}
dialog.is-hiding::backdrop {
animation: hide-backdrop 0.25s ease forwards;
}
}
@keyframes show-dialog {
from {
opacity: 0;
transform: translateX(250px);
}
}
@keyframes hide-dialog {
to {
opacity: 0;
transform: translateX(250px);
}
}
@keyframes show-backdrop {
from {
opacity: 0;
}
}
@keyframes hide-backdrop {
to {
opacity: 0;
}
}
`;
}
var _Drawer_instances, _Drawer_dialog_get, _Drawer_toggleVisibility, _Drawer_emitLifecycleEvent, _Drawer_emitCloseEvent, _Drawer_handleClick, _Drawer_handleDialogClick, _Drawer_handleCancel;
attachContextRoot();
class Drawer extends Component {
static get properties() {
return {
open: { type: Boolean, reflect: true },
size: { type: String, reflect: true },
divided: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-drawer', constructor: Drawer });
}
constructor() {
super();
_Drawer_instances.add(this);
_Drawer_handleClick.set(this, (event) => {
const element = event.target;
if (element.matches('m-drawer-close')) {
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitCloseEvent).call(this);
}
});
this.open = false;
this.size = 'small';
this.divided = false;
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Drawer_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Drawer_handleClick, "f"));
}
render() {
return x `
<dialog @click=${__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_handleDialogClick)} @cancel=${__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_handleCancel)}>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="actions"></slot>
</dialog>
`;
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('open')) {
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_toggleVisibility).call(this, changedProperties.get('open'));
}
}
/**
* Make the drawer visible
*/
show() {
this.open = true;
}
/**
* Hide the drawer
*/
hide() {
this.open = false;
}
}
_Drawer_handleClick = new WeakMap(), _Drawer_instances = new WeakSet(), _Drawer_dialog_get = function _Drawer_dialog_get() {
return this.renderRoot?.querySelector('dialog');
}, _Drawer_toggleVisibility = async function _Drawer_toggleVisibility(wasOpen) {
const dialog = __classPrivateFieldGet$1(this, _Drawer_instances, "a", _Drawer_dialog_get);
if (dialog) {
if (!wasOpen && this.open) {
this.style.display = 'contents';
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitLifecycleEvent).call(this, 'opening');
dialog.showModal();
await waitForAnimations(dialog);
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitLifecycleEvent).call(this, 'opened');
}
else if (wasOpen && !this.open) {
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitLifecycleEvent).call(this, 'closing');
dialog.classList.add('is-hiding');
await waitForAnimations(dialog);
dialog.classList.remove('is-hiding');
dialog.close();
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitLifecycleEvent).call(this, 'closed');
this.style.display = 'none';
}
else if (wasOpen == null && !this.open) {
this.style.display = 'none';
}
}
}, _Drawer_emitLifecycleEvent = function _Drawer_emitLifecycleEvent(type) {
this.emit(type, {
cancelable: false,
bubbles: false,
});
}, _Drawer_emitCloseEvent = function _Drawer_emitCloseEvent() {
/**
* [!] Warning: the `close` event is already emitted by the `dialog` element
* when it is closed via the `esc` key or when the `.close` method is called.
* However, since it does not bubble and it is not composed, we are deliberatedly
* to mimic dialog's `close` event and to complement our opening/closing event lifecycle.
*
* For clarity, the difference between the native `close` event and our custom `close` event is that,
* the dialog's close event is emitted when the dialog is actually closed, whereas our custom `close`
* event is emitted as a cue to the m-dialog component consumer that there has been an interaction
* **requesting** the dialog to be closed.
*/
if (this.open) {
this.emit('close');
}
}, _Drawer_handleDialogClick = function _Drawer_handleDialogClick(event) {
const isClickingOnTheDrawer = event.target instanceof HTMLDialogElement;
const rect = __classPrivateFieldGet$1(this, _Drawer_instances, "a", _Drawer_dialog_get)?.getBoundingClientRect();
if (isClickingOnTheDrawer && rect) {
const isClickingOnTheBackdrop = event.clientY < rect.top ||
event.clientY > rect.bottom ||
event.clientX < rect.left ||
event.clientX > rect.right;
if (isClickingOnTheBackdrop) {
event.preventDefault();
event.stopPropagation();
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitCloseEvent).call(this);
}
}
}, _Drawer_handleCancel = function _Drawer_handleCancel(event) {
event.preventDefault();
__classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitCloseEvent).call(this);
};
Drawer.styles = [styles$o()];
Drawer.define();
const DRAWER_SIZES = ['small', 'medium', 'large'];
class DrawerActionPrimary extends Button {
static define() {
Component.define({
name: 'm-drawer-action-primary',
constructor: DrawerActionPrimary,
});
}
constructor() {
super();
this.variant = 'primary';
}
}
DrawerActionPrimary.define();
class DrawerActionSecondary extends Button {
static define() {
Component.define({
name: 'm-drawer-action-secondary',
constructor: DrawerActionSecondary,
});
}
constructor() {
super();
this.variant = 'secondary';
}
}
DrawerActionSecondary.define();
class DrawerActionTertiary extends Button {
static define() {
Component.define({
name: 'm-drawer-action-tertiary',
constructor: DrawerActionTertiary,
});
}
constructor() {
super();
this.variant = 'tertiary';
}
}
DrawerActionTertiary.define();
function styles$n() {
return i$9 `
:host {
margin-top: auto;
padding-inline: var(--padding);
padding-block: var(--padding);
background-color: ${getColor('color-background-primary')};
border-top: var(--m-drawer-actions-border);
}
`;
}
class DrawerActions extends Group {
static define() {
Component.define({
name: 'm-drawer-actions',
constructor: DrawerActions,
});
}
constructor() {
super();
this.align = 'center';
this.gap = 'spacing-3';
this.justify = 'flex-end';
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'actions');
}
}
DrawerActions.styles = [...Group.styles, styles$n()];
DrawerActions.define();
function styles$m() {
return i$9 `
:host {
overflow-y: auto;
overscroll-behavior: contain;
padding-inline: var(--padding);
padding-block: var(--m-drawer-body-padding-block);
${typography('body-md')};
}
`;
}
class DrawerBody extends Component {
static define() {
Component.define({ name: 'm-drawer-body', constructor: DrawerBody });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'body');
}
render() {
return x `<slot></slot>`;
}
}
DrawerBody.styles = [styles$m()];
DrawerBody.define();
class DrawerClose extends CloseButton {
static define() {
Component.define({
name: 'm-drawer-close',
constructor: DrawerClose,
});
}
constructor() {
super();
this.size = 'large';
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'close');
}
}
DrawerClose.define();
function styles$l() {
return i$9 `
:host {
${typography('heading-md-bold')};
line-height: normal;
color: ${getColor('color-text-primary')};
padding-inline: var(--padding);
padding-block: var(--padding);
background-color: ${getColor('color-background-primary')};
border-bottom: var(--m-drawer-header-border);
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
class DrawerHeader extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-drawer-header',
constructor: DrawerHeader,
});
}
constructor() {
super();
this.slot = 'header';
}
render() {
return x `
<m-group gap="spacing-6" align="center">
<m-group gap="spacing-1" align="center" style="flex-grow: 1;">
<slot name="leading"></slot>
<slot></slot>
</m-group>
<slot name="close"></slot>
</m-group>
`;
}
}
DrawerHeader.styles = [styles$l()];
DrawerHeader.define();
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
const sides = ['top', 'right', 'bottom', 'left'];
const min = Math.min;
const max = Math.max;
const round = Math.round;
const floor = Math.floor;
const createCoords = v => ({
x: v,
y: v
});
const oppositeSideMap = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
const oppositeAlignmentMap = {
start: 'end',
end: 'start'
};
function clamp$1(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === 'function' ? value(param) : value;
}
function getSide(placement) {
return placement.split('-')[0];
}
function getAlignment(placement) {
return placement.split('-')[1];
}
function getOppositeAxis(axis) {
return axis === 'x' ? 'y' : 'x';
}
function getAxisLength(axis) {
return axis === 'y' ? 'height' : 'width';
}
function getSideAxis(placement) {
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
}
function getSideList(side, isStart, rtl) {
const lr = ['left', 'right'];
const rl = ['right', 'left'];
const tb = ['top', 'bottom'];
const bt = ['bottom', 'top'];
switch (side) {
case 'top':
case 'bottom':
if (rtl) return isStart ? rl : lr;
return isStart ? lr : rl;
case 'left':
case 'right':
return isStart ? tb : bt;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === 'start', rtl);
if (alignment) {
list = list.map(side => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
x,
y
};
}
function computeCoordsFromPlacement(_ref, placement, rtl) {
let {
reference,
floating
} = _ref;
const sideAxis = getSideAxis(placement);
const alignmentAxis = getAlignmentAxis(placement);
const alignLength = getAxisLength(alignmentAxis);
const side = getSide(placement);
const isVertical = sideAxis === 'y';
const commonX = reference.x + reference.width / 2 - floating.width / 2;
const commonY = reference.y + reference.height / 2 - floating.height / 2;
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
let coords;
switch (side) {
case 'top':
coords = {
x: commonX,
y: reference.y - floating.height
};
break;
case 'bottom':
coords = {
x: commonX,
y: reference.y + reference.height
};
break;
case 'right':
coords = {
x: reference.x + reference.width,
y: commonY
};
break;
case 'left':
coords = {
x: reference.x - floating.width,
y: commonY
};
break;
default:
coords = {
x: reference.x,
y: reference.y
};
}
switch (getAlignment(placement)) {
case 'start':
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
break;
case 'end':
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
break;
}
return coords;
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a given reference element.
*
* This export does not have any `platform` interface logic. You will need to
* write one for the platform you are using Floating UI with.
*/
const computePosition$1 = async (reference, floating, config) => {
const {
placement = 'bottom',
strategy = 'absolute',
middleware = [],
platform
} = config;
const validMiddleware = middleware.filter(Boolean);
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
let rects = await platform.getElementRects({
reference,
floating,
strategy
});
let {
x,
y
} = computeCoordsFromPlacement(rects, placement, rtl);
let statefulPlacement = placement;
let middlewareData = {};
let resetCount = 0;
for (let i = 0; i < validMiddleware.length; i++) {
const {
name,
fn
} = validMiddleware[i];
const {
x: nextX,
y: nextY,
data,
reset
} = await fn({
x,
y,
initialPlacement: placement,
placement: statefulPlacement,
strategy,
middlewareData,
rects,
platform,
elements: {
reference,
floating
}
});
x = nextX != null ? nextX : x;
y = nextY != null ? nextY : y;
middlewareData = {
...middlewareData,
[name]: {
...middlewareData[name],
...data
}
};
if (reset && resetCount <= 50) {
resetCount++;
if (typeof reset === 'object') {
if (reset.placement) {
statefulPlacement = reset.placement;
}
if (reset.rects) {
rects = reset.rects === true ? await platform.getElementRects({
reference,
floating,
strategy
}) : reset.rects;
}
({
x,
y
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
}
i = -1;
}
}
return {
x,
y,
placement: statefulPlacement,
strategy,
middlewareData
};
};
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary on each side.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
async function detectOverflow(state, options) {
var _await$platform$isEle;
if (options === void 0) {
options = {};
}
const {
x,
y,
platform,
rects,
elements,
strategy
} = state;
const {
boundary = 'clippingAncestors',
rootBoundary = 'viewport',
elementContext = 'floating',
altBoundary = false,
padding = 0
} = evaluate(options, state);
const paddingObject = getPaddingObject(padding);
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
const element = elements[altBoundary ? altContext : elementContext];
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
boundary,
rootBoundary,
strategy
}));
const rect = elementContext === 'floating' ? {
x,
y,
width: rects.floating.width,
height: rects.floating.height
} : rects.reference;
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
x: 1,
y: 1
} : {
x: 1,
y: 1
};
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
elements,
rect,
offsetParent,
strategy
}) : rect);
return {
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
};
}
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
const arrow$1 = options => ({
name: 'arrow',
options,
async fn(state) {
const {
x,
y,
placement,
rects,
platform,
elements,
middlewareData
} = state;
// Since `element` is required, we don't Partial<> the type.
const {
element,
padding = 0
} = evaluate(options, state) || {};
if (element == null) {
return {};
}
const paddingObject = getPaddingObject(padding);
const coords = {
x,
y
};
const axis = getAlignmentAxis(placement);
const length = getAxisLength(axis);
const arrowDimensions = await platform.getDimensions(element);
const isYAxis = axis === 'y';
const minProp = isYAxis ? 'top' : 'left';
const maxProp = isYAxis ? 'bottom' : 'right';
const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
const startDiff = coords[axis] - rects.reference[axis];
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
// DOM platform can return `window` as the `offsetParent`.
if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
clientSize = elements.floating[clientProp] || rects.floating[length];
}
const centerToReference = endDiff / 2 - startDiff / 2;
// If the padding is large enough that it causes the arrow to no longer be
// centered, modify the padding so that it is centered.
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
const minPadding = min(paddingObject[minProp], largestPossiblePadding);
const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
// Make sure the arrow doesn't overflow the floating element if the center
// point is outside the floating element's bounds.
const min$1 = minPadding;
const max = clientSize - arrowDimensions[length] - maxPadding;
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
const offset = clamp$1(min$1, center, max);
// If the reference is small enough that the arrow's padding causes it to
// to point to nothing for an aligned placement, adjust the offset of the
// floating element itself. To ensure `shift()` continues to take action,
// a single reset is performed when this is true.
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
return {
[axis]: coords[axis] + alignmentOffset,
data: {
[axis]: offset,
centerOffset: center - offset - alignmentOffset,
...(shouldAddOffset && {
alignmentOffset
})
},
reset: shouldAddOffset
};
}
});
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
const flip$1 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'flip',
options,
async fn(state) {
var _middlewareData$arrow, _middlewareData$flip;
const {
placement,
middlewareData,
rects,
initialPlacement,
platform,
elements
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = true,
fallbackPlacements: specifiedFallbackPlacements,
fallbackStrategy = 'bestFit',
fallbackAxisSideDirection = 'none',
flipAlignment = true,
...detectOverflowOptions
} = evaluate(options, state);
// If a reset by the arrow was caused due to an alignment offset being
// added, we should skip any logic now since `flip()` has already done its
// work.
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
return {};
}
const side = getSide(placement);
const initialSideAxis = getSideAxis(initialPlacement);
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
}
const placements = [initialPlacement, ...fallbackPlacements];
const overflow = await detectOverflow(state, detectOverflowOptions);
const overflows = [];
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
if (checkMainAxis) {
overflows.push(overflow[side]);
}
if (checkCrossAxis) {
const sides = getAlignmentSides(placement, rects, rtl);
overflows.push(overflow[sides[0]], overflow[sides[1]]);
}
overflowsData = [...overflowsData, {
placement,
overflows
}];
// One or more sides is overflowing.
if (!overflows.every(side => side <= 0)) {
var _middlewareData$flip2, _overflowsData$filter;
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
const nextPlacement = placements[nextIndex];
if (nextPlacement) {
// Try next placement and re-run the lifecycle.
return {
data: {
index: nextIndex,
overflows: overflowsData
},
reset: {
placement: nextPlacement
}
};
}
// First, find the candidates that fit on the mainAxis side of overflow,
// then find the placement that fits the best on the main crossAxis side.
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
// Otherwise fallback.
if (!resetPlacement) {
switch (fallbackStrategy) {
case 'bestFit':
{
var _overflowsData$filter2;
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
if (hasFallbackAxisSideDirection) {
const currentSideAxis = getSideAxis(d.placement);
return currentSideAxis === initialSideAxis ||
// Create a bias to the `y` side axis due to horizontal
// reading directions favoring greater width.
currentSideAxis === 'y';
}
return true;
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
if (placement) {
resetPlacement = placement;
}
break;
}
case 'initialPlacement':
resetPlacement = initialPlacement;
break;
}
}
if (placement !== resetPlacement) {
return {
reset: {
placement: resetPlacement
}
};
}
}
return {};
}
};
};
function getSideOffsets(overflow, rect) {
return {
top: overflow.top - rect.height,
right: overflow.right - rect.width,
bottom: overflow.bottom - rect.height,
left: overflow.left - rect.width
};
}
function isAnySideFullyClipped(overflow) {
return sides.some(side => overflow[side] >= 0);
}
/**
* Provides data to hide the floating element in applicable situations, such as
* when it is not in the same clipping context as the reference element.
* @see https://floating-ui.com/docs/hide
*/
const hide$1 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'hide',
options,
async fn(state) {
const {
rects
} = state;
const {
strategy = 'referenceHidden',
...detectOverflowOptions
} = evaluate(options, state);
switch (strategy) {
case 'referenceHidden':
{
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
elementContext: 'reference'
});
const offsets = getSideOffsets(overflow, rects.reference);
return {
data: {
referenceHiddenOffsets: offsets,
referenceHidden: isAnySideFullyClipped(offsets)
}
};
}
case 'escaped':
{
const overflow = await detectOverflow(state, {
...detectOverflowOptions,
altBoundary: true
});
const offsets = getSideOffsets(overflow, rects.floating);
return {
data: {
escapedOffsets: offsets,
escaped: isAnySideFullyClipped(offsets)
}
};
}
default:
{
return {};
}
}
}
};
};
/**
* Optimizes the visibility of the floating element by shifting it in order to
* keep it in view when it will overflow the clipping boundary.
* @see https://floating-ui.com/docs/shift
*/
const shift$1 = function (options) {
if (options === void 0) {
options = {};
}
return {
name: 'shift',
options,
async fn(state) {
const {
x,
y,
placement
} = state;
const {
mainAxis: checkMainAxis = true,
crossAxis: checkCrossAxis = false,
limiter = {
fn: _ref => {
let {
x,
y
} = _ref;
return {
x,
y
};
}
},
...detectOverflowOptions
} = evaluate(options, state);
const coords = {
x,
y
};
const overflow = await detectOverflow(state, detectOverflowOptions);
const crossAxis = getSideAxis(getSide(placement));
const mainAxis = getOppositeAxis(crossAxis);
let mainAxisCoord = coords[mainAxis];
let crossAxisCoord = coords[crossAxis];
if (checkMainAxis) {
const minSide = mainAxis === 'y' ? 'top' : 'left';
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
const min = mainAxisCoord + overflow[minSide];
const max = mainAxisCoord - overflow[maxSide];
mainAxisCoord = clamp$1(min, mainAxisCoord, max);
}
if (checkCrossAxis) {
const minSide = crossAxis === 'y' ? 'top' : 'left';
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
const min = crossAxisCoord + overflow[minSide];
const max = crossAxisCoord - overflow[maxSide];
crossAxisCoord = clamp$1(min, crossAxisCoord, max);
}
const limitedCoords = limiter.fn({
...state,
[mainAxis]: mainAxisCoord,
[crossAxis]: crossAxisCoord
});
return {
...limitedCoords,
data: {
x: limitedCoords.x - x,
y: limitedCoords.y - y,
enabled: {
[mainAxis]: checkMainAxis,
[crossAxis]: checkCrossAxis
}
}
};
}
};
};
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isTopLayer(element) {
return [':popover-open', ':modal'].some(selector => {
try {
return element.matches(selector);
} catch (e) {
return false;
}
});
}
function isContainingBlock(elementOrCss) {
const webkit = isWebKit();
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (typeof CSS === 'undefined' || !CSS.supports) return false;
return CSS.supports('-webkit-backdrop-filter', 'none');
}
function isLastTraversableNode(node) {
return ['html', 'body', '#document'].includes(getNodeName(node));
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
const frameElement = getFrameElement(win);
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
// In testing environments, the `width` and `height` properties are empty
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
let width = parseFloat(css.width) || 0;
let height = parseFloat(css.height) || 0;
const hasOffset = isHTMLElement(element);
const offsetWidth = hasOffset ? element.offsetWidth : width;
const offsetHeight = hasOffset ? element.offsetHeight : height;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
$: shouldFallback
};
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return createCoords(1);
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
$
} = getCssDimensions(domElement);
let x = ($ ? round(rect.width) : rect.width) / width;
let y = ($ ? round(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
const noOffsets = /*#__PURE__*/createCoords(0);
function getVisualOffsets(element) {
const win = getWindow(element);
if (!isWebKit() || !win.visualViewport) {
return noOffsets;
}
return {
x: win.visualViewport.offsetLeft,
y: win.visualViewport.offsetTop
};
}
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
if (isFixed === void 0) {
isFixed = false;
}
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
return false;
}
return isFixed;
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = createCoords(1);
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale = getScale(offsetParent);
}
} else {
scale = getScale(element);
}
}
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
let x = (clientRect.left + visualOffsets.x) / scale.x;
let y = (clientRect.top + visualOffsets.y) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentWin = win;
let currentIFrame = getFrameElement(currentWin);
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle$1(currentIFrame);
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += left;
y += top;
currentWin = getWindow(currentIFrame);
currentIFrame = getFrameElement(currentWin);
}
}
return rectToClientRect({
width,
height,
x,
y
});
}
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
function getWindowScrollBarX(element, rect) {
const leftScroll = getNodeScroll(element).scrollLeft;
if (!rect) {
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
}
return rect.left + leftScroll;
}
function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
if (ignoreScrollbarX === void 0) {
ignoreScrollbarX = false;
}
const htmlRect = documentElement.getBoundingClientRect();
const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
// RTL <body> scrollbar.
getWindowScrollBarX(documentElement, htmlRect));
const y = htmlRect.top + scroll.scrollTop;
return {
x,
y
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
elements,
rect,
offsetParent,
strategy
} = _ref;
const isFixed = strategy === 'fixed';
const documentElement = getDocumentElement(offsetParent);
const topLayer = elements ? isTopLayer(elements.floating) : false;
if (offsetParent === documentElement || topLayer && isFixed) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = createCoords(1);
const offsets = createCoords(0);
const isOffsetParentAnElement = isHTMLElement(offsetParent);
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
};
}
function getClientRects(element) {
return Array.from(element.getClientRects());
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === 'rtl') {
x += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const visualViewportBased = isWebKit();
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width,
height,
x,
y
};
}
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
let rect;
if (clippingAncestor === 'viewport') {
rect = getViewportRect(element, strategy);
} else if (clippingAncestor === 'document') {
rect = getDocumentRect(getDocumentElement(element));
} else if (isElement(clippingAncestor)) {
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
} else {
const visualOffsets = getVisualOffsets(element);
rect = {
x: clippingAncestor.x - visualOffsets.x,
y: clippingAncestor.y - visualOffsets.y,
width: clippingAncestor.width,
height: clippingAncestor.height
};
}
return rectToClientRect(rect);
}
function hasFixedPositionAncestor(element, stopNode) {
const parentNode = getParentNode(element);
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
return false;
}
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const currentNodeIsContaining = isContainingBlock(currentNode);
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
currentContainingBlockComputedStyle = null;
}
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
const firstClippingAncestor = clippingAncestors[0];
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
accRect.top = max(rect.top, accRect.top);
accRect.right = min(rect.right, accRect.right);
accRect.bottom = min(rect.bottom, accRect.bottom);
accRect.left = max(rect.left, accRect.left);
return accRect;
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
const {
width,
height
} = getCssDimensions(element);
return {
width,
height
};
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const isFixed = strategy === 'fixed';
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = createCoords(0);
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isOffsetParentAnElement) {
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
offsets.x = getWindowScrollBarX(documentElement);
}
}
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
return {
x,
y,
width: rect.width,
height: rect.height
};
}
function isStaticPositioned(element) {
return getComputedStyle$1(element).position === 'static';
}
function getTrueOffsetParent(element, polyfill) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
return null;
}
if (polyfill) {
return polyfill(element);
}
let rawOffsetParent = element.offsetParent;
// Firefox returns the <html> element as the offsetParent if it's non-static,
// while Chrome and Safari return the <body> element. The <body> element must
// be used to perform the correct calculations even if the <html> element is
// non-static.
if (getDocumentElement(element) === rawOffsetParent) {
rawOffsetParent = rawOffsetParent.ownerDocument.body;
}
return rawOffsetParent;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element, polyfill) {
const win = getWindow(element);
if (isTopLayer(element)) {
return win;
}
if (!isHTMLElement(element)) {
let svgOffsetParent = getParentNode(element);
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
return svgOffsetParent;
}
svgOffsetParent = getParentNode(svgOffsetParent);
}
return win;
}
let offsetParent = getTrueOffsetParent(element, polyfill);
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
}
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
return win;
}
return offsetParent || getContainingBlock(element) || win;
}
const getElementRects = async function (data) {
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
const floatingDimensions = await getDimensionsFn(data.floating);
return {
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
floating: {
x: 0,
y: 0,
width: floatingDimensions.width,
height: floatingDimensions.height
}
};
};
function isRTL(element) {
return getComputedStyle$1(element).direction === 'rtl';
}
const platform = {
convertOffsetParentRelativeRectToViewportRelativeRect,
getDocumentElement,
getClippingRect,
getOffsetParent,
getElementRects,
getClientRects,
getDimensions,
getScale,
isElement,
isRTL
};
function rectsAreEqual(a, b) {
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
}
// https://samthor.au/2021/observing-dom/
function observeMove(element, onMove) {
let io = null;
let timeoutId;
const root = getDocumentElement(element);
function cleanup() {
var _io;
clearTimeout(timeoutId);
(_io = io) == null || _io.disconnect();
io = null;
}
function refresh(skip, threshold) {
if (skip === void 0) {
skip = false;
}
if (threshold === void 0) {
threshold = 1;
}
cleanup();
const elementRectForRootMargin = element.getBoundingClientRect();
const {
left,
top,
width,
height
} = elementRectForRootMargin;
if (!skip) {
onMove();
}
if (!width || !height) {
return;
}
const insetTop = floor(top);
const insetRight = floor(root.clientWidth - (left + width));
const insetBottom = floor(root.clientHeight - (top + height));
const insetLeft = floor(left);
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
const options = {
rootMargin,
threshold: max(0, min(1, threshold)) || 1
};
let isFirstUpdate = true;
function handleObserve(entries) {
const ratio = entries[0].intersectionRatio;
if (ratio !== threshold) {
if (!isFirstUpdate) {
return refresh();
}
if (!ratio) {
// If the reference is clipped, the ratio is 0. Throttle the refresh
// to prevent an infinite loop of updates.
timeoutId = setTimeout(() => {
refresh(false, 1e-7);
}, 1000);
} else {
refresh(false, ratio);
}
}
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
// It's possible that even though the ratio is reported as 1, the
// element is not actually fully within the IntersectionObserver's root
// area anymore. This can happen under performance constraints. This may
// be a bug in the browser's IntersectionObserver implementation. To
// work around this, we compare the element's bounding rect now with
// what it was at the time we created the IntersectionObserver. If they
// are not equal then the element moved, so we refresh.
refresh();
}
isFirstUpdate = false;
}
// Older browsers don't support a `document` as the root and will throw an
// error.
try {
io = new IntersectionObserver(handleObserve, {
...options,
// Handle <iframe>s
root: root.ownerDocument
});
} catch (e) {
io = new IntersectionObserver(handleObserve, options);
}
io.observe(element);
}
refresh(true);
return cleanup;
}
/**
* Automatically updates the position of the floating element when necessary.
* Should only be called when the floating element is mounted on the DOM or
* visible on the screen.
* @returns cleanup function that should be invoked when the floating element is
* removed from the DOM or hidden from the screen.
* @see https://floating-ui.com/docs/autoUpdate
*/
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll = true,
ancestorResize = true,
elementResize = typeof ResizeObserver === 'function',
layoutShift = typeof IntersectionObserver === 'function',
animationFrame = false
} = options;
const referenceEl = unwrapElement(reference);
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.addEventListener('scroll', update, {
passive: true
});
ancestorResize && ancestor.addEventListener('resize', update);
});
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
let reobserveFrame = -1;
let resizeObserver = null;
if (elementResize) {
resizeObserver = new ResizeObserver(_ref => {
let [firstEntry] = _ref;
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
// Prevent update loops when using the `size` middleware.
// https://github.com/floating-ui/floating-ui/issues/1740
resizeObserver.unobserve(floating);
cancelAnimationFrame(reobserveFrame);
reobserveFrame = requestAnimationFrame(() => {
var _resizeObserver;
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
});
}
update();
});
if (referenceEl && !animationFrame) {
resizeObserver.observe(referenceEl);
}
resizeObserver.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _resizeObserver2;
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.removeEventListener('scroll', update);
ancestorResize && ancestor.removeEventListener('resize', update);
});
cleanupIo == null || cleanupIo();
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
resizeObserver = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**
* Optimizes the visibility of the floating element by shifting it in order to
* keep it in view when it will overflow the clipping boundary.
* @see https://floating-ui.com/docs/shift
*/
const shift = shift$1;
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
const flip = flip$1;
/**
* Provides data to hide the floating element in applicable situations, such as
* when it is not in the same clipping context as the reference element.
* @see https://floating-ui.com/docs/hide
*/
const hide = hide$1;
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
const arrow = arrow$1;
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a given reference element.
*/
const computePosition = (reference, floating, options) => {
// This caches the expensive `getClippingElementAncestors` function so that
// multiple lifecycle resets re-use the same result. It only lives for a
// single call. If other functions become expensive, we can add them as well.
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return computePosition$1(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
/* eslint-disable @typescript-eslint/ban-types */
function offsetParent(element) {
return offsetParentPolyfill(element);
}
function flatTreeParent(element) {
if (element.assignedSlot) {
return element.assignedSlot;
}
if (element.parentNode instanceof ShadowRoot) {
return element.parentNode.host;
}
return element.parentNode;
}
function offsetParentPolyfill(element) {
// Do an initial walk to check for display:none ancestors.
for (let ancestor = element; ancestor; ancestor = flatTreeParent(ancestor)) {
if (!(ancestor instanceof Element)) {
continue;
}
if (getComputedStyle(ancestor).display === 'none') {
return null;
}
}
for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
if (!(ancestor instanceof Element)) {
continue;
}
const style = getComputedStyle(ancestor);
// Display:contents nodes aren't in the layout tree so they should be skipped.
if (style.display === 'contents') {
continue;
}
if (style.position !== 'static' || style.filter !== 'none') {
return ancestor;
}
if (ancestor.tagName === 'BODY') {
return ancestor;
}
}
return null;
}
function supportsPopover() {
// this is the recommended way to check for support https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#showing_popovers_via_javascript
return Object.hasOwn(HTMLElement.prototype, 'popover');
}
/**
* Checks if the given element is a popover (i.e. uses the Popover).
*/
function isPopover(element) {
if (!element) {
return false;
}
return supportsPopover() && element.matches('[popover]');
}
/**
* Get manually calculated offset because floating-ui's offset middleware fails
* to calculate the correct offset when the reference is small.
*/
function getPositionOffset(arrow, direction, offset) {
const size = 'var(--m-popover-arrow-size)';
switch (direction) {
case 'top':
case 'left':
return arrow ? `-1 * ${size} - ${offset}px` : `-1 * ${offset}px`;
case 'bottom':
case 'right':
return arrow ? `${size} + ${offset}px` : `${offset}px`;
default:
return '0px';
}
}
var _Popover_updateCleanup, _Popover_getArrowPosition;
const POPOVER_PLACEMENT_VALUES = [
'top',
'left',
'right',
'bottom',
'top-start',
'top-end',
'bottom-start',
'bottom-end',
];
const logger$c = createLogger('popover');
class Popover extends Component {
static get properties() {
return {
position: { type: String, reflect: true },
placement: { type: String },
open: { type: Boolean, reflect: true },
asPopover: { type: Boolean, attribute: 'as-popover' },
};
}
constructor() {
super();
_Popover_updateCleanup.set(this, void 0);
// eslint-disable-next-line class-methods-use-this
this.getFloatingOffset = () => {
return 10;
};
// eslint-disable-next-line class-methods-use-this
this.renderArrow = () => {
return x `<span id="arrow"></span>`;
};
this.reposition = async (reason) => {
if (this.floating == null || this.reference == null) {
logger$c.warn('[popover]', 'both floating and reference elements should be available', { reference: this.reference, floating: this.floating });
return;
}
const { x, y, placement, middlewareData } = await computePosition(this.reference, this.floating, {
strategy: this.position ?? 'fixed',
placement: this.placement ?? 'bottom-start',
// source: https://floating-ui.com/docs/platform#shadow-dom-fix
platform: {
...platform,
getOffsetParent: (element) => {
return platform.getOffsetParent(element, offsetParent);
},
},
middleware: [
// to prevent the floating element from overflowing on the main axis of its placement
flip(),
// preventing overflow while maintaining the desired placement as best as possible.
shift(),
/**
* positioning data for an arrow element (triangle or caret) inside the floating element.
* the padding here is to account for the floating element's border-radius.
*/
this.arrow ? arrow({ element: this.arrow, padding: 10 }) : undefined,
// to hide the floating element in applicable situations.
hide(),
],
});
if (middlewareData.hide?.referenceHidden) {
// we skip repositioning if the reference element is hidden
Object.assign(this.floating.style, {
visibility: 'hidden',
});
return;
}
const [side] = placement.split('-');
const hasArrow = this.arrow != null;
const mainSideIncrement = {
top: {
x: '0px',
y: getPositionOffset(hasArrow, 'top', this.getFloatingOffset()),
},
bottom: {
x: '0px',
y: getPositionOffset(hasArrow, 'bottom', this.getFloatingOffset()),
},
right: {
x: getPositionOffset(hasArrow, 'right', this.getFloatingOffset()),
y: '0px',
},
left: {
x: getPositionOffset(hasArrow, 'left', this.getFloatingOffset()),
y: '0px',
},
};
Object.assign(this.floating.style, {
visibility: 'visible',
top: `calc(${y}px + ${mainSideIncrement[side].y})`,
left: `calc(${x}px + ${mainSideIncrement[side].x})`,
});
if (this.arrow != null && middlewareData.arrow) {
Object.assign(this.arrow.style, __classPrivateFieldGet$1(this, _Popover_getArrowPosition, "f").call(this, middlewareData.arrow, side));
}
this.emit('popoverreposition', { detail: { reason } });
};
// Reference: https://floating-ui.com/docs/arrow#visualization
_Popover_getArrowPosition.set(this, (coords, side) => {
if (this.floating == null ||
this.reference == null ||
this.arrow == null ||
coords == null) {
return {};
}
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right',
}[side];
const { x, y } = coords;
const arrowLen = this.arrow.offsetWidth;
return {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
// Ensure the static side gets unset when flipping to other placements' axes.
right: '',
bottom: '',
[staticSide]: `${-arrowLen / 2}px`,
};
});
this.position = 'fixed';
this.placement = 'top-end';
this.open = false;
this.asPopover = false;
}
disconnectedCallback() {
super.disconnectedCallback();
__classPrivateFieldGet$1(this, _Popover_updateCleanup, "f")?.call(this);
}
firstUpdated() {
if (this.asPopover && supportsPopover() && this.floating) {
/**
* setting this attribute to manual means the popover must always be explicitly hidden
* Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover
*/
this.floating.setAttribute('popover', 'manual');
}
if (this.open) {
this.show();
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (this.open &&
changedProperties.get('placement') != null &&
this.placement != null) {
this.reposition('placement');
}
}
// eslint-disable-next-line class-methods-use-this
getReferenceElement() {
throw new Error('Method not implemented.');
}
// eslint-disable-next-line class-methods-use-this
getFloatingElement() {
throw new Error('Method not implemented.');
}
// eslint-disable-next-line class-methods-use-this
getArrowElement() {
throw new Error('Method not implemented.');
}
get reference() {
return this.getReferenceElement();
}
get floating() {
return this.getFloatingElement();
}
get arrow() {
return this.getArrowElement();
}
show() {
if (this.open) {
return;
}
this.open = true;
if (!this.reference || !this.floating) {
return;
}
if (isPopover(this.floating)) {
this.floating.showPopover();
}
this.reposition('auto');
__classPrivateFieldSet(this, _Popover_updateCleanup, autoUpdate(this.reference, this.floating, () => {
this.reposition('auto');
}), "f");
}
hide() {
if (!this.open) {
return;
}
this.open = false;
if (this.floating != null && isPopover(this.floating)) {
this.floating.hidePopover();
}
__classPrivateFieldGet$1(this, _Popover_updateCleanup, "f")?.call(this);
}
toggle() {
if (this.open) {
this.hide();
}
else {
this.show();
}
}
}
_Popover_updateCleanup = new WeakMap(), _Popover_getArrowPosition = new WeakMap();
const DEFAULT_SELECTORS = {
referenceSelector: "slot[name='reference']::slotted(*),",
floatingSelector: "slot[name='floating']::slotted(*)",
};
function styles$k(selectors = DEFAULT_SELECTORS) {
const { referenceSelector, floatingSelector } = {
...DEFAULT_SELECTORS,
...selectors,
};
return [
i$9 `
:host {
--m-popover-background-color: ${getColor('color-background-secondary-inverted')};
--m-popover-border-radius: ${getToken$1('border-radius-m')};
--m-popover-border-width: 0;
--m-popover-border-style: none;
--m-popover-overflow-x: hidden;
--m-popover-overflow-y: visible;
--m-popover-border-color: transparent;
--m-popover-color: ${getColor('color-text-inverted')};
--m-popover-elevation: ${getToken$1('elevation-2')};
--m-popover-width: initial;
--m-popover-min-width: initial;
--m-popover-max-width: initial;
--m-popover-z-index: 10;
--m-popover-floating-spacing-x: ${getToken$1('spacing-4')};
--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
--m-popover-floating-display: none;
--m-popover-floating-position: fixed;
--m-popover-arrow-size: 12px;
--m-popover-arrow-offset: calc(-1 * (var(--m-popover-arrow-size) / 2));
position: relative;
}
${r$8(referenceSelector)} {
display: inline-flex;
}
${r$8(floatingSelector)} {
${transition([{ property: 'box-shadow' }])};
${typography('body-md')};
padding-inline: var(--m-popover-floating-spacing-x);
padding-block: var(--m-popover-floating-spacing-y);
margin: 0;
position: var(--m-popover-floating-position);
display: var(--m-popover-floating-display);
box-sizing: border-box;
inline-size: var(--m-popover-width);
min-inline-size: var(--m-popover-min-width);
max-inline-size: var(--m-popover-max-width);
overflow-x: var(--m-popover-overflow-x);
overflow-y: var(--m-popover-overflow-y);
border-width: var(--m-popover-border-width);
border-style: var(--m-popover-border-style);
border-color: var(--m-popover-border-color);
border-radius: var(--m-popover-border-radius);
background-color: var(--m-popover-background-color);
color: var(--m-popover-color);
box-shadow: var(--m-popover-elevation);
z-index: var(--m-popover-z-index);
}
:host([position='absolute']) {
--m-popover-floating-position: absolute;
}
:host([position='fixed']) {
--m-popover-floating-position: fixed;
}
:host([open]) {
--m-popover-floating-display: inline-block;
}
#arrow {
display: var(--m-popover-floating-display);
position: absolute;
inline-size: var(--m-popover-arrow-size);
block-size: var(--m-popover-arrow-size);
background-color: var(--m-popover-background-color);
transform: rotate(45deg);
pointer-events: none;
}
`,
];
}
var _BoundaryController_instances, _BoundaryController_subscribe, _BoundaryController_unsubscribe, _BoundaryController_handleEvent, _BoundaryController_handleBlurEvent;
class BoundaryController {
constructor(host, active) {
_BoundaryController_instances.add(this);
this.activate = () => {
if (this.active) {
return;
}
__classPrivateFieldGet$1(this, _BoundaryController_instances, "m", _BoundaryController_subscribe).call(this);
this.active = true;
};
this.deactivate = () => {
if (!this.active) {
return;
}
__classPrivateFieldGet$1(this, _BoundaryController_instances, "m", _BoundaryController_unsubscribe).call(this);
this.active = false;
};
_BoundaryController_handleEvent.set(this, (event) => {
const isInside = isInsideElement(event, this.host);
if (!isInside ||
(event instanceof KeyboardEvent && event.key === 'Escape')) {
this.host.dispatchEvent(new CustomEvent('interactout'));
}
else if (isInside) {
this.host.dispatchEvent(new CustomEvent('interactin'));
}
});
_BoundaryController_handleBlurEvent.set(this, (event) => {
const isInside = isInsideElement(event, this.host);
if (!isInside) {
this.host.dispatchEvent(new CustomEvent('interactout'));
}
});
this.host = host;
this.active = Boolean(active ?? false);
this.host.addController(this);
}
hostConnected() {
if (this.active) {
__classPrivateFieldGet$1(this, _BoundaryController_instances, "m", _BoundaryController_subscribe).call(this);
}
else {
__classPrivateFieldGet$1(this, _BoundaryController_instances, "m", _BoundaryController_unsubscribe).call(this);
}
}
hostDisconnected() {
if (this.active) {
__classPrivateFieldGet$1(this, _BoundaryController_instances, "m", _BoundaryController_unsubscribe).call(this);
}
}
}
_BoundaryController_handleEvent = new WeakMap(), _BoundaryController_handleBlurEvent = new WeakMap(), _BoundaryController_instances = new WeakSet(), _BoundaryController_subscribe = function _BoundaryController_subscribe() {
document.addEventListener('mousedown', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
document.addEventListener('keyup', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
document.addEventListener('touchend', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
window.addEventListener('blur', __classPrivateFieldGet$1(this, _BoundaryController_handleBlurEvent, "f"), true);
}, _BoundaryController_unsubscribe = function _BoundaryController_unsubscribe() {
document.removeEventListener('mousedown', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
document.removeEventListener('keyup', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
document.removeEventListener('touchend', __classPrivateFieldGet$1(this, _BoundaryController_handleEvent, "f"));
window.removeEventListener('blur', __classPrivateFieldGet$1(this, _BoundaryController_handleBlurEvent, "f"), true);
};
var _FocusManagerController_instances, _FocusManagerController_focusElement, _FocusManagerController_focusIndex, _FocusManagerController_focusPosition, _FocusManagerController_getIndexOfQueried, _FocusManagerController_findQueriedById, _FocusManagerController_handleKeyPress, _FocusManagerController_clearBufferAfterDelay, _FocusManagerController_findMatchInRange;
const logger$b = createLogger('focus-manager-controller');
function isDisabled(element) {
return (element != null &&
typeof element === 'object' &&
'disabled' in element &&
element.disabled === true);
}
/**
* Check if `keyboardEventKey` is a character, and more specifically, anything
* other than a space, tab, or newline.
*/
function isPrintableCharacter(keyboardEventKey) {
const printableCharacterRegex = /\S/;
return (keyboardEventKey.length === 1 &&
printableCharacterRegex.test(keyboardEventKey));
}
/**
* Manages **virtual/visual** focus, for a11y purposes.
*/
class FocusManagerController {
constructor(host, options) {
_FocusManagerController_instances.add(this);
this.activeDescendant = null;
_FocusManagerController_focusElement.set(this, (element) => {
if (!element || isDisabled(element) || !element.id) {
logger$b.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
return;
}
this.clear();
this.activeDescendant = element.id;
this.getInteractiveElement(this.host).setAttribute('aria-activedescendant', element.id);
element.classList.add('is-focused');
element.scrollIntoView({
block: 'nearest',
inline: 'nearest',
behavior: 'smooth',
});
});
_FocusManagerController_focusIndex.set(this, (index) => {
__classPrivateFieldGet$1(this, _FocusManagerController_focusElement, "f").call(this, this.queried.at(index));
});
_FocusManagerController_focusPosition.set(this, (position) => {
const currentFocusedIndex = __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_getIndexOfQueried).call(this, this.focused);
switch (position) {
case 'first':
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, 0);
break;
case 'last':
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, this.queried.length - 1);
break;
case 'previous': {
if (currentFocusedIndex === -1) {
logger$b.debug('focus previous, could not get current focused; focusing on last queried instead');
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, currentFocusedIndex);
return;
}
// it's ok to have a negative index here. `Array.prototype.at()` will handle that correctly.
const previousItemIndex = (currentFocusedIndex - 1) % this.queried.length;
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, previousItemIndex);
break;
}
case 'next': {
if (currentFocusedIndex === -1) {
logger$b.debug('focus next, could not get current focused. focusing on first queried instead');
}
const nextItemIndex = (currentFocusedIndex + 1) % this.queried.length;
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, nextItemIndex);
break;
}
}
});
/**
* Moves focus to the next item with a label that starts with the typed character
* if such item exists. Otherwise, focus does not move.
*/
_FocusManagerController_handleKeyPress.set(this, (event) => {
const { key } = event;
if (!isPrintableCharacter(key)) {
return;
}
const searchIndex = __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_getIndexOfQueried).call(this, this.focused);
this.quickSearchBuffer += key;
__classPrivateFieldGet$1(this, _FocusManagerController_clearBufferAfterDelay, "f").call(this);
// run search in elements after the currently virtually focused element (if any)
let nextMatch = __classPrivateFieldGet$1(this, _FocusManagerController_findMatchInRange, "f").call(this, searchIndex + 1, this.queried.length);
if (!nextMatch) {
// run search in elements before the currently virtually focused element (if any)
nextMatch = __classPrivateFieldGet$1(this, _FocusManagerController_findMatchInRange, "f").call(this, 0, searchIndex);
}
if (nextMatch != null) {
this.focus(nextMatch);
}
});
_FocusManagerController_clearBufferAfterDelay.set(this, () => {
if (this.quickSearchBufferTimeout) {
window.clearTimeout(this.quickSearchBufferTimeout);
this.quickSearchBufferTimeout = null;
}
this.quickSearchBufferTimeout = window.setTimeout(() => {
this.quickSearchBuffer = '';
this.quickSearchBufferTimeout = null;
}, 500);
});
_FocusManagerController_findMatchInRange.set(this, (startAt, endAt) => {
for (let i = startAt; i < endAt; i++) {
/**
* [!] Be aware that `innerText` can be expensive as it takes CSS styles into account (it triggers a reflow to
* ensure up-to-date computed styles).
* Source: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext
* // TODO: evaluate replacing `innerText` with `textContent`.
*/
const label = this.queried[i].innerText.toLowerCase();
if (label && label.indexOf(this.quickSearchBuffer) === 0) {
return this.queried[i];
}
}
return null;
});
this.query =
typeof options.query === 'function'
? options.query
: toArray(options.query).join(',');
this.focusOnType = Boolean(options.focusOnType ?? true);
this.getInteractiveElement =
options.getInteractiveElement ??
(() => {
return host;
});
this.quickSearchBuffer = '';
(this.host = host).addController(this);
}
hostConnected() {
if (!this.focusOnType) {
logger$b.debug('focus on type is disabled. Controller will not listen to keyup events');
return;
}
this.host.addEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyPress, "f"));
}
hostDisconnected() {
this.host.removeEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyPress, "f"));
}
/**
* Get the list of elements matching the given `options.query`.
*/
get queried() {
if (typeof this.query === 'function') {
return this.query(this.host);
}
return Array.from(this.host.querySelectorAll(this.query));
}
/**
* Get the currently focused element, based on `activeDescendant`.
*/
get focused() {
if (!this.activeDescendant) {
return null;
}
return __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_findQueriedById).call(this, this.activeDescendant);
}
/**
* If none of the options are selected, the first option receives focus; otherwise, the
* focus moves to the next option.
* If we are at the end of the `queried` array, the focus moves to the first option.
*/
focusNext() {
this.focus('next');
}
/**
* If none of the options are selected, the last option receives focus; otherwise, the
* focus moves to the next option.
* If we are at the start of the `queried` array, the focus moves to the last option.
*/
focusPrevious() {
this.focus('previous');
}
/**
* Focus the first element in `queried`.
*/
focusFirst() {
this.focus(0);
}
/**
* Focus the last element in `queried`.
*/
focusLast() {
this.focus(this.queried.length - 1);
}
/**
* Focus the given element or the element at the given index or position, based on `queried`.
*/
focus(where) {
if (typeof where === 'number') {
__classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, where);
}
else if (typeof where === 'string') {
__classPrivateFieldGet$1(this, _FocusManagerController_focusPosition, "f").call(this, where);
}
else {
__classPrivateFieldGet$1(this, _FocusManagerController_focusElement, "f").call(this, where);
}
}
/**
* Remove the visual focus (`.is-focused` class) from the currently focused element and
* clear the `activeDescendant` attribute.
*/
clear() {
this.getInteractiveElement(this.host).removeAttribute('aria-activedescendant');
const element = this.focused;
this.activeDescendant = null;
if (!element) {
return;
}
element.classList.remove('is-focused');
}
}
_FocusManagerController_focusElement = new WeakMap(), _FocusManagerController_focusIndex = new WeakMap(), _FocusManagerController_focusPosition = new WeakMap(), _FocusManagerController_handleKeyPress = new WeakMap(), _FocusManagerController_clearBufferAfterDelay = new WeakMap(), _FocusManagerController_findMatchInRange = new WeakMap(), _FocusManagerController_instances = new WeakSet(), _FocusManagerController_getIndexOfQueried = function _FocusManagerController_getIndexOfQueried(element) {
if (!element) {
return -1;
}
return this.queried.indexOf(element);
}, _FocusManagerController_findQueriedById = function _FocusManagerController_findQueriedById(id) {
return (this.queried.find((element) => {
return element.id === id;
}) ?? null);
};
var _KeyboardSupportController_handleKey;
const logger$a = createLogger('keyboard-support-controller');
function getShortcutKey(shortcut) {
const keys = [
shortcut.alt ? 'alt' : '',
shortcut.ctrl ? 'ctrl' : '',
shortcut.meta ? 'cmd' : '',
shortcut.shift ? 'shift' : '',
shortcut.key.toLowerCase(),
];
return keys.filter(Boolean).join('+');
}
/**
* Enable a component to implement behavior based on shortcuts.
*/
class KeyboardSupportController {
constructor(host, keymap, options) {
this.keymap = new Map();
_KeyboardSupportController_handleKey.set(this, (event) => {
const shortcut = getShortcutKey({
key: event.key,
meta: event.metaKey,
shift: event.shiftKey,
ctrl: event.ctrlKey,
alt: event.altKey,
});
if (this.keymap.has(shortcut)) {
const handler = this.keymap.get(shortcut);
handler(event);
return;
}
logger$a.debug('no handler for shortcut', shortcut);
});
this.keymap = new Map(toArray(keymap).reduce((map, { shortcut, handler }) => {
return map.concat(toArray(shortcut).map((s) => {
return [getShortcutKey(s), handler];
}));
}, []));
this.event = options?.event ?? 'keyup';
this.getEventTarget = options?.getEventTarget ?? (() => host);
(this.host = host).addController(this);
}
async hostConnected() {
this.getEventTarget(this.host).addEventListener(this.event, __classPrivateFieldGet$1(this, _KeyboardSupportController_handleKey, "f"));
}
hostDisconnected() {
this.getEventTarget(this.host).removeEventListener(this.event, __classPrivateFieldGet$1(this, _KeyboardSupportController_handleKey, "f"));
}
}
_KeyboardSupportController_handleKey = new WeakMap();
const TRIGGER_SELECTOR$1 = '[aria-haspopup="true"]';
const MENU_SELECTOR$1 = '[role="menu"]';
const ITEM_SELECTOR = '[role="menuitem"]';
function dropdownStyles() {
return [
styles$k({
referenceSelector: `::slotted(${TRIGGER_SELECTOR$1})`,
floatingSelector: `::slotted(${MENU_SELECTOR$1})`,
}),
i$9 `
:host {
--m-popover-floating-spacing-x: ${getToken$1('spacing-2')};
--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
/* TODO: figure out a way to avoid layout shift when using narrow triggers */
--m-popover-width: max-content;
--m-popover-min-width: 16ch;
display: inline-block;
}
::slotted(${r$8(MENU_SELECTOR$1)}) {
--m-popover-background-color: ${getColor('color-background-primary')};
outline: none;
}
:host([open]) ::slotted(${r$8(MENU_SELECTOR$1)}) {
display: inline-flex;
flex-direction: column;
}
`,
];
}
function triggerStyles() {
return [
i$9 `
:host {
--m-dropdown-trigger-background-color: ${getColor('color-background-primary')};
--m-dropdown-trigger-border-color: ${getColor('color-border-input')};
--m-dropdown-trigger-border-radius: ${getToken$1('border-radius-s')};
--m-dropdown-trigger-color: ${getColor('color-text-tertiary')};
--m-dropdown-trigger-padding-x: ${getToken$1('spacing-2')};
--m-dropdown-trigger-padding-y: ${getToken$1('spacing-2')};
--m-dropdown-trigger-height: ${getToken$1('global-height-default')};
${transition([
{ property: 'color' },
{ property: 'background-color' },
{ property: 'border-color' },
])};
${typography('body-md')};
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
overflow: hidden;
block-size: var(--m-dropdown-trigger-height);
inline-size: 100%;
box-sizing: border-box;
text-decoration: none;
gap: ${getToken$1('spacing-1')};
${px('var(--m-dropdown-trigger-padding-x)')};
${py('var(--m-dropdown-trigger-padding-y)')};
background-color: var(--m-dropdown-trigger-background-color);
color: var(--m-dropdown-trigger-color);
border: 1px solid var(--m-dropdown-trigger-border-color);
border-radius: var(--m-dropdown-trigger-border-radius);
outline: none;
}
:host(:not([disabled]):hover) {
--m-dropdown-trigger-border-color: ${getColor('color-primary-60')};
}
:host(:not([disabled]):is(:focus, :focus-within, :focus-visible)) {
--m-dropdown-trigger-border-color: ${getColor('color-primary-100')};
}
:host([disabled]) {
--m-dropdown-trigger-background-color: ${getColor('color-background-tertiary')};
--m-dropdown-trigger-color: ${getColor('color-text-placeholder')};
cursor: default;
pointer-events: none;
}
:host([disabled]) *,
:host([disabled]) ::slotted(*) {
pointer-events: none;
user-select: none;
}
:host-context([size='small']) {
--m-dropdown-trigger-border-color: ${getColor('color-border-input', 0)};
--m-dropdown-trigger-padding-y: ${getToken$1('spacing-1')};
--m-dropdown-trigger-height: ${getToken$1('global-height-small')};
--m-dropdown-trigger-background-color: transparent;
}
:host-context([size='small']:not([disabled]):hover) {
--m-dropdown-trigger-border-color: ${getColor('color-border-input')};
}
:host-context([size='small'][disabled]) {
--m-dropdown-trigger-color: ${getColor('color-text-disabled')};
}
:host-context([size='large']) {
--m-dropdown-trigger-padding-y: ${getToken$1('spacing-3')};
--m-dropdown-trigger-height: ${getToken$1('global-height-large')};
}
`,
i$9 `
.indicator {
--m-icon-size: 12px;
color: ${getColor('color-text-tertiary')};
margin: 0 0 0 auto;
}
:host([aria-expanded='true']) .indicator {
transform: rotate(180deg);
}
:host-context([size='small'][disabled]) .indicator {
color: ${getColor('color-text-disabled')};
}
`,
];
}
function itemStyles() {
return [
i$9 `
:host {
--m-dropdown-item-background-color: ${getColor('color-background-primary')};
--m-dropdown-item-color: ${getColor('color-text-secondary')};
${transition([
{ property: 'color' },
{ property: 'background-color' },
])};
${typography('body-md')};
cursor: pointer;
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
gap: ${getToken$1('spacing-2')};
${px(getToken$1('spacing-1'))};
${py(getToken$1('spacing-2'))};
background-color: var(--m-dropdown-item-background-color);
color: var(--m-dropdown-item-color);
border: none;
border-radius: ${getToken$1('border-radius-s')};
}
slot[name='leading']::slotted(*),
slot[name='trailing']::slotted(*) {
display: inline-flex;
align-items: center;
justify-content: center;
${p$2(0)};
${m$1(0)};
}
:host([destructive]) {
--m-dropdown-item-color: ${getColor('color-text-error')};
}
:host(:not([disabled]):hover),
:host(:is(:focus, :focus-within, :focus-visible, .is-focused)) {
--m-dropdown-item-background-color: ${getColor('color-background-tertiary')};
font-weight: ${getToken$1('font-weight-bold')};
outline: none;
}
:host(:not([disabled]):is(:active, .is-active)) {
--m-dropdown-item-background-color: ${getColor('color-background-highlight')};
}
:host([disabled]) {
--m-dropdown-item-color: ${getColor('color-text-disabled')};
pointer-events: none;
user-select: none;
cursor: default;
}
:host([disabled]) ::slotted(*) {
pointer-events: none;
user-select: none;
}
`,
];
}
function dropdownDividerStyles() {
return i$9 `
:host {
--m-divider-margin-y: ${getToken$1('spacing-2')};
}
`;
}
var _Dropdown_controllers, _Dropdown_handleClick, _Dropdown_handleClickOutside;
class Dropdown extends Popover {
static get properties() {
return {
...Popover.properties,
disabled: {
type: Boolean,
reflect: true,
},
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-dropdown', constructor: Dropdown });
}
constructor() {
super();
_Dropdown_controllers.set(this, void 0);
// eslint-disable-next-line class-methods-use-this
this.getFloatingOffset = () => {
return 4;
};
_Dropdown_handleClick.set(this, (event) => {
const { target } = event;
if (!target) {
return;
}
if (target.matches(ITEM_SELECTOR)) {
/**
* we set focus so we can trigger the item click event when the user
* presses <Enter> or <Space>, through the KeyboardSupportController.
*/
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.focus(target);
this.collapse();
}
/**
* <Enter> or <Space> keys also trigger the click event.
* In that case, we do not want to respond to the key event, since
* the keyboard shortcut will handle it for us.
* To distinguish between a keypress event and click, we can use the `detail` property,
* which determines how many times the element was clicked. For a keyboard event, this
* should be 0; for a click event, it should be at least 1.
* References:
* - https://css-tricks.com/when-a-click-is-not-just-a-click/
* - https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
*/
if (target.matches(TRIGGER_SELECTOR$1) &&
event.detail > 0) {
this.toggle();
}
});
_Dropdown_handleClickOutside.set(this, () => {
this.collapse();
});
this.position = 'absolute';
this.placement = 'bottom-end';
this.disabled = false;
__classPrivateFieldSet(this, _Dropdown_controllers, {
boundary: new BoundaryController(this),
focus: new FocusManagerController(this, {
query: ITEM_SELECTOR,
getInteractiveElement: () => {
return this.getFloatingElement();
},
}),
keyboard: new KeyboardSupportController(this, [
{
shortcut: {
key: 'ArrowUp',
},
handler: (event) => {
const { target } = event;
if (!target || this.disabled) {
return;
}
if (target.matches(TRIGGER_SELECTOR$1)) {
this.expand({ position: 'last' });
return;
}
if (target.matches(MENU_SELECTOR$1)) {
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.focusPrevious();
}
},
},
{
shortcut: {
key: 'ArrowDown',
},
handler: (event) => {
const { target } = event;
if (!target || this.disabled) {
return;
}
if (target.matches(TRIGGER_SELECTOR$1)) {
this.expand({ position: 'first' });
return;
}
if (target.matches(MENU_SELECTOR$1)) {
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.focusNext();
}
},
},
{
shortcut: [
{
key: 'Enter',
},
{
key: ' ',
},
],
handler: (event) => {
const { target } = event;
if (!target || this.disabled) {
return;
}
if (target.matches(TRIGGER_SELECTOR$1)) {
this.toggle({ position: 'first' });
return;
}
if (target.matches(MENU_SELECTOR$1)) {
const item = __classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.focused;
if (item?.disabled) {
return;
}
item.click();
}
},
},
{
shortcut: [
{
key: 'Tab',
},
{
key: 'Tab',
shift: true,
},
],
handler: (event) => {
const { target } = event;
if (!target) {
return;
}
if (target.matches(TRIGGER_SELECTOR$1) &&
this.open) {
__classPrivateFieldGet$1(this, _Dropdown_handleClickOutside, "f").call(this);
}
},
},
]),
}, "f");
this.addEventListener('click', __classPrivateFieldGet$1(this, _Dropdown_handleClick, "f"));
this.addEventListener('interactout', __classPrivateFieldGet$1(this, _Dropdown_handleClickOutside, "f"));
}
firstUpdated() {
if (this.floating?.id) {
this.reference?.setAttribute('aria-controls', this.floating.id);
}
if (this.reference?.id) {
this.floating?.setAttribute('aria-labelledby', this.reference.id);
}
super.firstUpdated();
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('open')) {
if (this.open) {
this.reference?.setAttribute('aria-expanded', 'true');
}
else {
this.reference?.removeAttribute('aria-expanded');
}
}
if (changedProperties.has('disabled') && this.reference) {
this.reference.disabled = this.disabled;
}
}
getReferenceElement() {
return this.querySelector(TRIGGER_SELECTOR$1);
}
getFloatingElement() {
return this.querySelector(MENU_SELECTOR$1);
}
// eslint-disable-next-line class-methods-use-this
getArrowElement() {
return null;
}
render() {
return x `<slot></slot>`;
}
async expand(args) {
const { position = 'first' } = args || {};
this.show();
await this.updateComplete;
this.floating?.focus();
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.focus(position);
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").boundary.activate();
this.emit('expand');
}
async collapse() {
this.hide();
await this.updateComplete;
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").boundary.deactivate();
__classPrivateFieldGet$1(this, _Dropdown_controllers, "f").focus.clear();
this.reference?.focus();
this.emit('collapse');
}
toggle(args) {
if (this.open) {
this.collapse();
}
else {
this.expand(args);
}
}
}
_Dropdown_controllers = new WeakMap(), _Dropdown_handleClick = new WeakMap(), _Dropdown_handleClickOutside = new WeakMap();
Dropdown.styles = [dropdownStyles()];
Dropdown.define();
let counter = 0;
/**
* Generates a unique id for our elements, prepending the given `prefix`.
* @param prefix Id prefix. Defaults to 'm'
*/
function generateId(prefix = 'm') {
counter += 1;
/**
* prefixing with 'm' to ensure we always start with a letter.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
*/
const id = `${prefix}-${counter}`;
/**
* Embracing the unlikelyhood of having 9007199254740991 elements we id-d with this approach
* at the same time in the document (in which case we would have a collision).
*/
if (counter === Number.MAX_SAFE_INTEGER) {
counter = 0;
}
return id;
}
/**
* Sets the element id with a random value, in case it is not already set.
*/
const WithIdElementMixin = (superClass, prefix = 'm') => {
class WithIdElement extends superClass {
connectedCallback() {
super.connectedCallback();
if (!this.hasAttribute('id')) {
this.id = generateId(prefix);
}
}
}
return WithIdElement;
};
class DropdownTrigger extends WithIdElementMixin(Component) {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-dropdown-trigger',
constructor: DropdownTrigger,
});
}
constructor() {
super();
this.disabled = false;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'button');
this.setAttribute('tabindex', '0');
this.setAttribute('aria-haspopup', 'true');
}
render() {
return x `
<slot name="leading"></slot>
<slot></slot>
<m-icon name="caret-down" class="indicator"></m-icon>
`;
}
}
DropdownTrigger.styles = [triggerStyles()];
DropdownTrigger.define();
class DropdownMenu extends WithIdElementMixin(Component) {
static define() {
Component.define({
name: 'm-dropdown-menu',
constructor: DropdownMenu,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'menu');
this.setAttribute('tabindex', '-1');
}
render() {
return x `<slot name="menu-item"></slot>`;
}
}
DropdownMenu.define();
class DropdownItem extends WithIdElementMixin(Component) {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
destructive: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-dropdown-item',
constructor: DropdownItem,
});
}
constructor() {
super();
this.handleClick = (event) => {
if (this.disabled) {
event.stopPropagation();
event.preventDefault();
}
};
this.disabled = false;
this.destructive = false;
this.addEventListener('click', this.handleClick);
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'menu-item');
this.setAttribute('role', 'menuitem');
this.setAttribute('tabindex', '-1');
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('disabled')) {
if (this.disabled) {
this.setAttribute('aria-disabled', 'true');
}
else {
this.removeAttribute('aria-disabled');
}
}
}
render() {
return x `
<slot name="leading"></slot>
<slot></slot>
<slot name="trailing"></slot>
`;
}
}
DropdownItem.styles = [itemStyles()];
DropdownItem.define();
class DropdownDivider extends Divider {
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'menu-item');
this.setAttribute('role', 'separator');
}
static define() {
Component.define({
name: 'm-dropdown-divider',
constructor: DropdownDivider,
});
}
}
DropdownDivider.styles = [...Divider.styles, dropdownDividerStyles()];
DropdownDivider.define();
const emptyStateContext = n$4(Symbol('empty-state'));
function getActionSize(variant) {
switch (variant) {
case 'panel':
case 'card':
case 'card-horizontal':
return 'small';
case 'page':
default:
return 'default';
}
}
var _EmptyStateAction_contextCallback;
class EmptyStateAction extends Button {
static define() {
Component.define({
name: 'm-empty-state-action',
constructor: EmptyStateAction,
});
}
constructor() {
super();
_EmptyStateAction_contextCallback.set(this, ({ variant }) => {
this.size = getActionSize(variant);
});
this.type = 'button';
this.variant = 'primary';
this.context = new s$4(this, {
context: emptyStateContext,
callback: __classPrivateFieldGet$1(this, _EmptyStateAction_contextCallback, "f"),
subscribe: true,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'action');
}
}
_EmptyStateAction_contextCallback = new WeakMap();
EmptyStateAction.define();
var _EmptyStateHeader_contextCallback;
class EmptyStateHeader extends Text {
static define() {
Component.define({
name: 'm-empty-state-header',
constructor: EmptyStateHeader,
});
}
constructor() {
super();
_EmptyStateHeader_contextCallback.set(this, (value) => {
switch (value.variant) {
case 'panel':
this.variant = 'body-md-bold';
break;
case 'card':
case 'card-horizontal':
this.variant = 'body-sm-bold';
break;
case 'page':
default:
this.variant = 'heading-sm-bold';
}
});
this.variant = 'heading-sm-bold';
this.context = new s$4(this, {
context: emptyStateContext,
callback: __classPrivateFieldGet$1(this, _EmptyStateHeader_contextCallback, "f"),
subscribe: true,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'header');
}
}
_EmptyStateHeader_contextCallback = new WeakMap();
EmptyStateHeader.define();
function styles$j() {
return i$9 `
slot {
display: block;
}
:host {
max-width: 320px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: ${getToken$1('spacing-4')};
}
:host([variant|='card']) {
gap: ${getToken$1('spacing-2')};
}
:host([variant='card-horizontal']) {
flex-direction: row;
max-width: 100%;
}
.empty-state-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: ${getToken$1('spacing-2')};
}
/* Hide illustration when it isn't a supported element */
slot[name='illustration']::slotted(
:not(m-empty-state-illustration, img, svg)
) {
display: none;
}
/* Illustration Wrapper */
.illustration-wrapper {
overflow: hidden;
max-width: 320px;
max-height: 240px;
}
:host([variant='panel']) .illustration-wrapper {
max-width: 160px;
max-height: 120px;
}
:host([variant='card']) .illustration-wrapper {
max-height: 36px;
max-width: 36px;
}
:host([variant='card-horizontal']) .illustration-wrapper {
max-height: 24px;
max-width: 24px;
}
/* Illustration */
slot[name='illustration'] img,
slot[name='illustration']::slotted(:is(img, svg)) {
display: block;
object-fit: scale-down;
max-width: 320px;
max-height: 240px;
}
:host([variant='panel']) slot[name='illustration'] img,
:host([variant='panel']) slot[name='illustration']::slotted(:is(img, svg)) {
max-width: 160px;
max-height: 120px;
}
:host([variant='card']) slot[name='illustration'] img,
:host([variant='card']) slot[name='illustration']::slotted(:is(img, svg)) {
max-width: 36px;
max-height: 36px;
}
:host([variant='card-horizontal']) slot[name='illustration'] img,
:host([variant='card-horizontal'])
slot[name='illustration']::slotted(:is(img, svg)) {
max-width: 24px;
max-height: 24px;
}
/* Header */
slot[name='header'] {
${getColor('color-text-primary')};
${typography('heading-sm-bold')};
}
:host([variant='panel']) slot[name='header'] {
${typography('body-md-bold')};
}
:host([variant|='card']) slot[name='header'] {
${typography('body-sm-bold')};
}
/* Message */
slot[name='message'] {
${getColor('color-text-secondary')};
${typography('body-md')};
}
:host([variant='panel']) slot[name='message'] {
${typography('body-sm')};
}
`;
}
function illustrationStyles() {
return i$9 `
m-empty-state > m-empty-state-illustration :is(img, svg) {
display: block;
object-fit: scale-down;
max-width: 320px;
max-height: 240px;
}
m-empty-state[variant='panel'] > m-empty-state-illustration :is(img, svg) {
max-width: 160px;
max-height: 120px;
}
m-empty-state[variant='card'] > m-empty-state-illustration :is(img, svg) {
width: 36px;
height: 36px;
}
m-empty-state[variant='card-horizontal']
> m-empty-state-illustration
:is(img, svg) {
width: 24px;
height: 24px;
}
`;
}
const style = document.createElement('style');
style.textContent = illustrationStyles().cssText;
document.head.appendChild(style);
class EmptyStateIllustration extends Component {
static define() {
Component.define({
name: 'm-empty-state-illustration',
constructor: EmptyStateIllustration,
});
}
createRenderRoot() {
return this;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'illustration');
}
}
EmptyStateIllustration.define();
var _EmptyStateMessage_contextCallback;
class EmptyStateMessage extends Text {
static define() {
Component.define({
name: 'm-empty-state-message',
constructor: EmptyStateMessage,
});
}
constructor() {
super();
_EmptyStateMessage_contextCallback.set(this, (value) => {
switch (value.variant) {
case 'panel':
this.variant = 'body-sm';
break;
case 'page':
default:
this.variant = 'body-md';
}
});
this.variant = 'body-md';
this.context = new s$4(this, {
context: emptyStateContext,
callback: __classPrivateFieldGet$1(this, _EmptyStateMessage_contextCallback, "f"),
subscribe: true,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'message');
}
}
_EmptyStateMessage_contextCallback = new WeakMap();
EmptyStateMessage.define();
var _EmptyState_instances, _EmptyState_contextProvider, _EmptyState_handleClickAction;
attachContextRoot();
/**
* @fires m-action
*/
class EmptyState extends Component {
static get properties() {
return {
variant: { type: String, reflect: true },
illustration: { type: String, reflect: true },
header: { type: String, reflect: true },
message: { type: String, reflect: true },
action: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-empty-state', constructor: EmptyState });
}
constructor() {
super();
_EmptyState_instances.add(this);
_EmptyState_contextProvider.set(this, new i$5(this, {
context: emptyStateContext,
initialValue: {
variant: undefined,
},
}));
this.variant = 'page';
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('variant')) {
__classPrivateFieldGet$1(this, _EmptyState_contextProvider, "f").setValue({
variant: this.variant ?? 'page',
});
}
}
render() {
const illustration = this.illustration
? u `<img role="presentation" src=${this.illustration} />`
: E$1;
const body = this.variant?.startsWith('card')
? u `<slot name="header">${this.header}</slot>`
: u `<div class="empty-state-body">
<slot name="header">${this.header}</slot>
<slot name="message">${this.message}</slot>
</div>`;
const action = this.action
? u `<m-button
type="button"
variant="primary"
size=${getActionSize(this.variant)}
@click=${__classPrivateFieldGet$1(this, _EmptyState_instances, "m", _EmptyState_handleClickAction)}
>${this.action}</m-button
>`
: E$1;
return u `<div class="illustration-wrapper">
<slot name="illustration">${illustration}</slot>
</div>
${body}
<slot name="action">${action}</slot>`;
}
}
_EmptyState_contextProvider = new WeakMap(), _EmptyState_instances = new WeakSet(), _EmptyState_handleClickAction = function _EmptyState_handleClickAction(event) {
event.preventDefault();
event.stopPropagation();
this.emit('action');
};
EmptyState.styles = [styles$j()];
EmptyState.define();
const EMPTY_STATE_VARIANTS = [
'page',
'panel',
'card',
'card-horizontal',
];
function fieldStyles() {
return [
i$9 `
:host {
--m-field-hint-color: ${getColor('color-text-tertiary')};
}
:host([status='danger']) {
--m-field-hint-color: ${getColor('color-danger-60')};
}
`,
];
}
function hintStyles() {
return [
i$9 `
:host {
${px(getToken$1('spacing-2'))};
display: flex;
flex-wrap: nowrap;
gap: ${getToken$1('spacing-0-5')};
align-items: baseline;
justify-content: flex-start;
color: var(--m-field-hint-color);
}
#message {
${typography('body-sm')};
color: inherit;
}
`,
];
}
var _FieldHint_instances, _FieldHint_getStatus;
class FieldHint extends Component {
static get properties() {
return {
status: { type: String },
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-field-hint', constructor: FieldHint });
}
constructor() {
super();
_FieldHint_instances.add(this);
this.field = new s$4(this, {
context: fieldContext,
subscribe: true,
});
this.slot = 'hint';
}
render() {
return x `<slot name="leading"
>${__classPrivateFieldGet$1(this, _FieldHint_instances, "m", _FieldHint_getStatus).call(this) === 'danger'
? x `<m-icon name="attention" size="10"></m-icon>`
: E$1}</slot
>
<span id="message"><slot></slot></span>`;
}
}
_FieldHint_instances = new WeakSet(), _FieldHint_getStatus = function _FieldHint_getStatus() {
return this.status || this.field.value?.status;
};
FieldHint.styles = [hintStyles()];
FieldHint.define();
function styles$i() {
return [
i$9 `
.label {
${typography('body-md')};
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: ${getToken$1('spacing-0-5')};
margin: 0;
padding: 0;
color: ${getColor('color-text-tertiary')};
}
.required {
color: ${getColor('color-text-error')};
}
.-size-small {
${typography('body-sm')};
}
`,
];
}
class Label extends Component {
static get properties() {
return {
required: { type: Boolean },
size: { type: String },
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-label', constructor: Label });
}
requiredTemplate() {
return this.isRequired()
? // The space between the asterisk and the label is required by design
x `<span class="required" aria-hidden="true"> *</span>`
: E$1;
}
labelClassList() {
const size = this.getSize();
return e$1({
label: true,
'-size-small': size === 'small',
});
}
render() {
return x `<label class=${this.labelClassList()}
><slot></slot>${this.requiredTemplate()}</label
>`;
}
getSize() {
return this.size;
}
isRequired() {
return Boolean(this.required);
}
}
Label.styles = [styles$i()];
Label.define();
class FieldLabel extends Label {
constructor() {
super(...arguments);
this.field = new s$4(this, {
context: fieldContext,
subscribe: true,
});
}
static define() {
Component.define({ name: 'm-field-label', constructor: FieldLabel });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('slot', 'label');
}
isRequired() {
if (this.required != null) {
return this.required;
}
return Boolean(this.field.value?.required);
}
getSize() {
return this.size ?? this.field.value?.size;
}
}
FieldLabel.define();
attachContextRoot();
class Field extends Component {
static get properties() {
return {
label: { type: String },
hint: { type: String },
required: { type: Boolean },
status: { type: String, reflect: true },
size: { type: String },
align: { type: String },
};
}
static define() {
Component.define({ name: 'm-field', constructor: Field });
}
constructor() {
super();
this.provider = new i$5(this, {
context: fieldContext,
/**
* we do not set a default value for the `status` so we give the change to
* a descendant component (text field, textarea, select, etc.) to manage its own status.
* any status we set here will override the one set by the descendant.
*/
initialValue: {
required: false,
size: 'default',
},
});
this.required = false;
this.size = 'default';
this.align = 'stretch';
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('required') ||
changedProperties.has('status') ||
changedProperties.has('size')) {
this.provider.setValue({
required: Boolean(this.required),
status: this.status,
size: this.size ?? 'default',
});
}
}
render() {
return x `<m-stack gap="spacing-1" align="${o$3(this.align)}">
<slot name="label"
>${this.label
? x `<m-field-label>${this.label}</m-field-label>`
: E$1}</slot
>
<slot></slot>
<slot name="hint">
${this.hint ? x `<m-field-hint>${this.hint}</m-field-hint>` : E$1}
</slot>
</m-stack>`;
}
}
Field.styles = [fieldStyles()];
Field.define();
const FIELD_STATUSES = ['default', 'danger'];
function styles$h() {
return i$9 `
:host {
--m-header-background-color: ${getColor('color-background-primary')};
display: block;
}
.m-header {
display: flex;
flex-wrap: wrap;
background-color: var(--m-header-background-color);
padding: ${getToken$1('spacing-6')};
gap: ${getToken$1('spacing-4')};
align-items: center;
}
@media screen and (max-width: 1025px) {
.m-header {
padding: ${getToken$1('spacing-4')};
}
}
`;
}
function headerTitleStyles() {
return i$9 `
:host {
${typography('body-lg-bold')};
line-height: normal;
color: ${getColor('color-text-primary')};
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 400px;
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
@media screen and (max-width: 1025px) {
:host {
${typography('body-md-bold')};
}
}
`;
}
function headerActionStyles() {
return i$9 `
:host {
display: flex;
gap: ${getToken$1('spacing-4')};
}
`;
}
function headerContentStyles() {
return i$9 `
:host {
display: flex;
gap: ${getToken$1('spacing-4')};
align-items: center;
flex-grow: 100;
}
`;
}
function headerTabsStyles() {
return i$9 `
:host {
display: flex;
background-color: var(--m-header-background-color);
padding-inline: ${getToken$1('spacing-4')};
${mediaDesktop(i$9 `
padding-inline: ${getToken$1('spacing-6')};
`)}
}
`;
}
function subHeaderStyles() {
return i$9 `
:host {
--m-subheader-background-color: var(
--m-header-background-color,
${getColor('color-background-primary')}
);
display: block;
}
.content {
padding: ${getToken$1('spacing-6')};
background-color: var(--m-subheader-background-color);
}
`;
}
class Header extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-header', constructor: Header });
}
constructor() {
super();
// this sets the slot to which the m-header should be assigned inside the page-content component.
this.slot = 'page-header';
}
render() {
return x `
<div class="m-header">
<slot name="back-button"></slot>
<slot name="content"></slot>
<slot name="actions"></slot>
</div>
<slot name="sub-header"></slot>
<slot name="header-tabs"></slot>
`;
}
}
Header.styles = [styles$h()];
Header.define();
class HeaderActions extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-header-actions',
constructor: HeaderActions,
});
}
constructor() {
super();
// this sets the slot to which the header-actions should be assigned inside the Header component.
this.slot = 'actions';
}
render() {
return u `<slot></slot>`;
}
}
HeaderActions.styles = [headerActionStyles()];
HeaderActions.define();
class HeaderContent extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-header-content',
constructor: HeaderContent,
});
}
constructor() {
super();
// this sets the slot to which the header-content should be assigned inside the Header component.
this.slot = 'content';
}
render() {
return u `<slot name="title"></slot> <slot></slot>`;
}
}
HeaderContent.styles = [headerContentStyles()];
HeaderContent.define();
const select = (values, selection) => {
const safeValues = toArray(values);
if (safeValues.length === 0) {
return selection;
}
// We always start with an empty set, as we are handling single selection
const newSelection = new Set();
newSelection.add(String(safeValues.at(-1)));
return newSelection;
};
const selectMultiple = (values, selection) => {
const safeValues = toArray(values);
if (safeValues.length === 0) {
return selection;
}
const newSelection = new Set(selection);
for (const safeValue of safeValues) {
newSelection.add(String(safeValue));
}
return newSelection;
};
const singleSelectionStrategy = {
type: 'single',
init(values) {
return select(values, new Set());
},
select,
unselect(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0 || selection.size === 0) {
return selection;
}
const newSelection = new Set(selection);
for (const safeValue of safeValues) {
newSelection.delete(String(safeValue));
}
return newSelection;
},
toggle(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0) {
return selection;
}
const newSelection = new Set();
for (const safeValue of safeValues) {
const value = String(safeValue);
if (!selection.has(value)) {
newSelection.clear();
newSelection.add(value);
}
}
return newSelection;
},
reset(selection) {
if (selection == null) {
return new Set();
}
return selection;
},
value(selection) {
if (selection == null || selection.size === 0) {
return null;
}
const [first] = Array.from(selection);
return first;
},
};
const singleStrictSelectionStrategy = {
type: 'single-strict',
init(values) {
return select(values, new Set());
},
select,
unselect(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0 || selection.size === 0) {
return selection;
}
const newSelection = new Set(selection);
for (let i = 0; i < safeValues.length && selection.size > 1; i++) {
newSelection.delete(String(safeValues[i]));
}
return newSelection;
},
toggle(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0) {
return selection;
}
const newSelection = new Set(selection);
for (const safeValue of safeValues) {
const value = String(safeValue);
if (!selection.has(value)) {
newSelection.clear();
newSelection.add(value);
}
}
return newSelection;
},
reset(selection) {
if (selection == null) {
return new Set();
}
return selection;
},
value(selection) {
if (selection == null || selection.size === 0) {
return null;
}
const [first] = Array.from(selection);
return first;
},
};
const multipleSelectionStrategy = {
type: 'multiple',
init(values) {
return selectMultiple(values, new Set());
},
select: selectMultiple,
unselect(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0 || selection.size === 0) {
return selection;
}
const newSelection = new Set(selection);
for (const safeValue of safeValues) {
newSelection.delete(String(safeValue));
}
return newSelection;
},
toggle(values, selection) {
const safeValues = toArray(values);
if (safeValues.length === 0) {
return selection;
}
const newSelection = new Set(selection);
for (const safeValue of safeValues) {
const value = String(safeValue);
if (selection.has(value)) {
newSelection.delete(value);
}
else {
newSelection.add(value);
}
}
return newSelection;
},
reset(selection) {
if (selection == null) {
return new Set();
}
return selection;
},
value(selection) {
if (selection == null || selection.size === 0) {
return null;
}
return Array.from(selection);
},
};
/**
* This strategy requires one or no item to be selected.
*/
const SingleSelectionStrategy = () => {
return singleSelectionStrategy;
};
/**
* This strategy requires that once a selection is made,
* one item has to be selected, always.
*/
const SingleStrictSelectionStrategy = () => {
return singleStrictSelectionStrategy;
};
/**
* This strategy requires one or no item to be selected.
*/
const MultipleSelectionStrategy = () => {
return multipleSelectionStrategy;
};
function createSelectionStrategy(props) {
const { type = 'multiple' } = props;
if (type === 'single') {
return SingleSelectionStrategy();
}
if (type === 'single-strict') {
return SingleStrictSelectionStrategy();
}
return MultipleSelectionStrategy();
}
const logger$9 = createLogger('selection-controller');
function isValidSingleStrictValue(values) {
const array = toArray(values);
return array.length > 0 && array.every((value) => value.trim().length > 0);
}
/**
* Manage selection through the SelectionStrategy.
* `host` is expected to have a `selection` and a `type` (`SelectionType`) properties/state.
*/
let SelectionController$1 = class SelectionController {
constructor(host, options) {
this.init = (values) => {
const type = this.getSelectionType(this.host);
if (this.strategy == null) {
logger$9.debug(`creating strategy "${type ?? 'multiple (default fallback)'}" with value`, values);
this.strategy = createSelectionStrategy({
type: type ?? 'multiple',
});
}
if (this.strategy.type === 'single-strict' &&
!isValidSingleStrictValue(values)) {
logger$9.warn('You cannot clear a single-strict selection (received', values, ')');
}
else {
logger$9.debug(`initializing strategy "${this.strategy.type}" with value`, values);
this.selection = this.strategy.init(values);
}
return Array.from(this.selection);
};
/**
* Select the given `values`.
*/
this.select = (values) => {
if (this.strategy != null) {
logger$9.debug('selecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
this.selection = this.strategy.select(toArray(values), this.selection);
}
else {
logger$9.warn('Strategy has not been initialized');
}
return Array.from(this.selection);
};
/**
* Unselect the given `values`.
*/
this.unselect = (values) => {
if (this.strategy != null) {
logger$9.debug('unselecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
this.selection = this.strategy.unselect(toArray(values), this.selection);
}
else {
logger$9.warn('Strategy has not been initialized');
}
return Array.from(this.selection);
};
/**
* Toggle the given `values`.
*/
this.toggle = (values) => {
if (this.strategy != null) {
logger$9.debug('toggling values', toArray(values), ` in strategy "${this.strategy.type}"`);
this.selection = this.strategy.toggle(toArray(values), this.selection);
}
else {
logger$9.warn('Strategy has not been initialized');
}
return Array.from(this.selection);
};
/**
* Unselect all values.
*/
this.unselectAll = () => {
if (this.strategy != null) {
this.selection = this.strategy.init([]);
}
else {
logger$9.warn('Strategy has not been initialized');
}
return Array.from(this.selection);
};
/**
* Check if the given `value` is selected.
*/
this.has = (value) => {
return this.selection.has(value);
};
this.value = () => {
if (!this.strategy) {
return null;
}
return (this.strategy.value(this.selection) ?? null);
};
this.selection = new Set();
this.strategy = null;
this.getSelectionType =
typeof options?.getSelectionType === 'function'
? options.getSelectionType
: () => 'multiple';
(this.host = host).addController(this);
}
hostConnected() {
this.init(this.host.getRawValue());
}
hostUpdate() {
const type = this.getSelectionType(this.host);
if (type !== this.strategy?.type) {
const value = Array.from(this.selection);
this.strategy = createSelectionStrategy({ type });
this.init(value);
}
}
};
/* eslint-disable max-classes-per-file */
function fromAttribute(value) {
if (!value) {
return null;
}
if (Array.isArray(value)) {
return value;
}
return String(value).split(',').filter(Boolean);
}
function toAttribute(value) {
if (!value) {
return '';
}
if (Array.isArray(value)) {
return toArray(value).join(',');
}
return String(value);
}
function hasValueChanged(value1, value2) {
if (!value1 && !value2) {
return false;
}
if (!value1 || !value2) {
return true;
}
// calculate difference using frequency map
const map1 = new Map();
const map2 = new Map();
for (const item of toArray(fromAttribute(value1))) {
map1.set(item, (map1.get(item) ?? 0) + 1);
}
for (const item of toArray(fromAttribute(value2))) {
map2.set(item, (map2.get(item) ?? 0) + 1);
}
if (map1.size !== map2.size) {
return true;
}
for (const [key, value] of map1) {
if (map2.get(key) !== value) {
return true;
}
}
return false;
}
const WithSelectionControlMixin = (superClass) => {
class SelectionControl extends superClass {
constructor() {
super(...arguments);
this.form = null;
}
static get properties() {
return {};
}
connectedCallback() {
super.connectedCallback();
this.form = this.closest('form');
this.form?.addEventListener('reset', this.handleFormReset);
}
disconnectedCallback() {
super.disconnectedCallback();
this.form?.removeEventListener('reset', this.handleFormReset);
}
getRawValue(value) {
return toArray(fromAttribute(value === undefined ? this.getAttribute('value') : value));
}
}
return SelectionControl;
};
var _SelectionController_instances, _SelectionController_handleSelectionEvent, _SelectionController_publish;
/**
* Manage selection through the SelectionStrategy.
* `host` is expected to have a `selection` and a `type` (`SelectionType`) properties/state.
* @deprecated Use `SelectionController` (named import) instead.
*/
class SelectionController {
/**
* @param Type of selection to be managed.
* @param Name of the event that should be listened to.
*/
constructor(host, type, event) {
_SelectionController_instances.add(this);
this.disabled = false;
this.event = 'm-select';
/**
* using arrow function so we keep the lexical context this is necessary
* because the event itself will happen in the context of the host element.
*/
_SelectionController_handleSelectionEvent.set(this, (e) => {
if (this.disabled) {
return;
}
if (this.type == null) {
console.warn('[SelectionController] Did you forget to set the selection type?');
return;
}
// Stops the internal event propagation.
e.stopPropagation();
const { detail: { type, value }, } = e;
switch (type) {
case 'select':
this.select(toArray(value));
break;
case 'unselect':
this.unselect(toArray(value));
break;
case 'toggle':
this.toggle(toArray(value));
break;
}
});
this.init = (values) => {
this.host.selection = this.strategy.init(values);
};
this.select = (values) => {
this.host.selection = this.strategy.select(values, this.host.selection);
__classPrivateFieldGet$1(this, _SelectionController_instances, "m", _SelectionController_publish).call(this);
};
this.unselect = (values) => {
this.host.selection = this.strategy.unselect(values, this.host.selection);
__classPrivateFieldGet$1(this, _SelectionController_instances, "m", _SelectionController_publish).call(this);
};
this.toggle = (values) => {
this.host.selection = this.strategy.toggle(values, this.host.selection);
__classPrivateFieldGet$1(this, _SelectionController_instances, "m", _SelectionController_publish).call(this);
};
this.subscribe = () => {
this.host.addEventListener(this.event, __classPrivateFieldGet$1(this, _SelectionController_handleSelectionEvent, "f"));
};
this.unsubscribe = () => {
this.host.removeEventListener(this.event, __classPrivateFieldGet$1(this, _SelectionController_handleSelectionEvent, "f"));
};
this.host = host;
this.type = type;
this.event = event;
this.strategy = createSelectionStrategy({ type });
this.host.addController(this);
}
hostConnected() {
this.subscribe();
}
hostDisconnected() {
this.unsubscribe();
}
hostUpdate() {
/**
* [!] This flow covers the case where the `host` changes its selection strategy (`type`).
* The `hostUpdate` lifecycle happens before the `host`'s `update` [Source](https://lit.dev/docs/composition/controllers/#lifecycle).
*/
if (this.host.type != null && this.host.type !== this.type) {
this.unsubscribe();
this.host.removeController(this);
}
}
}
_SelectionController_handleSelectionEvent = new WeakMap(), _SelectionController_instances = new WeakSet(), _SelectionController_publish = function _SelectionController_publish() {
const options = {
detail: {
type: this.type,
value: this.strategy.value(this.host.selection),
},
bubbles: true,
composed: false,
};
this.host.dispatchEvent(new CustomEvent('m-change', options));
};
const tabsContext = n$4(Symbol('tabs'));
const TAB_SELECT_EVENT = 'm-select-tab';
/* eslint-disable max-classes-per-file */
const WithTabsMixin = (superClass) => {
var _WithTabs_selectionController, _WithTabs_defaultTabSlot, _WithTabs_onSelectionChange, _WithTabs_getDefaultSelected, _WithTabs_getTabs;
class WithTabs extends superClass {
static get properties() {
return {
activeTab: { type: String, attribute: 'active-tab', reflect: true },
disabled: { type: Boolean, reflect: true },
lazy: { type: Boolean },
selection: { state: true },
tabContentDirection: {
type: String,
attribute: 'tab-content-direction',
},
};
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(...args) {
super(...args);
_WithTabs_selectionController.set(this, null);
_WithTabs_defaultTabSlot.set(this, null);
this.provider = new i$5(this, tabsContext, {
tabContentDirection: 'horizontal',
disabled: false,
lazy: false,
selection: new Set(''),
});
_WithTabs_onSelectionChange.set(this, (event) => {
event.stopPropagation();
const [selectedValue] = Array.from(this.selection);
const options = {
detail: { value: String(selectedValue) },
};
this.emit('tabchange', options);
});
_WithTabs_getDefaultSelected.set(this, () => {
/**
* If no tab component is marked as selected, set the first one as selected and return its value
*/
const tabs = __classPrivateFieldGet$1(this, _WithTabs_getTabs, "f").call(this);
return tabs[0]?.name;
});
_WithTabs_getTabs.set(this, () => {
const items = this.tabSlot?.assignedElements({ flatten: true }) ?? [];
return [...items].filter((item) => item.tagName.toLowerCase() === 'm-tab');
});
this.activeTab = '';
this.tabContentDirection = 'horizontal';
this.disabled = false;
this.lazy = false;
this.type = 'single-strict';
this.selection = new Set();
}
connectedCallback() {
super.connectedCallback();
__classPrivateFieldSet(this, _WithTabs_selectionController, new SelectionController(this, this.type, TAB_SELECT_EVENT), "f");
// FIXME: remove this event once we migrate away from the LegacySelectionController
this.addEventListener('m-change', __classPrivateFieldGet$1(this, _WithTabs_onSelectionChange, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('m-change', __classPrivateFieldGet$1(this, _WithTabs_onSelectionChange, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('activeTab') && __classPrivateFieldGet$1(this, _WithTabs_selectionController, "f")) {
__classPrivateFieldGet$1(this, _WithTabs_selectionController, "f").init(toArray(this.activeTab || __classPrivateFieldGet$1(this, _WithTabs_getDefaultSelected, "f").call(this)));
}
const [selectedValue] = Array.from(this.selection);
if (changedProperties.has('selection') &&
(!this.activeTab || selectedValue !== this.activeTab)) {
// Here we are syncing the internal state with the reflected activeTab attribute
this.activeTab = selectedValue;
}
if (changedProperties.has('tabContentDirection') ||
changedProperties.has('disabled') ||
changedProperties.has('lazy') ||
changedProperties.has('selection')) {
this.provider.setValue({
tabContentDirection: this.tabContentDirection,
disabled: this.disabled,
lazy: this.lazy,
selection: this.selection,
});
}
}
get tabSlot() {
if (!__classPrivateFieldGet$1(this, _WithTabs_defaultTabSlot, "f")) {
__classPrivateFieldSet(this, _WithTabs_defaultTabSlot, this.shadowRoot && this.shadowRoot.querySelector('slot[name=tab]'), "f");
}
return __classPrivateFieldGet$1(this, _WithTabs_defaultTabSlot, "f");
}
}
_WithTabs_selectionController = new WeakMap(), _WithTabs_defaultTabSlot = new WeakMap(), _WithTabs_onSelectionChange = new WeakMap(), _WithTabs_getDefaultSelected = new WeakMap(), _WithTabs_getTabs = new WeakMap();
return WithTabs;
};
class HeaderTabs extends WithTabsMixin(Component) {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-header-tabs',
constructor: HeaderTabs,
});
}
constructor() {
super();
// this sets the slot to which the header-tabs should be assigned inside the Header component.
this.slot = 'header-tabs';
}
render() {
return u `<slot name="tab"></slot>`;
}
}
HeaderTabs.styles = [headerTabsStyles()];
HeaderTabs.define();
class HeaderTitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-header-title',
constructor: HeaderTitle,
});
}
constructor() {
super();
// this sets the slot to which the header-title should be assigned inside the Header component.
this.slot = 'title';
}
render() {
return u `<slot></slot>`;
}
}
HeaderTitle.styles = [headerTitleStyles()];
HeaderTitle.define();
class SubHeader extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-sub-header', constructor: SubHeader });
}
constructor() {
super();
// this sets the slot to which the sub-header should be assigned inside the Header component.
this.slot = 'sub-header';
}
render() {
return u `<m-divider></m-divider>
<div class="content">
<slot></slot>
</div>`;
}
}
SubHeader.styles = [subHeaderStyles()];
SubHeader.define();
const defaultLabeledValueLabelProps = {
color: 'color-text-tertiary',
variant: 'body-sm',
};
class LabeledValueLabel extends Text {
static get properties() {
return {
...super.properties,
role: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-labeled-value-label',
constructor: LabeledValueLabel,
});
}
constructor() {
super();
this.color = defaultLabeledValueLabelProps.color;
this.variant = defaultLabeledValueLabelProps.variant;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'term');
this.setAttribute('slot', 'label');
}
update(changedProperties) {
if (changedProperties.has('color') &&
(this.color === undefined || this.color === null)) {
this.color = defaultLabeledValueLabelProps.color;
}
if (changedProperties.has('variant') &&
(this.variant === undefined || this.variant === null)) {
this.variant = defaultLabeledValueLabelProps.variant;
}
super.update(changedProperties);
}
}
LabeledValueLabel.define();
class LabeledValueValue extends Text {
static define() {
Component.define({
name: 'm-labeled-value-value',
constructor: LabeledValueValue,
});
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'definition');
this.setAttribute('slot', 'value');
}
}
LabeledValueValue.define();
const defaultLabeledValueProps = {
gap: 'spacing-2',
justify: 'flex-start',
};
class LabeledValue extends Component {
static define() {
Component.define({ name: 'm-labeled-value', constructor: LabeledValue });
}
constructor() {
super();
this.inline = false;
this.gap = defaultLabeledValueProps.gap;
this.justify = defaultLabeledValueProps.justify;
}
static get properties() {
return {
inline: { type: Boolean },
label: { type: String },
value: { type: String },
gap: { type: String },
align: { type: String },
justify: { type: String },
fallbackValue: { type: String, attribute: 'fallback-value' },
labelVariant: { type: String, attribute: 'label-variant' },
labelColor: { type: String, attribute: 'label-color' },
valueVariant: { type: String, attribute: 'value-variant' },
valueColor: { type: String, attribute: 'value-color' },
};
}
getFallback() {
return x `<slot name="fallback">${this.fallbackValue ?? '-'}</slot>`;
}
getLabel() {
return x `<slot name="label"
><m-labeled-value-label
variant=${this.getLabelVariant()}
color=${o$3(this.labelColor)}
>${this.label}</m-labeled-value-label
></slot
>`;
}
getValue() {
return x `<slot name="value"
><m-labeled-value-value
variant=${o$3(this.valueVariant)}
color=${o$3(this.valueColor)}
>${this.value ?? this.getFallback()}</m-labeled-value-value
></slot
>`;
}
getLabelVariant() {
if (this.labelVariant) {
return this.labelVariant;
}
return this.inline ? 'body-md' : 'body-sm';
}
get wrapperAlign() {
if (this.align) {
return this.align;
}
return this.inline ? 'center' : 'flex-start';
}
bodyTemplate() {
return x `${this.getLabel()} ${this.getValue()}`;
}
render() {
if (this.inline) {
return x `<m-group
gap="${o$3(this.gap)}"
align="${this.wrapperAlign}"
justify="${o$3(this.justify)}"
>${this.bodyTemplate()}</m-group
>`;
}
return x `<m-stack
gap="${o$3(this.gap)}"
align="${this.wrapperAlign}"
justify="${o$3(this.justify)}"
>${this.bodyTemplate()}</m-stack
>`;
}
}
LabeledValue.define();
function styles$g() {
return i$9 `
.m-link {
color: ${getColor('color-text-link')};
}
.m-link.-small {
${typography('body-sm-bold-underline')};
}
.m-link.-default {
${typography('body-md-bold-underline')};
}
.m-link.-large {
${typography('heading-md-bold')};
text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
.m-link {
${transition({ property: 'color', duration: '250ms' })}
}
}
${on('.m-link').not.disabled.hover},
${on('.m-link').not.disabled.active},
${on('.m-link').not.disabled.visited.hover} {
color: ${getColor('color-primary-100')};
}
${on('.m-link').not.disabled.not.active.focus} {
border-radius: ${getToken$1('border-radius-s')};
outline: 1px solid ${getColor('color-primary-60')};
outline-offset: 4px;
text-decoration: none;
}
${on('.m-link').not.disabled.not.focus.visited} {
color: ${getColor('color-accent-60')};
}
${on('.m-link').disabled} {
color: ${getColor('color-primary-20')};
}
`;
}
var _Link_instances, _Link_disabled_get, _Link_href_get, _Link_rel_get, _Link_handleClick;
const UNSAFE_URL = /^javascript:/i;
class Link extends Component {
static get properties() {
return {
href: { type: String, reflect: true },
target: { type: String, reflect: true },
rel: { type: String, reflect: true },
download: { type: String, reflect: true },
ping: { type: String, reflect: true },
referrerpolicy: { type: String, reflect: true },
size: { type: String, reflect: true },
disabled: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-link', constructor: Link });
}
constructor() {
super();
_Link_instances.add(this);
this.size = 'default';
}
render() {
return x `
<a
class=${e$1({
'm-link': true,
'-small': this.size === 'small',
'-default': this.size === 'default',
'-large': this.size === 'large',
'is-disabled': __classPrivateFieldGet$1(this, _Link_instances, "a", _Link_disabled_get),
})}
href=${o$3(__classPrivateFieldGet$1(this, _Link_instances, "a", _Link_href_get))}
target=${o$3(this.target)}
rel=${o$3(__classPrivateFieldGet$1(this, _Link_instances, "a", _Link_rel_get))}
download=${o$3(this.download)}
ping=${o$3(this.ping)}
referrerpolicy=${o$3(this.referrerpolicy)}
@click=${__classPrivateFieldGet$1(this, _Link_instances, "m", _Link_handleClick)}
><slot></slot
></a>
`;
}
}
_Link_instances = new WeakSet(), _Link_disabled_get = function _Link_disabled_get() {
return this.disabled || !this.href || UNSAFE_URL.test(this.href.trim());
}, _Link_href_get = function _Link_href_get() {
return !__classPrivateFieldGet$1(this, _Link_instances, "a", _Link_disabled_get) ? this.href : undefined;
}, _Link_rel_get = function _Link_rel_get() {
let result = this.rel;
if (this.target === '_blank') {
const rel = new Set((this.rel ?? '').split(/\s+/).filter(Boolean));
// If the developers are deliberately setting the `referrerpolicy`,
// they should know what they are doing, so we must not override it.
if (!this.referrerpolicy?.trim()) {
rel.add('noreferrer');
}
// If the developers are deliberately setting the `rel="opener"`,
// they should know what they are doing, so we must not override it.
if (!rel.has('opener')) {
rel.add('noopener');
}
result = Array.from(rel).join(' ');
}
return result;
}, _Link_handleClick = function _Link_handleClick(event) {
if (__classPrivateFieldGet$1(this, _Link_instances, "a", _Link_disabled_get)) {
event.preventDefault();
event.stopPropagation();
return false;
}
return undefined;
};
Link.styles = [styles$g()];
Link.define();
function styles$f() {
return i$9 `
:host {
display: block;
width: 100%;
height: 100%;
}
.page {
height: 100%;
overflow-x: hidden;
display: grid;
grid-template-columns: auto 1fr;
grid-auto-rows: 100%;
}
main {
height: 100%;
}
`;
}
class Page extends Component {
static define() {
Component.define({
name: 'm-page',
constructor: Page,
});
}
render() {
return x `
<div class="page">
<slot name="side-navigation"></slot>
<main>
<slot name="top-navigation"></slot>
<slot></slot>
</main>
</div>
`;
}
}
Page.styles = [styles$f()];
Page.define();
function styles$e() {
return i$9 `
:host {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
height: 100%;
}
slot[name='page-header']::slotted(*) {
border-bottom: ${getToken$1('border-thin')} solid ${getColor('color-border')};
}
`;
}
class PageContent extends Component {
static define() {
Component.define({ name: 'm-page-content', constructor: PageContent });
}
render() {
return x `
<slot name="page-header"></slot>
<slot name="page-body"></slot>
`;
}
}
PageContent.styles = [styles$e()];
PageContent.define();
function styles$d() {
return i$9 `
:host {
--m-pagination-border-radius: ${getToken$1('border-radius-none')};
--m-pagination-border-top-left-radius: var(--m-pagination-border-radius);
--m-pagination-border-top-right-radius: var(--m-pagination-border-radius);
--m-pagination-border-bottom-left-radius: var(
--m-pagination-border-radius
);
--m-pagination-border-bottom-right-radius: var(
--m-pagination-border-radius
);
--m-pagination-border-width: ${getToken$1('border-thin')};
--m-pagination-border-color: ${getColor('color-border')};
--m-pagination-border-style: solid;
--m-pagination-background-color: ${getColor('color-background-primary')};
display: block;
width: 100%;
box-sizing: border-box;
background-color: var(--m-pagination-background-color);
border-start-start-radius: var(--m-pagination-border-top-left-radius);
border-start-end-radius: var(--m-pagination-border-top-right-radius);
border-end-start-radius: var(--m-pagination-border-bottom-left-radius);
border-end-end-radius: var(--m-pagination-border-bottom-right-radius);
border-style: var(--m-pagination-border-style);
border-width: var(--m-pagination-border-width);
border-color: var(--m-pagination-border-color);
text-align: left;
padding: ${getToken$1('spacing-4')};
}
.actions m-button {
--m-button-base-size: 1rem;
}
`;
}
const FIST_PAGE = 0;
const DEFAULT_PAGE_SIZE = 100;
class Pagination extends Component {
static define() {
Component.define({ name: 'm-pagination', constructor: Pagination });
}
static get properties() {
return {
count: { type: Number },
page: { type: Number },
pageSize: { type: Number, attribute: 'page-size' },
disabled: { type: Boolean },
};
}
constructor() {
super();
this.goToPrev = () => {
if (this.hasPrev()) {
this.setPage(this.getPage() - 1);
this.handleChange();
}
};
this.page = FIST_PAGE;
this.pageSize = DEFAULT_PAGE_SIZE;
this.disabled = false;
this.count = 0;
}
getPage() {
return Math.min(Math.max(this.page, 0), this.lastPage);
}
setPage(page) {
this.page = page;
}
getPageSize() {
return Math.max(1, this.pageSize);
}
get totalPages() {
return Math.ceil(this.count / this.getPageSize());
}
get lastPage() {
return this.totalPages - 1;
}
get pageLabel() {
return `${this.getPage() + 1}`;
}
hasPrev() {
return this.getPage() > FIST_PAGE;
}
hasNext() {
return this.getPage() < this.lastPage;
}
goToNext() {
if (this.hasNext()) {
this.setPage(this.getPage() + 1);
this.handleChange();
}
}
goToLast() {
if (this.hasNext()) {
this.setPage(this.lastPage);
this.handleChange();
}
}
goToFist() {
if (this.hasPrev()) {
this.setPage(FIST_PAGE);
this.handleChange();
}
}
handleChange() {
this.emit('paginationchange', {
detail: {
page: this.getPage(),
pageSize: this.getPageSize(),
},
});
}
isPrevDisabled() {
return this.disabled || !this.hasPrev();
}
isNextDisabled() {
return this.disabled || !this.hasNext();
}
renderActions() {
return x `
<m-group gap="spacing-4" align="center" class="actions">
<m-button
title="go to the first page"
variant="icon-secondary"
size="small"
class="m-pagination-first"
@click=${this.goToFist}
?disabled=${this.isPrevDisabled()}
>
<m-icon
aria-label="go to the first page"
name="double-caret-left"
class="icon"
></m-icon>
</m-button>
<m-button
title="go to the previous page"
variant="icon-secondary"
size="small"
class="m-pagination-prev"
@click=${this.goToPrev}
?disabled=${this.isPrevDisabled()}
>
<m-icon
aria-label="go to the previous page"
name="caret-left"
class="icon"
></m-icon>
</m-button>
<m-group gap="spacing-2" align="center">
<m-text color="color-text-tertiary">${this.pageLabel}</m-text>
<m-text color="color-text-tertiary">of</m-text>
<m-text color="color-text-tertiary">${this.totalPages}</m-text>
</m-group>
<m-button
title="go to the next page"
variant="icon-secondary"
size="small"
class="m-pagination-next"
@click=${this.goToNext}
?disabled=${this.isNextDisabled()}
>
<m-icon
aria-label="go to the next page"
name="caret-right"
class="icon"
></m-icon>
</m-button>
<m-button
title="go to the last page"
variant="icon-secondary"
size="small"
class="m-pagination-last"
@click=${this.goToLast}
?disabled=${this.isNextDisabled()}
>
<m-icon
aria-label="go to the last page"
name="double-caret-right"
class="icon"
></m-icon>
</m-button>
</m-group>
`;
}
render() {
return x `
<m-group class="m-pagination" justify="space-between" align="center">
<m-text color="color-text-tertiary">${this.count} items</m-text>
${this.renderActions()}
</m-group>
`;
}
}
Pagination.styles = [styles$d()];
Pagination.define();
/**
* Clamps number within the inclusive `min` and `upper` bounds.
* @param value The number to clamp.
* @param lower The lower bound.
* @param upper The upper bound.
* @returns {number}
*/
function clamp(value, lower, upper) {
return Math.min(Math.max(lower, value), upper);
}
function styles$c() {
return i$9 `
.bar {
display: flex;
flex-grow: 0;
flex-shrink: 1;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 100%;
height: ${toRem('8px')};
border-radius: ${getToken$1('border-radius-s')};
background-color: ${getColor('color-background-tertiary')};
}
.progress {
position: absolute;
top: 0;
left: 0;
${transition([{ property: 'width' }, { property: 'background' }])};
height: ${toRem('8px')};
border-radius: ${getToken$1('border-radius-s')};
background: var(--m-progress-bar-progress-background);
}
.-default {
--m-progress-bar-progress-background: linear-gradient(
45deg,
${getColor('color-brand-accent-1')} 22%,
${getColor('color-brand-accent-2')} 88%
);
}
.-success {
--m-progress-bar-progress-background: ${getColor('color-success-60')};
}
.-warning {
--m-progress-bar-progress-background: ${getColor('color-warning-60')};
}
.-danger {
--m-progress-bar-progress-background: ${getColor('color-danger-60')};
}
`;
}
var _ProgressBar_instances, _ProgressBar_safeMaxValue_get, _ProgressBar_safeValue_get;
const DEFAULT_VARIANT = 'default';
const DEFAULT_MAX = 100;
const DEFAULT_MIN = 0;
const DEFAULT_VALUE = 0;
class ProgressBar extends Component {
static get properties() {
return {
variant: { type: String, reflect: true },
value: { type: Number, reflect: true },
max: { type: Number, reflect: true },
};
}
static define() {
Component.define({ name: 'm-progress-bar', constructor: ProgressBar });
}
constructor() {
super();
_ProgressBar_instances.add(this);
this.variant = DEFAULT_VARIANT;
this.value = DEFAULT_VALUE;
this.max = DEFAULT_MAX;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'progressbar');
this.setAttribute('aria-valuemin', '0');
}
updated() {
this.setAttribute('aria-valuenow', String(this.value));
this.setAttribute('aria-valuemax', String(this.max));
}
get percentage() {
return (__classPrivateFieldGet$1(this, _ProgressBar_instances, "a", _ProgressBar_safeValue_get) * 100) / __classPrivateFieldGet$1(this, _ProgressBar_instances, "a", _ProgressBar_safeMaxValue_get);
}
get currentVariant() {
return this.variant;
}
render() {
return x `
<div class="bar">
<span
class=${e$1({
progress: true,
'-default': this.currentVariant === 'default',
'-success': this.currentVariant === 'success',
'-warning': this.currentVariant === 'warning',
'-danger': this.currentVariant === 'danger',
})}
style=${o$1({
width: `${this.percentage}%`,
})}
></span>
</div>
`;
}
}
_ProgressBar_instances = new WeakSet(), _ProgressBar_safeMaxValue_get = function _ProgressBar_safeMaxValue_get() {
return this.max <= 0 ? DEFAULT_MAX : this.max;
}, _ProgressBar_safeValue_get = function _ProgressBar_safeValue_get() {
return clamp(this.value, DEFAULT_MIN, __classPrivateFieldGet$1(this, _ProgressBar_instances, "a", _ProgressBar_safeMaxValue_get));
};
ProgressBar.styles = [styles$c()];
ProgressBar.define();
class ProgressBarCountdown extends ProgressBar {
static define() {
Component.define({
name: 'm-progress-bar-countdown',
constructor: ProgressBarCountdown,
});
}
get currentVariant() {
if (this.percentage >= 66)
return 'success';
if (this.percentage >= 33)
return 'warning';
return 'danger';
}
}
ProgressBarCountdown.define();
const radioGroupContext = n$4(Symbol('radio-group'));
function radioGroupStyles() {
return i$9 `
:host {
display: flex;
gap: ${getToken$1('spacing-2')};
outline: none;
}
:host([orientation='vertical']) {
flex-direction: column;
}
:host([orientation='horizontal']) {
flex-direction: row;
}
`;
}
function radioStyles() {
return i$9 `
:host {
${typography('body-md')};
${transition([
{
property: 'color',
},
{
property: 'outline-color',
},
])};
--m-radio-size: 16px;
contain: layout style;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: ${getToken$1('spacing-2')};
box-sizing: border-box;
min-block-size: 20px;
color: ${getColor('color-text-tertiary')};
outline: 1px solid transparent;
outline-offset: 2px;
border-radius: 2px;
line-height: normal;
}
:host([hidden]) {
display: none;
}
:host(:enabled:hover) {
color: ${getColor('color-text-primary')};
}
:host(:disabled) {
color: ${getColor('color-text-disabled')};
}
:host(:disabled) * {
cursor: default;
}
#input,
#button {
font-size: 100%;
line-height: 1;
}
#input {
outline: none;
box-sizing: border-box;
opacity: 0.00001;
z-index: 1;
cursor: pointer;
block-size: 100%;
inline-size: 100%;
margin: 0;
padding: 0;
position: absolute;
overflow: visible;
}
#button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
block-size: var(--m-radio-size);
inline-size: var(--m-radio-size);
background-color: ${getColor('color-background-primary')};
border-radius: calc(0.5 * var(--m-radio-size));
border-style: solid;
border-color: ${getColor('color-border-input')};
border-width: ${getToken$1('border-thin')};
margin: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: var(--checkbox-input-size);
${transition([
{ property: 'border-color' },
{
property: 'background-color',
},
])};
}
#button::after {
${transition([{ property: 'background-color' }])};
content: '';
display: block;
position: absolute;
block-size: calc(var(--m-radio-size) * 0.625);
inline-size: calc(var(--m-radio-size) * 0.625);
border-radius: 50%;
background-color: ${getColor('color-background-primary')};
}
#label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
:host([checked]) #button {
border-color: ${getColor('color-primary-60')};
}
:host([checked]) #button::after {
background-color: ${getColor('color-primary-60')};
}
:host(:enabled:hover) #button {
border-color: ${getColor('color-primary-100')};
}
:host(:enabled.is-focused) {
outline-color: ${getColor('color-primary-60')};
}
:host(:not(:disabled, [checked]):hover) #button {
border-color: ${getColor('color-primary-100')};
}
:host([checked]:hover) #button::after {
background-color: ${getColor('color-primary-100')};
}
:host(:disabled) #input {
cursor: default;
}
:host(:disabled) #button {
border-color: ${getColor('color-border-input')};
background-color: ${getColor('color-background-tertiary')};
}
:host(:disabled) #button::after {
background-color: ${getColor('color-background-tertiary')};
}
:host(:disabled[checked]) #button {
border-color: ${getColor('color-primary-20')};
background-color: ${getColor('color-background-primary')};
}
:host(:disabled[checked]) #button::after {
background-color: ${getColor('color-primary-20')};
}
`;
}
var _Radio_context, _Radio_handleClick, _Radio_handleCheckedChange, _Radio_handleDisabledChange;
class Radio extends WithIdElementMixin(WithFormComponentMixin(Component)) {
static get properties() {
return {
...super.properties,
checked: { type: Boolean, reflect: true },
value: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-radio', constructor: Radio });
}
constructor() {
super();
_Radio_context.set(this, void 0);
_Radio_handleClick.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
}
});
_Radio_handleCheckedChange.set(this, (checked) => {
if (!this.name) {
const group = this.closest('m-radio-group');
this.name = group?.name ?? group?.getAttribute('name') ?? '';
}
this.setFormValue(checked ? this.value : null);
this.setAttribute('aria-checked', String(checked));
});
_Radio_handleDisabledChange.set(this, (disabled) => {
const isDisabled = Boolean(__classPrivateFieldGet$1(this, _Radio_context, "f").value?.disabled || disabled);
this.setAttribute('aria-disabled', String(isDisabled));
if (isDisabled) {
this.removeAttribute('tabindex');
}
else {
this.setAttribute('tabindex', '-1');
}
});
this.checked = false;
__classPrivateFieldSet(this, _Radio_context, new s$4(this, {
context: radioGroupContext,
subscribe: true,
callback: () => {
__classPrivateFieldGet$1(this, _Radio_handleDisabledChange, "f").call(this, Boolean(this.disabled));
},
}), "f");
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'radio');
this.addEventListener('click', __classPrivateFieldGet$1(this, _Radio_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Radio_handleClick, "f"));
}
update(changedProperties) {
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Radio_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('checked')) {
__classPrivateFieldGet$1(this, _Radio_handleCheckedChange, "f").call(this, Boolean(this.checked));
}
super.update(changedProperties);
}
render() {
return x `
<div id="input"></div>
<span id="button"></span>
<slot name="leading"></slot>
<label id="label">
<slot></slot>
</label>
`;
}
// eslint-disable-next-line class-methods-use-this
formResetCallback() {
// radio-group will take care of this
}
formStateRestoreCallback(state) {
if (state != null) {
this.checked = Boolean(state);
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _Radio_handleDisabledChange, "f").call(this, disabled);
}
}
_Radio_context = new WeakMap(), _Radio_handleClick = new WeakMap(), _Radio_handleCheckedChange = new WeakMap(), _Radio_handleDisabledChange = new WeakMap();
Radio.styles = [radioStyles()];
Radio.define();
var _RadioGroup_instances, _RadioGroup_controllers, _RadioGroup_contextProvider, _RadioGroup_initialize, _RadioGroup_handleDisabledChange, _RadioGroup_handleValueChange, _RadioGroup_handleFocusIn, _RadioGroup_handleFocusOut, _RadioGroup_handleOptionClick, _RadioGroup_reflectValue, _RadioGroup_toggleValue, _RadioGroup_updateRadios;
attachContextRoot();
const logger$8 = createLogger('radio-group');
class RadioGroup extends WithSelectionControlMixin(Component) {
static get properties() {
return {
...super.properties,
disabled: { type: Boolean },
initialValue: {
type: String,
attribute: 'initial-value',
fromAttribute,
reflect: true,
},
/**
* We use a different property name internally so the react wrapper can still
* keep track of the property while we can use custom getter/setter to
* set and reflect the `value` attribute.
*/
providedValue: {
type: String,
attribute: 'value',
fromAttribute,
},
name: { type: String, reflect: true },
orientation: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-radio-group', constructor: RadioGroup });
}
constructor() {
super();
_RadioGroup_instances.add(this);
_RadioGroup_controllers.set(this, void 0);
_RadioGroup_contextProvider.set(this, new i$5(this, {
context: radioGroupContext,
initialValue: {
disabled: false,
},
}));
this.handleFormReset = () => {
__classPrivateFieldGet$1(this, _RadioGroup_instances, "m", _RadioGroup_initialize).call(this);
};
_RadioGroup_handleDisabledChange.set(this, (disabled) => {
__classPrivateFieldGet$1(this, _RadioGroup_contextProvider, "f").setValue({
disabled,
});
if (disabled) {
this.removeAttribute('tabindex');
}
else {
this.setAttribute('tabindex', '0');
}
this.setAttribute('aria-disabled', String(disabled));
});
_RadioGroup_handleValueChange.set(this, (value) => {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").selection.init(value);
__classPrivateFieldGet$1(this, _RadioGroup_reflectValue, "f").call(this);
__classPrivateFieldGet$1(this, _RadioGroup_updateRadios, "f").call(this);
});
_RadioGroup_handleFocusIn.set(this, () => {
const firstChecked = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.queried.find((item) => item.checked && !item.hasAttribute('disabled'));
if (!firstChecked) {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focusFirst();
}
else {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focus(firstChecked);
}
});
_RadioGroup_handleFocusOut.set(this, () => {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.clear();
});
_RadioGroup_handleOptionClick.set(this, (event) => {
const element = event.target;
if (element && element.matches('m-radio')) {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focus(element);
__classPrivateFieldGet$1(this, _RadioGroup_toggleValue, "f").call(this, element.value);
}
});
_RadioGroup_reflectValue.set(this, () => {
this.setAttribute('value', this.value);
});
_RadioGroup_toggleValue.set(this, (value) => {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").selection.toggle(value);
__classPrivateFieldGet$1(this, _RadioGroup_reflectValue, "f").call(this);
__classPrivateFieldGet$1(this, _RadioGroup_updateRadios, "f").call(this);
this.emit('change');
});
_RadioGroup_updateRadios.set(this, () => {
for (const element of __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.queried) {
element.checked = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").selection.selection.has(element.value);
}
});
__classPrivateFieldSet(this, _RadioGroup_controllers, {
focus: new FocusManagerController(this, {
query: 'm-radio',
}),
keyboard: new KeyboardSupportController(this, [
{
shortcut: [
{
key: 'ArrowUp',
},
{
key: 'ArrowLeft',
},
],
handler: () => {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focusPrevious();
const focused = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focused;
__classPrivateFieldGet$1(this, _RadioGroup_toggleValue, "f").call(this, focused.value);
},
},
{
shortcut: [
{
key: 'ArrowDown',
},
{
key: 'ArrowRight',
},
],
handler: () => {
__classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focusNext();
const focused = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.focused;
__classPrivateFieldGet$1(this, _RadioGroup_toggleValue, "f").call(this, focused.value);
},
},
]),
selection: new SelectionController$1(this, {
getSelectionType: () => 'single-strict',
}),
}, "f");
}
async connectedCallback() {
super.connectedCallback();
this.orientation = this.orientation ?? 'vertical';
this.setAttribute('role', 'radio-group');
this.addEventListener('focusin', __classPrivateFieldGet$1(this, _RadioGroup_handleFocusIn, "f"));
this.addEventListener('focusout', __classPrivateFieldGet$1(this, _RadioGroup_handleFocusOut, "f"));
this.addEventListener('click', __classPrivateFieldGet$1(this, _RadioGroup_handleOptionClick, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _RadioGroup_instances, "m", _RadioGroup_initialize).call(this, this.getAttribute('value') ?? this.getAttribute('initial-value'));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('focusin', __classPrivateFieldGet$1(this, _RadioGroup_handleFocusIn, "f"));
this.removeEventListener('focusout', __classPrivateFieldGet$1(this, _RadioGroup_handleFocusOut, "f"));
this.removeEventListener('click', __classPrivateFieldGet$1(this, _RadioGroup_handleOptionClick, "f"));
}
update(changedProperties) {
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _RadioGroup_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('providedValue') &&
this.providedValue &&
this.providedValue !== this.value) {
this.value = this.providedValue;
}
super.update(changedProperties);
}
render() {
return x `<slot></slot>`;
}
get value() {
return __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").selection.value();
}
set value(value) {
__classPrivateFieldGet$1(this, _RadioGroup_handleValueChange, "f").call(this, [value]);
}
}
_RadioGroup_controllers = new WeakMap(), _RadioGroup_contextProvider = new WeakMap(), _RadioGroup_handleDisabledChange = new WeakMap(), _RadioGroup_handleValueChange = new WeakMap(), _RadioGroup_handleFocusIn = new WeakMap(), _RadioGroup_handleFocusOut = new WeakMap(), _RadioGroup_handleOptionClick = new WeakMap(), _RadioGroup_reflectValue = new WeakMap(), _RadioGroup_toggleValue = new WeakMap(), _RadioGroup_updateRadios = new WeakMap(), _RadioGroup_instances = new WeakSet(), _RadioGroup_initialize = function _RadioGroup_initialize(value) {
// TODO: should we check if it's not hidden or disabled?
const firstRadio = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.queried?.[0];
if (!firstRadio) {
logger$8.warn('No radio found in the group');
return;
}
const consolidatedValue = toArray(value ?? this.initialValue ?? firstRadio.value).filter(Boolean);
__classPrivateFieldGet$1(this, _RadioGroup_handleValueChange, "f").call(this, consolidatedValue);
__classPrivateFieldGet$1(this, _RadioGroup_handleDisabledChange, "f").call(this, Boolean(this.disabled));
};
RadioGroup.styles = [radioGroupStyles()];
RadioGroup.define();
function styles$b() {
return i$9 `
:host {
display: block;
}
`;
}
function sectionTitleStyles() {
return i$9 `
:host {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
gap: ${getToken$1('spacing-1')};
color: ${getColor('color-text-primary')};
width: 100%;
margin: 0;
}
:host,
:host([size='default']) {
${typography('heading-md')};
margin-block-end: ${getToken$1('spacing-2')};
}
:host([size='small']) {
${typography('heading-sm')};
margin-block-end: ${getToken$1('spacing-1')};
}
:host([size='large']) {
${typography('heading-lg-bold')};
margin-block-end: ${getToken$1('spacing-2')};
}
slot[name='leading']::slotted(*) {
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
pointer-events: none;
}
::slotted(*) {
color: inherit;
font: inherit;
}
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
class Section extends Component {
static define() {
Component.define({ name: 'm-section', constructor: Section });
}
render() {
return x `
<slot name="title"></slot>
<m-divider></m-divider>
<slot></slot>
`;
}
}
Section.styles = [styles$b()];
Section.define();
class SectionTitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-section-title', constructor: SectionTitle });
}
constructor() {
super();
// this sets the slot to which the section-title should be assigned inside the section component.
this.slot = 'title';
this.size = 'default';
}
render() {
return x `
<slot name="leading"></slot>
<slot></slot>
`;
}
}
SectionTitle.styles = [sectionTitleStyles()];
SectionTitle.define();
const baseTopNavigationItemStyles = i$9 `
.top-navigation-item {
display: flex;
align-items: center;
justify-content: center;
padding-inline: ${getToken$1('spacing-1')};
padding-block: ${getToken$1('spacing-1')};
color: ${getColor('color-primary-60')};
text-decoration: none;
background-color: transparent;
border: 0;
border-radius: ${getToken$1('border-radius-s')};
width: 40px;
height: 40px;
box-sizing: border-box;
cursor: pointer;
outline: 1px solid transparent;
outline-offset: 0px;
}
.top-navigation-item:focus-visible {
outline-color: ${getColor('color-primary-60')};
}
.top-navigation-item:hover {
background-color: ${getColor('color-primary-20', 0.4)};
}
.top-navigation-item:active {
background-color: ${getColor('color-primary-20')};
}
@media (prefers-reduced-motion: no-preference) {
.top-navigation-item {
${transition([
{ property: 'background-color' },
{ property: 'outline-color' },
])};
}
}
`;
function topNavigationStyles() {
return i$9 `
:host {
--m-top-navigation-height: 49px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: ${getColor('color-background-primary')};
width: 100%;
height: var(--m-top-navigation-height);
box-sizing: border-box;
border-bottom: 1px solid ${getColor('color-border')};
padding-inline: ${getToken$1('spacing-5')};
padding-block: ${getToken$1('spacing-1')};
}
.actions {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
${mediaDesktop(i$9 `
.sidebar-trigger {
display: none;
}
`)}
`;
}
function topNavigationItemStyles() {
return i$9 `
:host {
display: block;
}
:host([aria-expanded='true']) .top-navigation-item {
background-color: ${getColor('color-primary-20')};
}
::slotted(*) {
pointer-events: none;
}
${baseTopNavigationItemStyles}
`;
}
function sideNavigationStyles() {
return i$9 `
:host {
--m-side-navigation-width: 200px;
display: contents;
}
aside {
position: sticky;
top: 0;
height: 100%;
}
.side-navigation {
display: flex;
flex-direction: column;
background-color: ${getColor('color-primary-100')};
width: var(--m-side-navigation-width);
height: 100%;
}
dialog {
box-sizing: border-box;
padding: 0;
border: none;
box-shadow: ${getToken$1('elevation-4')};
width: 100%;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: 0;
right: auto;
margin: 0;
max-width: var(--m-side-navigation-width);
z-index: 9999;
outline: none !important;
${transition([{ property: 'max-width' }])};
}
dialog[open] {
display: flex;
flex-direction: column;
position: fixed;
z-index: 9999;
}
dialog::backdrop {
background-color: ${getColor('color-background-secondary-inverted', 0.4)};
z-index: 9998;
}
@media (prefers-reduced-motion: no-preference) {
dialog[open] {
animation: show-dialog 0.25s ease forwards;
}
dialog.is-hiding {
animation: hide-dialog 0.25s ease forwards;
}
dialog[open]::backdrop {
animation: show-backdrop 0.25s ease forwards;
}
dialog.is-hiding::backdrop {
animation: hide-backdrop 0.25s ease forwards;
}
}
@keyframes show-dialog {
from {
opacity: 0;
transform: translateX(-250px);
}
}
@keyframes hide-dialog {
to {
opacity: 0;
transform: translateX(-250px);
}
}
@keyframes show-backdrop {
from {
opacity: 0;
}
}
@keyframes hide-backdrop {
to {
opacity: 0;
}
}
`;
}
function sideNavigationHeaderStyles() {
return i$9 `
:host {
display: flex;
align-items: center;
padding: ${getToken$1('spacing-3')} ${getToken$1('spacing-4')};
border-bottom: 1px solid ${getColor('color-primary-60')};
}
header {
display: flex;
align-items: center;
justify-content: flex-start;
height: ${getToken$1('spacing-6')};
}
`;
}
function sideNavigationBodyStyles() {
return i$9 `
:host {
flex: 1;
overflow-y: hidden;
padding-top: ${getToken$1('spacing-2')};
padding-bottom: ${getToken$1('spacing-2')};
}
.body {
height: 100%;
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: thin;
overscroll-behavior: contain;
}
/* Only show the scrollbar on hover. */
.body:hover {
scrollbar-color: ${getColor('color-primary-20')} transparent;
}
`;
}
function sideNavigationFooterStyles() {
return i$9 `
:host {
display: block;
padding-top: ${getToken$1('spacing-1')};
padding-bottom: ${getToken$1('spacing-1')};
border-top: 1px solid ${getColor('color-primary-60')};
}
slot::slotted(m-side-navigation-item) {
${typography('body-sm-bold')};
}
`;
}
function sideNavigationItemStyles() {
return i$9 `
:host {
--m-side-navigation-item-outline-color: transparent;
--m-side-navigation-item-outline-offset: 0px;
display: block;
margin: ${getToken$1('spacing-2')};
}
:host(:focus-within) {
--m-side-navigation-item-outline-color: ${getColor('color-primary-20')};
\ }
.link {
display: flex;
align-items: center;
gap: ${getToken$1('spacing-4')};
padding: ${getToken$1('spacing-2')};
color: ${getColor('color-primary-20')};
text-decoration: none;
text-overflow: ellipsis;
border-radius: ${getToken$1('border-radius-s')};
outline: 1px solid var(--m-side-navigation-item-outline-color);
outline-offset: var(--m-side-navigation-item-outline-offset);
}
.link .text {
${typography('body-md-bold')};
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link[aria-current='page'] {
background-color: ${getColor('color-primary-60', 0.6)};
}
.link:hover {
background-color: ${getColor('color-primary-60')};
}
slot[name='leading']::slotted(*) {
display: flex;
}
@media (prefers-reduced-motion: no-preference) {
.link {
${transition([
{ property: 'background-color' },
{ property: 'outline-color' },
])};
}
}
`;
}
function sideNavigationDividerStyles() {
return i$9 `
:host {
--m-divider-margin-y: ${getToken$1('spacing-4')};
}
.m-divider {
border-block-end-color: ${getColor('color-primary-60')};
}
`;
}
function sideNavigationSubNavStyles() {
return i$9 `
:host {
display: block;
margin-inline: ${getToken$1('spacing-2')};
margin-block: ${getToken$1('spacing-1')};
}
.sub-nav-trigger {
--m-side-navigation-sub-nav-trigger-outline-color: transparent;
--m-side-navigation-sub-nav-trigger-outline-offset: 0px;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
outline: none;
border: none;
background-color: transparent;
cursor: pointer;
color: ${getColor('color-primary-20', 0.75)};
border-radius: ${getToken$1('border-radius-s')};
padding: ${getToken$1('spacing-2')};
outline: 1px solid var(--m-side-navigation-sub-nav-trigger-outline-color);
outline-offset: var(--m-side-navigation-sub-nav-trigger-outline-offset);
}
.sub-nav-trigger:focus-visible {
--m-side-navigation-sub-nav-trigger-outline-color: ${getColor('color-primary-20')};
}
.sub-nav-trigger:hover {
color: ${getColor('color-neutral-0')};
}
.sub-nav-trigger[aria-expanded='true']:not([disabled]) m-icon {
transform: rotate(90deg);
}
.sub-nav-trigger m-icon {
--m-icon-size: 12px;
--m-icon-color: ${getColor('color-primary-20', 0.6)};
}
.sub-nav-trigger:hover m-icon {
--m-icon-color: ${getColor('color-neutral-0')};
}
.sub-nav-title {
overflow-x: hidden;
}
.sub-nav-panel {
height: 0px;
width: 100%;
overflow: hidden;
margin-inline: calc(${getToken$1('spacing-0-5')} * -1);
padding-inline: ${getToken$1('spacing-0-5')};
}
.sub-nav-content {
padding-top: ${getToken$1('spacing-1')};
padding-bottom: ${getToken$1('spacing-3')};
}
@media (prefers-reduced-motion: no-preference) {
.sub-nav-trigger {
${transition([{ property: 'color' }, { property: 'outline-color' }])};
}
.sub-nav-panel {
${transition([{ property: 'height' }, { property: 'visibility' }])};
will-change: height;
}
}
`;
}
function sideNavigationSubNavTitleStyles() {
return i$9 `
:host {
display: flex;
}
.text {
${typography('body-sm-bold')};
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;
}
function sideNavigationSubNavContentStyles() {
return i$9 `
:host {
display: block;
}
`;
}
function sideNavigationSubNavItemStyles() {
return i$9 `
:host {
--m-side-navigation-sub-nav-item-outline-color: transparent;
--m-side-navigation-sub-nav-item-outline-offset: 0px;
display: block;
}
:host(:focus-within) {
--m-side-navigation-sub-nav-item-outline-color: ${getColor('color-primary-20')};
}
.link {
display: flex;
padding: ${getToken$1('spacing-2')} ${getToken$1('spacing-4')};
color: ${getColor('color-primary-20')};
text-decoration: none;
border-radius: ${getToken$1('border-radius-s')};
outline: 1px solid var(--m-side-navigation-sub-nav-item-outline-color);
outline-offset: var(--m-side-navigation-sub-nav-item-outline-offset);
}
.link .text {
${typography('body-sm-bold')};
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link[aria-current='page'] {
background-color: ${getColor('color-primary-60', 0.6)};
}
.link:hover {
background-color: ${getColor('color-primary-60')};
}
@media (prefers-reduced-motion: no-preference) {
.link {
${transition([
{ property: 'background-color' },
{ property: 'outline-color' },
])};
}
}
`;
}
function sideNavigationTriggerStyles() {
return i$9 `
:host {
display: block;
${mediaDesktop(i$9 `
display: none;
`)}
}
${baseTopNavigationItemStyles}
`;
}
const SIDE_NAVIGATION_SHOW_EVENT = 'side-navigation-show';
const SIDE_NAVIGATION_HIDE_EVENT = 'side-navigation-hide';
var _SideNavigation_instances, _SideNavigation_dialog_get, _SideNavigation_handleShowSideNavigation, _SideNavigation_handleHideSideNavigation, _SideNavigation_handleCancel, _SideNavigation_handleDialogClick, _SideNavigation_toggleVisibility;
class SideNavigation extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
open: { type: Boolean, reflect: true },
mode: { type: String, reflect: true },
isMobileDevice: { type: Boolean, state: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation',
constructor: SideNavigation,
});
}
constructor() {
super();
_SideNavigation_instances.add(this);
_SideNavigation_handleShowSideNavigation.set(this, () => {
this.open = true;
});
_SideNavigation_handleHideSideNavigation.set(this, () => {
this.open = false;
});
_SideNavigation_handleCancel.set(this, (e) => {
// We preventDefault here to handle the closing of the dialog ourselves
// to make sure we can animate the dialog
e.preventDefault();
this.open = false;
});
this.open = false;
this.slot = 'side-navigation';
this.mode = 'responsive';
// The token is a string and includes "px" so we need to remove it and turn into a number
const desktopBreakpoint = Number(getToken$2('media-screen-desktop')?.toString().replace('px', '') ?? 0);
this.isMobileDevice = document.body.clientWidth < desktopBreakpoint;
this.resizeObserver = new ResizeObserver((records) => {
const isMobileDevice = records[0].target.clientWidth < desktopBreakpoint;
if (isMobileDevice !== this.isMobileDevice) {
this.isMobileDevice = isMobileDevice;
this.open = !isMobileDevice;
}
});
}
firstUpdated() {
this.resizeObserver.observe(document.body);
}
connectedCallback() {
super.connectedCallback();
document.addEventListener(SIDE_NAVIGATION_SHOW_EVENT, __classPrivateFieldGet$1(this, _SideNavigation_handleShowSideNavigation, "f"));
document.addEventListener(SIDE_NAVIGATION_HIDE_EVENT, __classPrivateFieldGet$1(this, _SideNavigation_handleHideSideNavigation, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener(SIDE_NAVIGATION_SHOW_EVENT, __classPrivateFieldGet$1(this, _SideNavigation_handleShowSideNavigation, "f"));
document.removeEventListener(SIDE_NAVIGATION_HIDE_EVENT, __classPrivateFieldGet$1(this, _SideNavigation_handleHideSideNavigation, "f"));
this.resizeObserver.disconnect();
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('open')) {
__classPrivateFieldGet$1(this, _SideNavigation_instances, "m", _SideNavigation_toggleVisibility).call(this, changedProperties.get('open'));
}
}
render() {
const slots = x `
<div class="side-navigation">
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
`;
if (this.mode === 'responsive' && this.isMobileDevice) {
return x `<dialog
closedby="any"
@cancel=${__classPrivateFieldGet$1(this, _SideNavigation_handleCancel, "f")}
@click=${__classPrivateFieldGet$1(this, _SideNavigation_instances, "m", _SideNavigation_handleDialogClick)}
>
${slots}
</dialog>`;
}
return x `<aside>${slots}</aside>`;
}
}
_SideNavigation_handleShowSideNavigation = new WeakMap(), _SideNavigation_handleHideSideNavigation = new WeakMap(), _SideNavigation_handleCancel = new WeakMap(), _SideNavigation_instances = new WeakSet(), _SideNavigation_dialog_get = function _SideNavigation_dialog_get() {
return this.renderRoot?.querySelector('dialog');
}, _SideNavigation_handleDialogClick = function _SideNavigation_handleDialogClick(event) {
const isClickingOnTheDrawer = event.target instanceof HTMLDialogElement;
const rect = __classPrivateFieldGet$1(this, _SideNavigation_instances, "a", _SideNavigation_dialog_get)?.getBoundingClientRect();
if (isClickingOnTheDrawer && rect) {
const isClickingOnTheBackdrop = event.clientY < rect.top ||
event.clientY > rect.bottom ||
event.clientX < rect.left ||
event.clientX > rect.right;
if (isClickingOnTheBackdrop) {
event.preventDefault();
event.stopPropagation();
this.open = false;
}
}
}, _SideNavigation_toggleVisibility = async function _SideNavigation_toggleVisibility(wasOpen) {
if (!this.isMobileDevice || this.mode === 'fixed') {
this.style.display = 'contents';
}
const dialog = __classPrivateFieldGet$1(this, _SideNavigation_instances, "a", _SideNavigation_dialog_get);
if (!dialog)
return;
if (!wasOpen && this.open) {
this.style.display = 'contents';
dialog.showModal();
await waitForAnimations(dialog);
}
else if (wasOpen && !this.open) {
dialog.classList.add('is-hiding');
await waitForAnimations(dialog);
dialog.classList.remove('is-hiding');
dialog.close();
this.style.display = 'none';
}
else if (wasOpen == null && !this.open) {
this.style.display = 'none';
}
};
SideNavigation.styles = [sideNavigationStyles()];
SideNavigation.define();
class SideNavigationHeader extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-header',
constructor: SideNavigationHeader,
});
}
constructor() {
super();
this.slot = 'header';
}
render() {
return x `<header><slot></slot></header>`;
}
}
SideNavigationHeader.styles = [sideNavigationHeaderStyles()];
SideNavigationHeader.define();
class SideNavigationBody extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-body',
constructor: SideNavigationBody,
});
}
constructor() {
super();
this.slot = 'body';
}
render() {
return x ` <div class="body"><slot></slot></div> `;
}
}
SideNavigationBody.styles = [sideNavigationBodyStyles()];
SideNavigationBody.define();
var _SideNavigationItem_handleInternalClick, _SideNavigationItem_handleHostClick;
class SideNavigationItem extends Component {
static get properties() {
return {
href: { type: String, reflect: true },
target: { type: String, reflect: true },
rel: { type: String, reflect: true },
download: { type: String, reflect: true },
ping: { type: String, reflect: true },
referrerpolicy: { type: String, reflect: true },
active: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-item',
constructor: SideNavigationItem,
});
}
constructor() {
super();
/**
* This handler will kick in when the user clicks the link.
*/
// eslint-disable-next-line class-methods-use-this
_SideNavigationItem_handleInternalClick.set(this, (event) => {
/**
* Do **NOT** remove this event.stopPropagation() because it will cause
* the `#handleHostClick` to` enter an infinite loop, if called.
*/
event.stopPropagation();
});
/**
* This handler is here FOR TESTING PURPOSES ONLY, so we manually
* forward the click on the host to the internal link (<a>).
*
* Based on https://github.com/adobe/spectrum-web-components/blob/main/packages/checkbox/src/Checkbox.ts;
*/
_SideNavigationItem_handleHostClick.set(this, () => {
this.link?.click();
});
this.active = false;
}
async connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _SideNavigationItem_handleHostClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _SideNavigationItem_handleHostClick, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (this.active) {
this.setAttribute('aria-current', 'page');
}
else {
this.removeAttribute('aria-current');
}
}
get link() {
return this.renderRoot?.querySelector('.link') ?? null;
}
get href_attribute() {
const isDisabled = !this.href || UNSAFE_URL.test(this.href.trim());
return isDisabled ? undefined : this.href;
}
get rel_attribute() {
let result = this.rel;
if (this.target === '_blank') {
const rel = new Set((this.rel ?? '').split(/\s+/).filter(Boolean));
// If the developers are deliberately setting the `referrerpolicy`,
// they should know what they are doing, so we must not override it.
if (!this.referrerpolicy?.trim()) {
rel.add('noreferrer');
}
// If the developers are deliberately setting the `rel="opener"`,
// they should know what they are doing, so we must not override it.
if (!rel.has('opener')) {
rel.add('noopener');
}
result = Array.from(rel).join(' ');
}
return result;
}
render() {
return x `<a
class="link"
aria-current="${this.active ? 'page' : null}"
href=${o$3(this.href_attribute)}
target=${o$3(this.target)}
rel=${o$3(this.rel_attribute)}
download=${o$3(this.download)}
ping=${o$3(this.ping)}
referrerpolicy=${o$3(this.referrerpolicy)}
@click=${__classPrivateFieldGet$1(this, _SideNavigationItem_handleInternalClick, "f")}
>
<slot name="leading"></slot><span class="text"><slot></slot></span>
</a>`;
}
}
_SideNavigationItem_handleInternalClick = new WeakMap(), _SideNavigationItem_handleHostClick = new WeakMap();
SideNavigationItem.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
SideNavigationItem.styles = [sideNavigationItemStyles()];
SideNavigationItem.define();
class SideNavigationDivider extends Divider {
static define() {
Component.define({
name: 'm-side-navigation-divider',
constructor: SideNavigationDivider,
});
}
}
SideNavigationDivider.styles = [...Divider.styles, sideNavigationDividerStyles()];
SideNavigationDivider.define();
var _SideNavigationSubNav_instances, _SideNavigationSubNav_trigger_get, _SideNavigationSubNav_panel_get, _SideNavigationSubNav_content_get, _SideNavigationSubNav_handleExpand, _SideNavigationSubNav_toggle, _SideNavigationSubNav_handleTransition;
class SideNavigationSubNav extends Component {
static get properties() {
return {
expanded: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-sub-nav',
constructor: SideNavigationSubNav,
});
}
constructor() {
super();
_SideNavigationSubNav_instances.add(this);
_SideNavigationSubNav_handleTransition.set(this, () => {
if (this.expanded) {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get).style.height = 'auto';
}
});
this.expanded = false;
this.resizeObserver = new ResizeObserver((records) => {
this.panelHeight = records[0].target.scrollHeight;
});
}
firstUpdated() {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_content_get).style.transition = 'visibility 0.35s';
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_content_get).setAttribute('role', 'region');
this.resizeObserver.observe(__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get));
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get).addEventListener('transitionend', __classPrivateFieldGet$1(this, _SideNavigationSubNav_handleTransition, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('expanded')) {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "m", _SideNavigationSubNav_handleExpand).call(this);
}
}
disconnectedCallback() {
super.disconnectedCallback();
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get).removeEventListener('transitionend', __classPrivateFieldGet$1(this, _SideNavigationSubNav_handleTransition, "f"));
this.resizeObserver.disconnect();
}
render() {
return x `
<button
type="button"
class="sub-nav-trigger"
@click="${__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "m", _SideNavigationSubNav_toggle)}"
aria-controls="panel"
>
<div class="sub-nav-title">
<slot name="sub-nav-title"></slot>
</div>
<m-icon name="caret-right" size="12"></m-icon>
</button>
<div id="panel" class="sub-nav-panel">
<div class="sub-nav-content">
<slot name="sub-nav-content"></slot>
</div>
</div>
`;
}
}
_SideNavigationSubNav_handleTransition = new WeakMap(), _SideNavigationSubNav_instances = new WeakSet(), _SideNavigationSubNav_trigger_get = function _SideNavigationSubNav_trigger_get() {
return this.renderRoot.querySelector('.sub-nav-trigger');
}, _SideNavigationSubNav_panel_get = function _SideNavigationSubNav_panel_get() {
return this.renderRoot.querySelector('.sub-nav-panel');
}, _SideNavigationSubNav_content_get = function _SideNavigationSubNav_content_get() {
return this.renderRoot.querySelector('.sub-nav-content');
}, _SideNavigationSubNav_handleExpand = function _SideNavigationSubNav_handleExpand() {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_trigger_get).setAttribute('aria-expanded', `${this.expanded}`);
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get).style.height = `${this.panelHeight}px`;
if (this.expanded) {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_content_get).style.visibility = 'visible';
}
else {
setTimeout(() => {
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_panel_get).style.height = '0px';
__classPrivateFieldGet$1(this, _SideNavigationSubNav_instances, "a", _SideNavigationSubNav_content_get).style.visibility = 'hidden';
});
}
}, _SideNavigationSubNav_toggle = function _SideNavigationSubNav_toggle() {
this.expanded = !this.expanded;
};
SideNavigationSubNav.styles = [sideNavigationSubNavStyles()];
SideNavigationSubNav.define();
class SideNavigationSubNavContent extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-sub-nav-content',
constructor: SideNavigationSubNavContent,
});
}
constructor() {
super();
this.slot = 'sub-nav-content';
}
render() {
return x ` <slot></slot> `;
}
}
SideNavigationSubNavContent.styles = [sideNavigationSubNavContentStyles()];
SideNavigationSubNavContent.define();
class SideNavigationSubNavItem extends SideNavigationItem {
static define() {
Component.define({
name: 'm-side-navigation-sub-nav-item',
constructor: SideNavigationSubNavItem,
});
}
constructor() {
super();
this.active = false;
}
render() {
return x ` <a
class="link"
aria-current="${this.active ? 'page' : null}"
href=${o$3(this.href_attribute)}
target=${o$3(this.target)}
rel=${o$3(this.rel_attribute)}
download=${o$3(this.download)}
ping=${o$3(this.ping)}
referrerpolicy=${o$3(this.referrerpolicy)}
>
<span class="text"><slot></slot></span>
</a>`;
}
}
SideNavigationSubNavItem.styles = [sideNavigationSubNavItemStyles()];
SideNavigationSubNavItem.define();
class SideNavigationSubNavTitle extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-sub-nav-title',
constructor: SideNavigationSubNavTitle,
});
}
constructor() {
super();
this.slot = 'sub-nav-title';
}
render() {
return x `<span class="text"><slot></slot></span> `;
}
}
SideNavigationSubNavTitle.styles = [sideNavigationSubNavTitleStyles()];
SideNavigationSubNavTitle.define();
class SideNavigationFooter extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-footer',
constructor: SideNavigationFooter,
});
}
constructor() {
super();
this.slot = 'footer';
}
render() {
return x `<footer><slot></slot></footer>`;
}
}
SideNavigationFooter.styles = [sideNavigationFooterStyles()];
SideNavigationFooter.define();
var _SideNavigationTrigger_handleClick;
class SideNavigationTrigger extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-side-navigation-trigger',
constructor: SideNavigationTrigger,
});
}
constructor() {
super();
_SideNavigationTrigger_handleClick.set(this, () => {
this.emit(SIDE_NAVIGATION_SHOW_EVENT);
});
this.slot = 'side-navigation-trigger';
}
render() {
return x `<button
class="top-navigation-item"
type="button"
aria-label="Open Sidebar"
@click=${__classPrivateFieldGet$1(this, _SideNavigationTrigger_handleClick, "f")}
>
<m-icon name="burguer-menu"></m-icon>
</button>`;
}
}
_SideNavigationTrigger_handleClick = new WeakMap();
SideNavigationTrigger.styles = [sideNavigationTriggerStyles()];
SideNavigationTrigger.define();
const TRIGGER_SELECTOR = '[role="combobox"]';
const MENU_SELECTOR = '[role="listbox"]';
const SEARCH_DELAY = 250;
function selectStyles() {
return [
styles$k({
referenceSelector: TRIGGER_SELECTOR,
floatingSelector: MENU_SELECTOR,
}),
i$9 `
:host {
--m-popover-floating-spacing-x: ${getToken$1('spacing-2')};
--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
/* TODO: figure out a way to avoid layout shift when using narrow triggers */
--m-popover-width: max-content;
--m-popover-min-width: 16ch;
--m-popover-color: ${getColor('color-text-secondary')};
--m-select-min-width: 10ch;
--m-select-max-width: 280px;
--m-select-max-height: 240px;
--m-select-option-single-check-display: none;
--m-select-option-multiple-check-display: none;
display: inline-block;
box-sizing: border-box;
min-inline-size: var(--m-select-min-width);
max-inline-size: var(--m-select-max-width);
}
:host([hidden]) {
display: none;
}
${r$8(MENU_SELECTOR)} {
--m-popover-background-color: ${getColor('color-background-primary')};
--m-popover-overflow-y: auto;
max-block-size: var(--m-select-max-height);
outline: none;
}
:host([open]) ${r$8(MENU_SELECTOR)} {
display: inline-flex;
flex-direction: column;
}
/**
* using this approach so we don't need JS intervention to handle an
* an attribute that, in most cases, will not change after initialization.
*/
:host(:is([type='single'], [type='single-strict'])) {
--m-select-option-single-check-display: inline-flex;
--m-select-option-multiple-check-display: none;
}
:host([type='multiple']) {
--m-select-option-single-check-display: none;
--m-select-option-multiple-check-display: inline-flex;
}
:host([type|='single']) ::slotted(m-option[selected]) {
--m-select-option-background-color: ${getColor('color-background-highlight')};
}
`,
];
}
function pickerStyles() {
return [
i$9 `
:host {
--m-select-picker-background-color: ${getColor('color-background-primary')};
--m-select-picker-color: ${getColor('color-text-primary')};
--m-select-picker-border-color: ${getColor('color-border-input')};
--m-select-picker-height: ${getToken$1('global-height-default')};
--m-select-trigger-padding-y: ${getToken$1('spacing-2')};
--m-select-trigger-placeholder-color: ${getColor('color-text-placeholder')};
${typography('body-md')};
display: inline-flex;
}
:host([size='small']) {
--m-select-picker-height: ${getToken$1('global-height-small')};
--m-select-trigger-padding-y: 0;
}
:host([size='small']),
:host([size='small']) input {
${typography('body-sm')};
--m-select-picker-background-color: transparent;
--m-select-picker-border-color: transparent;
}
:host([size='large']) {
--m-select-picker-height: ${getToken$1('global-height-large')};
--m-select-trigger-padding-y: ${getToken$1('spacing-3')};
}
:host([size='default'][status='danger']),
:host([size='large'][status='danger']) {
--m-select-picker-border-color: ${getColor('color-danger-60')};
}
:host([size='small'][status='danger']) {
--m-select-trigger-placeholder-color: ${getColor('color-danger-60')};
}
:host(:disabled) {
--m-select-picker-background-color: ${getColor('color-background-tertiary')};
--m-select-picker-color: ${getColor('color-text-placeholder')};
cursor: default;
}
:host(:disabled) * {
pointer-events: none;
}
slot[name='leading']::slotted(*),
slot[name='trailing']::slotted(*) {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
cursor: default;
}
:host([size='default']:enabled:hover),
:host([size='large']:enabled:hover) {
--m-select-picker-border-color: ${getColor('color-primary-60')};
}
:host([size='small']:enabled:hover) {
--m-select-picker-border-color: ${getColor('color-border-input')};
}
:host(:enabled:is(:focus, :focus-visible, :focus-within)) {
--m-select-picker-border-color: ${getColor('color-primary-100')};
}
${on('input').not.disabled.active},
${on('input').not.disabled.focus} {
-webkit-appearance: none;
background: none;
border: none;
outline: none;
}
#picker {
display: flex;
align-items: center; // TODO: somehow we need to align this as flex-start when the tags wrap
justify-content: start;
gap: ${getToken$1('spacing-2')};
position: relative;
box-sizing: border-box;
width: 100%;
min-block-size: var(--m-select-picker-height);
${px(getToken$1('spacing-2'))};
${py(0)};
background-color: var(--m-select-picker-background-color);
color: var(--m-select-picker-color);
border-radius: ${getToken$1('border-radius-s')};
border: 1px solid var(--m-select-picker-border-color);
${transition([
{ property: 'background-color' },
{ property: 'border-color' },
])};
}
#leading {
display: contents;
}
#leading * {
flex-grow: 0;
flex-shrink: 0;
opacity: 0.05;
${transition([{ property: 'opacity' }])};
}
#trigger {
${typography('body-md')};
line-height: 1;
align-self: stretch;
border: none;
outline: none;
flex: 1 1 10ch;
min-width: 0;
${px(0)};
background-color: transparent;
color: inherit;
${transition([{ property: 'color' }])};
}
#trigger::placeholder {
color: var(--m-select-trigger-placeholder-color);
}
#tags {
display: contents;
}
#trigger-wrapper {
display: flex;
flex-flow: row wrap;
gap: ${getToken$1('spacing-1')};
flex: 1;
padding-block: ${getToken$1('spacing-1')};
min-width: 0;
}
#clear {
visibility: visible;
opacity: 1;
${transition([{ property: 'opacity' }])};
}
:host(:not([open])) #leading * {
opacity: 1;
}
/*
* we only show the clear button for single or multiple selection,
* but not for single-strict, when clearing is not allowed.
*/
:host([type='single']:not(:focus-within)) #clear,
:host([type='single']:focus-within)
#trigger-wrapper:has(> #trigger:placeholder-shown)
~ #clear {
visibility: hidden;
opacity: 0;
}
#handle {
--handle-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--handle-size);
block-size: var(--handle-size);
min-width: var(--handle-size);
min-height: var(--handle-size);
cursor: pointer;
${m$1(0)};
${p$2(0)};
background-color: transparent;
color: ${getColor('color-text-tertiary')};
border: none;
border-radius: 50%;
${transition([{ property: 'background-color' }])};
}
:host(:disabled) #handle {
color: ${getColor('color-text-placeholder')};
}
:host([open]) #caret {
transform: rotate(180deg);
}
`,
];
}
function optionStyles() {
return i$9 `
:host {
--m-select-option-background-color: ${getColor('color-background-primary')};
--m-select-option-color: ${getColor('color-text-secondary')};
${transition([{ property: 'color' }, { property: 'background-color' }])};
${typography('body-md')};
block-size: 36px;
cursor: pointer;
position: relative;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
gap: ${getToken$1('spacing-2')};
${px(getToken$1('spacing-1'))};
${py(getToken$1('spacing-2'))};
background-color: var(--m-select-option-background-color);
color: var(--m-select-option-color);
border: none;
border-radius: ${getToken$1('border-radius-s')};
outline: none;
}
:host([hidden]) {
display: none;
}
slot[name='leading']::slotted(*),
slot[name='trailing']::slotted(*) {
display: inline-flex;
align-items: center;
justify-content: center;
${p$2(0)};
${m$1(0)};
}
:host([disabled]) {
--m-select-option-color: ${getColor('color-text-disabled')};
pointer-events: none;
user-select: none;
cursor: default;
}
:host(:not([disabled]):hover),
:host(.is-focused) {
--m-select-option-background-color: ${getColor('color-background-tertiary')};
font-weight: ${getToken$1('font-weight-bold')};
outline: none;
}
:host(:not([disabled]):active) {
--m-select-option-background-color: ${getColor('color-background-highlight')};
}
#single-check {
--m-icon-size: 14px;
display: var(--m-select-option-single-check-display);
visibility: visible;
margin: 0 0 0 auto;
}
#multiple-check {
display: var(--m-select-option-multiple-check-display);
justify-content: center;
align-items: center;
color: transparent;
inline-size: 1rem;
block-size: 1rem;
box-sizing: border-box;
background-color: ${getColor('color-background-primary')};
border-style: solid;
border-radius: ${getToken$1('border-radius-s')};
border-color: ${getColor('color-border-input')};
border-width: ${getToken$1('border-thin')};
margin: 0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 1rem;
${transition([
{
property: 'border-color',
},
{
property: 'background-color',
},
{
property: 'fill',
},
])};
}
:host([selected]) {
--m-select-option-color: ${getColor('color-text-secondary')};
}
:host(:not([selected])) #single-check {
visibility: hidden;
}
:host([selected]) #multiple-check {
color: ${getColor('color-text-inverted')};
background-color: ${getColor('color-primary-60')};
border-color: ${getColor('color-primary-60')};
}
:host([destructive]) {
--m-select-option-color: ${getColor('color-text-error')};
}
`;
}
const selectContext = n$4(Symbol('select'));
function tagStyles() {
return [
skeleton.styles(),
i$9 `
:host {
--m-tag-skeleton-width: 100px;
--m-tag-padding-block: ${getToken$1('spacing-2')};
--m-tag-padding-inline: ${getToken$1('spacing-3')};
--m-tag-size: ${getToken$1('global-height-small')};
--m-tag-color: ${getColor('color-text-tertiary')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-background-tertiary')};
--m-tag-button-base-color: var(--m-tag-color);
--m-tag-outline-color: transparent;
--m-tag-outline-offset: 2px;
display: inline-block;
outline: 1px solid transparent;
box-sizing: border-box;
block-size: var(--m-tag-size);
}
.tag {
contain: layout style;
display: inline-flex;
align-items: center;
justify-content: center;
gap: ${getToken$1('spacing-1')};
box-sizing: border-box;
block-size: var(--m-tag-size);
min-inline-size: var(--m-tag-size);
max-inline-size: 200px;
border-radius: calc(var(--m-tag-size) / 2);
line-height: ${getToken$1('line-height-1')};
cursor: default;
padding-block: 0;
padding-inline: var(--m-tag-padding-inline);
color: var(--m-tag-color);
background-color: var(--m-tag-background-color);
border: 1px solid var(--m-tag-border-color);
outline: 1px solid var(--m-tag-outline-color);
outline-offset: var(--m-tag-outline-offset);
}
.tag-content {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
padding-block: var(--m-tag-padding-block);
padding-inline: 0;
}
@media (prefers-reduced-motion: no-preference) {
.tag {
${transition([
{ property: 'background-color' },
{ property: 'color' },
{ property: 'border-color' },
{ property: 'outline-color' },
])};
}
.tag-content,
slot[name='leading']::slotted(*) {
${transition([{ property: 'color' }])};
}
}
:host([size='small']) {
--m-tag-padding-block: ${getToken$1('spacing-1')};
--m-tag-padding-inline: ${getToken$1('spacing-2')};
--m-tag-size: ${toRem('18px')};
}
:host([size='small']) .tag {
${typography('chips-sm')};
}
:host([size='default']) {
--m-tag-padding-block: ${getToken$1('spacing-2')};
--m-tag-padding-inline: ${getToken$1('spacing-3')};
--m-tag-size: ${getToken$1('global-height-small')};
}
:host([size='default']) .tag {
${typography('chips-md')};
}
:host([size='large']) {
--m-tag-padding-block: ${getToken$1('spacing-3')};
--m-tag-padding-inline: ${getToken$1('spacing-4')};
--m-tag-size: ${getToken$1('global-height-default')};
}
:host([size='large']) .tag {
${typography('button-lg')};
}
:host([is-skeleton]) .tag,
:host([isSkeleton]) .tag {
${skeleton()};
width: var(--m-tag-skeleton-width);
}
`,
i$9 `
:host([variant='default']),
:host([variant='neutral']) {
--m-tag-color: ${getColor('color-text-tertiary')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-background-tertiary')};
}
:host([variant='accent']),
:host([variant='info']) {
--m-tag-color: ${getColor('color-text-highlight')};
--m-tag-background-color: ${getColor('color-accent-20')};
--m-tag-border-color: ${getColor('color-accent-20')};
}
:host([variant='danger']) {
--m-tag-color: ${getColor('color-danger-60')};
--m-tag-background-color: ${getColor('color-danger-20')};
--m-tag-border-color: ${getColor('color-danger-20')};
}
:host([variant='subtle']) {
--m-tag-color: ${getColor('color-neutral-60')};
--m-tag-background-color: ${getColor('color-background-primary')};
--m-tag-border-color: ${getColor('color-border')};
}
:host([variant='success']) {
--m-tag-color: ${getColor('color-success-60')};
--m-tag-background-color: ${getColor('color-success-20')};
--m-tag-border-color: ${getColor('color-success-20')};
}
:host([variant='warning']) {
--m-tag-color: ${getColor('color-warning-100')};
--m-tag-background-color: ${getColor('color-warning-20')};
--m-tag-border-color: ${getColor('color-warning-20')};
}
`,
i$9 `
:host([interactive]:not([disabled])) .tag,
:host([selectable]:not([disabled])) .tag {
cursor: pointer;
}
:host([variant='default'][interactive]:not([disabled]):hover),
:host([variant='neutral'][interactive]:not([disabled]):hover),
:host([variant='default'][selectable]:not([disabled]):hover),
:host([variant='neutral'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-primary')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-background-tertiary')};
}
:host([variant='accent'][interactive]:not([disabled]):hover),
:host([variant='info'][interactive]:not([disabled]):hover),
:host([variant='accent'][selectable]:not([disabled]):hover),
:host([variant='info'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-accent-100')};
--m-tag-background-color: ${getColor('color-accent-20')};
--m-tag-border-color: ${getColor('color-accent-20')};
}
:host([variant='danger'][interactive]:not([disabled]):hover),
:host([variant='danger'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-danger-100')};
--m-tag-background-color: ${getColor('color-danger-20')};
--m-tag-border-color: ${getColor('color-danger-20')};
}
:host([variant='subtle'][interactive]:not([disabled]):hover),
:host([variant='subtle'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-neutral-80')};
--m-tag-background-color: ${getColor('color-background-primary')};
--m-tag-border-color: ${getColor('color-border')};
}
:host([variant='success'][interactive]:not([disabled]):hover),
:host([variant='success'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-success-100')};
--m-tag-background-color: ${getColor('color-success-20')};
--m-tag-border-color: ${getColor('color-success-20')};
}
:host([variant='warning'][interactive]:not([disabled]):hover),
:host([variant='warning'][selectable]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-warning-100')};
--m-tag-background-color: ${getColor('color-warning-20')};
--m-tag-border-color: ${getColor('color-warning-20')};
}
:host([variant='default'][interactive]:not([disabled]):focus-within),
:host([variant='neutral'][interactive]:not([disabled]):focus-within),
:host([variant='default'][selectable]:not([disabled]):focus-within),
:host([variant='neutral'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-neutral-60')};
}
:host([variant='accent'][interactive]:not([disabled]):focus-within),
:host([variant='info'][interactive]:not([disabled]):focus-within),
:host([variant='accent'][selectable]:not([disabled]):focus-within),
:host([variant='info'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-accent-60')};
}
:host([variant='danger'][interactive]:not([disabled]):focus-within),
:host([variant='danger'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-danger-60')};
}
:host([variant='subtle'][interactive]:not([disabled]):focus-within),
:host([variant='subtle'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-neutral-60')};
}
:host([variant='success'][interactive]:not([disabled]):focus-within),
:host([variant='success'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-success-60')};
}
:host([variant='warning'][interactive]:not([disabled]):focus-within),
:host([variant='warning'][selectable]:not([disabled]):focus-within) {
--m-tag-outline-color: ${getColor('color-warning-100')};
}
:host([variant='default'][selectable][selected]),
:host([variant='neutral'][selectable][selected]) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-primary-60')};
--m-tag-border-color: ${getColor('color-primary-60')};
--m-tag-button-base-color: ${getColor('color-primary-60')};
}
:host([variant='default'][selectable][selected]:not([disabled]):hover),
:host([variant='neutral'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-primary-100')};
--m-tag-border-color: ${getColor('color-primary-100')};
--m-tag-button-base-color: ${getColor('color-primary-100')};
}
:host([variant='accent'][selectable][selected]),
:host([variant='info'][selectable][selected]) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-accent-60')};
--m-tag-border-color: ${getColor('color-accent-60')};
--m-tag-button-base-color: ${getColor('color-accent-60')};
}
:host([variant='accent'][selectable][selected]:not([disabled]):hover),
:host([variant='info'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-accent-100')};
--m-tag-border-color: ${getColor('color-accent-100')};
--m-tag-button-base-color: ${getColor('color-accent-100')};
}
:host([variant='danger'][selectable][selected]) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-danger-60')};
--m-tag-border-color: ${getColor('color-danger-60')};
--m-tag-button-base-color: ${getColor('color-danger-60')};
}
:host([variant='danger'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-danger-100')};
--m-tag-border-color: ${getColor('color-danger-100')};
--m-tag-button-base-color: ${getColor('color-danger-100')};
}
:host([variant='subtle'][selectable][selected]) {
--m-tag-color: ${getColor('color-neutral-60')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-border-input')};
}
:host([variant='subtle'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-neutral-60')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-neutral-60')};
}
:host([variant='success'][selectable][selected]) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-success-60')};
--m-tag-border-color: ${getColor('color-success-60')};
--m-tag-button-base-color: ${getColor('color-success-60')};
}
:host([variant='success'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-success-100')};
--m-tag-border-color: ${getColor('color-success-100')};
--m-tag-button-base-color: ${getColor('color-success-100')};
}
:host([variant='warning'][selectable][selected]) {
--m-tag-color: ${getColor('color-text-primary')};
--m-tag-background-color: ${getColor('color-warning-60')};
--m-tag-border-color: ${getColor('color-warning-60')};
--m-tag-button-base-color: ${getColor('color-text-primary')};
}
:host([variant='warning'][selectable][selected]:not([disabled]):hover) {
--m-tag-color: ${getColor('color-text-inverted')};
--m-tag-background-color: ${getColor('color-warning-100')};
--m-tag-border-color: ${getColor('color-warning-100')};
--m-tag-button-base-color: ${getColor('color-warning-100')};
}
:host([disabled]) {
cursor: default;
}
:host([disabled]) *,
:host([disabled]) ::slotted(*) {
pointer-events: none;
}
:host([variant='default'][disabled]),
:host([variant='neutral'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-background-tertiary')};
--m-tag-border-color: ${getColor('color-background-tertiary')};
}
:host([variant='accent'][disabled]),
:host([variant='info'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-accent-20')};
--m-tag-border-color: ${getColor('color-accent-20')};
}
:host([variant='danger'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-danger-20')};
--m-tag-border-color: ${getColor('color-danger-20')};
}
:host([variant='subtle'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-background-primary')};
--m-tag-border-color: ${getColor('color-border')};
}
:host([variant='success'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-success-20')};
--m-tag-border-color: ${getColor('color-success-20')};
}
:host([variant='warning'][disabled]) {
--m-tag-color: ${getColor('color-text-disabled')};
--m-tag-background-color: ${getColor('color-warning-20')};
--m-tag-border-color: ${getColor('color-warning-20')};
}
slot[name='trailing']::slotted(m-caret-button) {
--m-caret-button-base-color: var(--m-tag-button-base-color);
}
slot[name='trailing']::slotted(m-close-button),
slot[name='trailing']::slotted(m-tag-remove) {
--m-close-button-base-color: var(--m-tag-button-base-color);
}
`,
];
}
const tagExpandStyles = () => {
return [
i$9 `
:host {
--m-icon-size: 0.75em;
}
:host([rotated]) {
transform: rotate(180deg);
}
`,
];
};
var _Tag_instances, _Tag_isInteractive, _Tag_isSelectable, _Tag_isSelected, _Tag_isDisabled, _Tag_toggle, _Tag_handleClick, _Tag_updateSlottedButtonInvertedState;
const logger$7 = createLogger('Tag');
class Tag extends Component {
static get properties() {
return {
disabled: { type: Boolean, reflect: true },
interactive: { type: Boolean, reflect: true },
isSkeleton: { type: Boolean, attribute: 'is-skeleton', reflect: true },
selectable: { type: Boolean, reflect: true },
selected: { type: Boolean, reflect: true },
size: { type: String, reflect: true },
variant: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-tag', constructor: Tag });
}
constructor() {
super();
_Tag_instances.add(this);
_Tag_isInteractive.set(this, () => Boolean(this.interactive));
_Tag_isSelectable.set(this, () => Boolean(this.selectable));
_Tag_isSelected.set(this, () => Boolean(this.selected));
_Tag_isDisabled.set(this, () => Boolean(this.disabled));
_Tag_handleClick.set(this, (event) => {
const actionButton = this.querySelector('m-close-button, m-caret-button, m-tag-remove');
const isActionButtonClicked = actionButton && event.composedPath().includes(actionButton);
if (this.disabled ||
isActionButtonClicked ||
(!__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isInteractive, "f").call(this))) {
event.stopPropagation();
event.preventDefault();
return;
}
if (__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
__classPrivateFieldGet$1(this, _Tag_instances, "m", _Tag_toggle).call(this);
}
});
this.variant = 'neutral';
this.size = 'default';
this.interactive = false;
this.selectable = false;
this.selected = false;
this.isSkeleton = false;
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Tag_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Tag_handleClick, "f"));
}
update(changedProperties) {
/**
* Selectable tags are rendered as buttons, that's why we don't
* need to set tabindex for them.
*/
if (__classPrivateFieldGet$1(this, _Tag_isInteractive, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isDisabled, "f").call(this)) {
this.setAttribute('tabindex', '0');
}
else {
this.removeAttribute('tabindex');
}
if (changedProperties.has('disabled')) {
this.setAttribute('aria-disabled', 'true');
}
else {
this.removeAttribute('aria-disabled');
}
super.update(changedProperties);
}
updated(changedProperties) {
/**
* Update inverted state of slotted action buttons when selected state changes.
*/
if (changedProperties.has('selected') || changedProperties.has('variant')) {
__classPrivateFieldGet$1(this, _Tag_instances, "m", _Tag_updateSlottedButtonInvertedState).call(this);
}
super.updated(changedProperties);
}
/**
* Which HTML tag should be used to render this element.
*/
get tag() {
const as = __classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? 'button' : 'span';
return i$1 `${s(as)}`;
}
render() {
return u `
<${this.tag}
class="tag"
?disabled="${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? __classPrivateFieldGet$1(this, _Tag_isDisabled, "f").call(this) : E$1}"
type=${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? 'button' : E$1}
aria-pressed=${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? __classPrivateFieldGet$1(this, _Tag_isSelected, "f").call(this) : E$1}
>
${this.isSkeleton
? u ``
: u `<slot name="leading"></slot>
<span class="tag-content">
<slot></slot>
</span>
<slot name="trailing"></slot>`}
</${this.tag}>
`;
}
}
_Tag_isInteractive = new WeakMap(), _Tag_isSelectable = new WeakMap(), _Tag_isSelected = new WeakMap(), _Tag_isDisabled = new WeakMap(), _Tag_handleClick = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_toggle = function _Tag_toggle() {
if (this.disabled || !__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
return;
}
this.selected = !this.selected;
this.emit('change');
}, _Tag_updateSlottedButtonInvertedState = function _Tag_updateSlottedButtonInvertedState() {
const actionButtons = this.querySelectorAll('m-close-button, m-caret-button, m-tag-remove, m-tag-expand');
if (actionButtons.length > 0 && __classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
logger$7.warn('Tag is selectable but has slotted action buttons, which is not recommended. See https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI for more information.');
}
/**
* These variants, when selected, have a lighter background color,
* so we don't need to update the inverted state of the slotted
* action buttons.
*/
if (['subtle', 'warning'].includes(this.variant)) {
return;
}
actionButtons.forEach((button) => {
button.toggleAttribute('inverted', __classPrivateFieldGet$1(this, _Tag_isSelected, "f").call(this));
});
};
Tag.styles = [tagStyles()];
Tag.define();
class TagRemove extends CloseButton {
static get properties() {
return {
...super.properties,
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-tag-remove', constructor: TagRemove });
}
connectedCallback() {
super.connectedCallback();
this.label = this.label || 'Remove tag';
}
}
TagRemove.define();
class TagExpand extends Icon {
static get properties() {
return {
...super.properties,
slot: { type: String, reflect: true },
rotated: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-tag-expand', constructor: TagExpand });
}
connectedCallback() {
super.connectedCallback();
this.name = 'caret-down';
}
}
TagExpand.styles = [...Icon.styles, tagExpandStyles()];
TagExpand.define();
function handleConditionObject(condition) {
const keys = Object.keys(condition || {});
const res = keys.reduce((acc, key) => {
if (condition[key]) {
return [...acc, key];
}
return acc;
}, []);
return res.join(' ');
}
/**
* Concatenate style properties or class names conditionally.
* Conditions can be functions that consume components props,
* objects, strings, or numbers (that will be coerced to strings).
* @example
* ```jsx
* // returns 'some-class class-a'
* conditional('some-class', {
* 'class-a': true,
* 'class-b': false,
* })
* ```
* @param conditions
* @returns {string}
*/
function conditional(...conditions) {
let classes = [];
for (let i = 0; i < conditions.length; i++) {
const condition = conditions[i];
if (typeof condition === 'string') {
classes.push(condition);
}
else {
// is an object condition
classes = classes.concat(handleConditionObject(condition));
}
}
return classes.join(' ');
}
function baseTagStyles() {
return [
skeleton.styles(),
i$9 `
:host {
--m-tag-skeleton-width: 100px;
display: inline-block;
}
.tag {
--m-tag-padding-block: ${getToken$1('spacing-2')};
--m-tag-padding-inline: ${getToken$1('spacing-3')};
box-sizing: border-box;
max-width: 200px;
border-radius: 100px;
line-height: ${getToken$1('line-height-1')};
cursor: default;
display: flex;
align-items: center;
gap: ${getToken$1('spacing-1')};
padding-block: 0;
padding-inline: var(--m-tag-padding-inline);
}
.tag-content {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
padding-block: var(--m-tag-padding-block);
padding-inline: 0;
}
@media (prefers-reduced-motion: no-preference) {
.tag {
${transition([{ property: 'background-color' }])};
}
.tag-content,
slot[name='leading']::slotted(*) {
${transition([{ property: 'color' }])};
}
}
.-size-small {
--m-tag-padding-block: ${getToken$1('spacing-1')};
--m-tag-padding-inline: ${getToken$1('spacing-2')};
${typography('chips-sm')};
block-size: ${toRem('18px')};
}
.-size-default {
--m-tag-padding-block: ${getToken$1('spacing-2')};
--m-tag-padding-inline: ${getToken$1('spacing-3')};
${typography('chips-md')};
block-size: ${getToken$1('global-height-small')};
}
.-size-large {
--m-tag-padding-block: ${getToken$1('spacing-3')};
--m-tag-padding-inline: ${getToken$1('spacing-4')};
${typography('button-lg')};
block-size: ${getToken$1('global-height-default')};
}
.-is-skeleton {
${skeleton()};
width: var(--m-tag-skeleton-width);
}
`,
];
}
/**
* TODO: WHEN REMOVING THIS COMPONENT, PLEASE,
* REMOVE THE BASE TAG STYLES!
*/
function actionableTagStyles() {
return [
skeleton.styles(),
baseTagStyles(),
i$9 `
.tag {
flex-wrap: nowrap;
border: none;
}
.-default {
color: ${getColor('color-text-tertiary')};
background: ${getColor('color-background-tertiary')};
}
.-accent {
color: ${getColor('color-accent-60')};
background: ${getColor('color-accent-20')};
}
.-selectable.-default.-selected {
background: ${getColor('color-primary-60')};
color: ${getColor('color-text-inverted')};
}
.-selectable.-accent.-selected {
background: ${getColor('color-accent-100')};
color: ${getColor('color-text-inverted')};
}
${on('.-selectable').not.disabled} {
cursor: pointer;
}
${on('.-selectable').not.disabled.focus} {
outline: 1px solid ${getColor('color-primary-60')};
outline-offset: 2px;
}
${on('.-selectable.-default:not(.-selected)').not.disabled.hover},
${on('.-selectable.-default:not(.-selected)').not.disabled.active} {
color: ${getColor('color-text-primary')};
}
${on('.-selectable.-accent:not(.-selected)').not.disabled.hover},
${on('.-selectable.-accent:not(.-selected)').not.disabled.active} {
color: ${getColor('color-accent-100')};
}
${on('.-selectable').disabled} {
color: ${getColor('color-text-disabled')};
}
${on('.-selectable.-default').disabled} {
background: ${getColor('color-background-tertiary')};
}
${on('.-selectable.-accent').disabled} {
background: ${getColor('color-accent-20')};
}
.-accent m-close-button {
--m-close-button-base-color: ${getColor('color-accent-100')};
}
.-default.-selected m-close-button {
--m-close-button-base-color: ${getColor('color-primary-60')};
}
.-default:not(.-selected) m-close-button {
--m-close-button-base-color: ${getColor('color-text-primary')};
}
.-size-large.-removable {
// manual/visual increment
padding-inline-end: calc(${getToken$1('spacing-2')} + 4px);
}
`,
];
}
var _ActionableTag_instances, _ActionableTag_isSkeleton, _ActionableTag_isRemovable, _ActionableTag_isSelectable, _ActionableTag_isSelected, _ActionableTag_isDisabled, _ActionableTag_handleClose, _ActionableTag_toggle, _ActionableTag_handleClick;
class ActionableTag extends Component {
static get properties() {
return {
variant: { type: String },
size: { type: String },
selectable: { type: Boolean, reflect: true },
selected: { type: Boolean, reflect: true },
removable: { type: Boolean, reflect: true },
disabled: { type: Boolean, reflect: true },
isSkeleton: { type: Boolean, attribute: 'is-skeleton' },
};
}
static define() {
Component.define({
name: 'm-actionable-tag',
constructor: ActionableTag,
});
}
constructor() {
super();
_ActionableTag_instances.add(this);
_ActionableTag_isSkeleton.set(this, () => Boolean(this.isSkeleton));
_ActionableTag_isRemovable.set(this, () => Boolean(this.removable));
_ActionableTag_isSelectable.set(this, () => Boolean(this.selectable));
_ActionableTag_isSelected.set(this, () => Boolean(this.selected));
_ActionableTag_isDisabled.set(this, () => Boolean(this.disabled));
_ActionableTag_handleClose.set(this, (event) => {
event.stopPropagation();
if (this.disabled) {
event.preventDefault();
return;
}
this.emit('remove');
});
_ActionableTag_handleClick.set(this, (event) => {
const closeButton = this.renderRoot.querySelector('m-close-button');
const isCloseButtonClicked = closeButton && event.composedPath().includes(closeButton);
if (this.disabled || !__classPrivateFieldGet$1(this, _ActionableTag_isSelectable, "f").call(this) || isCloseButtonClicked) {
event.stopPropagation();
event.preventDefault();
return;
}
__classPrivateFieldGet$1(this, _ActionableTag_instances, "m", _ActionableTag_toggle).call(this);
});
this.variant = 'default';
this.size = 'default';
this.removable = false;
this.selectable = false;
this.selected = false;
this.disabled = false;
this.isSkeleton = false;
}
/**
* Which HTML tag should be used to render this element.
*/
get tag() {
const as = __classPrivateFieldGet$1(this, _ActionableTag_isSelectable, "f").call(this) ? 'button' : 'span';
return i$1 `${s(as)}`;
}
render() {
return u `
<${this.tag}
class=${e$1({
tag: true,
'-default': this.variant === 'default',
'-accent': this.variant === 'accent',
'-size-small': this.size === 'small',
'-size-default': this.size === 'default',
'-size-large': this.size === 'large',
'-removable': __classPrivateFieldGet$1(this, _ActionableTag_isRemovable, "f").call(this),
'-selectable': __classPrivateFieldGet$1(this, _ActionableTag_isSelectable, "f").call(this),
'-selected': __classPrivateFieldGet$1(this, _ActionableTag_isSelected, "f").call(this),
'-is-skeleton': __classPrivateFieldGet$1(this, _ActionableTag_isSkeleton, "f").call(this),
'is-disabled': __classPrivateFieldGet$1(this, _ActionableTag_isDisabled, "f").call(this),
})}
@click=${__classPrivateFieldGet$1(this, _ActionableTag_handleClick, "f")}
?disabled="${__classPrivateFieldGet$1(this, _ActionableTag_isSelectable, "f").call(this) ? __classPrivateFieldGet$1(this, _ActionableTag_isDisabled, "f").call(this) : E$1}"
aria-disabled=${__classPrivateFieldGet$1(this, _ActionableTag_isSelectable, "f").call(this) && __classPrivateFieldGet$1(this, _ActionableTag_isDisabled, "f").call(this) ? 'true' : 'false'}
>
${this.isSkeleton ? u `` : u `<slot name="leading"></slot>`}
<span class="tag-content">
<slot></slot>
</span>
<m-close-button
?hidden=${!this.removable || this.isSkeleton}
?inverted=${this.selected}
?disabled=${__classPrivateFieldGet$1(this, _ActionableTag_isDisabled, "f").call(this)}
size=${conditional({
small: this.size && ['small', 'default'].includes(this.size),
default: this.size === 'large',
})}
@click=${__classPrivateFieldGet$1(this, _ActionableTag_handleClose, "f")}
></m-close-button>
</${this.tag}>
`;
}
}
_ActionableTag_isSkeleton = new WeakMap(), _ActionableTag_isRemovable = new WeakMap(), _ActionableTag_isSelectable = new WeakMap(), _ActionableTag_isSelected = new WeakMap(), _ActionableTag_isDisabled = new WeakMap(), _ActionableTag_handleClose = new WeakMap(), _ActionableTag_handleClick = new WeakMap(), _ActionableTag_instances = new WeakSet(), _ActionableTag_toggle = function _ActionableTag_toggle() {
this.selected = !this.selected;
this.emit('change');
};
ActionableTag.styles = [actionableTagStyles()];
ActionableTag.define();
function styles$a() {
return i$9 `
:host {
--m-text-field-background-color: ${getColor('color-background-primary')};
--m-text-field-border-color: ${getColor('color-border-input')};
--m-text-field-height: ${getToken$1('global-height-default')};
--m-text-field-padding-y: ${getToken$1('spacing-2')};
--m-text-field-placeholder-color: ${getColor('color-text-placeholder')};
--m-text-field-color: ${getColor('color-text-primary')};
${typography('body-md')};
${transition([
{ property: 'background-color' },
{ property: 'border-color' },
])};
display: inline-flex;
align-items: center;
justify-content: start;
gap: ${getToken$1('spacing-2')};
position: relative;
box-sizing: border-box;
block-size: var(--m-text-field-height);
${px(getToken$1('spacing-2'))};
background-color: var(--m-text-field-background-color);
border-radius: ${getToken$1('border-radius-s')};
border: 1px solid var(--m-text-field-border-color);
}
:host([size='small']) {
--m-text-field-height: ${getToken$1('global-height-small')};
--m-text-field-padding-y: 0;
}
:host([size='small']),
:host([size='small']) input {
${typography('body-sm')};
}
:host([size='large']) {
--m-text-field-height: ${getToken$1('global-height-large')};
--m-text-field-padding-y: ${getToken$1('spacing-3')};
}
:host([status='danger']) {
--m-text-field-border-color: ${getColor('color-danger-60')};
}
:host([variant='table']:enabled) {
--m-text-field-background-color: ${getColor('color-background-tertiary', 0.7)};
--m-text-field-border-color: transparent;
}
:host([variant='table']:enabled:hover) {
--m-text-field-background-color: ${getColor('color-background-primary')};
}
:host([variant='table']:disabled) {
--m-text-field-background-color: ${getColor('color-background-tertiary', 0.5)};
--m-text-field-color: ${getColor('color-text-disabled')};
--m-text-field-border-color: transparent;
}
:host(:disabled) {
--m-text-field-background-color: ${getColor('color-background-tertiary')};
}
:host(:disabled) * {
pointer-events: none;
}
slot[name='leading']::slotted(*),
slot[name='trailing']::slotted(*) {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
cursor: default;
}
:host(:enabled:hover) {
--m-text-field-border-color: ${getColor('color-primary-60')};
}
:host(:enabled:is(:focus, :focus-visible, :focus-within)) {
--m-text-field-border-color: ${getColor('color-primary-100')};
--m-text-field-background-color: ${getColor('color-background-primary')};
}
${on('#input').not.disabled.active},
${on('#input').not.disabled.focus} {
-webkit-appearance: none;
background: none;
border: none;
outline: none;
}
#input {
${typography('body-md')};
align-self: stretch;
border: none;
outline: none;
flex: 1;
min-width: 0;
${px(0)};
padding-block: var(--m-text-field-padding-y);
background-color: transparent;
color: var(--m-text-field-color);
}
#input:disabled {
cursor: default;
}
#input::placeholder {
color: var(--m-text-field-placeholder-color);
}
#clear {
visibility: hidden;
}
`;
}
var _TextField_instances, _TextField_clear_get, _TextField_initialize, _TextField_handleChange, _TextField_handleInput, _TextField_handleKeyDown, _TextField_handleValueChange, _TextField_handleDisabledChange, _TextField_updateClearButton, _TextField_handleClear;
class TextField extends WithFormComponentMixin(Component) {
static get properties() {
return {
...super.properties,
clearable: { type: Boolean },
initialValue: { type: String, attribute: 'initial-value', reflect: true },
inputMode: { type: String, attribute: 'input-mode' },
max: { type: String },
maxLength: { type: Number, reflect: true, attribute: 'max-length' },
min: { type: String },
minLength: { type: Number, reflect: true, attribute: 'min-length' },
pattern: { type: String },
placeholder: { type: String },
readOnly: { type: Boolean, reflect: true, attribute: 'read-only' },
size: { type: String, reflect: true },
status: { type: String, reflect: true },
step: { type: String },
type: { type: String },
value: { type: String, reflect: true },
variant: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-text-field', constructor: TextField });
}
constructor() {
super();
_TextField_instances.add(this);
/**
* We use this private variable to store the pending value
* when the internal input hasn't been rendered yet.
*/
this.pendingValue = null;
_TextField_handleChange.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
return;
}
__classPrivateFieldGet$1(this, _TextField_handleValueChange, "f").call(this, this.value);
this.reemit(event);
});
_TextField_handleInput.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
return;
}
__classPrivateFieldGet$1(this, _TextField_handleValueChange, "f").call(this, this.value);
});
_TextField_handleKeyDown.set(this, (event) => {
const form = this.getActualForm();
if (!form) {
return;
}
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
// based on https://github.com/shoelace-style/shoelace/blob/next/src/components/input/input.component.ts
if (event.key === 'Enter' && !hasModifier) {
setTimeout(() => {
/**
* When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly.
* One way to check for this is to look at `event.isComposing`, which will be true when the IME is open.
* See https://github.com/shoelace-style/shoelace/pull/988
*/
if (event.defaultPrevented || event.isComposing) {
return;
}
const hasSubmitted = performVirtualFormSubmission(this, form);
if (hasSubmitted) {
this.focus();
}
else {
form.reportValidity();
}
});
}
});
_TextField_handleValueChange.set(this, (value) => {
const normalizedValue = String(value);
if (this.input) {
if (this.input.value !== normalizedValue) {
/**
* this condition is satisfied when the value is set imperatively, via setter and
* ensures:
* 1) we do not set the value imperatively when the value is set via the input (change or input event).
* 2) we do not interfere with the cursor position.
*/
this.input.value = normalizedValue;
}
this.pendingValue = null;
this.setFormValue(normalizedValue);
__classPrivateFieldGet$1(this, _TextField_updateClearButton, "f").call(this);
}
else if (normalizedValue) {
/**
* It the internal input hasn't been rendered yet,
* so we store the pending value.
*/
this.pendingValue = normalizedValue;
}
});
_TextField_handleDisabledChange.set(this, (disabled) => {
this.disabled = disabled;
if (this.input) {
this.input.disabled = disabled;
}
});
_TextField_updateClearButton.set(this, () => {
if (__classPrivateFieldGet$1(this, _TextField_instances, "a", _TextField_clear_get)) {
const shouldShowClearButton = Boolean(this.clearable) && !this.disabled && this.value.length > 0;
/**
* we use this approach to avoid the layout shift
* when showing/hiding the clear button as the users
* changes the input value.
*/
__classPrivateFieldGet$1(this, _TextField_instances, "a", _TextField_clear_get).style.visibility = shouldShowClearButton
? 'visible'
: 'hidden';
}
});
_TextField_handleClear.set(this, (event) => {
event.stopPropagation();
this.clear();
});
this.clearable = false;
this.size = 'default';
this.type = 'text';
this.value = '';
this.max = '';
}
createRenderRoot() {
const root = super.createRenderRoot();
/**
* We add the event listener to the shadow root because `change` event is not
* composed, so it will not bubble outside the host.
*/
root.addEventListener('change', __classPrivateFieldGet$1(this, _TextField_handleChange, "f"));
return root;
}
async connectedCallback() {
super.connectedCallback();
this.type = this.type ?? 'text';
this.inputMode = this.inputMode ?? 'text';
this.addEventListener('input', __classPrivateFieldGet$1(this, _TextField_handleInput, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _TextField_instances, "m", _TextField_initialize).call(this, this.pendingValue ??
this.getAttribute('value') ??
this.getAttribute('initial-value') ??
'');
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('input', __classPrivateFieldGet$1(this, _TextField_handleInput, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _TextField_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('clearable')) {
__classPrivateFieldGet$1(this, _TextField_updateClearButton, "f").call(this);
}
}
render() {
return x `
<slot name="leading"></slot>
<input
id="input"
?readonly=${this.readOnly}
autocomplete=${o$3(this.autocomplete)}
inputmode=${o$3(this.inputMode)}
max=${(this.max || E$1)}
maxlength=${o$3(this.maxLength != null && this.maxLength > -1
? this.maxLength
: undefined)}
min=${(this.min || E$1)}
minlength=${o$3(this.minLength != null && this.minLength > -1
? this.minLength
: undefined)}
pattern=${o$3(this.pattern)}
placeholder="${o$3(this.placeholder)}"
step=${(this.step || E$1)}
type="${o$3(this.type)}"
@keydown=${__classPrivateFieldGet$1(this, _TextField_handleKeyDown, "f")}
/>
${this.clearable
? x `<m-close-button
id="clear"
controls="input"
@click=${__classPrivateFieldGet$1(this, _TextField_handleClear, "f")}
label="Clear input"
></m-close-button>`
: E$1}
<slot name="trailing"></slot>
`;
}
get input() {
return this.renderRoot?.querySelector('#input') ?? null;
}
/**
* Text field value.
*/
set value(value) {
__classPrivateFieldGet$1(this, _TextField_handleValueChange, "f").call(this, value);
}
get value() {
return this.input?.value ?? '';
}
get selectionStart() {
return this.input?.selectionStart ?? null;
}
get selectionEnd() {
return this.input?.selectionEnd ?? null;
}
get selectionDirection() {
return this.input?.selectionDirection ?? null;
}
clear() {
this.value = '';
this.emit('clear');
this.focus();
}
focus() {
this.input?.focus();
}
select() {
this.input?.select();
}
setSelectionRange(start, end, direction) {
this.input?.setSelectionRange(start, end, direction);
}
setRangeText(replacement, start, end, selectionMode) {
if (start == null || end == null) {
this.input?.setRangeText(replacement);
}
else {
this.input?.setRangeText(replacement, start, end, selectionMode);
}
}
formResetCallback() {
__classPrivateFieldGet$1(this, _TextField_instances, "m", _TextField_initialize).call(this);
}
formStateRestoreCallback(state) {
if (state) {
this.value = state;
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _TextField_handleDisabledChange, "f").call(this, disabled);
}
}
_TextField_handleChange = new WeakMap(), _TextField_handleInput = new WeakMap(), _TextField_handleKeyDown = new WeakMap(), _TextField_handleValueChange = new WeakMap(), _TextField_handleDisabledChange = new WeakMap(), _TextField_updateClearButton = new WeakMap(), _TextField_handleClear = new WeakMap(), _TextField_instances = new WeakSet(), _TextField_clear_get = function _TextField_clear_get() {
return this.renderRoot?.querySelector('#clear') ?? null;
}, _TextField_initialize = function _TextField_initialize(value) {
this.value = value ?? this.getAttribute('initial-value') ?? '';
};
TextField.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
TextField.styles = [styles$a()];
TextField.define();
function cleanUpLabel(label) {
return label.trim().replace(/\s{2,}/g, ' ');
}
function cleanUpOptionLabel(option) {
const text = option.textContent ?? '';
return cleanUpLabel(text);
}
var _SelectOption_context, _SelectOption_handleClick, _SelectOption_handleSelectedChange, _SelectOption_handleDisabledChange;
class SelectOption extends WithIdElementMixin(WithFormComponentMixin(Component)) {
static get properties() {
return {
...super.properties,
selected: { type: Boolean, reflect: true },
value: { type: String, reflect: true },
destructive: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-option', constructor: SelectOption });
}
constructor() {
super();
_SelectOption_context.set(this, void 0);
_SelectOption_handleClick.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
}
});
_SelectOption_handleSelectedChange.set(this, (selected) => {
if (!this.name) {
const select = this.closest('m-select');
this.name = select?.name ?? select?.getAttribute('name') ?? '';
}
this.setFormValue(selected ? this.value : null);
this.setAttribute('aria-selected', String(selected));
});
_SelectOption_handleDisabledChange.set(this, (disabled) => {
const isDisabled = Boolean(__classPrivateFieldGet$1(this, _SelectOption_context, "f").value?.disabled || disabled);
this.setAttribute('aria-disabled', String(isDisabled));
});
__classPrivateFieldSet(this, _SelectOption_context, new s$4(this, {
context: selectContext,
subscribe: true,
callback: () => {
__classPrivateFieldGet$1(this, _SelectOption_handleDisabledChange, "f").call(this, Boolean(this.disabled));
},
}), "f");
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'option');
this.addEventListener('click', __classPrivateFieldGet$1(this, _SelectOption_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _SelectOption_handleClick, "f"));
}
update(changedProperties) {
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _SelectOption_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('selected')) {
__classPrivateFieldGet$1(this, _SelectOption_handleSelectedChange, "f").call(this, Boolean(this.selected));
}
super.update(changedProperties);
}
render() {
return x `
<m-icon id="multiple-check" name="check" aria-hidden="true"></m-icon>
<slot name="leading"></slot>
<slot></slot>
<slot name="trailing"></slot>
<m-icon id="single-check" name="check" aria-hidden="true"></m-icon>
`;
}
get label() {
return cleanUpOptionLabel(this);
}
get leading() {
const leadingSlot = this.renderRoot.querySelector('slot[name="leading"]');
const elements = leadingSlot.assignedElements({
flatten: true,
});
return elements[0] ?? null;
}
get trailing() {
const trailingSlot = this.renderRoot.querySelector('slot[name="trailing"]');
const elements = trailingSlot.assignedElements({
flatten: true,
});
return elements[0] ?? null;
}
// eslint-disable-next-line class-methods-use-this
formResetCallback() {
// select will take care of this
}
formStateRestoreCallback(state) {
if (state != null) {
this.selected = Boolean(state);
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _SelectOption_handleDisabledChange, "f").call(this, disabled);
}
}
_SelectOption_context = new WeakMap(), _SelectOption_handleClick = new WeakMap(), _SelectOption_handleSelectedChange = new WeakMap(), _SelectOption_handleDisabledChange = new WeakMap();
SelectOption.styles = [optionStyles()];
SelectOption.define();
var _Select_instances, _Select_controllers, _Select_searchDebounce, _Select_dataSources, _Select_searchTerm, _Select_contextProvider, _Select_clearSearch, _Select_clearSearchDebounce, _Select_getKeyboardShortcuts, _Select_getOptionByValue, _Select_handleClear, _Select_handleClick, _Select_handleClickOutside, _Select_handleDisabledChange, _Select_handleHandleClick, _Select_handleSlotChange, _Select_handleStatusChange, _Select_handleTagRemove, _Select_handleTriggerChange, _Select_handleTriggerInput, _Select_handleTypeChange, _Select_handleValueChange, _Select_initialize, _Select_updateOptions, _Select_updatePicker;
const logger$6 = createLogger('select');
attachContextRoot();
class Select extends WithSelectionControlMixin(Popover) {
static get properties() {
return {
...super.properties,
disabled: {
type: Boolean,
reflect: true,
},
initialValue: {
type: String,
attribute: 'initial-value',
fromAttribute,
reflect: true,
},
/**
* We use a different property name internally so the react wrapper can still
* keep track of the property while we can use custom getter/setter to
* set and reflect the `value` attribute.
*/
providedValue: {
type: String,
attribute: 'value',
fromAttribute,
},
loading: { type: Boolean },
name: { type: String, reflect: true },
placeholder: { type: String },
size: { type: String, reflect: true },
status: { type: String, reflect: true },
type: { type: String, reflect: true },
filteredOptions: { state: true },
slottedOptions: { state: true },
};
}
static define() {
Component.define({ name: 'm-select', constructor: Select });
}
constructor() {
super();
_Select_instances.add(this);
_Select_controllers.set(this, void 0);
_Select_searchDebounce.set(this, void 0);
_Select_dataSources.set(this, new Map());
/**
* Determines the current search term.
*/
_Select_searchTerm.set(this, '');
_Select_contextProvider.set(this, new i$5(this, {
context: selectContext,
initialValue: {
disabled: false,
},
}));
this.field = new s$4(this, {
context: fieldContext,
subscribe: true,
callback: ({ status }) => {
this.status = status;
},
});
this.clear = async () => {
await __classPrivateFieldGet$1(this, _Select_clearSearch, "f").call(this);
this.value = [];
this.trigger?.focus();
this.emit('change');
this.emit('clear');
};
this.expand = () => {
if (this.disabled) {
return;
}
this.show();
__classPrivateFieldGet$1(this, _Select_controllers, "f").boundary.activate();
this.emit('expand');
};
this.collapse = async () => {
this.hide();
await __classPrivateFieldGet$1(this, _Select_clearSearch, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
__classPrivateFieldGet$1(this, _Select_controllers, "f").boundary.deactivate();
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.clear();
this.emit('collapse');
};
/**
* Toggle select menu.
*/
this.toggle = async () => {
if (this.open) {
await this.collapse();
}
else {
this.expand();
}
};
/**
* Trigger search operation for the select.
*/
this.search = async (searchTerm, options = { emit: true, expand: true }) => {
const normalizedSearchTerm = searchTerm.trim().toLowerCase();
if (this.disabled) {
return;
}
if (options.expand) {
this.expand();
}
this.loading = true;
this.filteredOptions = this.slottedOptions.filter((descendant) => {
const itemTextLowerCase = descendant.label.toLowerCase();
const matches = itemTextLowerCase.includes(normalizedSearchTerm);
descendant.toggleAttribute('hidden', !matches);
return matches;
});
this.loading = false;
if (options.emit) {
this.emit('search');
}
};
/**
* Toggle option(s) by value(s).
* This can also be used for testing purposes.
*/
this.toggleOptions = (value) => {
if (!value) {
return;
}
__classPrivateFieldGet$1(this, _Select_controllers, "f").selection.toggle(value);
__classPrivateFieldGet$1(this, _Select_clearSearch, "f").call(this);
__classPrivateFieldGet$1(this, _Select_updateOptions, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
this.emit('change');
};
/**
* Select option(s) by value(s).
* This can also be used for testing purposes.
*/
this.selectOptions = (value) => {
if (!value) {
return;
}
__classPrivateFieldGet$1(this, _Select_controllers, "f").selection.select(value);
__classPrivateFieldGet$1(this, _Select_clearSearch, "f").call(this);
__classPrivateFieldGet$1(this, _Select_updateOptions, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
this.emit('change');
};
/**
* Unselect option(s) by value(s).
* This can also be used for testing purposes.
*/
this.unselectOptions = (value) => {
if (!value) {
return;
}
__classPrivateFieldGet$1(this, _Select_controllers, "f").selection.unselect(value);
__classPrivateFieldGet$1(this, _Select_clearSearch, "f").call(this);
__classPrivateFieldGet$1(this, _Select_updateOptions, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
this.emit('change');
};
_Select_clearSearch.set(this, async () => {
if (!__classPrivateFieldGet$1(this, _Select_searchTerm, "f")) {
return;
}
__classPrivateFieldSet(this, _Select_searchTerm, '', "f");
__classPrivateFieldGet$1(this, _Select_clearSearchDebounce, "f").call(this);
for (const option of this.slottedOptions) {
option.toggleAttribute('hidden', false);
}
this.filteredOptions = this.slottedOptions;
});
_Select_clearSearchDebounce.set(this, () => {
window.clearTimeout(__classPrivateFieldGet$1(this, _Select_searchDebounce, "f"));
});
_Select_getKeyboardShortcuts.set(this, () => {
const getFirstSelected = () => this.filteredOptions.find((option) => option.selected && !option.hasAttribute('disabled'));
return [
{
shortcut: {
key: 'ArrowUp',
},
handler: () => {
if (!this.open) {
this.expand();
const firstSelected = getFirstSelected();
if (firstSelected) {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focus(firstSelected);
}
else {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focusLast();
}
}
else {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focusPrevious();
}
},
},
{
shortcut: {
key: 'ArrowDown',
},
handler: () => {
if (!this.open) {
this.expand();
const firstSelected = getFirstSelected();
if (firstSelected) {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focus(firstSelected);
}
else {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focusFirst();
}
}
else {
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focusNext();
}
},
},
{
shortcut: {
key: 'Enter',
},
handler: (event) => {
const element = event.target;
/**
* we are only intested when the event happens during the selection of an option,
* not, for example, when the user hits enter to remove a tag.
* we check for the trigger selector because that's what the target will be when the user
* is selecting an option.
*/
if (!element.matches(TRIGGER_SELECTOR)) {
return;
}
const option = __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focused;
if (!option || option.disabled) {
return;
}
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focus(option);
this.toggleOptions(option.value);
if (!this.isMultiple) {
this.collapse();
}
},
},
{
shortcut: {
key: 'Backspace',
},
handler: () => {
if (
// in this case, we have no tags to care about
!this.isMultiple ||
// just handling an unlikely case where the tags container isn't queriable yet
!this.tags ||
// if there's no selected options, there's nothing to remove
!this.value ||
// if there's an ongoing search, the user is just deleting the search term using backspace
__classPrivateFieldGet$1(this, _Select_searchTerm, "f").length > 0) {
return;
}
if (this.tags.lastChild) {
const lastTag = this.tags.lastChild;
const { value } = lastTag.dataset;
this.toggleOptions(value);
}
},
},
];
});
_Select_getOptionByValue.set(this, (value) => {
if (!value) {
return null;
}
return this.slottedOptions.find((option) => option.value === value) ?? null;
});
_Select_handleClear.set(this, (event) => {
event.stopPropagation();
this.clear();
});
_Select_handleClick.set(this, (event) => {
if (this.disabled) {
return;
}
const element = event.target;
if (element.matches('m-option') && element.value) {
this.toggleOptions(element.value);
this.trigger?.focus();
if (!this.isMultiple) {
this.collapse();
return;
}
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focus(element);
return;
}
if (!this.open && !element.matches('m-close-button')) {
this.expand();
this.trigger?.focus();
}
});
_Select_handleClickOutside.set(this, async () => {
this.collapse();
});
_Select_handleDisabledChange.set(this, (disabled) => {
this.hide();
__classPrivateFieldGet$1(this, _Select_contextProvider, "f").setValue({
disabled,
});
if (this.trigger) {
this.trigger.disabled = disabled;
}
});
_Select_handleHandleClick.set(this, (event) => {
event.stopPropagation();
if (this.disabled) {
return;
}
this.toggle();
this.trigger?.focus();
});
_Select_handleSlotChange.set(this, () => {
const optionSlot = this.renderRoot.querySelector('slot:not([name])');
const elements = optionSlot
.assignedElements({
flatten: true,
})
.filter((descendant) => {
return descendant.matches('m-option');
});
this.slottedOptions = elements;
});
_Select_handleStatusChange.set(this, (status) => {
/**
* If the field has a status, it has priority over any status provided to the select.
*/
this.status = this.field.value?.status ?? status;
});
_Select_handleTagRemove.set(this, (event) => {
event.stopPropagation();
const element = event.target;
if (element && element.matches('m-actionable-tag')) {
const { value } = element.dataset;
this.toggleOptions(value);
this.trigger?.focus();
}
});
// eslint-disable-next-line class-methods-use-this
_Select_handleTriggerChange.set(this, (event) => {
// we do not want to expose the change event to the outside world
event.stopPropagation();
});
_Select_handleTriggerInput.set(this, (event) => {
event.stopPropagation();
__classPrivateFieldSet(this, _Select_searchTerm, event.target.value, "f");
/**
* we clear the focus manager when the user starts typing;
* if we don't clear the focused option, we may reach a scenario
* where a previously focused option is hidden due to a search,
* but still keeping its virtual focus state (represented by the `is-focused` class).
*/
__classPrivateFieldGet$1(this, _Select_controllers, "f").focus.clear();
__classPrivateFieldGet$1(this, _Select_clearSearchDebounce, "f").call(this);
__classPrivateFieldSet(this, _Select_searchDebounce, window.setTimeout(() => {
this.search(__classPrivateFieldGet$1(this, _Select_searchTerm, "f"));
}, SEARCH_DELAY), "f");
});
_Select_handleTypeChange.set(this, () => {
__classPrivateFieldGet$1(this, _Select_updateOptions, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
});
_Select_handleValueChange.set(this, (value) => {
__classPrivateFieldGet$1(this, _Select_controllers, "f").selection.init(value);
__classPrivateFieldGet$1(this, _Select_updateOptions, "f").call(this);
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
});
/**
* Sync the `selected` attributes for the queriable options.
*/
_Select_updateOptions.set(this, () => {
for (const element of __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.queried) {
element.selected = __classPrivateFieldGet$1(this, _Select_controllers, "f").selection.has(element.value);
}
});
this.handleFormReset = () => {
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_initialize).call(this);
};
this.slottedOptions = [];
this.filteredOptions = [];
this.position = 'absolute';
this.placement = 'bottom-start';
this.size = 'default';
__classPrivateFieldSet(this, _Select_controllers, {
boundary: new BoundaryController(this),
focus: new FocusManagerController(this, {
query: () => {
const selectors = 'm-option:not([hidden])';
return Array.from(this.querySelectorAll(selectors));
},
// search on type should happen via the input, not keyboard shortcuts.
focusOnType: false,
getInteractiveElement: () => {
return this.getFloatingElement();
},
}),
keyboard: new KeyboardSupportController(this, __classPrivateFieldGet$1(this, _Select_getKeyboardShortcuts, "f").call(this), {
event: 'keydown',
getEventTarget: () => this.renderRoot,
}),
selection: new SelectionController$1(this, {
getSelectionType: () => this.type,
}),
}, "f");
}
createRenderRoot() {
const root = super.createRenderRoot();
root.addEventListener('click', __classPrivateFieldGet$1(this, _Select_handleClick, "f"));
root.addEventListener('remove', __classPrivateFieldGet$1(this, _Select_handleTagRemove, "f"));
return root;
}
async connectedCallback() {
super.connectedCallback();
this.type = this.type ?? 'single';
this.addEventListener('interactout', __classPrivateFieldGet$1(this, _Select_handleClickOutside, "f"));
await this.updateComplete;
if (this.value) {
/**
* this condition covers specifically the case where the value prop directly.
* this happens, for example, when using the React wrapper.
*/
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_initialize).call(this, this.value);
}
else {
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_initialize).call(this, this.getAttribute('value') ?? this.getAttribute('initial-value'));
}
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('interactout', __classPrivateFieldGet$1(this, _Select_handleClickOutside, "f"));
__classPrivateFieldGet$1(this, _Select_clearSearchDebounce, "f").call(this);
}
update(changedProperties) {
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Select_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('status')) {
__classPrivateFieldGet$1(this, _Select_handleStatusChange, "f").call(this, this.status);
}
if (changedProperties.has('type')) {
__classPrivateFieldGet$1(this, _Select_handleTypeChange, "f").call(this);
}
if (changedProperties.has('slottedOptions')) {
this.search(__classPrivateFieldGet$1(this, _Select_searchTerm, "f"), { emit: false, expand: false });
}
if (changedProperties.has('providedValue') &&
this.providedValue &&
hasValueChanged(this.providedValue, this.value)) {
this.value = this.providedValue;
}
super.update(changedProperties);
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('slottedOptions')) {
__classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
}
}
getReferenceElement() {
return this.renderRoot?.querySelector('#picker');
}
getFloatingElement() {
return this.renderRoot?.querySelector(MENU_SELECTOR);
}
// eslint-disable-next-line class-methods-use-this
getArrowElement() {
return null;
}
render() {
return x `
<div id="picker">
<span id="leading"></span>
<div id="trigger-wrapper">
<div id="tags"></div>
<input
type="text"
id="trigger"
role="combobox"
aria-haspopup="true"
aria-controls="menu"
aria-autocomplete="list"
aria-expanded=${this.open ? 'true' : 'false'}
placeholder="${o$3(this.placeholder)}"
?disabled=${this.disabled}
@change=${__classPrivateFieldGet$1(this, _Select_handleTriggerChange, "f")}
@input=${__classPrivateFieldGet$1(this, _Select_handleTriggerInput, "f")}
/>
</div>
${['single-strict', 'multiple'].includes(this.type)
? E$1
: x `<m-close-button
id="clear"
aria-controls="trigger"
label="Clear value"
@click=${__classPrivateFieldGet$1(this, _Select_handleClear, "f")}
></m-close-button>`}
<button
id="handle"
tabindex="-1"
aria-label="Toggle select menu"
aria-controls="menu"
aria-expanded=${this.open ? 'true' : 'false'}
?disabled=${this.disabled}
@click=${__classPrivateFieldGet$1(this, _Select_handleHandleClick, "f")}
>
<m-icon
id="caret"
aria-hidden="true"
name="caret-down"
size="12"
></m-icon>
</button>
</div>
<div
id="menu"
aria-labelledby="trigger"
role="listbox"
tabindex="-1"
aria-multiselectable=${this.isMultiple ? 'true' : 'false'}
>
<slot @slotchange=${__classPrivateFieldGet$1(this, _Select_handleSlotChange, "f")}></slot>
${this.filteredOptions.length === 0
? x `<m-box>No options.</m-box>`
: E$1}
</div>
`;
}
get dataSources() {
return __classPrivateFieldGet$1(this, _Select_dataSources, "f");
}
get trigger() {
return this.renderRoot?.querySelector('#trigger');
}
get leading() {
return this.renderRoot?.querySelector('#leading');
}
get tags() {
return this.renderRoot?.querySelector('#tags');
}
get isMultiple() {
return this.type === 'multiple';
}
get value() {
return __classPrivateFieldGet$1(this, _Select_controllers, "f").selection.value();
}
set value(value) {
__classPrivateFieldGet$1(this, _Select_handleValueChange, "f").call(this, this.getRawValue(value));
}
formDisabledCallback(disabled) {
this.disabled = disabled;
}
}
_Select_controllers = new WeakMap(), _Select_searchDebounce = new WeakMap(), _Select_dataSources = new WeakMap(), _Select_searchTerm = new WeakMap(), _Select_contextProvider = new WeakMap(), _Select_clearSearch = new WeakMap(), _Select_clearSearchDebounce = new WeakMap(), _Select_getKeyboardShortcuts = new WeakMap(), _Select_getOptionByValue = new WeakMap(), _Select_handleClear = new WeakMap(), _Select_handleClick = new WeakMap(), _Select_handleClickOutside = new WeakMap(), _Select_handleDisabledChange = new WeakMap(), _Select_handleHandleClick = new WeakMap(), _Select_handleSlotChange = new WeakMap(), _Select_handleStatusChange = new WeakMap(), _Select_handleTagRemove = new WeakMap(), _Select_handleTriggerChange = new WeakMap(), _Select_handleTriggerInput = new WeakMap(), _Select_handleTypeChange = new WeakMap(), _Select_handleValueChange = new WeakMap(), _Select_updateOptions = new WeakMap(), _Select_instances = new WeakSet(), _Select_initialize = function _Select_initialize(value) {
const firstOption = __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.queried?.[0];
if (!firstOption) {
logger$6.warn('No options found in the select');
return;
}
let consolidatedValue;
if (this.type === 'single-strict') {
/**
* In this case, we need to ensure there will always be a value;
* we do this by fallbacking to the first option's value.
*/
consolidatedValue = this.getRawValue(value || this.initialValue || firstOption.value);
}
else {
consolidatedValue = this.getRawValue(value || this.initialValue || null);
}
__classPrivateFieldGet$1(this, _Select_handleValueChange, "f").call(this, consolidatedValue);
}, _Select_updatePicker = function _Select_updatePicker() {
const values = __classPrivateFieldGet$1(this, _Select_controllers, "f").selection.value();
const tags = this.tags;
const trigger = this.trigger;
const leading = this.leading;
if (!tags || !trigger || !leading) {
logger$6.warn('Missing required elements to update the picker');
return;
}
// we clear the input in case there was a search query
trigger.value = '';
tags.innerHTML = '';
leading.innerHTML = '';
if (this.isMultiple) {
toArray(values).forEach((value) => {
const option = __classPrivateFieldGet$1(this, _Select_getOptionByValue, "f").call(this, value);
if (!option) {
logger$6.warn('Option not found for value', value);
return;
}
const tag = document.createElement('m-actionable-tag');
tag.variant = 'default';
tag.size = this.size === 'small' ? 'small' : 'default';
tag.removable = true;
tag.dataset.value = value;
tag.textContent = option.label;
tags.append(tag);
});
}
else {
trigger.value = toArray(values)
.map((value) => {
const option = __classPrivateFieldGet$1(this, _Select_getOptionByValue, "f").call(this, value);
if (!option) {
logger$6.warn('Option not found for value', value);
return null;
}
if (leading != null && !this.isMultiple && option.leading) {
leading.append(option.leading.cloneNode(true));
}
return option.label;
})
.filter(Boolean)
/**
* We know there's no need for the `join` here - since it's a single or single-strict selection -
* but this is just to leverage the value handling via the `toArray` utility.
*/
.join(', ');
}
};
/**
* The only reason we are making this component form-associated is to
* have access to the `formDisabledCallback`.
*
* @see {@link https://web.dev/articles/more-capable-form-controls#void_formdisabledcallbackdisabled|formDisabledCallback on web.dev}
*/
Select.formAssociated = true;
Select.styles = [selectStyles(), pickerStyles()];
Select.define();
function styles$9() {
return i$9 `
:host {
inline-size: var(--m-spinner-size);
block-size: var(--m-spinner-size);
}
:host svg {
height: 100%;
width: 100%;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
`;
}
const DEFAULT_SIZE$1 = 48;
class SpinnerWheel extends Component {
static get properties() {
return {
size: { type: String },
};
}
static define() {
Component.define({ name: 'm-spinner-wheel', constructor: SpinnerWheel });
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('size') && this.size != null) {
this.style.setProperty('--m-spinner-size', `${parseInt(String(this.size), 10) || DEFAULT_SIZE$1}px`);
}
}
render() {
return b$2 `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#CADBDD" fill-rule="evenodd" d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Zm0-10c7.732 0 14-6.268 14-14s-6.268-14-14-14-14 6.268-14 14 6.268 14 14 14Z" clip-rule="evenodd"/><path fill="url(#a)" d="M24 43.068c0 2.724-2.231 4.983-4.898 4.427a23.999 23.999 0 0 1 0-46.99C21.77-.051 24 2.208 24 4.932c0 2.723-2.273 4.852-4.833 5.783a14.135 14.135 0 0 0-5.163 23.28 14.135 14.135 0 0 0 5.163 3.29c2.56.93 4.833 3.06 4.833 5.783Z"/><defs><linearGradient id="a" x1="9.608" x2="44.189" y1="42.161" y2="7.59" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#00D7D7"/><stop offset="1" stop-color="#84F11E"/></linearGradient></defs></svg>`;
}
}
SpinnerWheel.styles = [styles$9()];
SpinnerWheel.define();
function stepsStyles() {
return [
i$9 `
:host {
--m-steps-circle-size: 24px;
display: flex;
flex-direction: column;
box-sizing: border-box;
gap: ${getToken$1('spacing-10')};
width: 100%;
}
::slotted(m-step) {
flex: 1;
}
.steps-container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
gap: ${getToken$1('spacing-10')};
}
`,
];
}
function stepStyles() {
return [
i$9 `
:host {
--m-steps-circle-margin-inline-end: 8px;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: ${getToken$1('spacing-4')};
}
:host(:is(:focus, :focus-within, :focus-visible)) {
outline: none;
}
.circle {
${typography('number-md')};
${transition([{ property: 'background-color' }])};
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--m-steps-circle-size);
block-size: var(--m-steps-circle-size);
line-height: var(--m-steps-circle-size);
border-radius: 50%;
background-color: ${getColor('color-neutral-40')};
color: ${getColor('color-text-inverted')};
}
.label {
${typography('body-md')};
display: flex;
align-items: center;
justify-content: center;
color: ${getColor('color-primary-60')};
}
:host(:not(:last-of-type))::after,
:host(:not(:first-of-type))::before {
${transition([{ property: 'background-color' }])};
content: '';
position: absolute;
display: inline-block;
block-size: 2px;
inline-size: 100%;
background-color: ${getColor('color-neutral-40')};
top: calc(var(--m-steps-circle-size) / 2);
}
:host::after {
/* half width of the container + half circle + distance between bar and circle */
left: calc(
50% + var(--m-steps-circle-size) / 2 +
var(--m-steps-circle-margin-inline-end)
);
}
:host::before {
right: calc(
50% + var(--m-steps-circle-size) / 2 +
var(--m-steps-circle-margin-inline-end)
);
}
:host([completed])::after {
background-color: ${getColor('color-primary-60')};
color: ${getColor('color-text-inverted')};
}
:host(:is([completed], [aria-current='step']))::before {
background-color: ${getColor('color-primary-60')};
color: ${getColor('color-text-inverted')};
}
m-icon[name='check'] {
display: none;
}
:host([completed]:not([aria-current='step'])) m-icon[name='check'] {
display: inline-flex;
}
:host(:is([aria-current='step'], [completed])) .circle {
background-color: ${getColor('color-primary-60')};
}
:host([aria-current='step']) .label {
${typography('body-md-bold')};
}
:host(:is([aria-current='step'], :not([completed]))) .label {
display: inline-flex;
}
`,
];
}
var _Steps_instances, _Steps_stepSequence, _Steps_getDefaultActive, _Steps_queryStep, _Steps_handleSlotChange, _Steps_findStepIndex, _Steps_onNextStep, _Steps_onPreviousStep, _Steps_onNavigateStep, _Steps_onCompleteStep;
class Steps extends Component {
constructor() {
super(...arguments);
_Steps_instances.add(this);
_Steps_stepSequence.set(this, []);
_Steps_getDefaultActive.set(this, () => {
return this.querySelector('m-step')?.name;
});
_Steps_queryStep.set(this, (name) => {
if (!name) {
return null;
}
return this.querySelector(`[name="${name}"]`);
});
_Steps_handleSlotChange.set(this, () => {
const steps = Array.from(this.querySelectorAll('m-step'));
__classPrivateFieldSet(this, _Steps_stepSequence, [], "f");
steps.forEach((step, index) => {
__classPrivateFieldGet$1(this, _Steps_stepSequence, "f").push(step.name);
step.setAttribute('order', String(index + 1));
});
this.requestUpdate();
});
_Steps_onNextStep.set(this, () => {
const activeStepIndex = __classPrivateFieldGet$1(this, _Steps_instances, "m", _Steps_findStepIndex).call(this, this.activeStep);
if (activeStepIndex === -1 ||
activeStepIndex >= __classPrivateFieldGet$1(this, _Steps_stepSequence, "f").length - 1) {
return;
}
const newActiveStepIndex = activeStepIndex + 1;
this.activeStep = __classPrivateFieldGet$1(this, _Steps_stepSequence, "f")[newActiveStepIndex];
this.emit('stepchange', { detail: { active: this.activeStep } });
});
_Steps_onPreviousStep.set(this, () => {
const activeStepIndex = __classPrivateFieldGet$1(this, _Steps_instances, "m", _Steps_findStepIndex).call(this, this.activeStep);
if (activeStepIndex <= 0) {
return;
}
const newActiveStepIndex = activeStepIndex - 1;
this.activeStep = __classPrivateFieldGet$1(this, _Steps_stepSequence, "f")[newActiveStepIndex];
this.emit('stepchange', { detail: { active: this.activeStep } });
});
_Steps_onNavigateStep.set(this, (event) => {
const { detail: { step }, } = event;
const newActiveStepIndex = __classPrivateFieldGet$1(this, _Steps_instances, "m", _Steps_findStepIndex).call(this, step);
if (newActiveStepIndex === -1 || step === this.activeStep) {
return;
}
this.activeStep = step;
this.emit('stepchange', { detail: { active: step } });
});
_Steps_onCompleteStep.set(this, () => {
const completedStep = __classPrivateFieldGet$1(this, _Steps_queryStep, "f").call(this, this.activeStep);
if (completedStep && completedStep.completed !== true) {
// TODO: should we check the all the previous steps are completed or trust the event emitter knows that?
completedStep.completed = true;
this.emit('stepchange', { detail: { completed: this.activeStep } });
}
});
}
static get properties() {
return {
activeStep: { type: String, attribute: 'active-step', reflect: true },
};
}
static define() {
Component.define({ name: 'm-steps', constructor: Steps });
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('navigatenext', __classPrivateFieldGet$1(this, _Steps_onNextStep, "f"));
this.addEventListener('navigateprevious', __classPrivateFieldGet$1(this, _Steps_onPreviousStep, "f"));
this.addEventListener('navigate', __classPrivateFieldGet$1(this, _Steps_onNavigateStep, "f"));
this.addEventListener('stepcomplete', __classPrivateFieldGet$1(this, _Steps_onCompleteStep, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('navigatenext', __classPrivateFieldGet$1(this, _Steps_onNextStep, "f"));
this.removeEventListener('navigateprevious', __classPrivateFieldGet$1(this, _Steps_onPreviousStep, "f"));
this.removeEventListener('navigate', __classPrivateFieldGet$1(this, _Steps_onNavigateStep, "f"));
this.removeEventListener('stepcomplete', __classPrivateFieldGet$1(this, _Steps_onCompleteStep, "f"));
}
update(changedProperties) {
super.update(changedProperties);
const previousActiveStep = __classPrivateFieldGet$1(this, _Steps_queryStep, "f").call(this, changedProperties.get('activeStep'));
if (previousActiveStep) {
previousActiveStep.removeAttribute('aria-current');
}
this.activeStep = this.activeStep ?? __classPrivateFieldGet$1(this, _Steps_getDefaultActive, "f").call(this);
const currentActiveStep = __classPrivateFieldGet$1(this, _Steps_queryStep, "f").call(this, this.activeStep);
if (currentActiveStep) {
currentActiveStep.setAttribute('tabindex', '0');
currentActiveStep.setAttribute('aria-current', 'step');
}
}
render() {
return x `<div class="steps-container">
<slot name="step" @slotchange=${__classPrivateFieldGet$1(this, _Steps_handleSlotChange, "f")}></slot>
</div>
<div class="content-container"><slot></slot></div>`;
}
}
_Steps_stepSequence = new WeakMap(), _Steps_getDefaultActive = new WeakMap(), _Steps_queryStep = new WeakMap(), _Steps_handleSlotChange = new WeakMap(), _Steps_onNextStep = new WeakMap(), _Steps_onPreviousStep = new WeakMap(), _Steps_onNavigateStep = new WeakMap(), _Steps_onCompleteStep = new WeakMap(), _Steps_instances = new WeakSet(), _Steps_findStepIndex = function _Steps_findStepIndex(name) {
if (!name) {
return -1;
}
return __classPrivateFieldGet$1(this, _Steps_stepSequence, "f").findIndex((value) => value === name);
};
Steps.styles = [stepsStyles()];
Steps.define();
class Step extends Component {
static get properties() {
return {
name: {
type: String,
reflect: true,
},
order: {
type: String,
},
completed: {
type: Boolean,
reflect: true,
},
'aria-current': {
type: Boolean,
},
};
}
static define() {
Component.define({ name: 'm-step', constructor: Step });
}
connectedCallback() {
super.connectedCallback();
this.slot = 'step';
}
render() {
const isActive = this.getAttribute('aria-current') === 'step';
return x `
<span class="circle">
${this.completed && !isActive ? E$1 : this.order}
<m-icon name="check" size="12"></m-icon>
</span>
<span class="label">
<slot></slot>
</span>
`;
}
}
Step.styles = [stepStyles()];
Step.define();
function styles$8() {
return [
i$9 `
:host {
${typography('body-md')};
${transition([
{
property: 'color',
},
])};
--m-switch-height: ${getToken$1('global-height-small')};
--m-switch-background-color: ${getColor('color-neutral-40')};
--m-switch-outline-color: ${getColor('color-primary-60')};
--m-switch-outline-offset: 2px;
--m-switch-thumb-width: 32px;
--m-switch-thumb-height: 16px;
--m-switch-circle-distance: 2px;
--m-switch-circle-size: calc(
var(--m-switch-thumb-height) - 2 * var(--m-switch-circle-distance)
);
contain: layout style;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: ${getToken$1('spacing-2')};
box-sizing: border-box;
min-block-size: 20px;
color: ${getColor('color-text-tertiary')};
line-height: normal;
}
:host([hidden]) {
display: none;
}
:host(:enabled:hover) {
color: ${getColor('color-text-primary')};
}
:host(:disabled) {
color: ${getColor('color-text-disabled')};
}
:host([size='large']) {
--m-switch-height: ${getToken$1('global-height-large')};
--m-switch-thumb-width: 40px;
--m-switch-thumb-height: 20px;
min-block-size: 24px;
}
#input,
#switch {
font-size: 100%;
line-height: 1;
}
#input {
outline: none;
box-sizing: border-box;
opacity: 0.00001;
z-index: 1;
cursor: pointer;
block-size: 100%;
inline-size: 100%;
margin: 0;
padding: 0;
position: absolute;
overflow: visible;
}
#switch {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--m-switch-background-color);
border-radius: calc(0.5 * var(--m-switch-thumb-height));
box-sizing: border-box;
block-size: var(--m-switch-thumb-height);
inline-size: var(--m-switch-thumb-width);
flex: 0 0 var(--m-switch-thumb-width);
outline: 1px solid transparent;
outline-offset: 2px;
${transition([
{
property: 'outline-color',
},
{ property: 'background-color' },
])};
}
#switch::after {
${transition([{ property: 'left' }])};
content: '';
display: block;
position: absolute;
block-size: var(--m-switch-circle-size);
inline-size: var(--m-switch-circle-size);
border-radius: 50%;
background-color: ${getColor('color-background-primary')};
left: var(--m-switch-circle-distance);
top: var(--m-switch-circle-distance);
}
#label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#input:checked ~ #switch {
background-color: ${getColor('color-primary-60')};
border-color: ${getColor('color-primary-60')};
}
#input:enabled:hover ~ #switch {
border-color: ${getColor('color-primary-100')};
}
#input:enabled:focus ~ #switch {
outline-color: ${getColor('color-primary-60')};
}
#input:checked:enabled:hover ~ #switch {
background-color: ${getColor('color-primary-100')};
}
#input:checked ~ #switch::after {
left: calc(
100% - var(--m-switch-circle-size) - var(--m-switch-circle-distance)
);
}
#input:disabled {
cursor: default;
}
#input:disabled ~ #switch {
background-color: ${getColor('color-background-tertiary')};
}
#input:checked:disabled ~ #switch {
background-color: ${getColor('color-primary-20')};
border-color: ${getColor('color-primary-20')};
}
`,
];
}
var _Switch_instances, _Switch_initialize, _Switch_handleCheckedChange, _Switch_handleDisabledChange, _Switch_handleInternalClick, _Switch_handleHostClick, _Switch_handleChange;
class Switch extends WithFormComponentMixin(Component) {
constructor() {
super(...arguments);
_Switch_instances.add(this);
_Switch_handleCheckedChange.set(this, (checked) => {
/**
* As the input won't be rendered yet by the time
* the react wrapper calls the setter,
* we need this so we can hydrate the input with the proper
* `checked` value.
*/
this.toggleAttribute('checked', checked);
if (this.input) {
this.input.checked = checked;
/**
* "The ARIA switch role is functionally identical to the checkbox role, except that
* instead of representing "checked" and "unchecked" states, which are fairly generic
* in meaning, the switch role represents the states "on" and "off."
* @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role|Switch role}
*/
this.setFormValue(checked ? 'on' : 'off');
}
});
_Switch_handleDisabledChange.set(this, (disabled) => {
this.disabled = disabled;
if (this.input) {
this.input.disabled = disabled;
}
});
/**
* This handler will kick in when the user clicks the checkbox.
*/
_Switch_handleInternalClick.set(this, (event) => {
if (this.disabled) {
event.preventDefault();
return;
}
/**
* Do **NOT** remove this event.stopPropagation() because it will cause
* the `#handleHostClick` to` enter an infinite loop, if called.
*/
event.stopPropagation();
__classPrivateFieldGet$1(this, _Switch_handleCheckedChange, "f").call(this, this.checked);
});
/**
* This handler is here FOR TESTING PURPOSES ONLY, so we manually
* forward the click on the host to the checkbox input.
*
* Based on https://github.com/adobe/spectrum-web-components/blob/main/packages/checkbox/src/Checkbox.ts;
*/
_Switch_handleHostClick.set(this, () => {
this.input?.click();
});
_Switch_handleChange.set(this, (event) => {
if (this.disabled) {
event.preventDefault();
return;
}
this.reemit(event);
});
}
static get properties() {
return {
...super.properties,
checked: { type: Boolean, reflect: true },
initialChecked: { type: Boolean, attribute: 'initial-checked' },
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-switch', constructor: Switch });
}
createRenderRoot() {
const root = super.createRenderRoot();
/**
* We add the event listener to the shadow root because `change` event is not
* composed, so it will not bubble outside the host.
*/
root.addEventListener('change', __classPrivateFieldGet$1(this, _Switch_handleChange, "f"));
return root;
}
async connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Switch_handleHostClick, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _Switch_instances, "m", _Switch_initialize).call(this, this.hasAttribute('checked') || this.hasAttribute('initial-checked'));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Switch_handleHostClick, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Switch_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
}
render() {
return x `
<input
id="input"
type="checkbox"
role="switch"
name="${o$3(this.name)}"
@click=${__classPrivateFieldGet$1(this, _Switch_handleInternalClick, "f")}
/>
<span id="switch"></span>
<label id="label" for="input">
<slot></slot>
</label>
`;
}
get input() {
return this.renderRoot?.querySelector('#input') ?? null;
}
set checked(checked) {
__classPrivateFieldGet$1(this, _Switch_handleCheckedChange, "f").call(this, checked);
}
get checked() {
return Boolean(this.input?.checked);
}
formResetCallback() {
__classPrivateFieldGet$1(this, _Switch_instances, "m", _Switch_initialize).call(this);
}
formStateRestoreCallback(state) {
if (state != null) {
this.checked = Boolean(state);
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _Switch_handleDisabledChange, "f").call(this, disabled);
}
}
_Switch_handleCheckedChange = new WeakMap(), _Switch_handleDisabledChange = new WeakMap(), _Switch_handleInternalClick = new WeakMap(), _Switch_handleHostClick = new WeakMap(), _Switch_handleChange = new WeakMap(), _Switch_instances = new WeakSet(), _Switch_initialize = function _Switch_initialize(checked) {
__classPrivateFieldGet$1(this, _Switch_handleCheckedChange, "f").call(this, checked ?? this.hasAttribute('initial-checked'));
};
Switch.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
Switch.styles = [styles$8()];
Switch.define();
function tableStyles$1() {
return i$9 `
:host {
--m-table-cell-height: 52px;
--m-table-border-radius: ${getToken$1('border-radius-s')};
--m-table-border-top-left-radius: var(--m-table-border-radius);
--m-table-border-top-right-radius: var(--m-table-border-radius);
--m-table-border-bottom-left-radius: var(--m-table-border-radius);
--m-table-border-bottom-right-radius: var(--m-table-border-radius);
display: flex;
flex-direction: column;
width: 100%;
border-collapse: collapse;
border-style: solid;
border-start-start-radius: var(--m-table-border-top-left-radius);
border-start-end-radius: var(--m-table-border-top-right-radius);
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
border-width: ${getToken$1('border-thin')};
border-color: ${getColor('color-border')};
background-color: ${getColor('color-background-primary')};
}
::slotted(:not(:first-child)) {
border-top: ${getToken$1('border-thin')} solid ${getColor('color-divider')};
}
::slotted(:first-child) {
border-start-start-radius: var(--m-table-border-top-left-radius);
border-start-end-radius: var(--m-table-border-top-right-radius);
}
::slotted(:last-child) {
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
}
.overflow-wrapper {
display: flex;
overflow-x: auto;
}
.table {
display: table;
width: 100%;
}
:host([size='small']) {
--m-table-cell-height: 32px;
${typography('body-sm')};
}
:host([size='default']) {
--m-table-cell-height: 52px;
${typography('body-md')};
}
:host([size='large']) {
--m-table-cell-height: 86px;
${typography('body-md')};
}
`;
}
function tableToolbarStyles$1() {
return i$9 `
:host {
padding: ${getToken$1('spacing-4')};
}
`;
}
function tableHeadStyles$1() {
return i$9 `
:host {
--m-table-cell-height: 44px;
display: table-header-group;
background-color: ${getColor('color-background-secondary')};
}
slot[name='table-row']::slotted(*) {
${typography('table-header-sm')};
color: ${getColor('color-text-tertiary')};
}
`;
}
function tableBodyStyles$1() {
return i$9 `
:host {
display: table-row-group;
}
slot[name='table-row']::slotted(*) {
background-color: ${getColor('color-background-primary')};
color: ${getColor('color-text-primary')};
}
slot[name='table-row']::slotted(*:hover) {
background-color: ${getColor('color-background-tertiary')};
}
::slotted(*:not(:first-child, :only-child)) {
border-top: ${getToken$1('border-thin')} solid ${getColor('color-divider')};
}
`;
}
function tableFootStyles$1() {
return i$9 `
:host {
--m-table-cell-height: 44px;
display: table-footer-group;
background-color: ${getColor('color-background-secondary')};
}
slot[name='table-row']::slotted(*) {
${typography('table-header-sm')};
color: ${getColor('color-text-tertiary')};
}
`;
}
function tableRowStyles$1() {
return i$9 `
:host {
display: table-row;
}
.is-selected::slotted(*) {
background-color: ${getColor('color-background-highlight')};
}
`;
}
function tableCellStyles$1() {
return i$9 `
:host {
--m-table-cell-text-align: left;
--m-table-cell-vertical-align: middle;
display: table-cell;
box-sizing: border-box;
height: var(--m-table-cell-height);
padding-inline-start: ${getToken$1('spacing-4')};
padding-inline-end: ${getToken$1('spacing-4')};
vertical-align: var(--m-table-cell-vertical-align);
text-align: var(--m-table-cell-text-align);
}
`;
}
function tableHeadCellStyles$1() {
return [
tableCellStyles$1(),
i$9 `
:host {
white-space: nowrap;
}
:host([sortable]:not([disabled])) {
cursor: pointer;
}
m-icon {
color: ${getColor('color-text-primary')};
margin-left: ${getToken$1('spacing-2')};
}
:host([disabled]) {
color: ${getColor('color-text-disabled')};
}
:host([disabled]) m-icon {
color: ${getColor('color-text-disabled')};
}
`,
];
}
function tableActionsStyles$1() {
return i$9 `
:host {
background-color: ${getColor('color-background-primary')};
margin-top: auto;
}
::slotted(*:not(:first-child)) {
border-top: ${getToken$1('border-thin')} solid ${getColor('color-divider')};
}
::slotted(:last-child) {
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
}
::slotted(m-pagination) {
--m-pagination-border-width: ${getToken$1('border-none')};
--m-pagination-border-bottom-left-radius: var(
--m-table-border-bottom-left-radius
);
--m-pagination-border-bottom-right-radius: var(
--m-table-border-bottom-right-radius
);
}
:host([sticky]) {
position: sticky;
bottom: 0;
z-index: 1;
}
`;
}
function tableSelectionCellStyles() {
return i$9 `
:host {
width: 52px;
}
`;
}
const tableContext$1 = n$4(Symbol('table'));
const TABLE_SELECT_ROW_EVENT = 'table-select-row';
const TABLE_REGISTER_ROWS_EVENT = 'table-register-rows';
const TABLE_SELECT_EVENT$1 = 'select';
const logger$5 = createLogger('table');
const defaultTableProps$1 = {
size: 'default',
};
let Table$1 = class Table extends WithSelectionControlMixin(Component) {
static get properties() {
return {
role: { type: String, reflect: true },
size: { type: String, reflect: true },
initialSelection: { type: Array },
};
}
static define() {
Component.define({ name: 'm-table', constructor: Table });
}
constructor() {
super();
this.provider = new i$5(this, {
context: tableContext$1,
initialValue: {
selection: new Set([]),
rows: new Set([]),
},
});
this.handleCopy = (event) => {
// Don't prevent default if the event originated from an input/textarea
if (event.target instanceof HTMLElement &&
['INPUT', 'TEXTAREA', 'M-TEXT-FIELD', 'M-TEXT-AREA'].includes(event.target.tagName)) {
return;
}
event.preventDefault();
const selection = window.getSelection();
const rows = Array.from(this.querySelectorAll('m-table-row'));
/**
* Formats complex cell content for copying
*/
const formatCellContent = (content = '') => {
// Remove excessive whitespace and normalize line breaks
return content
.replace(/\s+/g, ' ')
.replace(/[\n\r]+/g, ' ')
.trim();
};
const totalColumns = Array.from(rows[0]?.querySelectorAll('m-table-cell, m-table-head-cell') || []).reduce((sum, cell) => sum + (parseInt(cell.getAttribute('colspan') ?? '', 10) || 1), 0);
try {
const tableData = rows
.map((row) => {
const cells = Array.from(row.querySelectorAll('m-table-cell, m-table-head-cell'));
const rowData = [];
cells.forEach((cell) => {
if (!selection?.containsNode(cell, true)) {
// Add empty cells for unselected content to maintain structure
const colspan = parseInt(cell.getAttribute('colspan') ?? '', 10) || 1;
for (let i = 0; i < colspan; i++) {
rowData.push('');
}
return;
}
const content = formatCellContent(cell.textContent ?? '');
const colspan = parseInt(cell.getAttribute('colspan') ?? '', 10) || 1;
rowData.push(content);
// Add empty strings for remaining colspan cells to maintain structure
for (let i = 1; i < colspan; i++) {
rowData.push('');
}
});
while (rowData.length < totalColumns) {
rowData.push('');
}
return rowData;
})
.filter((row) => row.some((cell) => cell !== ''));
const tsvContent = tableData.map((row) => row.join('\t')).join('\n');
event.clipboardData?.setData('text/plain', tsvContent);
}
catch (error) {
logger$5.error('Error copying table data', error);
}
};
/**
* TODO: This component is in reality a container that includes a table, not the table itself.
* We move this role to the table itself for the next major release to avoid breaking changes.
*/
this.role = 'table';
this.size = defaultTableProps$1.size;
this.selectionController = new SelectionController$1(this, {
getSelectionType: () => 'multiple',
});
}
connectedCallback() {
super.connectedCallback();
this.addEventListener(TABLE_REGISTER_ROWS_EVENT, this.registerRows);
this.addEventListener(TABLE_SELECT_ROW_EVENT, this.handleRowSelection);
this.addEventListener('copy', this.handleCopy);
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener(TABLE_REGISTER_ROWS_EVENT, this.registerRows);
this.removeEventListener(TABLE_SELECT_ROW_EVENT, this.handleRowSelection);
this.removeEventListener('copy', this.handleCopy);
}
firstUpdated() {
this.selectionController.init(this.initialSelection || []);
if (this.initialSelection) {
this.provider.setValue({
...this.provider.value,
selection: new Set(this.initialSelection),
});
}
}
emitEvent() {
this.emit(TABLE_SELECT_EVENT$1, {
detail: {
value: this.selectionController.value() || [],
},
});
}
updateProviderSelection() {
this.provider.setValue({
...this.provider.value,
selection: this.selectionController.selection,
});
}
registerRows(event) {
const { detail } = event;
this.provider.setValue({
...this.provider.value,
rows: new Set(detail.value),
});
}
handleRowSelection(event) {
const { detail } = event;
if (detail.type === 'toggle') {
this.selectionController.toggle(detail.value);
}
else if (detail.type === 'toggle-all') {
if (detail.value) {
this.selectionController.select(Array.from(this.provider.value.rows));
}
else {
this.selectionController.unselect(Array.from(this.provider.value.rows));
}
}
this.updateProviderSelection();
this.emitEvent();
}
render() {
return x `
<slot name="table-toolbar"></slot>
<div class="overflow-wrapper">
<div class="table">
<slot name="table-head"></slot>
<slot name="table-body"></slot>
<slot name="table-foot"></slot>
</div>
</div>
<slot name="table-feedback"></slot>
<slot name="table-actions"></slot>
`;
}
};
Table$1.styles = [tableStyles$1()];
Table$1.define();
let TableHead$1 = class TableHead extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-head', constructor: TableHead });
}
constructor() {
super();
this.slot = 'table-head';
this.role = 'rowgroup';
}
render() {
return x `<slot name="table-row"></slot>`;
}
};
TableHead$1.styles = [tableHeadStyles$1()];
TableHead$1.define();
var _TableHeadCell_instances$1, _TableHeadCell_isSortable$1, _TableHeadCell_isDisabled$1, _TableHeadCell_getSortIcon$1, _TableHeadCell_handleClick$1;
const defaultTableHeadCellProps$1 = {
alignment: 'left',
verticalAlign: 'middle',
sortable: false,
sortDirection: undefined,
disabled: false,
};
let TableHeadCell$1 = class TableHeadCell extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
alignment: { type: String },
verticalAlign: { type: String, attribute: 'vertical-align' },
columnId: { type: String, attribute: 'column-id' },
sortable: { type: Boolean, reflect: true },
sortDirection: { type: String, attribute: 'sort-direction' },
disabled: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-head-cell', constructor: TableHeadCell });
}
constructor() {
super();
_TableHeadCell_instances$1.add(this);
_TableHeadCell_isSortable$1.set(this, () => Boolean(this.sortable));
_TableHeadCell_isDisabled$1.set(this, () => Boolean(this.disabled));
_TableHeadCell_handleClick$1.set(this, () => {
if (__classPrivateFieldGet$1(this, _TableHeadCell_isDisabled$1, "f").call(this) || !__classPrivateFieldGet$1(this, _TableHeadCell_isSortable$1, "f").call(this)) {
return;
}
// Default sorting cycle: none -> asc -> desc -> none -> ...
let nextSortDirection = 'asc';
if (this.sortDirection === 'asc') {
nextSortDirection = 'desc';
}
else if (this.sortDirection === 'desc') {
nextSortDirection = undefined;
}
this.emit('columnsort', {
detail: {
columnId: this.columnId,
sortDirection: nextSortDirection,
},
});
});
this.slot = 'table-cell';
this.role = 'columnheader';
this.alignment = defaultTableHeadCellProps$1.alignment;
this.verticalAlign = defaultTableHeadCellProps$1.verticalAlign;
this.sortable = defaultTableHeadCellProps$1.sortable;
this.sortDirection = defaultTableHeadCellProps$1.sortDirection;
this.disabled = defaultTableHeadCellProps$1.disabled;
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _TableHeadCell_handleClick$1, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _TableHeadCell_handleClick$1, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('alignment')) {
this.style.setProperty('--m-table-cell-text-align', this.alignment ?? defaultTableHeadCellProps$1.alignment);
}
if (changedProperties.has('verticalAlign')) {
this.style.setProperty('--m-table-cell-vertical-align', this.verticalAlign ?? defaultTableHeadCellProps$1.verticalAlign);
}
}
render() {
if (__classPrivateFieldGet$1(this, _TableHeadCell_isSortable$1, "f").call(this)) {
return x `
<slot></slot>
<m-icon name="${__classPrivateFieldGet$1(this, _TableHeadCell_instances$1, "m", _TableHeadCell_getSortIcon$1).call(this)}" size="12"></m-icon>
`;
}
return x `<slot></slot>`;
}
};
_TableHeadCell_isSortable$1 = new WeakMap(), _TableHeadCell_isDisabled$1 = new WeakMap(), _TableHeadCell_handleClick$1 = new WeakMap(), _TableHeadCell_instances$1 = new WeakSet(), _TableHeadCell_getSortIcon$1 = function _TableHeadCell_getSortIcon() {
switch (this.sortDirection) {
case 'asc': {
return 'arrow-sort-up';
}
case 'desc': {
return 'arrow-sort-down';
}
default: {
return 'arrow-sort-up-down';
}
}
};
TableHeadCell$1.styles = [tableHeadCellStyles$1()];
TableHeadCell$1.define();
var _TableBody_handleSlotChange;
let TableBody$1 = class TableBody extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-body', constructor: TableBody });
}
constructor() {
super();
_TableBody_handleSlotChange.set(this, () => {
const rowsSlot = this.renderRoot.querySelector('slot[name="table-row"]');
const rows = rowsSlot
.assignedElements({
flatten: true,
})
.filter((element) => {
return element.matches('m-table-row');
});
const values = rows
.map((row) => row.getValue())
.filter((value) => value != null);
this.emit(TABLE_REGISTER_ROWS_EVENT, {
detail: { value: values },
composed: false,
});
});
this.slot = 'table-body';
this.role = 'rowgroup';
}
render() {
return x `<slot
name="table-row"
@slotchange=${__classPrivateFieldGet$1(this, _TableBody_handleSlotChange, "f")}
></slot>`;
}
};
_TableBody_handleSlotChange = new WeakMap();
TableBody$1.styles = [tableBodyStyles$1()];
TableBody$1.define();
let TableFoot$1 = class TableFoot extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-foot', constructor: TableFoot });
}
constructor() {
super();
this.slot = 'table-foot';
this.role = 'rowgroup';
}
render() {
return x `<slot name="table-row"></slot>`;
}
};
TableFoot$1.styles = [tableFootStyles$1()];
TableFoot$1.define();
let TableRow$1 = class TableRow extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-row', constructor: TableRow });
}
constructor() {
super();
this.table = new s$4(this, {
context: tableContext$1,
subscribe: true,
});
this.slot = 'table-row';
this.role = 'row';
}
getValue() {
return this.querySelector('m-table-selection-cell')?.getAttribute('value');
}
isSelected() {
const value = this.getValue();
return Boolean(value && this.table.value?.selection.has(value));
}
render() {
return x `<slot
class=${e$1({
'is-selected': this.isSelected(),
})}
name="table-cell"
></slot>`;
}
};
TableRow$1.styles = [tableRowStyles$1()];
TableRow$1.define();
function isHead(element) {
return element.closest('m-table-head') != null;
}
function isFoot(element) {
return element.closest('m-table-foot') != null;
}
const defaultTableCellProps$1 = {
alignment: 'left',
verticalAlign: 'middle',
};
let TableCell$1 = class TableCell extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
alignment: { type: String },
verticalAlign: { type: String, attribute: 'vertical-align' },
};
}
static define() {
Component.define({ name: 'm-table-cell', constructor: TableCell });
}
constructor() {
super();
this.slot = 'table-cell';
this.alignment = defaultTableCellProps$1.alignment;
this.verticalAlign = defaultTableCellProps$1.verticalAlign;
}
/**
* TODO: This role validation is not necessary anymore since we have a dedicated table-head-cell now.
* We can remove it for the next major release to avoid breaking changes.
*/
firstUpdated() {
this.role = isHead(this) ? 'columnheader' : 'cell';
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('alignment')) {
this.style.setProperty('--m-table-cell-text-align', this.alignment ?? defaultTableCellProps$1.alignment);
}
if (changedProperties.has('verticalAlign')) {
this.style.setProperty('--m-table-cell-vertical-align', this.verticalAlign ?? defaultTableCellProps$1.verticalAlign);
}
}
render() {
return x `<slot></slot>`;
}
};
TableCell$1.styles = [tableCellStyles$1()];
TableCell$1.define();
class TableToolbar extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-toolbar', constructor: TableToolbar });
}
constructor() {
super();
this.slot = 'table-toolbar';
}
render() {
return x `<slot></slot>`;
}
}
TableToolbar.styles = [tableToolbarStyles$1()];
TableToolbar.define();
class TableFeedback extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-feedback', constructor: TableFeedback });
}
constructor() {
super();
this.slot = 'table-feedback';
}
render() {
return x `<slot></slot>`;
}
}
TableFeedback.define();
class TableActions extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
sticky: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-actions', constructor: TableActions });
}
constructor() {
super();
this.slot = 'table-actions';
}
render() {
return x `<slot></slot>`;
}
}
TableActions.styles = [tableActionsStyles$1()];
TableActions.define();
class TableSelectionCell extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
value: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-table-selection-cell',
constructor: TableSelectionCell,
});
}
constructor() {
super();
this.table = new s$4(this, {
context: tableContext$1,
subscribe: true,
});
this.slot = 'table-cell';
this.isHeading = false;
}
firstUpdated() {
this.isHeading = isHead(this) || isFoot(this);
this.role = isHead(this) ? 'columnheader' : 'cell';
}
handleSelect(event) {
let detail;
if (this.isHeading) {
detail = {
value: event.target.checked,
type: 'toggle-all',
};
}
else {
detail = { value: this.value, type: 'toggle' };
}
this.emit(TABLE_SELECT_ROW_EVENT, {
detail,
composed: false,
});
}
isChecked() {
return Boolean(this.table.value?.selection.has(this.value));
}
isHeadingDisabled() {
return !this.table.value?.rows.size;
}
getHeadingCheckStatus() {
const { rows, selection } = this.table.value || {};
if (!selection?.size) {
return 'unchecked';
}
const allChecked = Array.from(rows || []).every((row) => selection.has(row));
return allChecked ? 'checked' : 'indeterminate';
}
render() {
if (this.isHeading) {
const checkStatus = this.getHeadingCheckStatus();
return x `<m-checkbox
?disabled=${this.isHeadingDisabled()}
?indeterminate=${checkStatus === 'indeterminate'}
?checked=${checkStatus === 'checked'}
@change=${this.handleSelect}
></m-checkbox>`;
}
return x `<m-checkbox
@change=${this.handleSelect}
?checked=${this.isChecked()}
></m-checkbox>`;
}
}
TableSelectionCell.styles = [tableCellStyles$1(), tableSelectionCellStyles()];
TableSelectionCell.define();
const tableContext = n$4(Symbol('table'));
const tableRowContext = n$4(Symbol('table-row'));
const TABLE_SELECT_EVENT = 'select';
const TABLE_EXPAND_EVENT = 'expand';
const TABLE_COLLAPSE_EVENT = 'collapse';
function tableStyles() {
return [
i$9 `
:host {
--m-table-border-width: ${getToken$1('border-thin')};
--m-table-border-radius: ${getToken$1('border-radius-s')};
--m-table-border-top-left-radius: var(--m-table-border-radius);
--m-table-border-top-right-radius: var(--m-table-border-radius);
--m-table-border-bottom-left-radius: var(--m-table-border-radius);
--m-table-border-bottom-right-radius: var(--m-table-border-radius);
--m-table-row-selected-background-color: ${getColor('color-background-primary')};
--m-table-row-hovered-background-color: ${getColor('color-background-primary')};
--m-table-cell-padding-x: ${getToken$1('spacing-4')};
--m-table-cell-padding-y: 0;
--m-table-cell-color: ${getColor('color-text-primary')};
--m-table-cell-height: 52px;
display: block;
width: 100%;
overflow: auto;
}
.table-container {
display: block;
width: max-content;
min-width: 100%;
box-sizing: border-box;
border-width: var(--m-table-border-width);
border-style: solid;
border-color: ${getColor('color-border')};
border-top-left-radius: var(--m-table-border-top-left-radius);
border-top-right-radius: var(--m-table-border-top-right-radius);
border-bottom-left-radius: var(--m-table-border-bottom-left-radius);
border-bottom-right-radius: var(--m-table-border-bottom-right-radius);
}
:host([size='small']) {
--m-table-cell-height: 32px;
${typography('body-sm')};
}
:host([size='default']) {
--m-table-cell-height: 52px;
${typography('body-md')};
}
:host([size='large']) {
--m-table-cell-height: 86px;
${typography('body-md')};
}
::slotted(*) {
--m-table-border-top-left-radius: 0;
--m-table-border-top-right-radius: 0;
--m-table-border-bottom-left-radius: 0;
--m-table-border-bottom-right-radius: 0;
}
::slotted(:first-child) {
--m-table-border-top-left-radius: var(--m-table-border-radius);
--m-table-border-top-right-radius: var(--m-table-border-radius);
}
::slotted(:last-child) {
--m-table-border-bottom-left-radius: var(--m-table-border-radius);
--m-table-border-bottom-right-radius: var(--m-table-border-radius);
}
`,
];
}
function tableHeadStyles() {
return [
i$9 `
:host {
--m-table-row-background-color: ${getColor('color-background-secondary')};
display: block;
width: max-content;
min-width: 100%;
flex-shrink: 0;
}
.header-container {
display: contents;
}
::slotted(m-table-row-v2) {
--m-table-row-border-bottom-width: 1px;
--m-table-row-border-top-width: 0px;
}
`,
];
}
function tableBodyStyles() {
return [
i$9 `
:host {
--m-table-row-selected-background-color: ${getColor('color-background-highlight')};
--m-table-row-hovered-background-color: ${getColor('color-background-tertiary')};
--m-table-row-background-color: ${getColor('color-background-primary')};
display: block;
width: max-content;
min-width: 100%;
}
.body-container {
display: contents;
}
::slotted(*) {
--m-table-border-top-left-radius: 0;
--m-table-border-top-right-radius: 0;
--m-table-border-bottom-left-radius: 0;
--m-table-border-bottom-right-radius: 0;
}
::slotted(:first-child) {
--m-table-border-top-left-radius: inherit;
--m-table-border-top-right-radius: inherit;
}
::slotted(:last-child) {
--m-table-border-bottom-left-radius: inherit;
--m-table-border-bottom-right-radius: inherit;
}
`,
];
}
function tableFootStyles() {
return [
i$9 `
:host {
--m-table-row-background-color: ${getColor('color-background-secondary')};
--m-table-border-top-left-radius: 0;
--m-table-border-top-right-radius: 0;
display: block;
width: max-content;
min-width: 100%;
flex-shrink: 0;
}
.footer-container {
display: contents;
}
::slotted(m-table-row-v2) {
--m-table-row-border-top-width: 1px;
--m-table-row-border-bottom-width: 0px;
}
`,
];
}
function tableRowStyles() {
return [
i$9 `
:host {
--m-table-row-max-height: 500px;
--m-table-row-border-top-width: 0px;
--m-table-row-border-bottom-width: 1px;
display: block;
width: max-content;
min-width: 100%;
border-bottom-width: var(--m-table-row-border-bottom-width);
border-bottom-style: solid;
border-bottom-color: ${getColor('color-divider')};
border-top-width: var(--m-table-row-border-top-width);
border-top-style: solid;
border-top-color: ${getColor('color-divider')};
border-top-left-radius: var(--m-table-border-top-left-radius);
border-top-right-radius: var(--m-table-border-top-right-radius);
border-bottom-left-radius: var(--m-table-border-bottom-left-radius);
border-bottom-right-radius: var(--m-table-border-bottom-right-radius);
}
:host(:last-child) {
--m-table-row-border-bottom-width: 0px;
}
#row-container {
display: grid;
position: relative;
width: max-content;
min-width: 100%;
box-sizing: border-box;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
#row-container.is-selected {
--m-table-row-background-color: var(
--m-table-row-selected-background-color
);
}
#row-container.is-hovered {
--m-table-row-background-color: var(
--m-table-row-hovered-background-color
);
}
#row-container *,
#expansion-container * {
border-radius: 0;
}
#row-container *:first-child,
#expansion-container *:first-child {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
#row-container *:last-child,
#expansion-container *:last-child {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
#row-controls {
${transition([{ property: 'background-color' }])};
display: flex;
flex-flow: row nowrap;
align-items: center;
max-block-size: var(--m-table-cell-height);
padding-inline-start: var(--m-table-cell-padding-x);
gap: ${getToken$1('spacing-3')};
background-color: var(--m-table-row-background-color);
}
#cells-container {
${transition([{ property: 'background-color' }])};
display: grid;
background-color: var(--m-table-row-background-color);
}
#expansion-container {
position: relative;
grid-column: 1 / -1;
display: grid;
max-height: 0;
overflow: hidden;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
background-color: ${getColor('color-background-primary')};
pointer-events: none;
${transition([{ property: 'box-shadow' }])};
}
#expansion-container slot[name='expansion']::slotted(*) {
${transition([{ property: 'opacity' }])};
opacity: 0;
}
#expansion-container.is-expanded {
pointer-events: auto;
max-height: var(--m-table-row-max-height);
}
@media (prefers-reduced-motion: no-preference) {
#row-container {
${transition([{ property: 'box-shadow', easing: 'ease-out' }])};
}
#expansion-container {
${transition([{ property: 'max-height', easing: 'ease-out' }])};
}
#expansion-container.is-expanded {
${transition([{ property: 'max-height', easing: 'ease-in' }])};
}
}
#expansion-container.is-expanded slot[name='expansion']::slotted(*) {
opacity: 1;
}
#row-container.is-expanded {
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
z-index: 1;
}
`,
];
}
function tableControlExpandStyles() {
return [
i$9 `
:host {
display: inline-flex;
align-items: center;
}
.expand-button.-is-expanded #caret {
transform: rotate(180deg);
}
`,
i$9 `
:host([hidden]) {
display: unset;
visibility: hidden;
}
`,
];
}
function tableControlSelectStyles() {
return [
styles$s(),
i$9 `
:host {
display: inline-flex;
align-items: center;
}
:host([hidden]) {
display: unset;
visibility: hidden;
}
`,
];
}
function tableCellStyles() {
return [
i$9 `
:host {
--m-table-cell-align: center;
--m-table-cell-justify: flex-start;
--m-table-cell-text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
grid-column: span var(--colspan, 1);
width: 100%;
padding-inline: var(--m-table-cell-padding-x);
padding-block: var(--m-table-cell-padding-y);
color: var(--m-table-cell-color);
}
:host([colspan]) {
grid-column: span var(--colspan, 1);
}
:host([role='columnheader']) {
${typography('table-header-sm')};
block-size: 44px;
color: ${getColor('color-text-tertiary')};
}
:host([role='cell']) {
${typography('body-md')};
color: ${getColor('color-text-primary')};
min-block-size: var(--m-table-cell-height);
}
.cell-container {
width: 100%;
display: flex;
flex-flow: row wrap;
gap: ${getToken$1('spacing-2')};
align-items: var(--m-table-cell-align);
justify-content: var(--m-table-cell-justify);
text-align: var(--m-table-cell-text-align);
}
:host([text-align='left']) {
--m-table-cell-text-align: left;
}
:host([text-align='center']) {
--m-table-cell-text-align: center;
}
:host([text-align='right']) {
--m-table-cell-text-align: right;
}
:host([align='baseline']) {
--m-table-cell-align: baseline;
}
:host([align='center']) {
--m-table-cell-align: center;
}
:host([align='flex-end']) {
--m-table-cell-align: flex-end;
}
:host([align='flex-start']) {
--m-table-cell-align: flex-start;
}
:host([align='space-around']) {
--m-table-cell-align: space-around;
}
:host([align='space-between']) {
--m-table-cell-align: space-between;
}
:host([align='space-evenly']) {
--m-table-cell-align: space-evenly;
}
:host([align='stretch']) {
--m-table-cell-align: stretch;
}
:host([justify='baseline']) {
--m-table-cell-justify: baseline;
}
:host([justify='center']) {
--m-table-cell-justify: center;
}
:host([justify='flex-end']) {
--m-table-cell-justify: flex-end;
}
:host([justify='flex-start']) {
--m-table-cell-justify: flex-start;
}
:host([justify='space-around']) {
--m-table-cell-justify: space-around;
}
:host([justify='space-between']) {
--m-table-cell-justify: space-between;
}
:host([justify='space-evenly']) {
--m-table-cell-justify: space-evenly;
}
:host([justify='stretch']) {
--m-table-cell-justify: stretch;
}
`,
];
}
function tableHeadCellStyles() {
return [
tableCellStyles(),
i$9 `
:host {
white-space: nowrap;
}
:host([sortable]:not([disabled])) {
cursor: pointer;
}
m-icon {
color: ${getColor('color-text-primary')};
margin-left: ${getToken$1('spacing-2')};
}
:host([disabled]) {
color: ${getColor('color-text-disabled')};
}
:host([disabled]) m-icon {
color: ${getColor('color-text-disabled')};
}
`,
];
}
var _Table_instances, _Table_controllers, _Table_provider, _Table_extractGridColumns, _Table_emitExpandEvent, _Table_emitCollapseEvent, _Table_emitSelectEvent, _Table_getAvailableValues, _Table_handleCopy, _Table_handleSelect, _Table_handleUnselect, _Table_handleSelectAllRows, _Table_handleUnselectAllRows, _Table_handleExpand, _Table_handleCollapse, _Table_updateContext;
const logger$4 = createLogger('table');
const defaultTableProps = {
size: 'default',
};
class Table extends WithSelectionControlMixin(Component) {
static get properties() {
return {
role: { type: String, reflect: true },
size: { type: String, reflect: true },
selectable: { type: Boolean, reflect: true },
expandable: { type: Boolean, reflect: true },
initialSelected: {
type: String,
attribute: 'initial-selected',
fromAttribute,
reflect: true,
},
initialExpanded: {
type: String,
attribute: 'initial-expanded',
fromAttribute,
reflect: true,
},
};
}
static define() {
Component.define({ name: 'm-table-v2', constructor: Table });
}
constructor() {
super();
_Table_instances.add(this);
_Table_controllers.set(this, void 0);
_Table_provider.set(this, new i$5(this, {
context: tableContext,
initialValue: {
gridColumns: '',
isSelectable: false,
selectionType: 'multiple',
allValues: new Set(),
selectedValues: new Set(),
isExpandable: false,
expansionType: 'multiple',
expandedRows: new Set(),
},
}));
_Table_getAvailableValues.set(this, () => {
return Array.from(this.querySelectorAll('m-table-row-v2[value]'))
.map((row) => row.value)
.filter(Boolean);
});
/**
* Handles copy event to preserve table structure.
*/
_Table_handleCopy.set(this, (event) => {
// We don't want to prevent default if the event originated from an input/textarea
if (event.target instanceof HTMLElement &&
event.target.matches('input, textarea, m-text-field, m-text-area')) {
return;
}
event.preventDefault();
const selection = window.getSelection();
const rows = Array.from(this.querySelectorAll('m-table-row-v2'));
/**
* Formats complex cell content for copying
*/
const formatCellContent = (content = '') => {
// Remove excessive whitespace and normalize line breaks
return content
.replace(/\s+/g, ' ')
.replace(/[\n\r]+/g, ' ')
.trim();
};
// Get the total number of columns from the first row
const totalColumns = Array.from(rows[0]?.querySelectorAll('m-table-cell-v2') || []).reduce((sum, cell) => sum + (parseInt(cell.getAttribute('colspan') || '1', 10) || 1), 0);
try {
const tableData = rows
.map((row) => {
const cells = Array.from(row.querySelectorAll('m-table-cell-v2, m-table-head-cell-v2'));
const rowData = [];
cells.forEach((cell) => {
if (!selection?.containsNode(cell, true)) {
// Add empty cells for unselected content to maintain structure
const colspan = parseInt(cell.getAttribute('colspan') ?? '', 10) || 1;
for (let i = 0; i < colspan; i++) {
rowData.push('');
}
return;
}
const content = formatCellContent(cell.textContent ?? '');
const colspan = parseInt(cell.getAttribute('colspan') ?? '', 10) || 1;
rowData.push(content);
// Add empty strings for remaining colspan cells to maintain structure
for (let i = 1; i < colspan; i++) {
rowData.push('');
}
});
while (rowData.length < totalColumns) {
rowData.push('');
}
return rowData;
})
.filter((row) => row.some((cell) => cell !== ''));
const tsvContent = tableData.map((row) => row.join('\t')).join('\n');
event.clipboardData?.setData('text/plain', tsvContent);
}
catch (error) {
logger$4.error('Error copying table data', error);
}
});
_Table_handleSelect.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-select-v2')) {
event.stopPropagation();
__classPrivateFieldGet$1(this, _Table_controllers, "f").selection.select(target.rowValue);
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitSelectEvent).call(this);
}
});
_Table_handleUnselect.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-select-v2')) {
event.stopPropagation();
__classPrivateFieldGet$1(this, _Table_controllers, "f").selection.unselect(target.rowValue);
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitSelectEvent).call(this);
}
});
_Table_handleSelectAllRows.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-select-v2')) {
event.stopPropagation();
__classPrivateFieldGet$1(this, _Table_controllers, "f").selection.select(__classPrivateFieldGet$1(this, _Table_getAvailableValues, "f").call(this));
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitSelectEvent).call(this);
}
});
_Table_handleUnselectAllRows.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-select-v2')) {
event.stopPropagation();
__classPrivateFieldGet$1(this, _Table_controllers, "f").selection.unselectAll();
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitSelectEvent).call(this);
}
});
_Table_handleExpand.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-expand-v2')) {
event.stopPropagation();
const row = target.closest('m-table-row-v2');
if (!row || (!row.value && !row.id)) {
return;
}
__classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.select(row.value ?? row.id);
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitExpandEvent).call(this);
}
});
_Table_handleCollapse.set(this, (event) => {
const target = event.target;
if (target?.matches('m-table-row-expand-v2')) {
event.stopPropagation();
const row = target.closest('m-table-row-v2');
if (!row || (!row.value && !row.id)) {
return;
}
__classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.unselect(row.value ?? row.id);
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
__classPrivateFieldGet$1(this, _Table_instances, "m", _Table_emitCollapseEvent).call(this);
}
});
_Table_updateContext.set(this, () => {
const template = __classPrivateFieldGet$1(this, _Table_instances, "m", _Table_extractGridColumns).call(this);
__classPrivateFieldGet$1(this, _Table_provider, "f").setValue({
gridColumns: template,
isSelectable: Boolean(this.selectable),
selectionType: __classPrivateFieldGet$1(this, _Table_controllers, "f").selection.getSelectionType(this),
allValues: new Set(__classPrivateFieldGet$1(this, _Table_getAvailableValues, "f").call(this)),
selectedValues: __classPrivateFieldGet$1(this, _Table_controllers, "f").selection.selection,
isExpandable: Boolean(this.expandable),
expansionType: __classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.getSelectionType(this),
expandedRows: __classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.selection,
});
});
__classPrivateFieldSet(this, _Table_controllers, {
selection: new SelectionController$1(this, {
getSelectionType: () => 'multiple',
}),
expansion: new SelectionController$1(this, {
getSelectionType: () => 'multiple',
}),
}, "f");
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'table');
this.addEventListener('copy', __classPrivateFieldGet$1(this, _Table_handleCopy, "f"));
this.addEventListener('row-select', __classPrivateFieldGet$1(this, _Table_handleSelect, "f"));
this.addEventListener('row-unselect', __classPrivateFieldGet$1(this, _Table_handleUnselect, "f"));
this.addEventListener('row-select-all', __classPrivateFieldGet$1(this, _Table_handleSelectAllRows, "f"));
this.addEventListener('row-unselect-all', __classPrivateFieldGet$1(this, _Table_handleUnselectAllRows, "f"));
this.addEventListener('row-expand', __classPrivateFieldGet$1(this, _Table_handleExpand, "f"));
this.addEventListener('row-collapse', __classPrivateFieldGet$1(this, _Table_handleCollapse, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('copy', __classPrivateFieldGet$1(this, _Table_handleCopy, "f"));
this.removeEventListener('row-select', __classPrivateFieldGet$1(this, _Table_handleSelect, "f"));
this.removeEventListener('row-unselect', __classPrivateFieldGet$1(this, _Table_handleUnselect, "f"));
this.removeEventListener('row-select-all', __classPrivateFieldGet$1(this, _Table_handleSelectAllRows, "f"));
this.removeEventListener('row-unselect-all', __classPrivateFieldGet$1(this, _Table_handleUnselectAllRows, "f"));
this.removeEventListener('row-expand', __classPrivateFieldGet$1(this, _Table_handleExpand, "f"));
this.removeEventListener('row-collapse', __classPrivateFieldGet$1(this, _Table_handleCollapse, "f"));
}
firstUpdated() {
__classPrivateFieldGet$1(this, _Table_controllers, "f").selection.init(this.getRawValue(this.initialSelected || []));
if (this.initialExpanded) {
__classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.init(this.getRawValue(this.initialExpanded));
}
else {
const initialRows = Array.from(this.querySelectorAll('m-table-row-v2'));
const initiallyExpandedRows = initialRows
.filter(
// Check for the attribute 'initial-expanded' or the property 'initialExpanded'
(row) => row.hasAttribute('initial-expanded') || row.initialExpanded)
.map((row) => row.value || row.id);
__classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.init(initiallyExpandedRows);
}
const observer = new MutationObserver(() => {
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
});
observer.observe(this, { childList: true, subtree: true });
setTimeout(() => {
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
}, 0);
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('selectable') ||
changedProperties.has('expandable')) {
__classPrivateFieldGet$1(this, _Table_updateContext, "f").call(this);
}
}
render() {
return x `
<div class="table-container">
<slot></slot>
</div>
`;
}
}
_Table_controllers = new WeakMap(), _Table_provider = new WeakMap(), _Table_getAvailableValues = new WeakMap(), _Table_handleCopy = new WeakMap(), _Table_handleSelect = new WeakMap(), _Table_handleUnselect = new WeakMap(), _Table_handleSelectAllRows = new WeakMap(), _Table_handleUnselectAllRows = new WeakMap(), _Table_handleExpand = new WeakMap(), _Table_handleCollapse = new WeakMap(), _Table_updateContext = new WeakMap(), _Table_instances = new WeakSet(), _Table_extractGridColumns = function _Table_extractGridColumns() {
const firstRow = this.querySelector('m-table-row-v2');
if (!firstRow)
return '1fr';
const cells = Array.from(firstRow.querySelectorAll('m-table-head-cell-v2:not([slot="expansion"]), m-table-cell-v2:not([slot="expansion"])'));
const widths = [];
cells.forEach((cell) => {
const width = cell.width || '1fr';
const colspan = parseInt(String(cell.colspan), 10) || 1;
widths.push(width);
for (let i = 1; i < colspan; i++) {
widths.push(width);
}
});
const template = widths
.map((width) => {
// Add 'px' unit only if width is a number; typeof check prevents booleans (isNaN(true)==false).
const unit = !Number.isNaN(Number(width)) && typeof width !== 'boolean'
? 'px'
: '';
return `${width}${unit}`;
})
.join(' ');
return template;
}, _Table_emitExpandEvent = function _Table_emitExpandEvent() {
this.emit(TABLE_EXPAND_EVENT, {
detail: {
value: __classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.value() || [],
},
});
}, _Table_emitCollapseEvent = function _Table_emitCollapseEvent() {
this.emit(TABLE_COLLAPSE_EVENT, {
detail: {
value: __classPrivateFieldGet$1(this, _Table_controllers, "f").expansion.value() || [],
},
});
}, _Table_emitSelectEvent = function _Table_emitSelectEvent() {
this.emit(TABLE_SELECT_EVENT, {
detail: {
value: __classPrivateFieldGet$1(this, _Table_controllers, "f").selection.value() || [],
},
});
};
Table.styles = [tableStyles()];
Table.define();
class TableHead extends Component {
static get properties() {
return {
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-head-v2', constructor: TableHead });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'rowgroup');
}
render() {
return x `
<div class="header-container">
<slot></slot>
</div>
`;
}
}
TableHead.styles = [tableHeadStyles()];
TableHead.define();
class TableBody extends Component {
static define() {
Component.define({ name: 'm-table-body-v2', constructor: TableBody });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'rowgroup');
}
render() {
return x `
<div class="body-container">
<slot></slot>
</div>
`;
}
}
TableBody.styles = [tableBodyStyles()];
TableBody.define();
class TableFoot extends Component {
static get properties() {
return {
role: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-table-foot-v2', constructor: TableFoot });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'rowgroup');
}
render() {
return x `
<div class="footer-container">
<slot></slot>
</div>
`;
}
}
TableFoot.styles = [tableFootStyles()];
TableFoot.define();
function areSetsEqual(setA, setB) {
if (!setA || !setB) {
return false;
}
if (setA.size !== setB.size) {
return false;
}
return [...setA].every((value) => setB.has(value));
}
var _TableRowSelect_consumer, _TableRowSelect_handleChange, _TableRowSelect_handleHostClick;
const logger$3 = createLogger('table-row-select');
class TableRowSelect extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
isHeaderRow: { type: Boolean, state: true },
isFooterRow: { type: Boolean, state: true },
isExpanded: { type: Boolean, state: true },
isSelected: { type: Boolean, state: true },
isIndeterminate: { type: Boolean, state: true },
};
}
static define() {
Component.define({
name: 'm-table-row-select-v2',
constructor: TableRowSelect,
});
}
constructor() {
super();
// @ts-expect-error ts(6133) -- we are consuming the context via callback
_TableRowSelect_consumer.set(this, new s$4(this, {
context: tableRowContext,
subscribe: true,
callback: (contextValue) => {
this.isHeaderRow = Boolean(contextValue?.isHeaderRow);
this.isFooterRow = Boolean(contextValue?.isFooterRow);
this.isExpanded = Boolean(contextValue?.isExpanded);
this.isSelected = Boolean(contextValue?.isSelected);
this.isIndeterminate = Boolean(contextValue?.isIndeterminate);
},
}));
_TableRowSelect_handleChange.set(this, () => {
if (this.isHeaderRow || this.isFooterRow) {
if (this.isSelected) {
this.emit('row-unselect-all');
}
else {
this.emit('row-select-all');
}
}
else if (this.isSelected) {
this.emit('row-unselect');
}
else {
this.emit('row-select');
}
});
/**
* This handler is here FOR TESTING PURPOSES ONLY, so we manually
* forward the click on the host to the m-checkbox.
*/
_TableRowSelect_handleHostClick.set(this, () => {
this.checkbox?.click();
});
this.slot = 'row-controls-select';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _TableRowSelect_handleHostClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _TableRowSelect_handleHostClick, "f"));
}
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
if (this.row && !this.rowValue && !this.isHeaderRow && !this.isFooterRow) {
logger$3.warn(this.row, 'Value is not set for table row select; selection will not work until a value is set (at the row level).');
}
}
render() {
return x `
<m-checkbox
?indeterminate=${this.isIndeterminate}
?checked=${this.isSelected}
@change=${__classPrivateFieldGet$1(this, _TableRowSelect_handleChange, "f")}
></m-checkbox>
`;
}
get checkbox() {
return this.renderRoot?.querySelector('m-checkbox ');
}
get row() {
return this.closest('m-table-row-v2');
}
get rowValue() {
if (!this.row) {
return null;
}
return this.row.value;
}
}
_TableRowSelect_consumer = new WeakMap(), _TableRowSelect_handleChange = new WeakMap(), _TableRowSelect_handleHostClick = new WeakMap();
TableRowSelect.styles = [tableControlSelectStyles()];
TableRowSelect.define();
var _TableRowExpand_consumer, _TableRowExpand_onClick;
class TableRowExpand extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
isRowExpanded: { type: Boolean, state: true },
};
}
static define() {
Component.define({
name: 'm-table-row-expand-v2',
constructor: TableRowExpand,
});
}
constructor() {
super();
// @ts-expect-error ts(6133) -- we are consuming the context via callback
_TableRowExpand_consumer.set(this, new s$4(this, {
context: tableRowContext,
subscribe: true,
callback: (contextValue) => {
this.isRowExpanded = contextValue?.isExpanded;
},
}));
_TableRowExpand_onClick.set(this, () => {
if (this.isRowExpanded) {
this.emit('row-collapse');
}
else {
this.emit('row-expand');
}
});
this.slot = 'row-controls-expand';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _TableRowExpand_onClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _TableRowExpand_onClick, "f"));
}
render() {
return x `
<m-button
variant="icon-secondary"
size="small"
type="button"
class=${e$1({
'expand-button': true,
'-is-expanded': this.isRowExpanded,
})}
>
<m-icon id="caret" size="12" name="caret-down"></m-icon>
</m-button>
`;
}
}
_TableRowExpand_consumer = new WeakMap(), _TableRowExpand_onClick = new WeakMap();
TableRowExpand.styles = [tableControlExpandStyles()];
TableRowExpand.define();
var _TableRow_consumer, _TableRow_provider, _TableRow_handleMouseEnter, _TableRow_handleMouseLeave, _TableRow_updateContext;
class TableRow extends WithIdElementMixin(Component) {
constructor() {
super(...arguments);
_TableRow_consumer.set(this, new s$4(this, {
context: tableContext,
subscribe: true,
callback: (contextValue) => {
this.gridColumns = contextValue?.gridColumns || 'minmax(0, 1fr)';
this.isTableSelectable = Boolean(contextValue?.isSelectable);
this.isTableExpandable = Boolean(contextValue?.isExpandable);
__classPrivateFieldGet$1(this, _TableRow_updateContext, "f").call(this);
},
}));
_TableRow_provider.set(this, new i$5(this, {
context: tableRowContext,
initialValue: {
isExpanded: false,
isHeaderRow: false,
isFooterRow: false,
isIndeterminate: false,
isSelected: false,
},
}));
_TableRow_handleMouseEnter.set(this, () => {
this.isHovered = true;
});
_TableRow_handleMouseLeave.set(this, () => {
this.isHovered = false;
});
_TableRow_updateContext.set(this, () => {
__classPrivateFieldGet$1(this, _TableRow_provider, "f").value = {
isExpanded: this.expanded,
isHeaderRow: this.isHeaderRow,
isFooterRow: this.isFooterRow,
isIndeterminate: this.indeterminate,
isSelected: this.selected,
};
});
}
static get properties() {
return {
role: { type: String, reflect: true },
value: { type: String, reflect: true },
initialExpanded: {
type: Boolean,
attribute: 'initial-expanded',
reflect: true,
},
gridColumns: { type: String, state: true },
isTableSelectable: { type: Boolean, state: true },
isTableExpandable: { type: Boolean, state: true },
isHovered: { type: Boolean, state: true },
};
}
static define() {
Component.define({ name: 'm-table-row-v2', constructor: TableRow });
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'row');
this.addEventListener('mouseenter', __classPrivateFieldGet$1(this, _TableRow_handleMouseEnter, "f"));
this.addEventListener('mouseleave', __classPrivateFieldGet$1(this, _TableRow_handleMouseLeave, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('mouseenter', __classPrivateFieldGet$1(this, _TableRow_handleMouseEnter, "f"));
this.removeEventListener('mouseleave', __classPrivateFieldGet$1(this, _TableRow_handleMouseLeave, "f"));
}
firstUpdated() {
__classPrivateFieldGet$1(this, _TableRow_updateContext, "f").call(this);
}
render() {
const isSelectable = this.isTableSelectable;
const isExpandable = this.isTableExpandable;
return x `
<div
id="row-container"
class=${e$1({
'is-selected': this.selected,
'is-expanded': this.expanded,
'is-hovered': this.isHovered,
})}
style="grid-template-columns: ${isSelectable || isExpandable
? 'min-content'
: ''} 1fr;"
>
${isSelectable || isExpandable
? x `
<div
id="row-controls"
class=${e$1({
'-is-selectable': isSelectable,
'-is-expandable': isExpandable,
})}
>
${isSelectable
? /**
* we hide the default slotted table-row-select for layout purposes so, it any
* row is not selectable, it will not affect the layout of the row
*/
x `
<slot name="row-controls-select">
<m-table-row-select-v2 hidden></m-table-row-select-v2>
</slot>
`
: E$1}
${isExpandable
? /**
* we hide the table-row-expand by default for two reasons:
* 1) we didn't detect there is expansion content
* 2) if it's a header, we don't want to render it (it's uncommon to have a header with expansion content)
* in both cases, we render it as invisible for layout purposes
*/
x `
<slot name="row-controls-expand">
<m-table-row-expand-v2
?hidden=${!this.hasExpansionContent ||
this.isHeaderRow ||
this.isFooterRow}
></m-table-row-expand-v2>
</slot>
`
: E$1}
</div>
`
: E$1}
<div
id="cells-container"
style="grid-template-columns: ${this.gridColumns}"
>
<slot></slot>
</div>
</div>
<div
id="expansion-container"
class=${e$1({
'is-expanded': this.expanded,
})}
aria-hidden="${!this.expanded}"
>
<slot name="expansion"></slot>
</div>
`;
}
get indeterminate() {
if (!this.isTableSelectable) {
return false;
}
const selectedValuesSize = __classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.selectedValues?.size ?? 0;
return ((this.isHeaderRow || this.isFooterRow) &&
selectedValuesSize > 0 &&
!areSetsEqual(__classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.allValues, __classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.selectedValues));
}
get selected() {
if (!this.isTableSelectable ||
(!(this.isHeaderRow || this.isFooterRow) && !this.value)) {
return false;
}
if (this.isHeaderRow || this.isFooterRow) {
const allValues = __classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.allValues;
const selectedValues = __classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.selectedValues;
if (!allValues || !selectedValues || allValues.size === 0) {
return false;
}
return areSetsEqual(allValues, selectedValues);
}
if (!this.value) {
return false;
}
return Boolean(__classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.selectedValues.has(this.value));
}
get expanded() {
if (!this.isTableExpandable || (!this.value && !this.id)) {
return false;
}
return Boolean(__classPrivateFieldGet$1(this, _TableRow_consumer, "f").value?.expandedRows.has(this.value ?? this.id));
}
get isHeaderRow() {
return this.closest('m-table-head-v2') !== null;
}
get isFooterRow() {
return this.closest('m-table-foot-v2') !== null;
}
get hasExpansionContent() {
const slot = this.renderRoot?.querySelector('slot[name="expansion"]');
if (!slot) {
return false;
}
return slot.assignedNodes().length > 0;
}
}
_TableRow_consumer = new WeakMap(), _TableRow_provider = new WeakMap(), _TableRow_handleMouseEnter = new WeakMap(), _TableRow_handleMouseLeave = new WeakMap(), _TableRow_updateContext = new WeakMap();
TableRow.styles = [tableRowStyles()];
TableRow.define();
const defaultTableCellProps = {
align: 'center',
justify: 'flex-start',
textAlign: 'left',
};
class TableCell extends Component {
static get properties() {
return {
align: { type: String, reflect: true },
colspan: { type: Number, reflect: true },
justify: { type: String, reflect: true },
role: { type: String, reflect: true },
textAlign: { type: String, reflect: true, attribute: 'text-align' },
};
}
static define() {
Component.define({ name: 'm-table-cell-v2', constructor: TableCell });
}
connectedCallback() {
super.connectedCallback();
if (this.closest('m-table-foot-v2')) {
this.setAttribute('role', 'columnheader');
}
else {
this.setAttribute('role', 'cell');
}
this.align = this.align ?? defaultTableCellProps.align;
this.justify = this.justify ?? defaultTableCellProps.justify;
this.textAlign = this.textAlign ?? defaultTableCellProps.textAlign;
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('colspan')) {
if (this.colspan && this.colspan > 1) {
this.style.gridColumn = `span ${this.colspan}`;
this.setAttribute('aria-colspan', this.colspan.toString());
}
else {
this.style.removeProperty('grid-column');
this.removeAttribute('aria-colspan');
}
}
}
render() {
return x `
<div class="cell-container">
<slot></slot>
</div>
`;
}
}
TableCell.styles = [tableCellStyles()];
TableCell.define();
var _TableHeadCell_instances, _TableHeadCell_isSortable, _TableHeadCell_isDisabled, _TableHeadCell_getSortIcon, _TableHeadCell_handleClick;
const defaultTableHeadCellProps = {
align: 'center',
justify: 'flex-start',
sortable: false,
sortDirection: undefined,
disabled: false,
textAlign: 'left',
};
class TableHeadCell extends Component {
static get properties() {
return {
align: { type: String, reflect: true },
justify: { type: String, reflect: true },
colspan: { type: Number, reflect: true },
columnId: { type: String, attribute: 'column-id' },
disabled: { type: Boolean, reflect: true },
role: { type: String, reflect: true },
sortable: { type: Boolean, reflect: true },
sortDirection: { type: String, attribute: 'sort-direction' },
textAlign: { type: String, attribute: 'text-align' },
width: { type: String },
};
}
static define() {
Component.define({
name: 'm-table-head-cell-v2',
constructor: TableHeadCell,
});
}
constructor() {
super();
_TableHeadCell_instances.add(this);
_TableHeadCell_isSortable.set(this, () => Boolean(this.sortable));
_TableHeadCell_isDisabled.set(this, () => Boolean(this.disabled));
_TableHeadCell_handleClick.set(this, () => {
if (__classPrivateFieldGet$1(this, _TableHeadCell_isDisabled, "f").call(this) || !__classPrivateFieldGet$1(this, _TableHeadCell_isSortable, "f").call(this)) {
return;
}
// Default sorting cycle: none -> asc -> desc -> none -> ...
let nextSortDirection = 'asc';
if (this.sortDirection === 'asc') {
nextSortDirection = 'desc';
}
else if (this.sortDirection === 'desc') {
nextSortDirection = undefined;
}
this.emit('columnsort', {
detail: {
columnId: this.columnId,
sortDirection: nextSortDirection,
},
});
});
this.align = defaultTableHeadCellProps.align;
this.justify = defaultTableHeadCellProps.justify;
this.textAlign = defaultTableHeadCellProps.textAlign;
this.sortable = defaultTableHeadCellProps.sortable;
this.sortDirection = defaultTableHeadCellProps.sortDirection;
this.disabled = defaultTableHeadCellProps.disabled;
}
connectedCallback() {
super.connectedCallback();
this.setAttribute('role', 'columnheader');
this.addEventListener('click', __classPrivateFieldGet$1(this, _TableHeadCell_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _TableHeadCell_handleClick, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('align')) {
this.style.setProperty('--m-table-cell-align', this.align ?? defaultTableHeadCellProps.align);
}
if (changedProperties.has('justify')) {
this.style.setProperty('--m-table-cell-justify', this.justify ?? defaultTableHeadCellProps.justify);
}
if (changedProperties.has('textAlign')) {
this.style.setProperty('--m-table-cell-text-align', this.textAlign ?? defaultTableHeadCellProps.textAlign);
}
}
render() {
return x `
<div class="cell-container">
<slot></slot>
${__classPrivateFieldGet$1(this, _TableHeadCell_isSortable, "f").call(this)
? x `<m-icon name="${__classPrivateFieldGet$1(this, _TableHeadCell_instances, "m", _TableHeadCell_getSortIcon).call(this)}" size="12"></m-icon>`
: E$1}
</div>
`;
}
}
_TableHeadCell_isSortable = new WeakMap(), _TableHeadCell_isDisabled = new WeakMap(), _TableHeadCell_handleClick = new WeakMap(), _TableHeadCell_instances = new WeakSet(), _TableHeadCell_getSortIcon = function _TableHeadCell_getSortIcon() {
switch (this.sortDirection) {
case 'asc': {
return 'arrow-sort-up';
}
case 'desc': {
return 'arrow-sort-down';
}
default: {
return 'arrow-sort-up-down';
}
}
};
TableHeadCell.styles = [tableHeadCellStyles()];
TableHeadCell.define();
function tableLayoutStyles() {
return i$9 `
:host {
--m-table-border-radius: ${getToken$1('border-radius-s')};
--m-table-border-top-left-radius: var(--m-table-border-radius);
--m-table-border-top-right-radius: var(--m-table-border-radius);
--m-table-border-bottom-left-radius: var(--m-table-border-radius);
--m-table-border-bottom-right-radius: var(--m-table-border-radius);
display: flex;
flex-direction: column;
width: 100%;
border-collapse: collapse;
border-style: solid;
border-start-start-radius: var(--m-table-border-top-left-radius);
border-start-end-radius: var(--m-table-border-top-right-radius);
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
border-width: ${getToken$1('border-thin')};
border-color: ${getColor('color-border')};
background-color: ${getColor('color-background-primary')};
}
::slotted(:not(:first-child)) {
border-top-width: ${getToken$1('border-thin')};
border-top-style: solid;
border-top-color: ${getColor('color-divider')};
}
::slotted(:first-child) {
border-start-start-radius: var(--m-table-border-top-left-radius);
border-start-end-radius: var(--m-table-border-top-right-radius);
}
::slotted(:last-child) {
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
}
::slotted(m-table-v2) {
--m-table-border-width: 0;
}
.overflow-wrapper {
display: flex;
overflow-x: auto;
}
`;
}
function tableToolbarStyles() {
return i$9 `
:host {
padding: ${getToken$1('spacing-4')};
}
`;
}
function tableActionsStyles() {
return i$9 `
:host {
background-color: ${getColor('color-background-primary')};
margin-top: auto;
}
::slotted(*:not(:first-child)) {
border-top-width: ${getToken$1('border-thin')};
border-top-style: solid;
border-top-color: ${getColor('color-divider')};
}
::slotted(:last-child) {
border-end-start-radius: var(--m-table-border-bottom-left-radius);
border-end-end-radius: var(--m-table-border-bottom-right-radius);
}
::slotted(m-pagination) {
--m-pagination-border-width: ${getToken$1('border-none')};
--m-pagination-border-bottom-left-radius: var(
--m-table-border-bottom-left-radius
);
--m-pagination-border-bottom-right-radius: var(
--m-table-border-bottom-right-radius
);
}
:host([sticky]) {
position: sticky;
bottom: 0;
z-index: 1;
}
`;
}
class TableLayoutToolbar extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-table-layout-toolbar',
constructor: TableLayoutToolbar,
});
}
constructor() {
super();
this.slot = 'table-layout-toolbar';
}
render() {
return x `<slot></slot>`;
}
}
TableLayoutToolbar.styles = [tableToolbarStyles()];
TableLayoutToolbar.define();
class TableLayoutFeedback extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-table-layout-feedback',
constructor: TableLayoutFeedback,
});
}
constructor() {
super();
this.slot = 'table-layout-feedback';
}
render() {
return x `<slot></slot>`;
}
}
TableLayoutFeedback.define();
class TableLayoutActions extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
role: { type: String, reflect: true },
sticky: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-table-layout-actions',
constructor: TableLayoutActions,
});
}
constructor() {
super();
this.slot = 'table-layout-actions';
}
render() {
return x `<slot></slot>`;
}
}
TableLayoutActions.styles = [tableActionsStyles()];
TableLayoutActions.define();
class TableLayout extends Component {
static define() {
Component.define({ name: 'm-table-layout', constructor: TableLayout });
}
render() {
return x `
<slot name="table-layout-toolbar"></slot>
<div class="overflow-wrapper">
<slot></slot>
</div>
<slot name="table-layout-feedback"></slot>
<slot name="table-layout-actions"></slot>
`;
}
}
TableLayout.styles = [tableLayoutStyles()];
TableLayout.define();
function styles$7() {
return i$9 `
:host {
--m-tabs-border-width: ${getToken$1('border-thin')};
--m-tabs-border-color: ${getColor('color-divider')};
}
.tablist {
display: flex;
flex-direction: row;
gap: 1px;
border-bottom-style: solid;
border-bottom-width: var(--m-tabs-border-width);
border-bottom-color: var(--m-tabs-border-color);
}
`;
}
class Tabs extends WithTabsMixin(Component) {
static define() {
Component.define({ name: 'm-tabs', constructor: Tabs });
}
render() {
return x `
<div class="tablist" role="tablist"><slot name="tab"></slot></div>
<slot></slot>
`;
}
}
Tabs.styles = [styles$7()];
Tabs.define();
function styles$6() {
return i$9 `
:host {
--m-tab-border-width: ${getToken$1('border-thin')};
--m-tab-border-color: ${getColor('color-divider')};
--m-tab-border-radius: ${getToken$1('border-radius-s')};
--m-tab-background-color: none;
--m-tab-label-color: ${getColor('color-text-tertiary')};
--m-tab-leading-color: ${getColor('color-text-tertiary')};
--m-tab-outline-color: ${getColor('color-primary-60')};
--m-tab-padding-x: ${getToken$1('spacing-6')};
--m-tab-height: ${getToken$1('spacing-12')};
}
.tab {
cursor: pointer;
position: relative;
padding-bottom: 1px;
bottom: -1px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: ${getToken$1('spacing-3')};
height: var(--m-tab-height);
padding-inline: var(--m-tab-padding-x);
${typography('body-md')};
color: var(--m-tab-label-color);
background-color: var(--m-tab-background-color);
border: none;
border-bottom-style: solid;
border-bottom-width: var(--m-tab-border-width);
border-bottom-color: var(--m-tab-border-color);
border-top-left-radius: var(--m-tab-border-radius);
border-top-right-radius: var(--m-tab-border-radius);
@media (prefers-reduced-motion: no-preference) {
${transition([
{ property: 'background-color' },
{ property: 'border-color' },
{ property: 'color' },
])};
}
}
.tab.-vertical {
flex-direction: column;
--m-tab-height: ${getToken$1('spacing-20')};
}
.tab.-horizontal {
flex-direction: row;
}
slot[name='leading']::slotted(*) {
display: contents;
color: var(--m-tab-leading-color);
}
${on('.tab').not.disabled.hover} {
--m-tab-background-color: ${getColor('color-background-tertiary')};
}
${on('.tab').not.disabled.focus} {
outline: 1px solid var(--m-tab-outline-color);
}
.tab[aria-selected='true'] {
--m-tab-border-width: ${getToken$1('border-medium')};
--m-tab-border-color: ${getColor('color-primary-60')};
--m-tab-label-color: ${getColor('color-text-secondary')};
--m-tab-leading-color: ${getColor('color-primary-60')};
padding-bottom: 0;
}
${on('.tab').disabled} {
cursor: default;
--m-tab-label-color: ${getColor('color-text-disabled')};
--m-tab-leading-color: ${getColor('color-text-disabled')};
--m-tab-border-color: ${getColor('color-divider')};
}
${on('.tab', '*').disabled} {
pointer-events: none;
}
`;
}
var _Tab_instances, _Tab_button_get, _Tab_handleClick, _Tab_getContentDirection, _Tab_isSelected, _Tab_isDisabled;
class Tab extends Component {
static get properties() {
return {
name: { type: String, reflect: true },
disabled: { type: Boolean, reflect: true },
slot: { type: String, reflect: true },
lazy: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({ name: 'm-tab', constructor: Tab });
}
constructor() {
super();
_Tab_instances.add(this);
this.tabs = new s$4(this, {
context: tabsContext,
subscribe: true,
});
_Tab_handleClick.set(this, (event) => {
if (this.disabled) {
event.preventDefault();
event.stopPropagation();
return;
}
const options = {
detail: { value: this.name, type: 'select' },
bubbles: true,
composed: false,
};
this.emit(TAB_SELECT_EVENT, options);
});
_Tab_getContentDirection.set(this, () => {
return this.tabs.value?.tabContentDirection;
});
_Tab_isSelected.set(this, () => {
return Boolean(this.tabs.value?.selection.has(this.name));
});
_Tab_isDisabled.set(this, () => {
return this.disabled || Boolean(this.tabs.value?.disabled);
});
this.disabled = false;
}
connectedCallback() {
super.connectedCallback();
this.id = `${this.name}-tab`;
this.setAttribute('slot', 'tab');
this.setAttribute('role', 'tab');
this.setAttribute('aria-controls', `${this.name}-panel`);
this.setAttribute('aria-selected', 'false');
this.addEventListener('click', __classPrivateFieldGet$1(this, _Tab_handleClick, "f"));
}
updated(changedProperties) {
super.updated(changedProperties);
this.lazy = this.tabs.value?.lazy;
if (__classPrivateFieldGet$1(this, _Tab_isSelected, "f").call(this)) {
this.setAttribute('aria-selected', 'true');
}
else {
this.setAttribute('aria-selected', 'false');
}
if (changedProperties.has('name')) {
this.id = `${this.name}-tab`;
this.setAttribute('aria-controls', `${this.name}-panel`);
}
if (changedProperties.has('disabled')) {
this.setAttribute('aria-disabled', String(this.disabled ?? false));
}
}
render() {
return x `
<button
type="button"
class=${e$1({
tab: true,
'-vertical': __classPrivateFieldGet$1(this, _Tab_getContentDirection, "f").call(this) === 'vertical',
'-horizontal': __classPrivateFieldGet$1(this, _Tab_getContentDirection, "f").call(this) === 'horizontal',
})}
?disabled=${__classPrivateFieldGet$1(this, _Tab_isDisabled, "f").call(this)}
aria-selected=${__classPrivateFieldGet$1(this, _Tab_isSelected, "f").call(this)}
>
<slot name="leading"></slot>
<slot></slot>
</button>
`;
}
focus(options) {
__classPrivateFieldGet$1(this, _Tab_instances, "a", _Tab_button_get)?.focus(options);
}
}
_Tab_handleClick = new WeakMap(), _Tab_getContentDirection = new WeakMap(), _Tab_isSelected = new WeakMap(), _Tab_isDisabled = new WeakMap(), _Tab_instances = new WeakSet(), _Tab_button_get = function _Tab_button_get() {
return this.renderRoot?.querySelector('button') ?? null;
};
Tab.styles = [styles$6()];
Tab.define();
function styles$5() {
return i$9 `
:host {
--m-tab-panel-display: none;
display: var(--m-tab-panel-display);
}
`;
}
var _a$2, _b$2, _TabPanel_isLazy;
const logger$2 = createLogger('tab-panel');
const OBSERVABLE_TAB_ATTRIBUTES = ['aria-selected', 'lazy'];
class TabPanel extends (_b$2 = Box) {
static get properties() {
return {
...super.properties,
forTab: { type: String, attribute: 'for-tab' },
lazy: { type: Boolean },
};
}
static define() {
Component.define({ name: 'm-tab-panel', constructor: _a$2 });
}
constructor() {
super();
_TabPanel_isLazy.set(this, () => {
const isTabsLazy = this.getRelatedTabNode()?.getAttribute('lazy') !== null;
return this.lazy || isTabsLazy;
});
this.selected = false;
this.lazy = false;
this.padding = 'none';
this.paddingY = 'spacing-8';
}
getRelatedTabNode() {
const [tabNode, ...restOfTabs] = Array.from(document.querySelectorAll(`m-tab[name="${this.forTab}"]`));
if (restOfTabs.length > 0) {
logger$2.warn(`Multiple tabs found with name "${this.forTab}". Make sure to use unique names for each tab.`);
}
return tabNode;
}
observeTab() {
const tabNode = this.getRelatedTabNode();
if (tabNode) {
this.tabObserver = new MutationObserver((mutationList) => {
for (const mutation of mutationList) {
if (!mutation.attributeName) {
return;
}
if (mutation.attributeName === 'aria-selected') {
const newValue = mutation.target.getAttribute(mutation.attributeName);
this.selected = newValue === 'true';
}
if (OBSERVABLE_TAB_ATTRIBUTES.includes(mutation.attributeName)) {
this.requestUpdate();
}
}
});
this.tabObserver.observe(tabNode, {
attributes: true,
attributeFilter: OBSERVABLE_TAB_ATTRIBUTES,
});
}
}
connectedCallback() {
super.connectedCallback();
this.id = `${this.forTab}-panel`;
this.setAttribute('role', 'tabpanel');
this.setAttribute('aria-labelledby', `${this.forTab}-tab`);
}
firstUpdated() {
this.observeTab();
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.tabObserver) {
this.tabObserver.disconnect();
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (this.selected) {
this.style.setProperty('--m-tab-panel-display', 'block');
this.removeAttribute('aria-hidden');
}
else {
this.style.setProperty('--m-tab-panel-display', 'none');
this.setAttribute('aria-hidden', 'true');
}
if (changedProperties.has('forTab')) {
this.id = `${this.forTab}-panel`;
this.setAttribute('aria-labelledby', `${this.forTab}-tab`);
}
}
render() {
if (__classPrivateFieldGet$1(this, _TabPanel_isLazy, "f").call(this) && !this.selected) {
return x ``;
}
return x `<slot></slot>`;
}
}
_a$2 = TabPanel, _TabPanel_isLazy = new WeakMap();
TabPanel.styles = [...Reflect.get(_b$2, "styles", _a$2), styles$5()];
TabPanel.define();
var e=new Map;function t(t){var o=e.get(t);o&&o.destroy();}function o(t){var o=e.get(t);o&&o.update();}var r=null;"undefined"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:""===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value;}),l=function(o){t.removeEventListener("autosize:destroy",l),t.removeEventListener("autosize:update",s),t.removeEventListener("input",i),window.removeEventListener("resize",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t);}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",l),t.addEventListener("autosize:update",s),t.addEventListener("input",i),window.addEventListener("resize",s),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:l,update:s}),s();}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&("vertical"===n.resize?t.style.resize="none":"both"===n.resize&&(t.style.resize="horizontal"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior="auto",t.scrollTop=o,t.style.scrollBehavior=null;})}}(t),t.style.height=""),i="content-box"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),"none"!==n.maxHeight&&i>parseFloat(n.maxHeight)?("hidden"===n.overflowY&&(t.style.overflow="scroll"),i=parseFloat(n.maxHeight)):"hidden"!==n.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:true})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;"hidden"===n.overflow&&(t.style.textAlign="start"===v?"end":"start"),a({restoreTextAlign:v,testForHeightReduction:true});}}function s(){a({testForHeightReduction:true,restoreTextAlign:null});}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;
function styles$4() {
return i$9 `
:host {
--m-text-area-background-color: ${getColor('color-background-primary')};
--m-text-area-border-color: ${getColor('color-border-input')};
--m-text-area-min-height: 135px;
--m-text-area-placeholder-color: ${getColor('color-text-placeholder')};
--m-text-area-color: ${getColor('color-text-primary')};
${typography('body-md')};
${transition([
{ property: 'background-color' },
{ property: 'border-color' },
])};
display: inline-flex;
align-items: center;
justify-content: start;
gap: ${getToken$1('spacing-2')};
overflow: hidden;
position: relative;
box-sizing: border-box;
min-block-size: var(--m-text-area-min-height);
background-color: var(--m-text-area-background-color);
border-radius: ${getToken$1('border-radius-s')};
border: 1px solid var(--m-text-area-border-color);
${p$2(getToken$1('spacing-2'))};
}
:host([resize='none']:not([autosize])) textarea {
resize: none;
}
:host([resize='both']:not([autosize])) textarea {
resize: both;
}
:host([resize='horizontal']:not([autosize])) textarea {
resize: horizontal;
}
:host([resize='vertical']:not([autosize])) textarea {
resize: vertical;
}
:host([resize='block']:not([autosize])) textarea {
resize: block;
}
:host([resize='inline']:not([autosize])) textarea {
resize: inline;
}
:host([status='danger']) {
--m-text-area-border-color: ${getColor('color-danger-60')};
}
:host(:disabled) {
--m-text-area-background-color: ${getColor('color-background-tertiary')};
}
:host(:enabled:hover) {
--m-text-area-border-color: ${getColor('color-primary-60')};
}
:host(:enabled:is(:focus, :focus-visible, :focus-within)) {
--m-text-area-border-color: ${getColor('color-primary-100')};
}
${on('#textarea').not.disabled.active},
${on('#textarea').not.disabled.focus} {
-webkit-appearance: none;
background: none;
border: none;
outline: none;
}
#textarea {
${typography('body-md')};
border: none;
outline: none;
flex: 1;
min-width: 0;
min-block-size: var(--m-text-area-min-height);
padding: 0;
background-color: var(--m-text-area-background-color);
color: var(--m-text-area-color);
scrollbar-width: thin;
scrollbar-color: ${getColor('color-border-input')}
${getColor('color-background-tertiary')};
outline: none;
}
#textarea::placeholder {
color: var(--m-text-area-placeholder-color);
}
#textarea::-webkit-scrollbar {
width: 8px;
border-radius: ${getToken$1('border-radius-m')};
}
#textarea::-webkit-scrollbar-track {
background: ${getColor('color-background-tertiary')};
border-radius: ${getToken$1('border-radius-m')};
}
#textarea::-webkit-scrollbar-thumb {
background-color: ${getColor('color-border-input')};
border-radius: ${getToken$1('border-radius-m')};
background-clip: padding-box;
}
#textarea:disabled {
cursor: default;
}
`;
}
var _TextArea_instances, _TextArea_initialize, _TextArea_handleChange, _TextArea_handleInput, _TextArea_handleValueChange, _TextArea_handleDisabledChange;
class TextArea extends FormComponent {
static get properties() {
return {
...super.properties,
autocomplete: { type: Boolean },
autofocus: { type: Boolean },
autosize: { type: Boolean },
cols: { type: Number },
initialValue: { type: String, attribute: 'initial-value', reflect: true },
dirname: { type: String },
maxLength: { type: Number, reflect: true, attribute: 'max-length' },
minLength: { type: Number, reflect: true, attribute: 'min-length' },
placeholder: { type: String },
readOnly: { type: Boolean, reflect: true, attribute: 'read-only' },
resize: { type: String, reflect: true },
rows: { type: Number },
spellcheck: { type: Boolean, reflect: true, attribute: 'spell-check' },
value: { type: String, reflect: true },
wrap: { type: String },
};
}
static define() {
Component.define({ name: 'm-text-area', constructor: TextArea });
}
constructor() {
super();
_TextArea_instances.add(this);
/**
* We use this private variable to store the pending value
* when the internal textarea hasn't been rendered yet.
*/
this.pendingValue = null;
_TextArea_handleChange.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
return;
}
__classPrivateFieldGet$1(this, _TextArea_handleValueChange, "f").call(this, this.value);
this.reemit(event);
});
_TextArea_handleInput.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
return;
}
__classPrivateFieldGet$1(this, _TextArea_handleValueChange, "f").call(this, this.value);
});
_TextArea_handleValueChange.set(this, (value) => {
if (this.textarea) {
this.textarea.value = value;
this.pendingValue = null;
this.setFormValue(this.textarea.value);
}
else if (value) {
/**
* It the internal textarea hasn't been rendered yet,
* so we store the pending value.
*/
this.pendingValue = value;
}
});
_TextArea_handleDisabledChange.set(this, (disabled) => {
this.disabled = disabled;
if (this.textarea) {
this.textarea.disabled = disabled;
}
});
this.cols = 40;
this.placeholder = '';
this.resize = 'vertical';
this.rows = 6;
this.value = '';
}
createRenderRoot() {
const root = super.createRenderRoot();
/**
* We add the event listener to the shadow root because `change` event is not
* composed, so it will not bubble outside the host.
*/
root.addEventListener('change', __classPrivateFieldGet$1(this, _TextArea_handleChange, "f"));
return root;
}
async connectedCallback() {
super.connectedCallback();
this.addEventListener('input', __classPrivateFieldGet$1(this, _TextArea_handleInput, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _TextArea_instances, "m", _TextArea_initialize).call(this, this.pendingValue ??
this.getAttribute('value') ??
this.getAttribute('initial-value') ??
'');
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('input', __classPrivateFieldGet$1(this, _TextArea_handleInput, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _TextArea_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('autosize')) {
if (this.autosize) {
n(this.textarea);
}
else {
n.destroy(this.textarea);
}
}
}
render() {
return x `<textarea
id="textarea"
?autofocus=${this.autofocus}
?readonly=${this.readOnly}
autocomplete=${o$3(this.autocomplete)}
dirname="${o$3(this.dirname)}"
cols="${o$3(this.cols)}"
rows="${o$3(this.rows)}"
maxlength=${o$3(this.maxLength != null && this.maxLength > -1
? this.maxLength
: undefined)}
minlength=${o$3(this.minLength != null && this.minLength > -1
? this.minLength
: undefined)}
placeholder="${o$3(this.placeholder)}"
spellcheck=${o$3(this.spellcheck)}
wrap=${o$3(this.wrap)}
></textarea>`;
}
get textarea() {
return (this.renderRoot?.querySelector('#textarea') ?? null);
}
/**
* Textarea value.
*/
set value(value) {
__classPrivateFieldGet$1(this, _TextArea_handleValueChange, "f").call(this, value);
}
get value() {
return this.textarea?.value ?? '';
}
focus() {
this.textarea?.focus();
}
formResetCallback() {
__classPrivateFieldGet$1(this, _TextArea_instances, "m", _TextArea_initialize).call(this);
}
formStateRestoreCallback(state) {
if (state) {
this.value = state;
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _TextArea_handleDisabledChange, "f").call(this, disabled);
}
}
_TextArea_handleChange = new WeakMap(), _TextArea_handleInput = new WeakMap(), _TextArea_handleValueChange = new WeakMap(), _TextArea_handleDisabledChange = new WeakMap(), _TextArea_instances = new WeakSet(), _TextArea_initialize = function _TextArea_initialize(value) {
this.value = value ?? this.getAttribute('initial-value') ?? '';
};
TextArea.styles = [styles$4()];
TextArea.define();
function timelineStyles() {
return i$9 `
::slotted(*) {
width: 100%;
}
:host {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: ${getToken$1('spacing-4')};
}
`;
}
function timelineItemStyles() {
return i$9 `
::slotted(:not(m-timeline-item-icon)) {
width: 100%;
}
:host {
--m-timeline-item-circle-size: 22px;
--m-timeline-item-inner-circle-distance: 3px;
--m-timeline-item-background-color: ${getColor('color-neutral-40')};
--m-timeline-item-min-height: ${getToken$1('global-height-large')};
--m-timeline-item-content-gap: ${getToken$1('spacing-6')};
position: relative;
display: flex;
flex-direction: row nowrap;
align-items: flex-start;
box-sizing: border-box;
min-height: var(--m-timeline-item-min-height);
gap: ${getToken$1('spacing-6')};
padding: 0;
margin: 0;
}
.side {
display: flex;
flex-direction: column;
gap: ${getToken$1('spacing-4')};
align-self: stretch;
align-items: center;
}
.track {
${transition([{ property: 'background-color' }])};
display: inline-block;
inline-size: 2px;
block-size: 100%;
background-color: ${getColor('color-border-input')};
}
.content {
${typography('body-md')};
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--m-timeline-item-content-gap);
flex: 1;
padding: 0 0 ${getToken$1('spacing-6')} 0;
padding-block-end: ${getToken$1('spacing-6')};
}
.content.-divider {
border-bottom: 1px solid ${getColor('color-border-input')};
}
.circle {
${typography('number-md')};
${transition([{ property: 'background-color' }])};
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 var(--m-timeline-item-circle-size);
box-sizing: border-box;
inline-size: var(--m-timeline-item-circle-size);
block-size: var(--m-timeline-item-circle-size);
border-radius: 50%;
background-color: var(--m-timeline-item-background-color);
color: var(--m-timeline-item-background-color);
}
.check,
.dot,
.exclamation {
display: none;
}
.dot {
--size: calc(
var(--m-timeline-item-circle-size) - 2 *
var(--m-timeline-item-inner-circle-distance)
);
inline-size: var(--size);
block-size: var(--size);
box-sizing: border-box;
border-radius: 50%;
border: var(--m-timeline-item-inner-circle-distance) solid
${getColor('color-text-inverted')};
background-color: ${getColor('color-primary-60')};
}
.exclamation {
${typography('body-md-bold')};
line-height: var(--m-timeline-item-circle-size);
color: ${getColor('color-text-inverted')};
}
:host(:is(:focus, :focus-within, :focus-visible)) {
outline: none;
}
:host(:is([completed], [active])) {
--m-timeline-item-background-color: ${getColor('color-primary-60')};
}
:host([variant='warning']:not([active], [active])) {
--m-timeline-item-background-color: ${getColor('color-warning-60')};
}
:host([completed]:not([active])) .check {
display: inline-flex;
}
:host([completed]:not([active])) .track {
background-color: ${getColor('color-primary-60')};
}
:host([active]) .dot {
display: inline-flex;
}
:host([variant='warning']:not([active], [active])) .exclamation {
display: inline-flex;
}
`;
}
function timelineExpandableItemStyles() {
return i$9 `
.m-timeline-item-header-trigger {
display: flex;
margin: 0;
padding: 0;
cursor: pointer;
width: 100%;
outline: none;
border: none;
align-items: center;
background-color: transparent;
}
.m-timeline-item-header-trigger[aria-expanded='true'] m-icon {
transform: rotate(180deg);
}
.m-timeline-item-body-section {
height: auto;
width: 100%;
overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.content {
${transition([{ property: 'gap' }])};
}
.m-timeline-item-body-section {
${transition([{ property: 'height' }, { property: 'visibility' }])};
will-change: height;
}
}
`;
}
function timelineItemHeaderStyles() {
return i$9 `
:host {
--m-timeline-item-header-align: baseline;
display: flex;
flex-direction: row;
align-items: var(--m-timeline-item-header-align);
justify-content: flex-start;
gap: ${getToken$1('spacing-2')};
box-sizing: border-box;
}
`;
}
function timelineItemHeaderTitleStyles() {
return i$9 `
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
function timelineItemHeaderSubtitleStyles() {
return i$9 `
::slotted(:is(h1, h2, h3, h4, h5, h6)) {
line-height: normal;
margin-block: 0;
}
`;
}
function timelineBodyStyles() {
return i$9 `
:host {
display: block;
box-sizing: border-box;
}
`;
}
function timelineFooterStyles() {
return i$9 `
:host {
display: block;
box-sizing: border-box;
}
`;
}
function timelineIconStyles() {
return i$9 `
:host {
display: flex;
box-sizing: border-box;
}
`;
}
class Timeline extends Component {
static define() {
Component.define({ name: 'm-timeline', constructor: Timeline });
}
update(changedProperties) {
super.update(changedProperties);
if (this.activeEntry != null) {
// set all entries before the active one as completed.
let completed = true;
for (const entry of this.entries) {
if (entry.active) {
completed = false;
}
else {
entry.completed = completed;
entry.active = false;
}
}
}
}
render() {
return x `<slot name="item"></slot>`;
}
get entries() {
return Array.from(this.querySelectorAll('m-timeline-item'));
}
get activeEntry() {
return this.querySelector('m-timeline-item[active]');
}
}
Timeline.styles = [timelineStyles()];
Timeline.define();
const timelineItemContext = n$4(Symbol('timeline-item'));
var _TimelineExpandableItem_instances, _TimelineExpandableItem_contextProvider, _TimelineExpandableItem_timelineItemHeaderTrigger_get, _TimelineExpandableItem_timelineItemBodySection_get, _TimelineExpandableItem_timelineItemBody_get, _TimelineExpandableItem_handleExpand, _TimelineExpandableItem_toggle, _TimelineExpandableItem_handleTransition;
attachContextRoot();
class TimelineExpandableItem extends Component {
constructor() {
super(...arguments);
_TimelineExpandableItem_instances.add(this);
_TimelineExpandableItem_contextProvider.set(this, new i$5(this, {
context: timelineItemContext,
initialValue: {
variant: 'neutral',
completed: false,
active: false,
},
}));
_TimelineExpandableItem_handleTransition.set(this, () => {
if (this.expanded) {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get).style.height = 'auto';
}
});
}
static get properties() {
return {
completed: { type: Boolean, reflect: true },
active: { type: Boolean, reflect: true },
variant: { type: String, reflect: true },
expanded: { type: Boolean, reflect: true },
divider: { type: Boolean, reflect: true },
};
}
static define() {
Component.define({
name: 'm-timeline-expandable-item',
constructor: TimelineExpandableItem,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item';
this.variant = this.variant ?? 'neutral';
this.active = this.active ?? false;
this.completed = this.completed ?? false;
this.divider = this.divider ?? false;
this.expanded = this.expanded ?? false;
this.resizeObserver = new ResizeObserver((records) => {
this.bodyHeight = records[0].target.scrollHeight;
});
}
firstUpdated() {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBody_get).style.transition = 'visibility 0.35s';
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBody_get).setAttribute('role', 'region');
this.resizeObserver.observe(__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get));
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get).addEventListener('transitionend', __classPrivateFieldGet$1(this, _TimelineExpandableItem_handleTransition, "f"));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('active')) {
if (this.active) {
this.setAttribute('tabindex', '0');
this.setAttribute('aria-active', 'step');
this.closest('m-timeline')?.requestUpdate();
}
else {
this.removeAttribute('tabindex');
this.removeAttribute('aria-active');
}
}
if (changedProperties.has('expanded')) {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "m", _TimelineExpandableItem_handleExpand).call(this);
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('active') ||
changedProperties.has('completed') ||
changedProperties.has('variant')) {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_contextProvider, "f").setValue({
variant: this.variant ?? 'neutral',
completed: Boolean(this.completed),
active: Boolean(this.active),
});
}
}
disconnectedCallback() {
super.disconnectedCallback();
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get).removeEventListener('transitionend', __classPrivateFieldGet$1(this, _TimelineExpandableItem_handleTransition, "f"));
this.resizeObserver.disconnect();
}
render() {
return x `
<div class="side">
<span aria-hidden="true" class="circle">
<slot name="item-icon">
<span class="dot"></span>
<span class="exclamation">!</span>
<m-icon
class="check"
name="check"
size="12"
color="color-text-inverted"
></m-icon>
</slot>
</span>
<span class="track"></span>
</div>
<div
class="${e$1({
content: true,
'-divider': Boolean(this.divider),
})}"
>
<button
class="m-timeline-item-header-trigger"
@click="${__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "m", _TimelineExpandableItem_toggle)}"
tabindex="0"
type="button"
>
<slot name="item-header"></slot>
<m-icon name="caret-down"></m-icon>
</button>
<section class="m-timeline-item-body-section">
<slot name="item-body"></slot>
</section>
<slot name="item-footer"></slot>
</div>
`;
}
}
_TimelineExpandableItem_contextProvider = new WeakMap(), _TimelineExpandableItem_handleTransition = new WeakMap(), _TimelineExpandableItem_instances = new WeakSet(), _TimelineExpandableItem_timelineItemHeaderTrigger_get = function _TimelineExpandableItem_timelineItemHeaderTrigger_get() {
return this.renderRoot.querySelector('.m-timeline-item-header-trigger');
}, _TimelineExpandableItem_timelineItemBodySection_get = function _TimelineExpandableItem_timelineItemBodySection_get() {
return this.renderRoot.querySelector('.m-timeline-item-body-section');
}, _TimelineExpandableItem_timelineItemBody_get = function _TimelineExpandableItem_timelineItemBody_get() {
return this.querySelector('m-timeline-item-body');
}, _TimelineExpandableItem_handleExpand = function _TimelineExpandableItem_handleExpand() {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemHeaderTrigger_get).setAttribute('aria-expanded', `${this.expanded}`);
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get).style.height = `${this.bodyHeight}px`;
if (this.expanded) {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBody_get).style.visibility = 'visible';
this.style.setProperty('--m-timeline-item-content-gap', toSpacingCSSValue('spacing-6'));
}
else {
setTimeout(() => {
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBodySection_get).style.height = '0px';
__classPrivateFieldGet$1(this, _TimelineExpandableItem_instances, "a", _TimelineExpandableItem_timelineItemBody_get).style.visibility = 'hidden';
this.style.setProperty('--m-timeline-item-content-gap', toSpacingCSSValue('none'));
});
}
}, _TimelineExpandableItem_toggle = function _TimelineExpandableItem_toggle() {
this.expanded = !this.expanded;
this.emit('toggle', {
detail: { name: 'timeline-item-expanded', value: this.expanded },
});
};
TimelineExpandableItem.styles = [
timelineItemStyles(),
timelineExpandableItemStyles(),
];
TimelineExpandableItem.define();
var _TimelineItem_contextProvider;
attachContextRoot();
class TimelineItem extends Component {
constructor() {
super(...arguments);
_TimelineItem_contextProvider.set(this, new i$5(this, {
context: timelineItemContext,
initialValue: {
variant: 'neutral',
completed: false,
active: false,
},
}));
}
static get properties() {
return {
completed: {
type: Boolean,
reflect: true,
},
active: {
type: Boolean,
reflect: true,
},
divider: {
type: Boolean,
reflect: true,
},
variant: {
type: String,
reflect: true,
},
};
}
static define() {
Component.define({ name: 'm-timeline-item', constructor: TimelineItem });
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item';
this.variant = this.variant ?? 'neutral';
this.active = this.active ?? false;
this.completed = this.completed ?? false;
this.divider = this.divider ?? false;
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('active')) {
if (this.active) {
this.setAttribute('tabindex', '0');
this.setAttribute('aria-active', 'step');
this.closest('m-timeline')?.requestUpdate();
}
else {
this.removeAttribute('tabindex');
this.removeAttribute('aria-active');
}
}
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('active') ||
changedProperties.has('completed') ||
changedProperties.has('variant')) {
__classPrivateFieldGet$1(this, _TimelineItem_contextProvider, "f").setValue({
variant: this.variant ?? 'neutral',
completed: Boolean(this.completed),
active: Boolean(this.active),
});
}
}
render() {
return x `
<div class="side">
<span aria-hidden="true" class="circle">
<slot name="item-icon">
<span class="dot"></span>
<span class="exclamation">!</span>
<m-icon
class="check"
name="check"
size="12"
color="color-text-inverted"
></m-icon>
</slot>
</span>
<span class="track"></span>
</div>
<div
class="${e$1({
content: true,
'-divider': Boolean(this.divider),
})}"
>
<slot name="item-header"></slot>
<slot name="item-body"></slot>
<slot name="item-footer"></slot>
</div>
`;
}
}
_TimelineItem_contextProvider = new WeakMap();
TimelineItem.styles = [timelineItemStyles()];
TimelineItem.define();
class TimelineItemBody extends Component {
static define() {
Component.define({
name: 'm-timeline-item-body',
constructor: TimelineItemBody,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-body';
this.classList.add('m-timeline-item-body');
}
render() {
return x `<slot></slot>`;
}
}
TimelineItemBody.styles = [timelineBodyStyles()];
TimelineItemBody.define();
class TimelineItemFooter extends Component {
static define() {
Component.define({
name: 'm-timeline-item-footer',
constructor: TimelineItemFooter,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-footer';
}
render() {
return x `<slot></slot>`;
}
}
TimelineItemFooter.styles = [timelineFooterStyles()];
TimelineItemFooter.define();
class TimelineItemHeader extends Component {
static get properties() {
return {
align: { type: String },
};
}
static define() {
Component.define({
name: 'm-timeline-item-header',
constructor: TimelineItemHeader,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-header';
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('align')) {
this.style.setProperty('--m-timeline-item-header-align', this.align ?? 'baseline');
}
}
render() {
return x `
<slot name="item-header-title"></slot>
<slot name="item-header-subtitle"></slot>
<slot></slot>
`;
}
}
TimelineItemHeader.styles = [timelineItemHeaderStyles()];
TimelineItemHeader.define();
var _a$1, _b$1;
class TimelineItemHeaderSubtitle extends (_b$1 = Text) {
static define() {
Component.define({
name: 'm-timeline-item-header-subtitle',
constructor: _a$1,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-header-subtitle';
this.variant = 'body-sm';
this.color = 'color-text-tertiary';
}
}
_a$1 = TimelineItemHeaderSubtitle;
TimelineItemHeaderSubtitle.styles = [
...Reflect.get(_b$1, "styles", _a$1),
timelineItemHeaderSubtitleStyles(),
];
TimelineItemHeaderSubtitle.define();
var _a, _b, _TimelineItemHeaderTitle_context, _TimelineItemHeaderTitle_updateTextStyle;
class TimelineItemHeaderTitle extends (_b = Text) {
static define() {
Component.define({
name: 'm-timeline-item-header-title',
constructor: _a,
});
}
constructor() {
super();
_TimelineItemHeaderTitle_context.set(this, void 0);
_TimelineItemHeaderTitle_updateTextStyle.set(this, () => {
const { value } = __classPrivateFieldGet$1(this, _TimelineItemHeaderTitle_context, "f");
if (!value) {
return;
}
if (value.completed) {
this.color = 'color-text-tertiary';
this.variant = 'heading-sm';
}
else if (value.active) {
this.color = 'color-primary-60';
this.variant = 'heading-sm-bold';
}
else if (value.variant === 'warning') {
this.color = 'color-warning-100';
this.variant = 'heading-sm';
}
else {
this.color = 'color-text-secondary';
this.variant = 'heading-sm';
}
});
__classPrivateFieldSet(this, _TimelineItemHeaderTitle_context, new s$4(this, {
context: timelineItemContext,
subscribe: true,
callback: __classPrivateFieldGet$1(this, _TimelineItemHeaderTitle_updateTextStyle, "f"),
}), "f");
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-header-title';
this.variant = 'heading-sm';
this.color = 'color-text-tertiary';
}
}
_a = TimelineItemHeaderTitle, _TimelineItemHeaderTitle_context = new WeakMap(), _TimelineItemHeaderTitle_updateTextStyle = new WeakMap();
TimelineItemHeaderTitle.styles = [...Reflect.get(_b, "styles", _a), timelineItemHeaderTitleStyles()];
TimelineItemHeaderTitle.define();
class TimelineItemIcon extends Component {
static define() {
Component.define({
name: 'm-timeline-item-icon',
constructor: TimelineItemIcon,
});
}
connectedCallback() {
super.connectedCallback();
this.slot = 'item-icon';
}
render() {
return x `<slot></slot>`;
}
}
TimelineItemIcon.styles = [timelineIconStyles()];
TimelineItemIcon.define();
function toggleGroupStyles() {
return [
i$9 `
:host {
display: flex;
flex-wrap: wrap;
gap: ${getToken$1('spacing-1')};
inline-size: max-content;
border: 1px solid ${getColor('color-border-input')};
padding: ${getToken$1('spacing-1')};
border-radius: ${getToken$1('border-radius-s')};
box-sizing: border-box;
block-size: ${getToken$1('global-height-default')};
outline: none;
}
:host([size='small']) {
block-size: ${getToken$1('global-height-small')};
}
:host([size='small']) ::slotted(m-toggle) {
${typography('button-sm')};
--m-toggle-base-size: 18px;
--m-toggle-icon-size: 10px;
}
:host([show-check]) ::slotted(m-toggle[checked]) {
--m-toggle-icon-display: inline-flex;
}
`,
];
}
function toggleStyles() {
return [
styles$F(),
i$9 `
:host {
${typography('button-md')};
/*
* These custom properties are here because they are meant to be
* overriden via toggle-group styles.
*/
--m-toggle-base-size: 30px;
--m-toggle-font-size: ${getToken$1('font-size-3')};
--m-toggle-icon-size: 12px;
--m-toggle-icon-display: none;
--m-button-border-color: transparent;
--m-button-color: ${getColor('color-primary-100')};
--m-button-padding-x: ${getToken$1('spacing-2')};
--m-button-padding-y: 0;
--m-button-base-size: var(--m-toggle-base-size);
}
:host([checked]) {
--m-button-background-color: ${getColor('color-primary-20')};
}
:host(:disabled) {
--m-button-color: ${getColor('color-text-disabled')};
}
:host(:enabled:hover) {
--m-button-background-color: ${getColor('color-background-tertiary')};
--m-button-border-color: ${getColor('color-background-tertiary')};
--m-button-color: ${getColor('color-primary-100')};
}
#check {
--m-icon-size: var(--m-toggle-icon-size);
display: var(--m-toggle-icon-display);
}
`,
];
}
var _ToggleGroup_instances, _ToggleGroup_controllers, _ToggleGroup_initialize, _ToggleGroup_handleDisabledChange, _ToggleGroup_handleValueChange, _ToggleGroup_handleTypeChange, _ToggleGroup_handleFocusIn, _ToggleGroup_handleFocusOut, _ToggleGroup_handleToggleClick, _ToggleGroup_reflectValue, _ToggleGroup_toggleValue, _ToggleGroup_updateToggles;
const logger$1 = createLogger('toggle-group');
class ToggleGroup extends WithSelectionControlMixin(Component) {
static get properties() {
return {
...super.properties,
disabled: { type: Boolean },
initialValue: {
type: String,
attribute: 'initial-value',
fromAttribute,
reflect: true,
},
/**
* We use a different property name internally so the react wrapper can still
* keep track of the property while we can use custom getter/setter to
* set and reflect the `value` attribute.
*/
providedValue: {
type: String,
attribute: 'value',
fromAttribute,
},
name: { type: String, reflect: true },
showCheck: { type: Boolean, attribute: 'show-check', reflect: true },
size: { type: String, reflect: true },
type: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-toggle-group', constructor: ToggleGroup });
}
constructor() {
super();
_ToggleGroup_instances.add(this);
_ToggleGroup_controllers.set(this, void 0);
this.handleFormReset = () => {
__classPrivateFieldGet$1(this, _ToggleGroup_instances, "m", _ToggleGroup_initialize).call(this);
};
_ToggleGroup_handleDisabledChange.set(this, (disabled) => {
for (const element of __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.queried) {
element.disabled = disabled;
}
});
_ToggleGroup_handleValueChange.set(this, (value) => {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").selection.init(value);
__classPrivateFieldGet$1(this, _ToggleGroup_reflectValue, "f").call(this);
__classPrivateFieldGet$1(this, _ToggleGroup_updateToggles, "f").call(this);
});
_ToggleGroup_handleTypeChange.set(this, (type) => {
this.role = ['single', 'single-strict'].includes(type)
? 'radiogroup'
: 'group';
__classPrivateFieldGet$1(this, _ToggleGroup_updateToggles, "f").call(this);
});
_ToggleGroup_handleFocusIn.set(this, () => {
const firstChecked = __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.queried.find((item) => item.checked && !item.hasAttribute('disabled'));
if (!firstChecked) {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.focusFirst();
}
else {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.focus(firstChecked);
}
});
_ToggleGroup_handleFocusOut.set(this, () => {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.clear();
});
_ToggleGroup_handleToggleClick.set(this, (event) => {
const element = event.target;
if (element && element.matches('m-toggle')) {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.focus(element);
__classPrivateFieldGet$1(this, _ToggleGroup_toggleValue, "f").call(this, element.value);
}
});
_ToggleGroup_reflectValue.set(this, () => {
this.setAttribute('value', toAttribute(this.value));
});
_ToggleGroup_toggleValue.set(this, (value) => {
__classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").selection.toggle(value);
__classPrivateFieldGet$1(this, _ToggleGroup_reflectValue, "f").call(this);
__classPrivateFieldGet$1(this, _ToggleGroup_updateToggles, "f").call(this);
this.emit('change');
});
_ToggleGroup_updateToggles.set(this, () => {
for (const element of __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.queried) {
element.checked = __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").selection.selection.has(element.value);
element.setAttribute('role', ['single', 'single-strict'].includes(this.type) ? 'radio' : 'checkbox');
}
});
__classPrivateFieldSet(this, _ToggleGroup_controllers, {
focus: new FocusManagerController(this, {
query: 'm-toggle',
}),
selection: new SelectionController$1(this, {
getSelectionType: () => this.type,
}),
}, "f");
}
async connectedCallback() {
super.connectedCallback();
this.size = this.size ?? 'default';
this.type = this.type ?? 'single';
this.addEventListener('focusin', __classPrivateFieldGet$1(this, _ToggleGroup_handleFocusIn, "f"));
this.addEventListener('focusout', __classPrivateFieldGet$1(this, _ToggleGroup_handleFocusOut, "f"));
this.addEventListener('click', __classPrivateFieldGet$1(this, _ToggleGroup_handleToggleClick, "f"));
await this.updateComplete;
__classPrivateFieldGet$1(this, _ToggleGroup_instances, "m", _ToggleGroup_initialize).call(this, this.getAttribute('value') ?? this.getAttribute('initial-value'));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('focusin', __classPrivateFieldGet$1(this, _ToggleGroup_handleFocusIn, "f"));
this.removeEventListener('focusout', __classPrivateFieldGet$1(this, _ToggleGroup_handleFocusOut, "f"));
this.removeEventListener('click', __classPrivateFieldGet$1(this, _ToggleGroup_handleToggleClick, "f"));
}
update(changedProperties) {
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _ToggleGroup_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('type')) {
__classPrivateFieldGet$1(this, _ToggleGroup_handleTypeChange, "f").call(this, this.type);
}
if (changedProperties.has('providedValue') &&
this.providedValue &&
hasValueChanged(this.providedValue, this.value)) {
this.value = this.providedValue;
}
super.update(changedProperties);
}
render() {
return x `<slot></slot>`;
}
get value() {
return __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").selection.value();
}
set value(value) {
__classPrivateFieldGet$1(this, _ToggleGroup_handleValueChange, "f").call(this, this.getRawValue(value));
}
}
_ToggleGroup_controllers = new WeakMap(), _ToggleGroup_handleDisabledChange = new WeakMap(), _ToggleGroup_handleValueChange = new WeakMap(), _ToggleGroup_handleTypeChange = new WeakMap(), _ToggleGroup_handleFocusIn = new WeakMap(), _ToggleGroup_handleFocusOut = new WeakMap(), _ToggleGroup_handleToggleClick = new WeakMap(), _ToggleGroup_reflectValue = new WeakMap(), _ToggleGroup_toggleValue = new WeakMap(), _ToggleGroup_updateToggles = new WeakMap(), _ToggleGroup_instances = new WeakSet(), _ToggleGroup_initialize = function _ToggleGroup_initialize(value) {
// TODO: should we check if it's not hidden or disabled?
const firstToggle = __classPrivateFieldGet$1(this, _ToggleGroup_controllers, "f").focus.queried?.[0];
if (!firstToggle) {
logger$1.warn('No toggle found in the group');
return;
}
let consolidatedValue;
if (this.type === 'single-strict') {
consolidatedValue = this.getRawValue(value || this.initialValue || firstToggle.value);
}
else {
consolidatedValue = this.getRawValue(value || this.initialValue || null);
}
__classPrivateFieldGet$1(this, _ToggleGroup_handleValueChange, "f").call(this, consolidatedValue);
__classPrivateFieldGet$1(this, _ToggleGroup_handleDisabledChange, "f").call(this, Boolean(this.disabled));
};
ToggleGroup.styles = [toggleGroupStyles()];
ToggleGroup.define();
var _Toggle_handleClick, _Toggle_handleCheckedChange, _Toggle_handleDisabledChange;
class Toggle extends WithIdElementMixin(WithFormComponentMixin(Component)) {
constructor() {
super(...arguments);
_Toggle_handleClick.set(this, (event) => {
if (this.disabled) {
event.stopPropagation();
}
});
_Toggle_handleCheckedChange.set(this, (checked) => {
if (!this.name) {
const group = this.closest('m-toggle-group');
this.name = group?.name ?? group?.getAttribute('name') ?? '';
}
this.setFormValue(checked ? this.value : null);
this.setAttribute('aria-checked', String(checked));
});
_Toggle_handleDisabledChange.set(this, (disabled) => {
if (this.button) {
this.button.disabled = disabled;
}
});
}
static get properties() {
return {
...super.properties,
checked: { type: Boolean, reflect: true },
role: { type: String, reflect: true },
value: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-toggle', constructor: Toggle });
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _Toggle_handleClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _Toggle_handleClick, "f"));
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('disabled')) {
__classPrivateFieldGet$1(this, _Toggle_handleDisabledChange, "f").call(this, Boolean(this.disabled));
}
if (changedProperties.has('checked')) {
__classPrivateFieldGet$1(this, _Toggle_handleCheckedChange, "f").call(this, Boolean(this.checked));
}
}
render() {
return x `
<button id="button" type="button" class="button">
<slot name="leading" slot="leading">
<m-icon id="check" name="check"></m-icon>
</slot>
<slot></slot>
</button>
`;
}
get button() {
return this.renderRoot?.querySelector('button') ?? null;
}
// eslint-disable-next-line class-methods-use-this
formResetCallback() {
// toggle-group will take care of this
}
formStateRestoreCallback(state) {
if (state != null) {
this.checked = Boolean(state);
}
}
formDisabledCallback(disabled) {
super.formDisabledCallback(disabled);
__classPrivateFieldGet$1(this, _Toggle_handleDisabledChange, "f").call(this, disabled);
}
}
_Toggle_handleClick = new WeakMap(), _Toggle_handleCheckedChange = new WeakMap(), _Toggle_handleDisabledChange = new WeakMap();
Toggle.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
Toggle.styles = [toggleStyles()];
Toggle.define();
function trim(value) {
return value.trim();
}
function convertTriggerFromAttribute(value) {
if (!value) {
return ['focus', 'hover'];
}
if (Array.isArray(value)) {
return value.filter(Boolean).sort();
}
return String(value)
.split(/[\s,]+/)
.map(trim)
.filter(Boolean)
.sort();
}
function styles$3() {
return [
styles$k({
floatingSelector: ':host', // the host itself is the floating element
}),
i$9 `
:host {
--m-popover-width: max-content;
--m-popover-min-width: 80px;
--m-popover-max-width: 240px;
--m-popover-overflow-x: visible;
}
`,
];
}
var _Tooltip_hoverTimeout, _Tooltip_focusTimeout, _Tooltip_triggers, _Tooltip_handleFocus, _Tooltip_handleBlur, _Tooltip_handleClick, _Tooltip_handleKeyDown, _Tooltip_handleMouseOver, _Tooltip_handleMouseOut, _Tooltip_hasTrigger;
const logger = createLogger('tooltip');
class Tooltip extends WithIdElementMixin(Popover) {
static get properties() {
return {
...Popover.properties,
trigger: { type: String },
anchor: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-tooltip', constructor: Tooltip });
}
constructor() {
super();
_Tooltip_hoverTimeout.set(this, void 0);
_Tooltip_focusTimeout.set(this, void 0);
/**
* Converted/parsed trigger attribute.
*/
_Tooltip_triggers.set(this, []);
_Tooltip_handleFocus.set(this, () => {
if (__classPrivateFieldGet$1(this, _Tooltip_hasTrigger, "f").call(this, 'focus')) {
clearTimeout(__classPrivateFieldGet$1(this, _Tooltip_focusTimeout, "f"));
__classPrivateFieldSet(this, _Tooltip_focusTimeout, window.setTimeout(() => this.show(), 450), "f");
}
});
_Tooltip_handleBlur.set(this, () => {
if (__classPrivateFieldGet$1(this, _Tooltip_hasTrigger, "f").call(this, 'focus')) {
clearTimeout(__classPrivateFieldGet$1(this, _Tooltip_focusTimeout, "f"));
__classPrivateFieldSet(this, _Tooltip_focusTimeout, window.setTimeout(() => this.hide(), 450), "f");
}
});
_Tooltip_handleClick.set(this, () => {
if (__classPrivateFieldGet$1(this, _Tooltip_hasTrigger, "f").call(this, 'click')) {
this.toggle();
}
});
_Tooltip_handleKeyDown.set(this, (event) => {
if (this.open && event.key === 'Escape') {
event.stopPropagation();
this.hide();
}
});
_Tooltip_handleMouseOver.set(this, () => {
if (__classPrivateFieldGet$1(this, _Tooltip_hasTrigger, "f").call(this, 'hover')) {
clearTimeout(__classPrivateFieldGet$1(this, _Tooltip_hoverTimeout, "f"));
__classPrivateFieldSet(this, _Tooltip_hoverTimeout, window.setTimeout(() => this.show(), 450), "f");
}
});
_Tooltip_handleMouseOut.set(this, () => {
if (__classPrivateFieldGet$1(this, _Tooltip_hasTrigger, "f").call(this, 'hover')) {
clearTimeout(__classPrivateFieldGet$1(this, _Tooltip_hoverTimeout, "f"));
__classPrivateFieldSet(this, _Tooltip_hoverTimeout, window.setTimeout(() => this.hide(), 450), "f");
}
});
_Tooltip_hasTrigger.set(this, (triggerType) => {
return __classPrivateFieldGet$1(this, _Tooltip_triggers, "f").includes(triggerType);
});
this.position = 'fixed';
this.placement = 'top-start';
this.trigger = 'focus,hover';
}
async connectedCallback() {
super.connectedCallback();
this.role = 'tooltip';
await this.updateComplete;
if (!this.reference) {
logger.error('no reference element provided');
return;
}
this.reference.addEventListener('blur', __classPrivateFieldGet$1(this, _Tooltip_handleBlur, "f"), true);
this.reference.addEventListener('click', __classPrivateFieldGet$1(this, _Tooltip_handleClick, "f"));
this.reference.addEventListener('focus', __classPrivateFieldGet$1(this, _Tooltip_handleFocus, "f"), true);
this.reference.addEventListener('keydown', __classPrivateFieldGet$1(this, _Tooltip_handleKeyDown, "f"));
this.reference.addEventListener('mouseout', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOut, "f"));
this.reference.addEventListener('mouseover', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOver, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
if (!this.reference) {
return;
}
this.reference.removeEventListener('blur', __classPrivateFieldGet$1(this, _Tooltip_handleBlur, "f"), true);
this.reference.removeEventListener('focus', __classPrivateFieldGet$1(this, _Tooltip_handleFocus, "f"), true);
this.reference.removeEventListener('click', __classPrivateFieldGet$1(this, _Tooltip_handleClick, "f"));
this.reference.removeEventListener('keydown', __classPrivateFieldGet$1(this, _Tooltip_handleKeyDown, "f"));
this.reference.removeEventListener('mouseover', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOver, "f"));
this.reference.removeEventListener('mouseout', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOut, "f"));
}
firstUpdated() {
super.firstUpdated();
if (this.reference) {
this.reference.setAttribute('aria-describedby', this.id);
}
}
update(changedProperties) {
if (changedProperties.has('open')) {
this.setAttribute('aria-live', this.open ? 'polite' : 'off');
}
if (changedProperties.has('trigger')) {
__classPrivateFieldSet(this, _Tooltip_triggers, convertTriggerFromAttribute(this.trigger ?? 'focus,hover'), "f");
}
super.update(changedProperties);
}
getReferenceElement() {
const rootNode = this.getRootNode();
if (rootNode instanceof ShadowRoot) {
return rootNode.getElementById(this.anchor);
}
return document.getElementById(this.anchor);
}
getFloatingElement() {
return this;
}
getArrowElement() {
return this.shadowRoot.querySelector('#arrow');
}
render() {
return x `
<slot></slot>
${this.renderArrow()}
`;
}
}
_Tooltip_hoverTimeout = new WeakMap(), _Tooltip_focusTimeout = new WeakMap(), _Tooltip_triggers = new WeakMap(), _Tooltip_handleFocus = new WeakMap(), _Tooltip_handleBlur = new WeakMap(), _Tooltip_handleClick = new WeakMap(), _Tooltip_handleKeyDown = new WeakMap(), _Tooltip_handleMouseOver = new WeakMap(), _Tooltip_handleMouseOut = new WeakMap(), _Tooltip_hasTrigger = new WeakMap();
Tooltip.styles = [styles$3()];
Tooltip.define();
const TOOLTIP_PLACEMENT_VALUES = POPOVER_PLACEMENT_VALUES;
class TopNavigation extends Component {
static get properties() {
return {
slot: { type: String, reflect: true },
};
}
static define() {
Component.define({
name: 'm-top-navigation',
constructor: TopNavigation,
});
}
constructor() {
super();
this.slot = 'top-navigation';
}
render() {
return x `
<slot name="side-navigation-trigger"></slot>
<div class="actions">
<slot></slot>
</div>
`;
}
}
TopNavigation.styles = [topNavigationStyles()];
TopNavigation.define();
var _TopNavigationItem_handleLinkClick, _TopNavigationItem_handleHostClick, _TopNavigationItem_isLink;
class TopNavigationItem extends Component {
constructor() {
super(...arguments);
/**
* This handler will kick in when the user clicks the link.
*/
// eslint-disable-next-line class-methods-use-this
_TopNavigationItem_handleLinkClick.set(this, (event) => {
/**
* Do **NOT** remove this event.stopPropagation() because it will cause
* the `#handleHostClick` to` enter an infinite loop, if called.
*/
event.stopPropagation();
});
/**
* This handler is here FOR TESTING PURPOSES ONLY, so we manually
* forward the click on the host to the internal link (<a>).
*
* Based on https://github.com/adobe/spectrum-web-components/blob/main/packages/checkbox/src/Checkbox.ts;
*/
_TopNavigationItem_handleHostClick.set(this, () => {
if (__classPrivateFieldGet$1(this, _TopNavigationItem_isLink, "f").call(this)) {
this.link?.click();
}
});
_TopNavigationItem_isLink.set(this, () => {
return Boolean(this.href);
});
}
static get properties() {
return {
...super.properties,
href: { type: String, reflect: true },
target: { type: String, reflect: true },
rel: { type: String, reflect: true },
download: { type: String, reflect: true },
ping: { type: String, reflect: true },
referrerpolicy: { type: String, reflect: true },
};
}
/**
* Controlled value of the selected step.
*/
static define() {
Component.define({
name: 'm-top-navigation-item',
constructor: TopNavigationItem,
});
}
async connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet$1(this, _TopNavigationItem_handleHostClick, "f"));
}
disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener('click', __classPrivateFieldGet$1(this, _TopNavigationItem_handleHostClick, "f"));
}
firstUpdated() {
// check if this has a dropdown ancestor; this is necessary so the dropdown recognizes the navigation item as its trigger
if (this.closest('m-dropdown')) {
this.setAttribute('aria-haspopup', 'true');
}
}
// eslint-disable-next-line class-methods-use-this
renderAsButton() {
return x `
<button id="button" type="button" class="top-navigation-item">
<slot></slot>
</button>
`;
}
renderAsLink() {
return x `
<a
id="button"
href=${o$3(this.href_attribute)}
target=${o$3(this.target)}
rel=${o$3(this.rel_attribute)}
download=${o$3(this.download)}
ping=${o$3(this.ping)}
referrerpolicy=${o$3(this.referrerpolicy)}
@click=${__classPrivateFieldGet$1(this, _TopNavigationItem_handleLinkClick, "f")}
class="top-navigation-item"
>
<slot></slot>
</a>
`;
}
render() {
const isLink = __classPrivateFieldGet$1(this, _TopNavigationItem_isLink, "f").call(this);
return x ` ${isLink ? this.renderAsLink() : this.renderAsButton()} `;
}
get link() {
return this.renderRoot?.querySelector('a') ?? null;
}
get button() {
return this.renderRoot?.querySelector('button') ?? null;
}
get href_attribute() {
const isDisabled = !this.href || UNSAFE_URL.test(this.href.trim());
return isDisabled ? undefined : this.href;
}
get rel_attribute() {
let result = this.rel;
if (this.target === '_blank') {
const rel = new Set((this.rel ?? '').split(/\s+/).filter(Boolean));
// If the developers are deliberately setting the `referrerpolicy`,
// they should know what they are doing, so we must not override it.
if (!this.referrerpolicy?.trim()) {
rel.add('noreferrer');
}
// If the developers are deliberately setting the `rel="opener"`,
// they should know what they are doing, so we must not override it.
if (!rel.has('opener')) {
rel.add('noopener');
}
result = Array.from(rel).join(' ');
}
return result;
}
}
_TopNavigationItem_handleLinkClick = new WeakMap(), _TopNavigationItem_handleHostClick = new WeakMap(), _TopNavigationItem_isLink = new WeakMap();
TopNavigationItem.shadowRootOptions = {
...r$5.shadowRootOptions,
delegatesFocus: true,
};
TopNavigationItem.styles = [topNavigationItemStyles()];
TopNavigationItem.define();
function styles$2() {
return i$9 `
:host {
inline-size: var(--m-logo-size);
block-size: var(--m-logo-size);
display: block;
}
:host linearGradient {
transform-origin: center;
}
`;
}
var _LogoLoader_instances, _LogoLoader_getSize;
const DEFAULT_SIZE = '48';
class LogoLoader extends Component {
constructor() {
super(...arguments);
_LogoLoader_instances.add(this);
}
static get properties() {
return {
size: { type: String, reflect: true },
};
}
static define() {
Component.define({ name: 'm-logo-loader', constructor: LogoLoader });
}
connectedCallback() {
super.connectedCallback();
this.style.setProperty('--m-logo-size', __classPrivateFieldGet$1(this, _LogoLoader_instances, "m", _LogoLoader_getSize).call(this));
}
update(changedProperties) {
super.update(changedProperties);
if (changedProperties.has('size')) {
this.style.setProperty('--m-logo-size', __classPrivateFieldGet$1(this, _LogoLoader_instances, "m", _LogoLoader_getSize).call(this));
}
}
render() {
return b$2 `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 49 48"><g opacity=".7"><mask id="a" width="49" height="16" x="0" y="32" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M32.1364 48H.5l15.1072-15.2727H48.5L33.4266 47.317c-.3323.3324-.818.683-1.2902.683Z"/></mask><g mask="url(#a)"><path fill="url(#b)" d="M-10.4091-10.9091h69.8182v69.8182h-69.8182z"/></g></g><mask id="c" width="32" height="17" x="17" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M17.9546 16.3636V0H48.5L33.2273 16.3636H17.9546Z"/></mask><g mask="url(#c)"><path fill="url(#d)" d="M-10.4091-10.9091h69.8182v69.8182h-69.8182z"/></g><g opacity=".7"><mask id="e" width="16" height="31" x="33" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M48.5 30.5455H33.2273V16.3637L48.5 0v30.5455Z"/></mask><g mask="url(#e)"><path fill="url(#f)" d="M-10.4091-10.9091h69.8182v69.8182h-69.8182z"/></g></g><mask id="g" width="16" height="48" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M15.7727 0v32.7273L.5 48V16.94c0-.4722.18803-.9226.52036-1.2571L15.7727 0Z"/></mask><g mask="url(#g)"><path fill="url(#h)" d="M-10.4091-10.9091h69.8182v69.8182h-69.8182z"/></g><defs><linearGradient id="b" x1="3.56649" x2="53.8665" y1="50.4164" y2=".131295" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#00D7D7"/><stop offset="1" stop-color="#84F11E"/><animateTransform attributeName="gradientTransform" dur="0.8s" repeatCount="indefinite" type="rotate" values="0; 360"/></linearGradient><linearGradient id="d" x1="3.56649" x2="53.8665" y1="50.4164" y2=".131295" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#00D7D7"/><stop offset="1" stop-color="#84F11E"/><animateTransform attributeName="gradientTransform" dur="0.8s" repeatCount="indefinite" type="rotate" values="0; 360"/></linearGradient><linearGradient id="f" x1="3.56649" x2="53.8665" y1="50.4164" y2=".131295" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#00D7D7"/><stop offset="1" stop-color="#84F11E"/><animateTransform attributeName="gradientTransform" dur="0.8s" repeatCount="indefinite" type="rotate" values="0; 360"/></linearGradient><linearGradient id="h" x1="3.56649" x2="53.8665" y1="50.4164" y2=".131295" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#00D7D7"/><stop offset="1" stop-color="#84F11E"/><animateTransform attributeName="gradientTransform" dur="0.8s" repeatCount="indefinite" type="rotate" values="0; 360"/></linearGradient></defs></svg>`;
}
}
_LogoLoader_instances = new WeakSet(), _LogoLoader_getSize = function _LogoLoader_getSize() {
const parsedSize = parseInt(this.size ?? DEFAULT_SIZE, 10);
if (Number.isNaN(parsedSize)) {
return `${DEFAULT_SIZE}px`;
}
return `${parsedSize || DEFAULT_SIZE}px`;
};
LogoLoader.styles = [styles$2()];
LogoLoader.define();
function styles$1() {
return i$9 `
:host {
--m-file-picker-padding: ${getToken$1('spacing-4')};
--m-file-picker-border-radius: ${getToken$1('border-radius-s')};
--m-file-picker-border: 1px dashed ${getColor('color-border-input')};
--m-file-picker-background: ${getColor('color-background-secondary')};
--m-file-picker-border-error: 1px dashed ${getColor('color-text-error')};
--m-file-picker-shadow: ${getToken$1('elevation-3')};
box-sizing: border-box;
display: block;
width: 100%;
min-width: 320px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.m-file-picker {
display: flex;
flex: 1;
flex-direction: column;
gap: ${getToken$1('spacing-4')};
}
.m-file-picker__dropzone {
border-radius: var(--m-file-picker-border-radius);
border: var(--m-file-picker-border);
background: var(--m-file-picker-background);
padding: var(--m-file-picker-padding);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: ${getToken$1('spacing-4')};
${transition([
{ property: 'background-color' },
{ property: 'box-shadow' },
])};
}
.m-file-picker__dropzone:hover {
cursor: pointer;
background-color: ${getColor('color-background-tertiary')};
border-color: ${getColor('color-primary-60')};
}
.m-file-picker__dropzone:has(.m-file-picker__input:focus) {
box-shadow: var(--m-file-picker-shadow);
}
.m-file-picker__dropzone-icon {
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: ${getColor('color-background-tertiary')};
}
.m-file-picker__file-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.m-file-picker__input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.is-dragging .m-file-picker__dropzone {
background-color: ${getColor('color-background-tertiary')};
border: 1px solid ${getColor('color-primary-60')};
}
.is-error .m-file-picker__dropzone {
border: var(--m-file-picker-border-error);
}
.is-disabled .m-file-picker__dropzone,
.is-disabled.is-dragging .m-file-picker__dropzone {
cursor: not-allowed;
opacity: 0.5;
}
`;
}
const BYTES_PER_KILOBYTE = 1024;
const FILE_SIZE_ABBREVIATIONS = [
'B',
'KiB',
'MiB',
'GiB',
'TiB',
'PiB',
'EiB',
'ZiB',
'YiB',
];
function formatBytes(bytes, decimals = 2) {
const bytesValue = Number(bytes);
if (!bytesValue || bytesValue < 0) {
return '0B';
}
const dm = Math.max(0, decimals);
const unit = Math.floor(Math.log(bytesValue) / Math.log(BYTES_PER_KILOBYTE));
const unitAbbr = FILE_SIZE_ABBREVIATIONS[Math.min(unit, FILE_SIZE_ABBREVIATIONS.length - 1)];
return `${parseFloat((bytesValue / BYTES_PER_KILOBYTE ** unit).toFixed(dm))}${unitAbbr}`;
}
function styles() {
return i$9 `
:host {
--m-file-padding: ${getToken$1('spacing-2')} ${getToken$1('spacing-3')};
--m-file-border-radius: ${getToken$1('border-radius-s')};
--m-file-border: 1px solid ${getColor('color-border-input')};
--m-file-background: ${getColor('color-background-primary')};
box-sizing: border-box;
display: block;
width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.m-file-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--m-file-background);
border-radius: var(--m-file-border-radius);
padding: var(--m-file-padding);
border: var(--m-file-border);
gap: ${getToken$1('spacing-4')};
}
.m-file-item__icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background-color: ${getColor('color-background-tertiary')};
padding: 5px;
}
.m-file-item__content {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
.is-error {
border: 1px solid ${getColor('color-text-error')};
background-color: ${getColor('color-danger-20')};
}
.is-error .m-file-item__icon,
.is-loading .m-file-item__icon {
background-color: transparent;
}
`;
}
var _FileItem_instances, _FileItem_icon, _FileItem_description, _FileItem_fileSize, _FileItem_fileExtension, _FileItem_handleRemove;
function getFileIcon(type) {
switch (type) {
case 'image/png':
case 'image/jpeg':
return 'document-image';
case 'text/csv':
case 'application/csv':
return 'document-csv';
default:
return 'document-file';
}
}
class FileItem extends Component {
constructor() {
super();
_FileItem_instances.add(this);
this.status = 'initial';
}
static define() {
Component.define({ name: 'm-file-item', constructor: FileItem });
}
static get properties() {
return {
name: { type: String, attribute: 'name', reflect: true },
type: { type: String, attribute: 'type', reflect: true },
size: { type: Number, attribute: 'size', reflect: true },
status: { type: String, attribute: 'status', reflect: true },
};
}
render() {
return x `<div
class="m-file-item ${e$1({
'is-loading': this.status === 'loading',
'is-success': this.status === 'success',
'is-error': this.status === 'error',
})}"
>
<span class="m-file-item__icon">${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_icon).call(this)}</span>
<div class="m-file-item__content">
<m-text variant="body-md" color="color-text-primary" ellipsized>
${this.name}
</m-text>
<m-text variant="body-sm" color="color-text-tertiary">
${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_description).call(this)}
</m-text>
</div>
<m-button
type="button"
variant="icon-secondary"
@click=${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_handleRemove)}
aria-label=${`Remove file ${this.name}`}
>
<m-icon name="close" size="16" color="color-text-primary"></m-icon>
</m-button>
</div>`;
}
}
_FileItem_instances = new WeakSet(), _FileItem_icon = function _FileItem_icon() {
if (this.status === 'loading') {
return x `<m-spinner-wheel size="16"></m-spinner-wheel>`;
}
if (this.status === 'error') {
return x `<m-icon name="attention" size="16" color="color-text-error">
</m-icon>`;
}
if (this.status === 'success') {
return x `<m-icon name="check" size="16" color="color-primary-60">
</m-icon>`;
}
const iconName = getFileIcon(this.type);
return x `<m-icon name="${iconName}" size="16" color="color-primary-60">
</m-icon>`;
}, _FileItem_description = function _FileItem_description() {
if (this.status === 'loading') {
return `Uploading ${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileSize).call(this)} ${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileExtension).call(this)} file...`;
}
if (this.status === 'error') {
return 'Upload failed';
}
if (this.status === 'success') {
return `${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileSize).call(this)} ${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileExtension).call(this)} file`;
}
return `Waiting to upload ${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileSize).call(this)} ${__classPrivateFieldGet$1(this, _FileItem_instances, "m", _FileItem_fileExtension).call(this)} file`;
}, _FileItem_fileSize = function _FileItem_fileSize() {
return formatBytes(this.size, 0);
}, _FileItem_fileExtension = function _FileItem_fileExtension() {
if (!this.name)
return '';
const parts = this.name.split('.');
if (parts.length < 2)
return '';
return parts.pop().toLowerCase();
}, _FileItem_handleRemove = function _FileItem_handleRemove() {
const options = {
detail: { value: this.name },
bubbles: true,
composed: false,
};
this.dispatchEvent(new CustomEvent('remove', options));
};
FileItem.styles = [styles()];
FileItem.define();
var _FilePicker_instances, _FilePicker_input_get, _FilePicker_handleFileChange, _FilePicker_handleFileRemoval, _FilePicker_handleDragOver, _FilePicker_handleDragLeave, _FilePicker_handleFileDrop, _FilePicker_handleBrowseClick;
class FilePicker extends Component {
constructor() {
super(...arguments);
_FilePicker_instances.add(this);
}
static get properties() {
return {
accept: { type: String, attribute: 'accept', reflect: true },
id: { type: String, attribute: 'id', reflect: true },
disabled: { type: Boolean, attribute: 'disabled', reflect: true },
error: { type: String, attribute: 'error', reflect: true },
hint: { type: String, attribute: 'hint', reflect: true },
name: { type: String, attribute: 'name', reflect: true },
status: { type: String, attribute: 'status', reflect: true },
files: { type: Array, attribute: 'files', reflect: true },
dragging: { type: Boolean, state: true, reflect: true },
};
}
static define() {
Component.define({ name: 'm-file-picker', constructor: FilePicker });
}
addFiles(files) {
this.files = Array.from(files).map((file) => ({
value: file,
status: 'initial',
}));
this.emit('change');
}
removeFiles() {
this.files = undefined;
this.emit('change');
}
render() {
// todo: support multiple files
const file = this.files?.[0];
return x `
<div
class="m-file-picker ${e$1({
'is-error': this.status === 'danger',
'is-disabled': Boolean(this.disabled),
'is-dragging': this.dragging,
})}"
@dragover=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleDragOver)}
@dragleave=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleDragLeave)}
@drop=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleFileDrop)}
>
<m-stack gap="spacing-3">
${this.hint
? x `<m-text variant="body-sm" color="color-text-tertiary">
${this.hint}
</m-text>`
: null}
<div
class="m-file-picker__dropzone"
@click=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleBrowseClick)}
>
<input
type="file"
class="m-file-picker__input"
id=${o$3(this.id)}
name=${o$3(this.name)}
?disabled=${this.disabled}
@change=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleFileChange)}
accept=${o$3(this.accept)}
/>
<span class="m-file-picker__dropzone-icon">
<m-icon name="upload" size="32" color="color-primary-60"></m-icon>
</span>
<m-text variant="body-md">
<m-text variant="body-md-bold-underline" color="color-primary-60">
Browse
</m-text>
or drag files here
</m-text>
</div>
${this.error
? x `<m-text variant="body-sm" color="color-text-error">
${this.error}
</m-text>`
: null}
</m-stack>
${file
? x `<ul class="m-file-picker__file-list">
<li class="m-file-picker__file-item">
<m-file-item
name=${o$3(file.value.name)}
type=${o$3(file.value.type)}
size=${o$3(file.value.size)}
status=${o$3(file.status)}
@remove=${__classPrivateFieldGet$1(this, _FilePicker_instances, "m", _FilePicker_handleFileRemoval)}
></m-file-item>
</li>
</ul>`
: null}
</div>
`;
}
}
_FilePicker_instances = new WeakSet(), _FilePicker_input_get = function _FilePicker_input_get() {
return this.renderRoot.querySelector('.m-file-picker__input');
}, _FilePicker_handleFileChange = function _FilePicker_handleFileChange(event) {
const { files } = event.target;
if (files && files.length > 0) {
this.addFiles(files);
}
else {
this.removeFiles();
}
__classPrivateFieldGet$1(this, _FilePicker_instances, "a", _FilePicker_input_get).value = '';
}, _FilePicker_handleFileRemoval = function _FilePicker_handleFileRemoval() {
this.removeFiles();
}, _FilePicker_handleDragOver = function _FilePicker_handleDragOver(event) {
event.preventDefault();
event.stopPropagation();
this.dragging = true;
}, _FilePicker_handleDragLeave = function _FilePicker_handleDragLeave(event) {
event.stopPropagation();
event.preventDefault();
this.dragging = false;
}, _FilePicker_handleFileDrop = function _FilePicker_handleFileDrop(event) {
event.preventDefault();
if (this.disabled)
return;
const { files } = event.dataTransfer;
this.addFiles(files);
this.dragging = false;
}, _FilePicker_handleBrowseClick = function _FilePicker_handleBrowseClick() {
__classPrivateFieldGet$1(this, _FilePicker_instances, "a", _FilePicker_input_get)?.click();
};
FilePicker.styles = [styles$1()];
FilePicker.define();
export { DropdownItem as $, Accordion as A, BackButton as B, Card as C, Dialog as D, DIALOG_SIZES as E, DIALOG_VARIANTS as F, DialogActionPrimary as G, DialogActionSecondary as H, DialogActionTertiary as I, DialogActions as J, DialogBody as K, DialogClose as L, DialogFooter as M, DialogHeader as N, Divider as O, Drawer as P, DRAWER_SIZES as Q, DrawerActionPrimary as R, DrawerActionSecondary as S, DrawerActionTertiary as T, DrawerActions as U, DrawerBody as V, DrawerClose as W, DrawerHeader as X, Dropdown as Y, DropdownTrigger as Z, DropdownMenu as _, AccordionTitle as a, Select as a$, DropdownDivider as a0, EmptyStateAction as a1, EmptyStateHeader as a2, EmptyStateIllustration as a3, EmptyStateMessage as a4, EmptyState as a5, EMPTY_STATE_VARIANTS as a6, Field as a7, FieldHint as a8, FieldLabel as a9, defaultSidebarProps as aA, Switcher as aB, defaultSwitcherProps as aC, Container as aD, Row as aE, Column as aF, Link as aG, Page as aH, PageContent as aI, Pagination as aJ, ProgressBar as aK, ProgressBarCountdown as aL, Radio as aM, RadioGroup as aN, Section as aO, SectionTitle as aP, SideNavigation as aQ, SideNavigationHeader as aR, SideNavigationBody as aS, SideNavigationItem as aT, SideNavigationDivider as aU, SideNavigationSubNav as aV, SideNavigationSubNavContent as aW, SideNavigationSubNavItem as aX, SideNavigationSubNavTitle as aY, SideNavigationFooter as aZ, SideNavigationTrigger as a_, FIELD_STATUSES as aa, Header as ab, HeaderActions as ac, HeaderContent as ad, HeaderTabs as ae, HeaderTitle as af, SubHeader as ag, AVAILABLE_ICONS as ah, DEPRECATED_OR_ALIAS_ICONS as ai, Icon as aj, Label as ak, defaultLabeledValueProps as al, LabeledValue as am, LabeledValueLabel as an, LabeledValueValue as ao, ALIGN_ITEMS_VALUES as ap, JUSTIFY_CONTENT_VALUES as aq, Box as ar, defaultBoxProps as as, Group as at, defaultGroupProps as au, Stack as av, defaultStackProps as aw, Grid as ax, defaultGridProps as ay, Sidebar as az, b, SelectOption as b0, SpinnerWheel as b1, Steps as b2, Step as b3, Switch as b4, Table$1 as b5, defaultTableProps$1 as b6, TableHead$1 as b7, TableHeadCell$1 as b8, defaultTableHeadCellProps$1 as b9, TabPanel as bA, Tag as bB, TagRemove as bC, TagExpand as bD, ActionableTag as bE, Text as bF, TextArea as bG, TextField as bH, Timeline as bI, TimelineExpandableItem as bJ, TimelineItem as bK, TimelineItemBody as bL, TimelineItemFooter as bM, TimelineItemHeader as bN, TimelineItemHeaderSubtitle as bO, TimelineItemHeaderTitle as bP, TimelineItemIcon as bQ, ToggleGroup as bR, Toggle as bS, Tooltip as bT, TOOLTIP_PLACEMENT_VALUES as bU, TopNavigation as bV, TopNavigationItem as bW, LogoLoader as bX, DotsLoader as bY, FilePicker as bZ, FileItem as b_, TableBody$1 as ba, TableFoot$1 as bb, TableRow$1 as bc, TableCell$1 as bd, defaultTableCellProps$1 as be, TableToolbar as bf, TableFeedback as bg, TableActions as bh, TableSelectionCell as bi, Table as bj, defaultTableProps as bk, TableHead as bl, TableBody as bm, TableFoot as bn, TableRow as bo, TableCell as bp, defaultTableCellProps as bq, TableHeadCell as br, TableRowSelect as bs, TableRowExpand as bt, TableLayoutToolbar as bu, TableLayoutFeedback as bv, TableLayoutActions as bw, TableLayout as bx, Tabs as by, Tab as bz, AccordionContent as c, Avatar as d, Badge as e, BannerActionPrimary as f, BannerActionSecondary as g, BannerActions as h, BannerDescription as i, BannerIcon as j, BannerTitle as k, Banner as l, Body as m, Button as n, CardBody as o, CardSubtitle as p, CardTitle as q, CardDivider as r, CardFooter as s, typographyVariants as t, CardActionPrimary as u, CardActionSecondary as v, CardActionTertiary as w, CaretButton as x, Checkbox as y, CloseButton as z };