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

package/dist/elements/public/CustomFieldCard/TwoLineCard.js

@@ -1,21 +1,18 @@
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
 import { html } from 'lit-html';
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { classMap } from "../../../utils/class-map.js";
-const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
+const Base = ResponsiveMixin(ConfigurableMixin(InternalCard));
 export class TwoLineCard extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
-        this.lang = '';
-        this.ns = '';
         this.__renderTitle = (content) => {
             return html `
       <div data-testid="title">
         ${this.renderTemplateOrSlot('title:before')}
 
-        <div class="text-secondary truncate">
+        <div class="font-semibold truncate">
           ${this.data ? content === null || content === void 0 ? void 0 : content(this.data) : ''}&ZeroWidthSpace;
         </div>
 
@@ -28,7 +25,7 @@ export class TwoLineCard extends Base {
       <div data-testid="subtitle">
         ${this.renderTemplateOrSlot('subtitle:before')}
 
-        <div class="font-semibold truncate">
+        <div class="text-tertiary truncate text-s sm-text-m">
           ${this.data ? content === null || content === void 0 ? void 0 : content(this.data) : ''}&ZeroWidthSpace;
         </div>
 
@@ -37,40 +34,14 @@ export class TwoLineCard extends Base {
     `;
         };
     }
-    static get properties() {
-        return {
-            ...super.properties,
-            lang: { type: String },
-            ns: { type: String },
-        };
-    }
-    render(options) {
-        var _a, _b;
+    renderBody(options) {
         const hiddenSelector = this.hiddenSelector;
         return html `
       <div
-        aria-live="polite"
-        aria-busy=${!this.data && this.in('busy')}
-        class="relative text-body text-m font-lumo leading-m"
+        class="h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-h-xs sm-flex-row sm-items-center sm-justify-between"
       >
         ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options === null || options === void 0 ? void 0 : options.title)}
         ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options === null || options === void 0 ? void 0 : options.subtitle)}
-
-        <div
-          class=${classMap({
-            'transition duration-250 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !!this.data,
-        })}
-        >
-          <foxy-spinner
-            data-testid="spinner"
-            class="m-auto"
-            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
-            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>
       </div>
     `;
     }

package/dist/elements/public/CustomFieldCard/TwoLineCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoLineCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/TwoLineCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,wCAAqC;AAC3E,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAgBpD,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,WAA2C,SAAQ,IAAW;IAA3E;;QASE,cAAS,GAAqB,EAAE,CAAC;QAEjC,SAAI,GAAG,EAAE,CAAC;QAEV,OAAE,GAAG,EAAE,CAAC;QAES,kBAAa,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;YAGvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;QAEe,qBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;;YAG1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;IAgCJ,CAAC;IAxEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACrB,CAAC;IACJ,CAAC;IAoCD,MAAM,CAAC,OAA8B;;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;;oBAGK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;UAGvC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;UAC/E,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;;;kBAGhF,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAC7C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBAC7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\nexport type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;\n\nexport type Templates<TData extends HALJSONResource> = {\n  'title:before'?: Renderer<TData>;\n  'title:after'?: Renderer<TData>;\n  'subtitle:before'?: Renderer<TData>;\n  'subtitle:after'?: Renderer<TData>;\n};\n\nexport type RenderOptions<TData extends HALJSONResource> = {\n  title: TemplateFn<TData>;\n  subtitle: TemplateFn<TData>;\n};\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\nexport class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  lang = '';\n\n  ns = '';\n\n  private readonly __renderTitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"text-secondary truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubtitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <div class=\"font-semibold truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  };\n\n  render(options?: RenderOptions<TData>): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-live=\"polite\"\n        aria-busy=${!this.data && this.in('busy')}\n        class=\"relative text-body text-m font-lumo leading-m\"\n      >\n        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}\n        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\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"]}
+{"version":3,"file":"TwoLineCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/TwoLineCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAgBhC,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9D,MAAM,OAAO,WAA2C,SAAQ,IAAW;IAA3E;;QACE,cAAS,GAAqB,EAAE,CAAC;QAEhB,kBAAa,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;YAGvC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;QAEe,qBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;;YAG1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;;;UAGvC,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;IAcJ,CAAC;IAZC,UAAU,CAAC,OAA8B;QACvC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;;;UAIL,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;UAC/E,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;;KAE7F,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource } from '../NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Renderer } from '../../../mixins/configurable';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nexport type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;\n\nexport type Templates<TData extends HALJSONResource> = {\n  'title:before'?: Renderer<TData>;\n  'title:after'?: Renderer<TData>;\n  'subtitle:before'?: Renderer<TData>;\n  'subtitle:after'?: Renderer<TData>;\n};\n\nexport type RenderOptions<TData extends HALJSONResource> = {\n  title: TemplateFn<TData>;\n  subtitle: TemplateFn<TData>;\n};\n\nconst Base = ResponsiveMixin(ConfigurableMixin(InternalCard));\n\nexport class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {\n  templates: Templates<TData> = {};\n\n  private readonly __renderTitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"font-semibold truncate\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubtitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <div class=\"text-tertiary truncate text-s sm-text-m\">\n          ${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;\n        </div>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  };\n\n  renderBody(options?: RenderOptions<TData>): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        class=\"h-s flex flex-col justify-center relative text-body text-m font-lumo leading-xs sm-h-xs sm-flex-row sm-items-center sm-justify-between\"\n      >\n        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}\n        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/CustomFieldForm/CustomFieldForm.js

@@ -116,7 +116,7 @@ export class CustomFieldForm extends Base {
         <vaadin-button
           class="w-full"
           data-testid="delete"
-          theme="error primary"
+          theme="error"
           ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
           @click=${this.__handleDeleteClick}
         >

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

@@ -1 +1 @@
-{"version":3,"file":"CustomFieldForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/CustomFieldForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\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 memoize from 'lodash-es/memoize';\n\nconst NS = 'custom-field-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing custom fields.\n *\n * @slot name:before\n * @slot name:after\n * @slot value:before\n * @slot value:after\n * @slot visibility:before\n * @slot visibility:after\n * @slot timestamps:before\n * @slot timestamps:after\n * @slot create:before\n * @slot create:after\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-custom-field-form\n * @since 1.11.0\n */\nexport class CustomFieldForm 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-checkbox': customElements.get('vaadin-checkbox'),\n      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __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  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?readonly=${this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderVisibility = () => {\n    const { disabledSelector, form, lang, ns } = this;\n    const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div data-testid=\"visibility\">\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <vaadin-checkbox\n          ?disabled=${isDisabled}\n          ?checked=${!form.is_hidden}\n          @change=${(evt: CustomEvent) => {\n            const checkbox = evt.currentTarget as CheckboxElement;\n            this.edit({ is_hidden: !checkbox.checked });\n          }}\n        >\n          <foxy-i18n lang=${lang} key=\"show_on_receipt\" ns=${ns}></foxy-i18n>\n        </vaadin-checkbox>\n\n        ${this.renderTemplateOrSlot('visibility:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.data?.[field]\n        ? this.t('date', { value: new Date(this.data[field] as string) })\n        : '',\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error primary\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\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=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\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=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\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')).toString() : '';\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"CustomFieldForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/CustomFieldForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\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 memoize from 'lodash-es/memoize';\n\nconst NS = 'custom-field-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing custom fields.\n *\n * @slot name:before\n * @slot name:after\n * @slot value:before\n * @slot value:after\n * @slot visibility:before\n * @slot visibility:after\n * @slot timestamps:before\n * @slot timestamps:after\n * @slot create:before\n * @slot create:after\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-custom-field-form\n * @since 1.11.0\n */\nexport class CustomFieldForm 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-checkbox': customElements.get('vaadin-checkbox'),\n      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __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  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?readonly=${this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderVisibility = () => {\n    const { disabledSelector, form, lang, ns } = this;\n    const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div data-testid=\"visibility\">\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <vaadin-checkbox\n          ?disabled=${isDisabled}\n          ?checked=${!form.is_hidden}\n          @change=${(evt: CustomEvent) => {\n            const checkbox = evt.currentTarget as CheckboxElement;\n            this.edit({ is_hidden: !checkbox.checked });\n          }}\n        >\n          <foxy-i18n lang=${lang} key=\"show_on_receipt\" ns=${ns}></foxy-i18n>\n        </vaadin-checkbox>\n\n        ${this.renderTemplateOrSlot('visibility:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.data?.[field]\n        ? this.t('date', { value: new Date(this.data[field] as string) })\n        : '',\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\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=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\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=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\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')).toString() : '';\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}

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

@@ -93,7 +93,9 @@ export declare class CustomerApi extends CustomerApi_base {
     private __createAPIInstance;
     private __handleVirtualAuthSessionDelete;
     private __handleVirtualAuthSessionPost;
+    private __handleVirtualAuthSessionGet;
     private __handleVirtualAuthRecoverPost;
+    private __handleVirtualAuthRecoverGet;
     private __handleRequest;
 }
 export {};

package/dist/elements/public/CustomerApi/CustomerApi.js

@@ -145,6 +145,13 @@ export class CustomerApi extends ConfigurableMixin(InferrableMixin(LitElement))
         }
         return new Response(JSON.stringify(body), { status });
     }
+    async __handleVirtualAuthSessionGet(request) {
+        return new Response(JSON.stringify({
+            _links: { self: { href: request.url } },
+            type: 'password',
+            credential: { email: '', password: '' },
+        }));
+    }
     async __handleVirtualAuthRecoverPost(request) {
         const payload = await request.clone().json();
         if (payload.type === 'email') {
@@ -158,6 +165,9 @@ export class CustomerApi extends ConfigurableMixin(InferrableMixin(LitElement))
             throw new Error(`Unknown payload type ${payload.type}`);
         }
     }
+    async __handleVirtualAuthRecoverGet(request) {
+        return new Response(JSON.stringify({ _links: { self: { href: request.url } }, email: '' }));
+    }
     async __handleRequest(request) {
         const url = request.url;
         const method = request.method;
@@ -167,10 +177,14 @@ export class CustomerApi extends ConfigurableMixin(InferrableMixin(LitElement))
                     return this.__handleVirtualAuthSessionDelete();
                 if (method === 'POST')
                     return this.__handleVirtualAuthSessionPost(request);
+                if (method === 'GET')
+                    return this.__handleVirtualAuthSessionGet(request);
             }
             if (url === 'foxy://customer-api/recover') {
                 if (method === 'POST')
                     return this.__handleVirtualAuthRecoverPost(request);
+                if (method === 'GET')
+                    return this.__handleVirtualAuthRecoverGet(request);
             }
             const response = await this.api.fetch(request);
             if (response.status === 401) {

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

@@ -1 +1 @@
-{"version":3,"file":"CustomerApi.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerApi/CustomerApi.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '@foxy.io/sdk/customer';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { cookieStorage } from './cookieStorage';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\n/**\n * Element connector for Customer API.\n *\n * @fires CustomerApi#signout - Instance of `CustomerApi.SignOutEvent`. Dispatched on an element when session expires or code 401 is returned.\n * @fires CustomerApi#signin - Instance of `CustomerApi.SignInEvent`. Dispatched on an element once authenticated.\n *\n * @element foxy-customer-api\n * @since 1.4.0\n */\nexport class CustomerApi extends ConfigurableMixin(InferrableMixin(LitElement)) {\n  static readonly SignOutEvent = class extends CustomEvent<void> {};\n\n  static readonly SignInEvent = class extends CustomEvent<void> {};\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      storage: { type: String, noAccessor: true },\n      level: { type: Number, noAccessor: true },\n      base: { type: String, noAccessor: true },\n    };\n  }\n\n  private __storage: 'session' | 'cookie' | 'local' = 'local';\n\n  private __level = 0;\n\n  private __base = location.origin;\n\n  private __api: API = this.__createAPIInstance();\n\n  private __handleFetch = async (originalEvent: Event) => {\n    if (!(originalEvent instanceof FetchEvent)) return;\n    if (originalEvent.defaultPrevented) return;\n    if (originalEvent.composedPath()[0] === this) return;\n\n    originalEvent.preventDefault();\n\n    const apiEvent = new FetchEvent('fetch', {\n      cancelable: true,\n      composed: true,\n      request: originalEvent.request,\n      bubbles: true,\n      reject: (reason: unknown) => originalEvent.respondWith(Promise.reject(reason)),\n      resolve: (response: Response) => {\n        if (apiEvent.request.url === 'foxy://customer-api/session') this.requestUpdate();\n        if (response.status === 401) this.requestUpdate();\n        originalEvent.respondWith(Promise.resolve(response));\n      },\n    });\n\n    if (this.dispatchEvent(apiEvent)) apiEvent.respondWith(this.__handleRequest(apiEvent.request));\n  };\n\n  get isLoggedIn(): boolean {\n    return !!this.api.storage.getItem(API.SESSION);\n  }\n\n  /** `FoxySDK.Customer.API` instance used by this element to communicate with the backend. */\n  get api(): API {\n    return this.__api;\n  }\n\n  /** Bookmark URL for this API. This is where the tree traversal begins. We also use this URL as a base for relative paths. */\n  get base(): string {\n    return this.__base;\n  }\n\n  set base(value: string) {\n    this.__base = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  /** Numeric Consola log level. If omitted, Consola defaults will be used. */\n  get level(): number {\n    return this.__level;\n  }\n\n  set level(value: number) {\n    this.__level = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  /** Credentials storage implementing Web Storage API. Access tokens and other related info will be stored here. Defaults to in-memory storage. */\n  get storage(): 'session' | 'cookie' | 'local' {\n    return this.__storage;\n  }\n\n  set storage(value: 'session' | 'cookie' | 'local') {\n    this.__storage = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__handleFetch);\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.renderTemplateOrSlot(this.isLoggedIn ? 'logged-in' : 'logged-out')}\n      <slot></slot>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__handleFetch);\n  }\n\n  private __createAPIInstance() {\n    const storageOptions = {\n      session: sessionStorage,\n      cookie: cookieStorage,\n      local: localStorage,\n    };\n\n    return new API({\n      storage: storageOptions[this.storage],\n      level: this.level,\n      base: new URL(this.base),\n    });\n  }\n\n  private async __handleVirtualAuthSessionDelete() {\n    await this.api.signOut();\n\n    this.dispatchEvent(new CustomerApi.SignOutEvent('signout'));\n    this.requestUpdate();\n\n    return new Response();\n  }\n\n  private async __handleVirtualAuthSessionPost(request: Request) {\n    const payload = await request.clone().json();\n    if (payload.type !== 'password') throw new Error(`Unknown payload type ${payload.type}`);\n\n    let status: number;\n    let body: unknown;\n\n    try {\n      await this.api.signIn(payload.credential);\n\n      this.dispatchEvent(new CustomerApi.SignInEvent('signin'));\n      this.requestUpdate();\n\n      status = 200;\n      body = { _links: { self: { href: request.url } }, ...payload };\n    } catch (err) {\n      if (!(err instanceof API.AuthError)) throw err;\n      if (!(err.code === 'UNAUTHORIZED')) throw err;\n\n      const virtualAuthError = {\n        message: err.message,\n        logref: 'unavailable',\n        code: 'invalid_credential_error',\n      };\n\n      status = 401;\n      body = { total: 1, _embedded: { 'fx:errors': [virtualAuthError] } };\n    }\n\n    return new Response(JSON.stringify(body), { status });\n  }\n\n  private async __handleVirtualAuthRecoverPost(request: Request) {\n    const payload = await request.clone().json();\n\n    if (payload.type === 'email') {\n      await this.api.sendPasswordResetEmail(payload.detail);\n      return new Response(\n        JSON.stringify({\n          _links: { self: { href: request.url } },\n          email: payload.email,\n        })\n      );\n    } else {\n      throw new Error(`Unknown payload type ${payload.type}`);\n    }\n  }\n\n  private async __handleRequest(request: Request) {\n    const url = request.url;\n    const method = request.method;\n\n    try {\n      if (url === 'foxy://customer-api/session') {\n        if (method === 'DELETE') return this.__handleVirtualAuthSessionDelete();\n        if (method === 'POST') return this.__handleVirtualAuthSessionPost(request);\n      }\n\n      if (url === 'foxy://customer-api/recover') {\n        if (method === 'POST') return this.__handleVirtualAuthRecoverPost(request);\n      }\n\n      const response = await this.api.fetch(request);\n\n      if (response.status === 401) {\n        this.api.storage.clear();\n        this.dispatchEvent(new CustomerApi.SignOutEvent('signout'));\n        this.requestUpdate();\n      }\n\n      return response;\n    } catch (err) {\n      return new Response(null, { status: 500 });\n    }\n  }\n}\n"]}
+{"version":3,"file":"CustomerApi.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerApi/CustomerApi.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '@foxy.io/sdk/customer';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { cookieStorage } from './cookieStorage';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\n/**\n * Element connector for Customer API.\n *\n * @fires CustomerApi#signout - Instance of `CustomerApi.SignOutEvent`. Dispatched on an element when session expires or code 401 is returned.\n * @fires CustomerApi#signin - Instance of `CustomerApi.SignInEvent`. Dispatched on an element once authenticated.\n *\n * @element foxy-customer-api\n * @since 1.4.0\n */\nexport class CustomerApi extends ConfigurableMixin(InferrableMixin(LitElement)) {\n  static readonly SignOutEvent = class extends CustomEvent<void> {};\n\n  static readonly SignInEvent = class extends CustomEvent<void> {};\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      storage: { type: String, noAccessor: true },\n      level: { type: Number, noAccessor: true },\n      base: { type: String, noAccessor: true },\n    };\n  }\n\n  private __storage: 'session' | 'cookie' | 'local' = 'local';\n\n  private __level = 0;\n\n  private __base = location.origin;\n\n  private __api: API = this.__createAPIInstance();\n\n  private __handleFetch = async (originalEvent: Event) => {\n    if (!(originalEvent instanceof FetchEvent)) return;\n    if (originalEvent.defaultPrevented) return;\n    if (originalEvent.composedPath()[0] === this) return;\n\n    originalEvent.preventDefault();\n\n    const apiEvent = new FetchEvent('fetch', {\n      cancelable: true,\n      composed: true,\n      request: originalEvent.request,\n      bubbles: true,\n      reject: (reason: unknown) => originalEvent.respondWith(Promise.reject(reason)),\n      resolve: (response: Response) => {\n        if (apiEvent.request.url === 'foxy://customer-api/session') this.requestUpdate();\n        if (response.status === 401) this.requestUpdate();\n        originalEvent.respondWith(Promise.resolve(response));\n      },\n    });\n\n    if (this.dispatchEvent(apiEvent)) apiEvent.respondWith(this.__handleRequest(apiEvent.request));\n  };\n\n  get isLoggedIn(): boolean {\n    return !!this.api.storage.getItem(API.SESSION);\n  }\n\n  /** `FoxySDK.Customer.API` instance used by this element to communicate with the backend. */\n  get api(): API {\n    return this.__api;\n  }\n\n  /** Bookmark URL for this API. This is where the tree traversal begins. We also use this URL as a base for relative paths. */\n  get base(): string {\n    return this.__base;\n  }\n\n  set base(value: string) {\n    this.__base = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  /** Numeric Consola log level. If omitted, Consola defaults will be used. */\n  get level(): number {\n    return this.__level;\n  }\n\n  set level(value: number) {\n    this.__level = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  /** Credentials storage implementing Web Storage API. Access tokens and other related info will be stored here. Defaults to in-memory storage. */\n  get storage(): 'session' | 'cookie' | 'local' {\n    return this.__storage;\n  }\n\n  set storage(value: 'session' | 'cookie' | 'local') {\n    this.__storage = value;\n    this.__api = this.__createAPIInstance();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__handleFetch);\n  }\n\n  render(): TemplateResult {\n    return html`\n      ${this.renderTemplateOrSlot(this.isLoggedIn ? 'logged-in' : 'logged-out')}\n      <slot></slot>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__handleFetch);\n  }\n\n  private __createAPIInstance() {\n    const storageOptions = {\n      session: sessionStorage,\n      cookie: cookieStorage,\n      local: localStorage,\n    };\n\n    return new API({\n      storage: storageOptions[this.storage],\n      level: this.level,\n      base: new URL(this.base),\n    });\n  }\n\n  private async __handleVirtualAuthSessionDelete() {\n    await this.api.signOut();\n\n    this.dispatchEvent(new CustomerApi.SignOutEvent('signout'));\n    this.requestUpdate();\n\n    return new Response();\n  }\n\n  private async __handleVirtualAuthSessionPost(request: Request) {\n    const payload = await request.clone().json();\n    if (payload.type !== 'password') throw new Error(`Unknown payload type ${payload.type}`);\n\n    let status: number;\n    let body: unknown;\n\n    try {\n      await this.api.signIn(payload.credential);\n\n      this.dispatchEvent(new CustomerApi.SignInEvent('signin'));\n      this.requestUpdate();\n\n      status = 200;\n      body = { _links: { self: { href: request.url } }, ...payload };\n    } catch (err) {\n      if (!(err instanceof API.AuthError)) throw err;\n      if (!(err.code === 'UNAUTHORIZED')) throw err;\n\n      const virtualAuthError = {\n        message: err.message,\n        logref: 'unavailable',\n        code: 'invalid_credential_error',\n      };\n\n      status = 401;\n      body = { total: 1, _embedded: { 'fx:errors': [virtualAuthError] } };\n    }\n\n    return new Response(JSON.stringify(body), { status });\n  }\n\n  private async __handleVirtualAuthSessionGet(request: Request) {\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: request.url } },\n        type: 'password',\n        credential: { email: '', password: '' },\n      })\n    );\n  }\n\n  private async __handleVirtualAuthRecoverPost(request: Request) {\n    const payload = await request.clone().json();\n\n    if (payload.type === 'email') {\n      await this.api.sendPasswordResetEmail(payload.detail);\n      return new Response(\n        JSON.stringify({\n          _links: { self: { href: request.url } },\n          email: payload.email,\n        })\n      );\n    } else {\n      throw new Error(`Unknown payload type ${payload.type}`);\n    }\n  }\n\n  private async __handleVirtualAuthRecoverGet(request: Request) {\n    return new Response(JSON.stringify({ _links: { self: { href: request.url } }, email: '' }));\n  }\n\n  private async __handleRequest(request: Request) {\n    const url = request.url;\n    const method = request.method;\n\n    try {\n      if (url === 'foxy://customer-api/session') {\n        if (method === 'DELETE') return this.__handleVirtualAuthSessionDelete();\n        if (method === 'POST') return this.__handleVirtualAuthSessionPost(request);\n        if (method === 'GET') return this.__handleVirtualAuthSessionGet(request);\n      }\n\n      if (url === 'foxy://customer-api/recover') {\n        if (method === 'POST') return this.__handleVirtualAuthRecoverPost(request);\n        if (method === 'GET') return this.__handleVirtualAuthRecoverGet(request);\n      }\n\n      const response = await this.api.fetch(request);\n\n      if (response.status === 401) {\n        this.api.storage.clear();\n        this.dispatchEvent(new CustomerApi.SignOutEvent('signout'));\n        this.requestUpdate();\n      }\n\n      return response;\n    } catch (err) {\n      return new Response(null, { status: 500 });\n    }\n  }\n}\n"]}

package/dist/elements/public/CustomerCard/CustomerCard.js

@@ -80,7 +80,7 @@ class CustomerCard extends Base {
         return html `
       <div data-testid="email">
         ${this.renderTemplateOrSlot('email:before')}
-        <div class="text-tertiary truncate">${content}</div>
+        <div class="text-secondary truncate text-s">${content}</div>
         ${this.renderTemplateOrSlot('email:after')}
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"CustomerCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerCard/CustomerCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'customer-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a customer record.\n *\n * @slot name:before\n * @slot name:after\n * @slot email:before\n * @slot email:after\n *\n * @element foxy-customer-card\n * @since 1.12.0\n */\nclass CustomerCard extends Base<Data> {\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m font-lumo text-m\"\n      >\n        <div\n          class=${classMap({\n            'leading-xs transition-opacity': true,\n            'opacity-0': !this.data,\n          })}\n        >\n          ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n          ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\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 __renderName() {\n    const data = this.data;\n    const name = `${data?.first_name ?? ''} ${data?.last_name ?? ''}`.trim() || '–';\n    const content = data ? html`${name}` : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"name\">\n        ${this.renderTemplateOrSlot('name:before')}\n        <div class=\"font-semibold text-body truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('name:after')}\n      </div>\n    `;\n  }\n\n  private __renderEmail() {\n    const data = this.data;\n    const email = `${data?.email ?? ''}`.trim() || '–';\n    const content = data ? html`${email}` : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"email\">\n        ${this.renderTemplateOrSlot('email:before')}\n        <div class=\"text-tertiary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('email:after')}\n      </div>\n    `;\n  }\n}\n\nexport { CustomerCard };\n"]}
+{"version":3,"file":"CustomerCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerCard/CustomerCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'customer-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a customer record.\n *\n * @slot name:before\n * @slot name:after\n * @slot email:before\n * @slot email:after\n *\n * @element foxy-customer-card\n * @since 1.12.0\n */\nclass CustomerCard extends Base<Data> {\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m font-lumo text-m\"\n      >\n        <div\n          class=${classMap({\n            'leading-xs transition-opacity': true,\n            'opacity-0': !this.data,\n          })}\n        >\n          ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n          ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\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 __renderName() {\n    const data = this.data;\n    const name = `${data?.first_name ?? ''} ${data?.last_name ?? ''}`.trim() || '–';\n    const content = data ? html`${name}` : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"name\">\n        ${this.renderTemplateOrSlot('name:before')}\n        <div class=\"font-semibold text-body truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('name:after')}\n      </div>\n    `;\n  }\n\n  private __renderEmail() {\n    const data = this.data;\n    const email = `${data?.email ?? ''}`.trim() || '–';\n    const content = data ? html`${email}` : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"email\">\n        ${this.renderTemplateOrSlot('email:before')}\n        <div class=\"text-secondary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('email:after')}\n      </div>\n    `;\n  }\n}\n\nexport { CustomerCard };\n"]}

package/dist/elements/public/CustomerForm/CustomerForm.js

@@ -117,7 +117,7 @@ export class CustomerForm extends Base {
 
         <vaadin-button
           class="w-full"
-          theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}
+          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}
           data-testid=${action}
           ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}
           @click=${handleClick}

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

@@ -1 +1 @@
-{"version":3,"file":"CustomerForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerForm/CustomerForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\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';\n\nconst NS = 'customer-form';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS))))\n);\n\n/**\n * Form element for creating or editing customers.\n *\n * @slot first-name:before - **new in v1.4.0**\n * @slot first-name:after - **new in v1.4.0**\n *\n * @slot last-name:before - **new in v1.4.0**\n * @slot last-name:after - **new in v1.4.0**\n *\n * @slot email:before - **new in v1.4.0**\n * @slot email:after - **new in v1.4.0**\n *\n * @slot tax-id:before - **new in v1.4.0**\n * @slot tax-id:after - **new in v1.4.0**\n *\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n *\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n *\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-customer-form\n * @since 1.2.0\n */\nexport class CustomerForm 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      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\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      ({ tax_id: v }) => !v || v.length <= 50 || 'tax_id_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    ];\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 __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    const error = this.errors.find(err => err.startsWith(field));\n\n    if (this.hiddenSelector.matches(bsid, true)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${error ? this.t(error.replace(field, 'v8n')).toString() : ''}\n          data-testid=${bsid}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid, true)}\n          ?readonly=${this.readonlySelector.matches(bsid, true)}\n          @input=${(evt: Event) => this.edit({ [field]: (evt.target as HTMLInputElement).value })}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private __renderTimestamps = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n\n        <x-property-table\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-property-table>\n\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private __renderAction = (action: string) => {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\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    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        data-testid=\"confirm\"\n        @hide=${(evt: DialogHideEvent) => {\n          if (!evt.detail.cancelled) this.delete();\n        }}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div data-testid=\"wrapper\" aria-busy=${isBusy} aria-live=\"polite\" class=\"space-y-l relative\">\n        <div class=\"grid grid-cols-1 sm-grid-cols-2 gap-m\">\n          ${this.__maybeRenderTextField({ field: 'first_name' })}\n          ${this.__maybeRenderTextField({ field: 'last_name' })}\n          ${this.__maybeRenderTextField({ field: 'email' })}\n          ${this.__maybeRenderTextField({ field: 'tax_id' })}\n        </div>\n\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\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=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__getValidator.cache.clear?.();\n  }\n}\n"]}
+{"version":3,"file":"CustomerForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerForm/CustomerForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\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';\n\nconst NS = 'customer-form';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS))))\n);\n\n/**\n * Form element for creating or editing customers.\n *\n * @slot first-name:before - **new in v1.4.0**\n * @slot first-name:after - **new in v1.4.0**\n *\n * @slot last-name:before - **new in v1.4.0**\n * @slot last-name:after - **new in v1.4.0**\n *\n * @slot email:before - **new in v1.4.0**\n * @slot email:after - **new in v1.4.0**\n *\n * @slot tax-id:before - **new in v1.4.0**\n * @slot tax-id:after - **new in v1.4.0**\n *\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n *\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n *\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-customer-form\n * @since 1.2.0\n */\nexport class CustomerForm 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      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\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      ({ tax_id: v }) => !v || v.length <= 50 || 'tax_id_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    ];\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 __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    const error = this.errors.find(err => err.startsWith(field));\n\n    if (this.hiddenSelector.matches(bsid, true)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${error ? this.t(error.replace(field, 'v8n')).toString() : ''}\n          data-testid=${bsid}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid, true)}\n          ?readonly=${this.readonlySelector.matches(bsid, true)}\n          @input=${(evt: Event) => this.edit({ [field]: (evt.target as HTMLInputElement).value })}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private __renderTimestamps = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n\n        <x-property-table\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-property-table>\n\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private __renderAction = (action: string) => {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\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    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        data-testid=\"confirm\"\n        @hide=${(evt: DialogHideEvent) => {\n          if (!evt.detail.cancelled) this.delete();\n        }}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div data-testid=\"wrapper\" aria-busy=${isBusy} aria-live=\"polite\" class=\"space-y-l relative\">\n        <div class=\"grid grid-cols-1 sm-grid-cols-2 gap-m\">\n          ${this.__maybeRenderTextField({ field: 'first_name' })}\n          ${this.__maybeRenderTextField({ field: 'last_name' })}\n          ${this.__maybeRenderTextField({ field: 'email' })}\n          ${this.__maybeRenderTextField({ field: 'tax_id' })}\n        </div>\n\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\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=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__getValidator.cache.clear?.();\n  }\n}\n"]}

package/dist/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.js

@@ -2,6 +2,7 @@ import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { html } from 'lit-html';
 import { API } from "../NucleonElement/API.js";
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement)));
@@ -127,28 +128,14 @@ export class InternalCustomerPortalLoggedInView extends Base {
     render() {
         var _a, _b;
         const hiddenSelector = this.hiddenSelector.zoom('customer');
-        const optionallyHiddenInCustomer = ['payment-methods'];
-        const alwaysHiddenInCustomer = [
-            'attributes',
-            'transactions',
-            'subscriptions',
-            'addresses:actions:create',
-            'header:actions:edit:form:delete',
-        ];
-        const customerHiddenControls = [
-            ...optionallyHiddenInCustomer
-                .filter(id => hiddenSelector.matches(id))
-                .map(id => `${id}:${hiddenSelector.zoom(id)}`),
-            ...alwaysHiddenInCustomer.map(id => {
-                const splitId = id.split(':');
-                for (let i = 0; i < splitId.length; ++i) {
-                    const hostId = splitId.slice(0, i + 1).join(':');
-                    if (hiddenSelector.matches(hostId, true))
-                        return hostId;
-                }
-                return id;
-            }),
-        ];
+        const customerHiddenControls = new BooleanSelector(`
+      attributes
+      transactions
+      subscriptions
+      addresses:actions:create
+      header:actions:edit:form:delete
+      ${hiddenSelector.toString()}
+    `).toString();
         const templates = this.getNestedTemplates('customer');
         const originalHeaderActionsAfterTemplate = templates['header:actions:after'];
         const originalTimestampsAfterTemplate = templates['header:actions:edit:form:timestamps:after'];
@@ -211,7 +198,7 @@ export class InternalCustomerPortalLoggedInView extends Base {
       <foxy-customer
         readonlycontrols=${this.readonlySelector.zoom('customer').toString()}
         disabledcontrols=${this.disabledSelector.zoom('customer').toString()}
-        hiddencontrols=${customerHiddenControls.join(' ')}
+        hiddencontrols=${customerHiddenControls}
         data-testid="customer"
         group=${this.group}
         href=${this.customer}

package/dist/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalCustomerPortalLoggedInView.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.ts"],"names":[],"mappings":"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","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { API } from '../NucleonElement/API';\nimport { Customer } from '../Customer/Customer';\nimport { Templates as CustomerTemplates } from '../Customer/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/customer';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { Templates } from './types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\n\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement)));\ntype Data = Resource<Rels.CustomerPortalSettings>;\n\nexport class InternalCustomerPortalLoggedInView extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      customer: { type: String },\n      loggingOutState: { attribute: false },\n      loggingOutStateResetTimeout: { attribute: false },\n    };\n  }\n\n  templates: Templates = {};\n\n  customer = '';\n\n  loggingOutState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  loggingOutStateResetTimeout: NodeJS.Timeout | null = null;\n\n  private readonly __renderHeaderActionsSignOut = () => {\n    const scope = 'customer:header:actions:sign-out';\n    const state = this.loggingOutState;\n\n    const isDisabled =\n      this.disabledSelector.matches(scope) ||\n      !this.__customerElement?.in({ idle: 'snapshot' }) ||\n      state !== 'idle';\n\n    const handleClick = async () => {\n      try {\n        this.loggingOutState = 'busy';\n        await new API(this).fetch('foxy://customer-api/session', { method: 'DELETE' });\n        this.loggingOutState = 'idle';\n      } catch {\n        this.loggingOutState = 'fail';\n        this.loggingOutStateResetTimeout = setTimeout(() => {\n          this.loggingOutState = 'idle';\n          this.loggingOutStateResetTimeout = null;\n        }, 1000);\n      }\n    };\n\n    const style = {\n      'border-radius': '100%',\n      'padding': 'var(--lumo-space-xs)',\n      'display': 'flex',\n      'margin': '0',\n      'cursor': isDisabled ? 'default' : 'pointer',\n    };\n\n    return html`\n      <div style=\"display: flex; margin-left: var(--lumo-space-m)\">\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <vaadin-button\n          data-testid=\"sign-out\"\n          aria-label=${this.t('sign_out').toString()}\n          style=${Object.entries(style).reduce((p, [k, v]) => `${p}${k}:${v};`, '')}\n          theme=\"icon\"\n          ?disabled=${isDisabled}\n          @click=${handleClick}\n        >\n          ${state === 'idle'\n            ? html`<iron-icon icon=\"icons:exit-to-app\"></iron-icon>`\n            : html`\n                <foxy-spinner\n                  layout=\"no-label\"\n                  state=${state === 'fail' ? 'error' : 'busy'}\n                  style=\"margin: auto\"\n                  lang=${this.lang}\n                  ns=${[\n                    this.ns,\n                    customElements.get('foxy-customer')?.defaultNS ?? '',\n                    customElements.get('foxy-spinner')?.defaultNS ?? '',\n                  ].join(' ')}\n                >\n                </foxy-spinner>\n              `}\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubscriptions: Renderer<Customer> = (html, host) => {\n    const scope = 'customer:subscriptions';\n\n    return html`\n      ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n      <foxy-internal-customer-portal-subscriptions\n        readonlycontrols=${this.readonlySelector.zoom(scope).toString()}\n        disabledcontrols=${this.disabledSelector.zoom(scope).toString()}\n        hiddencontrols=${this.hiddenSelector.zoom(scope).toString()}\n        group=${host.group}\n        lang=${host.lang}\n        ns=${host.ns}\n        .templates=${this.getNestedTemplates(scope)}\n        .settings=${this.data}\n        .customer=${host.data}\n      >\n      </foxy-internal-customer-portal-subscriptions>\n\n      ${this.renderTemplateOrSlot(`${scope}:after`)}\n    `;\n  };\n\n  private readonly __renderTransactions: Renderer<Customer> = (html, host) => {\n    const scope = 'customer:transactions';\n\n    return html`\n      ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n      <foxy-internal-customer-portal-transactions\n        readonlycontrols=${this.readonlySelector.zoom(scope).toString()}\n        disabledcontrols=${this.disabledSelector.zoom(scope).toString()}\n        hiddencontrols=${this.hiddenSelector.zoom(scope).toString()}\n        group=${host.group}\n        lang=${host.lang}\n        ns=${host.ns}\n        .templates=${this.getNestedTemplates(scope)}\n        .customer=${host.data}\n      >\n      </foxy-internal-customer-portal-transactions>\n\n      ${this.renderTemplateOrSlot(`${scope}:after`)}\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector.zoom('customer');\n    const optionallyHiddenInCustomer = ['payment-methods'];\n    const alwaysHiddenInCustomer = [\n      'attributes',\n      'transactions',\n      'subscriptions',\n      'addresses:actions:create',\n      'header:actions:edit:form:delete',\n    ];\n\n    const customerHiddenControls = [\n      ...optionallyHiddenInCustomer\n        .filter(id => hiddenSelector.matches(id))\n        .map(id => `${id}:${hiddenSelector.zoom(id)}`),\n\n      ...alwaysHiddenInCustomer.map(id => {\n        const splitId = id.split(':');\n\n        for (let i = 0; i < splitId.length; ++i) {\n          const hostId = splitId.slice(0, i + 1).join(':');\n          if (hiddenSelector.matches(hostId, true)) return hostId;\n        }\n\n        return id;\n      }),\n    ];\n\n    const templates: CustomerTemplates = this.getNestedTemplates('customer');\n    const originalHeaderActionsAfterTemplate = templates['header:actions:after'];\n    const originalTimestampsAfterTemplate = templates['header:actions:edit:form:timestamps:after'];\n    const originalDefaultTemplate = templates['default'];\n\n    templates['header:actions:after'] = (html, host) => {\n      const isSignOutHidden = hiddenSelector.matches('header:actions:sign-out', true);\n      return html`\n        <div style=\"display:flex\">\n          ${isSignOutHidden ? '' : this.__renderHeaderActionsSignOut()}\n          ${originalHeaderActionsAfterTemplate?.(html, host)}\n        </div>\n      `;\n    };\n\n    templates['default'] = (html, host) => {\n      const renderSubscriptions = this.__renderSubscriptions;\n      const renderTransactions = this.__renderTransactions;\n\n      return html`\n        <style>\n          .space-y-m > :not([hidden]) ~ :not([hidden]) {\n            --tw-space-y-reverse: 0;\n            margin-top: calc(var(--lumo-space-m, 1rem) * calc(1 - var(--tw-space-y-reverse)));\n            margin-bottom: calc(var(--lumo-space-m, 1rem) * var(--tw-space-y-reverse));\n          }\n        </style>\n\n        ${hiddenSelector.matches('default', true) ? '' : originalDefaultTemplate?.(html, host)}\n\n        <div class=\"space-y-m\">\n          ${hiddenSelector.matches('subscriptions', true) ? '' : renderSubscriptions(html, host)}\n          ${hiddenSelector.matches('transactions', true) ? '' : renderTransactions(html, host)}\n        </div>\n      `;\n    };\n\n    templates['header:actions:edit:form:timestamps:after'] = (html, host) => {\n      const scope = 'change-password';\n\n      return html`\n        ${originalTimestampsAfterTemplate?.(html, host)}\n        ${host.hiddenSelector.matches(scope, true)\n          ? ''\n          : html`\n              ${host.renderTemplateOrSlot(`${scope}:before`)}\n\n              <foxy-internal-customer-portal-change-password\n                customer=${host.href}\n                session=\"foxy://customer-api/session\"\n                style=\"margin-top: var(--lumo-space-l)\"\n                email=${host.data?.email ?? ''}\n                lang=${host.lang}\n                ns=${host.ns}\n                ?disabled=${host.in('busy') || host.disabledSelector.matches(scope, true)}\n              >\n              </foxy-internal-customer-portal-change-password>\n\n              ${host.renderTemplateOrSlot(`${scope}:after`)}\n            `}\n      `;\n    };\n\n    return html`\n      <foxy-customer\n        readonlycontrols=${this.readonlySelector.zoom('customer').toString()}\n        disabledcontrols=${this.disabledSelector.zoom('customer').toString()}\n        hiddencontrols=${customerHiddenControls.join(' ')}\n        data-testid=\"customer\"\n        group=${this.group}\n        href=${this.customer}\n        lang=${this.lang}\n        ns=\"${this.ns} ${customElements.get('foxy-customer')?.defaultNS ?? ''}\"\n        id=\"customer\"\n        .templates=${templates}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-customer>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.loggingOutStateResetTimeout) clearTimeout(this.loggingOutStateResetTimeout);\n  }\n\n  private get __customerElement() {\n    return this.renderRoot.querySelector<Customer>('#customer');\n  }\n}\n"]}
+{"version":3,"file":"InternalCustomerPortalLoggedInView.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.ts"],"names":[],"mappings":"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","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { API } from '../NucleonElement/API';\nimport { Customer } from '../Customer/Customer';\nimport { Templates as CustomerTemplates } from '../Customer/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/customer';\nimport { BooleanSelector, Resource } from '@foxy.io/sdk/core';\nimport { Templates } from './types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\n\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement)));\ntype Data = Resource<Rels.CustomerPortalSettings>;\n\nexport class InternalCustomerPortalLoggedInView extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      customer: { type: String },\n      loggingOutState: { attribute: false },\n      loggingOutStateResetTimeout: { attribute: false },\n    };\n  }\n\n  templates: Templates = {};\n\n  customer = '';\n\n  loggingOutState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  loggingOutStateResetTimeout: NodeJS.Timeout | null = null;\n\n  private readonly __renderHeaderActionsSignOut = () => {\n    const scope = 'customer:header:actions:sign-out';\n    const state = this.loggingOutState;\n\n    const isDisabled =\n      this.disabledSelector.matches(scope) ||\n      !this.__customerElement?.in({ idle: 'snapshot' }) ||\n      state !== 'idle';\n\n    const handleClick = async () => {\n      try {\n        this.loggingOutState = 'busy';\n        await new API(this).fetch('foxy://customer-api/session', { method: 'DELETE' });\n        this.loggingOutState = 'idle';\n      } catch {\n        this.loggingOutState = 'fail';\n        this.loggingOutStateResetTimeout = setTimeout(() => {\n          this.loggingOutState = 'idle';\n          this.loggingOutStateResetTimeout = null;\n        }, 1000);\n      }\n    };\n\n    const style = {\n      'border-radius': '100%',\n      'padding': 'var(--lumo-space-xs)',\n      'display': 'flex',\n      'margin': '0',\n      'cursor': isDisabled ? 'default' : 'pointer',\n    };\n\n    return html`\n      <div style=\"display: flex; margin-left: var(--lumo-space-m)\">\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <vaadin-button\n          data-testid=\"sign-out\"\n          aria-label=${this.t('sign_out').toString()}\n          style=${Object.entries(style).reduce((p, [k, v]) => `${p}${k}:${v};`, '')}\n          theme=\"icon\"\n          ?disabled=${isDisabled}\n          @click=${handleClick}\n        >\n          ${state === 'idle'\n            ? html`<iron-icon icon=\"icons:exit-to-app\"></iron-icon>`\n            : html`\n                <foxy-spinner\n                  layout=\"no-label\"\n                  state=${state === 'fail' ? 'error' : 'busy'}\n                  style=\"margin: auto\"\n                  lang=${this.lang}\n                  ns=${[\n                    this.ns,\n                    customElements.get('foxy-customer')?.defaultNS ?? '',\n                    customElements.get('foxy-spinner')?.defaultNS ?? '',\n                  ].join(' ')}\n                >\n                </foxy-spinner>\n              `}\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubscriptions: Renderer<Customer> = (html, host) => {\n    const scope = 'customer:subscriptions';\n\n    return html`\n      ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n      <foxy-internal-customer-portal-subscriptions\n        readonlycontrols=${this.readonlySelector.zoom(scope).toString()}\n        disabledcontrols=${this.disabledSelector.zoom(scope).toString()}\n        hiddencontrols=${this.hiddenSelector.zoom(scope).toString()}\n        group=${host.group}\n        lang=${host.lang}\n        ns=${host.ns}\n        .templates=${this.getNestedTemplates(scope)}\n        .settings=${this.data}\n        .customer=${host.data}\n      >\n      </foxy-internal-customer-portal-subscriptions>\n\n      ${this.renderTemplateOrSlot(`${scope}:after`)}\n    `;\n  };\n\n  private readonly __renderTransactions: Renderer<Customer> = (html, host) => {\n    const scope = 'customer:transactions';\n\n    return html`\n      ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n      <foxy-internal-customer-portal-transactions\n        readonlycontrols=${this.readonlySelector.zoom(scope).toString()}\n        disabledcontrols=${this.disabledSelector.zoom(scope).toString()}\n        hiddencontrols=${this.hiddenSelector.zoom(scope).toString()}\n        group=${host.group}\n        lang=${host.lang}\n        ns=${host.ns}\n        .templates=${this.getNestedTemplates(scope)}\n        .customer=${host.data}\n      >\n      </foxy-internal-customer-portal-transactions>\n\n      ${this.renderTemplateOrSlot(`${scope}:after`)}\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector.zoom('customer');\n    const customerHiddenControls = new BooleanSelector(`\n      attributes\n      transactions\n      subscriptions\n      addresses:actions:create\n      header:actions:edit:form:delete\n      ${hiddenSelector.toString()}\n    `).toString();\n\n    const templates: CustomerTemplates = this.getNestedTemplates('customer');\n    const originalHeaderActionsAfterTemplate = templates['header:actions:after'];\n    const originalTimestampsAfterTemplate = templates['header:actions:edit:form:timestamps:after'];\n    const originalDefaultTemplate = templates['default'];\n\n    templates['header:actions:after'] = (html, host) => {\n      const isSignOutHidden = hiddenSelector.matches('header:actions:sign-out', true);\n      return html`\n        <div style=\"display:flex\">\n          ${isSignOutHidden ? '' : this.__renderHeaderActionsSignOut()}\n          ${originalHeaderActionsAfterTemplate?.(html, host)}\n        </div>\n      `;\n    };\n\n    templates['default'] = (html, host) => {\n      const renderSubscriptions = this.__renderSubscriptions;\n      const renderTransactions = this.__renderTransactions;\n\n      return html`\n        <style>\n          .space-y-m > :not([hidden]) ~ :not([hidden]) {\n            --tw-space-y-reverse: 0;\n            margin-top: calc(var(--lumo-space-m, 1rem) * calc(1 - var(--tw-space-y-reverse)));\n            margin-bottom: calc(var(--lumo-space-m, 1rem) * var(--tw-space-y-reverse));\n          }\n        </style>\n\n        ${hiddenSelector.matches('default', true) ? '' : originalDefaultTemplate?.(html, host)}\n\n        <div class=\"space-y-m\">\n          ${hiddenSelector.matches('subscriptions', true) ? '' : renderSubscriptions(html, host)}\n          ${hiddenSelector.matches('transactions', true) ? '' : renderTransactions(html, host)}\n        </div>\n      `;\n    };\n\n    templates['header:actions:edit:form:timestamps:after'] = (html, host) => {\n      const scope = 'change-password';\n\n      return html`\n        ${originalTimestampsAfterTemplate?.(html, host)}\n        ${host.hiddenSelector.matches(scope, true)\n          ? ''\n          : html`\n              ${host.renderTemplateOrSlot(`${scope}:before`)}\n\n              <foxy-internal-customer-portal-change-password\n                customer=${host.href}\n                session=\"foxy://customer-api/session\"\n                style=\"margin-top: var(--lumo-space-l)\"\n                email=${host.data?.email ?? ''}\n                lang=${host.lang}\n                ns=${host.ns}\n                ?disabled=${host.in('busy') || host.disabledSelector.matches(scope, true)}\n              >\n              </foxy-internal-customer-portal-change-password>\n\n              ${host.renderTemplateOrSlot(`${scope}:after`)}\n            `}\n      `;\n    };\n\n    return html`\n      <foxy-customer\n        readonlycontrols=${this.readonlySelector.zoom('customer').toString()}\n        disabledcontrols=${this.disabledSelector.zoom('customer').toString()}\n        hiddencontrols=${customerHiddenControls}\n        data-testid=\"customer\"\n        group=${this.group}\n        href=${this.customer}\n        lang=${this.lang}\n        ns=\"${this.ns} ${customElements.get('foxy-customer')?.defaultNS ?? ''}\"\n        id=\"customer\"\n        .templates=${templates}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-customer>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.loggingOutStateResetTimeout) clearTimeout(this.loggingOutStateResetTimeout);\n  }\n\n  private get __customerElement() {\n    return this.renderRoot.querySelector<Customer>('#customer');\n  }\n}\n"]}

package/dist/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.js

@@ -1,5 +1,6 @@
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { LitElement, html } from 'lit-element';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
@@ -133,7 +134,7 @@ export class InternalCustomerPortalSubscriptions extends Base {
       <foxy-subscription-form
         disabledcontrols=${ctx.dialog.disabledControls.toString()}
         readonlycontrols=${ctx.dialog.readonlyControls.toString()}
-        hiddencontrols=${ctx.dialog.hiddenControls.toString()}
+        hiddencontrols=${new BooleanSelector(`attributes timestamps start-date past-due-amount ${ctx.dialog.hiddenSelector}`)}
         settings=${JSON.stringify(this.settings)}
         parent=${ctx.dialog.parent}
         group=${ctx.dialog.group}
@@ -166,6 +167,7 @@ export class InternalCustomerPortalSubscriptions extends Base {
             }}
       >
         <foxy-subscription-card
+          hiddencontrols="email"
           parent=${ctx.parent}
           group=${ctx.group}
           lang=${ctx.lang}