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

package/dist/cdn/shared-0ced76a0.js

@@ -0,0 +1,358 @@
+import{E as t,C as e,T as o}from"./shared-df573cea.js";import{h as r,G as i,P as a,c as s}from"./shared-ff79f3f9.js";const n=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(n.content);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+class l extends(t(e(o(i(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(){s(this,"down",(()=>!this.disabled&&this.setAttribute("active",""))),s(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(l.is,l);export{l as B};

package/dist/cdn/{shared-f47647ac.js → shared-106daaca.js}

@@ -1 +1 @@
-import{j as e,_ as t,h as r}from"./shared-17968c53.js";import{B as s}from"./shared-b98f88c9.js";import{c as n}from"./shared-c1e0e11f.js";import{I as o}from"./shared-bf09e011.js";let i,a,l,c=e=>e;class h{constructor(e="unknown"){this.type=e}}class d extends CustomEvent{constructor(){super("reload")}}class p extends n{constructor(){super(...arguments),this.type="unknown",this.reload=!1}static get scopedElements(){return{"vaadin-button":s,"iron-icon":customElements.get("iron-icon"),"x-i18n":o}}static get styles(){return[super.styles,e(i||(i=c`:host{position:absolute;top:0;right:0;bottom:0;left:0}.container-narrow{max-width:400px}`))]}static get properties(){return t(t({},super.properties),{},{reload:{type:Boolean,reflect:!0},type:{type:String}})}render(){return r(a||(a=c` <article class="bg-base font-lumo text-center leading-m p-m h-full flex flex-col items-center justify-center"> <iron-icon icon="lumo:error" class="text-error w-l h-l mb-m"></iron-icon> <header class="text-xl text-header container-narrow font-medium"> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.title"></x-i18n> </header> <p class="text-m text-secondary container-narrow mb-l"> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.message"></x-i18n> </p> <div class="flex space-x-s"> <a rel="nofollow noreferrer noopener" href="${0}" target="_blank" class="px-m py-xs text-primary font-medium tracking-wide border border-contrast-10 rounded transition-colors duration-200 hover-bg-primary-10 hover-border-primary-10 focus-outline-none focus-shadow-outline" router-ignore> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.action"></x-i18n> </a> ${0} </div> </article> `),this.ns,this.lang,this.type,this.ns,this.lang,this.type,this._i18n.t(`errors.${this.type}.href`).toString(),this.ns,this.lang,this.type,this.reload?r(l||(l=c` <vaadin-button data-testid="reload" theme="primary" @click="${0}"> <x-i18n ns="${0}" lang="${0}" key="reload"></x-i18n> <iron-icon icon="icons:refresh" slot="suffix"></iron-icon> </vaadin-button> `),(()=>this.dispatchEvent(new d)),this.ns,this.lang):"")}}export{p as E,h as F};
+import{j as e,_ as t,h as r}from"./shared-63eaded9.js";import{B as s}from"./shared-0ced76a0.js";import{c as n}from"./shared-d94ffc2b.js";import{I as o}from"./shared-4be4e513.js";let i,a,l,c=e=>e;class d{constructor(e="unknown"){this.type=e}}class h extends CustomEvent{constructor(){super("reload")}}class p extends n{constructor(){super(...arguments),this.type="unknown",this.reload=!1}static get scopedElements(){return{"vaadin-button":s,"iron-icon":customElements.get("iron-icon"),"x-i18n":o}}static get styles(){return[super.styles,e(i||(i=c`:host{position:absolute;top:0;right:0;bottom:0;left:0}.container-narrow{max-width:400px}`))]}static get properties(){return t(t({},super.properties),{},{reload:{type:Boolean,reflect:!0},type:{type:String}})}render(){return r(a||(a=c` <article class="bg-base font-lumo text-center leading-m p-m h-full flex flex-col items-center justify-center"> <iron-icon icon="lumo:error" class="text-error w-l h-l mb-m"></iron-icon> <header class="text-xl text-header container-narrow font-medium"> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.title"></x-i18n> </header> <p class="text-m text-secondary container-narrow mb-l"> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.message"></x-i18n> </p> <div class="flex space-x-s"> <a rel="nofollow noreferrer noopener" href="${0}" target="_blank" class="px-m py-xs text-primary font-medium tracking-wide border border-contrast-10 rounded transition-colors duration-200 hover-bg-primary-10 hover-border-primary-10 focus-outline-none focus-shadow-outline" router-ignore> <x-i18n ns="${0}" lang="${0}" key="errors.${0}.action"></x-i18n> </a> ${0} </div> </article> `),this.ns,this.lang,this.type,this.ns,this.lang,this.type,this._i18n.t(`errors.${this.type}.href`).toString(),this.ns,this.lang,this.type,this.reload?r(l||(l=c` <vaadin-button data-testid="reload" theme="primary" @click="${0}"> <x-i18n ns="${0}" lang="${0}" key="reload"></x-i18n> <iron-icon icon="icons:refresh" slot="suffix"></iron-icon> </vaadin-button> `),(()=>this.dispatchEvent(new h)),this.ns,this.lang):"")}}export{p as E,d as F};

package/dist/cdn/{shared-145cc9eb.js → shared-10bdb6b9.js}

@@ -1,4 +1,4 @@
-import{_ as t}from"./shared-17968c53.js";import{T as e}from"./shared-d9159fe1.js";import{a as s}from"./shared-c1e0e11f.js";import{p as a}from"./shared-e21a2aac.js";let n,o,r,i,c=t=>t;class l extends(s(e,"subscriptions-table")){constructor(){super(...arguments),this.columns=[l.priceColumn,l.summaryColumn,l.statusColumn,l.subTokenURLColumn]}}l.priceColumn={cell:e=>{const s=e.data._embedded["fx:last_transaction"],o=`${s.total_order} ${s.currency_code}`;return e.html(n||(n=c`
+import{_ as t}from"./shared-63eaded9.js";import{T as e}from"./shared-2174bcd4.js";import{a as s}from"./shared-d94ffc2b.js";import{p as a}from"./shared-6b7602c7.js";let n,o,r,i,c=t=>t;class l extends(s(e,"subscriptions-table")){constructor(){super(...arguments),this.columns=[l.priceColumn,l.summaryColumn,l.statusColumn,l.subTokenURLColumn]}}l.priceColumn={cell:e=>{const s=e.data._embedded["fx:last_transaction"],o=`${s.total_order} ${s.currency_code}`;return e.html(n||(n=c`
         <foxy-i18n
           data-testclass="i18n frequencies"
           class="font-semibold text-m font-tnum"

package/dist/cdn/{shared-91a9e922.js → shared-1469c1c4.js}

@@ -1,4 +1,4 @@
-import{T as t}from"./shared-d9159fe1.js";import{a as e}from"./shared-c1e0e11f.js";let s,n,a,o,l,i,r=t=>t;class c extends(e(t,"transactions-table")){constructor(){super(...arguments),this.columns=[c.priceColumn,c.summaryColumn,c.statusColumn,c.idColumn,c.dateColumn,c.receiptColumn]}}c.priceColumn={cell:t=>t.html(s||(s=r`
+import{T as t}from"./shared-2174bcd4.js";import{a as s}from"./shared-d94ffc2b.js";let e,n,a,o,l,i,r=t=>t;class c extends(s(t,"transactions-table")){constructor(){super(...arguments),this.columns=[c.priceColumn,c.summaryColumn,c.statusColumn,c.idColumn,c.dateColumn,c.receiptColumn]}}c.priceColumn={cell:t=>t.html(e||(e=r`
       <foxy-i18n
         data-testclass="i18n totals"
         class="text-m font-semibold font-tnum"
@@ -8,7 +8,7 @@ import{T as t}from"./shared-d9159fe1.js";import{a as e}from"./shared-c1e0e11f.js
         .options=${0}
       >
       </foxy-i18n>
-    `),t.lang,t.ns,{amount:`${t.data.total_order} ${t.data.currency_code}`})},c.summaryColumn={cell:t=>{var e;const s=null===(e=t.data._embedded)||void 0===e?void 0:e["fx:items"];if(!s)return"";const a={most_expensive_item:[...s].sort(((t,e)=>t.price-e.price))[0],count:s.length};return t.html(n||(n=r`
+    `),t.lang,t.ns,{amount:`${t.data.total_order} ${t.data.currency_code}`})},c.summaryColumn={cell:t=>{var s;const e=null===(s=t.data._embedded)||void 0===s?void 0:s["fx:items"];if(!e)return"";const a={most_expensive_item:[...e].sort(((t,s)=>t.price-s.price))[0],count:e.length};return t.html(n||(n=r`
         <foxy-i18n
           data-testclass="i18n summaries"
           class="text-m"
@@ -18,7 +18,7 @@ import{T as t}from"./shared-d9159fe1.js";import{a as e}from"./shared-c1e0e11f.js
           .options=${0}
         >
         </foxy-i18n>
-      `),t.lang,t.ns,a)}},c.statusColumn={hideBelow:"md",cell:t=>{const e={completed:"bg-success-10 text-success",declined:"bg-error-10 text-error",rejected:"bg-error-10 text-error"},s=t.data.status||"completed",n=s in e?e[s]:"bg-contrast-5 text-contrast";return t.html(a||(a=r`
+      `),t.lang,t.ns,a)}},c.statusColumn={hideBelow:"md",cell:t=>{const s={completed:"bg-success-10 text-success",declined:"bg-error-10 text-error",rejected:"bg-error-10 text-error"},e=t.data.status||"completed",n=e in s?s[e]:"bg-contrast-5 text-contrast";return t.html(a||(a=r`
         <foxy-i18n
           data-testclass="i18n statuses"
           class="px-s py-xs text-m font-medium rounded ${0}"
@@ -27,7 +27,7 @@ import{T as t}from"./shared-d9159fe1.js";import{a as e}from"./shared-c1e0e11f.js
           ns=${0}
         >
         </foxy-i18n>
-      `),n,t.lang,`transaction_${s}`,t.ns)}},c.idColumn={hideBelow:"md",cell:t=>t.html(o||(o=r`
+      `),n,t.lang,`transaction_${e}`,t.ns)}},c.idColumn={hideBelow:"md",cell:t=>t.html(o||(o=r`
         <span class="text-m text-secondary font-tnum" data-testclass="ids">
           <span class="text-tertiary">ID</span> ${0}
         </span>

package/dist/cdn/{shared-f4119f12.js → shared-16f72e27.js}

@@ -1,4 +1,4 @@
-import{E as e,C as t,T as o}from"./shared-b98f88c9.js";import{h as i,G as r,P as a}from"./shared-747b0842.js";const s=i`<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
+import{E as e,C as t,T as o}from"./shared-df573cea.js";import{h as i,G as r,P as a}from"./shared-ff79f3f9.js";const s=i`<dom-module id="lumo-checkbox" theme-for="vaadin-checkbox">
   <template>
     <style include="lumo-checkbox-style lumo-checkbox-effects">
       /* IE11 only */