@foxy.io/elements 1.29.0-beta.4 → 1.29.0-beta.5

package/dist/cdn/{shared-f07d15d6.js → shared-ffbcfbc5.js}

@@ -1 +1 @@
-import"./shared-df00a537.js";import"./shared-3e03c988.js";import{I as t}from"./shared-7b8ad9c1.js";import{_ as e}from"./shared-0f6e4584.js";import{c as i,h as s,s as r}from"./shared-dc73b9a5.js";import{i as a}from"./shared-9803aa7c.js";import{c as l}from"./shared-4e709717.js";let n,o,d,u,h,p,m=t=>t;customElements.define("foxy-internal-number-control",class extends t{constructor(){super(...arguments),this.layout=null,this.prefix=null,this.suffix=null,this.step=null,this.min=null,this.max=null,this.__isErrorVisible=!1}static get properties(){return e(e({},super.properties),{},{layout:{},prefix:{},suffix:{},step:{type:Number},min:{type:Number},max:{type:Number},__isErrorVisible:{attribute:!1}})}static get styles(){return[...super.styles,i(n||(n=m`input::-webkit-contacts-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input{-moz-appearance:textfield}`))]}reportValidity(){this.__isErrorVisible=!0,super.reportValidity()}renderControl(){var t,e,i;return"summary-item"===this.layout?this.__renderSummaryItemLayout():s(o||(o=m` <vaadin-number-field error-message="${0}" placeholder="${0}" helper-text="${0}" label="${0}" class="w-full" step="${0}" min="${0}" max="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" clear-button-visible @keydown="${0}" @change="${0}"> ${0} ${0} </vaadin-number-field> `),a(this._errorMessage),this.placeholder,this.helperText,this.label,a(null!==(t=this.step)&&void 0!==t?t:void 0),a(null!==(e=this.min)&&void 0!==e?e:void 0),a(null!==(i=this.max)&&void 0!==i?i:void 0),this.disabled,this.readonly,this._checkValidity,this._value,(t=>{var e;return"Enter"===t.key&&(null===(e=this.nucleon)||void 0===e?void 0:e.submit())}),(t=>{const e=t.currentTarget;this._value=parseFloat(e.value)}),this.prefix?s(d||(d=m`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?s(u||(u=m`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}__renderSummaryItemLayout(){var t,i,n;const o={"text-disabled":this.disabled,"text-tertiary":!this.readonly&&!this.disabled,"font-medium":!this.readonly};return s(h||(h=m` <div class="flex items-start gap-m leading-xs"> <div> <label class="text-m text-body" for="input">${0}</label> <p class="text-xs text-secondary">${0}</p> <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> <div class="flex-1 flex items-center gap-xs"> <span class="${0}"> ${0} </span> <input placeholder="${0}" style="min-width:10ch" class="${0}" type="number" step="${0}" min="${0}" max="${0}" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @blur="${0}" @input="${0}"> <span class="${0}"> ${0} </span> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> </div> `),this.label,this.helperText,!this.__isErrorVisible||this.disabled||this.readonly,this._errorMessage,l(e({"text-secondary":this.readonly},o)),this.prefix,this.placeholder,l({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),a(null!==(t=this.step)&&void 0!==t?t:void 0),a(null!==(i=this.min)&&void 0!==i?i:void 0),a(null!==(n=this.max)&&void 0!==n?n:void 0),0===this._value?"":this._value,this.disabled,this.readonly,(t=>{var e;return"Enter"===t.key&&(null===(e=this.nucleon)||void 0===e?void 0:e.submit())}),(()=>this.__isErrorVisible=!0),(t=>{t.stopPropagation();const e=parseFloat(t.target.value);this._value=isNaN(e)?0:e}),l(e({"text-secondary":this.readonly},o)),this.suffix,this.t("clear"),l({"flex-shrink-0 rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,(()=>{this._value=0,this.dispatchEvent(new CustomEvent("clear"))}),r(p||(p=m`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)))}});
+import"./shared-45512693.js";import"./shared-fe167efc.js";import{I as t}from"./shared-f02d1d28.js";import{_ as e}from"./shared-0f6e4584.js";import{c as i,h as s,s as r}from"./shared-dc73b9a5.js";import{i as a}from"./shared-9803aa7c.js";import{c as l}from"./shared-4e709717.js";let n,o,d,u,h,p,m=t=>t;customElements.define("foxy-internal-number-control",class extends t{constructor(){super(...arguments),this.layout=null,this.prefix=null,this.suffix=null,this.step=null,this.min=null,this.max=null,this.__isErrorVisible=!1}static get properties(){return e(e({},super.properties),{},{layout:{},prefix:{},suffix:{},step:{type:Number},min:{type:Number},max:{type:Number},__isErrorVisible:{attribute:!1}})}static get styles(){return[...super.styles,i(n||(n=m`input::-webkit-contacts-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input{-moz-appearance:textfield}`))]}reportValidity(){this.__isErrorVisible=!0,super.reportValidity()}renderControl(){var t,e,i;return"summary-item"===this.layout?this.__renderSummaryItemLayout():s(o||(o=m` <vaadin-number-field error-message="${0}" placeholder="${0}" helper-text="${0}" label="${0}" class="w-full" step="${0}" min="${0}" max="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" clear-button-visible @keydown="${0}" @change="${0}"> ${0} ${0} </vaadin-number-field> `),a(this._errorMessage),this.placeholder,this.helperText,this.label,a(null!==(t=this.step)&&void 0!==t?t:void 0),a(null!==(e=this.min)&&void 0!==e?e:void 0),a(null!==(i=this.max)&&void 0!==i?i:void 0),this.disabled,this.readonly,this._checkValidity,this._value,(t=>{var e;return"Enter"===t.key&&(null===(e=this.nucleon)||void 0===e?void 0:e.submit())}),(t=>{const e=t.currentTarget;this._value=parseFloat(e.value)}),this.prefix?s(d||(d=m`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?s(u||(u=m`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}__renderSummaryItemLayout(){var t,i,n;const o={"text-disabled":this.disabled,"text-tertiary":!this.readonly&&!this.disabled,"font-medium":!this.readonly};return s(h||(h=m` <div class="flex items-start gap-m leading-xs"> <div> <label class="text-m text-body" for="input">${0}</label> <p class="text-xs text-secondary">${0}</p> <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> <div class="flex-1 flex items-center gap-xs"> <span class="${0}"> ${0} </span> <input placeholder="${0}" style="min-width:10ch" class="${0}" type="number" step="${0}" min="${0}" max="${0}" id="input" .value="${0}" ?disabled="${0}" ?readonly="${0}" @keydown="${0}" @blur="${0}" @input="${0}"> <span class="${0}"> ${0} </span> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> </div> `),this.label,this.helperText,!this.__isErrorVisible||this.disabled||this.readonly,this._errorMessage,l(e({"text-secondary":this.readonly},o)),this.prefix,this.placeholder,l({"w-full appearance-none text-right bg-transparent transition-colors":!0,"text-m rounded-s focus-outline-none":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"font-medium":!this.readonly}),a(null!==(t=this.step)&&void 0!==t?t:void 0),a(null!==(i=this.min)&&void 0!==i?i:void 0),a(null!==(n=this.max)&&void 0!==n?n:void 0),0===this._value?"":this._value,this.disabled,this.readonly,(t=>{var e;return"Enter"===t.key&&(null===(e=this.nucleon)||void 0===e?void 0:e.submit())}),(()=>this.__isErrorVisible=!0),(t=>{t.stopPropagation();const e=parseFloat(t.target.value);this._value=isNaN(e)?0:e}),l(e({"text-secondary":this.readonly},o)),this.suffix,this.t("clear"),l({"flex-shrink-0 rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,(()=>{this._value=0,this.dispatchEvent(new CustomEvent("clear"))}),r(p||(p=m`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)))}});

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

@@ -3,6 +3,7 @@
     "title_existing": "Client #{{ id }}",
     "title_new": "New client",
     "subtitle": "",
+    "subtitle_with_domain": "{{ domain }}",
     "copy-id": {
       "failed_to_copy": "Failed to copy",
       "click_to_copy": "Copy ID",

package/dist/cdn/translations/native-integration-form/en.json

@@ -248,12 +248,6 @@
     "helper_text": "The name of the inventory field in your products collection.",
     "v8n_required": "Please enter an inventory field name."
   },
-  "webflow-auth": {
-    "label": "Token",
-    "placeholder": "Required",
-    "helper_text": "The OAuth2 authorization token for your Webflow site.",
-    "v8n_required": "Please enter an authorization token."
-  },
   "zapier-event": {
     "label": "Event",
     "placeholder": "Defined by Zapier",

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

@@ -253,10 +253,9 @@
   "custom-display-id-config-transaction-journal-entries-void-example": "When voided:",
   "custom-display-id-config-transaction-journal-entries-refund-example": "When refunded:",
   "webhook-url": {
-    "label": "XML webhook endpoint",
-    "placeholder": "https://example.com/xml-webhook",
-    "helper_text": "Foxy will encrypt order info and POST it to this URL on each purchase as XML. When using this webhook, make sure to configure the encryption key for your store.",
-    "v8n_required": "Please enter the XML webhook endpoint",
+    "label": "XML Datafeed",
+    "placeholder": "https://example.com/my-xml-datafeed",
+    "helper_text": "The XML datafeed is a deprecated webhook that should only be used for third-party integrations that still require it. For any new integrations where you need to trigger a webhook for each transaction on your store, we strongly recommend using the JSON webhooks.",
     "v8n_too_long": "Please shorten this URL to 300 characters or less"
   },
   "webhook-key-cart-signing": {

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

@@ -3,6 +3,8 @@
     "title_new": "New webhook",
     "title_existing": "Webhook #{{ id }}",
     "subtitle": "",
+    "subtitle_webflow": "Webflow webhook",
+    "subtitle_zapier": "Zapier webhook",
     "subtitle_transaction": "Transaction webhook",
     "subtitle_subscription": "Subscription webhook",
     "subtitle_customer": "Customer webhook",
@@ -26,17 +28,6 @@
     "v8n_required": "Webhook name is required",
     "v8n_too_long": "Webhook name cannot exceed 255 characters"
   },
-  "format": {
-    "label": "Format",
-    "helper_text": "The type of this webhook.",
-    "v8n_required": "Please select a format"
-  },
-  "version": {
-    "label": "Version",
-    "placeholder": "2",
-    "helper_text": "Version of the webhook. Enter 2 for latest or use other if you have specific instructions from Foxy.",
-    "v8n_required": "Version is required"
-  },
   "url": {
     "label": "URL",
     "placeholder": "https://example.com/webhook",
@@ -53,6 +44,7 @@
     "label": "Encryption key",
     "placeholder": "HNL978XVXXCM66DM5N2T78D5MT66BC6D",
     "helper_text": "The JSON webhooks are encrypted in certain situations. This key is also used to generate a signature to verify the integrity of the payload.",
+    "v8n_required": "Encryption key is required. Use the ✨ button to generate a new key.",
     "v8n_too_long": "Encryption key cannot exceed 1000 characters"
   },
   "event-resource": {

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js

@@ -150,7 +150,7 @@ div:has(> select)::after{
             'flex': !this.readonly,
             'hidden': this.readonly,
             'rounded-s border border-contrast-10': isSummaryItem,
-            'mt-s': this._value.length > 0,
+            'mt-s': isSummaryItem && this._value.length > 0,
         })}
           >
             ${this.range

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

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      options: { type: Array },\n      layout: {},\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  options: Option[] = [];\n\n  layout: 'standalone' | 'summary-item' | null = null;\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const isSummaryItem = this.layout === 'summary-item';\n    const isInteractive = !this.disabled && !this.readonly;\n\n    const deleteButtonClass = classMap({\n      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n      'mr-xs': !isSummaryItem,\n    });\n\n    const itemClass = classMap({\n      'transition-colors flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,\n      'pl-s border border-contrast-10 rounded-s': isSummaryItem,\n      'ml-s h-m': !isSummaryItem,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._value];\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split('\\n')\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'font-medium text-s': !isSummaryItem,\n            'text-m': isSummaryItem,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors': true,\n            'border border-contrast-10 rounded': !isSummaryItem,\n            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,\n          })}\n        >\n          <ol\n            class=${classMap({\n              'transition-colors font-medium': true,\n              'divide-y divide-contrast-10': !isSummaryItem,\n              'flex flex-wrap gap-s': isSummaryItem,\n            })}\n          >\n            ${repeat(\n              this._value,\n              item => item.value,\n              (item, index) => {\n                return html`\n                  <li class=${itemClass}>\n                    <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                    <button\n                      aria-label=${this.t('delete')}\n                      class=${deleteButtonClass}\n                      ?disabled=${this.disabled}\n                      @click=${() => {\n                        this._value = this._value.filter((_, i) => i !== index);\n                      }}\n                    >\n                      <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                    </button>\n                  </li>\n                `;\n              }\n            )}\n          </ol>\n\n          <div\n            style=${isSummaryItem\n              ? ''\n              : this._value.length === 0\n              ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n              : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n            class=${classMap({\n              'transition-colors pl-s h-m flex items-center gap-xs': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n              'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,\n              'bg-contrast-5': !isSummaryItem && this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n              'rounded-s border border-contrast-10': isSummaryItem,\n              'mt-s': this._value.length > 0,\n            })}\n          >\n            ${this.range\n              ? html`\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n                  </foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[0] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newFrom = evt.clipboardData?.getData('text') ?? '';\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[1] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newTo = evt.clipboardData?.getData('text') ?? '';\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `\n              : html`\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                        true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n                      this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `}\n\n            <div\n              class=${classMap({\n                'relative': true,\n                'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n                'text-disabled': this.disabled,\n              })}\n              ?hidden=${this.units.length === 0}\n            >\n              <select\n                style=\"min-width: 8rem\"\n                class=${classMap({\n                  'transition-colors rounded-s mx-xs px-s': true,\n                  'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                  'hover-bg-contrast focus-bg-primary': !this.disabled,\n                })}\n                ?disabled=${this.disabled}\n              >\n                ${this.units.map(({ label, value }) => {\n                  return html`<option value=${value}>${label ?? value}</option>`;\n                })}\n              </select>\n            </div>\n\n            <datalist id=\"list\">\n              ${this.options.map(({ label, value }) => {\n                if (this._value.some(item => item.value === value)) return;\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </datalist>\n\n            <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                  'flex items-center justify-center rounded-s transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                  'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                  'focus-ring-2': !isAddButtonDisabled,\n                })}\n                ?disabled=${isAddButtonDisabled}\n                @click=${addItem}\n              >\n                <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors text-xs mt-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'text-secondary': isSummaryItem,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    return (super._value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    super._value = newValue;\n  }\n}\n"]}
+{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      inputParams: { attribute: false },\n      options: { type: Array },\n      layout: {},\n      units: { type: Array },\n      range: {},\n      __isErrorVisible: { attribute: false },\n      __newItem: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        div:has(> select) {\n          position: relative;\n        }\n\n        div:has(> select)::after {\n          content: ' ';\n          position: absolute;\n          top: 50%;\n          margin-top: -2px;\n          right: 10px;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-top: 5px solid currentColor;\n        }\n      `,\n    ];\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  options: Option[] = [];\n\n  layout: 'standalone' | 'summary-item' | null = null;\n\n  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const isSummaryItem = this.layout === 'summary-item';\n    const isInteractive = !this.disabled && !this.readonly;\n\n    const deleteButtonClass = classMap({\n      'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n      'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n      'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n      'cursor-default text-disabled': this.disabled,\n      'flex items-center justify-center': !this.readonly,\n      'hidden': this.readonly,\n      'mr-xs': !isSummaryItem,\n    });\n\n    const itemClass = classMap({\n      'transition-colors flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,\n      'pl-s border border-contrast-10 rounded-s': isSummaryItem,\n      'ml-s h-m': !isSummaryItem,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._value];\n      const unit = this.renderRoot.querySelector('select')?.value;\n\n      this.__newItem\n        .split('\\n')\n        .map(code => code.trim())\n        .filter(code => code.length > 0)\n        .forEach(value => {\n          if (!newValue.some(item => item.value === value)) {\n            newValue.push({ value, unit });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'font-medium text-s': !isSummaryItem,\n            'text-m': isSummaryItem,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors': true,\n            'border border-contrast-10 rounded': !isSummaryItem,\n            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,\n          })}\n        >\n          <ol\n            class=${classMap({\n              'transition-colors font-medium': true,\n              'divide-y divide-contrast-10': !isSummaryItem,\n              'flex flex-wrap gap-s': isSummaryItem,\n            })}\n          >\n            ${repeat(\n              this._value,\n              item => item.value,\n              (item, index) => {\n                return html`\n                  <li class=${itemClass}>\n                    <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n                    <button\n                      aria-label=${this.t('delete')}\n                      class=${deleteButtonClass}\n                      ?disabled=${this.disabled}\n                      @click=${() => {\n                        this._value = this._value.filter((_, i) => i !== index);\n                      }}\n                    >\n                      <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n                    </button>\n                  </li>\n                `;\n              }\n            )}\n          </ol>\n\n          <div\n            style=${isSummaryItem\n              ? ''\n              : this._value.length === 0\n              ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n              : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n            class=${classMap({\n              'transition-colors pl-s h-m flex items-center gap-xs': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n              'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,\n              'bg-contrast-5': !isSummaryItem && this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n              'rounded-s border border-contrast-10': isSummaryItem,\n              'mt-s': isSummaryItem && this._value.length > 0,\n            })}\n          >\n            ${this.range\n              ? html`\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n                  </foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[0] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newFrom = evt.clipboardData?.getData('text') ?? '';\n                      const oldTo = this.__newItem.split('..')[1] ?? '';\n                      this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n\n                  <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem.split('..')[1] ?? '')}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n\n                      const newTo = evt.clipboardData?.getData('text') ?? '';\n                      const oldFrom = this.__newItem.split('..')[0] ?? '';\n                      this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `\n              : html`\n                  <input\n                    placeholder=${this.placeholder}\n                    class=${classMap({\n                      'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n                        true,\n                      'text-disabled': this.disabled,\n                    })}\n                    list=\"list\"\n                    ...=${spread(this.inputParams)}\n                    .value=${live(this.__newItem)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n                    @change=${(evt: Event) => evt.stopPropagation()}\n                    @input=${(evt: InputEvent) => {\n                      this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n                    }}\n                    @paste=${(evt: ClipboardEvent) => {\n                      evt.preventDefault();\n                      this.__newItem = evt.clipboardData?.getData('text') ?? '';\n                      addItem();\n                    }}\n                    @blur=${() => {\n                      this.__isErrorVisible = true;\n                    }}\n                  />\n                `}\n\n            <div\n              class=${classMap({\n                'relative': true,\n                'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n                'text-disabled': this.disabled,\n              })}\n              ?hidden=${this.units.length === 0}\n            >\n              <select\n                style=\"min-width: 8rem\"\n                class=${classMap({\n                  'transition-colors rounded-s mx-xs px-s': true,\n                  'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n                  'hover-bg-contrast focus-bg-primary': !this.disabled,\n                })}\n                ?disabled=${this.disabled}\n              >\n                ${this.units.map(({ label, value }) => {\n                  return html`<option value=${value}>${label ?? value}</option>`;\n                })}\n              </select>\n            </div>\n\n            <datalist id=\"list\">\n              ${this.options.map(({ label, value }) => {\n                if (this._value.some(item => item.value === value)) return;\n                return html`<option value=${value}>${label ?? value}</option>`;\n              })}\n            </datalist>\n\n            <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n                  'flex items-center justify-center rounded-s transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n                  'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n                  'focus-ring-2': !isAddButtonDisabled,\n                })}\n                ?disabled=${isAddButtonDisabled}\n                @click=${addItem}\n              >\n                <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-colors text-xs mt-xs': true,\n            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n            'text-disabled': !isSummaryItem && this.disabled,\n            'text-secondary': isSummaryItem,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _value(): Item[] {\n    return (super._value ?? []) as Item[];\n  }\n\n  protected set _value(newValue: Item[]) {\n    super._value = newValue;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.d.ts

@@ -1,4 +1,5 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { GeneratorOptions } from './generateRandomPassword';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic password box.
@@ -8,10 +9,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalPasswordControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
-    generatorOptions: null | {
-        length?: number;
-        charset?: string;
-    };
+    generatorOptions: null | GeneratorOptions;
     /** If true, renders the password generator button. */
     showGenerator: boolean;
     renderControl(): TemplateResult;

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

@@ -1 +1 @@
-{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QASE,qBAAgB,GAAiD,IAAI,CAAC;QAEtE,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IAjEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;YAClE,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAOD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,OAAC,IAAI,CAAC,gBAAgB,mCAAI,KAAK,CAAC,CAAC,CAAC;YACtE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      generatorOptions: { type: Object, attribute: 'generator-options' },\n      showGenerator: { type: Boolean, attribute: 'show-generator' },\n    };\n  }\n\n  generatorOptions: null | { length?: number; charset?: string } = null;\n\n  /** If true, renders the password generator button. */\n  showGenerator = false;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n        ${this.showGenerator ? this.__renderGenerator() : ''}\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n\n  private __renderGenerator(): TemplateResult {\n    return html`\n      <div\n        data-testid=\"generator\"\n        class=${classMap({\n          'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n          'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n          'text-contrast-20': this.disabled || this.readonly,\n        })}\n        slot=\"suffix\"\n        @click=${() => {\n          this._value = generateRandomPassword(this.generatorOptions ?? void 0);\n          const field = this.renderRoot.querySelector('vaadin-password-field');\n          // @ts-expect-error: this is a private method but it's ok since the version is fixed\n          field?._setPasswordVisible(true);\n        }}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QASE,qBAAgB,GAA4B,IAAI,CAAC;QAEjD,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IAjEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;YAClE,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAOD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,OAAC,IAAI,CAAC,gBAAgB,mCAAI,KAAK,CAAC,CAAC,CAAC;YACtE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\nimport type { GeneratorOptions } from './generateRandomPassword';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      generatorOptions: { type: Object, attribute: 'generator-options' },\n      showGenerator: { type: Boolean, attribute: 'show-generator' },\n    };\n  }\n\n  generatorOptions: null | GeneratorOptions = null;\n\n  /** If true, renders the password generator button. */\n  showGenerator = false;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n        ${this.showGenerator ? this.__renderGenerator() : ''}\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n\n  private __renderGenerator(): TemplateResult {\n    return html`\n      <div\n        data-testid=\"generator\"\n        class=${classMap({\n          'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n          'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n          'text-contrast-20': this.disabled || this.readonly,\n        })}\n        slot=\"suffix\"\n        @click=${() => {\n          this._value = generateRandomPassword(this.generatorOptions ?? void 0);\n          const field = this.renderRoot.querySelector('vaadin-password-field');\n          // @ts-expect-error: this is a private method but it's ok since the version is fixed\n          field?._setPasswordVisible(true);\n        }}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.d.ts

@@ -1,4 +1,6 @@
-export declare function generateRandomPassword(opts?: {
+export declare type GeneratorOptions = {
     length?: number;
     charset?: string;
-}): string;
+    separator?: string;
+};
+export declare function generateRandomPassword(opts?: GeneratorOptions): string;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js

@@ -1,11 +1,12 @@
 export function generateRandomPassword(opts) {
-    var _a, _b;
-    const charset = (_a = opts === null || opts === void 0 ? void 0 : opts.charset) !== null && _a !== void 0 ? _a : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const length = (_b = opts === null || opts === void 0 ? void 0 : opts.length) !== null && _b !== void 0 ? _b : 18;
+    var _a, _b, _c;
+    const separator = (_a = opts === null || opts === void 0 ? void 0 : opts.separator) !== null && _a !== void 0 ? _a : '-';
+    const charset = (_b = opts === null || opts === void 0 ? void 0 : opts.charset) !== null && _b !== void 0 ? _b : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const length = (_c = opts === null || opts === void 0 ? void 0 : opts.length) !== null && _c !== void 0 ? _c : 18;
     let result = '';
     for (let i = 0; i < length; i++) {
-        if (i > 0 && i % 6 === 0)
-            result += '-';
+        if (separator && i > 0 && i % 6 === 0)
+            result += separator;
         result += charset[Math.floor(Math.random() * charset.length)];
     }
     return result;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,sBAAsB,CAAC,IAA4C;;IACjF,MAAM,OAAO,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,gEAAgE,CAAC;IAClG,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,EAAE,CAAC;IAClC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,GAAG,CAAC;QACxC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function generateRandomPassword(opts?: { length?: number; charset?: string }): string {\n  const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  const length = opts?.length ?? 18;\n  let result = '';\n\n  for (let i = 0; i < length; i++) {\n    if (i > 0 && i % 6 === 0) result += '-';\n    result += charset[Math.floor(Math.random() * charset.length)];\n  }\n\n  return result;\n}\n"]}
+{"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,sBAAsB,CAAC,IAAuB;;IAC5D,MAAM,SAAS,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,mCAAI,GAAG,CAAC;IACzC,MAAM,OAAO,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,gEAAgE,CAAC;IAClG,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,EAAE,CAAC;IAClC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,IAAI,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,SAAS,CAAC;QAC3D,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export type GeneratorOptions = { length?: number; charset?: string; separator?: string };\n\nexport function generateRandomPassword(opts?: GeneratorOptions): string {\n  const separator = opts?.separator ?? '-';\n  const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  const length = opts?.length ?? 18;\n  let result = '';\n\n  for (let i = 0; i < length; i++) {\n    if (separator && i > 0 && i % 6 === 0) result += separator;\n    result += charset[Math.floor(Math.random() * charset.length)];\n  }\n\n  return result;\n}\n"]}

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

@@ -12,6 +12,7 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * @since 1.24.0
  */
 export declare class ClientForm extends Base<Data> {
+    get headerSubtitleOptions(): Record<string, unknown>;
     get readonlySelector(): BooleanSelector;
     get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;

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

@@ -12,6 +12,16 @@ const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
  * @since 1.24.0
  */
 export class ClientForm extends Base {
+    get headerSubtitleOptions() {
+        var _a, _b;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.redirect_uri) !== null && _b !== void 0 ? _b : '');
+            return { context: 'with_domain', domain: url.hostname };
+        }
+        catch (_c) {
+            return super.headerSubtitleOptions;
+        }
+    }
     get readonlySelector() {
         const alwaysMatch = ['client-secret'];
         if (this.data || this.in({ busy: 'fetching' }))

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,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 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,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"]}

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

@@ -1,6 +1,6 @@
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
+import type { Data } from './types';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js

@@ -1,7 +1,7 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
 import * as defaults from "./defaults.js";
 import memoize from 'lodash-es/memoize';
 const NS = 'native-integration-form';
@@ -494,23 +494,23 @@ export class NativeIntegrationForm extends Base {
     __renderWebhookConfig() {
         var _a, _b;
         return html `
-      <p
-        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
-        class="rounded bg-error-10 text-error font-medium"
-      >
-        <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
-        <br />
-        <br />
-        <a
-          target="_blank"
-          class="text-body rounded hover-underline hover-cursor-pointer focus-outline-none focus-ring-2 focus-ring-error-50"
-          lang="en"
-          rel="noopener"
-          href="https://www.foxy.io/blog/new-feature-json-webhook/"
-        >
-          <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
-        </a>
-      </p>
+      <div
+        class="flex items-start border border-error rounded"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+        <p>
+          <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
+          <br />
+          <a
+            target="_blank"
+            class="mt-xs inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+            href="https://admin.foxycart.com"
+          >
+            <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
+          </a>
+        </p>
+      </div>
 
       ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.service) === 'json'
             ? this.__renderWebhookJsonConfig()
@@ -643,13 +643,6 @@ export class NativeIntegrationForm extends Base {
         >
         </foxy-internal-text-control>
       </div>
-
-      <foxy-internal-password-control
-        infer="webflow-auth"
-        .getValue=${this.__createConfigGetterFor('auth')}
-        .setValue=${this.__createConfigSetterFor('auth')}
-      >
-      </foxy-internal-password-control>
     `;
     }
     __renderZapierConfig() {