@foxy.io/elements 1.52.0-beta.3 → 1.52.0

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

@@ -17,47 +17,67 @@
       "done": "Copied to clipboard"
     }
   },
-  "first-name": {
-    "label": "First name",
-    "placeholder": "Required",
+  "general": {
+    "label": "",
     "helper_text": "",
-    "v8n_required": "Please enter your first name",
-    "v8n_too_long": "Unfortunately we can't store first names longer than 50 characters"
+    "first-name": {
+      "label": "First name",
+      "placeholder": "Required",
+      "helper_text": "",
+      "v8n_required": "Please enter your first name",
+      "v8n_too_long": "Unfortunately we can't store first names longer than 50 characters"
+    },
+    "last-name": {
+      "label": "Last name",
+      "placeholder": "Required",
+      "helper_text": "",
+      "v8n_required": "Please enter your last name. If you don't have a last name, put any character in this field.",
+      "v8n_too_long": "Unfortunately we can't store last names longer than 50 characters"
+    }
   },
-  "last-name": {
-    "label": "Last name",
-    "placeholder": "Required",
+  "contact-info": {
+    "label": "Contact",
     "helper_text": "",
-    "v8n_required": "Please enter your last name. If you don't have a last name, put any character in this field.",
-    "v8n_too_long": "Unfortunately we can't store last names longer than 50 characters"
-  },
-  "email": {
-    "label": "Email",
-    "placeholder": "Required",
-    "helper_text": "This email is your login to Foxy Admin. We'll also send important notifications to this address.",
-    "v8n_required": "Please enter your email address",
-    "v8n_invalid_email": "Please enter a valid email address",
-    "v8n_too_long": "Unfortunately we can't store email addresses longer than 100 characters"
+    "email": {
+      "label": "Email",
+      "placeholder": "Required",
+      "helper_text": "",
+      "v8n_required": "Please enter your email address",
+      "v8n_invalid_email": "Please enter a valid email address",
+      "v8n_too_long": "Unfortunately we can't store email addresses longer than 100 characters"
+    },
+    "phone": {
+      "label": "Phone",
+      "placeholder": "Optional",
+      "helper_text": "",
+      "v8n_too_long": "This phone number appears to be too long. Please make sure you entered it correctly."
+    }
   },
-  "phone": {
-    "label": "Phone",
-    "placeholder": "Optional",
-    "helper_text": "We'll only use this number to contact you about your account.",
-    "v8n_too_long": "This phone number appears to be too long. Please make sure you entered it correctly."
+  "role": {
+    "label": "Role",
+    "helper_text": "",
+    "is-merchant": {
+      "label": "Merchant",
+      "helper_text": ""
+    },
+    "is-programmer": {
+      "label": "Backend Developer",
+      "helper_text": ""
+    },
+    "is-front-end-developer": {
+      "label": "Frontend Developer",
+      "helper_text": ""
+    },
+    "is-designer": {
+      "label": "Designer",
+      "helper_text": ""
+    }
   },
   "affiliate-id": {
     "label": "Affiliate ID",
     "placeholder": "Optional",
     "helper_text": "This value can only be set during user creation. Contact us if you need this value changed later."
   },
-  "role": {
-    "label": "Role",
-    "helper_text": "If you contact us for help, your role will help us understand how to best assist you.",
-    "option_merchant": "Merchant",
-    "option_backend_developer": "Backend Developer",
-    "option_frontend_developer": "Frontend Developer",
-    "option_designer": "Designer"
-  },
   "timestamps": {
     "date_created": "Created on",
     "date_modified": "Last updated on",
@@ -82,4 +102,4 @@
     "loading_busy": "Loading",
     "loading_error": "Unknown error"
   }
-}
+}

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

@@ -14,9 +14,6 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  */
 export declare class AppliedCouponCodeForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
-    private readonly __ignoreUsageLimitsOptions;
-    private readonly __getIgnoreUsageLimitsValue;
-    private readonly __setIgnoreUsageLimitsValue;
     get readonlySelector(): BooleanSelector;
     get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;

package/dist/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.js

@@ -11,16 +11,6 @@ const Base = TranslatableMixin(InternalForm, NS);
  * @since 1.21.0
  */
 export class AppliedCouponCodeForm extends Base {
-    constructor() {
-        super(...arguments);
-        this.__ignoreUsageLimitsOptions = [{ value: 'checked', label: 'option_checked' }];
-        this.__getIgnoreUsageLimitsValue = () => {
-            return this.form.ignore_usage_limits ? ['checked'] : [];
-        };
-        this.__setIgnoreUsageLimitsValue = (newValue) => {
-            this.edit({ ignore_usage_limits: newValue.includes('checked') });
-        };
-    }
     static get v8n() {
         return [({ code: v }) => !!v || 'code:v8n_required'];
     }
@@ -34,26 +24,21 @@ export class AppliedCouponCodeForm extends Base {
         return html `
       ${this.renderHeader()}
 
-      <foxy-internal-text-control
-        helper-text=${this.t(this.data ? 'code.helper_text_existing' : 'code.helper_text_new')}
-        infer="code"
-      >
-      </foxy-internal-text-control>
+      <foxy-internal-summary-control infer="" label="" helper-text="">
+        <foxy-internal-text-control
+          helper-text=${this.t(this.data ? 'code.helper_text_existing' : 'code.helper_text_new')}
+          layout="summary-item"
+          infer="code"
+        >
+        </foxy-internal-text-control>
 
-      ${this.data
+        ${this.data
             ? ''
             : html `
-            <foxy-internal-checkbox-group-control
-              infer="ignore-usage-limits"
-              class="-my-xs"
-              .getValue=${this.__getIgnoreUsageLimitsValue}
-              .setValue=${this.__setIgnoreUsageLimitsValue}
-              .options=${this.__ignoreUsageLimitsOptions}
-            >
-            </foxy-internal-checkbox-group-control>
-          `}
-
-      <!-- -->
+              <foxy-internal-switch-control infer="ignore-usage-limits">
+              </foxy-internal-switch-control>
+            `}
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"AppliedCouponCodeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,0BAA0B,CAAC;AACtC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,IAAU;IAArD;;QAKmB,+BAA0B,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAE7E,gCAA2B,GAAG,GAAG,EAAE;YAClD,OAAO,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,CAAC,CAAC;QAEe,gCAA2B,GAAG,CAAC,QAAkB,EAAE,EAAE;YACpE,IAAI,CAAC,IAAI,CAAC,EAAE,mBAAmB,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;IAsCJ,CAAC;IAlDC,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC;IACvD,CAAC;IAYD,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;IAChF,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,eAAe,CAAC,cAAc,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;sBAGL,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,sBAAsB,CAAC;;;;;QAKtF,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;;;0BAIY,IAAI,CAAC,2BAA2B;0BAChC,IAAI,CAAC,2BAA2B;yBACjC,IAAI,CAAC,0BAA0B;;;WAG7C;;;;QAIH,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\n\nconst NS = 'applied-coupon-code-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for managing applied coupon codes (`fx:applied_coupon_code`).\n *\n * @element foxy-applied-coupon-code-form\n * @since 1.21.0\n */\nexport class AppliedCouponCodeForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [({ code: v }) => !!v || 'code:v8n_required'];\n  }\n\n  private readonly __ignoreUsageLimitsOptions = [{ value: 'checked', label: 'option_checked' }];\n\n  private readonly __getIgnoreUsageLimitsValue = () => {\n    return this.form.ignore_usage_limits ? ['checked'] : [];\n  };\n\n  private readonly __setIgnoreUsageLimitsValue = (newValue: string[]) => {\n    this.edit({ ignore_usage_limits: newValue.includes('checked') });\n  };\n\n  get readonlySelector(): BooleanSelector {\n    return this.data ? new BooleanSelector('not=delete') : super.readonlySelector;\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    return new BooleanSelector(`timestamps ${super.hiddenSelector}`);\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-text-control\n        helper-text=${this.t(this.data ? 'code.helper_text_existing' : 'code.helper_text_new')}\n        infer=\"code\"\n      >\n      </foxy-internal-text-control>\n\n      ${this.data\n        ? ''\n        : html`\n            <foxy-internal-checkbox-group-control\n              infer=\"ignore-usage-limits\"\n              class=\"-my-xs\"\n              .getValue=${this.__getIgnoreUsageLimitsValue}\n              .setValue=${this.__setIgnoreUsageLimitsValue}\n              .options=${this.__ignoreUsageLimitsOptions}\n            >\n            </foxy-internal-checkbox-group-control>\n          `}\n\n      <!-- -->\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AppliedCouponCodeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeForm/AppliedCouponCodeForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,0BAA0B,CAAC;AACtC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,IAAU;IACnD,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC;IACvD,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC;IAChF,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,eAAe,CAAC,cAAc,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;wBAIH,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,sBAAsB,CAAC;;;;;;UAMtF,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;;aAGH;;;QAGL,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\n\nconst NS = 'applied-coupon-code-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for managing applied coupon codes (`fx:applied_coupon_code`).\n *\n * @element foxy-applied-coupon-code-form\n * @since 1.21.0\n */\nexport class AppliedCouponCodeForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [({ code: v }) => !!v || 'code:v8n_required'];\n  }\n\n  get readonlySelector(): BooleanSelector {\n    return this.data ? new BooleanSelector('not=delete') : super.readonlySelector;\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    return new BooleanSelector(`timestamps ${super.hiddenSelector}`);\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"\" label=\"\" helper-text=\"\">\n        <foxy-internal-text-control\n          helper-text=${this.t(this.data ? 'code.helper_text_existing' : 'code.helper_text_new')}\n          layout=\"summary-item\"\n          infer=\"code\"\n        >\n        </foxy-internal-text-control>\n\n        ${this.data\n          ? ''\n          : html`\n              <foxy-internal-switch-control infer=\"ignore-usage-limits\">\n              </foxy-internal-switch-control>\n            `}\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
-import '../../internal/InternalCheckboxGroupControl/index';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 import { AppliedCouponCodeForm } from './AppliedCouponCodeForm';

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

@@ -1,4 +1,5 @@
-import "../../internal/InternalCheckboxGroupControl/index.js";
+import "../../internal/InternalSummaryControl/index.js";
+import "../../internal/InternalSwitchControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
 import { AppliedCouponCodeForm } from "./AppliedCouponCodeForm.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeForm/index.ts"],"names":[],"mappings":"AAAA,8DAA2D;AAC3D,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,CAAC;AAE9E,OAAO,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCheckboxGroupControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { AppliedCouponCodeForm } from './AppliedCouponCodeForm';\n\ncustomElements.define('foxy-applied-coupon-code-form', AppliedCouponCodeForm);\n\nexport { AppliedCouponCodeForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedCouponCodeForm/index.ts"],"names":[],"mappings":"AAAA,wDAAqD;AACrD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,qBAAqB,CAAC,CAAC;AAE9E,OAAO,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalSwitchControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { AppliedCouponCodeForm } from './AppliedCouponCodeForm';\n\ncustomElements.define('foxy-applied-coupon-code-form', AppliedCouponCodeForm);\n\nexport { AppliedCouponCodeForm };\n"]}

package/dist/elements/public/ClientForm/ClientForm.js

@@ -23,49 +23,61 @@ export class ClientForm extends Base {
         }
     }
     get readonlySelector() {
-        const alwaysMatch = ['client-secret'];
+        const alwaysMatch = ['general:client-secret'];
         if (this.data || this.in({ busy: 'fetching' }))
-            alwaysMatch.push('client-id');
+            alwaysMatch.push('general:client-id');
         return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.readonlySelector.toString()}`);
     }
     get hiddenSelector() {
         const alwaysMatch = [];
         if (!this.data && !this.in({ busy: 'fetching' }))
-            alwaysMatch.push('client-secret');
+            alwaysMatch.push('general:client-secret');
         return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.hiddenSelector.toString()}`);
     }
     renderBody() {
         return html `
       ${this.renderHeader()}
 
-      <div class="grid grid-cols-2 gap-m">
-        <foxy-internal-text-control class="col-span-2" infer="client-id">
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="client-id">
         </foxy-internal-text-control>
 
-        <foxy-internal-text-control class="col-span-2" infer="client-secret">
+        <foxy-internal-text-control layout="summary-item" infer="client-secret">
         </foxy-internal-text-control>
 
-        <foxy-internal-text-control class="col-span-2" infer="redirect-uri">
+        <foxy-internal-text-control layout="summary-item" infer="redirect-uri">
         </foxy-internal-text-control>
+      </foxy-internal-summary-control>
 
-        <foxy-internal-text-control class="col-span-2" infer="project-name">
+      <foxy-internal-summary-control infer="project">
+        <foxy-internal-text-control layout="summary-item" infer="project-name">
         </foxy-internal-text-control>
 
-        <foxy-internal-text-area-control class="col-span-2" infer="project-description">
-        </foxy-internal-text-area-control>
+        <foxy-internal-text-control layout="summary-item" infer="project-description">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="company">
+        <foxy-internal-text-control layout="summary-item" infer="company-name">
+        </foxy-internal-text-control>
 
-        <foxy-internal-text-control infer="company-name"></foxy-internal-text-control>
-        <foxy-internal-text-control infer="company-url"></foxy-internal-text-control>
+        <foxy-internal-text-control layout="summary-item" infer="company-url">
+        </foxy-internal-text-control>
 
-        <foxy-internal-text-control class="col-span-2" infer="company-logo">
+        <foxy-internal-text-control layout="summary-item" infer="company-logo">
         </foxy-internal-text-control>
+      </foxy-internal-summary-control>
 
-        <foxy-internal-text-control class="col-span-2" infer="contact-name">
+      <foxy-internal-summary-control infer="contact">
+        <foxy-internal-text-control layout="summary-item" infer="contact-name">
         </foxy-internal-text-control>
 
-        <foxy-internal-text-control infer="contact-email"></foxy-internal-text-control>
-        <foxy-internal-text-control infer="contact-phone"></foxy-internal-text-control>
-      </div>
+        <foxy-internal-text-control layout="summary-item" infer="contact-email">
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control layout="summary-item" infer="contact-phone">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"ClientForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/ClientForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,EAAE,GAAG,aAAa,CAAC;AACzB,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAU;IACxC,IAAI,qBAAqB;;QACvB,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,CAAC,IAAI,0CAAE,YAAY,mCAAI,EAAE,CAAC,CAAC;YACnD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;SACzD;QAAC,WAAM;YACN,OAAO,KAAK,CAAC,qBAAqB,CAAC;SACpC;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,eAAe,CAAC,CAAC;QACtC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9E,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACpF,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC5F,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+BnB,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-element';\n\nconst NS = 'client-form';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));\n\n/**\n * Form element for viewing and deleting clients (`fx:client`).\n *\n * @element foxy-client-form\n * @since 1.24.0\n */\nexport class ClientForm extends Base<Data> {\n  get headerSubtitleOptions(): Record<string, unknown> {\n    try {\n      const url = new URL(this.data?.redirect_uri ?? '');\n      return { context: 'with_domain', domain: url.hostname };\n    } catch {\n      return super.headerSubtitleOptions;\n    }\n  }\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysMatch = ['client-secret'];\n    if (this.data || this.in({ busy: 'fetching' })) alwaysMatch.push('client-id');\n    return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.readonlySelector.toString()}`);\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch: string[] = [];\n    if (!this.data && !this.in({ busy: 'fetching' })) alwaysMatch.push('client-secret');\n    return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.hiddenSelector.toString()}`);\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <div class=\"grid grid-cols-2 gap-m\">\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"client-id\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"client-secret\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"redirect-uri\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"project-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-area-control class=\"col-span-2\" infer=\"project-description\">\n        </foxy-internal-text-area-control>\n\n        <foxy-internal-text-control infer=\"company-name\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"company-url\"></foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"company-logo\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"contact-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control infer=\"contact-email\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"contact-phone\"></foxy-internal-text-control>\n      </div>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ClientForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/ClientForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,EAAE,GAAG,aAAa,CAAC;AACzB,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAU;IACxC,IAAI,qBAAqB;;QACvB,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,CAAC,IAAI,0CAAE,YAAY,mCAAI,EAAE,CAAC,CAAC;YACnD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;SACzD;QAAC,WAAM;YACN,OAAO,KAAK,CAAC,qBAAqB,CAAC;SACpC;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,uBAAuB,CAAC,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACtF,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC5F,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC5F,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2CnB,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-element';\n\nconst NS = 'client-form';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));\n\n/**\n * Form element for viewing and deleting clients (`fx:client`).\n *\n * @element foxy-client-form\n * @since 1.24.0\n */\nexport class ClientForm extends Base<Data> {\n  get headerSubtitleOptions(): Record<string, unknown> {\n    try {\n      const url = new URL(this.data?.redirect_uri ?? '');\n      return { context: 'with_domain', domain: url.hostname };\n    } catch {\n      return super.headerSubtitleOptions;\n    }\n  }\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysMatch = ['general:client-secret'];\n    if (this.data || this.in({ busy: 'fetching' })) alwaysMatch.push('general:client-id');\n    return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.readonlySelector.toString()}`);\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch: string[] = [];\n    if (!this.data && !this.in({ busy: 'fetching' })) alwaysMatch.push('general:client-secret');\n    return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.hiddenSelector.toString()}`);\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"general\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"client-id\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"client-secret\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"redirect-uri\">\n        </foxy-internal-text-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"project\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"project-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"project-description\">\n        </foxy-internal-text-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"company\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"company-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"company-url\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"company-logo\">\n        </foxy-internal-text-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"contact\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"contact-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"contact-email\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"contact-phone\">\n        </foxy-internal-text-control>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import '../../internal/InternalTextAreaControl/index';
+import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 import { ClientForm } from './ClientForm';

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

@@ -1,4 +1,4 @@
-import "../../internal/InternalTextAreaControl/index.js";
+import "../../internal/InternalSummaryControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
 import { ClientForm } from "./ClientForm.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/index.ts"],"names":[],"mappings":"AAAA,yDAAsD;AACtD,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '../../internal/InternalTextAreaControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { ClientForm } from './ClientForm';\n\ncustomElements.define('foxy-client-form', ClientForm);\n\nexport { ClientForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/index.ts"],"names":[],"mappings":"AAAA,wDAAqD;AACrD,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { ClientForm } from './ClientForm';\n\ncustomElements.define('foxy-client-form', ClientForm);\n\nexport { ClientForm };\n"]}

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

@@ -19,9 +19,14 @@ export declare class CustomerPortalSettingsForm extends Base<Data> {
     private readonly __sessionLifespanInMinutesSetValue;
     private readonly __allowedOriginsGetValue;
     private readonly __allowedOriginsSetValue;
-    private readonly __featuresOptions;
-    private readonly __featuresGetValue;
-    private readonly __featuresSetValue;
+    private readonly __ssoGetValue;
+    private readonly __ssoSetValue;
+    private readonly __signUpGetValue;
+    private readonly __signUpSetValue;
+    private readonly __frequencyModificationGetValue;
+    private readonly __frequencyModificationSetValue;
+    private readonly __nextDateModificationGetValue;
+    private readonly __nextDateModificationSetValue;
     private readonly __signUpVerificationHcaptchaSiteKeyGetValue;
     private readonly __signUpVerificationHcaptchaSiteKeySetValue;
     private readonly __signUpVerificationHcaptchaSecretKeyGetValue;

package/dist/elements/public/CustomerPortalSettingsForm/CustomerPortalSettingsForm.js

@@ -61,47 +61,60 @@ export class CustomerPortalSettingsForm extends Base {
                     .filter((v, i, a) => a.indexOf(v) === i),
             });
         };
-        this.__featuresOptions = [
-            { value: 'sso', label: 'option_sso' },
-            { value: 'sign-up', label: 'option_sign_up' },
-            { value: 'frequency-modification', label: 'option_frequency_modification' },
-            { value: 'next-date-modification', label: 'option_next_date_modification' },
-        ];
-        this.__featuresGetValue = () => {
-            var _a, _b, _c;
-            const features = [];
-            if (this.form.sso)
-                features.push('sso');
-            if ((_a = this.form.signUp) === null || _a === void 0 ? void 0 : _a.enabled)
-                features.push('sign-up');
-            if ((_b = this.form.subscriptions) === null || _b === void 0 ? void 0 : _b.allowNextDateModification)
-                features.push('next-date-modification');
-            if ((_c = this.form.subscriptions) === null || _c === void 0 ? void 0 : _c.allowFrequencyModification.length) {
-                features.push('frequency-modification');
-            }
-            return features;
+        this.__ssoGetValue = () => {
+            var _a;
+            return (_a = this.form.sso) !== null && _a !== void 0 ? _a : false;
         };
-        this.__featuresSetValue = (features) => {
-            var _a, _b, _c, _d, _e;
-            const fmod = (_b = (_a = this.form.subscriptions) === null || _a === void 0 ? void 0 : _a.allowFrequencyModification) !== null && _b !== void 0 ? _b : [];
+        this.__ssoSetValue = (value) => {
+            this.edit({ sso: value });
+        };
+        this.__signUpGetValue = () => {
+            var _a, _b;
+            return (_b = (_a = this.form.signUp) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : false;
+        };
+        this.__signUpSetValue = (value) => {
+            var _a, _b;
             this.edit({
-                sso: features.includes('sso'),
                 signUp: {
-                    enabled: features.includes('sign-up'),
-                    verification: (_d = (_c = this.form.signUp) === null || _c === void 0 ? void 0 : _c.verification) !== null && _d !== void 0 ? _d : {
+                    enabled: value,
+                    verification: (_b = (_a = this.form.signUp) === null || _a === void 0 ? void 0 : _a.verification) !== null && _b !== void 0 ? _b : {
                         type: 'hcaptcha',
                         siteKey: '',
                         secretKey: '',
                     },
                 },
+            });
+        };
+        this.__frequencyModificationGetValue = () => {
+            var _a, _b;
+            return ((_b = (_a = this.form.subscriptions) === null || _a === void 0 ? void 0 : _a.allowFrequencyModification.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        };
+        this.__frequencyModificationSetValue = (value) => {
+            var _a, _b, _c, _d;
+            const fmod = (_b = (_a = this.form.subscriptions) === null || _a === void 0 ? void 0 : _a.allowFrequencyModification) !== null && _b !== void 0 ? _b : [];
+            this.edit({
                 subscriptions: {
-                    allowFrequencyModification: features.includes('frequency-modification')
+                    allowFrequencyModification: value
                         ? fmod.length === 0
                             ? [{ jsonataQuery: '*', values: [] }]
                             : fmod
                         : [],
-                    allowNextDateModification: features.includes('next-date-modification')
-                        ? ((_e = this.form.subscriptions) === null || _e === void 0 ? void 0 : _e.allowNextDateModification) || []
+                    allowNextDateModification: (_d = (_c = this.form.subscriptions) === null || _c === void 0 ? void 0 : _c.allowNextDateModification) !== null && _d !== void 0 ? _d : false,
+                },
+            });
+        };
+        this.__nextDateModificationGetValue = () => {
+            var _a, _b;
+            return (_b = (_a = this.form.subscriptions) === null || _a === void 0 ? void 0 : _a.allowNextDateModification) !== null && _b !== void 0 ? _b : false;
+        };
+        this.__nextDateModificationSetValue = (value) => {
+            var _a, _b, _c;
+            const fmod = (_b = (_a = this.form.subscriptions) === null || _a === void 0 ? void 0 : _a.allowFrequencyModification) !== null && _b !== void 0 ? _b : [];
+            this.edit({
+                subscriptions: {
+                    allowFrequencyModification: fmod,
+                    allowNextDateModification: value
+                        ? ((_c = this.form.subscriptions) === null || _c === void 0 ? void 0 : _c.allowNextDateModification) || []
                         : false,
                 },
             });
@@ -179,7 +192,7 @@ export class CustomerPortalSettingsForm extends Base {
         var _a, _b, _c;
         const alwaysMatch = ['header:copy-id', super.hiddenSelector.toString()];
         if (!((_a = this.form.signUp) === null || _a === void 0 ? void 0 : _a.enabled)) {
-            alwaysMatch.push('sign-up-verification-hcaptcha-site-key', 'sign-up-verification-hcaptcha-secret-key');
+            alwaysMatch.push('hcaptcha');
         }
         if (!((_b = this.form.subscriptions) === null || _b === void 0 ? void 0 : _b.allowFrequencyModification.length)) {
             alwaysMatch.push('subscriptions-allow-frequency-modification');
@@ -200,28 +213,52 @@ export class CustomerPortalSettingsForm extends Base {
       >
       </foxy-internal-editable-list-control>
 
-      <foxy-internal-checkbox-group-control
-        infer="features"
-        theme="vertical"
-        .getValue=${this.__featuresGetValue}
-        .setValue=${this.__featuresSetValue}
-        .options=${this.__featuresOptions}
-      >
-      </foxy-internal-checkbox-group-control>
+      <foxy-internal-summary-control infer="features">
+        <foxy-internal-switch-control
+          infer="sso"
+          .getValue=${this.__ssoGetValue}
+          .setValue=${this.__ssoSetValue}
+        ></foxy-internal-switch-control>
 
-      <foxy-internal-password-control
-        infer="sign-up-verification-hcaptcha-site-key"
-        .getValue=${this.__signUpVerificationHcaptchaSiteKeyGetValue}
-        .setValue=${this.__signUpVerificationHcaptchaSiteKeySetValue}
-      >
-      </foxy-internal-password-control>
+        <foxy-internal-switch-control
+          infer="sign-up"
+          .getValue=${this.__signUpGetValue}
+          .setValue=${this.__signUpSetValue}
+        >
+        </foxy-internal-switch-control>
 
-      <foxy-internal-password-control
-        infer="sign-up-verification-hcaptcha-secret-key"
-        .getValue=${this.__signUpVerificationHcaptchaSecretKeyGetValue}
-        .setValue=${this.__signUpVerificationHcaptchaSecretKeySetValue}
-      >
-      </foxy-internal-password-control>
+        <foxy-internal-switch-control
+          infer="frequency-modification"
+          .getValue=${this.__frequencyModificationGetValue}
+          .setValue=${this.__frequencyModificationSetValue}
+        >
+        </foxy-internal-switch-control>
+
+        <foxy-internal-switch-control
+          infer="next-date-modification"
+          .getValue=${this.__nextDateModificationGetValue}
+          .setValue=${this.__nextDateModificationSetValue}
+        >
+        </foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="hcaptcha">
+        <foxy-internal-password-control
+          layout="summary-item"
+          infer="sign-up-verification-hcaptcha-site-key"
+          .getValue=${this.__signUpVerificationHcaptchaSiteKeyGetValue}
+          .setValue=${this.__signUpVerificationHcaptchaSiteKeySetValue}
+        >
+        </foxy-internal-password-control>
+
+        <foxy-internal-password-control
+          layout="summary-item"
+          infer="sign-up-verification-hcaptcha-secret-key"
+          .getValue=${this.__signUpVerificationHcaptchaSecretKeyGetValue}
+          .setValue=${this.__signUpVerificationHcaptchaSecretKeySetValue}
+        >
+        </foxy-internal-password-control>
+      </foxy-internal-summary-control>
 
       <foxy-internal-async-list-control
         first="foxy://${this.virtualHost}/form/subscriptions/allowFrequencyModification"
@@ -243,22 +280,26 @@ export class CustomerPortalSettingsForm extends Base {
       >
       </foxy-internal-async-list-control>
 
-      <foxy-internal-frequency-control
-        infer="session-lifespan-in-minutes"
-        max=""
-        .getValue=${this.__sessionLifespanInMinutesGetValue}
-        .setValue=${this.__sessionLifespanInMinutesSetValue}
-        .options=${this.__sessionLifespanInMinutesOptions}
-      >
-      </foxy-internal-frequency-control>
+      <foxy-internal-summary-control infer="security">
+        <foxy-internal-frequency-control
+          layout="summary-item"
+          infer="session-lifespan-in-minutes"
+          max=""
+          .getValue=${this.__sessionLifespanInMinutesGetValue}
+          .setValue=${this.__sessionLifespanInMinutesSetValue}
+          .options=${this.__sessionLifespanInMinutesOptions}
+        >
+        </foxy-internal-frequency-control>
 
-      <foxy-internal-password-control
-        property="jwtSharedSecret"
-        infer="jwt-shared-secret"
-        show-generator
-        .generatorOptions=${this.__jwtSecretGeneratorOptions}
-      >
-      </foxy-internal-password-control>
+        <foxy-internal-password-control
+          layout="summary-item"
+          property="jwtSharedSecret"
+          infer="jwt-shared-secret"
+          show-generator
+          .generatorOptions=${this.__jwtSecretGeneratorOptions}
+        >
+        </foxy-internal-password-control>
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
     `;