@foxy.io/elements 1.14.0-beta.3 → 1.14.0-beta.4

package/dist/cdn/shared-04b77f79.js

@@ -1,369 +0,0 @@
-import{D as t,a as e,i as o,e as n,h as r,G as s,P as a,c as l}from"./shared-ff79f3f9.js";class i extends HTMLElement{static get version(){return"1.6.1"}}customElements.define("vaadin-lumo-styles",i);const c=document.createElement("template");c.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Base (background) */\n      --lumo-base-color: #FFF;\n\n      /* Tint */\n      --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);\n      --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);\n      --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);\n      --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);\n      --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);\n      --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);\n      --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);\n      --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);\n      --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);\n      --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);\n      --lumo-tint: #FFF;\n\n      /* Shade */\n      --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);\n      --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);\n      --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);\n      --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);\n      --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);\n      --lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);\n      --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);\n      --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);\n      --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);\n      --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);\n      --lumo-shade: hsl(214, 35%, 15%);\n\n      /* Contrast */\n      --lumo-contrast-5pct: var(--lumo-shade-5pct);\n      --lumo-contrast-10pct: var(--lumo-shade-10pct);\n      --lumo-contrast-20pct: var(--lumo-shade-20pct);\n      --lumo-contrast-30pct: var(--lumo-shade-30pct);\n      --lumo-contrast-40pct: var(--lumo-shade-40pct);\n      --lumo-contrast-50pct: var(--lumo-shade-50pct);\n      --lumo-contrast-60pct: var(--lumo-shade-60pct);\n      --lumo-contrast-70pct: var(--lumo-shade-70pct);\n      --lumo-contrast-80pct: var(--lumo-shade-80pct);\n      --lumo-contrast-90pct: var(--lumo-shade-90pct);\n      --lumo-contrast: var(--lumo-shade);\n\n      /* Text */\n      --lumo-header-text-color: var(--lumo-contrast);\n      --lumo-body-text-color: var(--lumo-contrast-90pct);\n      --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n      --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n      --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n      /* Primary */\n      --lumo-primary-color: hsl(214, 90%, 52%);\n      --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);\n      --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);\n      --lumo-primary-text-color: var(--lumo-primary-color);\n      --lumo-primary-contrast-color: #FFF;\n\n      /* Error */\n      --lumo-error-color: hsl(3, 100%, 61%);\n      --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);\n      --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);\n      --lumo-error-text-color: hsl(3, 92%, 53%);\n      --lumo-error-contrast-color: #FFF;\n\n      /* Success */\n      --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */\n      --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);\n      --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);\n      --lumo-success-text-color: hsl(145, 100%, 32%);\n      --lumo-success-contrast-color: #FFF;\n    }\n  </style>\n</custom-style><dom-module id="lumo-color">\n  <template>\n    <style>\n      [theme~="dark"] {\n        /* Base (background) */\n        --lumo-base-color: hsl(214, 35%, 21%);\n\n        /* Tint */\n        --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);\n        --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);\n        --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);\n        --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);\n        --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);\n        --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);\n        --lumo-tint-60pct: hsla(214, 82%, 90%, 0.6);\n        --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);\n        --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);\n        --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);\n        --lumo-tint: hsl(214, 100%, 98%);\n\n        /* Shade */\n        --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);\n        --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);\n        --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);\n        --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);\n        --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);\n        --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);\n        --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);\n        --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);\n        --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);\n        --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);\n        --lumo-shade: hsl(214, 33%, 13%);\n\n        /* Contrast */\n        --lumo-contrast-5pct: var(--lumo-tint-5pct);\n        --lumo-contrast-10pct: var(--lumo-tint-10pct);\n        --lumo-contrast-20pct: var(--lumo-tint-20pct);\n        --lumo-contrast-30pct: var(--lumo-tint-30pct);\n        --lumo-contrast-40pct: var(--lumo-tint-40pct);\n        --lumo-contrast-50pct: var(--lumo-tint-50pct);\n        --lumo-contrast-60pct: var(--lumo-tint-60pct);\n        --lumo-contrast-70pct: var(--lumo-tint-70pct);\n        --lumo-contrast-80pct: var(--lumo-tint-80pct);\n        --lumo-contrast-90pct: var(--lumo-tint-90pct);\n        --lumo-contrast: var(--lumo-tint);\n\n        /* Text */\n        --lumo-header-text-color: var(--lumo-contrast);\n        --lumo-body-text-color: var(--lumo-contrast-90pct);\n        --lumo-secondary-text-color: var(--lumo-contrast-70pct);\n        --lumo-tertiary-text-color: var(--lumo-contrast-50pct);\n        --lumo-disabled-text-color: var(--lumo-contrast-30pct);\n\n        /* Primary */\n        --lumo-primary-color: hsl(214, 86%, 55%);\n        --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);\n        --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);\n        --lumo-primary-text-color: hsl(214, 100%, 70%);\n        --lumo-primary-contrast-color: #FFF;\n\n        /* Error */\n        --lumo-error-color: hsl(3, 90%, 63%);\n        --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);\n        --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);\n        --lumo-error-text-color: hsl(3, 100%, 67%);\n\n        /* Success */\n        --lumo-success-color: hsl(145, 65%, 42%);\n        --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);\n        --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);\n        --lumo-success-text-color: hsl(145, 85%, 47%);\n      }\n\n      html {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      [theme~="dark"] {\n        color: var(--lumo-body-text-color);\n        background-color: var(--lumo-base-color);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        color: var(--lumo-header-text-color);\n      }\n\n      a {\n        color: var(--lumo-primary-text-color);\n      }\n\n      blockquote {\n        color: var(--lumo-secondary-text-color);\n      }\n\n      code,\n      pre {\n        background-color: var(--lumo-contrast-10pct);\n        border-radius: var(--lumo-border-radius-m);\n      }\n    </style>\n  </template>\n</dom-module><dom-module id="lumo-color-legacy">\n  <template>\n    <style include="lumo-color">\n      :host {\n        color: var(--lumo-body-text-color) !important;\n        background-color: var(--lumo-base-color) !important;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(c.content);const m=document.createElement("template");m.innerHTML="<custom-style>\n  <style>\n    html {\n      --lumo-size-xs: 1.625rem;\n      --lumo-size-s: 1.875rem;\n      --lumo-size-m: 2.25rem;\n      --lumo-size-l: 2.75rem;\n      --lumo-size-xl: 3.5rem;\n\n      /* Icons */\n      --lumo-icon-size-s: 1.25em;\n      --lumo-icon-size-m: 1.5em;\n      --lumo-icon-size-l: 2.25em;\n      /* For backwards compatibility */\n      --lumo-icon-size: var(--lumo-icon-size-m);\n    }\n  </style>\n</custom-style>",document.head.appendChild(m.content);const u=document.createElement("template");u.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Square */\n      --lumo-space-xs: 0.25rem;\n      --lumo-space-s: 0.5rem;\n      --lumo-space-m: 1rem;\n      --lumo-space-l: 1.5rem;\n      --lumo-space-xl: 2.5rem;\n\n      /* Wide */\n      --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);\n      --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);\n      --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);\n      --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);\n      --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);\n\n      /* Tall */\n      --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);\n      --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);\n      --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);\n      --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);\n      --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);\n    }\n  </style>\n</custom-style>",document.head.appendChild(u.content);const d=document.createElement("template");d.innerHTML="<custom-style>\n  <style>\n    html {\n      /* Border radius */\n      --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */\n      --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */\n      --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */\n      --lumo-border-radius: 0.25em; /* Deprecated */\n\n      /* Shadow */\n      --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);\n      --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);\n      --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);\n      --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);\n      --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);\n\n      /* Clickable element cursor */\n      --lumo-clickable-cursor: default;\n    }\n  </style>\n</custom-style>",document.head.appendChild(d.content);const h=document.createElement("template");h.innerHTML='<custom-style>\n  <style>\n    html {\n      /* Font families */\n      --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n\n      /* Font sizes */\n      --lumo-font-size-xxs: .75rem;\n      --lumo-font-size-xs: .8125rem;\n      --lumo-font-size-s: .875rem;\n      --lumo-font-size-m: 1rem;\n      --lumo-font-size-l: 1.125rem;\n      --lumo-font-size-xl: 1.375rem;\n      --lumo-font-size-xxl: 1.75rem;\n      --lumo-font-size-xxxl: 2.5rem;\n\n      /* Line heights */\n      --lumo-line-height-xs: 1.25;\n      --lumo-line-height-s: 1.375;\n      --lumo-line-height-m: 1.625;\n    }\n\n  </style>\n</custom-style><dom-module id="lumo-typography">\n  <template>\n    <style>\n      html {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */\n      :host {\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size, var(--lumo-font-size-m));\n        line-height: var(--lumo-line-height-m);\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      small,\n      [theme~="font-size-s"] {\n        font-size: var(--lumo-font-size-s);\n        line-height: var(--lumo-line-height-s);\n      }\n\n      [theme~="font-size-xs"] {\n        font-size: var(--lumo-font-size-xs);\n        line-height: var(--lumo-line-height-xs);\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-weight: 600;\n        line-height: var(--lumo-line-height-xs);\n        margin-top: 1.25em;\n      }\n\n      h1 {\n        font-size: var(--lumo-font-size-xxxl);\n        margin-bottom: 0.75em;\n      }\n\n      h2 {\n        font-size: var(--lumo-font-size-xxl);\n        margin-bottom: 0.5em;\n      }\n\n      h3 {\n        font-size: var(--lumo-font-size-xl);\n        margin-bottom: 0.5em;\n      }\n\n      h4 {\n        font-size: var(--lumo-font-size-l);\n        margin-bottom: 0.5em;\n      }\n\n      h5 {\n        font-size: var(--lumo-font-size-m);\n        margin-bottom: 0.25em;\n      }\n\n      h6 {\n        font-size: var(--lumo-font-size-xs);\n        margin-bottom: 0;\n        text-transform: uppercase;\n        letter-spacing: 0.03em;\n      }\n\n      p,\n      blockquote {\n        margin-top: 0.5em;\n        margin-bottom: 0.75em;\n      }\n\n      a {\n        text-decoration: none;\n      }\n\n      a:hover {\n        text-decoration: underline;\n      }\n\n      hr {\n        display: block;\n        align-self: stretch;\n        height: 1px;\n        border: 0;\n        padding: 0;\n        margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);\n        background-color: var(--lumo-contrast-10pct);\n      }\n\n      blockquote {\n        border-left: 2px solid var(--lumo-contrast-30pct);\n      }\n\n      b,\n      strong {\n        font-weight: 600;\n      }\n\n      /* RTL specific styles */\n\n      blockquote[dir="rtl"] {\n        border-left: none;\n        border-right: 2px solid var(--lumo-contrast-30pct);\n      }\n\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(h.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-let p=!1;window.addEventListener("keydown",(()=>{p=!0}),{capture:!0}),window.addEventListener("mousedown",(()=>{p=!1}),{capture:!0});const b=t=>class extends((t=>class extends t{static get properties(){var t={tabindex:{type:Number,value:0,reflectToAttribute:!0,observer:"_tabindexChanged"}};return window.ShadyDOM&&(t.tabIndex=t.tabindex),t}})(t)){static get properties(){return{autofocus:{type:Boolean},_previousTabIndex:{type:Number},disabled:{type:Boolean,observer:"_disabledChanged",reflectToAttribute:!0},_isShiftTabbing:{type:Boolean}}}ready(){this.addEventListener("focusin",(t=>{t.composedPath()[0]===this?this.contains(t.relatedTarget)||this._focus():-1===t.composedPath().indexOf(this.focusElement)||this.disabled||this._setFocused(!0)})),this.addEventListener("focusout",(t=>this._setFocused(!1))),super.ready();const t=t=>{t.composed||t.target.dispatchEvent(new CustomEvent(t.type,{bubbles:!0,composed:!0,cancelable:!1}))};this.shadowRoot.addEventListener("focusin",t),this.shadowRoot.addEventListener("focusout",t),this.addEventListener("keydown",(t=>{if(!t.defaultPrevented&&9===t.keyCode)if(t.shiftKey)this._isShiftTabbing=!0,HTMLElement.prototype.focus.apply(this),this._setFocused(!1),setTimeout((()=>this._isShiftTabbing=!1),0);else{const t=window.navigator.userAgent.match(/Firefox\/(\d\d\.\d)/);if(t&&parseFloat(t[1])>=63&&parseFloat(t[1])<66&&this.parentNode&&this.nextSibling){const t=document.createElement("input");t.style.position="absolute",t.style.opacity="0",t.tabIndex=this.tabIndex,this.parentNode.insertBefore(t,this.nextSibling),t.focus(),t.addEventListener("focusout",(()=>this.parentNode.removeChild(t)))}}})),this.autofocus&&!this.disabled&&window.requestAnimationFrame((()=>{this._focus(),this._setFocused(!0),this.setAttribute("focus-ring","")}))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("focused")&&this._setFocused(!1)}_setFocused(t){t?this.setAttribute("focused",""):this.removeAttribute("focused"),t&&p?this.setAttribute("focus-ring",""):this.removeAttribute("focus-ring")}get focusElement(){return window.console.warn(`Please implement the 'focusElement' property in <${this.localName}>`),this}_focus(){this.focusElement&&!this._isShiftTabbing&&(this.focusElement.focus(),this._setFocused(!0))}focus(){this.focusElement&&!this.disabled&&(this.focusElement.focus(),this._setFocused(!0))}blur(){this.focusElement&&(this.focusElement.blur(),this._setFocused(!1))}_disabledChanged(t){this.focusElement.disabled=t,t?(this.blur(),this._previousTabIndex=this.tabindex,this.tabindex=-1,this.setAttribute("aria-disabled","true")):(void 0!==this._previousTabIndex&&(this.tabindex=this._previousTabIndex),this.removeAttribute("aria-disabled"))}_tabindexChanged(t){void 0!==t&&(this.focusElement.tabIndex=t),this.disabled&&this.tabindex&&(-1!==this.tabindex&&(this._previousTabIndex=this.tabindex),this.tabindex=t=void 0),window.ShadyDOM&&this.setProperties({tabIndex:t,tabindex:t})}click(){this.disabled||super.click()}},v=t=>class extends t{static get properties(){return{theme:{type:String,readOnly:!0}}}attributeChangedCallback(t,e,o){super.attributeChangedCallback(t,e,o),"theme"===t&&this._setTheme(o)}},f=e=>class extends(v(e)){static finalize(){super.finalize();const t=this.prototype._template,e=this.template&&this.template.parentElement&&this.template.parentElement.id===this.is,o=Object.getPrototypeOf(this.prototype)._template;o&&!e&&Array.from(o.content.querySelectorAll("style[include]")).forEach((e=>{this._includeStyle(e.getAttribute("include"),t)})),this._includeMatchingThemes(t)}static _includeMatchingThemes(e){const o=t.prototype.modules;let n=!1;const r=this.is+"-default-theme";Object.keys(o).sort(((t,e)=>{const o=0===t.indexOf("vaadin-"),n=0===e.indexOf("vaadin-"),r=["lumo-","material-"],s=r.filter((e=>0===t.indexOf(e))).length>0,a=r.filter((t=>0===e.indexOf(t))).length>0;return o!==n?o?-1:1:s!==a?s?-1:1:0})).forEach((t=>{if(t!==r){const r=o[t].getAttribute("theme-for");r&&r.split(" ").forEach((o=>{new RegExp("^"+o.split("*").join(".*")+"$").test(this.is)&&(n=!0,this._includeStyle(t,e))}))}})),!n&&o[r]&&this._includeStyle(r,e)}static _includeStyle(t,e){if(e&&!e.content.querySelector(`style[include="${t}"]`)){const o=document.createElement("style");o.setAttribute("include",t),e.content.appendChild(o)}}}
-/**
-@license
-Copyright (c) 2020 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/;class y{static detectScrollType(){const t=document.createElement("div");t.textContent="ABCD",t.dir="rtl",t.style.fontSize="14px",t.style.width="4px",t.style.height="1px",t.style.position="absolute",t.style.top="-1000px",t.style.overflow="scroll",document.body.appendChild(t);let e="reverse";return t.scrollLeft>0?e="default":(t.scrollLeft=2,t.scrollLeft<2&&(e="negative")),document.body.removeChild(t),e}static getNormalizedScrollLeft(t,e,o){const{scrollLeft:n}=o;if("rtl"!==e||!t)return n;switch(t){case"negative":return o.scrollWidth-o.clientWidth+n;case"reverse":return o.scrollWidth-o.clientWidth-n}return n}static setNormalizedScrollLeft(t,e,o,n){if("rtl"===e&&t)switch(t){case"negative":o.scrollLeft=o.clientWidth-o.scrollWidth+n;break;case"reverse":o.scrollLeft=o.scrollWidth-o.clientWidth-n;break;default:o.scrollLeft=n}else o.scrollLeft=n}}const x=[];let g;new MutationObserver((function(){const t=z();x.forEach((e=>{w(e,t)}))})).observe(document.documentElement,{attributes:!0,attributeFilter:["dir"]});const w=function(t,e){e?t.setAttribute("dir",e):t.removeAttribute("dir")},z=function(){return document.documentElement.getAttribute("dir")},k=t=>class extends t{static get properties(){return{dir:{type:String,readOnly:!0}}}static finalize(){super.finalize(),g||(g=y.detectScrollType())}connectedCallback(){super.connectedCallback(),this.hasAttribute("dir")||(this.__subscribe(),w(this,z()))}attributeChangedCallback(t,e,o){if(super.attributeChangedCallback(t,e,o),"dir"!==t)return;const n=o===z()&&-1===x.indexOf(this),r=!o&&e&&-1===x.indexOf(this),s=o!==z()&&e===z();n||r?(this.__subscribe(),w(this,z())):s&&this.__subscribe(!1)}disconnectedCallback(){super.disconnectedCallback(),this.__subscribe(!1),this.removeAttribute("dir")}__subscribe(t=!0){t?-1===x.indexOf(this)&&x.push(this):x.indexOf(this)>-1&&x.splice(x.indexOf(this),1)}__getNormalizedScrollLeft(t){return y.getNormalizedScrollLeft(g,this.getAttribute("dir")||"ltr",t)}__setNormalizedScrollLeft(t,e){return y.setNormalizedScrollLeft(g,this.getAttribute("dir")||"ltr",t,e)}},_=/\/\*\*\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i,E=window.Vaadin&&window.Vaadin.Flow&&window.Vaadin.Flow.clients;function C(t,e){if("function"!=typeof t)return;const o=_.exec(t.toString());if(o)try{t=new Function(o[1])}catch(t){console.log("vaadin-development-mode-detector: uncommentAndRun() failed",t)}return t(e)}window.Vaadin=window.Vaadin||{};const S=function(t,e){if(window.Vaadin.developmentMode)return C(t,e)};function A(){}void 0===window.Vaadin.developmentMode&&(window.Vaadin.developmentMode=function(){try{return!!localStorage.getItem("vaadin.developmentmode.force")||["localhost","127.0.0.1"].indexOf(window.location.hostname)>=0&&(E?!(E&&Object.keys(E).map((t=>E[t])).filter((t=>t.productionMode)).length>0):!C((function(){return!0})))}catch(t){return!1}}());const F=function(){return S(A)};let L;window.Vaadin||(window.Vaadin={}),window.Vaadin.registrations=window.Vaadin.registrations||[],window.Vaadin.developmentModeCallback=window.Vaadin.developmentModeCallback||{},window.Vaadin.developmentModeCallback["vaadin-usage-statistics"]=function(){F&&F()};const T=new Set,M=t=>class extends(k(t)){static finalize(){super.finalize();const{is:t}=this;t&&!T.has(t)&&(window.Vaadin.registrations.push(this),T.add(t),window.Vaadin.developmentModeCallback&&(L=e.debounce(L,o,(()=>{window.Vaadin.developmentModeCallback["vaadin-usage-statistics"]()})),n(L)))}constructor(){super(),null===document.doctype&&console.warn('Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.')}},O=r`<dom-module id="lumo-button" theme-for="vaadin-button">
-  <template>
-    <style>
-      :host {
-        /* Sizing */
-        --lumo-button-size: var(--lumo-size-m);
-        min-width: calc(var(--lumo-button-size) * 2);
-        height: var(--lumo-button-size);
-        padding: 0 calc(var(--lumo-button-size) / 3 + var(--lumo-border-radius) / 2);
-        margin: var(--lumo-space-xs) 0;
-        box-sizing: border-box;
-        /* Style */
-        font-family: var(--lumo-font-family);
-        font-size: var(--lumo-font-size-m);
-        font-weight: 500;
-        color: var(--_lumo-button-color, var(--lumo-primary-text-color));
-        background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct));
-        border-radius: var(--lumo-border-radius);
-        cursor: default;
-        -webkit-tap-highlight-color: transparent;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-
-      /* Set only for the internal parts so we don’t affect the host vertical alignment */
-      [part="label"],
-      [part="prefix"],
-      [part="suffix"] {
-        line-height: var(--lumo-line-height-xs);
-      }
-
-      [part="label"] {
-        padding: calc(var(--lumo-button-size) / 6) 0;
-      }
-
-      :host([theme~="small"]) {
-        font-size: var(--lumo-font-size-s);
-        --lumo-button-size: var(--lumo-size-s);
-      }
-
-      :host([theme~="large"]) {
-        font-size: var(--lumo-font-size-l);
-        --lumo-button-size: var(--lumo-size-l);
-      }
-
-      /* This needs to be the last selector for it to take priority */
-      :host([disabled][disabled]) {
-        pointer-events: none;
-        color: var(--lumo-disabled-text-color);
-        background-color: var(--lumo-contrast-5pct);
-      }
-
-      /* For interaction states */
-      :host::before,
-      :host::after {
-        content: "";
-        /* We rely on the host always being relative */
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: currentColor;
-        border-radius: inherit;
-        opacity: 0;
-        transition: opacity 0.2s;
-        pointer-events: none;
-      }
-
-      /* Hover */
-
-      :host(:hover)::before {
-        opacity: 0.05;
-      }
-
-      /* Disable hover for touch devices */
-      @media (pointer: coarse) {
-        :host(:not([active]):hover)::before {
-          opacity: 0;
-        }
-      }
-
-      /* Active */
-
-      :host::after {
-        transition: opacity 1.4s, transform 0.1s;
-        filter: blur(8px);
-      }
-
-      :host([active])::before {
-        opacity: 0.1;
-        transition-duration: 0s;
-      }
-
-      :host([active])::after {
-        opacity: 0.1;
-        transition-duration: 0s, 0s;
-        transform: scale(0);
-      }
-
-      /* Keyboard focus */
-
-      :host([focus-ring]) {
-        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
-      }
-
-      /* Types (primary, tertiary, tertiary-inline */
-
-      :host([theme~="tertiary"]),
-      :host([theme~="tertiary-inline"]) {
-        background-color: transparent !important;
-        transition: opacity 0.2s;
-        min-width: 0;
-      }
-
-      :host([theme~="tertiary"])::before,
-      :host([theme~="tertiary-inline"])::before {
-        display: none;
-      }
-
-      :host([theme~="tertiary"]) {
-        padding: 0 calc(var(--lumo-button-size) / 6);
-      }
-
-      @media (hover: hover) {
-        :host([theme*="tertiary"]:not([active]):hover) {
-          opacity: 0.8;
-        }
-      }
-
-      :host([theme~="tertiary"][active]),
-      :host([theme~="tertiary-inline"][active]) {
-        opacity: 0.5;
-        transition-duration: 0s;
-      }
-
-      :host([theme~="tertiary-inline"]) {
-        margin: 0;
-        height: auto;
-        padding: 0;
-        line-height: inherit;
-        font-size: inherit;
-      }
-
-      :host([theme~="tertiary-inline"]) [part="label"] {
-        padding: 0;
-        overflow: visible;
-        line-height: inherit;
-      }
-
-      :host([theme~="primary"]) {
-        background-color: var(--_lumo-button-primary-background-color, var(--lumo-primary-color));
-        color: var(--_lumo-button-primary-color, var(--lumo-primary-contrast-color));
-        font-weight: 600;
-        min-width: calc(var(--lumo-button-size) * 2.5);
-      }
-
-      :host([theme~="primary"][disabled]) {
-        background-color: var(--lumo-primary-color-50pct);
-        color: var(--lumo-primary-contrast-color);
-      }
-
-      :host([theme~="primary"]:hover)::before {
-        opacity: 0.1;
-      }
-
-      :host([theme~="primary"][active])::before {
-        background-color: var(--lumo-shade-20pct);
-      }
-
-      @media (pointer: coarse) {
-        :host([theme~="primary"][active])::before {
-          background-color: var(--lumo-shade-60pct);
-        }
-
-        :host([theme~="primary"]:not([active]):hover)::before {
-          opacity: 0;
-        }
-      }
-
-      :host([theme~="primary"][active])::after {
-        opacity: 0.2;
-      }
-
-      /* Colors (success, error, contrast) */
-
-      :host([theme~="success"]) {
-        color: var(--lumo-success-text-color);
-      }
-
-      :host([theme~="success"][theme~="primary"]) {
-        background-color: var(--lumo-success-color);
-        color: var(--lumo-success-contrast-color);
-      }
-
-      :host([theme~="success"][theme~="primary"][disabled]) {
-        background-color: var(--lumo-success-color-50pct);
-      }
-
-      :host([theme~="error"]) {
-        color: var(--lumo-error-text-color);
-      }
-
-      :host([theme~="error"][theme~="primary"]) {
-        background-color: var(--lumo-error-color);
-        color: var(--lumo-error-contrast-color);
-      }
-
-      :host([theme~="error"][theme~="primary"][disabled]) {
-        background-color: var(--lumo-error-color-50pct);
-      }
-
-      :host([theme~="contrast"]) {
-        color: var(--lumo-contrast);
-      }
-
-      :host([theme~="contrast"][theme~="primary"]) {
-        background-color: var(--lumo-contrast);
-        color: var(--lumo-base-color);
-      }
-
-      :host([theme~="contrast"][theme~="primary"][disabled]) {
-        background-color: var(--lumo-contrast-50pct);
-      }
-
-      /* Icons */
-
-      [part] ::slotted(iron-icon) {
-        display: inline-block;
-        width: var(--lumo-icon-size-m);
-        height: var(--lumo-icon-size-m);
-      }
-
-      /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
-      [part] ::slotted(iron-icon[icon^="vaadin:"]) {
-        padding: 0.25em;
-        box-sizing: border-box !important;
-      }
-
-      [part="prefix"] {
-        margin-left: -0.25em;
-        margin-right: 0.25em;
-      }
-
-      [part="suffix"] {
-        margin-left: 0.25em;
-        margin-right: -0.25em;
-      }
-
-      /* Icon-only */
-
-      :host([theme~="icon"]:not([theme~="tertiary-inline"])) {
-        min-width: var(--lumo-button-size);
-        padding-left: calc(var(--lumo-button-size) / 4);
-        padding-right: calc(var(--lumo-button-size) / 4);
-      }
-
-      :host([theme~="icon"]) [part="prefix"],
-      :host([theme~="icon"]) [part="suffix"] {
-        margin-left: 0;
-        margin-right: 0;
-      }
-
-      /* RTL specific styles */
-
-      :host([dir="rtl"]) [part="prefix"] {
-        margin-left: 0.25em;
-        margin-right: -0.25em;
-      }
-
-      :host([dir="rtl"]) [part="suffix"] {
-        margin-left: -0.25em;
-        margin-right: 0.25em;
-      }
-
-      :host([dir="rtl"][theme~="icon"]) [part="prefix"],
-      :host([dir="rtl"][theme~="icon"]) [part="suffix"] {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(O.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-class V extends(M(b(f(s(a))))){static get template(){return r`
-    <style>
-      :host {
-        display: inline-block;
-        position: relative;
-        outline: none;
-        white-space: nowrap;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      /* Ensure the button is always aligned on the baseline */
-      .vaadin-button-container::before {
-        content: "\\2003";
-        display: inline-block;
-        width: 0;
-      }
-
-      .vaadin-button-container {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        min-height: inherit;
-        text-shadow: inherit;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-      }
-
-      [part="prefix"],
-      [part="suffix"] {
-        flex: none;
-      }
-
-      [part="label"] {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      #button {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        cursor: inherit;
-      }
-    </style>
-    <div class="vaadin-button-container">
-      <div part="prefix">
-        <slot name="prefix"></slot>
-      </div>
-      <div part="label">
-        <slot></slot>
-      </div>
-      <div part="suffix">
-        <slot name="suffix"></slot>
-      </div>
-    </div>
-    <button id="button" type="button"></button>
-`}static get is(){return"vaadin-button"}static get version(){return"2.4.0"}ready(){super.ready(),this.setAttribute("role","button"),this.$.button.setAttribute("role","presentation"),this._addActiveListeners(),window.ShadyDOM&&window.ShadyDOM.flush()}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("active")&&this.removeAttribute("active")}_addActiveListeners(){l(this,"down",(()=>!this.disabled&&this.setAttribute("active",""))),l(this,"up",(()=>this.removeAttribute("active"))),this.addEventListener("keydown",(t=>!this.disabled&&[13,32].indexOf(t.keyCode)>=0&&this.setAttribute("active",""))),this.addEventListener("keyup",(()=>this.removeAttribute("active"))),this.addEventListener("blur",(()=>this.removeAttribute("active")))}get focusElement(){return this.$.button}}customElements.define(V.is,V);export{V as B,b as C,k as D,M as E,f as T,y as a};