@foxy.io/elements 1.28.0 → 1.29.0-beta.2

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

@@ -1,17 +1,22 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { FetchEvent } from "../../public/NucleonElement/FetchEvent.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
 import { classMap } from "../../../utils/class-map.js";
 import { uniqueId } from 'lodash-es';
 import { spread } from '@open-wc/lit-helpers';
-import { html } from 'lit-html';
 import memoize from 'lodash-es/memoize';
 export class InternalResourcePickerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.getDisplayValueOptions = resource => ({ resource });
         this.virtualHost = uniqueId('internal-resource-picker-control-');
+        this.formProps = {};
         this.filters = [];
+        this.layout = null;
         this.first = null;
         this.item = null;
+        this.form = null;
         this.__getItemRenderer = memoize((item) => {
             return new Function('ctx', `return ctx.html\`
         <${item !== null && item !== void 0 ? item : 'foxy-null'}
@@ -27,31 +32,127 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            getDisplayValueOptions: { attribute: false },
             virtualHost: {},
+            formProps: { type: Object },
             filters: { type: Array },
+            layout: {},
             first: {},
             item: {},
+            form: {},
         };
     }
     renderControl() {
-        var _a, _b;
+        var _a;
+        const dialogProps = {
+            ...this.formProps,
+            '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },
+        };
         return html `
       <foxy-form-dialog
         parent="foxy://${this.virtualHost}/select"
+        header="header"
         infer="dialog"
-        form="foxy-internal-resource-picker-control-form"
         alert
-        .props=${{
-            '.selectionProps': {
-                '.filters': this.filters,
-                '.first': this.first,
-                '.item': this.item,
-            },
-        }}
+        .props=${dialogProps}
+        .form=${(_a = this.form) !== null && _a !== void 0 ? _a : 'foxy-internal-resource-picker-control-form'}
         @fetch=${this.__handleFetchEvent}
       >
       </foxy-form-dialog>
 
+      ${this.layout === 'summary-item'
+            ? this.__renderSummaryItemLayout()
+            : this.__renderStandaloneLayout()}
+    `;
+    }
+    updated(changes) {
+        var _a, _b;
+        super.updated(changes);
+        if (changes.has('item'))
+            (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    __renderSummaryItemLayout() {
+        const resource = this.renderRoot.querySelector('#value');
+        const onClick = (evt) => {
+            if (this.disabled || this.readonly)
+                return;
+            const button = evt.currentTarget;
+            const dialog = this.renderRoot.querySelector('foxy-form-dialog');
+            dialog.href = '';
+            dialog.show(button);
+        };
+        return html `
+      <div class="flex items-start leading-xs gap-m">
+        <div class="flex-1">
+          <div class="text-m text-body whitespace-nowrap">${this.label}</div>
+          <div class="text-s text-secondary">${this.helperText}</div>
+          <div class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </div>
+        </div>
+
+        <div class="flex items-center gap-xs">
+          <button
+            aria-label=${this.t('select')}
+            class=${classMap({
+            'text-right min-w-0 transition-colors transition-opacity': true,
+            'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,
+            'font-medium': !this.readonly,
+        })}
+            ?disabled=${this.disabled || this.readonly}
+            @click=${onClick}
+          >
+            <div class="truncate min-w-0">
+              ${this._value
+            ? html `
+                    <foxy-i18n
+                      infer=""
+                      key="value"
+                      .options=${(resource === null || resource === void 0 ? void 0 : resource.data) ? this.getDisplayValueOptions(resource.data)
+                : { context: (resource === null || resource === void 0 ? void 0 : resource.in('fail')) ? 'fail' : 'busy' }}
+                    >
+                    </foxy-i18n>
+                  `
+            : this.placeholder}
+            </div>
+          </button>
+
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+            'rounded-full transition-colors': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+        })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+            this._value = '';
+            this.dispatchEvent(new CustomEvent('clear'));
+        }}
+          >
+            ${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>`}
+          </button>
+        </div>
+      </div>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(this._value || void 0)}
+        id="value"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+    }
+    __renderStandaloneLayout() {
+        var _a, _b;
+        return html `
       <div class="block group">
         <div
           class=${classMap({
@@ -130,12 +231,6 @@ export class InternalResourcePickerControl extends InternalEditableControl {
       </div>
     `;
     }
-    updated(changes) {
-        var _a, _b;
-        super.updated(changes);
-        if (changes.has('item'))
-            (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
     __handleFetchEvent(event) {
         if (!(event instanceof FetchEvent))
             return;
@@ -149,15 +244,15 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             return event.respondWith(this.__handleEmpty());
         }
     }
-    async __handleEmpty() {
+    async __handleSelect(request) {
+        const body = (await request.clone().json());
+        this._value = body.selection;
         return new Response(JSON.stringify({
             _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
             message: 'Resource selected.',
         }));
     }
-    async __handleSelect(request) {
-        const body = (await request.clone().json());
-        this._value = body.selection;
+    async __handleEmpty() {
         return new Response(JSON.stringify({
             _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
             message: 'Resource selected.',

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 { 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 { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\nimport { html } from 'lit-html';\n\nimport memoize from 'lodash-es/memoize';\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      virtualHost: {},\n      filters: { type: Array },\n      first: {},\n      item: {},\n    };\n  }\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  filters: Option[] = [];\n\n  first: string | null = null;\n\n  item: string | null = 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    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        infer=\"dialog\"\n        form=\"foxy-internal-resource-picker-control-form\"\n        alert\n        .props=${{\n          '.selectionProps': {\n            '.filters': this.filters,\n            '.first': this.first,\n            '.item': this.item,\n          },\n        }}\n        @fetch=${this.__handleFetchEvent}\n      >\n      </foxy-form-dialog>\n\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <button\n          class=${classMap({\n            'block w-full rounded text-left transition-colors': true,\n            'border border-dashed': true,\n            'border-transparent': !this.readonly,\n            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default bg-contrast-5': this.disabled,\n            'cursor-default border-contrast-30': this.readonly,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\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            ${this.__getItemRenderer(this.item)({\n              html,\n              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          </div>\n        </button>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\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 __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 __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 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"]}
+{"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 { 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      virtualHost: {},\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  virtualHost = uniqueId('internal-resource-picker-control-');\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 __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=\"flex items-start leading-xs gap-m\">\n        <div class=\"flex-1\">\n          <div class=\"text-m text-body whitespace-nowrap\">${this.label}</div>\n          <div class=\"text-s text-secondary\">${this.helperText}</div>\n          <div class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-xs\">\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=${() => {\n              this._value = '';\n              this.dispatchEvent(new CustomEvent('clear'));\n            }}\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      </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    return html`\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <button\n          class=${classMap({\n            'block w-full rounded text-left transition-colors': true,\n            'border border-dashed': true,\n            'border-transparent': !this.readonly,\n            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default bg-contrast-5': this.disabled,\n            'cursor-default border-contrast-30': this.readonly,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\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            ${this.__getItemRenderer(this.item)({\n              html,\n              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          </div>\n        </button>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this._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"]}

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

@@ -17,10 +17,6 @@ export class InternalResourcePickerControlForm extends InternalForm {
     }
     renderBody() {
         return html `
-      <h2 class="leading-xs text-xxl font-medium break-all">
-        <foxy-i18n infer="" key="header"></foxy-i18n>
-      </h2>
-
       <foxy-internal-async-list-control
         infer="selection"
         form="foxy-null"

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

@@ -1 +1 @@
-{"version":3,"file":"InternalResourcePickerControlForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,MAAM,OAAO,iCAAkC,SAAQ,YAAkB;IAAzE;;QAYE,mBAAc,GAAiC,EAAE,CAAC;IAuBpD,CAAC;IAlCC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,cAAc,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACrC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,CAAC;IAID,UAAU;QACR,OAAO,IAAI,CAAA;;;;;;;;;;qBAUM,CAAC,GAAwB,EAAE,EAAE;YACxC,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;cACK,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;;;KAGpC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource, NucleonV8N } from '../../public/NucleonElement/types';\n\nimport { InternalForm } from '../InternalForm/InternalForm';\nimport { spread } from '@open-wc/lit-helpers';\nimport { html } from 'lit-html';\n\ntype Data = HALJSONResource & { selection: string; query: string };\n\nexport class InternalResourcePickerControlForm extends InternalForm<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      selectionProps: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ selection: v }) => (v === undefined ? 'silent:selection_required' : true)];\n  }\n\n  selectionProps: Record<PropertyKey, unknown> = {};\n\n  renderBody(): TemplateResult {\n    return html`\n      <h2 class=\"leading-xs text-xxl font-medium break-all\">\n        <foxy-i18n infer=\"\" key=\"header\"></foxy-i18n>\n      </h2>\n\n      <foxy-internal-async-list-control\n        infer=\"selection\"\n        form=\"foxy-null\"\n        hide-delete-button\n        hide-create-button\n        @itemclick=${(evt: CustomEvent<string>) => {\n          evt.preventDefault();\n          this.edit({ selection: evt.detail });\n          this.submit();\n        }}\n        ...=${spread(this.selectionProps)}\n      >\n      </foxy-internal-async-list-control>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalResourcePickerControlForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,MAAM,OAAO,iCAAkC,SAAQ,YAAkB;IAAzE;;QAYE,mBAAc,GAAiC,EAAE,CAAC;IAmBpD,CAAC;IA9BC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,cAAc,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACrC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,CAAC;IAID,UAAU;QACR,OAAO,IAAI,CAAA;;;;;;qBAMM,CAAC,GAAwB,EAAE,EAAE;YACxC,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;cACK,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;;;KAGpC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource, NucleonV8N } from '../../public/NucleonElement/types';\n\nimport { InternalForm } from '../InternalForm/InternalForm';\nimport { spread } from '@open-wc/lit-helpers';\nimport { html } from 'lit-html';\n\ntype Data = HALJSONResource & { selection: string; query: string };\n\nexport class InternalResourcePickerControlForm extends InternalForm<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      selectionProps: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ selection: v }) => (v === undefined ? 'silent:selection_required' : true)];\n  }\n\n  selectionProps: Record<PropertyKey, unknown> = {};\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-internal-async-list-control\n        infer=\"selection\"\n        form=\"foxy-null\"\n        hide-delete-button\n        hide-create-button\n        @itemclick=${(evt: CustomEvent<string>) => {\n          evt.preventDefault();\n          this.edit({ selection: evt.detail });\n          this.submit();\n        }}\n        ...=${spread(this.selectionProps)}\n      >\n      </foxy-internal-async-list-control>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalResourcePickerControl/index.d.ts

@@ -1,6 +1,8 @@
 import '../InternalAsyncListControl/index';
 import '../InternalEditableControl/index';
 import '../InternalForm/index';
+import '../../public/NucleonElement/index';
 import '../../public/FormDialog/index';
+import '../../public/I18n/index';
 import { InternalResourcePickerControl } from './InternalResourcePickerControl';
 export { InternalResourcePickerControl };

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

@@ -1,7 +1,9 @@
 import "../InternalAsyncListControl/index.js";
 import "../InternalEditableControl/index.js";
 import "../InternalForm/index.js";
+import "../../public/NucleonElement/index.js";
 import "../../public/FormDialog/index.js";
+import "../../public/I18n/index.js";
 import { InternalResourcePickerControlForm } from "./InternalResourcePickerControlForm.js";
 import { InternalResourcePickerControl } from "./InternalResourcePickerControl.js";
 customElements.define('foxy-internal-resource-picker-control-form', InternalResourcePickerControlForm);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,6CAA0C;AAC1C,kCAA+B;AAE/B,0CAAuC;AAEvC,OAAO,EAAE,iCAAiC,EAAE,+CAA4C;AACxF,OAAO,EAAE,6BAA6B,EAAE,2CAAwC;AAEhF,cAAc,CAAC,MAAM,CACnB,4CAA4C,EAC5C,iCAAiC,CAClC,CAAC;AAEF,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,6BAA6B,CAAC,CAAC;AAE9F,OAAO,EAAE,6BAA6B,EAAE,CAAC","sourcesContent":["import '../InternalAsyncListControl/index';\nimport '../InternalEditableControl/index';\nimport '../InternalForm/index';\n\nimport '../../public/FormDialog/index';\n\nimport { InternalResourcePickerControlForm } from './InternalResourcePickerControlForm';\nimport { InternalResourcePickerControl } from './InternalResourcePickerControl';\n\ncustomElements.define(\n  'foxy-internal-resource-picker-control-form',\n  InternalResourcePickerControlForm\n);\n\ncustomElements.define('foxy-internal-resource-picker-control', InternalResourcePickerControl);\n\nexport { InternalResourcePickerControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,6CAA0C;AAC1C,kCAA+B;AAE/B,8CAA2C;AAC3C,0CAAuC;AACvC,oCAAiC;AAEjC,OAAO,EAAE,iCAAiC,EAAE,+CAA4C;AACxF,OAAO,EAAE,6BAA6B,EAAE,2CAAwC;AAEhF,cAAc,CAAC,MAAM,CACnB,4CAA4C,EAC5C,iCAAiC,CAClC,CAAC;AAEF,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,6BAA6B,CAAC,CAAC;AAE9F,OAAO,EAAE,6BAA6B,EAAE,CAAC","sourcesContent":["import '../InternalAsyncListControl/index';\nimport '../InternalEditableControl/index';\nimport '../InternalForm/index';\n\nimport '../../public/NucleonElement/index';\nimport '../../public/FormDialog/index';\nimport '../../public/I18n/index';\n\nimport { InternalResourcePickerControlForm } from './InternalResourcePickerControlForm';\nimport { InternalResourcePickerControl } from './InternalResourcePickerControl';\n\ncustomElements.define(\n  'foxy-internal-resource-picker-control-form',\n  InternalResourcePickerControlForm\n);\n\ncustomElements.define('foxy-internal-resource-picker-control', InternalResourcePickerControl);\n\nexport { InternalResourcePickerControl };\n"]}

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

@@ -2,7 +2,7 @@ import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { Option } from './types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
- * Internal control wrapper for `vaadin-select` element.
+ * Internal control wrapper for select elements.
  *
  * @since 1.21.0
  * @element foxy-internal-select-control
@@ -11,8 +11,11 @@ export declare class InternalSelectControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     /** List of radio buttons to render. */
     options: Option[];
+    /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */
+    layout: 'summary-item' | 'standalone' | null;
     /** Same as the "theme" attribute/property of `vaadin-combo-box`. */
     theme: string | null;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __renderSummaryItemLayout;
 }

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js

@@ -1,8 +1,9 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
+import { classMap } from "../../../utils/class-map.js";
 /**
- * Internal control wrapper for `vaadin-select` element.
+ * Internal control wrapper for select elements.
  *
  * @since 1.21.0
  * @element foxy-internal-select-control
@@ -12,6 +13,8 @@ export class InternalSelectControl extends InternalEditableControl {
         super(...arguments);
         /** List of radio buttons to render. */
         this.options = [];
+        /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */
+        this.layout = null;
         /** Same as the "theme" attribute/property of `vaadin-combo-box`. */
         this.theme = null;
     }
@@ -19,11 +22,14 @@ export class InternalSelectControl extends InternalEditableControl {
         return {
             ...super.properties,
             options: { type: Array },
+            layout: {},
             theme: { type: String },
         };
     }
     renderControl() {
         var _a;
+        if (this.layout === 'summary-item')
+            return this.__renderSummaryItemLayout();
         return html `
       <vaadin-combo-box
         item-value-path="value"
@@ -60,5 +66,67 @@ export class InternalSelectControl extends InternalEditableControl {
         if (comboBox && comboBox.value !== this._value)
             comboBox.value = this._value;
     }
+    __renderSummaryItemLayout() {
+        const selection = this.options.find(v => v.value === this._value);
+        return html `
+      <div class="flex items-start leading-xs">
+        <div class="flex-1">
+          <label class="text-m text-body" for="select">${this.label}</label>
+          <p class="text-s text-secondary">${this.helperText}</p>
+          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        <div
+          class=${classMap({
+            'relative rounded-s transition-colors transition-opacity': true,
+            'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
+            'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+        >
+          <div class="flex items-center gap-xs">
+            <div>
+              ${selection
+            ? 'label' in selection
+                ? this.t(selection.label)
+                : selection.rawLabel
+            : this.placeholder}
+            </div>
+            ${this.readonly
+            ? ''
+            : 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)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+          </div>
+
+          <select
+            class=${classMap({
+            'absolute inset-0 opacity-0': true,
+            'cursor-pointer': !this.disabled && !this.readonly,
+        })}
+            id="select"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly}
+            @change=${(evt) => {
+            evt.stopPropagation();
+            this._value = evt.target.value;
+        }}
+          >
+            <option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
+            ${this.options.map(option => html `
+                  <option
+                    value=${option.value}
+                    ?selected=${selection && option.value === this._value}
+                  >
+                    ${'label' in option ? this.t(option.label) : option.rawLabel}
+                  </option>
+                `)}
+          </select>
+        </div>
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalSelectControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QASE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,oEAAoE;QACpE,UAAK,GAAkB,IAAI,CAAC;IAuC9B,CAAC;IAnDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,OAAO,IAAI,CAAA;;;;wBAIS,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;sBAE/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACnC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;YACjE,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;iBACM,IAAI,CAAC,MAAM;kBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAgC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;IACzF,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Internal control wrapper for `vaadin-select` element.\n *\n * @since 1.21.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      theme: { type: String },\n    };\n  }\n\n  /** List of radio buttons to render. */\n  options: Option[] = [];\n\n  /** Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n  theme: string | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-combo-box\n        item-value-path=\"value\"\n        item-label-path=\"label\"\n        error-message=${ifDefined(this._errorMessage)}\n        item-id-path=\"value\"\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        clear-button-visible\n        .checkValidity=${this._checkValidity}\n        .items=${this.options.map(option => ({\n          label: 'label' in option ? this.t(option.label) : option.rawLabel,\n          value: option.value,\n        }))}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          evt.stopPropagation();\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n          comboBox.validate();\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n    if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n  }\n}\n"]}
+{"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control wrapper for select elements.\n *\n * @since 1.21.0\n * @element foxy-internal-select-control\n */\nexport class InternalSelectControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      layout: {},\n      theme: { type: String },\n    };\n  }\n\n  /** List of radio buttons to render. */\n  options: Option[] = [];\n\n  /** Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. */\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  /** Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n  theme: string | null = null;\n\n  renderControl(): TemplateResult {\n    if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=\"value\"\n        item-label-path=\"label\"\n        error-message=${ifDefined(this._errorMessage)}\n        item-id-path=\"value\"\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        clear-button-visible\n        .checkValidity=${this._checkValidity}\n        .items=${this.options.map(option => ({\n          label: 'label' in option ? this.t(option.label) : option.rawLabel,\n          value: option.value,\n        }))}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          evt.stopPropagation();\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n          comboBox.validate();\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n    if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n  }\n\n  private __renderSummaryItemLayout() {\n    const selection = this.options.find(v => v.value === this._value);\n\n    return html`\n      <div class=\"flex items-start leading-xs\">\n        <div class=\"flex-1\">\n          <label class=\"text-m text-body\" for=\"select\">${this.label}</label>\n          <p class=\"text-s text-secondary\">${this.helperText}</p>\n          <p class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </p>\n        </div>\n\n        <div\n          class=${classMap({\n            'relative rounded-s transition-colors transition-opacity': true,\n            'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n            'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n            'font-medium': !this.readonly,\n          })}\n        >\n          <div class=\"flex items-center gap-xs\">\n            <div>\n              ${selection\n                ? 'label' in selection\n                  ? this.t(selection.label)\n                  : selection.rawLabel\n                : this.placeholder}\n            </div>\n            ${this.readonly\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)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n          </div>\n\n          <select\n            class=${classMap({\n              'absolute inset-0 opacity-0': true,\n              'cursor-pointer': !this.disabled && !this.readonly,\n            })}\n            id=\"select\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly}\n            @change=${(evt: Event) => {\n              evt.stopPropagation();\n              this._value = (evt.target as HTMLSelectElement).value;\n            }}\n          >\n            <option value=\"\" ?selected=${!selection} disabled hidden>${this.placeholder}</option>\n            ${this.options.map(\n              option =>\n                html`\n                  <option\n                    value=${option.value}\n                    ?selected=${selection && option.value === this._value}\n                  >\n                    ${'label' in option ? this.t(option.label) : option.rawLabel}\n                  </option>\n                `\n            )}\n          </select>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import type { CSSResultArray } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+export declare class InternalSummaryControl extends InternalEditableControl {
+    static get styles(): CSSResultArray;
+    renderLightDom(): void;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js

@@ -0,0 +1,28 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html, css } from 'lit-element';
+export class InternalSummaryControl extends InternalEditableControl {
+    static get styles() {
+        return [
+            ...super.styles,
+            css `::slotted(*){
+  padding:calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);
+}
+
+::slotted(:not(:first-child)){
+  border-top:thin var(--foxy-border-style, solid) var(--lumo-contrast-5pct) !important;
+}
+      `,
+        ];
+    }
+    renderLightDom() {
+        return;
+    }
+    renderControl() {
+        return html `
+      <p class="mb-xs font-medium text-secondary text-s" ?hidden=${!this.label}>${this.label}</p>
+      <div class="border border-contrast-5 rounded"><slot></slot></div>
+      <p class="mt-xs text-xs text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+    `;
+    }
+}
+//# sourceMappingURL=InternalSummaryControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;OAQF;SACF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;mEACoD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;;wDAEpC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;KACtF,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        ::slotted(*) {\n          padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n        }\n\n        ::slotted(:not(:first-child)) {\n          border-top: thin var(--foxy-border-style, solid) var(--lumo-contrast-5pct) !important;\n        }\n      `,\n    ];\n  }\n\n  renderLightDom(): void {\n    return;\n  }\n\n  renderControl(): TemplateResult {\n    return html`\n      <p class=\"mb-xs font-medium text-secondary text-s\" ?hidden=${!this.label}>${this.label}</p>\n      <div class=\"border border-contrast-5 rounded\"><slot></slot></div>\n      <p class=\"mt-xs text-xs text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalSummaryControl/index.d.ts

@@ -0,0 +1,4 @@
+import '../InternalEditableControl/index';
+import '../../public/I18n/index';
+import { InternalSummaryControl } from './InternalSummaryControl';
+export { InternalSummaryControl };

package/dist/elements/internal/InternalSummaryControl/index.js

@@ -0,0 +1,6 @@
+import "../InternalEditableControl/index.js";
+import "../../public/I18n/index.js";
+import { InternalSummaryControl } from "./InternalSummaryControl.js";
+customElements.define('foxy-internal-summary-control', InternalSummaryControl);
+export { InternalSummaryControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/internal/InternalSummaryControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,oCAAiC;AAEjC,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAElE,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,sBAAsB,CAAC,CAAC;AAE/E,OAAO,EAAE,sBAAsB,EAAE,CAAC","sourcesContent":["import '../InternalEditableControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalSummaryControl } from './InternalSummaryControl';\n\ncustomElements.define('foxy-internal-summary-control', InternalSummaryControl);\n\nexport { InternalSummaryControl };\n"]}

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

@@ -0,0 +1,7 @@
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { PropertyDeclarations, TemplateResult } from 'lit-element';
+export declare class InternalSwitchControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    invert: boolean;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalSwitchControl/InternalSwitchControl.js

@@ -0,0 +1,75 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html } from 'lit-element';
+import { classMap } from "../../../utils/class-map.js";
+export class InternalSwitchControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.invert = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            invert: { type: Boolean },
+        };
+    }
+    renderControl() {
+        const checked = this.invert ? !this._value : !!this._value;
+        return html `
+      <div class="flex items-center leading-xs">
+        <div class="flex-1">
+          <label class="text-m text-body" for="input">${this.label}</label>
+          <p class="text-s text-secondary">${this.helperText}</p>
+          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+
+        ${this.readonly
+            ? html `<p class="text-secondary">${checked ? this.t('checked') : this.t('unchecked')}</p>`
+            : html `
+              <div style="height: 1em" class="flex items-center">
+                <div
+                  style="border-radius: var(--lumo-size-xl); width: calc((var(--lumo-space-m) * 2) + (var(--lumo-space-xs) * 2))"
+                  class=${classMap({
+                'cursor-pointer group transition-colors relative': true,
+                'flex flex-shrink-0 items-center': true,
+                'bg-success': !this.disabled && checked,
+                'bg-contrast-20 hover-bg-contrast-30': !this.disabled && !checked,
+                'bg-contrast-10': this.disabled,
+                'focus-within-ring-2 focus-within-ring-primary-50': true,
+            })}
+                  @click=${() => (this._value = !this._value)}
+                >
+                  <div
+                    style="width: var(--lumo-space-m); height: var(--lumo-space-m)"
+                    class=${classMap({
+                'transition-all transform block rounded-full m-xs': true,
+                'translate-x-m': checked,
+                'translate-x-0': !checked,
+                'bg-base': this.disabled,
+                'bg-tint': !this.disabled,
+                'group-hover-scale-110': !this.disabled,
+            })}
+                  ></div>
+
+                  <input
+                    class="opacity-0 absolute inset-0 focus-outline-none"
+                    type="checkbox"
+                    id="input"
+                    switch
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?checked=${checked}
+                    @change=${(evt) => {
+                const checkbox = evt.currentTarget;
+                this._value = this.invert ? !checkbox.checked : checkbox.checked;
+            }}
+                  />
+                </div>
+              </div>
+            `}
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=InternalSwitchControl.js.map