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

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

@@ -1,19 +1,42 @@
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { TemplateResult } from 'lit-element';
-import { Data } from './types';
-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 { ScopedElementsMap } from '@open-wc/scoped-elements';
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
 } & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+/**
+ * Form element for `fx:user` resources.
+ *
+ * @slot first-name:before – new in v1.22.0
+ * @slot first-name:after – new in v1.22.0
+ * @slot last-name:before – new in v1.22.0
+ * @slot last-name:after – new in v1.22.0
+ * @slot email:before – new in v1.22.0
+ * @slot email:after – new in v1.22.0
+ * @slot phone:before – new in v1.22.0
+ * @slot phone:after – new in v1.22.0
+ * @slot role:before – new in v1.22.0
+ * @slot role:after – new in v1.22.0
+ * @slot create:before – new in v1.22.0
+ * @slot create:after – new in v1.22.0
+ * @slot delete:before – new in v1.22.0
+ * @slot delete:after – new in v1.22.0
+ *
+ * @element foxy-user-form
+ * @since 1.3.0
+ */
 export declare class UserForm extends Base<Data> {
     static get scopedElements(): ScopedElementsMap;
     static get v8n(): NucleonV8N<Data>;
+    templates: Templates;
     private __getValidator;
     private __bindField;
-    render(): TemplateResult;
+    renderBody(): TemplateResult;
+    private __renderField;
+    private __renderRole;
+    private __renderAction;
     private __getErrorMessage;
     private __handleActionClick;
     private __handleConfirmHide;

package/dist/elements/public/UserForm/UserForm.js

@@ -1,19 +1,40 @@
-import { Checkbox, Group } from "../../private/index.js";
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-element';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { validate as isEmail } from 'email-validator';
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { validate as isEmail } from 'email-validator';
-import memoize from 'lodash-es/memoize';
+import { Checkbox } from "../../private/Checkbox/Checkbox.js";
+import { Group } from "../../private/Group/Group.js";
 import { roles } from "./roles.js";
-const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'user-form'))));
+import { html } from 'lit-html';
+import memoize from 'lodash-es/memoize';
+const Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, 'user-form')));
+/**
+ * Form element for `fx:user` resources.
+ *
+ * @slot first-name:before – new in v1.22.0
+ * @slot first-name:after – new in v1.22.0
+ * @slot last-name:before – new in v1.22.0
+ * @slot last-name:after – new in v1.22.0
+ * @slot email:before – new in v1.22.0
+ * @slot email:after – new in v1.22.0
+ * @slot phone:before – new in v1.22.0
+ * @slot phone:after – new in v1.22.0
+ * @slot role:before – new in v1.22.0
+ * @slot role:after – new in v1.22.0
+ * @slot create:before – new in v1.22.0
+ * @slot create:after – new in v1.22.0
+ * @slot delete:before – new in v1.22.0
+ * @slot delete:after – new in v1.22.0
+ *
+ * @element foxy-user-form
+ * @since 1.3.0
+ */
 export class UserForm extends Base {
     constructor() {
         super(...arguments);
+        this.templates = {};
         this.__getValidator = memoize((prefix) => () => {
             return !this.errors.some(err => err.startsWith(prefix));
         });
@@ -27,6 +48,7 @@ export class UserForm extends Base {
     static get scopedElements() {
         return {
             'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
             'vaadin-text-field': customElements.get('vaadin-text-field'),
             'vaadin-button': customElements.get('vaadin-button'),
             'foxy-spinner': customElements.get('foxy-spinner'),
@@ -40,59 +62,56 @@ export class UserForm extends Base {
             ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',
             ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',
             ({ email: v }) => (v && v.length > 0) || 'email_required',
-            ({ email: v }) => (v && v.length <= 100) || 'email_too_long',
-            ({ email: v }) => (v && isEmail(v)) || 'email_invalid_email',
+            ({ email: v }) => !v || v.length <= 100 || 'email_too_long',
+            ({ email: v }) => !v || isEmail(v) || 'email_invalid_email',
             ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',
         ];
     }
-    render() {
-        var _a, _b;
-        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-        const isValid = isTemplateValid || isSnapshotValid;
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
-        const isDisabled = isBusy || isFail || this.disabled;
+    renderBody() {
+        const hiddenSelector = this.hiddenSelector;
+        const action = this.href ? 'delete' : 'create';
+        const fields = ['first_name', 'last_name', 'email', 'phone'];
+        return html `
+      <div class="grid sm-grid-cols-2 gap-m">
+        ${fields.map(field => this.__renderField(field))}
+        ${hiddenSelector.matches('role', true) ? '' : this.__renderRole()}
+        ${hiddenSelector.matches(action, true) ? '' : this.__renderAction()}
+      </div>
+    `;
+    }
+    __renderField(property) {
+        const control = property.replace('_', '-');
+        if (this.hiddenSelector.matches(control))
+            return;
         return html `
-      <foxy-internal-confirm-dialog
-        data-testid="confirm"
-        message="delete_prompt"
-        confirm="delete"
-        cancel="cancel"
-        header="delete"
-        theme="primary error"
-        lang=${this.lang}
-        ns=${this.ns}
-        id="confirm"
-        @hide=${this.__handleConfirmHide}
-      >
-      </foxy-internal-confirm-dialog>
+      <div>
+        ${this.renderTemplateOrSlot(`${control}:before`)}
 
-      <div
-        data-testid="wrapper"
-        aria-busy=${this.in('busy')}
-        aria-live="polite"
-        class="space-y-l relative"
-      >
-        <div class="grid grid-cols-1 sm-grid-cols-2 gap-m">
-          ${['first_name', 'last_name', 'email', 'phone'].map(field => html `
-              <vaadin-text-field
-                error-message=${this.__getErrorMessage(field)}
-                data-testid=${field}
-                ?disabled=${isDisabled}
-                ?readonly=${this.readonly}
-                class="w-full"
-                label=${this.t(field)}
-                value=${ifDefined(this.form[field])}
-                .checkValidity=${this.__getValidator(field)}
-                @input=${this.__bindField(field)}
-                @keydown=${this.__handleKeyDown}
-              >
-              </vaadin-text-field>
-            `)}
-        </div>
+        <vaadin-text-field
+          error-message=${this.__getErrorMessage(property)}
+          data-testid=${property}
+          label=${this.t(property)}
+          class="w-full"
+          value=${ifDefined(this.form[property])}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(control, true)}
+          ?readonly=${this.readonlySelector.matches(control, true)}
+          .checkValidity=${this.__getValidator(property)}
+          @input=${this.__bindField(property)}
+          @keydown=${this.__handleKeyDown}
+        >
+        </vaadin-text-field>
 
-        <x-group frame>
+        ${this.renderTemplateOrSlot(`${control}:after`)}
+      </div>
+    `;
+    }
+    __renderRole() {
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('role', true);
+        return html `
+      <div class="sm-col-span-2">
+        ${this.renderTemplateOrSlot('role:before')}
+
+        <x-group data-testid="role" frame>
           ${roles.map((role, index) => html `
               <hr
                 class=${index > 0 ? 'border-contrast-10' : 'hidden'}
@@ -100,23 +119,23 @@ export class UserForm extends Base {
               />
 
               <x-checkbox
+                data-testclass="role-option"
                 class="w-full p-m"
-                ?readonly=${this.readonly}
+                ?readonly=${this.readonlySelector.matches('role', true)}
                 ?disabled=${isDisabled}
                 ?checked=${this.form[role.property]}
                 @change=${(evt) => {
-            const checkbox = evt.target;
+            const checkbox = evt.currentTarget;
             this.edit({ [role.property]: checkbox.checked });
         }}
               >
                 <div class="flex items-start leading-s">
                   <div class="flex-1 flex flex-col">
-                    <foxy-i18n key=${role.key} lang=${this.lang} ns=${this.ns}></foxy-i18n>
+                    <foxy-i18n key=${role.key} infer=""></foxy-i18n>
                     <foxy-i18n
-                      class="text-s text-secondary"
-                      lang=${this.lang}
+                      class="text-s ${isDisabled ? '' : 'text-secondary'}"
+                      infer=""
                       key="${role.key}_explainer"
-                      ns=${this.ns}
                     >
                     </foxy-i18n>
                   </div>
@@ -127,33 +146,48 @@ export class UserForm extends Base {
             `)}
         </x-group>
 
+        ${this.renderTemplateOrSlot('role:after')}
+      </div>
+    `;
+    }
+    __renderAction() {
+        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
+        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
+        const isValid = isTemplateValid || isSnapshotValid;
+        const action = this.href ? 'delete' : 'create';
+        const isActionDisabled = (this.in({ idle: 'template' }) && !isValid) ||
+            this.in('busy') ||
+            this.in('fail') ||
+            this.disabledSelector.matches(action, true);
+        return html `
+      <div class="sm-col-span-2">
+        ${this.renderTemplateOrSlot(`${action}:before`)}
+
+        <foxy-internal-confirm-dialog
+          data-testid="confirm"
+          message="delete_prompt"
+          confirm="delete"
+          cancel="cancel"
+          header="delete"
+          theme="primary error"
+          lang=${this.lang}
+          ns=${this.ns}
+          id="confirm"
+          @hide=${this.__handleConfirmHide}
+        >
+        </foxy-internal-confirm-dialog>
+
         <vaadin-button
-          data-testid="action"
+          data-testid=${action}
           theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}
           class="w-full"
-          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}
+          ?disabled=${isActionDisabled}
           @click=${this.__handleActionClick}
         >
-          <foxy-i18n lang=${this.lang} key=${this.href ? 'delete' : 'create'} ns=${this.ns}>
-          </foxy-i18n>
+          <foxy-i18n lang=${this.lang} key=${action} ns=${this.ns}></foxy-i18n>
         </vaadin-button>
 
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !isBusy && !isFail,
-        })}
-        >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
+        ${this.renderTemplateOrSlot(`${action}:after`)}
       </div>
     `;
     }

package/dist/elements/public/UserForm/UserForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Group } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { validate as isEmail } from 'email-validator';\nimport memoize from 'lodash-es/memoize';\nimport { roles } from './roles';\n\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'user-form')))\n);\n\nexport class UserForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'x-checkbox': Checkbox,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',\n      ({ email: v }) => (v && v.length > 0) || 'email_required',\n      ({ email: v }) => (v && v.length <= 100) || 'email_too_long',\n      ({ email: v }) => (v && isEmail(v)) || 'email_invalid_email',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',\n    ];\n  }\n\n  private __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  render(): TemplateResult {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isDisabled = isBusy || isFail || this.disabled;\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${this.lang}\n        ns=${this.ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"space-y-l relative\"\n      >\n        <div class=\"grid grid-cols-1 sm-grid-cols-2 gap-m\">\n          ${(['first_name', 'last_name', 'email', 'phone'] as const).map(\n            field => html`\n              <vaadin-text-field\n                error-message=${this.__getErrorMessage(field)}\n                data-testid=${field}\n                ?disabled=${isDisabled}\n                ?readonly=${this.readonly}\n                class=\"w-full\"\n                label=${this.t(field)}\n                value=${ifDefined((this.form as any)[field])}\n                .checkValidity=${this.__getValidator(field)}\n                @input=${this.__bindField(field)}\n                @keydown=${this.__handleKeyDown}\n              >\n              </vaadin-text-field>\n            `\n          )}\n        </div>\n\n        <x-group frame>\n          ${roles.map(\n            (role, index) => html`\n              <hr\n                class=${index > 0 ? 'border-contrast-10' : 'hidden'}\n                style=\"margin-left: calc((var(--lumo-space-m) * 2) + 1.125rem)\"\n              />\n\n              <x-checkbox\n                class=\"w-full p-m\"\n                ?readonly=${this.readonly}\n                ?disabled=${isDisabled}\n                ?checked=${this.form[role.property]}\n                @change=${(evt: CustomEvent) => {\n                  const checkbox = evt.target as Checkbox;\n                  this.edit({ [role.property]: checkbox.checked });\n                }}\n              >\n                <div class=\"flex items-start leading-s\">\n                  <div class=\"flex-1 flex flex-col\">\n                    <foxy-i18n key=${role.key} lang=${this.lang} ns=${this.ns}></foxy-i18n>\n                    <foxy-i18n\n                      class=\"text-s text-secondary\"\n                      lang=${this.lang}\n                      key=\"${role.key}_explainer\"\n                      ns=${this.ns}\n                    >\n                    </foxy-i18n>\n                  </div>\n\n                  <div class=\"mt-xs\" style=\"width: 1.125rem; height: 1.125rem;\">${role.icon}</div>\n                </div>\n              </x-checkbox>\n            `\n          )}\n        </x-group>\n\n        <vaadin-button\n          data-testid=\"action\"\n          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}\n          class=\"w-full\"\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${this.__handleActionClick}\n        >\n          <foxy-i18n lang=${this.lang} key=${this.href ? 'delete' : 'create'} ns=${this.ns}>\n          </foxy-i18n>\n        </vaadin-button>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __handleActionClick(evt: Event) {\n    if (this.in({ idle: 'snapshot' })) {\n      const confirm = this.renderRoot.querySelector('#confirm');\n      (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n    } else {\n      this.submit();\n    }\n  }\n\n  private __handleConfirmHide(evt: CustomEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n}\n"]}
+{"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,2CAAwC;AAC3D,OAAO,EAAE,KAAK,EAAE,qCAAkC;AAClD,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AAExC,MAAM,IAAI,GAAG,mBAAmB,CAAC,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;AAEhG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAU;IAAxC;;QAyBE,cAAS,GAAc,EAAE,CAAC;QAElB,mBAAc,GAAG,OAAO,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,GAAG,EAAE;YACxD,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEK,gBAAW,GAAG,OAAO,CAAC,CAAC,GAAe,EAAE,EAAE;YAChD,OAAO,CAAC,GAAgB,EAAE,EAAE;gBAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;gBAC9C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IA6JL,CAAC;IAhMC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,8BAA8B,EAAE,cAAc,CAAC,GAAG,CAAC,8BAA8B,CAAC;YAClF,uBAAuB,EAAE,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC;YACpE,mBAAmB,EAAE,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAC5D,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;YACpD,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC;YAClD,YAAY,EAAE,QAAQ;YACtB,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,SAAS,EAAE,KAAK;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO;YACL,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,qBAAqB;YACpE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,oBAAoB;YAClE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,gBAAgB;YACzD,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,GAAG,IAAI,gBAAgB;YAC3D,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,qBAAqB;YAC3D,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,gBAAgB;SAC3D,CAAC;IACJ,CAAC;IAeD,UAAU;QACR,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/C,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAU,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;UAC9C,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/D,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;KAEtE,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,QAAoB;QACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QAC3C,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC;YAAE,OAAO;QAEjD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,GAAG,OAAO,SAAS,CAAC;;;0BAG9B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC;wBAClC,QAAQ;kBACd,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;;kBAEhB,SAAS,CAAE,IAAI,CAAC,IAAY,CAAC,QAAQ,CAAC,CAAC;sBACnC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;sBAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;2BACvC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;mBACrC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;qBACxB,IAAI,CAAC,eAAe;;;;UAI/B,IAAI,CAAC,oBAAoB,CAAC,GAAG,OAAO,QAAQ,CAAC;;KAElD,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAEnF,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;;YAGtC,KAAK,CAAC,GAAG,CACT,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAET,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,QAAQ;;;;;;;4BAOvC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC;4BAC3C,UAAU;2BACX,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;0BACzB,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAyB,CAAC;YAC/C,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QACnD,CAAC;;;;qCAIoB,IAAI,CAAC,GAAG;;sCAEP,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;;6BAE3C,IAAI,CAAC,GAAG;;;;;kFAK6C,IAAI,CAAC,IAAI;;;aAG9E,CACF;;;UAGD,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;;KAE5C,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5E,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC5E,MAAM,OAAO,GAAG,eAAe,IAAI,eAAe,CAAC;QACnD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC/C,MAAM,gBAAgB,GACpB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC;YAC3C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YACf,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,GAAG,MAAM,SAAS,CAAC;;;;;;;;;iBAStC,IAAI,CAAC,IAAI;eACX,IAAI,CAAC,EAAE;;kBAEJ,IAAI,CAAC,mBAAmB;;;;;wBAKlB,MAAM;kBACZ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;sBAE/D,gBAAgB;mBACnB,IAAI,CAAC,mBAAmB;;4BAEf,IAAI,CAAC,IAAI,QAAQ,MAAM,OAAO,IAAI,CAAC,EAAE;;;UAGvD,IAAI,CAAC,oBAAoB,CAAC,GAAG,MAAM,QAAQ,CAAC;;KAEjD,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,MAAc;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9D,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,CAAC;IAEO,mBAAmB,CAAC,GAAU;QACpC,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACzD,OAAiC,CAAC,IAAI,CAAC,GAAG,CAAC,aAA4B,CAAC,CAAC;SAC3E;aAAM;YACL,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;IACH,CAAC;IAEO,mBAAmB,CAAC,GAAgB;QAC1C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC3C,CAAC;IAEO,eAAe,CAAC,GAAkB;QACxC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;CACF","sourcesContent":["import type { InternalConfirmDialog } from '../../internal/InternalConfirmDialog';\nimport type { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport type { Data, Templates } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { validate as isEmail } from 'email-validator';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { Checkbox } from '../../private/Checkbox/Checkbox';\nimport { Group } from '../../private/Group/Group';\nimport { roles } from './roles';\nimport { html } from 'lit-html';\n\nimport memoize from 'lodash-es/memoize';\n\nconst Base = ScopedElementsMixin(ResponsiveMixin(TranslatableMixin(InternalForm, 'user-form')));\n\n/**\n * Form element for `fx:user` resources.\n *\n * @slot first-name:before – new in v1.22.0\n * @slot first-name:after – new in v1.22.0\n * @slot last-name:before – new in v1.22.0\n * @slot last-name:after – new in v1.22.0\n * @slot email:before – new in v1.22.0\n * @slot email:after – new in v1.22.0\n * @slot phone:before – new in v1.22.0\n * @slot phone:after – new in v1.22.0\n * @slot role:before – new in v1.22.0\n * @slot role:after – new in v1.22.0\n * @slot create:before – new in v1.22.0\n * @slot create:after – new in v1.22.0\n * @slot delete:before – new in v1.22.0\n * @slot delete:after – new in v1.22.0\n *\n * @element foxy-user-form\n * @since 1.3.0\n */\nexport class UserForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'x-checkbox': Checkbox,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',\n      ({ email: v }) => (v && v.length > 0) || 'email_required',\n      ({ email: v }) => !v || v.length <= 100 || 'email_too_long',\n      ({ email: v }) => !v || isEmail(v) || 'email_invalid_email',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const action = this.href ? 'delete' : 'create';\n    const fields = ['first_name', 'last_name', 'email', 'phone'] as const;\n\n    return html`\n      <div class=\"grid sm-grid-cols-2 gap-m\">\n        ${fields.map(field => this.__renderField(field))}\n        ${hiddenSelector.matches('role', true) ? '' : this.__renderRole()}\n        ${hiddenSelector.matches(action, true) ? '' : this.__renderAction()}\n      </div>\n    `;\n  }\n\n  private __renderField(property: keyof Data) {\n    const control = property.replace('_', '-');\n    if (this.hiddenSelector.matches(control)) return;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${control}:before`)}\n\n        <vaadin-text-field\n          error-message=${this.__getErrorMessage(property)}\n          data-testid=${property}\n          label=${this.t(property)}\n          class=\"w-full\"\n          value=${ifDefined((this.form as any)[property])}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(control, true)}\n          ?readonly=${this.readonlySelector.matches(control, true)}\n          .checkValidity=${this.__getValidator(property)}\n          @input=${this.__bindField(property)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${control}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderRole() {\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches('role', true);\n\n    return html`\n      <div class=\"sm-col-span-2\">\n        ${this.renderTemplateOrSlot('role:before')}\n\n        <x-group data-testid=\"role\" frame>\n          ${roles.map(\n            (role, index) => html`\n              <hr\n                class=${index > 0 ? 'border-contrast-10' : 'hidden'}\n                style=\"margin-left: calc((var(--lumo-space-m) * 2) + 1.125rem)\"\n              />\n\n              <x-checkbox\n                data-testclass=\"role-option\"\n                class=\"w-full p-m\"\n                ?readonly=${this.readonlySelector.matches('role', true)}\n                ?disabled=${isDisabled}\n                ?checked=${this.form[role.property]}\n                @change=${(evt: CustomEvent) => {\n                  const checkbox = evt.currentTarget as Checkbox;\n                  this.edit({ [role.property]: checkbox.checked });\n                }}\n              >\n                <div class=\"flex items-start leading-s\">\n                  <div class=\"flex-1 flex flex-col\">\n                    <foxy-i18n key=${role.key} infer=\"\"></foxy-i18n>\n                    <foxy-i18n\n                      class=\"text-s ${isDisabled ? '' : 'text-secondary'}\"\n                      infer=\"\"\n                      key=\"${role.key}_explainer\"\n                    >\n                    </foxy-i18n>\n                  </div>\n\n                  <div class=\"mt-xs\" style=\"width: 1.125rem; height: 1.125rem;\">${role.icon}</div>\n                </div>\n              </x-checkbox>\n            `\n          )}\n        </x-group>\n\n        ${this.renderTemplateOrSlot('role:after')}\n      </div>\n    `;\n  }\n\n  private __renderAction() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n    const action = this.href ? 'delete' : 'create';\n    const isActionDisabled =\n      (this.in({ idle: 'template' }) && !isValid) ||\n      this.in('busy') ||\n      this.in('fail') ||\n      this.disabledSelector.matches(action, true);\n\n    return html`\n      <div class=\"sm-col-span-2\">\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <foxy-internal-confirm-dialog\n          data-testid=\"confirm\"\n          message=\"delete_prompt\"\n          confirm=\"delete\"\n          cancel=\"cancel\"\n          header=\"delete\"\n          theme=\"primary error\"\n          lang=${this.lang}\n          ns=${this.ns}\n          id=\"confirm\"\n          @hide=${this.__handleConfirmHide}\n        >\n        </foxy-internal-confirm-dialog>\n\n        <vaadin-button\n          data-testid=${action}\n          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}\n          class=\"w-full\"\n          ?disabled=${isActionDisabled}\n          @click=${this.__handleActionClick}\n        >\n          <foxy-i18n lang=${this.lang} key=${action} ns=${this.ns}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __handleActionClick(evt: Event) {\n    if (this.in({ idle: 'snapshot' })) {\n      const confirm = this.renderRoot.querySelector('#confirm');\n      (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n    } else {\n      this.submit();\n    }\n  }\n\n  private __handleConfirmHide(evt: CustomEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n}\n"]}

package/dist/elements/public/UserForm/index.d.ts

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-text-field';
 import '@vaadin/vaadin-button';
 import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalForm/index';
 import '../Spinner/index';
 import '../I18n/index';
 import { UserForm } from './UserForm';

package/dist/elements/public/UserForm/index.js

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-text-field';
 import '@vaadin/vaadin-button';
 import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalForm/index.js";
 import "../Spinner/index.js";
 import "../I18n/index.js";
 import { UserForm } from "./UserForm.js";

package/dist/elements/public/UserForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { UserForm } from './UserForm';\n\ncustomElements.define('foxy-user-form', UserForm);\n\nexport { UserForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,8CAA2C;AAC3C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalForm/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { UserForm } from './UserForm';\n\ncustomElements.define('foxy-user-form', UserForm);\n\nexport { UserForm };\n"]}

package/dist/elements/public/UserForm/types.d.ts

@@ -1,3 +1,22 @@
-import * as FoxySDK from '@foxy.io/sdk';
-export declare type Rel = FoxySDK.Backend.Rels.User;
-export declare type Data = FoxySDK.Core.Resource<Rel, undefined>;
+import type { UserForm } from './UserForm';
+import type { Renderer } from '../../../mixins/configurable';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Rel = Rels.User;
+export declare type Data = Resource<Rel, undefined>;
+export declare type Templates = {
+    'first-name:before'?: Renderer<UserForm>;
+    'first-name:after'?: Renderer<UserForm>;
+    'last-name:before'?: Renderer<UserForm>;
+    'last-name:after'?: Renderer<UserForm>;
+    'email:before'?: Renderer<UserForm>;
+    'email:after'?: Renderer<UserForm>;
+    'phone:before'?: Renderer<UserForm>;
+    'phone:after'?: Renderer<UserForm>;
+    'role:before'?: Renderer<UserForm>;
+    'role:after'?: Renderer<UserForm>;
+    'create:before'?: Renderer<UserForm>;
+    'create:after'?: Renderer<UserForm>;
+    'delete:before'?: Renderer<UserForm>;
+    'delete:after'?: Renderer<UserForm>;
+};

package/dist/elements/public/UserForm/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as FoxySDK from '@foxy.io/sdk';\n\nexport type Rel = FoxySDK.Backend.Rels.User;\nexport type Data = FoxySDK.Core.Resource<Rel, undefined>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { UserForm } from './UserForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Rel = Rels.User;\nexport type Data = Resource<Rel, undefined>;\nexport type Templates = {\n  'first-name:before'?: Renderer<UserForm>;\n  'first-name:after'?: Renderer<UserForm>;\n  'last-name:before'?: Renderer<UserForm>;\n  'last-name:after'?: Renderer<UserForm>;\n  'email:before'?: Renderer<UserForm>;\n  'email:after'?: Renderer<UserForm>;\n  'phone:before'?: Renderer<UserForm>;\n  'phone:after'?: Renderer<UserForm>;\n  'role:before'?: Renderer<UserForm>;\n  'role:after'?: Renderer<UserForm>;\n  'create:before'?: Renderer<UserForm>;\n  'create:after'?: Renderer<UserForm>;\n  'delete:before'?: Renderer<UserForm>;\n  'delete:after'?: Renderer<UserForm>;\n};\n"]}

package/dist/elements/public/WebhookCard/WebhookCard.js

@@ -12,7 +12,7 @@ export class WebhookCard extends TranslatableMixin(InternalCard, 'webhook-card')
         var _a, _b, _c, _d;
         return html `
       <div class="grid grid-cols-1 gap-s leading-none">
-        <p class="flex justify-between items-center font-semibold">
+        <p class="flex justify-between items-center font-medium">
           <span class="truncate">${(_a = this.data) === null || _a === void 0 ? void 0 : _a.name}&ZeroWidthSpace;</span>
           <span class="uppercase inline-block text-xs bg-contrast-5 rounded p-xs flex-shrink-0">
             ${(_b = this.data) === null || _b === void 0 ? void 0 : _b.format}&ZeroWidthSpace;

package/dist/elements/public/WebhookCard/WebhookCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookCard/WebhookCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE;;;;;GAKG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAAO;IACpF,UAAU;;QACR,OAAO,IAAI,CAAA;;;mCAGoB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;;cAEpC,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;gCAMC,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG;;;;;;gCAMd,MAAA,IAAI,CAAC,IAAI,0CAAE,cAAc;;;KAGpD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\nimport { TranslatableMixin } from '../../../mixins/translatable';\n\n/**\n * Basic card displaying webhook (`fx:webhook`) info.\n *\n * @element foxy-webhook-card\n * @since 1.17.0\n */\nexport class WebhookCard extends TranslatableMixin(InternalCard, 'webhook-card')<Data> {\n  renderBody(): TemplateResult {\n    return html`\n      <div class=\"grid grid-cols-1 gap-s leading-none\">\n        <p class=\"flex justify-between items-center font-semibold\">\n          <span class=\"truncate\">${this.data?.name}&ZeroWidthSpace;</span>\n          <span class=\"uppercase inline-block text-xs bg-contrast-5 rounded p-xs flex-shrink-0\">\n            ${this.data?.format}&ZeroWidthSpace;\n          </span>\n        </p>\n\n        <div class=\"flex items-center gap-s text-secondary\">\n          <iron-icon class=\"icon-inline flex-shrink-0\" icon=\"icons:language\"></iron-icon>\n          <p class=\"truncate\">${this.data?.url}&ZeroWidthSpace;</p>\n        </div>\n\n        <div class=\"flex items-center gap-s text-secondary\">\n          <iron-icon class=\"icon-inline flex-shrink-0\" icon=\"icons:settings-input-antenna\">\n          </iron-icon>\n          <p class=\"truncate\">${this.data?.event_resource}&ZeroWidthSpace;</p>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"WebhookCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookCard/WebhookCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE;;;;;GAKG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAAC,YAAY,EAAE,cAAc,CAAO;IACpF,UAAU;;QACR,OAAO,IAAI,CAAA;;;mCAGoB,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI;;cAEpC,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM;;;;;;gCAMC,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG;;;;;;gCAMd,MAAA,IAAI,CAAC,IAAI,0CAAE,cAAc;;;KAGpD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\nimport { TranslatableMixin } from '../../../mixins/translatable';\n\n/**\n * Basic card displaying webhook (`fx:webhook`) info.\n *\n * @element foxy-webhook-card\n * @since 1.17.0\n */\nexport class WebhookCard extends TranslatableMixin(InternalCard, 'webhook-card')<Data> {\n  renderBody(): TemplateResult {\n    return html`\n      <div class=\"grid grid-cols-1 gap-s leading-none\">\n        <p class=\"flex justify-between items-center font-medium\">\n          <span class=\"truncate\">${this.data?.name}&ZeroWidthSpace;</span>\n          <span class=\"uppercase inline-block text-xs bg-contrast-5 rounded p-xs flex-shrink-0\">\n            ${this.data?.format}&ZeroWidthSpace;\n          </span>\n        </p>\n\n        <div class=\"flex items-center gap-s text-secondary\">\n          <iron-icon class=\"icon-inline flex-shrink-0\" icon=\"icons:language\"></iron-icon>\n          <p class=\"truncate\">${this.data?.url}&ZeroWidthSpace;</p>\n        </div>\n\n        <div class=\"flex items-center gap-s text-secondary\">\n          <iron-icon class=\"icon-inline flex-shrink-0\" icon=\"icons:settings-input-antenna\">\n          </iron-icon>\n          <p class=\"truncate\">${this.data?.event_resource}&ZeroWidthSpace;</p>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/WebhookLogCard/WebhookLogCard.js

@@ -13,7 +13,7 @@ export class WebhookLogCard extends TranslatableMixin(InternalCard, 'webhook-log
         const { date_created, response_code, response_body } = (_a = this.data) !== null && _a !== void 0 ? _a : {};
         return html `
       <div class="leading-none space-y-xs">
-        <p class="flex justify-between items-center font-semibold">
+        <p class="flex justify-between items-center font-medium">
           <foxy-i18n .options=${{ value: date_created }} infer="" key="date"></foxy-i18n>
           <span class="inline-block text-xs bg-contrast-5 text-secondary rounded p-xs">
             ${response_code}&ZeroWidthSpace;

package/dist/elements/public/WebhookLogCard/WebhookLogCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookLogCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookLogCard/WebhookLogCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CAAC,YAAY,EAAE,kBAAkB,CAAO;IAC3F,UAAU;;QACR,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,SAAG,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAEvE,OAAO,IAAI,CAAA;;;gCAGiB,EAAE,KAAK,EAAE,YAAY,EAAE;;cAEzC,aAAa;;;;mCAIQ,aAAa;;KAE3C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\n/**\n * Basic card displaying webhook log (`fx:webhook_log`) info.\n *\n * @element foxy-webhook-log-card\n * @since 1.17.0\n */\nexport class WebhookLogCard extends TranslatableMixin(InternalCard, 'webhook-log-card')<Data> {\n  renderBody(): TemplateResult {\n    const { date_created, response_code, response_body } = this.data ?? {};\n\n    return html`\n      <div class=\"leading-none space-y-xs\">\n        <p class=\"flex justify-between items-center font-semibold\">\n          <foxy-i18n .options=${{ value: date_created }} infer=\"\" key=\"date\"></foxy-i18n>\n          <span class=\"inline-block text-xs bg-contrast-5 text-secondary rounded p-xs\">\n            ${response_code}&ZeroWidthSpace;\n          </span>\n        </p>\n\n        <p class=\"text-tertiary\">${response_body}&ZeroWidthSpace;</p>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"WebhookLogCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookLogCard/WebhookLogCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CAAC,YAAY,EAAE,kBAAkB,CAAO;IAC3F,UAAU;;QACR,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,SAAG,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC;QAEvE,OAAO,IAAI,CAAA;;;gCAGiB,EAAE,KAAK,EAAE,YAAY,EAAE;;cAEzC,aAAa;;;;mCAIQ,aAAa;;KAE3C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\n/**\n * Basic card displaying webhook log (`fx:webhook_log`) info.\n *\n * @element foxy-webhook-log-card\n * @since 1.17.0\n */\nexport class WebhookLogCard extends TranslatableMixin(InternalCard, 'webhook-log-card')<Data> {\n  renderBody(): TemplateResult {\n    const { date_created, response_code, response_body } = this.data ?? {};\n\n    return html`\n      <div class=\"leading-none space-y-xs\">\n        <p class=\"flex justify-between items-center font-medium\">\n          <foxy-i18n .options=${{ value: date_created }} infer=\"\" key=\"date\"></foxy-i18n>\n          <span class=\"inline-block text-xs bg-contrast-5 text-secondary rounded p-xs\">\n            ${response_code}&ZeroWidthSpace;\n          </span>\n        </p>\n\n        <p class=\"text-tertiary\">${response_body}&ZeroWidthSpace;</p>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/WebhookStatusCard/WebhookStatusCard.js

@@ -18,7 +18,7 @@ export class WebhookStatusCard extends Base {
       <p class="flex justify-between items-center leading-none">
         <foxy-i18n
           .options=${{ value: (_b = this.data) === null || _b === void 0 ? void 0 : _b.date_created }}
-          class="font-semibold"
+          class="font-medium"
           infer=""
           key="date"
         >

package/dist/elements/public/WebhookStatusCard/WebhookStatusCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookStatusCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookStatusCard/WebhookStatusCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;;QACR,MAAM,MAAM,SAAG,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC;QAEjC,OAAO,IAAI,CAAA;;;qBAGM,EAAE,KAAK,QAAE,IAAI,CAAC,IAAI,0CAAE,YAAY,EAAE;;;;;;;;kBAQrC,QAAQ,CAAC;YACf,YAAY,EAAE,MAAM,KAAK,QAAQ;YACjC,eAAe,EAAE,MAAM,KAAK,SAAS;YACrC,cAAc,EAAE,MAAM,KAAK,YAAY;SACxC,CAAC;;wBAEY,MAAM;;;;KAIzB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'webhook-status-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\n/**\n * Basic card displaying webhook status (`fx:webhook_status`) info.\n *\n * @element foxy-webhook-status-card\n * @since 1.17.0\n */\nexport class WebhookStatusCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const status = this.data?.status;\n\n    return html`\n      <p class=\"flex justify-between items-center leading-none\">\n        <foxy-i18n\n          .options=${{ value: this.data?.date_created }}\n          class=\"font-semibold\"\n          infer=\"\"\n          key=\"date\"\n        >\n        </foxy-i18n>\n\n        <foxy-i18n\n          class=${classMap({\n            'text-error': status === 'failed',\n            'text-tertiary': status === 'pending',\n            'text-success': status === 'successful',\n          })}\n          infer=\"\"\n          key=\"status_${status}\"\n        >\n        </foxy-i18n>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"WebhookStatusCard.js","sourceRoot":"","sources":["../../../../src/elements/public/WebhookStatusCard/WebhookStatusCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;;QACR,MAAM,MAAM,SAAG,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC;QAEjC,OAAO,IAAI,CAAA;;;qBAGM,EAAE,KAAK,QAAE,IAAI,CAAC,IAAI,0CAAE,YAAY,EAAE;;;;;;;;kBAQrC,QAAQ,CAAC;YACf,YAAY,EAAE,MAAM,KAAK,QAAQ;YACjC,eAAe,EAAE,MAAM,KAAK,SAAS;YACrC,cAAc,EAAE,MAAM,KAAK,YAAY;SACxC,CAAC;;wBAEY,MAAM;;;;KAIzB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'webhook-status-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\n/**\n * Basic card displaying webhook status (`fx:webhook_status`) info.\n *\n * @element foxy-webhook-status-card\n * @since 1.17.0\n */\nexport class WebhookStatusCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const status = this.data?.status;\n\n    return html`\n      <p class=\"flex justify-between items-center leading-none\">\n        <foxy-i18n\n          .options=${{ value: this.data?.date_created }}\n          class=\"font-medium\"\n          infer=\"\"\n          key=\"date\"\n        >\n        </foxy-i18n>\n\n        <foxy-i18n\n          class=${classMap({\n            'text-error': status === 'failed',\n            'text-tertiary': status === 'pending',\n            'text-success': status === 'successful',\n          })}\n          infer=\"\"\n          key=\"status_${status}\"\n        >\n        </foxy-i18n>\n      </p>\n    `;\n  }\n}\n"]}

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

@@ -71,6 +71,7 @@ export { PaymentsApiPaymentPresetForm } from './PaymentsApiPaymentPresetForm/Pay
 export { QueryBuilder } from './QueryBuilder/QueryBuilder';
 export { SignInForm } from './SignInForm/SignInForm';
 export { Spinner } from './Spinner/Spinner';
+export { StoreCard } from './StoreCard/StoreCard';
 export { StoreForm } from './StoreForm/StoreForm';
 export { StoreShippingMethodForm } from './StoreShippingMethodForm/StoreShippingMethodForm';
 export { SubscriptionCard } from './SubscriptionCard/SubscriptionCard';
@@ -88,6 +89,7 @@ export { TemplateConfigForm } from './TemplateConfigForm/TemplateConfigForm';
 export { TransactionCard } from './TransactionCard/TransactionCard';
 export { Transaction } from './Transaction/Transaction';
 export { TransactionsTable } from './TransactionsTable/TransactionsTable';
+export { UserCard } from './UserCard/UserCard';
 export { UserForm } from './UserForm/UserForm';
 export { UsersTable } from './UsersTable/UsersTable';
 export { WebhookCard } from './WebhookCard/WebhookCard';

package/dist/elements/public/index.defined.d.ts

@@ -71,6 +71,7 @@ export { PaymentsApiPaymentPresetForm } from './PaymentsApiPaymentPresetForm/ind
 export { QueryBuilder } from './QueryBuilder/index';
 export { SignInForm } from './SignInForm/index';
 export { Spinner } from './Spinner/index';
+export { StoreCard } from './StoreCard/index';
 export { StoreForm } from './StoreForm/index';
 export { StoreShippingMethodForm } from './StoreShippingMethodForm/index';
 export { SubscriptionCard } from './SubscriptionCard/index';
@@ -88,6 +89,7 @@ export { TemplateSetForm } from './TemplateSetForm/index';
 export { TransactionCard } from './TransactionCard/index';
 export { Transaction } from './Transaction/index';
 export { TransactionsTable } from './TransactionsTable/index';
+export { UserCard } from './UserCard/index';
 export { UserForm } from './UserForm/index';
 export { UsersTable } from './UsersTable/index';
 export { WebhookCard } from './WebhookCard/index';

package/dist/elements/public/index.defined.js

@@ -71,6 +71,7 @@ export { PaymentsApiPaymentPresetForm } from "./PaymentsApiPaymentPresetForm/ind
 export { QueryBuilder } from "./QueryBuilder/index.js";
 export { SignInForm } from "./SignInForm/index.js";
 export { Spinner } from "./Spinner/index.js";
+export { StoreCard } from "./StoreCard/index.js";
 export { StoreForm } from "./StoreForm/index.js";
 export { StoreShippingMethodForm } from "./StoreShippingMethodForm/index.js";
 export { SubscriptionCard } from "./SubscriptionCard/index.js";
@@ -88,6 +89,7 @@ export { TemplateSetForm } from "./TemplateSetForm/index.js";
 export { TransactionCard } from "./TransactionCard/index.js";
 export { Transaction } from "./Transaction/index.js";
 export { TransactionsTable } from "./TransactionsTable/index.js";
+export { UserCard } from "./UserCard/index.js";
 export { UserForm } from "./UserForm/index.js";
 export { UsersTable } from "./UsersTable/index.js";
 export { WebhookCard } from "./WebhookCard/index.js";