@foxy.io/elements 1.18.0-beta.14 → 1.18.0-beta.15

package/dist/elements/private/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/elements/private/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, css } from 'lit-element';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { API } from '../../public/NucleonElement/API';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from './DialogHideEvent';\nimport { DialogShowEvent } from './DialogShowEvent';\nimport { DialogWindow } from './DialogWindow';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(InferrableMixin(LitElement))));\n\nexport abstract class Dialog extends Base {\n  /**\n   * Selector of an element that will serve as a mounting point to all dialog windows.\n   * It's `<body>` by default, but you can add your own element with `id=\"foxy-dialog-windows-host\"`\n   * anywhere in the light DOM to render dialogs there.\n   */\n  static readonly dialogWindowsHost = '#foxy-dialog-windows-host, body';\n\n  /** Map of all dialog windows linked to their dialog elements. */\n  static readonly dialogWindows = new WeakMap<Dialog, DialogWindow>();\n\n  /** List of all currently open dialogs. */\n  static readonly openDialogs: Dialog[] = [];\n\n  /**\n   * Instance of this event will be dispatched on a dialog when it finishes entering the screen.\n   * This event does not bubble and can't cross shadow DOM boundary.\n   */\n  static readonly ShowEvent = DialogShowEvent;\n\n  /**\n   * Instance of this event will be dispatched on a dialog when it finishes leaving the screen.\n   * This event does not bubble and can't cross shadow DOM boundary.\n   */\n  static readonly HideEvent = DialogHideEvent;\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __connected: { attribute: false },\n      __visible: { attribute: false },\n      centered: { type: Boolean },\n      closable: { type: Boolean },\n      editable: { type: Boolean },\n      header: { type: String },\n      alert: { type: Boolean },\n      open: { type: Boolean, noAccessor: true },\n    };\n  }\n\n  /** @readonly */\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .grid-cols-header {\n          grid-template-columns: 1fr auto 1fr;\n        }\n\n        .scale-85 {\n          --tw-scale-x: 0.85;\n          --tw-scale-y: 0.85;\n        }\n      `,\n    ];\n  }\n\n  /** When true, renders Close button in the header. */\n  closable = false;\n\n  /** When true, renders Save button in the header. */\n  editable = false;\n\n  /** Header text or a i18next key for it. */\n  header = '';\n\n  /** When true, centers a dialog on the screen and does not animate the stack under. */\n  alert = false;\n\n  private __returnFocusTo?: HTMLElement;\n\n  private __handleKeyDown = (evt: KeyboardEvent) => {\n    if (evt.key === 'Escape' && Dialog.openDialogs[0] === this && this.closable)\n      this.hide(this.editable);\n  };\n\n  private __connected = false;\n\n  private __visible = false;\n\n  /** True if dialog is mounted and has finished entering the screen. */\n  get open(): boolean {\n    return this.__visible && this.__connected;\n  }\n\n  set open(newValue: boolean) {\n    newValue === this.open ? void 0 : newValue ? this.show() : this.hide(this.editable);\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    addEventListener('keydown', this.__handleKeyDown);\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    removeEventListener('keydown', this.__handleKeyDown);\n\n    Dialog.dialogWindows.get(this)?.remove();\n    Dialog.dialogWindows.delete(this);\n  }\n\n  /** @readonly */\n  createRenderRoot(): Element | ShadowRoot {\n    const dialogWindow = new DialogWindow();\n    const dialogWindowsHosts = document.querySelectorAll(Dialog.dialogWindowsHost);\n    const dialogWindowsHost = Array.from(dialogWindowsHosts).pop();\n\n    dialogWindow.addEventListener('fetch', (evt: Event) => {\n      if (evt instanceof FetchEvent) {\n        evt.stopImmediatePropagation();\n        evt.preventDefault();\n        evt.respondWith(new API(this).fetch(evt.request));\n      }\n    });\n\n    dialogWindowsHost?.appendChild(dialogWindow);\n    Dialog.dialogWindows.set(this, dialogWindow);\n\n    return dialogWindow.shadowRoot!;\n  }\n\n  /** @readonly */\n  render(content?: () => TemplateResult): TemplateResult {\n    if (!this.__connected) return html``;\n\n    const isFirst = Dialog.openDialogs[0] === this;\n    const isSecond = Dialog.openDialogs[1] === this;\n    const isThird = Dialog.openDialogs[2] === this;\n    const isForthAndGreater = !isFirst && !isSecond && !isThird;\n\n    return html`\n      <div\n        class=${classMap({ 'z-50 fixed inset-0': true, 'pointer-events-none': !this.__visible })}\n      >\n        <div\n          id=\"backdrop\"\n          class=${classMap({\n            'select-none ease-in-out transition duration-500 absolute inset-0 bg-shade-50 focus-outline-none':\n              true,\n            'opacity-100': this.__visible,\n            'opacity-0': !this.__visible,\n          })}\n          tabindex=\"-1\"\n          @click=${() => this.closable && this.hide(this.editable)}\n        ></div>\n\n        <div\n          role=\"dialog\"\n          aria-labelledby=\"dialog-title\"\n          class=${classMap({\n            'transform origin-bottom ease-in-out transition duration-500 relative h-full ml-auto sm-origin-center sm-max-w-modal':\n              true,\n            'flex justify-center items-end sm-items-center mr-auto': this.alert,\n            'translate-y-full sm-translate-y-0': !this.__visible,\n            'sm-translate-x-full': !this.alert && !this.__visible,\n            'sm-opacity-0 sm-scale-110': this.alert && !this.__visible,\n            'translate-y-0 translate-x-0': isFirst && this.__visible,\n            'scale-95 -translate-y-s sm-translate-y-0': isSecond && this.__visible,\n            'scale-90 -translate-y-m sm-translate-y-0': isThird && this.__visible,\n            'opacity-0 scale-85 -translate-y-l sm-translate-y-0':\n              isForthAndGreater && this.__visible,\n          })}\n        >\n          <div\n            class=${classMap({\n              'overflow-hidden flex flex-col bg-base rounded-t-l sm-rounded-b-l': true,\n              'absolute inset-0 mt-xl sm-m-xl': !this.alert,\n              'shadow-xxl': this.__visible,\n            })}\n          >\n            <div\n              class=\"h-l grid grid-cols-header text-m font-lumo font-medium border-b border-contrast-10\"\n            >\n              ${this.closable && !this.hiddenSelector.matches('close-button', true)\n                ? html`\n                    <vaadin-button\n                      id=\"close-button\"\n                      theme=\"tertiary-inline\"\n                      class=\"mr-auto m-s px-s\"\n                      ?disabled=${this.disabledSelector.matches('close-button', true)}\n                      @click=${() => this.hide(this.editable)}\n                    >\n                      <foxy-i18n\n                        lang=${this.lang}\n                        key=${this.editable ? 'cancel' : 'close'}\n                        ns=${this.ns}\n                      >\n                      </foxy-i18n>\n                    </vaadin-button>\n                  `\n                : html`<div></div>`}\n\n              <h1 id=\"dialog-title\" class=\"truncate self-center text-center\">\n                <foxy-i18n ns=${this.ns} lang=${this.lang} key=${this.header}></foxy-i18n>\n              </h1>\n\n              ${this.editable && !this.hiddenSelector.matches('save-button', true)\n                ? html`\n                    <vaadin-button\n                      data-testid=\"save-button\"\n                      ?disabled=${this.disabledSelector.matches('save-button', true)}\n                      theme=\"primary\"\n                      class=\"ml-auto h-auto min-h-0 min-w-0 m-xs px-m\"\n                      @click=${this.save}\n                    >\n                      <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"save\"></foxy-i18n>\n                    </vaadin-button>\n                  `\n                : html`<div></div>`}\n            </div>\n\n            <div class=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n              <div class=\"p-m relative\">${content?.()}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Hides the dialog. Returns a promise that resolves when the dialog\n   * finishes leaving the screen.\n   *\n   * @param cancelled Set this to `true` if closing an editable dialog without saving changes.\n   */\n  async hide(cancelled = false): Promise<void> {\n    this.__returnFocusTo?.focus();\n\n    await this.__setOpenDialogs(Dialog.openDialogs.filter(d => d !== this));\n    await this.__setConnected(false);\n\n    this.dispatchEvent(new Dialog.HideEvent(!!cancelled));\n  }\n\n  /**\n   * Shows the dialog. Returns a promise that resolves when the dialog\n   * finishes entering the screen.\n   *\n   * @param returnFocusTo If provided, the dialog will call `.focus()` on that element once it's closed.\n   */\n  async show(returnFocusTo?: HTMLElement): Promise<void> {\n    this.__returnFocusTo = returnFocusTo;\n\n    await this.__setConnected(true);\n    await this.__setOpenDialogs([this, ...Dialog.openDialogs]);\n\n    const closeButton = this.renderRoot.querySelector('#close-button') as HTMLButtonElement;\n    closeButton?.focus();\n\n    this.dispatchEvent(new Dialog.ShowEvent());\n  }\n\n  /** Alias for `dialog.hide(false)`. */\n  async save(): Promise<void> {\n    await this.hide(false);\n  }\n\n  private async __setOpenDialogs(newValue: Dialog[]) {\n    Dialog.openDialogs.length = 0;\n    Dialog.openDialogs.push(...newValue);\n\n    await Promise.all([\n      // animate dialog stack\n      Promise.all(Dialog.openDialogs.map(dialog => dialog.requestUpdate())),\n\n      // trigger exit transition\n      new Promise(resolve => {\n        const backdrop = this.renderRoot.querySelector('#backdrop') as HTMLDivElement;\n        backdrop.addEventListener('transitionend', resolve, { once: true });\n        this.__visible = Dialog.openDialogs.includes(this);\n      }),\n    ]);\n  }\n\n  private async __setConnected(newValue: boolean) {\n    this.__connected = newValue;\n    await this.updateComplete.then(() => this.getBoundingClientRect());\n  }\n}\n\ncustomElements.define('foxy-dialog-window', DialogWindow);\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/elements/private/Dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, css } from 'lit-element';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { API } from '../../public/NucleonElement/API';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from './DialogHideEvent';\nimport { DialogShowEvent } from './DialogShowEvent';\nimport { DialogWindow } from './DialogWindow';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(InferrableMixin(LitElement))));\n\nexport abstract class Dialog extends Base {\n  /**\n   * Selector of an element that will serve as a mounting point to all dialog windows.\n   * It's `<body>` by default, but you can add your own element with `id=\"foxy-dialog-windows-host\"`\n   * anywhere in the light DOM to render dialogs there.\n   */\n  static readonly dialogWindowsHost = '#foxy-dialog-windows-host, body';\n\n  /** Map of all dialog windows linked to their dialog elements. */\n  static readonly dialogWindows = new WeakMap<Dialog, DialogWindow>();\n\n  /** List of all currently open dialogs. */\n  static readonly openDialogs: Dialog[] = [];\n\n  /**\n   * Instance of this event will be dispatched on a dialog when it finishes entering the screen.\n   * This event does not bubble and can't cross shadow DOM boundary.\n   */\n  static readonly ShowEvent = DialogShowEvent;\n\n  /**\n   * Instance of this event will be dispatched on a dialog when it finishes leaving the screen.\n   * This event does not bubble and can't cross shadow DOM boundary.\n   */\n  static readonly HideEvent = DialogHideEvent;\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __connected: { attribute: false },\n      __visible: { attribute: false },\n      centered: { type: Boolean },\n      closable: { type: Boolean },\n      editable: { type: Boolean },\n      header: { type: String },\n      alert: { type: Boolean },\n      wide: { type: Boolean },\n      open: { type: Boolean, noAccessor: true },\n    };\n  }\n\n  /** @readonly */\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .grid-cols-header {\n          grid-template-columns: 1fr auto 1fr;\n        }\n\n        .scale-85 {\n          --tw-scale-x: 0.85;\n          --tw-scale-y: 0.85;\n        }\n      `,\n    ];\n  }\n\n  /** When true, renders Close button in the header. */\n  closable = false;\n\n  /** When true, renders Save button in the header. */\n  editable = false;\n\n  /** Header text or a i18next key for it. */\n  header = '';\n\n  /** When true, centers a dialog on the screen and does not animate the stack under. */\n  alert = false;\n\n  /** When true, dialog window will a larger maximum width. */\n  wide = false;\n\n  private __returnFocusTo?: HTMLElement;\n\n  private __handleKeyDown = (evt: KeyboardEvent) => {\n    if (evt.key === 'Escape' && Dialog.openDialogs[0] === this && this.closable)\n      this.hide(this.editable);\n  };\n\n  private __connected = false;\n\n  private __visible = false;\n\n  /** True if dialog is mounted and has finished entering the screen. */\n  get open(): boolean {\n    return this.__visible && this.__connected;\n  }\n\n  set open(newValue: boolean) {\n    newValue === this.open ? void 0 : newValue ? this.show() : this.hide(this.editable);\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    addEventListener('keydown', this.__handleKeyDown);\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    removeEventListener('keydown', this.__handleKeyDown);\n\n    Dialog.dialogWindows.get(this)?.remove();\n    Dialog.dialogWindows.delete(this);\n  }\n\n  /** @readonly */\n  createRenderRoot(): Element | ShadowRoot {\n    const dialogWindow = new DialogWindow();\n    const dialogWindowsHosts = document.querySelectorAll(Dialog.dialogWindowsHost);\n    const dialogWindowsHost = Array.from(dialogWindowsHosts).pop();\n\n    dialogWindow.addEventListener('fetch', (evt: Event) => {\n      if (evt instanceof FetchEvent) {\n        evt.stopImmediatePropagation();\n        evt.preventDefault();\n        evt.respondWith(new API(this).fetch(evt.request));\n      }\n    });\n\n    dialogWindowsHost?.appendChild(dialogWindow);\n    Dialog.dialogWindows.set(this, dialogWindow);\n\n    return dialogWindow.shadowRoot!;\n  }\n\n  /** @readonly */\n  render(content?: () => TemplateResult): TemplateResult {\n    if (!this.__connected) return html``;\n\n    const isFirst = Dialog.openDialogs[0] === this;\n    const isSecond = Dialog.openDialogs[1] === this;\n    const isThird = Dialog.openDialogs[2] === this;\n    const isForthAndGreater = !isFirst && !isSecond && !isThird;\n\n    return html`\n      <div\n        class=${classMap({ 'z-50 fixed inset-0': true, 'pointer-events-none': !this.__visible })}\n      >\n        <div\n          id=\"backdrop\"\n          class=${classMap({\n            'select-none ease-in-out transition duration-500 absolute inset-0 bg-shade-50 focus-outline-none':\n              true,\n            'opacity-100': this.__visible,\n            'opacity-0': !this.__visible,\n          })}\n          tabindex=\"-1\"\n          @click=${() => this.closable && this.hide(this.editable)}\n        ></div>\n\n        <div\n          role=\"dialog\"\n          aria-labelledby=\"dialog-title\"\n          class=${classMap({\n            'transform origin-bottom ease-in-out transition duration-500 relative h-full ml-auto sm-origin-center':\n              true,\n            'sm-max-w-modal': !this.wide,\n            'sm-max-w-modal-wide': this.wide,\n            'flex justify-center items-end sm-items-center mr-auto': this.alert,\n            'translate-y-full sm-translate-y-0': !this.__visible,\n            'sm-translate-x-full': !this.alert && !this.__visible,\n            'sm-opacity-0 sm-scale-110': this.alert && !this.__visible,\n            'translate-y-0 translate-x-0': isFirst && this.__visible,\n            'scale-95 -translate-y-s sm-translate-y-0': isSecond && this.__visible,\n            'scale-90 -translate-y-m sm-translate-y-0': isThird && this.__visible,\n            'opacity-0 scale-85 -translate-y-l sm-translate-y-0':\n              isForthAndGreater && this.__visible,\n          })}\n        >\n          <div\n            class=${classMap({\n              'overflow-hidden flex flex-col bg-base rounded-t-l sm-rounded-b-l': true,\n              'absolute inset-0 mt-xl sm-m-xl': !this.alert,\n              'shadow-xxl': this.__visible,\n            })}\n          >\n            <div\n              class=\"h-l grid grid-cols-header text-m font-lumo font-medium border-b border-contrast-10\"\n            >\n              ${this.closable && !this.hiddenSelector.matches('close-button', true)\n                ? html`\n                    <vaadin-button\n                      id=\"close-button\"\n                      theme=\"tertiary-inline\"\n                      class=\"mr-auto m-s px-s\"\n                      ?disabled=${this.disabledSelector.matches('close-button', true)}\n                      @click=${() => this.hide(this.editable)}\n                    >\n                      <foxy-i18n\n                        lang=${this.lang}\n                        key=${this.editable ? 'cancel' : 'close'}\n                        ns=${this.ns}\n                      >\n                      </foxy-i18n>\n                    </vaadin-button>\n                  `\n                : html`<div></div>`}\n\n              <h1 id=\"dialog-title\" class=\"truncate self-center text-center\">\n                <foxy-i18n ns=${this.ns} lang=${this.lang} key=${this.header}></foxy-i18n>\n              </h1>\n\n              ${this.editable && !this.hiddenSelector.matches('save-button', true)\n                ? html`\n                    <vaadin-button\n                      data-testid=\"save-button\"\n                      ?disabled=${this.disabledSelector.matches('save-button', true)}\n                      theme=\"primary\"\n                      class=\"ml-auto h-auto min-h-0 min-w-0 m-xs px-m\"\n                      @click=${this.save}\n                    >\n                      <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"save\"></foxy-i18n>\n                    </vaadin-button>\n                  `\n                : html`<div></div>`}\n            </div>\n\n            <div class=\"flex-1 overflow-y-auto overflow-x-hidden overscroll-contain\">\n              <div class=\"p-m relative\">${content?.()}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Hides the dialog. Returns a promise that resolves when the dialog\n   * finishes leaving the screen.\n   *\n   * @param cancelled Set this to `true` if closing an editable dialog without saving changes.\n   */\n  async hide(cancelled = false): Promise<void> {\n    this.__returnFocusTo?.focus();\n\n    await this.__setOpenDialogs(Dialog.openDialogs.filter(d => d !== this));\n    await this.__setConnected(false);\n\n    this.dispatchEvent(new Dialog.HideEvent(!!cancelled));\n  }\n\n  /**\n   * Shows the dialog. Returns a promise that resolves when the dialog\n   * finishes entering the screen.\n   *\n   * @param returnFocusTo If provided, the dialog will call `.focus()` on that element once it's closed.\n   */\n  async show(returnFocusTo?: HTMLElement): Promise<void> {\n    this.__returnFocusTo = returnFocusTo;\n\n    await this.__setConnected(true);\n    await this.__setOpenDialogs([this, ...Dialog.openDialogs]);\n\n    const closeButton = this.renderRoot.querySelector('#close-button') as HTMLButtonElement;\n    closeButton?.focus();\n\n    this.dispatchEvent(new Dialog.ShowEvent());\n  }\n\n  /** Alias for `dialog.hide(false)`. */\n  async save(): Promise<void> {\n    await this.hide(false);\n  }\n\n  private async __setOpenDialogs(newValue: Dialog[]) {\n    Dialog.openDialogs.length = 0;\n    Dialog.openDialogs.push(...newValue);\n\n    await Promise.all([\n      // animate dialog stack\n      Promise.all(Dialog.openDialogs.map(dialog => dialog.requestUpdate())),\n\n      // trigger exit transition\n      new Promise(resolve => {\n        const backdrop = this.renderRoot.querySelector('#backdrop') as HTMLDivElement;\n        backdrop.addEventListener('transitionend', resolve, { once: true });\n        this.__visible = Dialog.openDialogs.includes(this);\n      }),\n    ]);\n  }\n\n  private async __setConnected(newValue: boolean) {\n    this.__connected = newValue;\n    await this.updateComplete.then(() => this.getBoundingClientRect());\n  }\n}\n\ncustomElements.define('foxy-dialog-window', DialogWindow);\n"]}

package/dist/elements/public/EmailTemplateCard/EmailTemplateCard.js

@@ -15,7 +15,14 @@ export class EmailTemplateCard extends Base {
                     : 'type_default';
         return html `
       <div class="flex justify-between gap-s">
-        <foxy-i18n class="font-semibold truncate flex-shrink-0" infer="" key="title"></foxy-i18n>
+        <foxy-i18n
+          class="font-semibold truncate flex-shrink-0"
+          infer=""
+          key="title"
+          .options=${this.data}
+        >
+        </foxy-i18n>
+
         <foxy-i18n class="truncate text-tertiary" infer="" key=${type}></foxy-i18n>
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,IAAI,GACR,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,KAAI,IAAI,CAAC,gBAAgB;YAC7C,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,KAAI,IAAI,CAAC,YAAY;gBACzC,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,MAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KACtB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAA,KAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;oBACxB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CAAC;QAErB,OAAO,IAAI,CAAA;;;iEAGkD,IAAI;;KAEhE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nconst NS = 'email-template-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class EmailTemplateCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const type =\n      data?.content_html_url && data.content_html_url\n        ? 'type_custom_url'\n        : data?.content_html && data.content_text\n        ? 'type_custom_text'\n        : data?.content_html ||\n          data?.content_html_url ||\n          data?.content_text ||\n          data?.content_text_url\n        ? 'type_mixed'\n        : 'type_default';\n\n    return html`\n      <div class=\"flex justify-between gap-s\">\n        <foxy-i18n class=\"font-semibold truncate flex-shrink-0\" infer=\"\" key=\"title\"></foxy-i18n>\n        <foxy-i18n class=\"truncate text-tertiary\" infer=\"\" key=${type}></foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"EmailTemplateCard.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateCard/EmailTemplateCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAC/C,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,IAAI,GACR,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,KAAI,IAAI,CAAC,gBAAgB;YAC7C,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,KAAI,IAAI,CAAC,YAAY;gBACzC,CAAC,CAAC,kBAAkB;gBACpB,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,MAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,KACtB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAA,KAClB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;oBACxB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CAAC;QAErB,OAAO,IAAI,CAAA;;;;;;qBAMM,IAAI,CAAC,IAAI;;;;iEAImC,IAAI;;KAEhE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nconst NS = 'email-template-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class EmailTemplateCard extends Base<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n    const type =\n      data?.content_html_url && data.content_html_url\n        ? 'type_custom_url'\n        : data?.content_html && data.content_text\n        ? 'type_custom_text'\n        : data?.content_html ||\n          data?.content_html_url ||\n          data?.content_text ||\n          data?.content_text_url\n        ? 'type_mixed'\n        : 'type_default';\n\n    return html`\n      <div class=\"flex justify-between gap-s\">\n        <foxy-i18n\n          class=\"font-semibold truncate flex-shrink-0\"\n          infer=\"\"\n          key=\"title\"\n          .options=${this.data}\n        >\n        </foxy-i18n>\n\n        <foxy-i18n class=\"truncate text-tertiary\" infer=\"\" key=${type}></foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+import type { Data } from './types';
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class ShippingMethodCard extends Base<Data> {
+    static get defaultImageSrc(): string;
+    static get properties(): PropertyDeclarations;
+    storeShippingMethods: string | null;
+    getImageSrc: ((type: string) => string) | null;
+    renderBody(): TemplateResult;
+}
+export {};

package/dist/elements/public/ShippingMethodCard/ShippingMethodCard.js

@@ -0,0 +1,78 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'shipping-method-card';
+const Base = TranslatableMixin(InternalCard, NS);
+export class ShippingMethodCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.storeShippingMethods = null;
+        this.getImageSrc = null;
+    }
+    static get defaultImageSrc() {
+        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M0 0h40v40H0z'/%3E%3Cpath fill='%23fff' d='M0 14.81V7.88L7.88 0h6.93L0 14.81ZM0 0h6.47L0 6.47V0Zm16.22 0L0 16.22v6.93l9-9V14c0-.55.2-1.02.59-1.41.39-.4.86-.59 1.41-.59h.15l12-12h-6.93ZM9 15.57l-9 9v6.93l9-9v-6.93Zm.15 8.19L0 32.91v6.93l12.33-12.33a3.28 3.28 0 0 1-.46-.39A2.9 2.9 0 0 1 11 25c-.55 0-1.02-.2-1.41-.59a2 2 0 0 1-.44-.65Zm4.17 4.17L1.26 40h6.92L23 25.18V25h-6c0 .83-.3 1.54-.88 2.13A2.9 2.9 0 0 1 14 28a3.2 3.2 0 0 1-.68-.07Zm11.85-3.5.26-.26A.98.98 0 0 1 26 24c.28 0 .52.1.71.29.2.19.29.43.29.71 0 .28-.1.52-.29.71A.94.94 0 0 1 26 26a.97.97 0 0 1-.71-.29A.97.97 0 0 1 25 25a1 1 0 0 1 .17-.57Z'/%3E%3Cpath fill='%23fff' d='M23.29 26.31 9.59 40h6.94L40 16.53V9.6l-9.6 9.6.4.53c.07.08.12.17.15.27s.05.2.05.32V24c0 .28-.1.52-.29.71A.94.94 0 0 1 30 25h-1c0 .83-.3 1.54-.88 2.13A2.9 2.9 0 0 1 26 28a3 3 0 0 1-2.71-1.69Zm6.51-7.92L40 8.19V1.25L25.26 16h2.24a1 1 0 0 1 .45.1 1 1 0 0 1 .35.3l1.5 1.99ZM25 14.84 39.84 0h-6.93l-12 12H23c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v.84ZM19.5 12l12-12h-6.93l-12 12h6.93Zm-1.56 28L40 17.94v6.93L24.87 40h-6.93ZM40 26.29 26.29 40h6.93L40 33.22v-6.93ZM34.63 40 40 34.63V40h-5.37ZM13 25c0 .28.1.52.29.71.19.2.43.29.71.29.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71 0-.28-.1-.52-.29-.71A.97.97 0 0 0 14 24c-.07 0-.14 0-.2.02a.95.95 0 0 0-.51.27.95.95 0 0 0-.29.71Z'/%3E%3Cpath fill='%23fff' d='M25 18v3h4.21l-.85-1.18-.68-.91L27 18h-2Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h40v40H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E";
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            storeShippingMethods: { type: String, attribute: 'store-shipping-methods' },
+            getImageSrc: { attribute: false },
+        };
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e;
+        const defaultSrc = ShippingMethodCard.defaultImageSrc;
+        const data = this.data;
+        const methods = this.renderRoot.querySelector('#methods');
+        const isActive = ((_c = (_b = (_a = methods === null || methods === void 0 ? void 0 : methods.data) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b['fx:store_shipping_methods']) === null || _c === void 0 ? void 0 : _c.length) === 1;
+        let storeShippingMethodsHref;
+        try {
+            const url = new URL(this.storeShippingMethods);
+            url.searchParams.set('shipping_method_id', this.href.split('/').pop());
+            url.searchParams.set('limit', '1');
+            storeShippingMethodsHref = url.toString();
+        }
+        catch (_f) {
+            storeShippingMethodsHref = undefined;
+        }
+        return html `
+      ${typeof storeShippingMethodsHref === 'string'
+            ? html `
+            <foxy-nucleon
+              class="hidden"
+              infer=""
+              href=${ifDefined(storeShippingMethodsHref)}
+              id="methods"
+              @update=${() => this.requestUpdate()}
+            >
+            </foxy-nucleon>
+          `
+            : ''}
+
+      <figure class="flex items-center gap-m h-m">
+        <img
+          class="relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+          src=${(_e = (data ? (_d = this.getImageSrc) === null || _d === void 0 ? void 0 : _d.call(this, data.code) : null)) !== null && _e !== void 0 ? _e : defaultSrc}
+          alt=${this.t('image_alt')}
+          @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+        />
+
+        <figcaption class="min-w-0 flex-1">
+          <dl class="flex justify-between gap-s">
+            <dt class="sr-only">${this.t('title_description')}</dt>
+            <dd class="font-semibold truncate flex-shrink-0">${data === null || data === void 0 ? void 0 : data.name}&ZeroWidthSpace;</dd>
+
+            ${isActive
+            ? html `
+                  <dt class="sr-only">${this.t('subtitle_description')}</dt>
+                  <dd class="truncate text-tertiary">${this.t('status_active')}</dd>
+                `
+            : ''}
+          </dl>
+        </figcaption>
+      </figure>
+    `;
+    }
+}
+//# sourceMappingURL=ShippingMethodCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShippingMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ShippingMethodCard/ShippingMethodCard.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,sBAAsB,CAAC;AAClC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,kBAAmB,SAAQ,IAAU;IAAlD;;QAaE,yBAAoB,GAAkB,IAAI,CAAC;QAE3C,gBAAW,GAAsC,IAAI,CAAC;IA+DxD,CAAC;IA7EC,MAAM,KAAK,eAAe;QACxB,OAAO,woDAAwoD,CAAC;IAClpD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,oBAAoB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,EAAE;YAC3E,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAMD,UAAU;;QACR,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAKvB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAgB,UAAU,CAAC,CAAC;QACzE,MAAM,QAAQ,GAAG,mBAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,0CAAG,2BAA2B,2CAAG,MAAM,MAAK,CAAC,CAAC;QAEvF,IAAI,wBAA4C,CAAC;QAEjD,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,oBAAqB,CAAC,CAAC;YAEhD,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAG,CAAC,CAAC;YACxE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;YAEnC,wBAAwB,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC3C;QAAC,WAAM;YACN,wBAAwB,GAAG,SAAS,CAAC;SACtC;QAED,OAAO,IAAI,CAAA;QACP,OAAO,wBAAwB,KAAK,QAAQ;YAC5C,CAAC,CAAC,IAAI,CAAA;;;;qBAIO,SAAS,CAAC,wBAAwB,CAAC;;wBAEhC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;WAGvC;YACH,CAAC,CAAC,EAAE;;;;;gBAKI,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;;;kCAK3D,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;+DACE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI;;cAE3D,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;wCACoB,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC;uDACf,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC;iBAC7D;YACH,CAAC,CAAC,EAAE;;;;KAIb,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data, StoreShippingMethods } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'shipping-method-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class ShippingMethodCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23E8E8E8' d='M0 0h40v40H0z'/%3E%3Cpath fill='%23fff' d='M0 14.81V7.88L7.88 0h6.93L0 14.81ZM0 0h6.47L0 6.47V0Zm16.22 0L0 16.22v6.93l9-9V14c0-.55.2-1.02.59-1.41.39-.4.86-.59 1.41-.59h.15l12-12h-6.93ZM9 15.57l-9 9v6.93l9-9v-6.93Zm.15 8.19L0 32.91v6.93l12.33-12.33a3.28 3.28 0 0 1-.46-.39A2.9 2.9 0 0 1 11 25c-.55 0-1.02-.2-1.41-.59a2 2 0 0 1-.44-.65Zm4.17 4.17L1.26 40h6.92L23 25.18V25h-6c0 .83-.3 1.54-.88 2.13A2.9 2.9 0 0 1 14 28a3.2 3.2 0 0 1-.68-.07Zm11.85-3.5.26-.26A.98.98 0 0 1 26 24c.28 0 .52.1.71.29.2.19.29.43.29.71 0 .28-.1.52-.29.71A.94.94 0 0 1 26 26a.97.97 0 0 1-.71-.29A.97.97 0 0 1 25 25a1 1 0 0 1 .17-.57Z'/%3E%3Cpath fill='%23fff' d='M23.29 26.31 9.59 40h6.94L40 16.53V9.6l-9.6 9.6.4.53c.07.08.12.17.15.27s.05.2.05.32V24c0 .28-.1.52-.29.71A.94.94 0 0 1 30 25h-1c0 .83-.3 1.54-.88 2.13A2.9 2.9 0 0 1 26 28a3 3 0 0 1-2.71-1.69Zm6.51-7.92L40 8.19V1.25L25.26 16h2.24a1 1 0 0 1 .45.1 1 1 0 0 1 .35.3l1.5 1.99ZM25 14.84 39.84 0h-6.93l-12 12H23c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41v.84ZM19.5 12l12-12h-6.93l-12 12h6.93Zm-1.56 28L40 17.94v6.93L24.87 40h-6.93ZM40 26.29 26.29 40h6.93L40 33.22v-6.93ZM34.63 40 40 34.63V40h-5.37ZM13 25c0 .28.1.52.29.71.19.2.43.29.71.29.28 0 .52-.1.71-.29.2-.19.29-.43.29-.71 0-.28-.1-.52-.29-.71A.97.97 0 0 0 14 24c-.07 0-.14 0-.2.02a.95.95 0 0 0-.51.27.95.95 0 0 0-.29.71Z'/%3E%3Cpath fill='%23fff' d='M25 18v3h4.21l-.85-1.18-.68-.91L27 18h-2Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h40v40H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      storeShippingMethods: { type: String, attribute: 'store-shipping-methods' },\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  storeShippingMethods: string | null = null;\n\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultSrc = ShippingMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    type Methods = Resource<StoreShippingMethods, { zoom: 'shipping_method' }>;\n    type MethodsLoader = NucleonElement<Methods>;\n\n    const methods = this.renderRoot.querySelector<MethodsLoader>('#methods');\n    const isActive = methods?.data?._embedded?.['fx:store_shipping_methods']?.length === 1;\n\n    let storeShippingMethodsHref: string | undefined;\n\n    try {\n      const url = new URL(this.storeShippingMethods!);\n\n      url.searchParams.set('shipping_method_id', this.href.split('/').pop()!);\n      url.searchParams.set('limit', '1');\n\n      storeShippingMethodsHref = url.toString();\n    } catch {\n      storeShippingMethodsHref = undefined;\n    }\n\n    return html`\n      ${typeof storeShippingMethodsHref === 'string'\n        ? html`\n            <foxy-nucleon\n              class=\"hidden\"\n              infer=\"\"\n              href=${ifDefined(storeShippingMethodsHref)}\n              id=\"methods\"\n              @update=${() => this.requestUpdate()}\n            >\n            </foxy-nucleon>\n          `\n        : ''}\n\n      <figure class=\"flex items-center gap-m h-m\">\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.code) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">\n          <dl class=\"flex justify-between gap-s\">\n            <dt class=\"sr-only\">${this.t('title_description')}</dt>\n            <dd class=\"font-semibold truncate flex-shrink-0\">${data?.name}&ZeroWidthSpace;</dd>\n\n            ${isActive\n              ? html`\n                  <dt class=\"sr-only\">${this.t('subtitle_description')}</dt>\n                  <dd class=\"truncate text-tertiary\">${this.t('status_active')}</dd>\n                `\n              : ''}\n          </dl>\n        </figcaption>\n      </figure>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '../../internal/InternalCard/index';
+import '../NucleonElement/index';
+import { ShippingMethodCard } from './ShippingMethodCard';
+export { ShippingMethodCard };

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

@@ -0,0 +1,6 @@
+import "../../internal/InternalCard/index.js";
+import "../NucleonElement/index.js";
+import { ShippingMethodCard } from "./ShippingMethodCard.js";
+customElements.define('foxy-shipping-method-card', ShippingMethodCard);
+export { ShippingMethodCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ShippingMethodCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,oCAAiC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,gCAA6B;AAE1D,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\n\nimport '../NucleonElement/index';\n\nimport { ShippingMethodCard } from './ShippingMethodCard';\n\ncustomElements.define('foxy-shipping-method-card', ShippingMethodCard);\n\nexport { ShippingMethodCard };\n"]}

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

@@ -0,0 +1,10 @@
+import type { CollectionGraphLinks, CollectionGraphProps } from '@foxy.io/sdk/dist/types/core/defaults';
+import type { Rels } from '@foxy.io/sdk/backend';
+import type { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.ShippingMethod>;
+export interface StoreShippingMethods {
+    curie: 'fx:store_shipping_methods';
+    links: CollectionGraphLinks<StoreShippingMethods>;
+    props: CollectionGraphProps;
+    child: Rels.StoreShippingMethod;
+}

package/dist/elements/public/ShippingMethodCard/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/ShippingMethodCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  CollectionGraphLinks,\n  CollectionGraphProps,\n} from '@foxy.io/sdk/dist/types/core/defaults';\n\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.ShippingMethod>;\n\nexport interface StoreShippingMethods {\n  curie: 'fx:store_shipping_methods';\n  links: CollectionGraphLinks<StoreShippingMethods>;\n  props: CollectionGraphProps;\n  child: Rels.StoreShippingMethod;\n}\n"]}

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

@@ -44,12 +44,12 @@ export declare class StoreForm extends Base<Data> {
     private __setWebhookUrlValue;
     private __setStoreDomainValue;
     renderBody(): TemplateResult;
+    private __renderWebhookKey;
     private __renderMaintenanceModeSwitch;
     private __renderCurrencyStyleSelector;
     private __renderCustomIDSettings;
     private __renderSmtpConfig;
     private __renderWarning;
     private __renderLoader;
-    private __renderTitle;
 }
 export {};

package/dist/elements/public/StoreForm/StoreForm.js

@@ -272,13 +272,7 @@ export class StoreForm extends Base {
       ${countriesLoader.render(this.countries)} ${languagesLoader.render(this.languages)}
       ${regionsLoader.render(regionsUrl)}
 
-      <!-- -->
-
-      ${this.data ? this.__renderMaintenanceModeSwitch() : ''}
-
       <div class="grid gap-m grid-cols-1 sm-grid-cols-2">
-        ${this.__renderTitle('general_title')}
-
         <foxy-internal-text-control infer="store-name"></foxy-internal-text-control>
 
         <foxy-internal-text-control infer="logo-url"></foxy-internal-text-control>
@@ -308,8 +302,6 @@ export class StoreForm extends Base {
         >
         </foxy-internal-select-control>
 
-        <foxy-internal-password-control infer="webhook-key"></foxy-internal-password-control>
-
         <foxy-internal-async-combo-box-control
           item-label-path="version"
           item-value-path="_links.self.href"
@@ -319,8 +311,6 @@ export class StoreForm extends Base {
         >
         </foxy-internal-async-combo-box-control>
 
-        ${this.__renderTitle('emails_title')}
-
         <foxy-internal-text-control
           infer="from-email"
           class="sm-col-span-2"
@@ -362,11 +352,9 @@ export class StoreForm extends Base {
         >
         </foxy-internal-checkbox-group-control>
 
-        ${this.form.smtp_config ? this.__renderSmtpConfig() : ''}
-
-        <!-- -->
-
-        ${this.__renderTitle('shipping_title')}
+        ${this.form.smtp_config && !this.hiddenSelector.matches('smtp-config', true)
+            ? this.__renderSmtpConfig()
+            : ''}
 
         <foxy-internal-select-control infer="country" .options=${countryOptions}>
         </foxy-internal-select-control>
@@ -404,29 +392,29 @@ export class StoreForm extends Base {
             ? this.__renderWarning('require_signed_shipping_rates_helper_text')
             : ''}
 
-        <!-- -->
-
-        ${this.__renderTitle('language_and_format_title')}
-
         <foxy-internal-select-control infer="language" .options=${languageOptions}>
         </foxy-internal-select-control>
 
         <foxy-internal-select-control infer="locale-code" .options=${localeCodeOptions}>
         </foxy-internal-select-control>
 
-        ${this.__renderCurrencyStyleSelector()}
+        ${!this.hiddenSelector.matches('currency-style', true)
+            ? this.__renderCurrencyStyleSelector()
+            : ''}
 
         <!-- -->
 
-        ${this.__renderCustomIDSettings()}
+        ${!this.hiddenSelector.matches('custom-display-id-config', true)
+            ? this.__renderCustomIDSettings()
+            : ''}
 
         <!-- -->
 
-        ${this.__renderTitle('cart_and_checkout_title')}
-
-        <foxy-internal-text-control infer="receipt-continue-url"></foxy-internal-text-control>
+        <foxy-internal-text-control class="sm-col-span-2" infer="receipt-continue-url">
+        </foxy-internal-text-control>
 
         <foxy-internal-frequency-control
+          class="sm-col-span-2"
           infer="app-session-time"
           .getValue=${this.__getAppSessionTimeValue}
           .setValue=${this.__setAppSessionTimeValue}
@@ -463,10 +451,6 @@ export class StoreForm extends Base {
             })
             : ''}
 
-        <!-- -->
-
-        ${this.__renderTitle('customer_login_title')}
-
         <foxy-internal-select-control
           infer="checkout-type"
           class="sm-col-span-2"
@@ -508,8 +492,6 @@ export class StoreForm extends Base {
         >
         </foxy-internal-text-control>
 
-        ${this.__renderTitle('legacy_title')}
-
         <foxy-internal-text-control
           infer="webhook-url"
           class="sm-col-span-2"
@@ -517,11 +499,43 @@ export class StoreForm extends Base {
           .setValue=${this.__setWebhookUrlValue}
         >
         </foxy-internal-text-control>
+
+        ${this.__renderWebhookKey()}
+
+        <!-- -->
+
+        ${this.data && !this.hiddenSelector.matches('is-maintenance-mode', true)
+            ? this.__renderMaintenanceModeSwitch()
+            : ''}
       </div>
 
       ${super.renderBody()}
     `;
     }
+    __renderWebhookKey() {
+        var _a, _b;
+        let parsedKey;
+        try {
+            parsedKey = JSON.parse((_a = this.form.webhook_key) !== null && _a !== void 0 ? _a : '');
+        }
+        catch (_c) {
+            const v = (_b = this.form.webhook_key) !== null && _b !== void 0 ? _b : '';
+            parsedKey = { cart_signing: v, xml_datafeed: v, api_legacy: v, sso: v };
+        }
+        return Object.keys(parsedKey).map(key => {
+            return html `
+        <foxy-internal-password-control
+          infer="webhook-key-${key.replace('_', '-')}"
+          .getValue=${() => parsedKey[key]}
+          .setValue=${(newValue) => {
+                parsedKey[key] = newValue;
+                this.edit({ webhook_key: JSON.stringify(parsedKey) });
+            }}
+        >
+        </foxy-internal-password-control>
+      `;
+        });
+    }
     __renderMaintenanceModeSwitch() {
         var _a;
         const isActive = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_maintenance_mode);
@@ -530,18 +544,16 @@ export class StoreForm extends Base {
         return html `
       <div
         class=${classMap({
-            'rounded-t-l rounded-b-l p-m leading-m': true,
-            'bg-contrast-5 text-contrast': !isActive,
-            'bg-primary-10 text-primary': isActive,
+            'rounded-t-l rounded-b-l leading-s text-s sm-col-span-2': true,
+            'text-tertiary': !isActive,
+            'text-error': isActive,
         })}
       >
-        <foxy-i18n infer="" class="block font-semibold mb-s" key="maintenance_mode_title">
-        </foxy-i18n>
-
-        <foxy-i18n infer="" class="block mb-m" key=${explainerKey}></foxy-i18n>
+        <foxy-i18n infer="" class="block mb-s" key=${explainerKey}></foxy-i18n>
 
         <vaadin-button
-          theme=${isActive ? 'primary' : 'contrast'}
+          theme="tertiary small ${isActive ? 'contrast' : ''}"
+          class="p-0"
           @click=${() => {
             this.edit({ is_maintenance_mode: !this.form.is_maintenance_mode });
             this.submit();
@@ -1014,10 +1026,5 @@ export class StoreForm extends Base {
       `,
         };
     }
-    __renderTitle(key) {
-        return html `
-      <foxy-i18n infer="" class="font-bold text-xl my-s sm-col-span-2" key=${key}></foxy-i18n>
-    `;
-    }
 }
 //# sourceMappingURL=StoreForm.js.map