@foxy.io/elements 1.24.0-beta.4 → 1.24.0-beta.6

package/dist/elements/public/CustomerForm/internal/InternalCustomerFormLegalNoticeControl/index.js

@@ -0,0 +1,6 @@
+import "../../../../internal/InternalControl/index.js";
+import "../../../I18n/index.js";
+import { InternalCustomerFormLegalNoticeControl as Control } from "./InternalCustomerFormLegalNoticeControl.js";
+customElements.define('foxy-internal-customer-form-legal-notice-control', Control);
+export { Control as InternalCustomerFormLegalNoticeControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/CustomerForm/internal/InternalCustomerFormLegalNoticeControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerForm/internal/InternalCustomerFormLegalNoticeControl/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,gCAA6B;AAE7B,OAAO,EAAE,sCAAsC,IAAI,OAAO,EAAE,oDAAiD;AAE7G,cAAc,CAAC,MAAM,CAAC,kDAAkD,EAAE,OAAO,CAAC,CAAC;AAEnF,OAAO,EAAE,OAAO,IAAI,sCAAsC,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalControl/index';\nimport '../../../I18n/index';\n\nimport { InternalCustomerFormLegalNoticeControl as Control } from './InternalCustomerFormLegalNoticeControl';\n\ncustomElements.define('foxy-internal-customer-form-legal-notice-control', Control);\n\nexport { Control as InternalCustomerFormLegalNoticeControl };\n"]}

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

@@ -1,11 +1,23 @@
-import * as FoxySDK from '@foxy.io/sdk';
-import { Renderer } from '../../../mixins/configurable';
-import { CustomerForm } from './CustomerForm';
-export declare type Rel = FoxySDK.Customer.Graph;
-export declare type Data = FoxySDK.Core.Resource<Rel, undefined>;
-export declare type TextFieldParams = {
-    field: keyof Data;
+import type { CustomerForm } from './CustomerForm';
+import type { Renderer } from '../../../mixins/configurable';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels as CustomerRels } from '@foxy.io/sdk/customer';
+import type { Rels as BackendRels } from '@foxy.io/sdk/backend';
+export declare type Settings = Resource<CustomerRels.CustomerPortalSettings>;
+export declare type Rel = BackendRels.Customer & {
+    props: {
+        /** When updating the password using Customer API, this value is required to complete the request. */
+        password_old?: string;
+        /** Client verification result. Required for customer registration via Customer API. */
+        verification?: {
+            /** Verification result, generated by hCaptcha. */
+            token: string;
+            /** Verification service type. Currently only hCaptcha is supported. */
+            type: 'hcaptcha';
+        };
+    };
 };
+export declare type Data = Resource<Rel, undefined>;
 export declare type Templates = {
     'first-name:before'?: Renderer<CustomerForm>;
     'first-name:after'?: Renderer<CustomerForm>;
@@ -15,6 +27,14 @@ export declare type Templates = {
     'email:after'?: Renderer<CustomerForm>;
     'tax-id:before'?: Renderer<CustomerForm>;
     'tax-id:after'?: Renderer<CustomerForm>;
+    'is-anonymous:before'?: Renderer<CustomerForm>;
+    'is-anonymous:after'?: Renderer<CustomerForm>;
+    'password:before'?: Renderer<CustomerForm>;
+    'password:after'?: Renderer<CustomerForm>;
+    'password-old:before'?: Renderer<CustomerForm>;
+    'password-old:after'?: Renderer<CustomerForm>;
+    'forgot-password:before'?: Renderer<CustomerForm>;
+    'forgot-password:after'?: Renderer<CustomerForm>;
     'timestamps:before'?: Renderer<CustomerForm>;
     'timestamps:after'?: Renderer<CustomerForm>;
     'delete:before'?: Renderer<CustomerForm>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as FoxySDK from '@foxy.io/sdk';\nimport { Renderer } from '../../../mixins/configurable';\nimport { CustomerForm } from './CustomerForm';\n\nexport type Rel = FoxySDK.Customer.Graph;\nexport type Data = FoxySDK.Core.Resource<Rel, undefined>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n  'first-name:before'?: Renderer<CustomerForm>;\n  'first-name:after'?: Renderer<CustomerForm>;\n  'last-name:before'?: Renderer<CustomerForm>;\n  'last-name:after'?: Renderer<CustomerForm>;\n  'email:before'?: Renderer<CustomerForm>;\n  'email:after'?: Renderer<CustomerForm>;\n  'tax-id:before'?: Renderer<CustomerForm>;\n  'tax-id:after'?: Renderer<CustomerForm>;\n  'timestamps:before'?: Renderer<CustomerForm>;\n  'timestamps:after'?: Renderer<CustomerForm>;\n  'delete:before'?: Renderer<CustomerForm>;\n  'delete:after'?: Renderer<CustomerForm>;\n  'create:before'?: Renderer<CustomerForm>;\n  'create:after'?: Renderer<CustomerForm>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CustomerForm } from './CustomerForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels as CustomerRels } from '@foxy.io/sdk/customer';\nimport type { Rels as BackendRels } from '@foxy.io/sdk/backend';\n\nexport type Settings = Resource<CustomerRels.CustomerPortalSettings>;\n\nexport type Rel = BackendRels.Customer & {\n  props: {\n    /** When updating the password using Customer API, this value is required to complete the request. */\n    password_old?: string;\n    /** Client verification result. Required for customer registration via Customer API. */\n    verification?: {\n      /** Verification result, generated by hCaptcha. */\n      token: string;\n      /** Verification service type. Currently only hCaptcha is supported. */\n      type: 'hcaptcha';\n    };\n  };\n};\n\nexport type Data = Resource<Rel, undefined>;\n\nexport type Templates = {\n  'first-name:before'?: Renderer<CustomerForm>;\n  'first-name:after'?: Renderer<CustomerForm>;\n\n  'last-name:before'?: Renderer<CustomerForm>;\n  'last-name:after'?: Renderer<CustomerForm>;\n\n  'email:before'?: Renderer<CustomerForm>;\n  'email:after'?: Renderer<CustomerForm>;\n\n  'tax-id:before'?: Renderer<CustomerForm>;\n  'tax-id:after'?: Renderer<CustomerForm>;\n\n  'is-anonymous:before'?: Renderer<CustomerForm>;\n  'is-anonymous:after'?: Renderer<CustomerForm>;\n\n  'password:before'?: Renderer<CustomerForm>;\n  'password:after'?: Renderer<CustomerForm>;\n\n  'password-old:before'?: Renderer<CustomerForm>;\n  'password-old:after'?: Renderer<CustomerForm>;\n\n  'forgot-password:before'?: Renderer<CustomerForm>;\n  'forgot-password:after'?: Renderer<CustomerForm>;\n\n  'timestamps:before'?: Renderer<CustomerForm>;\n  'timestamps:after'?: Renderer<CustomerForm>;\n\n  'delete:before'?: Renderer<CustomerForm>;\n  'delete:after'?: Renderer<CustomerForm>;\n\n  'create:before'?: Renderer<CustomerForm>;\n  'create:after'?: Renderer<CustomerForm>;\n};\n"]}

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

@@ -4,6 +4,7 @@ import { CustomerApi } from "../CustomerApi/CustomerApi.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { TransactionsTable } from "../TransactionsTable/TransactionsTable.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
 export class CustomerPortal extends TranslatableMixin(ThemeableMixin(CustomerApi), 'customer-portal') {
     constructor() {
         super(...arguments);
@@ -27,33 +28,29 @@ export class CustomerPortal extends TranslatableMixin(ThemeableMixin(CustomerApi
         };
     }
     render() {
+        let href;
+        try {
+            href = new URL('./customer_portal_settings', this.base).toString();
+        }
+        catch (_a) {
+            href = undefined;
+        }
         return this.api.storage.getItem(API.SESSION)
             ? html `
           <foxy-internal-customer-portal-logged-in-view
-            disabledcontrols=${this.disabledSelector.toString()}
-            readonlycontrols=${this.readonlySelector.toString()}
-            hiddencontrols=${this.hiddenSelector.toString()}
             customer=${this.base}
-            group=${this.group}
             class="h-full"
-            lang=${this.lang}
-            href=${new URL('./customer_portal_settings', this.base).toString()}
-            ns=${this.ns}
+            infer=""
+            href=${ifDefined(href)}
             .transactionsTableColumns=${this.transactionsTableColumns}
-            .templates=${this.templates}
           >
           </foxy-internal-customer-portal-logged-in-view>
         `
             : html `
           <foxy-internal-customer-portal-logged-out-view
-            disabledcontrols=${this.disabledSelector.toString()}
-            readonlycontrols=${this.readonlySelector.toString()}
-            hiddencontrols=${this.hiddenSelector.toString()}
-            group=${this.group}
             class="h-full"
-            lang=${this.lang}
-            ns=${this.ns}
-            .templates=${this.templates}
+            infer=""
+            href=${ifDefined(href)}
           >
           </foxy-internal-customer-portal-logged-out-view>
         `;

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

@@ -1 +1 @@
-{"version":3,"file":"CustomerPortal.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerPortal/CustomerPortal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,sCAAmC;AACzD,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,kDAA+C;AAE3E,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CACnD,cAAc,CAAC,WAAW,CAAC,EAC3B,iBAAiB,CAClB;IAHD;;QAYE,4FAA4F;QAC5F,6BAAwB,GAAiC;YACvD,iBAAiB,CAAC,WAAW;YAC7B,iBAAiB,CAAC,aAAa;YAC/B,iBAAiB,CAAC,YAAY;YAC9B,iBAAiB,CAAC,QAAQ;YAC1B,iBAAiB,CAAC,UAAU;YAC5B,iBAAiB,CAAC,aAAa;SAChC,CAAC;QAEF,2FAA2F;QAC3F,UAAK,GAAG,EAAE,CAAC;IAkCb,CAAC;IArDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,wBAAwB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC9C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAeD,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAA;;+BAEmB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;+BAChC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;6BAClC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE;uBACpC,IAAI,CAAC,IAAI;oBACZ,IAAI,CAAC,KAAK;;mBAEX,IAAI,CAAC,IAAI;mBACT,IAAI,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;iBAC7D,IAAI,CAAC,EAAE;wCACgB,IAAI,CAAC,wBAAwB;yBAC5C,IAAI,CAAC,SAAS;;;SAG9B;YACH,CAAC,CAAC,IAAI,CAAA;;+BAEmB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;+BAChC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE;6BAClC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE;oBACvC,IAAI,CAAC,KAAK;;mBAEX,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,EAAE;yBACC,IAAI,CAAC,SAAS;;;SAG9B,CAAC;IACR,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '@foxy.io/sdk/customer';\nimport { CustomerApi } from '../CustomerApi/CustomerApi';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\n\nexport class CustomerPortal extends TranslatableMixin(\n  ThemeableMixin(CustomerApi),\n  'customer-portal'\n) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      transactionsTableColumns: { attribute: false },\n      group: { type: String },\n    };\n  }\n\n  /** Same as `.columns` property on `foxy-transactions-table`. Sets columns of that table. */\n  transactionsTableColumns: TransactionsTable['columns'] = [\n    TransactionsTable.priceColumn,\n    TransactionsTable.summaryColumn,\n    TransactionsTable.statusColumn,\n    TransactionsTable.idColumn,\n    TransactionsTable.dateColumn,\n    TransactionsTable.receiptColumn,\n  ];\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  group = '';\n\n  render(): TemplateResult {\n    return this.api.storage.getItem(API.SESSION)\n      ? html`\n          <foxy-internal-customer-portal-logged-in-view\n            disabledcontrols=${this.disabledSelector.toString()}\n            readonlycontrols=${this.readonlySelector.toString()}\n            hiddencontrols=${this.hiddenSelector.toString()}\n            customer=${this.base}\n            group=${this.group}\n            class=\"h-full\"\n            lang=${this.lang}\n            href=${new URL('./customer_portal_settings', this.base).toString()}\n            ns=${this.ns}\n            .transactionsTableColumns=${this.transactionsTableColumns}\n            .templates=${this.templates}\n          >\n          </foxy-internal-customer-portal-logged-in-view>\n        `\n      : html`\n          <foxy-internal-customer-portal-logged-out-view\n            disabledcontrols=${this.disabledSelector.toString()}\n            readonlycontrols=${this.readonlySelector.toString()}\n            hiddencontrols=${this.hiddenSelector.toString()}\n            group=${this.group}\n            class=\"h-full\"\n            lang=${this.lang}\n            ns=${this.ns}\n            .templates=${this.templates}\n          >\n          </foxy-internal-customer-portal-logged-out-view>\n        `;\n  }\n}\n"]}
+{"version":3,"file":"CustomerPortal.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerPortal/CustomerPortal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,sCAAmC;AACzD,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,kDAA+C;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CACnD,cAAc,CAAC,WAAW,CAAC,EAC3B,iBAAiB,CAClB;IAHD;;QAYE,4FAA4F;QAC5F,6BAAwB,GAAiC;YACvD,iBAAiB,CAAC,WAAW;YAC7B,iBAAiB,CAAC,aAAa;YAC/B,iBAAiB,CAAC,YAAY;YAC9B,iBAAiB,CAAC,QAAQ;YAC1B,iBAAiB,CAAC,UAAU;YAC5B,iBAAiB,CAAC,aAAa;SAChC,CAAC;QAEF,2FAA2F;QAC3F,UAAK,GAAG,EAAE,CAAC;IA+Bb,CAAC;IAlDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,wBAAwB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC9C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAeD,MAAM;QACJ,IAAI,IAAwB,CAAC;QAE7B,IAAI;YACF,IAAI,GAAG,IAAI,GAAG,CAAC,4BAA4B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;SACpE;QAAC,WAAM;YACN,IAAI,GAAG,SAAS,CAAC;SAClB;QAED,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAA;;uBAEW,IAAI,CAAC,IAAI;;;mBAGb,SAAS,CAAC,IAAI,CAAC;wCACM,IAAI,CAAC,wBAAwB;;;SAG5D;YACH,CAAC,CAAC,IAAI,CAAA;;;;mBAIO,SAAS,CAAC,IAAI,CAAC;;;SAGzB,CAAC;IACR,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '@foxy.io/sdk/customer';\nimport { CustomerApi } from '../CustomerApi/CustomerApi';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nexport class CustomerPortal extends TranslatableMixin(\n  ThemeableMixin(CustomerApi),\n  'customer-portal'\n) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      transactionsTableColumns: { attribute: false },\n      group: { type: String },\n    };\n  }\n\n  /** Same as `.columns` property on `foxy-transactions-table`. Sets columns of that table. */\n  transactionsTableColumns: TransactionsTable['columns'] = [\n    TransactionsTable.priceColumn,\n    TransactionsTable.summaryColumn,\n    TransactionsTable.statusColumn,\n    TransactionsTable.idColumn,\n    TransactionsTable.dateColumn,\n    TransactionsTable.receiptColumn,\n  ];\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  group = '';\n\n  render(): TemplateResult {\n    let href: string | undefined;\n\n    try {\n      href = new URL('./customer_portal_settings', this.base).toString();\n    } catch {\n      href = undefined;\n    }\n\n    return this.api.storage.getItem(API.SESSION)\n      ? html`\n          <foxy-internal-customer-portal-logged-in-view\n            customer=${this.base}\n            class=\"h-full\"\n            infer=\"\"\n            href=${ifDefined(href)}\n            .transactionsTableColumns=${this.transactionsTableColumns}\n          >\n          </foxy-internal-customer-portal-logged-in-view>\n        `\n      : html`\n          <foxy-internal-customer-portal-logged-out-view\n            class=\"h-full\"\n            infer=\"\"\n            href=${ifDefined(href)}\n          >\n          </foxy-internal-customer-portal-logged-out-view>\n        `;\n  }\n}\n"]}

package/dist/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.d.ts

@@ -1,15 +1,12 @@
 /// <reference types="node" />
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-import { PropertyDeclarations } from 'lit-element';
-import { Rels } from '@foxy.io/sdk/customer';
-import { Resource } from '@foxy.io/sdk/core';
-import { Templates } from './types';
-import { TransactionsTable } from '../TransactionsTable/TransactionsTable';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { TransactionsTable } from '../TransactionsTable/TransactionsTable';
+import type { Templates } from './types';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/customer';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
 };
 declare type Data = Resource<Rels.CustomerPortalSettings>;
 export declare class InternalCustomerPortalLoggedInView extends Base<Data> {
@@ -22,7 +19,7 @@ export declare class InternalCustomerPortalLoggedInView extends Base<Data> {
     private readonly __renderHeaderActionsSignOut;
     private readonly __renderSubscriptions;
     private readonly __renderTransactions;
-    render(): TemplateResult;
+    renderBody(): TemplateResult;
     disconnectedCallback(): void;
     private get __customerElement();
 }

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

@@ -1,11 +1,9 @@
-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)));
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { html } from 'lit-html';
+import { API } from "../NucleonElement/API.js";
+const Base = TranslatableMixin(InternalForm);
 export class InternalCustomerPortalLoggedInView extends Base {
     constructor() {
         super(...arguments);
@@ -128,7 +126,7 @@ export class InternalCustomerPortalLoggedInView extends Base {
             loggingOutStateResetTimeout: { attribute: false },
         };
     }
-    render() {
+    renderBody() {
         var _a, _b;
         const hiddenSelector = this.hiddenSelector.zoom('customer');
         const customerHiddenControls = new BooleanSelector([
@@ -136,12 +134,14 @@ export class InternalCustomerPortalLoggedInView extends Base {
             'transactions',
             'subscriptions',
             'addresses:actions:create',
+            'header:actions:edit:form:is-anonymous',
+            'header:actions:edit:form:forgot-password',
+            'header:actions:edit:form:create',
             'header:actions:edit:form:delete',
             hiddenSelector.toString(),
         ].join(' ')).toString();
         const templates = this.getNestedTemplates('customer');
         const originalHeaderActionsAfterTemplate = templates['header:actions:after'];
-        const originalTimestampsAfterTemplate = templates['header:actions:edit:form:timestamps:after'];
         const originalDefaultTemplate = templates['default'];
         templates['header:actions:after'] = (html, host) => {
             const isSignOutHidden = hiddenSelector.matches('header:actions:sign-out', true);
@@ -170,31 +170,6 @@ export class InternalCustomerPortalLoggedInView extends Base {
           ${hiddenSelector.matches('subscriptions', true) ? '' : renderSubscriptions(html, host)}
           ${hiddenSelector.matches('transactions', true) ? '' : renderTransactions(html, host)}
         </div>
-      `;
-        };
-        templates['header:actions:edit:form:timestamps:after'] = (html, host) => {
-            var _a, _b;
-            const scope = 'change-password';
-            return html `
-        ${originalTimestampsAfterTemplate === null || originalTimestampsAfterTemplate === void 0 ? void 0 : originalTimestampsAfterTemplate(html, host)}
-        ${host.hiddenSelector.matches(scope, true)
-                ? ''
-                : html `
-              ${host.renderTemplateOrSlot(`${scope}:before`)}
-
-              <foxy-internal-customer-portal-change-password
-                customer=${host.href}
-                session="foxy://customer-api/session"
-                style="margin-top: var(--lumo-space-l)"
-                email=${(_b = (_a = host.data) === null || _a === void 0 ? void 0 : _a.email) !== null && _b !== void 0 ? _b : ''}
-                lang=${host.lang}
-                ns=${host.ns}
-                ?disabled=${host.in('busy') || host.disabledSelector.matches(scope, true)}
-              >
-              </foxy-internal-customer-portal-change-password>
-
-              ${host.renderTemplateOrSlot(`${scope}:after`)}
-            `}
       `;
         };
         return html `
@@ -209,6 +184,7 @@ export class InternalCustomerPortalLoggedInView extends Base {
         ns="${this.ns} ${(_b = (_a = customElements.get('foxy-customer')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
         id="customer"
         .templates=${templates}
+        .settings=${this.data}
         @update=${() => this.requestUpdate()}
       >
       </foxy-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":"AAAA,OAAO,EAAE,iBAAiB,EAAY,wCAAqC;AAC3E,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,GAAG,EAAE,iCAA8B;AAG5C,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAGlE,OAAO,EAAE,eAAe,EAAY,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAGjE,MAAM,IAAI,GAAG,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAGlF,MAAM,OAAO,kCAAmC,SAAQ,IAAU;IAAlE;;QAWE,cAAS,GAAc,EAAE,CAAC;QAE1B,aAAQ,GAAG,EAAE,CAAC;QAEd,oBAAe,GAA6B,MAAM,CAAC;QAEnD,6BAAwB,GAAiC,EAAE,CAAC;QAE5D,gCAA2B,GAA0B,IAAI,CAAC;QAEzC,iCAA4B,GAAG,GAAG,EAAE;;YACnD,MAAM,KAAK,GAAG,kCAAkC,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;YAEnC,MAAM,UAAU,GACd,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC;gBACpC,QAAC,IAAI,CAAC,iBAAiB,0CAAE,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAC;gBACjD,KAAK,KAAK,MAAM,CAAC;YAEnB,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;gBAC7B,IAAI;oBACF,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;oBAC9B,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,6BAA6B,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAC/E,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;iBAC/B;gBAAC,WAAM;oBACN,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;oBAC9B,IAAI,CAAC,2BAA2B,GAAG,UAAU,CAAC,GAAG,EAAE;wBACjD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC;wBAC9B,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;oBAC1C,CAAC,EAAE,IAAI,CAAC,CAAC;iBACV;YACH,CAAC,CAAC;YAEF,MAAM,KAAK,GAAG;gBACZ,eAAe,EAAE,MAAM;gBACvB,SAAS,EAAE,sBAAsB;gBACjC,SAAS,EAAE,MAAM;gBACjB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;aAC7C,CAAC;YAEF,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,SAAS,CAAC;;;;uBAI/B,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,QAAQ,EAAE;kBAClC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;;sBAE7D,UAAU;mBACb,WAAW;;YAElB,KAAK,KAAK,MAAM;gBAChB,CAAC,CAAC,IAAI,CAAA,kDAAkD;gBACxD,CAAC,CAAC,IAAI,CAAA;;;0BAGQ,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;yBAEpC,IAAI,CAAC,IAAI;uBACX;oBACH,IAAI,CAAC,EAAE;gCACP,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,0CAAE,SAAS,mCAAI,EAAE;gCACpD,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;iBACpD,CAAC,IAAI,CAAC,GAAG,CAAC;;;eAGd;;;UAGL,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,QAAQ,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;QAEe,0BAAqB,GAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YAC1E,MAAM,KAAK,GAAG,wBAAwB,CAAC;YAEvC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,SAAS,CAAC;;;2BAGzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;2BAC5C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;yBAC9C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;gBACnD,IAAI,CAAC,KAAK;eACX,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;qBACC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;oBAC/B,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,IAAI;;;;QAIrB,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,QAAQ,CAAC;KAC9C,CAAC;QACJ,CAAC,CAAC;QAEe,yBAAoB,GAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACzE,MAAM,KAAK,GAAG,uBAAuB,CAAC;YAEtC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,SAAS,CAAC;;;2BAGzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;2BAC5C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;yBAC9C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;gBACnD,IAAI,CAAC,KAAK;eACX,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;qBACC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;oBAC/B,IAAI,CAAC,IAAI;mBACV,IAAI,CAAC,wBAAwB;;;;QAIxC,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,QAAQ,CAAC;KAC9C,CAAC;QACJ,CAAC,CAAC;IAwGJ,CAAC;IA1OC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YAC1B,eAAe,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACrC,wBAAwB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC9C,2BAA2B,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClD,CAAC;IACJ,CAAC;IA4HD,MAAM;;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,sBAAsB,GAAG,IAAI,eAAe,CAChD;YACE,YAAY;YACZ,cAAc;YACd,eAAe;YACf,0BAA0B;YAC1B,iCAAiC;YACjC,cAAc,CAAC,QAAQ,EAAE;SAC1B,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC,QAAQ,EAAE,CAAC;QAEb,MAAM,SAAS,GAAsB,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC;QACzE,MAAM,kCAAkC,GAAG,SAAS,CAAC,sBAAsB,CAAC,CAAC;QAC7E,MAAM,+BAA+B,GAAG,SAAS,CAAC,2CAA2C,CAAC,CAAC;QAC/F,MAAM,uBAAuB,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QAErD,SAAS,CAAC,sBAAsB,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACjD,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;YAChF,OAAO,IAAI,CAAA;;YAEL,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,4BAA4B,EAAE;YAC1D,kCAAkC,aAAlC,kCAAkC,uBAAlC,kCAAkC,CAAG,IAAI,EAAE,IAAI,CAAC;;OAErD,CAAC;QACJ,CAAC,CAAC;QAEF,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACpC,MAAM,mBAAmB,GAAG,IAAI,CAAC,qBAAqB,CAAC;YACvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CAAC;YAErD,OAAO,IAAI,CAAA;;;;;;;;;UASP,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAG,IAAI,EAAE,IAAI,CAAC;;;YAGlF,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,CAAC;YACpF,cAAc,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,EAAE,IAAI,CAAC;;OAEvF,CAAC;QACJ,CAAC,CAAC;QAEF,SAAS,CAAC,2CAA2C,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;;YACtE,MAAM,KAAK,GAAG,iBAAiB,CAAC;YAEhC,OAAO,IAAI,CAAA;UACP,+BAA+B,aAA/B,+BAA+B,uBAA/B,+BAA+B,CAAG,IAAI,EAAE,IAAI,CAAC;UAC7C,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;gBACxC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,SAAS,CAAC;;;2BAGjC,IAAI,CAAC,IAAI;;;wBAGZ,YAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,mCAAI,EAAE;uBACvB,IAAI,CAAC,IAAI;qBACX,IAAI,CAAC,EAAE;4BACA,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC;;;;gBAIzE,IAAI,CAAC,oBAAoB,CAAC,GAAG,KAAK,QAAQ,CAAC;aAC9C;OACN,CAAC;QACJ,CAAC,CAAC;QAEF,OAAO,IAAI,CAAA;;2BAEY,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,EAAE;2BACjD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,QAAQ,EAAE;yBACnD,sBAAsB;;gBAE/B,IAAI,CAAC,KAAK;eACX,IAAI,CAAC,QAAQ;eACb,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,0CAAE,SAAS,mCAAI,EAAE;;qBAExD,SAAS;kBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGvC,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,2BAA2B;YAAE,YAAY,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;IACvF,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAW,WAAW,CAAC,CAAC;IAC9D,CAAC;CACF","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';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\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      transactionsTableColumns: { attribute: false },\n      loggingOutStateResetTimeout: { attribute: false },\n    };\n  }\n\n  templates: Templates = {};\n\n  customer = '';\n\n  loggingOutState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  transactionsTableColumns: TransactionsTable['columns'] = [];\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        .columns=${this.transactionsTableColumns}\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      [\n        'attributes',\n        'transactions',\n        'subscriptions',\n        'addresses:actions:create',\n        'header:actions:edit:form:delete',\n        hiddenSelector.toString(),\n      ].join(' ')\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"]}
+{"version":3,"file":"InternalCustomerPortalLoggedInView.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport type { Templates as CustomerTemplates } from '../Customer/types';\nimport type { Templates } from './types';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Customer } from '../Customer/Customer';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/customer';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\nimport { API } from '../NucleonElement/API';\n\nconst Base = TranslatableMixin(InternalForm);\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      transactionsTableColumns: { attribute: false },\n      loggingOutStateResetTimeout: { attribute: false },\n    };\n  }\n\n  templates: Templates = {};\n\n  customer = '';\n\n  loggingOutState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  transactionsTableColumns: TransactionsTable['columns'] = [];\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        .columns=${this.transactionsTableColumns}\n      >\n      </foxy-internal-customer-portal-transactions>\n\n      ${this.renderTemplateOrSlot(`${scope}:after`)}\n    `;\n  };\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector.zoom('customer');\n    const customerHiddenControls = new BooleanSelector(\n      [\n        'attributes',\n        'transactions',\n        'subscriptions',\n        'addresses:actions:create',\n        'header:actions:edit:form:is-anonymous',\n        'header:actions:edit:form:forgot-password',\n        'header:actions:edit:form:create',\n        'header:actions:edit:form:delete',\n        hiddenSelector.toString(),\n      ].join(' ')\n    ).toString();\n\n    const templates: CustomerTemplates = this.getNestedTemplates('customer');\n    const originalHeaderActionsAfterTemplate = templates['header:actions: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    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        .settings=${this.data}\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/InternalCustomerPortalLoggedOutView.d.ts

@@ -1,24 +1,28 @@
-import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
-declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
-    inferredProperties: string[];
-} & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/customer';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare type Data = Resource<Rels.CustomerPortalSettings>;
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: CSSResultArray;
 };
-export declare class InternalCustomerPortalLoggedOutView extends Base {
+export declare class InternalCustomerPortalLoggedOutView extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
-    group: string;
-    page: 'sign-in' | 'access-recovery';
+    page: 'sign-up' | 'sign-in' | 'access-recovery';
     private readonly __renderAccessRecoveryHeader;
     private readonly __renderAccessRecoveryBack;
     private readonly __renderAccessRecoveryForm;
     private readonly __renderAccessRecovery;
     private readonly __renderSignInHeader;
     private readonly __renderSignInRecover;
+    private readonly __renderSignInSignUp;
     private readonly __renderSignInForm;
     private readonly __renderSignIn;
-    render(): TemplateResult;
+    private readonly __renderSignUpHeader;
+    private readonly __renderSignUpGoBack;
+    private readonly __renderSignUpForm;
+    private readonly __renderSignUp;
+    renderBody(): TemplateResult;
 }
 export {};

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

@@ -1,13 +1,11 @@
-import { LitElement, css, html, } from 'lit-element';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { InferrableMixin } from "../../../mixins/inferrable.js";
-const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement))));
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { css, html } from 'lit-element';
+const Base = TranslatableMixin(InternalForm);
 export class InternalCustomerPortalLoggedOutView extends Base {
     constructor() {
         super(...arguments);
-        this.group = '';
         this.page = 'sign-in';
         this.__renderAccessRecoveryHeader = () => {
             var _a, _b, _c, _d;
@@ -16,7 +14,7 @@ export class InternalCustomerPortalLoggedOutView extends Base {
             const form = this.renderRoot.querySelector(formId);
             const isBusy = !!(form === null || form === void 0 ? void 0 : form.in('busy'));
             return html `
-      <div class="flex flex-col leading-m font-lumo" data-testid="access-recovery:header">
+      <div class="flex flex-col leading-s font-lumo" data-testid="access-recovery:header">
         ${this.renderTemplateOrSlot('access-recovery:header:before')}
 
         <foxy-i18n
@@ -99,10 +97,10 @@ export class InternalCustomerPortalLoggedOutView extends Base {
             const hiddenSelector = this.hiddenSelector.zoom(scope);
             return html `
       <div class="h-full flex" data-testid="access-recovery">
-        <div class="m-auto max-w-20rem flex-1">
+        <div class="m-auto max-w-25rem flex-1">
           ${this.renderTemplateOrSlot(`${scope}:before`)}
 
-          <div class="space-y-l">
+          <div class="space-y-m">
             ${hiddenSelector.matches('header', true) ? '' : this.__renderAccessRecoveryHeader()}
             <div class="space-y-s">
               ${hiddenSelector.matches('form', true) ? '' : this.__renderAccessRecoveryForm()}
@@ -122,7 +120,7 @@ export class InternalCustomerPortalLoggedOutView extends Base {
             const form = this.renderRoot.querySelector(formId);
             const isBusy = !!(form === null || form === void 0 ? void 0 : form.in('busy'));
             return html `
-      <div class="flex flex-col leading-m font-lumo" data-testid="sign-in:header">
+      <div class="flex flex-col leading-s font-lumo" data-testid="sign-in:header">
         ${this.renderTemplateOrSlot('sign-in:header:before')}
 
         <foxy-i18n
@@ -170,6 +168,27 @@ export class InternalCustomerPortalLoggedOutView extends Base {
 
         ${this.renderTemplateOrSlot('sign-in:recover:after')}
       </div>
+    `;
+        };
+        this.__renderSignInSignUp = () => {
+            const form = this.renderRoot.querySelector('#sign-in-form');
+            const disabledSelector = this.disabledSelector.zoom('sign-in');
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('sign-in:signup:before')}
+
+        <vaadin-button
+          data-testid="sign-in:signup"
+          class="w-full"
+          theme="tertiary"
+          ?disabled=${!!(form === null || form === void 0 ? void 0 : form.in('busy')) || disabledSelector.matches('signup', true)}
+          @click=${() => (this.page = 'sign-up')}
+        >
+          <foxy-i18n lang=${this.lang} key="sign_up" ns="${this.ns} sign-in-form"> </foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('sign-in:signup:after')}
+      </div>
     `;
         };
         this.__renderSignInForm = () => {
@@ -200,18 +219,24 @@ export class InternalCustomerPortalLoggedOutView extends Base {
     `;
         };
         this.__renderSignIn = () => {
+            var _a, _b;
             const scope = 'sign-in';
             const hiddenSelector = this.hiddenSelector.zoom(scope);
+            const isSignUpEnabled = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.sign_up) === null || _b === void 0 ? void 0 : _b.enabled) === true;
+            const isSignUpButtonHidden = hiddenSelector.matches('signup', true) || !isSignUpEnabled;
             return html `
       <div class="h-full flex" data-testid="sign-in">
-        <div class="m-auto max-w-20rem flex-1">
+        <div class="m-auto max-w-25rem flex-1">
           ${this.renderTemplateOrSlot(`${scope}:before`)}
 
-          <div class="space-y-l">
+          <div class="space-y-m">
             ${hiddenSelector.matches('header', true) ? '' : this.__renderSignInHeader()}
             <div class="space-y-s">
               ${hiddenSelector.matches('form', true) ? '' : this.__renderSignInForm()}
-              ${hiddenSelector.matches('recover', true) ? '' : this.__renderSignInRecover()}
+              <div class="flex justify-center gap-s">
+                ${isSignUpButtonHidden ? '' : this.__renderSignInSignUp()}
+                ${hiddenSelector.matches('recover', true) ? '' : this.__renderSignInRecover()}
+              </div>
             </div>
           </div>
 
@@ -220,6 +245,114 @@ export class InternalCustomerPortalLoggedOutView extends Base {
       </div>
     `;
         };
+        this.__renderSignUpHeader = () => {
+            const { lang, ns } = this;
+            const formId = '#sign-up-form';
+            const form = this.renderRoot.querySelector(formId);
+            const isBusy = !!(form === null || form === void 0 ? void 0 : form.in('busy'));
+            return html `
+      <div class="flex flex-col leading-s font-lumo" data-testid="sign-up:header">
+        ${this.renderTemplateOrSlot('sign-up:header:before')}
+
+        <foxy-i18n
+          class="text-xxl font-medium ${isBusy ? 'text-disabled' : 'text-body'}"
+          lang=${lang}
+          key="sign_up"
+          ns="${ns} sign-up-form"
+        >
+        </foxy-i18n>
+
+        <foxy-i18n
+          class="text-l ${isBusy ? 'text-disabled' : 'text-secondary'}"
+          lang=${lang}
+          key="sign_up_hint"
+          ns="${ns} sign-up-form"
+        >
+        </foxy-i18n>
+
+        ${this.renderTemplateOrSlot('sign-up:header:after')}
+      </div>
+    `;
+        };
+        this.__renderSignUpGoBack = () => {
+            const form = this.renderRoot.querySelector('#sign-up-form');
+            const disabledSelector = this.disabledSelector.zoom('sign-up');
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('sign-up:go-back:before')}
+
+        <vaadin-button
+          data-testid="sign-up:go-back"
+          class="w-full"
+          theme="tertiary-inline"
+          ?disabled=${!!(form === null || form === void 0 ? void 0 : form.in('busy')) || disabledSelector.matches('go-back', true)}
+          @click=${() => (this.page = 'sign-in')}
+        >
+          <foxy-i18n lang=${this.lang} key="go_back" ns="${this.ns} sign-up-form"> </foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('sign-up:go-back:after')}
+      </div>
+    `;
+        };
+        this.__renderSignUpForm = () => {
+            var _a, _b, _c;
+            const siteKey = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.sign_up) === null || _b === void 0 ? void 0 : _b.verification.site_key;
+            const scope = 'sign-up:form';
+            const hidden = [
+                'tax-id',
+                'is-anonymous',
+                'password-old',
+                'forgot-password',
+                'timestamps',
+                'delete',
+                this.hiddenSelector.zoom(scope).toString(),
+            ];
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
+
+        <foxy-customer-form
+          readonlycontrols=${this.readonlySelector.zoom(scope).toString()}
+          disabledcontrols=${this.disabledSelector.zoom(scope).toString()}
+          hiddencontrols=${new BooleanSelector(hidden.join(' ').trim())}
+          data-testid="sign-up:form"
+          parent="foxy://customer-api/signup"
+          group=${this.group}
+          lang=${this.lang}
+          id="sign-up-form"
+          ns="${this.ns} sign-up-form"
+          .tosCheckboxSettings=${(_c = this.data) === null || _c === void 0 ? void 0 : _c.tos_checkbox_settings}
+          .verification=${siteKey ? { type: 'hcaptcha', siteKey } : null}
+          .templates=${this.getNestedTemplates('sign-up:form')}
+          .settings=${this.data}
+          @update=${() => this.requestUpdate()}
+        >
+        </foxy-customer-form>
+
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
+      </div>
+    `;
+        };
+        this.__renderSignUp = () => {
+            const scope = 'sign-up';
+            const hiddenSelector = this.hiddenSelector.zoom(scope);
+            return html `
+      <div class="h-full flex" data-testid="sign-up">
+        <div class="m-auto max-w-25rem flex-1">
+          ${this.renderTemplateOrSlot(`${scope}:before`)}
+
+          <div class="space-y-m">
+            ${hiddenSelector.matches('header', true) ? '' : this.__renderSignUpHeader()}
+            ${hiddenSelector.matches('form', true) ? '' : this.__renderSignUpForm()}
+            ${hiddenSelector.matches('go-back', true) ? '' : this.__renderSignUpGoBack()}
+          </div>
+
+          ${this.renderTemplateOrSlot(`${scope}:after`)}
+        </div>
+      </div>
+    `;
+        };
     }
     static get properties() {
         return {
@@ -231,13 +364,13 @@ export class InternalCustomerPortalLoggedOutView extends Base {
     static get styles() {
         return [
             super.styles,
-            css `.max-w-20rem{
-  max-width:20rem;
+            css `.max-w-25rem{
+  max-width:25rem;
 }
       `,
         ];
     }
-    render() {
+    renderBody() {
         const { page, hiddenSelector } = this;
         if (page === 'access-recovery' && !hiddenSelector.matches('access-recovery', true)) {
             return this.__renderAccessRecovery();
@@ -245,6 +378,9 @@ export class InternalCustomerPortalLoggedOutView extends Base {
         if (page === 'sign-in' && !hiddenSelector.matches('sign-in', true)) {
             return this.__renderSignIn();
         }
+        if (page === 'sign-up' && !hiddenSelector.matches('sign-up', true)) {
+            return this.__renderSignUp();
+        }
         return html ``;
     }
 }