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

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":"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","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;

package/dist/elements/internal/InternalSourceControl/InternalSourceControl.js

@@ -10,12 +10,14 @@ import { repeat } from 'lit-html/directives/repeat';
 export class InternalSourceControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.__isErrorVisible = false;
         this.__hovered = false;
         this.__focused = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            __isErrorVisible: { attribute: false },
             __hovered: { attribute: false },
             __focused: { attribute: false },
         };
@@ -110,20 +112,25 @@ textarea::selection{
           part="editor"
         >
           <div
-            class="h-full transition-colors monospace leading-s text-s p-m text-right border-r ${lineNumbersClass}"
+            class="h-full transition-colors monospace leading-s text-s text-right border-r ${lineNumbersClass}"
+            style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
           >
-            ${repeat((_a = this._value.split('\n')) !== null && _a !== void 0 ? _a : [], (_, i) => String(i), (_, i) => html `<div>${i + 1}</div>`)}
+            ${repeat((_a = this._value.split('\n')) !== null && _a !== void 0 ? _a : [], (_, i) => String(i), (_, i) => html `<div>${i < 9 ? html `<span class="opacity-0">0</span>` : ''}${i < 99 ? html `<span class="opacity-0">0</span>` : ''}<span>${i + 1}<span></div>`)}
           </div>
 
           <textarea
             placeholder=${this.placeholder}
-            class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none p-m block w-full select-text transition-colors ${textAreaClass}"
+            class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${textAreaClass}"
+            style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
             rows="1"
             .value=${this._value}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             @focus=${() => (this.__focused = true)}
-            @blur=${() => (this.__focused = false)}
+            @blur=${() => {
+            this.__focused = false;
+            this.__isErrorVisible = true;
+        }}
             @input=${(evt) => {
             const textarea = evt.currentTarget;
             this._value = textarea.value;
@@ -135,9 +142,17 @@ textarea::selection{
         <div
           class="mt-xs transition-colors leading-xs text-xs ${helperTextClass}"
           part="helper-text"
+          ?hidden=${!this.helperText}
         >
           ${this.helperText}
         </div>
+
+        <div
+          class="mt-xs text-xs leading-xs text-error"
+          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}
+        >
+          ${this._errorMessage}
+        </div>
       </label>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalSourceControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSourceControl/InternalSourceControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\n\n/**\n * Internal control displaying editable source code.\n *\n * @since 1.23.0\n * @element foxy-internal-source-control\n */\nexport class InternalSourceControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __hovered: { attribute: false },\n      __focused: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        .monospace {\n          font-family: monospace;\n        }\n\n        .resize-none {\n          resize: none;\n        }\n\n        .max-h-16em {\n          max-height: 16em;\n        }\n\n        textarea::selection {\n          background: var(--lumo-contrast-10pct);\n        }\n      `,\n    ];\n  }\n\n  private __hovered = false;\n\n  private __focused = false;\n\n  renderControl(): TemplateResult {\n    let lineNumbersClass: string;\n    let helperTextClass: string;\n    let containerClass: string;\n    let textAreaClass: string;\n    let labelClass: string;\n\n    if (this.disabled) {\n      lineNumbersClass = 'bg-contrast-5 text-disabled';\n      helperTextClass = 'text-disabled';\n      textAreaClass = 'text-disabled';\n      labelClass = 'text-disabled';\n\n      if (this.readonly) {\n        lineNumbersClass += ' border-dashed border-contrast-20';\n        containerClass = 'border-dashed border-contrast-30';\n      } else {\n        lineNumbersClass += ' border-transparent';\n        containerClass = 'border-contrast-10';\n      }\n    } else if (this.readonly) {\n      lineNumbersClass = 'border-dashed border-contrast-30 bg-transparent text-secondary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-dashed border-contrast-30';\n      textAreaClass = 'text-secondary';\n      labelClass = 'text-secondary';\n      if (this.__focused) containerClass += ' ring-2 ring-primary-50';\n    } else if (this.__focused) {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-primary-50 ring-1 ring-primary-50';\n      textAreaClass = 'text-body';\n      labelClass = 'text-primary';\n    } else if (this.__hovered) {\n      lineNumbersClass = 'border-transparent bg-contrast-20 text-tertiary';\n      helperTextClass = 'text-body';\n      containerClass = 'border-contrast-20';\n      textAreaClass = 'text-body';\n      labelClass = 'text-body';\n    } else {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-contrast-10';\n      textAreaClass = 'text-body';\n      labelClass = 'text-secondary';\n    }\n\n    return html`\n      <label\n        class=\"block h-full\"\n        @mouseenter=${() => (this.__hovered = true)}\n        @mouseleave=${() => (this.__hovered = false)}\n      >\n        <div\n          class=\"mb-xs transition-colors leading-none text-s font-medium ${labelClass}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=\"max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${containerClass}\"\n          part=\"editor\"\n        >\n          <div\n            class=\"h-full transition-colors monospace leading-s text-s p-m text-right border-r ${lineNumbersClass}\"\n          >\n            ${repeat(\n              this._value.split('\\n') ?? [],\n              (_, i) => String(i),\n              (_, i) => html`<div>${i + 1}</div>`\n            )}\n          </div>\n\n          <textarea\n            placeholder=${this.placeholder}\n            class=\"bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none p-m block w-full select-text transition-colors ${textAreaClass}\"\n            rows=\"1\"\n            .value=${this._value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @focus=${() => (this.__focused = true)}\n            @blur=${() => (this.__focused = false)}\n            @input=${(evt: InputEvent) => {\n              const textarea = evt.currentTarget as HTMLTextAreaElement;\n              this._value = textarea.value;\n            }}\n          >\n          </textarea>\n        </div>\n\n        <div\n          class=\"mt-xs transition-colors leading-xs text-xs ${helperTextClass}\"\n          part=\"helper-text\"\n        >\n          ${this.helperText}\n        </div>\n      </label>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.renderRoot.querySelectorAll('textarea').forEach(textarea => {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\n    });\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalSourceControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSourceControl/InternalSourceControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\n\n/**\n * Internal control displaying editable source code.\n *\n * @since 1.23.0\n * @element foxy-internal-source-control\n */\nexport class InternalSourceControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __isErrorVisible: { attribute: false },\n      __hovered: { attribute: false },\n      __focused: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        .monospace {\n          font-family: monospace;\n        }\n\n        .resize-none {\n          resize: none;\n        }\n\n        .max-h-16em {\n          max-height: 16em;\n        }\n\n        textarea::selection {\n          background: var(--lumo-contrast-10pct);\n        }\n      `,\n    ];\n  }\n\n  private __isErrorVisible = false;\n\n  private __hovered = false;\n\n  private __focused = false;\n\n  renderControl(): TemplateResult {\n    let lineNumbersClass: string;\n    let helperTextClass: string;\n    let containerClass: string;\n    let textAreaClass: string;\n    let labelClass: string;\n\n    if (this.disabled) {\n      lineNumbersClass = 'bg-contrast-5 text-disabled';\n      helperTextClass = 'text-disabled';\n      textAreaClass = 'text-disabled';\n      labelClass = 'text-disabled';\n\n      if (this.readonly) {\n        lineNumbersClass += ' border-dashed border-contrast-20';\n        containerClass = 'border-dashed border-contrast-30';\n      } else {\n        lineNumbersClass += ' border-transparent';\n        containerClass = 'border-contrast-10';\n      }\n    } else if (this.readonly) {\n      lineNumbersClass = 'border-dashed border-contrast-30 bg-transparent text-secondary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-dashed border-contrast-30';\n      textAreaClass = 'text-secondary';\n      labelClass = 'text-secondary';\n      if (this.__focused) containerClass += ' ring-2 ring-primary-50';\n    } else if (this.__focused) {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-primary-50 ring-1 ring-primary-50';\n      textAreaClass = 'text-body';\n      labelClass = 'text-primary';\n    } else if (this.__hovered) {\n      lineNumbersClass = 'border-transparent bg-contrast-20 text-tertiary';\n      helperTextClass = 'text-body';\n      containerClass = 'border-contrast-20';\n      textAreaClass = 'text-body';\n      labelClass = 'text-body';\n    } else {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-contrast-10';\n      textAreaClass = 'text-body';\n      labelClass = 'text-secondary';\n    }\n\n    return html`\n      <label\n        class=\"block h-full\"\n        @mouseenter=${() => (this.__hovered = true)}\n        @mouseleave=${() => (this.__hovered = false)}\n      >\n        <div\n          class=\"mb-xs transition-colors leading-none text-s font-medium ${labelClass}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=\"max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${containerClass}\"\n          part=\"editor\"\n        >\n          <div\n            class=\"h-full transition-colors monospace leading-s text-s text-right border-r ${lineNumbersClass}\"\n            style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          >\n            ${repeat(\n              this._value.split('\\n') ?? [],\n              (_, i) => String(i),\n              (_, i) =>\n                html`<div>${i < 9 ? html`<span class=\"opacity-0\">0</span>` : ''}${\n                  i < 99 ? html`<span class=\"opacity-0\">0</span>` : ''\n                }<span>${i + 1}<span></div>`\n            )}\n          </div>\n\n          <textarea\n            placeholder=${this.placeholder}\n            class=\"bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${textAreaClass}\"\n            style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n            rows=\"1\"\n            .value=${this._value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @focus=${() => (this.__focused = true)}\n            @blur=${() => {\n              this.__focused = false;\n              this.__isErrorVisible = true;\n            }}\n            @input=${(evt: InputEvent) => {\n              const textarea = evt.currentTarget as HTMLTextAreaElement;\n              this._value = textarea.value;\n            }}\n          >\n          </textarea>\n        </div>\n\n        <div\n          class=\"mt-xs transition-colors leading-xs text-xs ${helperTextClass}\"\n          part=\"helper-text\"\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </label>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.renderRoot.querySelectorAll('textarea').forEach(textarea => {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\n    });\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

package/dist/elements/public/AddressForm/AddressForm.d.ts

@@ -1,13 +1,11 @@
-import { Data, Templates } from './types';
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-import { NucleonV8N } from '../NucleonElement/types';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+};
 /**
  * Basic form displaying customer address.
  *
@@ -57,22 +55,13 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @since 1.2.0
  */
 export declare class AddressForm extends Base<Data> {
-    static get scopedElements(): ScopedElementsMap;
     static get v8n(): NucleonV8N<Data>;
     templates: Templates;
-    private readonly __getValidator;
-    private readonly __bindField;
-    private readonly __maybeRenderCountry;
-    private readonly __maybeRenderRegion;
-    private readonly __maybeRenderTextField;
-    private readonly __renderTimestamps;
-    private readonly __renderAction;
-    connectedCallback(): void;
-    render(): TemplateResult;
-    disconnectedCallback(): void;
-    private __handleKeyDown;
-    private __getErrorMessage;
-    private __handleActionClick;
-    private __handleConfirmHide;
+    private __countrySetValue;
+    get readonlySelector(): BooleanSelector;
+    get disabledSelector(): BooleanSelector;
+    renderBody(): TemplateResult;
+    private get __countryOptions();
+    private get __regionOptions();
 }
 export {};