@foxy.io/elements 1.23.0-beta.2 → 1.23.0-beta.4

package/dist/elements/public/EmailTemplateForm/EmailTemplateForm.js

@@ -1,13 +1,13 @@
-import { css, html } from 'lit-element';
 import { Choice, Group, PropertyTable } from "../../private/index.js";
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { ChoiceChangeEvent } from "../../private/events.js";
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-element';
 const NS = 'email-template-form';
 const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
 /**
@@ -38,8 +38,6 @@ export class EmailTemplateForm extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
-        this.__cacheState = 'idle';
-        this.__contentChoice = 'default';
         this.__templateLanguageOptions = [
             { label: 'Nunjucks', value: 'nunjucks' },
             { label: 'Handlebars', value: 'handlebars' },
@@ -47,6 +45,9 @@ export class EmailTemplateForm extends Base {
             { label: 'Twig', value: 'twig' },
             { label: 'EJS', value: 'ejs' },
         ];
+        this.__textContentChoice = 'default';
+        this.__htmlContentChoice = 'default';
+        this.__cacheState = 'idle';
     }
     static get properties() {
         return {
@@ -55,25 +56,16 @@ export class EmailTemplateForm extends Base {
             __contentChoice: { attribute: false },
         };
     }
-    static get styles() {
-        return [
-            ...super.styles,
-            css `#cached-content::part(input-field){
-  max-height:15em;
-}
-      `,
-        ];
-    }
     static get scopedElements() {
         return {
             'foxy-internal-select-control': customElements.get('foxy-internal-select-control'),
             'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-source-control': customElements.get('foxy-internal-source-control'),
             'foxy-internal-text-control': customElements.get('foxy-internal-text-control'),
             'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
             'foxy-spinner': customElements.get('foxy-spinner'),
             'foxy-i18n': customElements.get('foxy-i18n'),
             'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-text-area': customElements.get('vaadin-text-area'),
             'vaadin-button': customElements.get('vaadin-button'),
             'x-property-table': PropertyTable,
             'x-choice': Choice,
@@ -127,6 +119,26 @@ export class EmailTemplateForm extends Base {
       </div>
     `;
     }
+    async _sendPost(edits) {
+        const data = await super._sendPost(edits);
+        if (!data.content_html_url && !data.content_text_url)
+            return data;
+        this.__cacheState = 'busy';
+        const url = data._links['fx:cache'].href;
+        const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });
+        this.__cacheState = response.ok ? 'idle' : 'fail';
+        return await this._fetch(data._links.self.href);
+    }
+    async _sendPatch(edits) {
+        const data = await super._sendPatch(edits);
+        if (!data.content_html_url && !data.content_text_url)
+            return data;
+        this.__cacheState = 'busy';
+        const url = data._links['fx:cache'].href;
+        const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });
+        this.__cacheState = response.ok ? 'idle' : 'fail';
+        return await this._fetch(data._links.self.href);
+    }
     __renderDescription() {
         var _a, _b;
         const scope = 'description';
@@ -153,28 +165,25 @@ export class EmailTemplateForm extends Base {
     `;
     }
     __renderContent() {
+        const variants = ['text', 'html'];
         return html `
       <div data-testid="content">
-        ${this.renderTemplateOrSlot('content:before')}
-
-        <div class="space-y-l">
-          ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}
-          ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}
-        </div>
-
-        ${this.renderTemplateOrSlot('content:after')}
+        <div class="space-y-l">${variants.map(v => this.__renderContentVariant(v))}</div>
       </div>
     `;
     }
-    __renderContentVariant(urlPath, textPath, header) {
-        var _a;
+    __renderContentVariant(variant) {
+        var _a, _b;
+        const urlPath = variant === 'text' ? 'content_text_url' : 'content_html_url';
+        const textPath = variant === 'text' ? 'content_text' : 'content_html';
+        const header = variant === 'text' ? 'text_template' : 'html_template';
+        const urlValue = this.form[urlPath];
+        const textValue = this.form[textPath];
+        const contentChoiceKey = variant === 'text' ? '__textContentChoice' : '__htmlContentChoice';
+        const contentChoice = urlValue ? 'url' : textValue ? 'clipboard' : this[contentChoiceKey];
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);
         const isReadonly = this.readonlySelector.matches('content', true);
-        const contentChoice = this.form[urlPath]
-            ? 'url'
-            : this.form[textPath]
-                ? 'clipboard'
-                : this.__contentChoice;
+        const isSyncProhibited = isReadonly || !((_a = this.data) === null || _a === void 0 ? void 0 : _a[urlPath]) || urlValue !== this.data[urlPath];
         return html `
       <x-group frame>
         <foxy-i18n
@@ -195,7 +204,7 @@ export class EmailTemplateForm extends Base {
           @change=${(evt) => {
             if (evt instanceof ChoiceChangeEvent) {
                 this.edit({ [textPath]: '', [urlPath]: '' });
-                this.__contentChoice = evt.detail;
+                this[contentChoiceKey] = evt.detail;
             }
         }}
         >
@@ -204,28 +213,23 @@ export class EmailTemplateForm extends Base {
               <div slot="${value}-label" class="py-s leading-s">
                 <foxy-i18n class="block" lang=${this.lang} key="template_${value}" ns=${this.ns}>
                 </foxy-i18n>
-
-                <foxy-i18n
-                  class="block text-s opacity-70"
-                  lang=${this.lang}
-                  key="template_${value}_explainer"
-                  ns=${this.ns}
-                >
-                </foxy-i18n>
               </div>
             `;
         })}
 
           <div
             style="--lumo-border-radius: var(--lumo-border-radius-s)"
+            class="mb-m"
             slot="url"
             ?hidden=${contentChoice !== 'url'}
           >
-            <div class="flex items-center mt-0 mb-m">
+            <div class="flex items-end mt-0">
               <vaadin-text-field
                 data-testid="${textPath.replace('_', '-')}-url"
+                placeholder="https://example.com/my-template"
+                label=${this.t('url')}
+                class="flex-1 min-w-0"
                 value=${ifDefined(this.form[urlPath])}
-                class="mr-s flex-grow"
                 ?readonly=${isReadonly}
                 ?disabled=${isDisabled}
                 @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
@@ -238,9 +242,9 @@ export class EmailTemplateForm extends Base {
 
               <vaadin-button
                 data-testid="${textPath.replace('_', '-')}-cache"
-                class="relative"
+                class="relative flex-shrink-0 ml-s"
                 ?disabled=${isDisabled || this.__cacheState === 'busy'}
-                ?hidden=${isReadonly || this.form[urlPath] !== ((_a = this.data) === null || _a === void 0 ? void 0 : _a[urlPath])}
+                ?hidden=${isSyncProhibited}
                 @click=${this.__cache}
               >
                 <foxy-i18n
@@ -271,27 +275,30 @@ export class EmailTemplateForm extends Base {
                 </div>
               </vaadin-button>
             </div>
+
+            <foxy-internal-source-control
+              placeholder=${this.t('url_source_placeholder')}
+              helper-text=""
+              property=${textPath}
+              label=${this.t('url_source_label')}
+              infer="content"
+              class="mt-m${((_b = this.data) === null || _b === void 0 ? void 0 : _b[textPath]) ? '' : ' hidden'}"
+              style="--lumo-border-radius: var(--lumo-border-radius-s)"
+            >
+            </foxy-internal-source-control>
           </div>
 
-          <div
+          <foxy-internal-source-control
+            placeholder=${this.t('clipboard_source_placeholder')}
+            helper-text=""
+            property=${textPath}
+            label=${this.t('clipboard_source_label')}
+            infer="content"
+            class="mb-m${contentChoice === 'clipboard' ? '' : ' hidden'}"
             style="--lumo-border-radius: var(--lumo-border-radius-s)"
             slot="clipboard"
-            ?hidden=${contentChoice !== 'clipboard'}
           >
-            <vaadin-text-area
-              data-testid="${textPath.replace('_', '-')}-clipboard"
-              id="cached-content"
-              class="w-full mb-m"
-              ?readonly=${isReadonly}
-              ?disabled=${isDisabled}
-              .value=${this.form[textPath]}
-              @input=${(evt) => {
-            const value = evt.currentTarget.value;
-            this.edit({ [textPath]: value, [urlPath]: '' });
-        }}
-            >
-            </vaadin-text-area>
-          </div>
+          </foxy-internal-source-control>
         </x-choice>
       </x-group>
     `;
@@ -376,6 +383,7 @@ export class EmailTemplateForm extends Base {
             const url = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:cache'].href) !== null && _b !== void 0 ? _b : '';
             const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });
             this.__cacheState = response.ok ? 'idle' : 'fail';
+            this.refresh();
         }
         catch (_c) {
             this.__cacheState = 'fail';

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

@@ -1 +1 @@
-{"version":3,"file":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing email templates (`fx:email_template`).\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot template-language:before\n * @slot template-language:after\n *\n * @slot content:before\n * @slot content:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-email-template-form\n * @since 1.14.0\n */\nexport class EmailTemplateForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __cacheState: { attribute: false },\n      __contentChoice: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        #cached-content::part(input-field) {\n          max-height: 15em;\n        }\n      `,\n    ];\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-select-control': customElements.get('foxy-internal-select-control'),\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-text-control': customElements.get('foxy-internal-text-control'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-property-table': PropertyTable,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  templates: Templates = {};\n\n  private __cacheState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  private __contentChoice: 'default' | 'url' | 'clipboard' = 'default';\n\n  private __templateLanguageOptions = [\n    { label: 'Nunjucks', value: 'nunjucks' },\n    { label: 'Handlebars', value: 'handlebars' },\n    { label: 'Pug', value: 'pug' },\n    { label: 'Twig', value: 'twig' },\n    { label: 'EJS', value: 'ejs' },\n  ];\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div class=\"space-y-m\">\n        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n\n        <foxy-internal-text-control infer=\"subject\"></foxy-internal-text-control>\n\n        ${this.data?.description === 'Email Receipt Template'\n          ? ''\n          : html`\n              <foxy-internal-select-control\n                infer=\"template-language\"\n                .options=${this.__templateLanguageOptions}\n              >\n              </foxy-internal-select-control>\n            `}\n\n        <!-- -->\n\n        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderDescription() {\n    const scope = 'description';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <vaadin-text-field\n          data-testid=${scope}\n          class=\"w-full mb-s\"\n          label=${this.t(scope)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope)}\n          ?readonly=${this.readonlySelector.matches(scope)}\n          .value=${this.form?.description ?? ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @input=${(evt: CustomEvent) => {\n            this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderContent() {\n    return html`\n      <div data-testid=\"content\">\n        ${this.renderTemplateOrSlot('content:before')}\n\n        <div class=\"space-y-l\">\n          ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}\n          ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}\n        </div>\n\n        ${this.renderTemplateOrSlot('content:after')}\n      </div>\n    `;\n  }\n\n  private __renderContentVariant(\n    urlPath: 'content_text_url' | 'content_html_url',\n    textPath: 'content_text' | 'content_html',\n    header: string\n  ) {\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);\n    const isReadonly = this.readonlySelector.matches('content', true);\n    const contentChoice = this.form[urlPath]\n      ? 'url'\n      : this.form[textPath]\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\n      <x-group frame>\n        <foxy-i18n\n          class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}\n          lang=${this.lang}\n          slot=\"header\"\n          key=${header}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        <x-choice\n          data-testid=\"${textPath.replace('_', '-')}-type\"\n          .value=${contentChoice}\n          .items=${['default', 'url', 'clipboard']}\n          ?readonly=${isReadonly}\n          ?disabled=${isDisabled}\n          @change=${(evt: Event) => {\n            if (evt instanceof ChoiceChangeEvent) {\n              this.edit({ [textPath]: '', [urlPath]: '' });\n              this.__contentChoice = evt.detail as 'url' | 'clipboard' | 'default';\n            }\n          }}\n        >\n          ${['default', 'url', 'clipboard'].map(value => {\n            return html`\n              <div slot=\"${value}-label\" class=\"py-s leading-s\">\n                <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n                </foxy-i18n>\n\n                <foxy-i18n\n                  class=\"block text-s opacity-70\"\n                  lang=${this.lang}\n                  key=\"template_${value}_explainer\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n              </div>\n            `;\n          })}\n\n          <div\n            style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n            slot=\"url\"\n            ?hidden=${contentChoice !== 'url'}\n          >\n            <div class=\"flex items-center mt-0 mb-m\">\n              <vaadin-text-field\n                data-testid=\"${textPath.replace('_', '-')}-url\"\n                value=${ifDefined(this.form[urlPath])}\n                class=\"mr-s flex-grow\"\n                ?readonly=${isReadonly}\n                ?disabled=${isDisabled}\n                @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextFieldElement).value;\n                  this.edit({ [textPath]: '', [urlPath]: value });\n                }}\n              >\n              </vaadin-text-field>\n\n              <vaadin-button\n                data-testid=\"${textPath.replace('_', '-')}-cache\"\n                class=\"relative\"\n                ?disabled=${isDisabled || this.__cacheState === 'busy'}\n                ?hidden=${isReadonly || this.form[urlPath] !== this.data?.[urlPath]}\n                @click=${this.__cache}\n              >\n                <foxy-i18n\n                  class=${classMap({\n                    'relative transition-opacity': true,\n                    'opacity-0': this.__cacheState !== 'idle',\n                  })}\n                  lang=${this.lang}\n                  key=\"cache\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n\n                <div\n                  class=${classMap({\n                    'absolute inset-0 flex transition-opacity': true,\n                    'opacity-0': this.__cacheState === 'idle',\n                  })}\n                >\n                  <foxy-spinner\n                    layout=\"no-label\"\n                    class=\"m-auto\"\n                    state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n                    lang=${this.lang}\n                    ns=${this.ns}\n                  >\n                  </foxy-spinner>\n                </div>\n              </vaadin-button>\n            </div>\n          </div>\n\n          <div\n            style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n            slot=\"clipboard\"\n            ?hidden=${contentChoice !== 'clipboard'}\n          >\n            <vaadin-text-area\n              data-testid=\"${textPath.replace('_', '-')}-clipboard\"\n              id=\"cached-content\"\n              class=\"w-full mb-m\"\n              ?readonly=${isReadonly}\n              ?disabled=${isDisabled}\n              .value=${this.form[textPath]}\n              @input=${(evt: CustomEvent) => {\n                const value = (evt.currentTarget as TextAreaElement).value;\n                this.edit({ [textPath]: value, [urlPath]: '' });\n              }}\n            >\n            </vaadin-text-area>\n          </div>\n        </x-choice>\n      </x-group>\n    `;\n  }\n\n  private __renderTimestamps() {\n    const scope = 'timestamps';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <x-property-table\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-property-table>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderAction(action: string) {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\n        const confirm = this.renderRoot.querySelector('#confirm');\n        (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n      } else {\n        this.submit();\n      }\n    };\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <foxy-internal-confirm-dialog\n          message=\"delete_prompt\"\n          confirm=\"delete\"\n          cancel=\"cancel\"\n          header=\"delete\"\n          theme=\"primary error\"\n          lang=${lang}\n          ns=${ns}\n          id=\"confirm\"\n          data-testid=\"confirm\"\n          @hide=${(evt: DialogHideEvent) => {\n            if (!evt.detail.cancelled) this.delete();\n          }}\n        >\n        </foxy-internal-confirm-dialog>\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  }\n\n  private async __cache(): Promise<void> {\n    this.__cacheState = 'busy';\n\n    try {\n      const url = this.data?._links['fx:cache'].href ?? '';\n      const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n\n      this.__cacheState = response.ok ? 'idle' : 'fail';\n    } catch {\n      this.__cacheState = 'fail';\n    }\n  }\n}\n"]}
+{"version":3,"file":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport type { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport type { Data, Templates } from './types';\n\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing email templates (`fx:email_template`).\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot template-language:before\n * @slot template-language:after\n *\n * @slot content:before\n * @slot content:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-email-template-form\n * @since 1.14.0\n */\nexport class EmailTemplateForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __cacheState: { attribute: false },\n      __contentChoice: { attribute: false },\n    };\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-select-control': customElements.get('foxy-internal-select-control'),\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-source-control': customElements.get('foxy-internal-source-control'),\n      'foxy-internal-text-control': customElements.get('foxy-internal-text-control'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-property-table': PropertyTable,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  templates: Templates = {};\n\n  private __templateLanguageOptions = [\n    { label: 'Nunjucks', value: 'nunjucks' },\n    { label: 'Handlebars', value: 'handlebars' },\n    { label: 'Pug', value: 'pug' },\n    { label: 'Twig', value: 'twig' },\n    { label: 'EJS', value: 'ejs' },\n  ];\n\n  private __textContentChoice: 'default' | 'url' | 'clipboard' = 'default';\n\n  private __htmlContentChoice: 'default' | 'url' | 'clipboard' = 'default';\n\n  private __cacheState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div class=\"space-y-m\">\n        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n\n        <foxy-internal-text-control infer=\"subject\"></foxy-internal-text-control>\n\n        ${this.data?.description === 'Email Receipt Template'\n          ? ''\n          : html`\n              <foxy-internal-select-control\n                infer=\"template-language\"\n                .options=${this.__templateLanguageOptions}\n              >\n              </foxy-internal-select-control>\n            `}\n\n        <!-- -->\n\n        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPost(edits);\n    if (!data.content_html_url && !data.content_text_url) return data;\n\n    this.__cacheState = 'busy';\n    const url = data._links['fx:cache'].href;\n    const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n    this.__cacheState = response.ok ? 'idle' : 'fail';\n\n    return await this._fetch(data._links.self.href);\n  }\n\n  protected async _sendPatch(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPatch(edits);\n    if (!data.content_html_url && !data.content_text_url) return data;\n\n    this.__cacheState = 'busy';\n    const url = data._links['fx:cache'].href;\n    const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n    this.__cacheState = response.ok ? 'idle' : 'fail';\n\n    return await this._fetch(data._links.self.href);\n  }\n\n  private __renderDescription() {\n    const scope = 'description';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <vaadin-text-field\n          data-testid=${scope}\n          class=\"w-full mb-s\"\n          label=${this.t(scope)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope)}\n          ?readonly=${this.readonlySelector.matches(scope)}\n          .value=${this.form?.description ?? ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @input=${(evt: CustomEvent) => {\n            this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderContent() {\n    const variants = ['text', 'html'] as const;\n    return html`\n      <div data-testid=\"content\">\n        <div class=\"space-y-l\">${variants.map(v => this.__renderContentVariant(v))}</div>\n      </div>\n    `;\n  }\n\n  private __renderContentVariant(variant: 'text' | 'html') {\n    const urlPath = variant === 'text' ? 'content_text_url' : 'content_html_url';\n    const textPath = variant === 'text' ? 'content_text' : 'content_html';\n    const header = variant === 'text' ? 'text_template' : 'html_template';\n    const urlValue = this.form[urlPath];\n    const textValue = this.form[textPath];\n    const contentChoiceKey = variant === 'text' ? '__textContentChoice' : '__htmlContentChoice';\n    const contentChoice = urlValue ? 'url' : textValue ? 'clipboard' : this[contentChoiceKey];\n\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);\n    const isReadonly = this.readonlySelector.matches('content', true);\n    const isSyncProhibited = isReadonly || !this.data?.[urlPath] || urlValue !== this.data[urlPath];\n\n    return html`\n      <x-group frame>\n        <foxy-i18n\n          class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}\n          lang=${this.lang}\n          slot=\"header\"\n          key=${header}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        <x-choice\n          data-testid=\"${textPath.replace('_', '-')}-type\"\n          .value=${contentChoice}\n          .items=${['default', 'url', 'clipboard']}\n          ?readonly=${isReadonly}\n          ?disabled=${isDisabled}\n          @change=${(evt: Event) => {\n            if (evt instanceof ChoiceChangeEvent) {\n              this.edit({ [textPath]: '', [urlPath]: '' });\n              this[contentChoiceKey] = evt.detail as 'url' | 'clipboard' | 'default';\n            }\n          }}\n        >\n          ${['default', 'url', 'clipboard'].map(value => {\n            return html`\n              <div slot=\"${value}-label\" class=\"py-s leading-s\">\n                <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n                </foxy-i18n>\n              </div>\n            `;\n          })}\n\n          <div\n            style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n            class=\"mb-m\"\n            slot=\"url\"\n            ?hidden=${contentChoice !== 'url'}\n          >\n            <div class=\"flex items-end mt-0\">\n              <vaadin-text-field\n                data-testid=\"${textPath.replace('_', '-')}-url\"\n                placeholder=\"https://example.com/my-template\"\n                label=${this.t('url')}\n                class=\"flex-1 min-w-0\"\n                value=${ifDefined(this.form[urlPath])}\n                ?readonly=${isReadonly}\n                ?disabled=${isDisabled}\n                @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextFieldElement).value;\n                  this.edit({ [textPath]: '', [urlPath]: value });\n                }}\n              >\n              </vaadin-text-field>\n\n              <vaadin-button\n                data-testid=\"${textPath.replace('_', '-')}-cache\"\n                class=\"relative flex-shrink-0 ml-s\"\n                ?disabled=${isDisabled || this.__cacheState === 'busy'}\n                ?hidden=${isSyncProhibited}\n                @click=${this.__cache}\n              >\n                <foxy-i18n\n                  class=${classMap({\n                    'relative transition-opacity': true,\n                    'opacity-0': this.__cacheState !== 'idle',\n                  })}\n                  lang=${this.lang}\n                  key=\"cache\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n\n                <div\n                  class=${classMap({\n                    'absolute inset-0 flex transition-opacity': true,\n                    'opacity-0': this.__cacheState === 'idle',\n                  })}\n                >\n                  <foxy-spinner\n                    layout=\"no-label\"\n                    class=\"m-auto\"\n                    state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n                    lang=${this.lang}\n                    ns=${this.ns}\n                  >\n                  </foxy-spinner>\n                </div>\n              </vaadin-button>\n            </div>\n\n            <foxy-internal-source-control\n              placeholder=${this.t('url_source_placeholder')}\n              helper-text=\"\"\n              property=${textPath}\n              label=${this.t('url_source_label')}\n              infer=\"content\"\n              class=\"mt-m${this.data?.[textPath] ? '' : ' hidden'}\"\n              style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n            >\n            </foxy-internal-source-control>\n          </div>\n\n          <foxy-internal-source-control\n            placeholder=${this.t('clipboard_source_placeholder')}\n            helper-text=\"\"\n            property=${textPath}\n            label=${this.t('clipboard_source_label')}\n            infer=\"content\"\n            class=\"mb-m${contentChoice === 'clipboard' ? '' : ' hidden'}\"\n            style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n            slot=\"clipboard\"\n          >\n          </foxy-internal-source-control>\n        </x-choice>\n      </x-group>\n    `;\n  }\n\n  private __renderTimestamps() {\n    const scope = 'timestamps';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <x-property-table\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-property-table>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderAction(action: string) {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\n        const confirm = this.renderRoot.querySelector('#confirm');\n        (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n      } else {\n        this.submit();\n      }\n    };\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <foxy-internal-confirm-dialog\n          message=\"delete_prompt\"\n          confirm=\"delete\"\n          cancel=\"cancel\"\n          header=\"delete\"\n          theme=\"primary error\"\n          lang=${lang}\n          ns=${ns}\n          id=\"confirm\"\n          data-testid=\"confirm\"\n          @hide=${(evt: DialogHideEvent) => {\n            if (!evt.detail.cancelled) this.delete();\n          }}\n        >\n        </foxy-internal-confirm-dialog>\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  }\n\n  private async __cache(): Promise<void> {\n    this.__cacheState = 'busy';\n\n    try {\n      const url = this.data?._links['fx:cache'].href ?? '';\n      const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n      this.__cacheState = response.ok ? 'idle' : 'fail';\n      this.refresh();\n    } catch {\n      this.__cacheState = 'fail';\n    }\n  }\n}\n"]}

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

@@ -1,8 +1,8 @@
 import '@vaadin/vaadin-text-field/vaadin-text-field';
-import '@vaadin/vaadin-text-field/vaadin-text-area';
 import '@vaadin/vaadin-button';
 import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalSourceControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalSandbox/index';
 import '../Spinner/index';

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

@@ -1,8 +1,8 @@
 import '@vaadin/vaadin-text-field/vaadin-text-field';
-import '@vaadin/vaadin-text-field/vaadin-text-area';
 import '@vaadin/vaadin-button';
 import "../../internal/InternalSelectControl/index.js";
 import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalSourceControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalSandbox/index.js";
 import "../Spinner/index.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAE/B,uDAAoD;AACpD,uDAAoD;AACpD,qDAAkD;AAClD,iDAA8C;AAE9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '@vaadin/vaadin-button';\n\nimport '../../internal/InternalSelectControl/index';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { EmailTemplateForm } from './EmailTemplateForm';\n\ncustomElements.define('foxy-email-template-form', EmailTemplateForm);\n\nexport { EmailTemplateForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AACrD,OAAO,uBAAuB,CAAC;AAE/B,uDAAoD;AACpD,uDAAoD;AACpD,uDAAoD;AACpD,qDAAkD;AAClD,iDAA8C;AAE9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-button';\n\nimport '../../internal/InternalSelectControl/index';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSourceControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { EmailTemplateForm } from './EmailTemplateForm';\n\ncustomElements.define('foxy-email-template-form', EmailTemplateForm);\n\nexport { EmailTemplateForm };\n"]}

package/dist/elements/public/QueryBuilder/QueryBuilder.js

@@ -39,14 +39,21 @@ class QueryBuilder extends Base {
     }
     render() {
         var _a, _b;
+        const reservedPaths = new Set(['zoom', 'limit', 'offset', 'order', 'fields']);
+        const hiddenValues = [];
+        const visibleValues = [];
+        parse((_a = this.value) !== null && _a !== void 0 ? _a : '').forEach(value => {
+            const isVisible = Array.isArray(value) || !reservedPaths.has(value.path);
+            isVisible ? visibleValues.push(value) : hiddenValues.push(value);
+        });
         return Group({
-            parsedValues: parse((_a = this.value) !== null && _a !== void 0 ? _a : ''),
+            parsedValues: visibleValues,
             disabled: this.disabled,
             readonly: this.readonly,
             options: (_b = this.options) !== null && _b !== void 0 ? _b : [],
             t: this.t.bind(this),
             onChange: newValue => {
-                this.value = stringify(newValue);
+                this.value = stringify([...newValue, ...hiddenValues]);
                 this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));
             },
         });

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAwC,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAU,IAAI,EAAE,mBAAgB;AAEjD,OAAO,EAAE,KAAK,EAAE,8BAA2B;AAC3C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,yBAAsB;AACtC,OAAO,EAAE,SAAS,EAAE,6BAA0B;AAC9C,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAClC,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE,MAAM,EAAE,GAAG,eAAe,CAAC;AAC3B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,eAAe,CAAC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACpF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,YAAa,SAAQ,IAAI;IAA/B;;QAsBE,gCAAgC;QAChC,YAAO,GAAoB,IAAI,CAAC;QAEhC,2CAA2C;QAC3C,UAAK,GAAkB,IAAI,CAAC;IAe9B,CAAC;IA/BC,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;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;IAQD,MAAM;;QACJ,OAAO,KAAK,CAAC;YACX,YAAY,EAAE,KAAK,OAAC,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,QAAE,IAAI,CAAC,OAAO,mCAAI,EAAE;YAC3B,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC7D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AAvCD,uEAAuE;AACvD,wBAAW,GAAG,KAAM,SAAQ,WAAiB;CAAG,CAAC;AAEjE,2DAA2D;AAC3C,qBAAQ,GAAG,QAAQ,CAAC;AAEpC,6DAA6D;AAC7C,iBAAI,GAAG,IAAI,CAAC;AAmC9B,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Operator, Option, Type } from './types';\n\nimport { Group } from './components/Group';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parse } from './utils/parse';\nimport { stringify } from './utils/stringify';\nimport { styles } from './styles';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\n\nconst NS = 'query-builder';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nclass QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** Autocomplete suggestions. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  render(): TemplateResult {\n    return Group({\n      parsedValues: parse(this.value ?? ''),\n      disabled: this.disabled,\n      readonly: this.readonly,\n      options: this.options ?? [],\n      t: this.t.bind(this),\n      onChange: newValue => {\n        this.value = stringify(newValue);\n        this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n      },\n    });\n  }\n}\n\nexport { QueryBuilder };\n"]}
+{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAwC,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAe,QAAQ,EAAU,IAAI,EAAE,mBAAgB;AAE9D,OAAO,EAAE,KAAK,EAAE,8BAA2B;AAC3C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,yBAAsB;AACtC,OAAO,EAAE,SAAS,EAAE,6BAA0B;AAC9C,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAClC,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE,MAAM,EAAE,GAAG,eAAe,CAAC;AAC3B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,eAAe,CAAC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CACpF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,YAAa,SAAQ,IAAI;IAA/B;;QAsBE,gCAAgC;QAChC,YAAO,GAAoB,IAAI,CAAC;QAEhC,2CAA2C;QAC3C,UAAK,GAAkB,IAAI,CAAC;IAwB9B,CAAC;IAxCC,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;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;IAQD,MAAM;;QACJ,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC9E,MAAM,YAAY,GAAoC,EAAE,CAAC;QACzD,MAAM,aAAa,GAAoC,EAAE,CAAC;QAE1D,KAAK,OAAC,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtC,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;YACX,YAAY,EAAE,aAAa;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,QAAE,IAAI,CAAC,OAAO,mCAAI,EAAE;YAC3B,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC;gBACvD,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC7D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AAhDD,uEAAuE;AACvD,wBAAW,GAAG,KAAM,SAAQ,WAAiB;CAAG,CAAC;AAEjE,2DAA2D;AAC3C,qBAAQ,GAAG,QAAQ,CAAC;AAEpC,6DAA6D;AAC7C,iBAAI,GAAG,IAAI,CAAC;AA4C9B,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { ParsedValue, Operator, Option, Type } from './types';\n\nimport { Group } from './components/Group';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parse } from './utils/parse';\nimport { stringify } from './utils/stringify';\nimport { styles } from './styles';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\n\nconst NS = 'query-builder';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nclass QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** Autocomplete suggestions. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  render(): TemplateResult {\n    const reservedPaths = new Set(['zoom', 'limit', 'offset', 'order', 'fields']);\n    const hiddenValues: (ParsedValue | ParsedValue[])[] = [];\n    const visibleValues: (ParsedValue | ParsedValue[])[] = [];\n\n    parse(this.value ?? '').forEach(value => {\n      const isVisible = Array.isArray(value) || !reservedPaths.has(value.path);\n      isVisible ? visibleValues.push(value) : hiddenValues.push(value);\n    });\n\n    return Group({\n      parsedValues: visibleValues,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      options: this.options ?? [],\n      t: this.t.bind(this),\n      onChange: newValue => {\n        this.value = stringify([...newValue, ...hiddenValues]);\n        this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n      },\n    });\n  }\n}\n\nexport { QueryBuilder };\n"]}

package/dist/elements/public/QueryBuilder/components/Input.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { classMap } from "../../../../utils/class-map.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { serializeDateUTC } from "../../../../utils/serialize-date.js";
+import { serializeDateTime } from "../../../../utils/serialize-date.js";
 export function Input(params) {
     var _a;
     const id = (_a = params.id) !== null && _a !== void 0 ? _a : String(Math.floor(Math.random() * Math.pow(10, 8)));
@@ -10,7 +10,7 @@ export function Input(params) {
     let normalizedValue = params.value;
     if (params.type === 'date') {
         const date = new Date(params.value);
-        normalizedValue = isNaN(date.getTime()) ? '' : serializeDateUTC(date);
+        normalizedValue = isNaN(date.getTime()) ? '' : serializeDateTime(date);
     }
     return html `
     <label class="relative flex items-center cursor-text group text-tertiary">
@@ -43,21 +43,24 @@ export function Input(params) {
         'opacity-0 focus-opacity-100': hasDisplayValue,
     })}
           list=${ifDefined(params.list ? listId : undefined)}
-          type=${params.type}
-          max=${ifDefined(params.type === 'date' ? '9999-12-31' : '')}
+          type=${params.type === 'date' ? 'datetime-local' : params.type}
+          max=${ifDefined(params.type === 'date' ? '9999-12-31T23:59' : '')}
           .value=${normalizedValue}
           ?disabled=${params.disabled || params.readonly}
           @input=${(evt) => {
         const input = evt.currentTarget;
+        let newValue = input.value;
         try {
-            const valueAsDate = input.valueAsDate;
-            if (valueAsDate.getFullYear() > 9999)
-                valueAsDate.setFullYear(9999);
-            params.onChange(valueAsDate.toISOString());
+            if (params.type === 'date') {
+                const newDate = new Date(input.value);
+                if (!isNaN(newDate.getTime()))
+                    newValue = newDate.toISOString();
+            }
         }
         catch (_a) {
-            params.onChange(input.value);
+            // ignore
         }
+        params.onChange(newValue);
     }}
         />
       </div>

package/dist/elements/public/QueryBuilder/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Input.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { serializeDateUTC } from '../../../../utils/serialize-date';\n\nexport type InputParams = {\n  t: I18n['t'];\n  id?: string;\n  list?: { label: string; value: string }[];\n  type: string;\n  label: string;\n  value: string;\n  disabled: boolean;\n  readonly: boolean;\n  displayValue?: string;\n  onChange: (newValue: string) => void;\n};\n\nexport function Input(params: InputParams): TemplateResult {\n  const id = params.id ?? String(Math.floor(Math.random() * Math.pow(10, 8)));\n  const listId = `${id}-list`;\n  const hasDisplayValue = !!params.displayValue;\n\n  let normalizedValue = params.value;\n\n  if (params.type === 'date') {\n    const date = new Date(params.value);\n    normalizedValue = isNaN(date.getTime()) ? '' : serializeDateUTC(date);\n  }\n\n  return html`\n    <label class=\"relative flex items-center cursor-text group text-tertiary\">\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        ${hasDisplayValue\n          ? html`\n              <div\n                aria-hidden=\"true\"\n                class=${classMap({\n                  'absolute inset-0 h-m px-s font-medium flex items-center': true,\n                  'text-body': !params.disabled && !params.readonly,\n                  'text-disabled': params.disabled,\n                  'text-secondary': params.readonly,\n                })}\n              >\n                <div class=\"truncate\">${params.t(params.displayValue!)}</div>\n              </div>\n            `\n          : ''}\n\n        <input\n          placeholder=${normalizedValue || params.type === 'date' ? '' : params.t(params.label)}\n          class=${classMap({\n            'bg-base relative flex h-m px-s font-medium w-full': true,\n            'text-body': !params.disabled && !params.readonly,\n            'text-disabled': params.disabled,\n            'text-secondary': params.readonly,\n            'flex max-w-full whitespace-nowrap': true, // ugh safari\n            'focus-outline-none': true,\n            'opacity-0 focus-opacity-100': hasDisplayValue,\n          })}\n          list=${ifDefined(params.list ? listId : undefined)}\n          type=${params.type}\n          max=${ifDefined(params.type === 'date' ? '9999-12-31' : '')}\n          .value=${normalizedValue}\n          ?disabled=${params.disabled || params.readonly}\n          @input=${(evt: Event) => {\n            const input = evt.currentTarget as HTMLInputElement;\n\n            try {\n              const valueAsDate = input.valueAsDate as Date;\n              if (valueAsDate.getFullYear() > 9999) valueAsDate.setFullYear(9999);\n              params.onChange(valueAsDate.toISOString());\n            } catch {\n              params.onChange(input.value);\n            }\n          }}\n        />\n      </div>\n\n      <span\n        class=${classMap({\n          'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,\n          'inline-block': !!normalizedValue || params.type === 'date',\n          'sr-only': !normalizedValue && params.type !== 'date',\n          'text-body': !params.disabled && !params.readonly,\n          'text-disabled': params.disabled,\n          'text-secondary': params.readonly,\n        })}\n      >\n        ${params.t(params.label)}\n      </span>\n\n      ${params.list\n        ? html`\n            <datalist id=${listId}>\n              ${params.list.map(\n                ({ label, value }) => html`<option value=${value}>${params.t(label)}</option>`\n              )}\n            </datalist>\n          `\n        : ''}\n      ${params.disabled || params.readonly\n        ? ''\n        : html`\n            <div\n              class=\"absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none\"\n            ></div>\n          `}\n    </label>\n  `;\n}\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/components/Input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,uCAAoC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,4CAAyC;AAerE,MAAM,UAAU,KAAK,CAAC,MAAmB;;IACvC,MAAM,EAAE,SAAG,MAAM,CAAC,EAAE,mCAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,MAAM,GAAG,GAAG,EAAE,OAAO,CAAC;IAC5B,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IAE9C,IAAI,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC;IAEnC,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAE;QAC1B,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;KACxE;IAED,OAAO,IAAI,CAAA;;;UAGH,eAAe;QACf,CAAC,CAAC,IAAI,CAAA;;;wBAGQ,QAAQ,CAAC;YACf,yDAAyD,EAAE,IAAI;YAC/D,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ;YACjD,eAAe,EAAE,MAAM,CAAC,QAAQ;YAChC,gBAAgB,EAAE,MAAM,CAAC,QAAQ;SAClC,CAAC;;wCAEsB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,YAAa,CAAC;;aAEzD;QACH,CAAC,CAAC,EAAE;;;wBAGU,eAAe,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;kBAC7E,QAAQ,CAAC;QACf,mDAAmD,EAAE,IAAI;QACzD,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ;QACjD,eAAe,EAAE,MAAM,CAAC,QAAQ;QAChC,gBAAgB,EAAE,MAAM,CAAC,QAAQ;QACjC,mCAAmC,EAAE,IAAI;QACzC,oBAAoB,EAAE,IAAI;QAC1B,6BAA6B,EAAE,eAAe;KAC/C,CAAC;iBACK,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;iBAC3C,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;gBACxD,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;mBACxD,eAAe;sBACZ,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ;mBACrC,CAAC,GAAU,EAAE,EAAE;QACtB,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;QACpD,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;QAE3B,IAAI;YACF,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM,EAAE;gBAC1B,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;oBAAE,QAAQ,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;aACjE;SACF;QAAC,WAAM;YACN,SAAS;SACV;QAED,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC;;;;;gBAKK,QAAQ,CAAC;QACf,0EAA0E,EAAE,IAAI;QAChF,cAAc,EAAE,CAAC,CAAC,eAAe,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM;QAC3D,SAAS,EAAE,CAAC,eAAe,IAAI,MAAM,CAAC,IAAI,KAAK,MAAM;QACrD,WAAW,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,MAAM,CAAC,QAAQ;QACjD,eAAe,EAAE,MAAM,CAAC,QAAQ;QAChC,gBAAgB,EAAE,MAAM,CAAC,QAAQ;KAClC,CAAC;;UAEA,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;;;QAGxB,MAAM,CAAC,IAAI;QACX,CAAC,CAAC,IAAI,CAAA;2BACa,MAAM;gBACjB,MAAM,CAAC,IAAI,CAAC,GAAG,CACf,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,iBAAiB,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAC/E;;WAEJ;QACH,CAAC,CAAC,EAAE;QACJ,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ;QAClC,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,IAAI,CAAA;;;;WAIH;;GAER,CAAC;AACJ,CAAC","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { I18n } from '../../I18n/I18n';\nimport { classMap } from '../../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { serializeDateTime } from '../../../../utils/serialize-date';\n\nexport type InputParams = {\n  t: I18n['t'];\n  id?: string;\n  list?: { label: string; value: string }[];\n  type: string;\n  label: string;\n  value: string;\n  disabled: boolean;\n  readonly: boolean;\n  displayValue?: string;\n  onChange: (newValue: string) => void;\n};\n\nexport function Input(params: InputParams): TemplateResult {\n  const id = params.id ?? String(Math.floor(Math.random() * Math.pow(10, 8)));\n  const listId = `${id}-list`;\n  const hasDisplayValue = !!params.displayValue;\n\n  let normalizedValue = params.value;\n\n  if (params.type === 'date') {\n    const date = new Date(params.value);\n    normalizedValue = isNaN(date.getTime()) ? '' : serializeDateTime(date);\n  }\n\n  return html`\n    <label class=\"relative flex items-center cursor-text group text-tertiary\">\n      <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n        ${hasDisplayValue\n          ? html`\n              <div\n                aria-hidden=\"true\"\n                class=${classMap({\n                  'absolute inset-0 h-m px-s font-medium flex items-center': true,\n                  'text-body': !params.disabled && !params.readonly,\n                  'text-disabled': params.disabled,\n                  'text-secondary': params.readonly,\n                })}\n              >\n                <div class=\"truncate\">${params.t(params.displayValue!)}</div>\n              </div>\n            `\n          : ''}\n\n        <input\n          placeholder=${normalizedValue || params.type === 'date' ? '' : params.t(params.label)}\n          class=${classMap({\n            'bg-base relative flex h-m px-s font-medium w-full': true,\n            'text-body': !params.disabled && !params.readonly,\n            'text-disabled': params.disabled,\n            'text-secondary': params.readonly,\n            'flex max-w-full whitespace-nowrap': true, // ugh safari\n            'focus-outline-none': true,\n            'opacity-0 focus-opacity-100': hasDisplayValue,\n          })}\n          list=${ifDefined(params.list ? listId : undefined)}\n          type=${params.type === 'date' ? 'datetime-local' : params.type}\n          max=${ifDefined(params.type === 'date' ? '9999-12-31T23:59' : '')}\n          .value=${normalizedValue}\n          ?disabled=${params.disabled || params.readonly}\n          @input=${(evt: Event) => {\n            const input = evt.currentTarget as HTMLInputElement;\n            let newValue = input.value;\n\n            try {\n              if (params.type === 'date') {\n                const newDate = new Date(input.value);\n                if (!isNaN(newDate.getTime())) newValue = newDate.toISOString();\n              }\n            } catch {\n              // ignore\n            }\n\n            params.onChange(newValue);\n          }}\n        />\n      </div>\n\n      <span\n        class=${classMap({\n          'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,\n          'inline-block': !!normalizedValue || params.type === 'date',\n          'sr-only': !normalizedValue && params.type !== 'date',\n          'text-body': !params.disabled && !params.readonly,\n          'text-disabled': params.disabled,\n          'text-secondary': params.readonly,\n        })}\n      >\n        ${params.t(params.label)}\n      </span>\n\n      ${params.list\n        ? html`\n            <datalist id=${listId}>\n              ${params.list.map(\n                ({ label, value }) => html`<option value=${value}>${params.t(label)}</option>`\n              )}\n            </datalist>\n          `\n        : ''}\n      ${params.disabled || params.readonly\n        ? ''\n        : html`\n            <div\n              class=\"absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none\"\n            ></div>\n          `}\n    </label>\n  `;\n}\n"]}

package/dist/elements/public/QueryBuilder/utils/parse.js

@@ -10,6 +10,8 @@ function parseGroup(search) {
     if (path.endsWith(']') && nameStart !== -1) {
         name = path.substring(nameStart + 1, path.length - 1);
         path = path.substring(0, nameStart);
+        if (path.endsWith(':name'))
+            path = path.substring(0, path.length - 5);
     }
     return { name, path, value, operator };
 }

package/dist/elements/public/QueryBuilder/utils/parse.js.map

@@ -1 +1 @@
-{"version":3,"file":"parse.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/utils/parse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAe,oBAAiB;AAEjD,SAAS,UAAU,CAAC,MAAc;;IAChC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAEpE,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAe,CAAC;IACxD,MAAM,QAAQ,SAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC,mCAAI,IAAI,CAAC;IAEvF,IAAI,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnF,IAAI,IAAI,GAAuB,SAAS,CAAC;IAEzC,MAAM,SAAS,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE5C,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;QAC1C,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtD,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;KACrC;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACzC,CAAC;AAED,SAAS,KAAK,CAAC,MAAc;IAC3B,OAAO,MAAM;SACV,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAChB,GAAG,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC/D,IAAI,EAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,GAAG,EAAC;YAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC,CAAC,CAAC;AACP,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { Operator, ParsedValue } from '../types';\n\nfunction parseGroup(search: string): ParsedValue {\n  const [fullPath, value] = search.split('=').map(decodeURIComponent);\n\n  const operators = Object.values(Operator) as Operator[];\n  const operator = operators.find(operator => fullPath.endsWith(`:${operator}`)) ?? null;\n\n  let path = fullPath.substring(0, operator ? fullPath.lastIndexOf(':') : undefined);\n  let name: string | undefined = undefined;\n\n  const nameStart = fullPath.lastIndexOf('[');\n\n  if (path.endsWith(']') && nameStart !== -1) {\n    name = path.substring(nameStart + 1, path.length - 1);\n    path = path.substring(0, nameStart);\n  }\n\n  return { name, path, value, operator };\n}\n\nfunction parse(search: string): (ParsedValue | ParsedValue[])[] {\n  return search\n    .split('&')\n    .filter(v => !!v)\n    .map(entry => {\n      const [name, value] = entry.split('=').map(decodeURIComponent);\n      if (!value?.includes('|')) return parseGroup(entry);\n      return `${encodeURIComponent(name)}=${value}`.split('|').map(v => parseGroup(v));\n    });\n}\n\nexport { parse };\n"]}
+{"version":3,"file":"parse.js","sourceRoot":"","sources":["../../../../../src/elements/public/QueryBuilder/utils/parse.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAe,oBAAiB;AAEjD,SAAS,UAAU,CAAC,MAAc;;IAChC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAEpE,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAe,CAAC;IACxD,MAAM,QAAQ,SAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC,mCAAI,IAAI,CAAC;IAEvF,IAAI,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnF,IAAI,IAAI,GAAuB,SAAS,CAAC;IAEzC,MAAM,SAAS,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAE5C,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;QAC1C,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtD,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;YAAE,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KACvE;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AACzC,CAAC;AAED,SAAS,KAAK,CAAC,MAAc;IAC3B,OAAO,MAAM;SACV,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAChB,GAAG,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC/D,IAAI,EAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,GAAG,EAAC;YAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF,CAAC,CAAC,CAAC;AACP,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC","sourcesContent":["import { Operator, ParsedValue } from '../types';\n\nfunction parseGroup(search: string): ParsedValue {\n  const [fullPath, value] = search.split('=').map(decodeURIComponent);\n\n  const operators = Object.values(Operator) as Operator[];\n  const operator = operators.find(operator => fullPath.endsWith(`:${operator}`)) ?? null;\n\n  let path = fullPath.substring(0, operator ? fullPath.lastIndexOf(':') : undefined);\n  let name: string | undefined = undefined;\n\n  const nameStart = fullPath.lastIndexOf('[');\n\n  if (path.endsWith(']') && nameStart !== -1) {\n    name = path.substring(nameStart + 1, path.length - 1);\n    path = path.substring(0, nameStart);\n    if (path.endsWith(':name')) path = path.substring(0, path.length - 5);\n  }\n\n  return { name, path, value, operator };\n}\n\nfunction parse(search: string): (ParsedValue | ParsedValue[])[] {\n  return search\n    .split('&')\n    .filter(v => !!v)\n    .map(entry => {\n      const [name, value] = entry.split('=').map(decodeURIComponent);\n      if (!value?.includes('|')) return parseGroup(entry);\n      return `${encodeURIComponent(name)}=${value}`.split('|').map(v => parseGroup(v));\n    });\n}\n\nexport { parse };\n"]}

package/dist/elements/public/QueryBuilder/utils/stringify.js

@@ -1,25 +1,47 @@
 function stringifyGroup(parsedValue) {
     let result = parsedValue.path;
     if (parsedValue.name)
-        result += `[${parsedValue.name}]`;
+        result += `:name[${parsedValue.name}]`;
     if (parsedValue.operator)
         result += `:${parsedValue.operator}`;
     result = `${encodeURIComponent(result)}=${encodeURIComponent(parsedValue.value)}`;
     return result === '=' ? '' : result;
 }
 function stringify(newValue) {
-    return newValue
-        .map(newRule => {
-        if (Array.isArray(newRule)) {
-            const alternatives = [newRule[0].value, newRule.slice(1).map(or => stringifyGroup(or))];
+    const toQuery = (rules, rule) => {
+        if (Array.isArray(rule)) {
+            const alternatives = [rule[0].value, rule.slice(1).map(or => stringifyGroup(or))];
             const orValue = alternatives.join('|');
-            return `${newRule[0].path}=${encodeURIComponent(orValue)}`;
+            rules.push(`${rule[0].path}=${encodeURIComponent(orValue)}`);
         }
-        else {
-            return stringifyGroup(newRule);
+        else if (rule.path !== 'zoom') {
+            rules.push(stringifyGroup(rule));
         }
+        return rules;
+    };
+    const query = newValue.reduce(toQuery, []);
+    const zoom = getZoomedRels(newValue).join(',');
+    if (zoom)
+        query.push(`zoom=${encodeURIComponent(zoom)}`);
+    return query.join('&');
+}
+function getZoomedRels(value) {
+    return value
+        .map(rule => {
+        if (Array.isArray(rule))
+            return getZoomedRels(rule);
+        if (rule.name)
+            return [rule.path];
+        const pathMembers = rule.path.split(':');
+        return pathMembers.slice(0, pathMembers.length - 1);
     })
-        .join('&');
+        .flat()
+        .sort((rel1, rel2) => rel2.length - rel1.length)
+        .filter((rel, index, rels) => {
+        return rels.every((_rel, _index) => {
+            return (_index >= index || _rel !== rel) && !_rel.startsWith(`${rel}:`);
+        });
+    });
 }
 export { stringify };
 //# sourceMappingURL=stringify.js.map