mbio-ui
Version:
Web components library containing lightweight, ready-to-use and framework-agnostic User Interface elements.
109 lines • 22.6 kB
JavaScript
!function(t){var e={};function __webpack_require__(r){if(e[r])return e[r].exports;var s=e[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,__webpack_require__),s.l=!0,s.exports}__webpack_require__.m=t,__webpack_require__.c=e,__webpack_require__.d=function(t,e,r){__webpack_require__.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},__webpack_require__.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},__webpack_require__.t=function(t,e){if(1&e&&(t=__webpack_require__(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(__webpack_require__.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)__webpack_require__.d(r,s,function(e){return t[e]}.bind(null,s));return r},__webpack_require__.n=function(t){var e=t&&t.__esModule?function getDefault(){return t.default}:function getModuleExports(){return t};return __webpack_require__.d(e,"a",e),e},__webpack_require__.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=80)}({0:function(t,e,r){"use strict";r.d(e,"b",(function(){return css_tag_r})),r.d(e,"c",(function(){return s.a})),r.d(e,"a",(function(){return lit_element_h}));var s=r(3);const o=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,l=Symbol();class n{constructor(t,e){if(e!==l)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return o&&void 0===this.t&&(this.t=new CSSStyleSheet,this.t.replaceSync(this.cssText)),this.t}toString(){return this.cssText}}const h=new Map,css_tag_r=(t,...e)=>{const r=e.reduce((e,r,s)=>e+(t=>{if(t instanceof n)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\n take care to ensure page security.`)})(r)+t[s+1],t[0]);let s=h.get(r);return void 0===s&&h.set(r,s=new n(r,l)),s},u=o?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const r of t.cssRules)e+=r.cssText;return(t=>new n(t+"",l))(e)})(t):t;var p,v,f,g;const y={toAttribute(t,e){switch(e){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let r=t;switch(e){case Boolean:r=null!==t;break;case Number:r=null===t?null:Number(t);break;case Object:case Array:try{r=JSON.parse(t)}catch(t){r=null}}return r}},reactive_element_n=(t,e)=>e!==t&&(e==e||t==t),m={attribute:!0,type:String,converter:y,reflect:!1,hasChanged:reactive_element_n};class reactive_element_a extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πl=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πh=null,this.u()}static addInitializer(t){var e;null!==(e=this.v)&&void 0!==e||(this.v=[]),this.v.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,r)=>{const s=this.Πp(r,e);void 0!==s&&(this.Πm.set(s,r),t.push(s))}),t}static createProperty(t,e=m){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const r="symbol"==typeof t?Symbol():"__"+t,s=this.getPropertyDescriptor(t,r,e);void 0!==s&&Object.defineProperty(this.prototype,t,s)}}static getPropertyDescriptor(t,e,r){return{get(){return this[e]},set(s){const o=this[t];this[e]=s,this.requestUpdate(t,o,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||m}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πm=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const r of e)this.createProperty(r,t[r])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const r=new Set(t.flat(1/0).reverse());for(const t of r)e.unshift(u(t))}else void 0!==t&&e.push(u(t));return e}static"Πp"(t,e){const r=e.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this.Πg=new Promise(t=>this.enableUpdating=t),this.L=new Map,this.Π_(),this.requestUpdate(),null===(t=this.constructor.v)||void 0===t||t.forEach(t=>t(this))}addController(t){var e,r;(null!==(e=this.ΠU)&&void 0!==e?e:this.ΠU=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(r=t.hostConnected)||void 0===r||r.call(t))}removeController(t){var e;null===(e=this.ΠU)||void 0===e||e.splice(this.ΠU.indexOf(t)>>>0,1)}"Π_"(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this.Πi.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{o?t.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet):e.forEach(e=>{const r=document.createElement("style");r.textContent=e.cssText,t.appendChild(r)})})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this.ΠU)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}),this.Πl&&(this.Πl(),this.Πo=this.Πl=void 0)}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this.ΠU)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}),this.Πo=new Promise(t=>this.Πl=t)}attributeChangedCallback(t,e,r){this.K(t,r)}"Πj"(t,e,r=m){var s,o;const l=this.constructor.Πp(t,r);if(void 0!==l&&!0===r.reflect){const h=(null!==(o=null===(s=r.converter)||void 0===s?void 0:s.toAttribute)&&void 0!==o?o:y.toAttribute)(e,r.type);this.Πh=t,null==h?this.removeAttribute(l):this.setAttribute(l,h),this.Πh=null}}K(t,e){var r,s,o;const l=this.constructor,h=l.Πm.get(t);if(void 0!==h&&this.Πh!==h){const t=l.getPropertyOptions(h),u=t.converter,p=null!==(o=null!==(s=null===(r=u)||void 0===r?void 0:r.fromAttribute)&&void 0!==s?s:"function"==typeof u?u:null)&&void 0!==o?o:y.fromAttribute;this.Πh=h,this[h]=p(e,t.type),this.Πh=null}}requestUpdate(t,e,r){let s=!0;void 0!==t&&(((r=r||this.constructor.getPropertyOptions(t)).hasChanged||reactive_element_n)(this[t],e)?(this.L.has(t)||this.L.set(t,e),!0===r.reflect&&this.Πh!==t&&(void 0===this.Πk&&(this.Πk=new Map),this.Πk.set(t,r))):s=!1),!this.isUpdatePending&&s&&(this.Πg=this.Πq())}async"Πq"(){this.isUpdatePending=!0;try{for(await this.Πg;this.Πo;)await this.Πo}catch(t){Promise.reject(t)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach((t,e)=>this[e]=t),this.Πi=void 0);let e=!1;const r=this.L;try{e=this.shouldUpdate(r),e?(this.willUpdate(r),null===(t=this.ΠU)||void 0===t||t.forEach(t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)}),this.update(r)):this.Π$()}catch(t){throw e=!1,this.Π$(),t}e&&this.E(r)}willUpdate(t){}E(t){var e;null===(e=this.ΠU)||void 0===e||e.forEach(t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}"Π$"(){this.L=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πg}shouldUpdate(t){return!0}update(t){void 0!==this.Πk&&(this.Πk.forEach((t,e)=>this.Πj(e,this[e],t)),this.Πk=void 0),this.Π$()}updated(t){}firstUpdated(t){}}var _,w,x,P,E,O;reactive_element_a.finalized=!0,reactive_element_a.shadowRootOptions={mode:"open"},null===(v=(p=globalThis).reactiveElementPlatformSupport)||void 0===v||v.call(p,{ReactiveElement:reactive_element_a}),(null!==(f=(g=globalThis).reactiveElementVersions)&&void 0!==f?f:g.reactiveElementVersions=[]).push("1.0.0-rc.1");(null!==(_=(O=globalThis).litElementVersions)&&void 0!==_?_:O.litElementVersions=[]).push("3.0.0-rc.1");class lit_element_h extends reactive_element_a{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const r=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=r.firstChild),r}update(t){const e=this.render();super.update(t),this.Φt=Object(s.d)(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return s.b}}lit_element_h.finalized=!0,lit_element_h._$litElement$=!0,null===(x=(w=globalThis).litElementHydrateSupport)||void 0===x||x.call(w,{LitElement:lit_element_h}),null===(E=(P=globalThis).litElementPlatformSupport)||void 0===E||E.call(P,{LitElement:lit_element_h})},1:function(t,e,r){"use strict";r.d(e,"a",(function(){return property_e})),r.d(e,"b",(function(){return state_r}));const i=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(r){r.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(r){r.createProperty(e.key,t)}};function property_e(t){return(e,r)=>void 0!==r?((t,e,r)=>{e.constructor.createProperty(r,t)})(t,e,r):i(t,e)}function state_r(t){return property_e({...t,state:!0,attribute:!1})}const s=Element.prototype;s.msMatchesSelector||s.webkitMatchesSelector},2:function(t,e,r){"use strict";r.d(e,"a",(function(){return s}));const s=r(0).b`
/* scrollbar */
*::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
visibility: hidden;
}
*::-webkit-scrollbar-track {
background-color: rgba(var(--neutral-1), 0.05);
border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(var(--neutral-1), 0.1);
border-radius: 8px;
}
*::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(--neutral-1), 0.2);
}
`},3:function(t,e,r){"use strict";var s,o,l,h;r.d(e,"a",(function(){return $})),r.d(e,"b",(function(){return U})),r.d(e,"c",(function(){return A})),r.d(e,"d",(function(){return V}));const u=globalThis.trustedTypes,p=u?u.createPolicy("lit-html",{createHTML:t=>t}):void 0,v=`lit$${(Math.random()+"").slice(9)}$`,f="?"+v,g=`<${f}>`,y=document,c=(t="")=>y.createComment(t),d=t=>null===t||"object"!=typeof t&&"function"!=typeof t,m=Array.isArray,a=t=>{var e;return m(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])},_=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,w=/-->/g,x=/>/g,P=/>|[ \n\r](?:([^\s"'>=/]+)([ \n\r]*=[ \n\r]*(?:[^ \n\r"'`<>=]|("|')|))|$)/g,E=/'/g,O=/"/g,T=/^(?:script|style|textarea)$/i,b=t=>(e,...r)=>({_$litType$:t,strings:e,values:r}),$=b(1),U=(b(2),Symbol.for("lit-noChange")),A=Symbol.for("lit-nothing"),j=new WeakMap,V=(t,e,r)=>{var s,o;const l=null!==(s=null==r?void 0:r.renderBefore)&&void 0!==s?s:e;let h=l._$litPart$;if(void 0===h){const t=null!==(o=null==r?void 0:r.renderBefore)&&void 0!==o?o:null;l._$litPart$=h=new C(e.insertBefore(c(),t),t,void 0,r)}return h.I(t),h},q=y.createTreeWalker(y,129,null,!1),M=(t,e)=>{const r=t.length-1,s=[];let o,l=2===e?"<svg>":"",h=_;for(let e=0;e<r;e++){const r=t[e];let u,p,f=-1,y=0;for(;y<r.length&&(h.lastIndex=y,p=h.exec(r),null!==p);)y=h.lastIndex,h===_?"!--"===p[1]?h=w:void 0!==p[1]?h=x:void 0!==p[2]?(T.test(p[2])&&(o=RegExp("</"+p[2],"g")),h=P):void 0!==p[3]&&(h=P):h===P?">"===p[0]?(h=null!=o?o:_,f=-1):void 0===p[1]?f=-2:(f=h.lastIndex-p[2].length,u=p[1],h=void 0===p[3]?P:'"'===p[3]?O:E):h===O||h===E?h=P:h===w||h===x?h=_:(h=P,o=void 0);const m=h===P&&t[e+1].startsWith("/>")?" ":"";l+=h===_?r+g:f>=0?(s.push(u),r.slice(0,f)+"$lit$"+r.slice(f)+v+m):r+v+(-2===f?(s.push(void 0),e):m)}const u=l+(t[r]||"<?>")+(2===e?"</svg>":"");return[void 0!==p?p.createHTML(u):u,s]};class N{constructor({strings:t,_$litType$:e},r){let s;this.parts=[];let o=0,l=0;const h=t.length-1,p=this.parts,[g,y]=M(t,e);if(this.el=N.createElement(g,r),q.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=q.nextNode())&&p.length<h;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(v)){const r=y[l++];if(t.push(e),void 0!==r){const t=s.getAttribute(r.toLowerCase()+"$lit$").split(v),e=/([.?@])?(.*)/.exec(r);p.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?R:H})}else p.push({type:6,index:o})}for(const e of t)s.removeAttribute(e)}if(T.test(s.tagName)){const t=s.textContent.split(v),e=t.length-1;if(e>0){s.textContent=u?u.emptyScript:"";for(let r=0;r<e;r++)s.append(t[r],c()),q.nextNode(),p.push({type:2,index:++o});s.append(t[e],c())}}}else if(8===s.nodeType)if(s.data===f)p.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(v,t+1));)p.push({type:7,index:o}),t+=v.length-1}o++}}static createElement(t,e){const r=y.createElement("template");return r.innerHTML=t,r}}function S(t,e,r=t,s){var o,l,h,u;if(e===U)return e;let p=void 0!==s?null===(o=r.Σi)||void 0===o?void 0:o[s]:r.Σo;const v=d(e)?void 0:e._$litDirective$;return(null==p?void 0:p.constructor)!==v&&(null===(l=null==p?void 0:p.O)||void 0===l||l.call(p,!1),void 0===v?p=void 0:(p=new v(t),p.T(t,r,s)),void 0!==s?(null!==(h=(u=r).Σi)&&void 0!==h?h:u.Σi=[])[s]=p:r.Σo=p),void 0!==p&&(e=S(t,p.S(t,e.values),p,s)),e}class k{constructor(t,e){this.l=[],this.N=void 0,this.D=t,this.M=e}u(t){var e;const{el:{content:r},parts:s}=this.D,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:y).importNode(r,!0);q.currentNode=o;let l=q.nextNode(),h=0,u=0,p=s[0];for(;void 0!==p;){if(h===p.index){let e;2===p.type?e=new C(l,l.nextSibling,this,t):1===p.type?e=new p.ctor(l,p.name,p.strings,this,t):6===p.type&&(e=new z(l,this,t)),this.l.push(e),p=s[++u]}h!==(null==p?void 0:p.index)&&(l=q.nextNode(),h++)}return o}v(t){let e=0;for(const r of this.l)void 0!==r&&(void 0!==r.strings?(r.I(t,r,e),e+=r.strings.length-2):r.I(t[e])),e++}}class C{constructor(t,e,r,s){this.type=2,this.N=void 0,this.A=t,this.B=e,this.M=r,this.options=s}setConnected(t){var e;null===(e=this.P)||void 0===e||e.call(this,t)}get parentNode(){return this.A.parentNode}get startNode(){return this.A}get endNode(){return this.B}I(t,e=this){t=S(this,t,e),d(t)?t===A||null==t||""===t?(this.H!==A&&this.R(),this.H=A):t!==this.H&&t!==U&&this.m(t):void 0!==t._$litType$?this._(t):void 0!==t.nodeType?this.$(t):a(t)?this.g(t):this.m(t)}k(t,e=this.B){return this.A.parentNode.insertBefore(t,e)}$(t){this.H!==t&&(this.R(),this.H=this.k(t))}m(t){const e=this.A.nextSibling;null!==e&&3===e.nodeType&&(null===this.B?null===e.nextSibling:e===this.B.previousSibling)?e.data=t:this.$(y.createTextNode(t)),this.H=t}_(t){var e;const{values:r,_$litType$:s}=t,o="number"==typeof s?this.C(t):(void 0===s.el&&(s.el=N.createElement(s.h,this.options)),s);if((null===(e=this.H)||void 0===e?void 0:e.D)===o)this.H.v(r);else{const t=new k(o,this),e=t.u(this.options);t.v(r),this.$(e),this.H=t}}C(t){let e=j.get(t.strings);return void 0===e&&j.set(t.strings,e=new N(t)),e}g(t){m(this.H)||(this.H=[],this.R());const e=this.H;let r,s=0;for(const o of t)s===e.length?e.push(r=new C(this.k(c()),this.k(c()),this,this.options)):r=e[s],r.I(o),s++;s<e.length&&(this.R(r&&r.B.nextSibling,s),e.length=s)}R(t=this.A.nextSibling,e){var r;for(null===(r=this.P)||void 0===r||r.call(this,!1,!0,e);t&&t!==this.B;){const e=t.nextSibling;t.remove(),t=e}}}class H{constructor(t,e,r,s,o){this.type=1,this.H=A,this.N=void 0,this.V=void 0,this.element=t,this.name=e,this.M=s,this.options=o,r.length>2||""!==r[0]||""!==r[1]?(this.H=Array(r.length-1).fill(A),this.strings=r):this.H=A}get tagName(){return this.element.tagName}I(t,e=this,r,s){const o=this.strings;let l=!1;if(void 0===o)t=S(this,t,e,0),l=!d(t)||t!==this.H&&t!==U,l&&(this.H=t);else{const s=t;let h,u;for(t=o[0],h=0;h<o.length-1;h++)u=S(this,s[r+h],e,h),u===U&&(u=this.H[h]),l||(l=!d(u)||u!==this.H[h]),u===A?t=A:t!==A&&(t+=(null!=u?u:"")+o[h+1]),this.H[h]=u}l&&!s&&this.W(t)}W(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class I extends H{constructor(){super(...arguments),this.type=3}W(t){this.element[this.name]=t===A?void 0:t}}class L extends H{constructor(){super(...arguments),this.type=4}W(t){t&&t!==A?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class R extends H{constructor(){super(...arguments),this.type=5}I(t,e=this){var r;if((t=null!==(r=S(this,t,e,0))&&void 0!==r?r:A)===U)return;const s=this.H,o=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,l=t!==A&&(s===A||o);o&&this.element.removeEventListener(this.name,this,s),l&&this.element.addEventListener(this.name,this,t),this.H=t}handleEvent(t){var e,r;"function"==typeof this.H?this.H.call(null!==(r=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==r?r:this.element,t):this.H.handleEvent(t)}}class z{constructor(t,e,r){this.element=t,this.type=6,this.N=void 0,this.V=void 0,this.M=e,this.options=r}I(t){S(this,t)}}null===(o=(s=globalThis).litHtmlPlatformSupport)||void 0===o||o.call(s,N,C),(null!==(l=(h=globalThis).litHtmlVersions)&&void 0!==l?l:h.litHtmlVersions=[]).push("2.0.0-rc.2")},45:function(t,e,r){"use strict";r.d(e,"a",(function(){return mbioToggle}));var s=r(0),o=r(1),l=r(2),h=(r(7),function(t,e,r,s){var o,l=arguments.length,h=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,r):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,r,s);else for(var u=t.length-1;u>=0;u--)(o=t[u])&&(h=(l<3?o(h):l>3?o(e,r,h):o(e,r))||h);return l>3&&h&&Object.defineProperty(e,r,h),h});class mbioToggle extends s.a{static get styles(){return[l.a,s.b`
:host {
display: flex;
cursor: pointer;
}
input {
display: none;
}
/* toggle */
.bg {
width: 32px;
height: 20px;
margin: 2px;
padding: 2px;
border-radius: 12px;
box-sizing: border-box;
border: 2px solid rgba(var(--neutral-1), 0.25);
transition: var(--transition-1);
}
:host([active]) .bg {
border-color: transparent;
background: rgb(var(--accent-1));
}
.dot {
display: flex;
transition: var(--transition-1);
height: 12px;
width: 12px;
border-radius: 50%;
background: rgba(var(--neutral-1), 0.6);
}
:host([active]) .dot {
transform: translateX(12px);
background: white;
}
/* label */
mbio-text {
flex: 1;
margin-left: var(--spacing-s);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
/* disabled */
:host([disabled]) {
pointer-events: none;
opacity: 0.2;
}
/* hover inputs */
@media (hover: hover) {
:host(:hover:not(:active):not([active])) .bg {
border-color: rgba(var(--neutral-1), 0.3);
}
:host(:hover:not(:active):not([active])) .dot {
background: rgba(var(--neutral-1), 0.9);
}
}
`]}render(){return s.c`
<input
type="checkbox"
?checked="${this.active}"
?readonly="${this.disabled}"
.value="${this.label}"
.name="${this.label}"
@change="${this.handleChange}"
/>
<div class="bg">
<div class="dot"></div>
</div>
${this.label?s.c` <mbio-text>${this.label}</mbio-text> `:""}
`}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),this.dispatchEvent(new Event(t+"-changed"))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",()=>{this.active=!this.active})}handleChange(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}}h([Object(o.a)({type:String,reflect:!0})],mbioToggle.prototype,"label",void 0),h([Object(o.a)({type:Boolean,reflect:!0})],mbioToggle.prototype,"active",void 0),h([Object(o.a)({type:Boolean,reflect:!0})],mbioToggle.prototype,"disabled",void 0),window.customElements.get("mbio-toggle")||window.customElements.define("mbio-toggle",mbioToggle)},6:function(t,e,r){"use strict";r.d(e,"a",(function(){return mbioText}));var s=r(0),o=r(1),l=r(2),__decorate=function(t,e,r,s){var o,l=arguments.length,h=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,r):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)h=Reflect.decorate(t,e,r,s);else for(var u=t.length-1;u>=0;u--)(o=t[u])&&(h=(l<3?o(h):l>3?o(e,r,h):o(e,r))||h);return l>3&&h&&Object.defineProperty(e,r,h),h};class mbioText extends s.a{constructor(){super(...arguments),this.size="body-1"}static get styles(){return[l.a,s.b`
:host {
color: var(--text-1);
transition: var(--transition-1);
}
:host([size='body-1']) {
font: var(--body-1);
}
:host([size='body-2']) {
font: var(--body-2);
}
:host([size='header-1']) {
font: var(--header-1);
}
:host([size='header-2']) {
font: var(--header-2);
}
`]}render(){return s.c`<slot></slot>`}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),this.dispatchEvent(new Event(t+"-changed")),"color"==t&&this.color&&(this.style.color=this.color)}}__decorate([Object(o.a)({type:String,reflect:!0})],mbioText.prototype,"size",void 0),__decorate([Object(o.a)({type:String,reflect:!0})],mbioText.prototype,"color",void 0),window.customElements.get("mbio-text")||window.customElements.define("mbio-text",mbioText)},7:function(t,e,r){"use strict";r.r(e);var s=r(6);r.d(e,"mbioText",(function(){return s.a}))},80:function(t,e,r){"use strict";r.r(e);var s=r(45);r.d(e,"mbioToggle",(function(){return s.a}))}});