@foxy.io/elements 1.29.0-beta.5 → 1.29.0

package/dist/cdn/shared-e9bf9d3d.js

@@ -1,553 +0,0 @@
-import"./shared-5e463387.js";import{h as t,P as e}from"./shared-f0cbc9b6.js";import"./shared-1c166d01.js";import{E as o,T as r}from"./shared-c308b7e0.js";import{L as a}from"./shared-aa9765b6.js";import{I as i}from"./shared-c92aa1b4.js";import{I as s}from"./shared-651c44fa.js";import{a as n}from"./shared-72d815f5.js";import{a as l}from"./shared-aba112fe.js";const c=t`<dom-module id="lumo-tab" theme-for="vaadin-tab">
-  <template>
-    <style>
-      :host {
-        box-sizing: border-box;
-        padding: 0.5rem 0.75rem;
-        font-family: var(--lumo-font-family);
-        font-size: var(--lumo-font-size-m);
-        line-height: var(--lumo-line-height-xs);
-        font-weight: 500;
-        opacity: 1;
-        color: var(--lumo-contrast-60pct);
-        transition: 0.15s color, 0.2s transform;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        position: relative;
-        cursor: pointer;
-        transform-origin: 50% 100%;
-        outline: none;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        overflow: hidden;
-        min-width: var(--lumo-size-m);
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      :host(:not([orientation="vertical"])) {
-        text-align: center;
-      }
-
-      :host([orientation="vertical"]) {
-        transform-origin: 0% 50%;
-        padding: 0.25rem 1rem;
-        min-height: var(--lumo-size-m);
-        min-width: 0;
-      }
-
-      :host(:hover),
-      :host([focus-ring]) {
-        color: var(--lumo-body-text-color);
-      }
-
-      :host([selected]) {
-        color: var(--lumo-primary-text-color);
-        transition: 0.6s color;
-      }
-
-      :host([active]:not([selected])) {
-        color: var(--lumo-primary-text-color);
-        transition-duration: 0.1s;
-      }
-
-      :host::before,
-      :host::after {
-        content: "";
-        position: absolute;
-        display: var(--_lumo-tab-marker-display, block);
-        bottom: 0;
-        left: 50%;
-        width: var(--lumo-size-s);
-        height: 2px;
-        background-color: var(--lumo-contrast-60pct);
-        border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
-        transform: translateX(-50%) scale(0);
-        transform-origin: 50% 100%;
-        transition: 0.14s transform cubic-bezier(.12, .32, .54, 1);
-        will-change: transform;
-      }
-
-      :host([selected])::before,
-      :host([selected])::after {
-        background-color: var(--lumo-primary-color);
-      }
-
-      :host([orientation="vertical"])::before,
-      :host([orientation="vertical"])::after {
-        left: 0;
-        bottom: 50%;
-        transform: translateY(50%) scale(0);
-        width: 2px;
-        height: var(--lumo-size-xs);
-        border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0;
-        transform-origin: 100% 50%;
-      }
-
-      :host::after {
-        box-shadow: 0 0 0 4px var(--lumo-primary-color);
-        opacity: 0.15;
-        transition: 0.15s 0.02s transform, 0.8s 0.17s opacity;
-      }
-
-      :host([selected])::before,
-      :host([selected])::after {
-        transform: translateX(-50%) scale(1);
-        transition-timing-function: cubic-bezier(.12, .32, .54, 1.5);
-      }
-
-      :host([orientation="vertical"][selected])::before,
-      :host([orientation="vertical"][selected])::after {
-        transform: translateY(50%) scale(1);
-      }
-
-      :host([selected]:not([active]))::after {
-        opacity: 0;
-      }
-
-      :host(:not([orientation="vertical"])) ::slotted(a[href]) {
-        justify-content: center;
-      }
-
-      :host ::slotted(a) {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        height: 100%;
-        margin: -0.5rem -0.75rem;
-        padding: 0.5rem 0.75rem;
-        outline: none;
-
-        /*
-          Override the CSS inherited from \`lumo-color\` and \`lumo-typography\`.
-          Note: \`!important\` is needed because of the \`:slotted\` specificity.
-        */
-        text-decoration: none !important;
-        color: inherit !important;
-      }
-
-      :host ::slotted(iron-icon) {
-        margin: 0 4px;
-        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 */
-      :host ::slotted(iron-icon[icon^="vaadin:"]) {
-        padding: 0.25rem;
-        box-sizing: border-box !important;
-      }
-
-      :host(:not([dir="rtl"])) ::slotted(iron-icon:first-child) {
-        margin-left: 0;
-      }
-
-      :host(:not([dir="rtl"])) ::slotted(iron-icon:last-child) {
-        margin-right: 0;
-      }
-
-      :host([theme~="icon-on-top"]) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        text-align: center;
-        padding-bottom: 0.5rem;
-        padding-top: 0.25rem;
-      }
-
-      :host([theme~="icon-on-top"]) ::slotted(a) {
-        flex-direction: column;
-        align-items: center;
-        margin-top: -0.25rem;
-        padding-top: 0.25rem;
-      }
-
-      :host([theme~="icon-on-top"]) ::slotted(iron-icon) {
-        margin: 0;
-      }
-
-      /* Disabled */
-
-      :host([disabled]) {
-        pointer-events: none;
-        opacity: 1;
-        color: var(--lumo-disabled-text-color);
-      }
-
-      /* Focus-ring */
-
-      :host([focus-ring]) {
-        box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-        border-radius: var(--lumo-border-radius);
-      }
-
-      /* RTL specific styles */
-
-      :host([dir="rtl"])::before,
-      :host([dir="rtl"])::after {
-        left: auto;
-        right: 50%;
-        transform: translateX(50%) scale(0);
-      }
-
-      :host([dir="rtl"][selected]:not([orientation="vertical"]))::before,
-      :host([dir="rtl"][selected]:not([orientation="vertical"]))::after {
-        transform: translateX(50%) scale(1);
-      }
-
-      :host([dir="rtl"]) ::slotted(iron-icon:first-child) {
-        margin-right: 0;
-      }
-
-      :host([dir="rtl"]) ::slotted(iron-icon:last-child) {
-        margin-left: 0;
-      }
-
-      :host([orientation="vertical"][dir="rtl"]) {
-        transform-origin: 100% 50%;
-      }
-
-      :host([dir="rtl"][orientation="vertical"])::before,
-      :host([dir="rtl"][orientation="vertical"])::after {
-        left: auto;
-        right: 0;
-        border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
-        transform-origin: 0% 50%;
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(c.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-class d extends(o(r(s(e)))){static get template(){return t`
-    <slot></slot>
-`}static get is(){return"vaadin-tab"}static get version(){return"3.2.0"}ready(){super.ready(),this.setAttribute("role","tab")}_onKeyup(t){const e=this.hasAttribute("active");if(super._onKeyup(t),e){const t=this.querySelector("a");t&&t.click()}}}customElements.define(d.is,d);const m=t`<dom-module id="lumo-tabs" theme-for="vaadin-tabs">
-  <template>
-    <style>
-      :host {
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      :host(:not([orientation="vertical"])) {
-        box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
-        position: relative;
-        min-height: var(--lumo-size-l);
-      }
-
-      :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) {
-        justify-content: center;
-      }
-
-      :host([orientation="vertical"]) {
-        box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
-      }
-
-      :host([orientation="horizontal"]) [part="tabs"] {
-        margin: 0 0.75rem;
-      }
-
-      :host([orientation="vertical"]) [part="tabs"] {
-        width: 100%;
-        margin: 0.5rem 0;
-      }
-
-      [part="forward-button"],
-      [part="back-button"] {
-        position: absolute;
-        z-index: 1;
-        font-family: lumo-icons;
-        color: var(--lumo-tertiary-text-color);
-        font-size: var(--lumo-icon-size-m);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.5em;
-        height: 100%;
-        transition: 0.2s opacity;
-        top: 0;
-      }
-
-      [part="forward-button"]:hover,
-      [part="back-button"]:hover {
-        color: inherit;
-      }
-
-      :host(:not([dir="rtl"])) [part="forward-button"] {
-        right: 0;
-      }
-
-      [part="forward-button"]::after {
-        content: var(--lumo-icons-angle-right);
-      }
-
-      [part="back-button"]::after {
-        content: var(--lumo-icons-angle-left);
-      }
-
-      /* Tabs overflow */
-
-      [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: none;
-        -webkit-mask-image: var(--_lumo-tabs-overflow-mask-image);
-        /* For IE11 */
-        min-height: var(--lumo-size-l);
-      }
-
-      /*
-        TODO: CSS custom property in \`mask-image\` causes crash in Edge
-        see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15415089/
-      */
-      @-moz-document url-prefix() {
-        [part="tabs"] {
-          mask-image: var(--_lumo-tabs-overflow-mask-image);
-        }
-      }
-
-      /* Horizontal tabs overflow */
-
-      /* Both ends overflowing */
-      :host([overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
-      }
-
-      /* End overflowing */
-      :host([overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
-      }
-
-      /* Start overflowing */
-      :host([overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
-      }
-
-      /* Vertical tabs overflow */
-
-      /* Both ends overflowing */
-      :host([overflow~="start"][overflow~="end"][orientation="vertical"]) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
-      }
-
-      /* End overflowing */
-      :host([overflow~="end"][orientation="vertical"]) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
-      }
-
-      /* Start overflowing */
-      :host([overflow~="start"][orientation="vertical"]) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
-      }
-
-      :host [part="tabs"] ::slotted(:not(vaadin-tab)) {
-        margin-left: var(--lumo-space-m);
-      }
-
-      /* Centered */
-
-      :host([theme~="centered"][orientation="horizontal"]) [part="tabs"] {
-        justify-content: center;
-      }
-
-      /* Small */
-
-      :host([theme~="small"]),
-      :host([theme~="small"]) [part="tabs"] {
-        min-height: var(--lumo-size-m);
-      }
-
-      :host([theme~="small"]) [part="tabs"] ::slotted(vaadin-tab) {
-        font-size: var(--lumo-font-size-s);
-      }
-
-      /* Minimal */
-
-      :host([theme~="minimal"]) {
-        box-shadow: none;
-        /* This doesn't work with ShadyCSS */
-        --_lumo-tab-marker-display: none;
-      }
-
-      /* Workaround for the above ShadyCSS issue */
-      :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::before,
-      :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::after {
-        display: none;
-      }
-
-      /* Hide-scroll-buttons */
-
-      :host([theme~="hide-scroll-buttons"]) [part="back-button"],
-      :host([theme~="hide-scroll-buttons"]) [part="forward-button"] {
-        display: none;
-      }
-
-      :host([theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
-      }
-
-      :host([theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
-      }
-
-      :host([theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
-      }
-
-      /* Equal-width tabs */
-      :host([theme~="equal-width-tabs"]) {
-        flex: auto;
-      }
-
-      :host([theme~="equal-width-tabs"]) [part="tabs"] ::slotted(vaadin-tab) {
-        flex: 1 0 0%;
-      }
-
-      /* RTL specific styles */
-
-      :host([dir="rtl"]) [part="forward-button"]::after {
-        content: var(--lumo-icons-angle-left);
-      }
-
-      :host([dir="rtl"]) [part="back-button"]::after {
-        content: var(--lumo-icons-angle-right);
-      }
-
-      :host([orientation="vertical"][dir="rtl"]) {
-        box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
-      }
-
-      :host([dir="rtl"]) [part="forward-button"] {
-        left: 0;
-      }
-
-      :host([dir="rtl"]) [part="tabs"] ::slotted(:not(vaadin-tab)) {
-        margin-left: 0;
-        margin-right: var(--lumo-space-m);
-      }
-
-      /* Both ends overflowing */
-      :host([dir="rtl"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
-      }
-
-      /* End overflowing */
-      :host([dir="rtl"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
-      }
-
-      /* Start overflowing */
-      :host([dir="rtl"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
-      }
-
-      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
-      }
-
-      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
-      }
-
-      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
-        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
-      }
-    </style>
-  </template>
-</dom-module>`;document.head.appendChild(m.content);
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-const h=/Apple.* Version\/(9|10)/.test(navigator.userAgent);class f extends(o(a(r(l([i],e))))){static get template(){return t`
-    <style>
-      :host {
-        display: flex;
-        align-items: center;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host([orientation="vertical"]) {
-        display: block;
-      }
-
-      :host([orientation="horizontal"]) [part="tabs"] {
-        flex-grow: 1;
-        display: flex;
-        align-self: stretch;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-        -ms-overflow-style: none;
-      }
-
-      /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
-         and is no longer guaranteed to work:
-         https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */
-      @-moz-document url-prefix() {
-        :host([orientation="horizontal"]) [part="tabs"] {
-          overflow: hidden;
-        }
-      }
-
-      :host([orientation="horizontal"]) [part="tabs"]::-webkit-scrollbar {
-        display: none;
-      }
-
-      :host([orientation="vertical"]) [part="tabs"] {
-        height: 100%;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-
-      [part="back-button"],
-      [part="forward-button"] {
-        pointer-events: none;
-        opacity: 0;
-        cursor: default;
-      }
-
-      :host([overflow~="start"]) [part="back-button"],
-      :host([overflow~="end"]) [part="forward-button"] {
-        pointer-events: auto;
-        opacity: 1;
-      }
-
-      [part="back-button"]::after {
-        content: '◀';
-      }
-
-      [part="forward-button"]::after {
-        content: '▶';
-      }
-
-      :host([orientation="vertical"]) [part="back-button"],
-      :host([orientation="vertical"]) [part="forward-button"] {
-        display: none;
-      }
-
-      /* RTL specific styles */
-
-      :host([dir="rtl"]) [part="back-button"]::after {
-        content: '▶';
-      }
-
-      :host([dir="rtl"]) [part="forward-button"]::after {
-        content: '◀';
-      }
-    </style>
-    <div on-click="_scrollBack" part="back-button"></div>
-
-    <div id="scroll" part="tabs">
-      <slot></slot>
-    </div>
-
-    <div on-click="_scrollForward" part="forward-button"></div>
-`}static get is(){return"vaadin-tabs"}static get version(){return"3.2.0"}static get properties(){return{orientation:{value:"horizontal",type:String},selected:{value:0,type:Number}}}static get observers(){return["_updateOverflow(items.*, vertical)"]}ready(){super.ready(),this.addEventListener("iron-resize",(()=>this._updateOverflow())),this._scrollerElement.addEventListener("scroll",(()=>this._updateOverflow())),this.setAttribute("role","tablist"),n(this,(()=>{this._updateOverflow()}))}_scrollForward(){this._scroll(-this.__direction*this._scrollOffset)}_scrollBack(){this._scroll(this.__direction*this._scrollOffset)}get _scrollOffset(){return this._vertical?this._scrollerElement.offsetHeight:this._scrollerElement.offsetWidth}get _scrollerElement(){return this.$.scroll}get __direction(){return this._vertical||"rtl"!==this.getAttribute("dir")?-1:1}_updateOverflow(){const t=this._vertical?this._scrollerElement.scrollTop:this.__getNormalizedScrollLeft(this._scrollerElement);let e=this._vertical?this._scrollerElement.scrollHeight:this._scrollerElement.scrollWidth;e-=1;let o=t>0?"start":"";o+=t+this._scrollOffset<e?" end":"",1==this.__direction&&(o=o.replace(/start|end/gi,(t=>"start"===t?"end":"start"))),o?this.setAttribute("overflow",o.trim()):this.removeAttribute("overflow"),this._repaintShadowNodesHack()}_repaintShadowNodesHack(){if(h&&this.root){const t="-webkit-backface-visibility";this.root.querySelectorAll("*").forEach((e=>{e.style[t]="visible",e.style[t]=""}))}}}customElements.define(f.is,f);