@foxy.io/elements 1.20.2 → 1.21.0-beta.1

package/dist/cdn/shared-639c666f.js

@@ -0,0 +1,553 @@
+import{E as t,T as e}from"./shared-be66c2e7.js";import{h as o,P as r}from"./shared-0ce006b9.js";import"./shared-5ea18e60.js";import{L as a}from"./shared-404aa9cc.js";import{I as i,b as s,a as n}from"./shared-08e27fe9.js";import{a as l}from"./shared-62c088b7.js";const c=o`<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(t(e(i(r)))){static get template(){return o`
+    <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=o`<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(t(a(e(l([s],r))))){static get template(){return o`
+    <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);

package/dist/cdn/shared-6581241a.js

@@ -0,0 +1 @@
+import"./shared-0821cfdc.js";import{I as e}from"./shared-9bdacf65.js";import{h as t,c as i}from"./shared-7f33a83a.js";import{Q as n}from"./shared-76b3d76a.js";import"./shared-bc814810.js";import{_ as r}from"./shared-a8ced8bf.js";import"./shared-8dd0af4d.js";import"./foxy-spinner.js";import{C as s}from"./shared-43bcce74.js";import{T as a}from"./shared-2cc638ad.js";import{N as o}from"./shared-181f51bd.js";import{c as l}from"./shared-4e709717.js";let d,c=e=>e;customElements.define("foxy-internal-delete-control",class extends e{constructor(){super(...arguments),this.theme="error"}static get properties(){return r(r({},super.properties),{},{theme:{type:String}})}renderControl(){return t(d||(d=c` <foxy-internal-confirm-dialog message="delete_prompt" confirm="delete" cancel="cancel" header="delete" theme="primary error" infer="" id="confirm" @hide="${0}"> </foxy-internal-confirm-dialog> <vaadin-button data-testid="delete" theme="${0}" class="w-full" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="delete"></foxy-i18n> </vaadin-button> `),(e=>{var t;return!e.detail.cancelled&&(null===(t=this.nucleon)||void 0===t?void 0:t.delete())}),this.theme,this.disabled||this.readonly,(e=>{this.renderRoot.querySelector("#confirm").show(e.currentTarget)}))}});let m,f=e=>e;customElements.define("foxy-internal-create-control",class extends e{constructor(){super(...arguments),this.theme="primary success"}static get properties(){return r(r({},super.properties),{},{theme:{type:String}})}renderControl(){return t(m||(m=f` <vaadin-button class="w-full" theme="${0}" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="create"></foxy-i18n> </vaadin-button> `),this.theme,this.disabled||this.__isInvalid,(()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.submit()}))}get __isCleanTemplateInvalid(){var e;return!!(null===(e=this.nucleon)||void 0===e?void 0:e.in({idle:{template:{clean:"invalid"}}}))}get __isDirtyTemplateInvalid(){var e;return!!(null===(e=this.nucleon)||void 0===e?void 0:e.in({idle:{template:{dirty:"invalid"}}}))}get __isCleanSnapshotInvalid(){var e;return!!(null===(e=this.nucleon)||void 0===e?void 0:e.in({idle:{snapshot:{clean:"invalid"}}}))}get __isDirtySnapshotInvalid(){var e;return!!(null===(e=this.nucleon)||void 0===e?void 0:e.in({idle:{snapshot:{dirty:"invalid"}}}))}get __isTemplateInvalid(){return this.__isCleanTemplateInvalid||this.__isDirtyTemplateInvalid}get __isSnapshotInvalid(){return this.__isCleanSnapshotInvalid||this.__isDirtySnapshotInvalid}get __isInvalid(){return this.__isSnapshotInvalid||this.__isTemplateInvalid}});let p,y,u=e=>e;customElements.define("foxy-internal-timestamps-control",class extends e{static get styles(){return[super.styles,i(p||(p=u`.max-w-0{max-width:0}`))]}renderControl(){return t(y||(y=u` <table class="font-lumo text-m leading-m w-full"> <tbody class="divide-y divide-contrast-10"> <tr> <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m"> <foxy-i18n infer="" key="date_created"></foxy-i18n> </td> <td class="max-w-0 truncate py-s text-body w-2-3"> <foxy-i18n options="${0}" infer="" key="date"> </foxy-i18n> </td> </tr> <tr> <td class="max-w-0 truncate py-s text-secondary w-1-3 pr-m"> <foxy-i18n infer="" key="date_modified"></foxy-i18n> </td> <td class="max-w-0 truncate py-s text-body w-2-3"> <foxy-i18n options="${0}" infer="" key="date"> </foxy-i18n> </td> </tr> </tbody> </table> `),JSON.stringify({value:n(this,"nucleon.form.date_created")}),JSON.stringify({value:n(this,"nucleon.form.date_modified")}))}});let h,v,x,_=e=>e;const b=s(a(o));class g extends b{renderBody(){return this.data?t(h||(h=_` <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control> <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control> `)):t(v||(v=_`<foxy-internal-create-control infer="create"></foxy-internal-create-control>`))}render(){const e=!(this.in("idle")||this.in({busy:"fetching"})&&this.data);return t(x||(x=_` <div aria-busy="${0}" aria-live="polite" class="relative"> <div class="${0}"> ${0} </div> <div data-testid="spinner" class="${0}"> <foxy-spinner layout="${0}" class="m-auto" state="${0}" infer="spinner"> </foxy-spinner> </div> </div> `),this.in("busy"),l({"grid grid-cols-1 gap-m":!0,"transition-opacity":!0,"opacity-0 pointer-events-none":e}),this.renderBody(),l({"transition-opacity absolute inset-0 flex":!0,"opacity-0 pointer-events-none":!e}),this.in("fail")?"vertical":"no-label",this.in("fail")?"error":"busy")}}customElements.define("foxy-internal-form",g);export{g as I};