@foxy.io/elements 1.48.1-beta.1 → 1.49.0-beta.1

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.js

@@ -20,6 +20,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
         this.first = null;
         this.item = null;
         this.form = null;
+        this.__isErrorVisible = false;
         this.__getItemRenderer = memoize((item) => {
             return new Function('ctx', `return ctx.html\`
         <${item !== null && item !== void 0 ? item : 'foxy-null'}
@@ -45,6 +46,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             first: {},
             item: {},
             form: {},
+            __isErrorVisible: { attribute: false },
         };
     }
     renderControl() {
@@ -62,6 +64,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
         .props=${dialogProps}
         .form=${(_a = this.form) !== null && _a !== void 0 ? _a : 'foxy-internal-resource-picker-control-form'}
         @fetch=${this.__handleFetchEvent}
+        @hide=${() => (this.__isErrorVisible = true)}
       >
       </foxy-form-dialog>
 
@@ -70,6 +73,10 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             : this.__renderStandaloneLayout()}
     `;
     }
+    reportValidity() {
+        this.__isErrorVisible = true;
+        super.reportValidity();
+    }
     updated(changes) {
         var _a, _b;
         super.updated(changes);
@@ -142,7 +149,10 @@ export class InternalResourcePickerControl extends InternalEditableControl {
 
         <div style="max-width: 32rem">
           <div class="text-xs text-secondary">${this.helperText}</div>
-          <div class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+          <div
+            class="text-xs text-error"
+            ?hidden=${this.disabled || this.readonly || !this.__isErrorVisible}
+          >
             ${this._errorMessage}
           </div>
         </div>

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

@@ -1 +1 @@
-{"version":3,"file":"InternalResourcePickerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../public/FormDialog/FormDialog';\nimport type { Option } from '../../public/QueryBuilder/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getDisplayValueOptions: { attribute: false },\n      showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },\n      virtualHost: {},\n      getItemUrl: { attribute: false },\n      formProps: { type: Object },\n      filters: { type: Array },\n      layout: {},\n      first: {},\n      item: {},\n      form: {},\n    };\n  }\n\n  getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n  showCopyIdButton = false;\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  getItemUrl: ((href: string, data: unknown | null) => string) | null = null;\n\n  formProps: Record<string, unknown> = {};\n\n  filters: Option[] = [];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  first: string | null = null;\n\n  item: string | null = null;\n\n  form: string | null | FormRenderer = null;\n\n  private readonly __getItemRenderer = memoize((item: string | null) => {\n    return new Function(\n      'ctx',\n      `return ctx.html\\`\n        <${item ?? 'foxy-null'}\n          related=\\${JSON.stringify(ctx.related)}\n          parent=\\${ctx.parent}\n          infer=\"card\"\n          href=$\\{ctx.href}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n    ) as ItemRenderer;\n  });\n\n  renderControl(): TemplateResult {\n    const dialogProps = {\n      ...this.formProps,\n      '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n    };\n\n    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        header=\"header\"\n        infer=\"dialog\"\n        alert\n        .props=${dialogProps}\n        .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n        @fetch=${this.__handleFetchEvent}\n      >\n      </foxy-form-dialog>\n\n      ${this.layout === 'summary-item'\n        ? this.__renderSummaryItemLayout()\n        : this.__renderStandaloneLayout()}\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n  }\n\n  private __clear(): void {\n    this._value = '';\n    this.dispatchEvent(new CustomEvent('clear'));\n  }\n\n  private __renderSummaryItemLayout() {\n    const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n    const onClick = (evt: Event) => {\n      if (this.disabled || this.readonly) return;\n      const button = evt.currentTarget as HTMLButtonElement;\n      const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n      dialog.href = '';\n      dialog.show(button);\n    };\n\n    return html`\n      <div class=\"leading-xs\">\n        <div class=\"flex items-center gap-xs\">\n          <div class=\"text-m text-body whitespace-nowrap flex-1\">${this.label}</div>\n\n          <button\n            aria-label=${this.t('select')}\n            class=${classMap({\n              'text-right min-w-0 transition-colors transition-opacity': true,\n              'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n              'font-medium': !this.readonly,\n            })}\n            ?disabled=${this.disabled || this.readonly}\n            @click=${onClick}\n          >\n            <div class=\"truncate min-w-0\">\n              ${this._value\n                ? html`\n                    <foxy-i18n\n                      infer=\"\"\n                      key=\"value\"\n                      .options=${resource?.data\n                        ? this.getDisplayValueOptions(resource.data)\n                        : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n                    >\n                    </foxy-i18n>\n                  `\n                : this.placeholder}\n            </div>\n          </button>\n\n          <button\n            aria-label=${this.t('clear')}\n            class=${classMap({\n              'rounded-full transition-colors': true,\n              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n            })}\n            style=\"width: 1em; height: 1em;\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly || !this._value}\n            @click=${this.__clear}\n          >\n            ${svg`<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>`}\n          </button>\n        </div>\n\n        <div style=\"max-width: 32rem\">\n          <div class=\"text-xs text-secondary\">${this.helperText}</div>\n          <div class=\"text-xs text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </div>\n        </div>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this._value || void 0)}\n        id=\"value\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderStandaloneLayout() {\n    const valueLoader = this.__valueLoader;\n    const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;\n    const selectionUrl =\n      typeof this._value === 'string'\n        ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)\n        : void 0;\n\n    return html`\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'flex items-center gap-s transition-colors font-medium': true,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <span class=\"mr-auto text-l\">${this.label}</span>\n          ${selectionUrl\n            ? html`\n                <a\n                  class=\"text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                  href=${selectionUrl}\n                >\n                  <foxy-i18n infer=\"\" key=\"view\"></foxy-i18n>\n                </a>\n              `\n            : ''}\n          ${this.showCopyIdButton && selectionId !== null\n            ? html`\n                <foxy-copy-to-clipboard\n                  layout=\"text\"\n                  theme=\"contrast tertiary-inline\"\n                  infer=\"copy-id\"\n                  text=${selectionId}\n                >\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n          ${this.readonly || !this._value\n            ? ''\n            : html`\n                <vaadin-button\n                  theme=\"error tertiary-inline\"\n                  ?disabled=${this.disabled}\n                  @click=${this.__clear}\n                >\n                  <foxy-i18n infer=\"\" key=\"clear\"></foxy-i18n>\n                </vaadin-button>\n              `}\n        </div>\n\n        <div class=\"text-secondary text-s\" ?hidden=${!this.helperText}>${this.helperText}</div>\n\n        <button\n          class=${classMap({\n            'block w-full bg-contrast-5 rounded text-left transition-colors': true,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n            'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default': this.disabled || this.readonly,\n            'mt-s': !!this.label || !!this.helperText,\n          })}\n          style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          ?disabled=${this.disabled || this.readonly}\n          @click=${(evt: MouseEvent) => {\n            const button = evt.currentTarget as HTMLButtonElement;\n            const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n            dialog.href = '';\n            dialog.show(button);\n          }}\n        >\n          <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>\n            <foxy-nucleon\n              class=\"block\"\n              infer=\"\"\n              href=${ifDefined(this._value || void 0)}\n              id=\"valueLoader\"\n              @update=${() => this.requestUpdate()}\n            >\n              ${this.__getItemRenderer(this.item)({\n                html,\n                data: valueLoader?.data ?? null,\n                href: (this._value as string | undefined) || '',\n                related: [],\n                parent: '',\n                props: {},\n                spread: spread,\n                simplifyNsLoading: this.simplifyNsLoading,\n                disabled: this.disabled,\n                disabledControls: this.disabledControls,\n                readonly: this.readonly,\n                readonlyControls: this.readonlyControls,\n                hidden: this.hidden,\n                hiddenControls: this.hiddenControls,\n                templates: this.templates,\n                previous: null,\n                next: null,\n                group: this.nucleon?.group ?? '',\n                lang: this.lang,\n                ns: this.ns,\n              })}\n            </foxy-nucleon>\n          </div>\n        </button>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  private __handleFetchEvent(event: Event) {\n    if (!(event instanceof FetchEvent)) return;\n    if (event.defaultPrevented) return;\n\n    const { url, method } = event.request;\n\n    if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {\n      return event.respondWith(this.__handleSelect(event.request));\n    }\n\n    if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {\n      return event.respondWith(this.__handleEmpty());\n    }\n  }\n\n  private async __handleSelect(request: Request): Promise<Response> {\n    const body = (await request.clone().json()) as { selection: string };\n    this._value = body.selection;\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n\n  private async __handleEmpty(): Promise<Response> {\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n\n  private get __valueLoader() {\n    type Loader = NucleonElement<any>;\n    return this.renderRoot.querySelector<Loader>('#valueLoader');\n  }\n}\n"]}
+{"version":3,"file":"InternalResourcePickerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../public/FormDialog/FormDialog';\nimport type { Option } from '../../public/QueryBuilder/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getDisplayValueOptions: { attribute: false },\n      showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },\n      virtualHost: {},\n      getItemUrl: { attribute: false },\n      formProps: { type: Object },\n      filters: { type: Array },\n      layout: {},\n      first: {},\n      item: {},\n      form: {},\n      __isErrorVisible: { attribute: false },\n    };\n  }\n\n  getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n  showCopyIdButton = false;\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  getItemUrl: ((href: string, data: unknown | null) => string) | null = null;\n\n  formProps: Record<string, unknown> = {};\n\n  filters: Option[] = [];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  first: string | null = null;\n\n  item: string | null = null;\n\n  form: string | null | FormRenderer = null;\n\n  private __isErrorVisible = false;\n\n  private readonly __getItemRenderer = memoize((item: string | null) => {\n    return new Function(\n      'ctx',\n      `return ctx.html\\`\n        <${item ?? 'foxy-null'}\n          related=\\${JSON.stringify(ctx.related)}\n          parent=\\${ctx.parent}\n          infer=\"card\"\n          href=$\\{ctx.href}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n    ) as ItemRenderer;\n  });\n\n  renderControl(): TemplateResult {\n    const dialogProps = {\n      ...this.formProps,\n      '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n    };\n\n    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        header=\"header\"\n        infer=\"dialog\"\n        alert\n        .props=${dialogProps}\n        .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n        @fetch=${this.__handleFetchEvent}\n        @hide=${() => (this.__isErrorVisible = true)}\n      >\n      </foxy-form-dialog>\n\n      ${this.layout === 'summary-item'\n        ? this.__renderSummaryItemLayout()\n        : this.__renderStandaloneLayout()}\n    `;\n  }\n\n  reportValidity(): void {\n    this.__isErrorVisible = true;\n    super.reportValidity();\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n  }\n\n  private __clear(): void {\n    this._value = '';\n    this.dispatchEvent(new CustomEvent('clear'));\n  }\n\n  private __renderSummaryItemLayout() {\n    const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n    const onClick = (evt: Event) => {\n      if (this.disabled || this.readonly) return;\n      const button = evt.currentTarget as HTMLButtonElement;\n      const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n      dialog.href = '';\n      dialog.show(button);\n    };\n\n    return html`\n      <div class=\"leading-xs\">\n        <div class=\"flex items-center gap-xs\">\n          <div class=\"text-m text-body whitespace-nowrap flex-1\">${this.label}</div>\n\n          <button\n            aria-label=${this.t('select')}\n            class=${classMap({\n              'text-right min-w-0 transition-colors transition-opacity': true,\n              'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n              'font-medium': !this.readonly,\n            })}\n            ?disabled=${this.disabled || this.readonly}\n            @click=${onClick}\n          >\n            <div class=\"truncate min-w-0\">\n              ${this._value\n                ? html`\n                    <foxy-i18n\n                      infer=\"\"\n                      key=\"value\"\n                      .options=${resource?.data\n                        ? this.getDisplayValueOptions(resource.data)\n                        : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n                    >\n                    </foxy-i18n>\n                  `\n                : this.placeholder}\n            </div>\n          </button>\n\n          <button\n            aria-label=${this.t('clear')}\n            class=${classMap({\n              'rounded-full transition-colors': true,\n              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n            })}\n            style=\"width: 1em; height: 1em;\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly || !this._value}\n            @click=${this.__clear}\n          >\n            ${svg`<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>`}\n          </button>\n        </div>\n\n        <div style=\"max-width: 32rem\">\n          <div class=\"text-xs text-secondary\">${this.helperText}</div>\n          <div\n            class=\"text-xs text-error\"\n            ?hidden=${this.disabled || this.readonly || !this.__isErrorVisible}\n          >\n            ${this._errorMessage}\n          </div>\n        </div>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this._value || void 0)}\n        id=\"value\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderStandaloneLayout() {\n    const valueLoader = this.__valueLoader;\n    const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;\n    const selectionUrl =\n      typeof this._value === 'string'\n        ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)\n        : void 0;\n\n    return html`\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'flex items-center gap-s transition-colors font-medium': true,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <span class=\"mr-auto text-l\">${this.label}</span>\n          ${selectionUrl\n            ? html`\n                <a\n                  class=\"text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                  href=${selectionUrl}\n                >\n                  <foxy-i18n infer=\"\" key=\"view\"></foxy-i18n>\n                </a>\n              `\n            : ''}\n          ${this.showCopyIdButton && selectionId !== null\n            ? html`\n                <foxy-copy-to-clipboard\n                  layout=\"text\"\n                  theme=\"contrast tertiary-inline\"\n                  infer=\"copy-id\"\n                  text=${selectionId}\n                >\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n          ${this.readonly || !this._value\n            ? ''\n            : html`\n                <vaadin-button\n                  theme=\"error tertiary-inline\"\n                  ?disabled=${this.disabled}\n                  @click=${this.__clear}\n                >\n                  <foxy-i18n infer=\"\" key=\"clear\"></foxy-i18n>\n                </vaadin-button>\n              `}\n        </div>\n\n        <div class=\"text-secondary text-s\" ?hidden=${!this.helperText}>${this.helperText}</div>\n\n        <button\n          class=${classMap({\n            'block w-full bg-contrast-5 rounded text-left transition-colors': true,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n            'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default': this.disabled || this.readonly,\n            'mt-s': !!this.label || !!this.helperText,\n          })}\n          style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          ?disabled=${this.disabled || this.readonly}\n          @click=${(evt: MouseEvent) => {\n            const button = evt.currentTarget as HTMLButtonElement;\n            const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n            dialog.href = '';\n            dialog.show(button);\n          }}\n        >\n          <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>\n            <foxy-nucleon\n              class=\"block\"\n              infer=\"\"\n              href=${ifDefined(this._value || void 0)}\n              id=\"valueLoader\"\n              @update=${() => this.requestUpdate()}\n            >\n              ${this.__getItemRenderer(this.item)({\n                html,\n                data: valueLoader?.data ?? null,\n                href: (this._value as string | undefined) || '',\n                related: [],\n                parent: '',\n                props: {},\n                spread: spread,\n                simplifyNsLoading: this.simplifyNsLoading,\n                disabled: this.disabled,\n                disabledControls: this.disabledControls,\n                readonly: this.readonly,\n                readonlyControls: this.readonlyControls,\n                hidden: this.hidden,\n                hiddenControls: this.hiddenControls,\n                templates: this.templates,\n                previous: null,\n                next: null,\n                group: this.nucleon?.group ?? '',\n                lang: this.lang,\n                ns: this.ns,\n              })}\n            </foxy-nucleon>\n          </div>\n        </button>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  private __handleFetchEvent(event: Event) {\n    if (!(event instanceof FetchEvent)) return;\n    if (event.defaultPrevented) return;\n\n    const { url, method } = event.request;\n\n    if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {\n      return event.respondWith(this.__handleSelect(event.request));\n    }\n\n    if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {\n      return event.respondWith(this.__handleEmpty());\n    }\n  }\n\n  private async __handleSelect(request: Request): Promise<Response> {\n    const body = (await request.clone().json()) as { selection: string };\n    this._value = body.selection;\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n\n  private async __handleEmpty(): Promise<Response> {\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n\n  private get __valueLoader() {\n    type Loader = NucleonElement<any>;\n    return this.renderRoot.querySelector<Loader>('#valueLoader');\n  }\n}\n"]}

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

@@ -2,7 +2,6 @@ import type { PropertyDeclarations } from 'lit-element';
 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> & {
     defaultNS: string;
@@ -20,11 +19,8 @@ export declare class DownloadableForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
     /** URL of the `fx:downloadable_item_categories` collection for the store. */
     downloadableItemCategories: string | null;
-    private readonly __downloadableItemCategoryLoaderId;
-    get disabledSelector(): BooleanSelector;
     renderBody(): TemplateResult;
     protected _sendPatch(edits: Partial<Data>): Promise<Data>;
     protected _sendPost(edits: Partial<Data>): Promise<Data>;
-    private get __downloadableItemCategoryLoader();
 }
 export {};

package/dist/elements/public/DownloadableForm/DownloadableForm.js

@@ -1,5 +1,4 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-element';
@@ -18,7 +17,6 @@ export class DownloadableForm extends Base {
         super(...arguments);
         /** URL of the `fx:downloadable_item_categories` collection for the store. */
         this.downloadableItemCategories = null;
-        this.__downloadableItemCategoryLoaderId = 'downloadableItemCategoryLoader';
     }
     static get properties() {
         return {
@@ -38,52 +36,34 @@ export class DownloadableForm extends Base {
             ({ code: v }) => !v || v.length <= 50 || 'code:v8n_too_long',
         ];
     }
-    get disabledSelector() {
-        const alwaysDisabled = [];
-        const loader = this.__downloadableItemCategoryLoader;
-        if (!(loader === null || loader === void 0 ? void 0 : loader.in('idle')))
-            alwaysDisabled.push('item-category-uri');
-        return new BooleanSelector(`${alwaysDisabled.join(' ')}${super.disabledSelector}`);
-    }
     renderBody() {
-        var _a, _b;
+        var _a;
         return html `
       ${this.renderHeader()}
 
-      <foxy-internal-async-combo-box-control
-        item-label-path="name"
-        item-value-path="_links.self.href"
-        item-id-path="_links.self.href"
-        infer="item-category-uri"
-        first=${ifDefined((_a = this.downloadableItemCategories) !== null && _a !== void 0 ? _a : void 0)}
-        .selectedItem=${(_b = this.__downloadableItemCategoryLoader) === null || _b === void 0 ? void 0 : _b.data}
-        .setValue=${(newValue) => {
-            var _a;
-            this.edit({ item_category_uri: newValue });
-            const newID = parseInt((_a = newValue.split('/').pop()) !== null && _a !== void 0 ? _a : '');
-            if (!isNaN(newID))
-                this.edit({ item_category_id: newID });
-        }}
-      >
-      </foxy-internal-async-combo-box-control>
+      <foxy-internal-summary-control infer="group-one" label="" helper-text="">
+        <foxy-internal-text-control layout="summary-item" infer="name"></foxy-internal-text-control>
+        <foxy-internal-text-control layout="summary-item" infer="code"></foxy-internal-text-control>
+        <foxy-internal-resource-picker-control
+          layout="summary-item"
+          first=${ifDefined((_a = this.downloadableItemCategories) !== null && _a !== void 0 ? _a : void 0)}
+          infer="item-category-uri"
+          item="foxy-item-category-card"
+        >
+        </foxy-internal-resource-picker-control>
+      </foxy-internal-summary-control>
 
-      <foxy-internal-text-control infer="name"></foxy-internal-text-control>
-      <foxy-internal-text-control infer="code"></foxy-internal-text-control>
-      <foxy-internal-number-control infer="price" min="0"></foxy-internal-number-control>
+      <foxy-internal-summary-control infer="group-two" label="" helper-text="">
+        <foxy-internal-number-control layout="summary-item" infer="price" min="0">
+        </foxy-internal-number-control>
+      </foxy-internal-summary-control>
 
-      <foxy-internal-downloadable-form-upload-control infer="upload">
-      </foxy-internal-downloadable-form-upload-control>
+      <foxy-internal-summary-control infer="group-three" label="" helper-text="">
+        <foxy-internal-downloadable-form-upload-control infer="upload">
+        </foxy-internal-downloadable-form-upload-control>
+      </foxy-internal-summary-control>
 
       ${super.renderBody()}
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.form.item_category_uri || void 0)}
-        id=${this.__downloadableItemCategoryLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
     `;
     }
     async _sendPatch(edits) {
@@ -120,8 +100,5 @@ export class DownloadableForm extends Base {
         }
         return data;
     }
-    get __downloadableItemCategoryLoader() {
-        return this.renderRoot.querySelector(`#${this.__downloadableItemCategoryLoaderId}`);
-    }
 }
 //# sourceMappingURL=DownloadableForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadableForm.js","sourceRoot":"","sources":["../../../../src/elements/public/DownloadableForm/DownloadableForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InternalDownloadableFormUploadControl } from './internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonElement } from '../NucleonElement';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\nconst NS = 'downloadable-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Basic form for managing `fx:downloadable` resources.\n * This element requires an augmented version of hAPI currently limited\n * only to the new Foxy Admin.\n *\n * @element foxy-downloadable-form\n * @since 1.22.0\n */\nexport class DownloadableForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      downloadableItemCategories: { attribute: 'downloadable-item-categories' },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ item_category_uri: v }) => !!v || 'item-category-uri:v8n_required',\n      ({ file_name: v }) => !!v || 'upload:v8n_required',\n      ({ price: v }) => typeof v === 'number' || 'price:v8n_required',\n      ({ price: v }) => !v || v >= 0 || 'price:v8n_negative',\n      ({ name: v }) => !!v || 'name:v8n_required',\n      ({ name: v }) => !v || v.length <= 100 || 'name:v8n_too_long',\n      ({ code: v }) => !!v || 'code:v8n_required',\n      ({ code: v }) => !v || v.length <= 50 || 'code:v8n_too_long',\n    ];\n  }\n\n  /** URL of the `fx:downloadable_item_categories` collection for the store. */\n  downloadableItemCategories: string | null = null;\n\n  private readonly __downloadableItemCategoryLoaderId = 'downloadableItemCategoryLoader';\n\n  get disabledSelector(): BooleanSelector {\n    const alwaysDisabled: string[] = [];\n    const loader = this.__downloadableItemCategoryLoader;\n    if (!loader?.in('idle')) alwaysDisabled.push('item-category-uri');\n    return new BooleanSelector(`${alwaysDisabled.join(' ')}${super.disabledSelector}`);\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-async-combo-box-control\n        item-label-path=\"name\"\n        item-value-path=\"_links.self.href\"\n        item-id-path=\"_links.self.href\"\n        infer=\"item-category-uri\"\n        first=${ifDefined(this.downloadableItemCategories ?? void 0)}\n        .selectedItem=${this.__downloadableItemCategoryLoader?.data}\n        .setValue=${(newValue: string) => {\n          this.edit({ item_category_uri: newValue });\n          const newID = parseInt(newValue.split('/').pop() ?? '');\n          if (!isNaN(newID)) this.edit({ item_category_id: newID });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-text-control infer=\"name\"></foxy-internal-text-control>\n      <foxy-internal-text-control infer=\"code\"></foxy-internal-text-control>\n      <foxy-internal-number-control infer=\"price\" min=\"0\"></foxy-internal-number-control>\n\n      <foxy-internal-downloadable-form-upload-control infer=\"upload\">\n      </foxy-internal-downloadable-form-upload-control>\n\n      ${super.renderBody()}\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.form.item_category_uri || void 0)}\n        id=${this.__downloadableItemCategoryLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  protected async _sendPatch(edits: Partial<Data>): Promise<Data> {\n    type UploadUrl = { upload_url: string };\n\n    const data = await super._sendPatch(edits);\n    const createUploadUrl = data._links['fx:create_upload_url'].href;\n    const root = this.renderRoot;\n    const control = root.querySelector<InternalDownloadableFormUploadControl>('[infer=\"upload\"]');\n    const upload = control?.uploadElement;\n\n    if (upload && upload.files.length === 1) {\n      const file = upload.files[0];\n      const url = await this._fetch<UploadUrl>(createUploadUrl, {\n        method: 'POST',\n        body: JSON.stringify({ type: file.type }),\n      });\n\n      upload.files[0].uploadTarget = url.upload_url;\n      upload.uploadFiles();\n    }\n\n    return data;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    type UploadUrl = { upload_url: string };\n\n    const data = await super._sendPost(edits);\n    const createUploadUrl = data._links['fx:create_upload_url'].href;\n    const root = this.renderRoot;\n    const control = root.querySelector<InternalDownloadableFormUploadControl>('[infer=\"upload\"]');\n    const upload = control?.uploadElement;\n\n    if (upload && upload.files.length === 1) {\n      const file = upload.files[0];\n      const url = await this._fetch<UploadUrl>(createUploadUrl, {\n        method: 'POST',\n        body: JSON.stringify({ type: file.type }),\n      });\n\n      upload.files[0].uploadTarget = url.upload_url;\n      upload.uploadFiles();\n    }\n\n    return data;\n  }\n\n  private get __downloadableItemCategoryLoader() {\n    type Loader = NucleonElement<Resource<Rels.ItemCategory>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__downloadableItemCategoryLoaderId}`);\n  }\n}\n"]}
+{"version":3,"file":"DownloadableForm.js","sourceRoot":"","sources":["../../../../src/elements/public/DownloadableForm/DownloadableForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InternalDownloadableFormUploadControl } from './internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\nconst NS = 'downloadable-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Basic form for managing `fx:downloadable` resources.\n * This element requires an augmented version of hAPI currently limited\n * only to the new Foxy Admin.\n *\n * @element foxy-downloadable-form\n * @since 1.22.0\n */\nexport class DownloadableForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      downloadableItemCategories: { attribute: 'downloadable-item-categories' },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ item_category_uri: v }) => !!v || 'item-category-uri:v8n_required',\n      ({ file_name: v }) => !!v || 'upload:v8n_required',\n      ({ price: v }) => typeof v === 'number' || 'price:v8n_required',\n      ({ price: v }) => !v || v >= 0 || 'price:v8n_negative',\n      ({ name: v }) => !!v || 'name:v8n_required',\n      ({ name: v }) => !v || v.length <= 100 || 'name:v8n_too_long',\n      ({ code: v }) => !!v || 'code:v8n_required',\n      ({ code: v }) => !v || v.length <= 50 || 'code:v8n_too_long',\n    ];\n  }\n\n  /** URL of the `fx:downloadable_item_categories` collection for the store. */\n  downloadableItemCategories: string | null = null;\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"group-one\" label=\"\" helper-text=\"\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"name\"></foxy-internal-text-control>\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"code\"></foxy-internal-text-control>\n        <foxy-internal-resource-picker-control\n          layout=\"summary-item\"\n          first=${ifDefined(this.downloadableItemCategories ?? void 0)}\n          infer=\"item-category-uri\"\n          item=\"foxy-item-category-card\"\n        >\n        </foxy-internal-resource-picker-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-two\" label=\"\" helper-text=\"\">\n        <foxy-internal-number-control layout=\"summary-item\" infer=\"price\" min=\"0\">\n        </foxy-internal-number-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-three\" label=\"\" helper-text=\"\">\n        <foxy-internal-downloadable-form-upload-control infer=\"upload\">\n        </foxy-internal-downloadable-form-upload-control>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  protected async _sendPatch(edits: Partial<Data>): Promise<Data> {\n    type UploadUrl = { upload_url: string };\n\n    const data = await super._sendPatch(edits);\n    const createUploadUrl = data._links['fx:create_upload_url'].href;\n    const root = this.renderRoot;\n    const control = root.querySelector<InternalDownloadableFormUploadControl>('[infer=\"upload\"]');\n    const upload = control?.uploadElement;\n\n    if (upload && upload.files.length === 1) {\n      const file = upload.files[0];\n      const url = await this._fetch<UploadUrl>(createUploadUrl, {\n        method: 'POST',\n        body: JSON.stringify({ type: file.type }),\n      });\n\n      upload.files[0].uploadTarget = url.upload_url;\n      upload.uploadFiles();\n    }\n\n    return data;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    type UploadUrl = { upload_url: string };\n\n    const data = await super._sendPost(edits);\n    const createUploadUrl = data._links['fx:create_upload_url'].href;\n    const root = this.renderRoot;\n    const control = root.querySelector<InternalDownloadableFormUploadControl>('[infer=\"upload\"]');\n    const upload = control?.uploadElement;\n\n    if (upload && upload.files.length === 1) {\n      const file = upload.files[0];\n      const url = await this._fetch<UploadUrl>(createUploadUrl, {\n        method: 'POST',\n        body: JSON.stringify({ type: file.type }),\n      });\n\n      upload.files[0].uploadTarget = url.upload_url;\n      upload.uploadFiles();\n    }\n\n    return data;\n  }\n}\n"]}

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

@@ -1,8 +1,9 @@
 import './internal/InternalDownloadableFormUploadControl/index';
-import '../../internal/InternalAsyncComboBoxControl/index';
+import '../../internal/InternalResourcePickerControl/index';
+import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
-import '../NucleonElement/index';
+import '../ItemCategoryCard/index';
 import { DownloadableForm } from './DownloadableForm';
 export { DownloadableForm };

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

@@ -1,9 +1,10 @@
 import "./internal/InternalDownloadableFormUploadControl/index.js";
-import "../../internal/InternalAsyncComboBoxControl/index.js";
+import "../../internal/InternalResourcePickerControl/index.js";
+import "../../internal/InternalSummaryControl/index.js";
 import "../../internal/InternalNumberControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
-import "../NucleonElement/index.js";
+import "../ItemCategoryCard/index.js";
 import { DownloadableForm } from "./DownloadableForm.js";
 customElements.define('foxy-downloadable-form', DownloadableForm);
 export { DownloadableForm };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/DownloadableForm/index.ts"],"names":[],"mappings":"AAAA,mEAAgE;AAChE,8DAA2D;AAC3D,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAC3C,oCAAiC;AAEjC,OAAO,EAAE,gBAAgB,EAAE,8BAA2B;AAEtD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import './internal/InternalDownloadableFormUploadControl/index';\nimport '../../internal/InternalAsyncComboBoxControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\nimport '../NucleonElement/index';\n\nimport { DownloadableForm } from './DownloadableForm';\n\ncustomElements.define('foxy-downloadable-form', DownloadableForm);\n\nexport { DownloadableForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/DownloadableForm/index.ts"],"names":[],"mappings":"AAAA,mEAAgE;AAChE,+DAA4D;AAC5D,wDAAqD;AACrD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAC3C,sCAAmC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,8BAA2B;AAEtD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,CAAC;AAElE,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import './internal/InternalDownloadableFormUploadControl/index';\nimport '../../internal/InternalResourcePickerControl/index';\nimport '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\nimport '../ItemCategoryCard/index';\n\nimport { DownloadableForm } from './DownloadableForm';\n\ncustomElements.define('foxy-downloadable-form', DownloadableForm);\n\nexport { DownloadableForm };\n"]}

package/dist/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl.d.ts

@@ -2,6 +2,7 @@ import type { UploadElement } from '@vaadin/vaadin-upload';
 import { TemplateResult } from 'lit-html';
 import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
 export declare class InternalDownloadableFormUploadControl extends InternalControl {
+    private __ignoreNextFilesChange;
     get uploadElement(): UploadElement | null;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;

package/dist/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl.js

@@ -3,44 +3,31 @@ import { InternalControl } from "../../../../internal/InternalControl/InternalCo
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from "../../../../../utils/class-map.js";
 export class InternalDownloadableFormUploadControl extends InternalControl {
+    constructor() {
+        super(...arguments);
+        this.__ignoreNextFilesChange = false;
+    }
     get uploadElement() {
         return this.renderRoot.querySelector('vaadin-upload');
     }
     renderControl() {
         return html `
-      <section
+      <vaadin-upload
+        max-file-size="524288000"
+        max-files=${ifDefined(this.disabled || this.readonly ? '0' : '2')}
         class=${classMap({
-            'grid gap-xs group leading-xs transition-colors': true,
-            'hover-text-body': !this.disabled && !this.readonly,
-            'text-secondary': !this.disabled,
+            'foxy-downloadable-form-upload transition-colors p-0 rounded-none': true,
             'text-disabled': this.disabled,
         })}
+        method="PUT"
+        no-auto
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        .i18n=${this.__uploadI18n}
+        @files-changed=${this.__handleFilesChanged}
+        @upload-request=${this.__handleUploadRequest}
       >
-        <foxy-i18n infer="" class="font-medium text-s" key="label"></foxy-i18n>
-
-        <vaadin-upload
-          max-file-size="524288000"
-          max-files=${ifDefined(this.disabled || this.readonly ? '0' : '2')}
-          style="padding: calc((0.625em + (var(--lumo-border-radius) / 4) - 1px) - var(--lumo-space-xs)) calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
-          class=${classMap({
-            'rounded-t-l rounded-b-l border transition-colors': true,
-            'border-dashed border-contrast-30': this.readonly,
-            'border-solid border-contrast-10': !this.readonly,
-            'group-hover-border-contrast-20': !this.disabled && !this.readonly,
-            'foxy-downloadable-form-upload': true,
-        })}
-          method="PUT"
-          no-auto
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          .i18n=${this.__uploadI18n}
-          @files-changed=${this.__handleFilesChanged}
-          @upload-request=${this.__handleUploadRequest}
-        >
-        </vaadin-upload>
-
-        <foxy-i18n infer="" class="text-xs" key="helper_text"></foxy-i18n>
-      </section>
+      </vaadin-upload>
     `;
     }
     updated(changes) {
@@ -49,6 +36,7 @@ export class InternalDownloadableFormUploadControl extends InternalControl {
         const upload = this.renderRoot.querySelector('vaadin-upload');
         if (upload && nucleon) {
             if (nucleon.in({ idle: { snapshot: 'clean' } }) && upload.files.length === 0) {
+                this.__ignoreNextFilesChange = true;
                 upload.files = [
                     // @ts-expect-error type doesn't match but it's ok because vaadin docs suggest this as a solution
                     {
@@ -60,6 +48,7 @@ export class InternalDownloadableFormUploadControl extends InternalControl {
                 ];
             }
             else if (nucleon.in({ idle: { template: 'clean' } })) {
+                this.__ignoreNextFilesChange = true;
                 upload.files = [];
             }
         }
@@ -109,6 +98,10 @@ export class InternalDownloadableFormUploadControl extends InternalControl {
     }
     __handleFilesChanged(evt) {
         var _a, _b, _c;
+        if (this.__ignoreNextFilesChange) {
+            this.__ignoreNextFilesChange = false;
+            return;
+        }
         const upload = evt.currentTarget;
         const nucleon = this.nucleon;
         const files = upload.files;

package/dist/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalDownloadableFormUploadControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DownloadableForm } from '../../DownloadableForm';\nimport type { UploadElement } from '@vaadin/vaadin-upload';\n\nimport { html, TemplateResult } from 'lit-html';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../../../utils/class-map';\n\nexport class InternalDownloadableFormUploadControl extends InternalControl {\n  get uploadElement(): UploadElement | null {\n    return this.renderRoot.querySelector<UploadElement>('vaadin-upload');\n  }\n\n  renderControl(): TemplateResult {\n    return html`\n      <section\n        class=${classMap({\n          'grid gap-xs group leading-xs transition-colors': true,\n          'hover-text-body': !this.disabled && !this.readonly,\n          'text-secondary': !this.disabled,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <foxy-i18n infer=\"\" class=\"font-medium text-s\" key=\"label\"></foxy-i18n>\n\n        <vaadin-upload\n          max-file-size=\"524288000\"\n          max-files=${ifDefined(this.disabled || this.readonly ? '0' : '2')}\n          style=\"padding: calc((0.625em + (var(--lumo-border-radius) / 4) - 1px) - var(--lumo-space-xs)) calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          class=${classMap({\n            'rounded-t-l rounded-b-l border transition-colors': true,\n            'border-dashed border-contrast-30': this.readonly,\n            'border-solid border-contrast-10': !this.readonly,\n            'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n            'foxy-downloadable-form-upload': true,\n          })}\n          method=\"PUT\"\n          no-auto\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          .i18n=${this.__uploadI18n}\n          @files-changed=${this.__handleFilesChanged}\n          @upload-request=${this.__handleUploadRequest}\n        >\n        </vaadin-upload>\n\n        <foxy-i18n infer=\"\" class=\"text-xs\" key=\"helper_text\"></foxy-i18n>\n      </section>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    const nucleon = this.nucleon as DownloadableForm | null;\n    const upload = this.renderRoot.querySelector<UploadElement>('vaadin-upload');\n\n    if (upload && nucleon) {\n      if (nucleon.in({ idle: { snapshot: 'clean' } }) && upload.files.length === 0) {\n        upload.files = [\n          // @ts-expect-error type doesn't match but it's ok because vaadin docs suggest this as a solution\n          {\n            complete: true,\n            progress: 100,\n            status: this.t('status_complete'),\n            name: nucleon.data.file_name,\n          },\n        ];\n      } else if (nucleon.in({ idle: { template: 'clean' } })) {\n        upload.files = [];\n      }\n    }\n  }\n\n  private get __uploadI18n() {\n    return {\n      dropFiles: {\n        one: this.t('drop_label'),\n        many: this.t('drop_label'),\n      },\n      addFiles: {\n        one: this.t('select_label'),\n        many: this.t('select_label'),\n      },\n      cancel: this.t('cancel'),\n      error: {\n        tooManyFiles: this.t('error_too_many_files'),\n        fileIsTooBig: this.t('error_too_big'),\n        incorrectFileType: '',\n      },\n      uploading: {\n        status: {\n          connecting: this.t('status_connecting'),\n          stalled: this.t('status_stalled'),\n          processing: this.t('status_processing'),\n          held: this.t('status_held'),\n        },\n        remainingTime: {\n          prefix: this.t('remaining_prefix'),\n          unknown: this.t('remaining_unknown'),\n        },\n        error: {\n          serverUnavailable: this.t('error_server_unavailable'),\n          unexpectedServerError: this.t('error_unexpected_server_error'),\n          forbidden: this.t('error_forbidden'),\n        },\n      },\n      units: {\n        size: ['B', 'KB', 'MB', 'GB'],\n        sizeBase: 1024,\n      },\n    };\n  }\n\n  private __handleUploadRequest(evt: CustomEvent<{ xhr: XMLHttpRequest; file: File }>) {\n    evt.preventDefault();\n    evt.detail.xhr.send(evt.detail.file);\n  }\n\n  private __handleFilesChanged(evt: CustomEvent) {\n    const upload = evt.currentTarget as UploadElement;\n    const nucleon = this.nucleon as DownloadableForm | null;\n\n    const files = upload.files;\n    if (files.length > 1) upload.files = [upload.files[0]];\n    if (files[0]?.complete && !files[0].status) files[0].status = this.t('status_complete');\n    nucleon?.edit({ file_name: upload.files[0]?.name ?? '' });\n  }\n}\n"]}
+{"version":3,"file":"InternalDownloadableFormUploadControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/InternalDownloadableFormUploadControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DownloadableForm } from '../../DownloadableForm';\nimport type { UploadElement } from '@vaadin/vaadin-upload';\n\nimport { html, TemplateResult } from 'lit-html';\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../../../utils/class-map';\n\nexport class InternalDownloadableFormUploadControl extends InternalControl {\n  private __ignoreNextFilesChange = false;\n\n  get uploadElement(): UploadElement | null {\n    return this.renderRoot.querySelector<UploadElement>('vaadin-upload');\n  }\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-upload\n        max-file-size=\"524288000\"\n        max-files=${ifDefined(this.disabled || this.readonly ? '0' : '2')}\n        class=${classMap({\n          'foxy-downloadable-form-upload transition-colors p-0 rounded-none': true,\n          'text-disabled': this.disabled,\n        })}\n        method=\"PUT\"\n        no-auto\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .i18n=${this.__uploadI18n}\n        @files-changed=${this.__handleFilesChanged}\n        @upload-request=${this.__handleUploadRequest}\n      >\n      </vaadin-upload>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    const nucleon = this.nucleon as DownloadableForm | null;\n    const upload = this.renderRoot.querySelector<UploadElement>('vaadin-upload');\n\n    if (upload && nucleon) {\n      if (nucleon.in({ idle: { snapshot: 'clean' } }) && upload.files.length === 0) {\n        this.__ignoreNextFilesChange = true;\n        upload.files = [\n          // @ts-expect-error type doesn't match but it's ok because vaadin docs suggest this as a solution\n          {\n            complete: true,\n            progress: 100,\n            status: this.t('status_complete'),\n            name: nucleon.data.file_name,\n          },\n        ];\n      } else if (nucleon.in({ idle: { template: 'clean' } })) {\n        this.__ignoreNextFilesChange = true;\n        upload.files = [];\n      }\n    }\n  }\n\n  private get __uploadI18n() {\n    return {\n      dropFiles: {\n        one: this.t('drop_label'),\n        many: this.t('drop_label'),\n      },\n      addFiles: {\n        one: this.t('select_label'),\n        many: this.t('select_label'),\n      },\n      cancel: this.t('cancel'),\n      error: {\n        tooManyFiles: this.t('error_too_many_files'),\n        fileIsTooBig: this.t('error_too_big'),\n        incorrectFileType: '',\n      },\n      uploading: {\n        status: {\n          connecting: this.t('status_connecting'),\n          stalled: this.t('status_stalled'),\n          processing: this.t('status_processing'),\n          held: this.t('status_held'),\n        },\n        remainingTime: {\n          prefix: this.t('remaining_prefix'),\n          unknown: this.t('remaining_unknown'),\n        },\n        error: {\n          serverUnavailable: this.t('error_server_unavailable'),\n          unexpectedServerError: this.t('error_unexpected_server_error'),\n          forbidden: this.t('error_forbidden'),\n        },\n      },\n      units: {\n        size: ['B', 'KB', 'MB', 'GB'],\n        sizeBase: 1024,\n      },\n    };\n  }\n\n  private __handleUploadRequest(evt: CustomEvent<{ xhr: XMLHttpRequest; file: File }>) {\n    evt.preventDefault();\n    evt.detail.xhr.send(evt.detail.file);\n  }\n\n  private __handleFilesChanged(evt: CustomEvent) {\n    if (this.__ignoreNextFilesChange) {\n      this.__ignoreNextFilesChange = false;\n      return;\n    }\n\n    const upload = evt.currentTarget as UploadElement;\n    const nucleon = this.nucleon as DownloadableForm | null;\n\n    const files = upload.files;\n    if (files.length > 1) upload.files = [upload.files[0]];\n    if (files[0]?.complete && !files[0].status) files[0].status = this.t('status_complete');\n    nucleon?.edit({ file_name: upload.files[0]?.name ?? '' });\n  }\n}\n"]}

package/dist/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/style.js

@@ -1,7 +1,7 @@
 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';
 import { css } from 'lit-element';
 registerStyles('vaadin-upload', css `:host(.foxy-downloadable-form-upload) vaadin-upload-file{
-  padding:var(--lumo-space-xs) 0 0 0;
+  padding:var(--lumo-space-s) 0 0 0;
   line-height:var(--lumo-line-height-xs);
 }
 
@@ -20,6 +20,11 @@ registerStyles('vaadin-upload', css `:host(.foxy-downloadable-form-upload) vaadi
   display:none;
 }
 
+:host(.foxy-downloadable-form-upload) [part='upload-button']{
+  margin:0;
+  border-radius:var(--lumo-border-radius-s);
+}
+
 :host(.foxy-downloadable-form-upload[disabled]) vaadin-upload-file::part(status){
   color:var(--lumo-disabled-text-color);
 }

package/dist/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../../../src/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCF,CACF,CAAC","sourcesContent":["import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\nimport { css } from 'lit-element';\n\nregisterStyles(\n  'vaadin-upload',\n  css`\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file {\n      padding: var(--lumo-space-xs) 0 0 0;\n      line-height: var(--lumo-line-height-xs);\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(commands) {\n      margin-right: -4px;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(progress) {\n      margin-right: 2px;\n      margin-left: 0;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(start-button),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(clear-button),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(retry-button) {\n      display: none;\n    }\n\n    :host(.foxy-downloadable-form-upload[disabled]) vaadin-upload-file::part(status) {\n      color: var(--lumo-disabled-text-color);\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(warning-icon),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(done-icon) {\n      width: 0;\n      margin: 0;\n      opacity: 0;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(info) {\n      align-items: flex-start;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(name) {\n      font-weight: 500;\n    }\n  `\n);\n"]}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../../../src/elements/public/DownloadableForm/internal/InternalDownloadableFormUploadControl/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CF,CACF,CAAC","sourcesContent":["import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\nimport { css } from 'lit-element';\n\nregisterStyles(\n  'vaadin-upload',\n  css`\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file {\n      padding: var(--lumo-space-s) 0 0 0;\n      line-height: var(--lumo-line-height-xs);\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(commands) {\n      margin-right: -4px;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(progress) {\n      margin-right: 2px;\n      margin-left: 0;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(start-button),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(clear-button),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(retry-button) {\n      display: none;\n    }\n\n    :host(.foxy-downloadable-form-upload) [part='upload-button'] {\n      margin: 0;\n      border-radius: var(--lumo-border-radius-s);\n    }\n\n    :host(.foxy-downloadable-form-upload[disabled]) vaadin-upload-file::part(status) {\n      color: var(--lumo-disabled-text-color);\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(warning-icon),\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(done-icon) {\n      width: 0;\n      margin: 0;\n      opacity: 0;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(info) {\n      align-items: flex-start;\n    }\n\n    :host(.foxy-downloadable-form-upload) vaadin-upload-file::part(name) {\n      font-weight: 500;\n    }\n  `\n);\n"]}

package/dist/mixins/themeable.js

@@ -1591,12 +1591,6 @@ option{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
-@media (hover: hover) {
-  .group:hover .group-hover-border-contrast-20 {
-    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
-  }
-}
-
 .focus-within-border-primary-50:focus-within {
   border-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }

package/dist/mixins/themeable.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          option {\n            color: var(--lumo-body-text-color);\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n\n              .hljs-tag {\n                color: var(--lumo-tertiary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-name {\n                color: var(--lumo-primary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-attr {\n                color: var(--lumo-secondary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-string {\n                color: var(--lumo-success-text-color);\n                font-weight: 500;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      #button {\n        cursor: pointer;\n      }\n\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
+{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          option {\n            color: var(--lumo-body-text-color);\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n\n              .hljs-tag {\n                color: var(--lumo-tertiary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-name {\n                color: var(--lumo-primary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-attr {\n                color: var(--lumo-secondary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-string {\n                color: var(--lumo-success-text-color);\n                font-weight: 500;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      #button {\n        cursor: pointer;\n      }\n\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.48.1-beta.1",
+  "version": "1.49.0-beta.1",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-14350c09.js

@@ -1 +0,0 @@
-import"./foxy-spinner.js";import{I as e}from"./shared-ffd0589e.js";customElements.define("foxy-internal-card",e);