@foxy.io/elements 1.40.0-beta.2 → 1.40.0-beta.3

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js

@@ -24,6 +24,8 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
     }
     render() {
         var _a, _b;
+        const options = Object.values((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {});
+        const filteredOptions = options.filter(region => !this.regions.includes(region.code));
         return html `
       <div
         class=${classMap({
@@ -34,7 +36,6 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
         <div data-testid="country" class="h-m flex justify-between items-center bg-contrast-5">
           <div style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)">
             <span>${this.name || this.code}</span>
-            ${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
           </div>
 
           <button
@@ -62,10 +63,7 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
             const code = region;
             return html `
               <div class="flex items-center rounded-s border border-contrast-10 h-s m-xs">
-                <span class="mx-s">
-                  <span>${name || code}</span>
-                  ${name ? html `<span class="text-secondary">${code}</span>` : ''}
-                </span>
+                <span class="mx-s">${name || code}</span>
 
                 <button
                   aria-label=${this.t('delete')}
@@ -89,56 +87,74 @@ export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
               </div>
             `;
         })}
+          ${filteredOptions.length === 0 && options.length !== 0
+            ? ''
+            : html `
+                <div
+                  data-testid="new-region"
+                  class=${classMap({
+                'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,
+                'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
+                'flex': !this.readonly,
+                'hidden': this.readonly,
+            })}
+                >
+                  ${options.length === 0
+                ? html `
+                        <input
+                          placeholder=${this.t('add_region')}
+                          class="bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none"
+                          style="width: 8rem"
+                          .value=${this.__newRegion}
+                          ?disabled=${this.disabled}
+                          ?readonly=${this.readonly}
+                          @keydown=${(evt) => {
+                    if (evt.key === 'Enter' && this.__newRegion)
+                        this.__addRegion();
+                }}
+                          @input=${(evt) => {
+                    const target = evt.currentTarget;
+                    this.__newRegion = target.value;
+                }}
+                        />
 
-          <div
-            data-testid="new-region"
-            class=${classMap({
-            'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,
-            'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
-            'flex': !this.readonly,
-            'hidden': this.readonly,
-        })}
-          >
-            <input
-              placeholder=${this.t('add_region')}
-              class="bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none"
-              style="width: 8rem"
-              list="list"
-              .value=${this.__newRegion}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              @keydown=${(evt) => {
-            if (evt.key === 'Enter' && this.__newRegion)
-                this.__addRegion();
-        }}
-              @input=${(evt) => {
-            const target = evt.currentTarget;
-            this.__newRegion = target.value;
-        }}
-            />
-
-            <button
-              style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
-              class=${classMap({
-            'flex-shrink-0': true,
-            'flex items-center justify-center rounded-s transition-colors': true,
-            'text-transparent cursor-default': !this.__newRegion,
-            'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,
-            'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
-            'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,
-        })}
-              ?disabled=${this.disabled || !this.__newRegion}
-              @click=${this.__addRegion}
-            >
-              <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
-            </button>
-          </div>
-
-          <datalist id="list">
-            ${Object.values((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(region => {
-            return html `<option value=${region.code}>${region.default}</option>`;
-        })}
-          </datalist>
+                        <button
+                          style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+                          class=${classMap({
+                    'flex-shrink-0': true,
+                    'flex items-center justify-center rounded-s transition-colors': true,
+                    'text-transparent cursor-default': !this.__newRegion,
+                    'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,
+                    'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
+                    'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,
+                })}
+                          ?disabled=${this.disabled || !this.__newRegion}
+                          @click=${this.__addRegion}
+                        >
+                          <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
+                        </button>
+                      `
+                : html `
+                        <select
+                          class=${classMap({
+                    'appearance-none bg-transparent h-s text-s px-s font-medium': true,
+                    'transition-colors rounded-s focus-outline-none': true,
+                    'cursor-pointer hover-bg-contrast-5': !this.disabled,
+                })}
+                          ?disabled=${this.disabled}
+                          @change=${(evt) => {
+                    const target = evt.currentTarget;
+                    this.__newRegion = target.value;
+                    this.__addRegion();
+                    target.value = '';
+                }}
+                        >
+                          <option value="" disabled selected>${this.t('add_region')}</option>
+                          ${filteredOptions.map(region => html `<option value=${region.code}>${region.default}</option>`)}
+                        </select>
+                      `}
+                </div>
+              `}
         </div>
       </div>
     `;

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalTemplateConfigFormFilterValuesControlItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../../../mixins/configurable';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class InternalTemplateConfigFormFilterValuesControlItem extends Base<\n  Resource<Rels.Regions>\n> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newRegion: { attribute: false },\n      regions: { type: Array },\n      name: { type: String },\n      code: { type: String },\n    };\n  }\n\n  regions: string[] = [];\n\n  name = '';\n\n  code = '';\n\n  private __newRegion = '';\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'border border-contrast-5 rounded-s font-medium overflow-hidden': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <div data-testid=\"country\" class=\"h-m flex justify-between items-center bg-contrast-5\">\n          <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n            <span>${this.name || this.code}</span>\n            ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n          </div>\n\n          <button\n            aria-label=${this.t('delete')}\n            class=${classMap({\n              'mr-xs items-center justify-center rounded-full transition-colors': true,\n              'hover-bg-error-10 hover-text-error': !this.disabled,\n              'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n              'cursor-default': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n            style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n            ?disabled=${this.disabled}\n            @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n          >\n            <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n          </button>\n        </div>\n\n        <div data-testid=\"regions\" class=\"flex flex-wrap p-xs text-s\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div class=\"flex items-center rounded-s border border-contrast-10 h-s m-xs\">\n                <span class=\"mx-s\">\n                  <span>${name || code}</span>\n                  ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n                </span>\n\n                <button\n                  aria-label=${this.t('delete')}\n                  class=${classMap({\n                    'items-center justify-center rounded-s transition-colors': true,\n                    'hover-bg-error-10 hover-text-error': !this.disabled,\n                    'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !this.disabled,\n                    'cursor-default': this.disabled,\n                    'flex': !this.readonly,\n                    'hidden': this.readonly,\n                  })}\n                  style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                  ?disabled=${this.disabled}\n                  @click=${() => {\n                    this.regions = this.regions.filter(value => value !== region);\n                    this.dispatchEvent(new CustomEvent('update:regions'));\n                  }}\n                >\n                  <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n                </button>\n              </div>\n            `;\n          })}\n\n          <div\n            data-testid=\"new-region\"\n            class=${classMap({\n              'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,\n              'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.t('add_region')}\n              class=\"bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none\"\n              style=\"width: 8rem\"\n              list=\"list\"\n              .value=${this.__newRegion}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.__newRegion = target.value;\n              }}\n            />\n\n            <button\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              class=${classMap({\n                'flex-shrink-0': true,\n                'flex items-center justify-center rounded-s transition-colors': true,\n                'text-transparent cursor-default': !this.__newRegion,\n                'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,\n                'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n                'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,\n              })}\n              ?disabled=${this.disabled || !this.__newRegion}\n              @click=${this.__addRegion}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n\n          <datalist id=\"list\">\n            ${Object.values(this.data?.values ?? {}).map(region => {\n              return html`<option value=${region.code}>${region.default}</option>`;\n            })}\n          </datalist>\n        </div>\n      </div>\n    `;\n  }\n\n  private __addRegion() {\n    this.regions = [...new Set([...this.regions, this.__newRegion])];\n    this.__newRegion = '';\n    this.dispatchEvent(new CustomEvent('update:regions'));\n  }\n}\n"]}
+{"version":3,"file":"InternalTemplateConfigFormFilterValuesControlItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../../../mixins/configurable';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class InternalTemplateConfigFormFilterValuesControlItem extends Base<\n  Resource<Rels.Regions>\n> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newRegion: { attribute: false },\n      regions: { type: Array },\n      name: { type: String },\n      code: { type: String },\n    };\n  }\n\n  regions: string[] = [];\n\n  name = '';\n\n  code = '';\n\n  private __newRegion = '';\n\n  render(): TemplateResult {\n    const options = Object.values(this.data?.values ?? {});\n    const filteredOptions = options.filter(region => !this.regions.includes(region.code));\n\n    return html`\n      <div\n        class=${classMap({\n          'border border-contrast-5 rounded-s font-medium overflow-hidden': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <div data-testid=\"country\" class=\"h-m flex justify-between items-center bg-contrast-5\">\n          <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n            <span>${this.name || this.code}</span>\n          </div>\n\n          <button\n            aria-label=${this.t('delete')}\n            class=${classMap({\n              'mr-xs items-center justify-center rounded-full transition-colors': true,\n              'hover-bg-error-10 hover-text-error': !this.disabled,\n              'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n              'cursor-default': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n            style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n            ?disabled=${this.disabled}\n            @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n          >\n            <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n          </button>\n        </div>\n\n        <div data-testid=\"regions\" class=\"flex flex-wrap p-xs text-s\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div class=\"flex items-center rounded-s border border-contrast-10 h-s m-xs\">\n                <span class=\"mx-s\">${name || code}</span>\n\n                <button\n                  aria-label=${this.t('delete')}\n                  class=${classMap({\n                    'items-center justify-center rounded-s transition-colors': true,\n                    'hover-bg-error-10 hover-text-error': !this.disabled,\n                    'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !this.disabled,\n                    'cursor-default': this.disabled,\n                    'flex': !this.readonly,\n                    'hidden': this.readonly,\n                  })}\n                  style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                  ?disabled=${this.disabled}\n                  @click=${() => {\n                    this.regions = this.regions.filter(value => value !== region);\n                    this.dispatchEvent(new CustomEvent('update:regions'));\n                  }}\n                >\n                  <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n                </button>\n              </div>\n            `;\n          })}\n          ${filteredOptions.length === 0 && options.length !== 0\n            ? ''\n            : html`\n                <div\n                  data-testid=\"new-region\"\n                  class=${classMap({\n                    'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s':\n                      true,\n                    'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50':\n                      !this.disabled,\n                    'flex': !this.readonly,\n                    'hidden': this.readonly,\n                  })}\n                >\n                  ${options.length === 0\n                    ? html`\n                        <input\n                          placeholder=${this.t('add_region')}\n                          class=\"bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none\"\n                          style=\"width: 8rem\"\n                          .value=${this.__newRegion}\n                          ?disabled=${this.disabled}\n                          ?readonly=${this.readonly}\n                          @keydown=${(evt: KeyboardEvent) => {\n                            if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n                          }}\n                          @input=${(evt: InputEvent) => {\n                            const target = evt.currentTarget as HTMLInputElement;\n                            this.__newRegion = target.value;\n                          }}\n                        />\n\n                        <button\n                          style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                          class=${classMap({\n                            'flex-shrink-0': true,\n                            'flex items-center justify-center rounded-s transition-colors': true,\n                            'text-transparent cursor-default': !this.__newRegion,\n                            'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,\n                            'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n                            'focus-outline-none focus-ring-2 ring-inset ring-primary-50':\n                              !!this.__newRegion,\n                          })}\n                          ?disabled=${this.disabled || !this.__newRegion}\n                          @click=${this.__addRegion}\n                        >\n                          <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n                        </button>\n                      `\n                    : html`\n                        <select\n                          class=${classMap({\n                            'appearance-none bg-transparent h-s text-s px-s font-medium': true,\n                            'transition-colors rounded-s focus-outline-none': true,\n                            'cursor-pointer hover-bg-contrast-5': !this.disabled,\n                          })}\n                          ?disabled=${this.disabled}\n                          @change=${(evt: Event) => {\n                            const target = evt.currentTarget as HTMLSelectElement;\n                            this.__newRegion = target.value;\n                            this.__addRegion();\n                            target.value = '';\n                          }}\n                        >\n                          <option value=\"\" disabled selected>${this.t('add_region')}</option>\n                          ${filteredOptions.map(\n                            region => html`<option value=${region.code}>${region.default}</option>`\n                          )}\n                        </select>\n                      `}\n                </div>\n              `}\n        </div>\n      </div>\n    `;\n  }\n\n  private __addRegion() {\n    this.regions = [...new Set([...this.regions, this.__newRegion])];\n    this.__newRegion = '';\n    this.dispatchEvent(new CustomEvent('update:regions'));\n  }\n}\n"]}

package/package.json

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

package/dist/cdn/shared-80a1bf6f.js

@@ -1 +0,0 @@
-import{a as e}from"./shared-5b4e2567.js";import"./shared-4d32d19e.js";import{_ as t}from"./shared-cb58dfcd.js";import{c as s,h as r,s as o}from"./shared-ba5c42c7.js";let l,i,a,d,n=e=>e;customElements.define("foxy-internal-summary-control",class extends e{constructor(){super(...arguments),this.layout=null,this.count=null,this.open=!1}static get properties(){return t(t({},super.properties),{},{layout:{},count:{type:Number},open:{type:Boolean}})}static get styles(){return[...super.styles,s(l||(l=n`::slotted(*){min-width:100%}:host(:not([layout=section])) slot::slotted(*){background-color:var(--lumo-contrast-5pct);padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)}details summary>div{border-radius:var(--lumo-border-radius)}details[open] summary>div{border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0}`))]}renderLightDom(){}renderControl(){return"details"===this.layout?r(i||(i=n` <details class="rounded overflow-hidden" ?open="${0}" @toggle="${0}"> <summary class="select-none cursor-pointer focus-outline-none group"> <div class="leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?hidden="${0}"> <p class="font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s" ?hidden="${0}"> <span> ${0}${0} </span> <span class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body" style="transform:scale(1.35)"> ${0} </span> </p> <p class="text-s text-secondary" ?hidden="${0}">${0}</p> </div> </summary> <div class="overflow-hidden grid" style="gap:1px"> <slot></slot> </div> </details> `),this.open,(e=>{const t=e.currentTarget;this.open=t.open,e.composed||e.bubbles||this.dispatchEvent(new CustomEvent("toggle"))}),!this.label&&!this.helperText,!this.label,this.label,"number"==typeof this.count?` (${this.count})`:"",o(a||(a=n`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`)),!this.helperText,this.helperText):r(d||(d=n` <div class="leading-s mb-s" ?hidden="${0}"> <p class="font-medium text-body text-l" ?hidden="${0}">${0}</p> <p class="text-s text-secondary" ?hidden="${0}">${0}</p> </div> <div class="rounded overflow-hidden grid" style="gap:1px"> <slot></slot> </div> `),!this.label&&!this.helperText,!this.label,this.label,!this.helperText,this.helperText)}});

package/dist/cdn/shared-aca2705d.js

@@ -1 +0,0 @@
-import"./shared-8ef0ca65.js";import"./shared-0c134ce7.js";import{I as e,a as t}from"./shared-5b4e2567.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-4d32d19e.js";import{_ as s,m as i}from"./shared-cb58dfcd.js";import{h as r,s as o}from"./shared-ba5c42c7.js";import{s as l}from"./shared-53e476fd.js";import{g as a}from"./shared-bab2ea2c.js";import{F as n}from"./shared-343d1fd7.js";import{i as d}from"./shared-53e42a77.js";import{c as h}from"./shared-4e709717.js";import{u as c}from"./shared-f83207fb.js";let u,f=e=>e;let p,y,m,v,x,b,g,$,_=e=>e;customElements.define("foxy-internal-resource-picker-control-form",class extends e{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return r(u||(u=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(e=>{e.preventDefault(),this.edit({selection:e.detail}),this.submit()}),l(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends t{constructor(){super(...arguments),this.getDisplayValueOptions=e=>({resource:e}),this.showCopyIdButton=!1,this.virtualHost=c("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((e=>new Function("ctx",`return ctx.html\`\n        <${null!=e?e:"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        </${null!=e?e:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var e;const t=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return r(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,t,null!==(e=this.form)&&void 0!==e?e:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(e){var t,s;super.updated(e),e.has("item")&&(null===(s=(t=this.__getItemRenderer.cache).clear)||void 0===s||s.call(t))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const e=this.renderRoot.querySelector("#value");return r(y||(y=_` <div class="leading-xs"> <div class="flex items-center gap-xs"> <div class="text-m text-body whitespace-nowrap flex-1">${0}</div> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <div class="text-xs text-secondary">${0}</div> <div class="text-xs text-error" ?hidden="${0}"> ${0} </div> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(e=>{if(this.disabled||this.readonly)return;const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),this._value?r(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==e?void 0:e.data)?this.getDisplayValueOptions(e.data):{context:(null==e?void 0:e.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,o(v||(v=_`<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>`)),this.helperText,this.disabled||this.readonly,this._errorMessage,d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var e,t,s,i,o;const n=this.__valueLoader,c="string"==typeof this._value?a(this._value):void 0,u="string"==typeof this._value?null===(e=this.getItemUrl)||void 0===e?void 0:e.call(this,this._value,null!==(t=null==n?void 0:n.data)&&void 0!==t?t:null):void 0;return r(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto text-l">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> <foxy-nucleon class="block" infer="" href="${0}" id="valueLoader" @update="${0}"> ${0} </foxy-nucleon> </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-s transition-colors font-medium":!0,"text-disabled":this.disabled}),this.label,u?r(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),u):"",this.showCopyIdButton&&null!==c?r(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),c):"",this.readonly||!this._value?"":r($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(e=>{const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),d(this._value||void 0),(()=>this.requestUpdate()),this.__getItemRenderer(this.item)({html:r,data:null!==(s=null==n?void 0:n.data)&&void 0!==s?s:null,href:this._value||"",related:[],parent:"",props:{},spread:l,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(o=null===(i=this.nucleon)||void 0===i?void 0:i.group)&&void 0!==o?o:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(e){if(!(e instanceof n))return;if(e.defaultPrevented)return;const{url:t,method:s}=e.request;return t===`foxy://${this.virtualHost}/select`&&"POST"===s?e.respondWith(this.__handleSelect(e.request)):t===`foxy://${this.virtualHost}/empty`&&"GET"===s?e.respondWith(this.__handleEmpty()):void 0}async __handleSelect(e){const t=await e.clone().json();return this._value=t.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}get __valueLoader(){return this.renderRoot.querySelector("#valueLoader")}});