@foxy.io/elements 1.26.0-beta.2 → 1.27.0-beta.1

package/dist/cdn/translations/transaction/en.json

@@ -33,7 +33,7 @@
     "spinner": {
       "loading_busy": "Loading",
       "loading_empty": "No customer",
-      "loading_error": "Failed to load"
+      "loading_error": "Unknown error"
     }
   },
   "items": {
@@ -68,7 +68,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No items",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     },
@@ -224,7 +224,7 @@
               "spinner": {
                 "loading_busy": "Loading",
                 "loading_empty": "No discounts",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               }
             }
           }
@@ -241,7 +241,7 @@
               "spinner": {
                 "loading_busy": "Loading",
                 "loading_empty": "No coupons",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               }
             }
           }
@@ -263,25 +263,44 @@
             "undo_cancel": "Review",
             "undo_confirm": "Discard",
             "attribute-form": {
-              "cancel": "Cancel",
-              "confirm": "Confirm",
-              "create": "Create",
-              "date": "{{value, date}}",
-              "date_created": "Created on",
-              "date_modified": "Last updated on",
-              "delete": "Delete",
-              "delete_prompt": "This resource will be permanently removed. Are you sure?",
-              "name": "Name",
-              "v8n_required": "Required",
-              "v8n_too_long": "Too long",
-              "value": "Value",
-              "visibility": "Visibility",
-              "visibility_private": "Only me",
-              "visibility_public": "Everyone",
-              "visibility_restricted": "Store admins",
+              "name": {
+                "label": "Name",
+                "placeholder": "Required",
+                "helper_text": "Name of this attribute. It does not have to be unique.",
+                "v8n_required": "Please name this attribute.",
+                "v8n_too_long": "Please choose a name that is 500 characters long or less."
+              },
+              "value": {
+                "label": "Value",
+                "placeholder": "Required",
+                "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+                "v8n_required": "Please provide a value for this attribute.",
+                "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+              },
+              "visibility": {
+                "label": "Visibility",
+                "option_public": "Everyone",
+                "option_restricted": "Store admins",
+                "option_private": "Only me",
+                "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+              },
+              "timestamps": {
+                "date": "{{value, date}}",
+                "date_created": "Created on",
+                "date_modified": "Last updated on"
+              },
+              "delete": {
+                "delete": "Delete",
+                "cancel": "Cancel",
+                "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+              },
+              "create": {
+                "create": "Create"
+              },
               "spinner": {
+                "refresh": "Refresh",
                 "loading_busy": "Loading",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               }
             }
           },
@@ -292,7 +311,7 @@
               "spinner": {
                 "loading_busy": "Loading",
                 "loading_empty": "No attributes",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               }
             },
             "first": "First",
@@ -349,8 +368,9 @@
                 "date": "{{value, date}}"
               },
               "spinner": {
+                "refresh": "Refresh",
                 "loading_busy": "Loading",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               },
               "delete": {
                 "delete": "Delete",
@@ -368,7 +388,7 @@
               "spinner": {
                 "loading_busy": "Loading",
                 "loading_empty": "No item options",
-                "loading_error": "Failed to load"
+                "loading_error": "Unknown error"
               }
             },
             "create_button_text": "Add option +",
@@ -393,8 +413,9 @@
           "create": "Create"
         },
         "spinner": {
+          "refresh": "Refresh",
           "loading_busy": "Loading",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -430,8 +451,9 @@
         "value": "Value",
         "visibility": "Visibility",
         "spinner": {
+          "refresh": "Refresh",
           "loading_busy": "Loading",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     },
@@ -447,7 +469,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No custom fields",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -469,25 +491,44 @@
       "undo_cancel": "Review",
       "undo_confirm": "Discard",
       "attribute-form": {
-        "cancel": "Cancel",
-        "confirm": "Confirm",
-        "create": "Create",
-        "date": "{{value, date}}",
-        "date_created": "Created on",
-        "date_modified": "Last updated on",
-        "delete": "Remove",
-        "delete_prompt": "Please confirm that you'd like to remove this attribute from the item.",
-        "name": "Name",
-        "v8n_required": "Required",
-        "v8n_too_long": "Too long",
-        "value": "Value",
-        "visibility": "Visibility",
-        "visibility_private": "Only me",
-        "visibility_public": "Everyone",
-        "visibility_restricted": "Store admins",
+        "name": {
+          "label": "Name",
+          "placeholder": "Required",
+          "helper_text": "Name of this attribute. It does not have to be unique.",
+          "v8n_required": "Please name this attribute.",
+          "v8n_too_long": "Please choose a name that is 500 characters long or less."
+        },
+        "value": {
+          "label": "Value",
+          "placeholder": "Required",
+          "helper_text": "Value of this attribute. Attribute values are automatically HTML-escaped.",
+          "v8n_required": "Please provide a value for this attribute.",
+          "v8n_too_long": "Unfortunately we can't store values that are more than 1000 characters long."
+        },
+        "visibility": {
+          "label": "Visibility",
+          "option_public": "Everyone",
+          "option_restricted": "Store admins",
+          "option_private": "Only me",
+          "helper_text": "Controls who can see this attribute. Public attributes can be shown to anyone, including customers. Private attributes are more suitable for configuration or technical details which are irrelevant to the public. Restricted attributes can only be viewed with the OAuth client that created them."
+        },
+        "timestamps": {
+          "date": "{{value, date}}",
+          "date_created": "Created on",
+          "date_modified": "Last updated on"
+        },
+        "delete": {
+          "delete": "Delete",
+          "cancel": "Cancel",
+          "delete_prompt": "Are you sure you'd like to remove this attribute? You won't be able to bring it back."
+        },
+        "create": {
+          "create": "Create"
+        },
         "spinner": {
+          "refresh": "Refresh",
           "loading_busy": "Loading",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     },
@@ -503,7 +544,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No attributes",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -550,7 +591,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No payments",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -562,27 +603,91 @@
       "cancel": "Cancel",
       "header_update": "Billing address",
       "address-form": {
-        "address_name": "Address name",
-        "address1": "Address Line 1",
-        "address2": "Address Line 2",
-        "cancel": "Cancel",
-        "city": "City",
-        "company": "Company",
-        "confirm": "Confirm",
-        "country": "Country",
-        "create": "Create",
-        "date": "{{value, date}}",
-        "date_created": "Created on",
-        "date_modified": "Last updated on",
-        "delete": "Delete",
-        "delete_prompt": "This resource will be permanently removed. Are you sure?",
-        "first_name": "First name",
-        "last_name": "Last name",
-        "phone": "Phone",
-        "postal_code": "Postal code",
-        "region": "Region",
-        "v8n_required": "Required",
-        "v8n_too_long": "Too long",
+        "address-name": {
+          "label": "Address name",
+          "placeholder": "Required",
+          "helper_text": "",
+          "v8n_required": "Please enter address name",
+          "v8n_too_long": "Please shorten address name to 100 characters or less"
+        },
+        "first-name": {
+          "label": "First name",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "Unfortunately we can't store first names longer than 50 characters"
+        },
+        "last-name": {
+          "label": "Last name",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "Unfortunately we can't store last names longer than 50 characters"
+        },
+        "company": {
+          "label": "Company",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "Unfortunately we can't store company names longer than 50 characters"
+        },
+        "phone": {
+          "label": "Phone",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "This phone number appears to be too long"
+        },
+        "address-one": {
+          "label": "Address Line 1",
+          "placeholder": "Required",
+          "helper_text": "Street address, P.O. box, company name, c/o",
+          "v8n_required": "Please enter address line 1",
+          "v8n_too_long": "Please shorten address line 1 to 100 characters or less"
+        },
+        "address-two": {
+          "label": "Address Line 2",
+          "placeholder": "Optional",
+          "helper_text": "Apartment, suite, unit, building, floor, etc.",
+          "v8n_too_long": "Please shorten address line 2 to 100 characters or less"
+        },
+        "city": {
+          "label": "City",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "Unfortunately we can't store city names longer than 50 characters"
+        },
+        "postal-code": {
+          "label": "Postal code",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "This postal code appears to be too long"
+        },
+        "country": {
+          "label": "Country",
+          "placeholder": "Optional",
+          "helper_text": ""
+        },
+        "region": {
+          "label": "Region",
+          "placeholder": "Optional",
+          "helper_text": "",
+          "v8n_too_long": "Unfortunately we can't store region names longer than 50 characters"
+        },
+        "timestamps": {
+          "date": "{{value, date}}",
+          "date_created": "Created on",
+          "date_modified": "Last updated on"
+        },
+        "delete": {
+          "delete": "Delete",
+          "cancel": "Cancel",
+          "delete_prompt": "Are you sure you'd like to remove this address? You won't be able to bring it back."
+        },
+        "create": {
+          "create": "Create"
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_error": "Unknown error"
+        },
         "country_af": "Afghanistan",
         "country_ax": "Åland Islands",
         "country_al": "Albania",
@@ -1159,11 +1264,7 @@
         "country_eh": "Western Sahara",
         "country_ye": "Yemen",
         "country_zm": "Zambia",
-        "country_zw": "Zimbabwe",
-        "spinner": {
-          "loading_busy": "Loading",
-          "loading_error": "Failed to load"
-        }
+        "country_zw": "Zimbabwe"
       }
     },
     "pagination": {
@@ -1178,7 +1279,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No addresses",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -1201,7 +1302,7 @@
         "spinner": {
           "loading_busy": "Loading",
           "loading_empty": "No shipments",
-          "loading_error": "Failed to load"
+          "loading_error": "Unknown error"
         }
       }
     }
@@ -1256,8 +1357,9 @@
     }
   },
   "spinner": {
+    "refresh": "Refresh",
     "loading_busy": "Loading",
     "loading_empty": "No data",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/transaction-card/en.json

@@ -28,6 +28,6 @@
   "spinner": {
     "loading_busy": "Loading",
     "loading_empty": "No data",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/transactions-table/en.json

@@ -15,8 +15,9 @@
   "transaction_verified": "Verified",
   "transaction_voided": "Voided",
   "spinner": {
+    "refresh": "Refresh",
     "loading_busy": "Loading",
     "loading_empty": "No data",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/user-card/en.json

@@ -3,6 +3,6 @@
   "spinner": {
     "loading_busy": "Loading",
     "loading_empty": "No data",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/user-form/en.json

@@ -20,7 +20,8 @@
   "v8n_required": "Required",
   "v8n_too_long": "Too long",
   "spinner": {
+    "refresh": "Refresh",
     "loading_busy": "Loading",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/users-table/en.json

@@ -11,9 +11,10 @@
   "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
   "update": "Update",
   "spinner": {
+    "refresh": "Refresh",
     "loading_busy": "Loading",
     "loading_empty": "No data",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   },
   "user-form": {
     "backend_developer": "Backend developer",
@@ -37,8 +38,9 @@
     "v8n_required": "Required",
     "v8n_too_long": "Too long",
     "spinner": {
+      "refresh": "Refresh",
       "loading_busy": "Loading",
-      "loading_error": "Failed to load"
+      "loading_error": "Unknown error"
     }
   }
 }

package/dist/cdn/translations/webhook-card/en.json

@@ -1,7 +1,7 @@
 {
   "spinner": {
     "loading_busy": "Loading",
-    "loading_error": "Failed to load",
+    "loading_error": "Unknown error",
     "loading_empty": "No data"
   }
 }

package/dist/cdn/translations/webhook-form/en.json

@@ -57,7 +57,7 @@
         "date": "{{value, date}}",
         "spinner": {
           "loading_busy": "Loading",
-          "loading_error": "Failed to load",
+          "loading_error": "Unknown error",
           "loading_empty": "No data"
         }
       }
@@ -75,7 +75,7 @@
         "date": "{{value, date}}",
         "spinner": {
           "loading_busy": "Loading",
-          "loading_error": "Failed to load",
+          "loading_error": "Unknown error",
           "loading_empty": "No data"
         }
       }
@@ -95,7 +95,8 @@
     "create": "Create"
   },
   "spinner": {
+    "refresh": "Refresh",
     "loading_busy": "Loading",
-    "loading_error": "Failed to load"
+    "loading_error": "Unknown error"
   }
 }

package/dist/cdn/translations/webhook-log-card/en.json

@@ -2,7 +2,7 @@
   "date": "{{value, date}}",
   "spinner": {
     "loading_busy": "Loading",
-    "loading_error": "Failed to load",
+    "loading_error": "Unknown error",
     "loading_empty": "No data"
   }
 }

package/dist/cdn/translations/webhook-status-card/en.json

@@ -5,7 +5,7 @@
   "date": "{{value, date}}",
   "spinner": {
     "loading_busy": "Loading",
-    "loading_error": "Failed to load",
+    "loading_error": "Unknown error",
     "loading_empty": "No data"
   }
 }

package/dist/elements/internal/InternalForm/InternalForm.js

@@ -46,7 +46,7 @@ export class InternalForm extends Base {
       <div aria-busy=${this.in('busy')} aria-live="polite" class="relative">
         <div
           class=${classMap({
-            'grid grid-cols-1 gap-m': true,
+            'space-y-m': true,
             'transition-opacity': true,
             'opacity-0 pointer-events-none': isSpinnerVisible,
         })}
@@ -58,17 +58,24 @@ export class InternalForm extends Base {
         <div
           data-testid="spinner"
           class=${classMap({
-            'transition-opacity absolute inset-0 flex': true,
+            'flex flex-col items-center justify-center gap-m': true,
+            'transition-opacity absolute inset-0': true,
             'opacity-0 pointer-events-none': !isSpinnerVisible,
         })}
         >
           <foxy-spinner
             layout=${this.in('fail') ? 'vertical' : 'no-label'}
-            class="m-auto"
             state=${this.in('fail') ? 'error' : 'busy'}
             infer="spinner"
           >
           </foxy-spinner>
+          ${this.href && this.in('fail')
+            ? html `
+                <vaadin-button theme="small contrast" @click=${() => this.refresh()}>
+                  <foxy-i18n infer="spinner" key="refresh"></foxy-i18n>
+                </vaadin-button>
+              `
+            : ''}
         </div>
       </div>
     `;

package/dist/elements/internal/InternalForm/InternalForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAA5E;;QAWE,yFAAyF;QACzF,WAAM,GAAkB,IAAI,CAAC;IA0F/B,CAAC;IAlGC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAKD;;;;OAIG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,wBAAwB,EAAE,IAAI;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;;;;;kBAKlE,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;;oBAE1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;KAMjD,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,MAAM,MAAM,GAAI,IAAI,CAAC,WAAmC,CAAC,kBAAkB,CAAC;QAC5E,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,oBAAoB,CAAC,GAAW;QACtC,OAAO,IAAI,CAAA;;;;;cAKD,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;;;KAGlC,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAU;QAC7C,OAAO,IAAI,CAAA;;;;;;uDAMwC,GAAG,aAAa,OAAO;;;;mBAI3D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;KAKxC,CAAC;IACJ,CAAC;;AApGD,8EAA8E;AACvE,+BAAkB,GAAG,QAAQ,CAAC","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-1 gap-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAA5E;;QAWE,yFAAyF;QACzF,WAAM,GAAkB,IAAI,CAAC;IAiG/B,CAAC;IAzGC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAKD;;;;OAIG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;;;;;kBAKlE,QAAQ,CAAC;YACf,iDAAiD,EAAE,IAAI;YACvD,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;oBAC1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;YAI1C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA;+DAC6C,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;;eAGpE;YACH,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,MAAM,MAAM,GAAI,IAAI,CAAC,WAAmC,CAAC,kBAAkB,CAAC;QAC5E,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,oBAAoB,CAAC,GAAW;QACtC,OAAO,IAAI,CAAA;;;;;cAKD,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;;;KAGlC,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAU;QAC7C,OAAO,IAAI,CAAA;;;;;;uDAMwC,GAAG,aAAa,OAAO;;;;mBAI3D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;KAKxC,CAAC;IACJ,CAAC;;AA3GD,8EAA8E;AACvE,+BAAkB,GAAG,QAAQ,CAAC","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalSourceControl/InternalSourceControl.d.ts

@@ -9,6 +9,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalSourceControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    private __isErrorVisible;
     private __hovered;
     private __focused;
     renderControl(): TemplateResult;