npm - @foxy.io/elements - Versions diffs - 1.32.0-beta.3 → 1.32.0-beta.4 - Mend

@foxy.io/elements 1.32.0-beta.3 → 1.32.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js CHANGED Viewed

@@ -66,9 +66,8 @@ div:has(> select)::after{
             'transition-colors flex items-center': true,
             'text-secondary': this.readonly,
             'text-disabled': this.disabled,
-            'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,
-            'pl-s border border-contrast-10 rounded-s': isSummaryItem,
-            'ml-s h-m': !isSummaryItem,
+            'border border-contrast-10 rounded-s': isSummaryItem,
+            'h-m': !isSummaryItem,
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
         const addItem = () => {
@@ -87,120 +86,97 @@ div:has(> select)::after{
             this._value = newValue;
             this.__newItem = '';
         };
-        const helperAndError = html `
-      <div
-        class=${classMap({
-            'transition-colors text-xs mt-xs': true,
-            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
-            'text-disabled': !isSummaryItem && this.disabled,
-            'text-secondary': isSummaryItem,
-        })}
-        ?hidden=${!this.helperText}
-      >
-        ${this.helperText}
-      </div>
-      <div
-        class="mt-xs text-xs leading-xs text-error"
-        ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}
-      >
-        ${this._errorMessage}
-      </div>
-    `;
         return html `
-      <div class="group">
+      <div class="mb-s" ?hidden=${!this.label && !this.helperText}>
+        <div class=${classMap({ 'font-medium text-l': !isSummaryItem })}>${this.label}</div>
         <div
           class=${classMap({
-            'transition-colors mb-xs': true,
-            'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,
-            'text-disabled': !isSummaryItem && this.disabled,
-            'font-medium text-s': !isSummaryItem,
-            'text-m': isSummaryItem,
+            'text-secondary': true,
+            'text-xs': isSummaryItem,
+            'text-s': !isSummaryItem,
         })}
+          ?hidden=${!this.helperText}
         >
-          ${this.label}
+          ${this.helperText}
         </div>
+      </div>
-        ${isSummaryItem ? helperAndError : ''}
-        <div
-          class=${classMap({
+      <div
+        class=${classMap({
+            'bg-contrast-5 rounded': !isSummaryItem,
             'mt-s': isSummaryItem,
-            'transition-colors': true,
-            'border border-contrast-10 rounded': !isSummaryItem,
-            'group-hover-border-contrast-20': !isSummaryItem && isInteractive,
         })}
-        >
-          <ol
-            class=${classMap({
+      >
+        <ol
+          class=${classMap({
             'transition-colors font-medium': true,
             'divide-y divide-contrast-10': !isSummaryItem,
             'flex flex-wrap gap-s': isSummaryItem,
         })}
-          >
-            ${repeat(this._value, item => item.value, (item, index) => {
+        >
+          ${repeat(this._value, item => item.value, (item, index) => {
             var _a;
             return html `
-                  <li class=${itemClass}>
-                    <div class="flex-1 mr-s">${(_a = item.label) !== null && _a !== void 0 ? _a : item.value}</div>
+                <li
+                  class=${itemClass}
+                  style="padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                >
+                  <div class="flex-1 mr-s">${(_a = item.label) !== null && _a !== void 0 ? _a : item.value}</div>
-                    <button
-                      aria-label=${this.t('delete')}
-                      class=${deleteButtonClass}
-                      ?disabled=${this.disabled}
-                      @click=${() => {
+                  <button
+                    aria-label=${this.t('delete')}
+                    class=${deleteButtonClass}
+                    ?disabled=${this.disabled}
+                    @click=${() => {
                 this._value = this._value.filter((_, i) => i !== index);
             }}
-                    >
-                      <iron-icon icon="lumo:cross" class="icon-inline text-xl"></iron-icon>
-                    </button>
-                  </li>
-                `;
+                  >
+                    <iron-icon icon="lumo:cross" class="icon-inline text-xl"></iron-icon>
+                  </button>
+                </li>
+              `;
         })}
-          </ol>
+        </ol>
-          <div
-            style=${isSummaryItem
-            ? ''
-            : this._value.length === 0
-                ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
-                : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
-            class=${classMap({
-            'transition-colors pl-s h-m flex items-center gap-xs': true,
+        <div
+          style="padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+          class=${classMap({
+            'transition-colors h-m flex items-center gap-xs': true,
             'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,
-            'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,
+            'bg-contrast-5 hover-bg-contrast-10': !isSummaryItem && isInteractive,
             'bg-contrast-5': !isSummaryItem && this.disabled,
             'flex': !this.readonly,
             'hidden': this.readonly,
             'rounded-s border border-contrast-10': isSummaryItem,
             'mt-s': isSummaryItem && this._value.length > 0,
+            'rounded': !isSummaryItem && this._value.length === 0,
+            'rounded-b': !isSummaryItem && this._value.length > 0,
         })}
-          >
-            ${this.range
+        >
+          ${this.range
             ? html `
-                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_from">
-                  </foxy-i18n>
+                <foxy-i18n infer="" class="text-disabled font-medium" key="range_from"> </foxy-i18n>
-                  <input
-                    placeholder=${this.placeholder}
-                    class=${classMap({
+                <input
+                  placeholder=${this.placeholder}
+                  class=${classMap({
                 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,
                 'text-disabled': this.disabled,
             })}
-                    list="list"
-                    ...=${spread(this.inputParams)}
-                    .value=${live((_a = this.__newItem.split('..')[0]) !== null && _a !== void 0 ? _a : '')}
-                    ?disabled=${this.disabled}
-                    ?readonly=${this.readonly}
-                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
-                    @change=${(evt) => evt.stopPropagation()}
-                    @input=${(evt) => {
+                  list="list"
+                  ...=${spread(this.inputParams)}
+                  .value=${live((_a = this.__newItem.split('..')[0]) !== null && _a !== void 0 ? _a : '')}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                  @change=${(evt) => evt.stopPropagation()}
+                  @input=${(evt) => {
                 var _a;
                 const newFrom = evt.currentTarget.value.trim();
                 const oldTo = (_a = this.__newItem.split('..')[1]) !== null && _a !== void 0 ? _a : '';
                 this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;
             }}
-                    @paste=${(evt) => {
+                  @paste=${(evt) => {
                 var _a, _b, _c;
                 evt.preventDefault();
                 const newFrom = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
@@ -208,33 +184,33 @@ div:has(> select)::after{
                 this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;
                 addItem();
             }}
-                    @blur=${() => {
+                  @blur=${() => {
                 this.__isErrorVisible = true;
             }}
-                  />
+                />
-                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_to"></foxy-i18n>
+                <foxy-i18n infer="" class="text-disabled font-medium" key="range_to"></foxy-i18n>
-                  <input
-                    placeholder=${this.placeholder}
-                    class=${classMap({
+                <input
+                  placeholder=${this.placeholder}
+                  class=${classMap({
                 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,
                 'text-disabled': this.disabled,
             })}
-                    list="list"
-                    ...=${spread(this.inputParams)}
-                    .value=${live((_b = this.__newItem.split('..')[1]) !== null && _b !== void 0 ? _b : '')}
-                    ?disabled=${this.disabled}
-                    ?readonly=${this.readonly}
-                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
-                    @change=${(evt) => evt.stopPropagation()}
-                    @input=${(evt) => {
+                  list="list"
+                  ...=${spread(this.inputParams)}
+                  .value=${live((_b = this.__newItem.split('..')[1]) !== null && _b !== void 0 ? _b : '')}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                  @change=${(evt) => evt.stopPropagation()}
+                  @input=${(evt) => {
                 var _a;
                 const newTo = evt.currentTarget.value.trim();
                 const oldFrom = (_a = this.__newItem.split('..')[0]) !== null && _a !== void 0 ? _a : '';
                 this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;
             }}
-                    @paste=${(evt) => {
+                  @paste=${(evt) => {
                 var _a, _b, _c;
                 evt.preventDefault();
                 const newTo = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
@@ -242,75 +218,75 @@ div:has(> select)::after{
                 this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;
                 addItem();
             }}
-                    @blur=${() => {
+                  @blur=${() => {
                 this.__isErrorVisible = true;
             }}
-                  />
-                `
+                />
+              `
             : html `
-                  <input
-                    placeholder=${this.placeholder}
-                    class=${classMap({
+                <input
+                  placeholder=${this.placeholder}
+                  class=${classMap({
                 'w-full bg-transparent appearance-none h-m font-medium focus-outline-none': true,
                 'text-disabled': this.disabled,
             })}
-                    list="list"
-                    ...=${spread(this.inputParams)}
-                    .value=${live(this.__newItem)}
-                    ?disabled=${this.disabled}
-                    ?readonly=${this.readonly}
-                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
-                    @change=${(evt) => evt.stopPropagation()}
-                    @input=${(evt) => {
+                  list="list"
+                  ...=${spread(this.inputParams)}
+                  .value=${live(this.__newItem)}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                  @change=${(evt) => evt.stopPropagation()}
+                  @input=${(evt) => {
                 this.__newItem = evt.currentTarget.value.trim();
             }}
-                    @paste=${(evt) => {
+                  @paste=${(evt) => {
                 var _a, _b;
                 evt.preventDefault();
                 this.__newItem = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
                 addItem();
             }}
-                    @blur=${() => {
+                  @blur=${() => {
                 this.__isErrorVisible = true;
             }}
-                  />
-                `}
+                />
+              `}
-            <div
-              class=${classMap({
+          <div
+            class=${classMap({
             'relative': true,
             'hover-text-base focus-within-text-primary-contrast': !this.disabled,
             'text-disabled': this.disabled,
         })}
-              ?hidden=${this.units.length === 0}
-            >
-              <select
-                style="min-width: 8rem"
-                class=${classMap({
+            ?hidden=${this.units.length === 0}
+          >
+            <select
+              style="min-width: 8rem"
+              class=${classMap({
             'transition-colors rounded-s mx-xs px-s': true,
             'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,
             'hover-bg-contrast focus-bg-primary': !this.disabled,
         })}
-                ?disabled=${this.disabled}
-              >
-                ${this.units.map(({ label, value }) => {
+              ?disabled=${this.disabled}
+            >
+              ${this.units.map(({ label, value }) => {
             return html `<option value=${value}>${label !== null && label !== void 0 ? label : value}</option>`;
         })}
-              </select>
-            </div>
+            </select>
+          </div>
-            <datalist id="list">
-              ${this.options.map(({ label, value }) => {
+          <datalist id="list">
+            ${this.options.map(({ label, value }) => {
             if (this._value.some(item => item.value === value))
                 return;
             return html `<option value=${value}>${label !== null && label !== void 0 ? label : value}</option>`;
         })}
-            </datalist>
+          </datalist>
-            <div class="mr-xs ml-auto" ?hidden=${!this.__newItem}>
-              <button
-                aria-label=${this.t('submit')}
-                class=${classMap({
+          <div class="mr-xs ml-auto" ?hidden=${!this.__newItem}>
+            <button
+              aria-label=${this.t('submit')}
+              class=${classMap({
             'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,
             'flex items-center justify-center rounded-s transition-colors': true,
             'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,
@@ -318,16 +294,24 @@ div:has(> select)::after{
             'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,
             'focus-ring-2': !isAddButtonDisabled,
         })}
-                ?disabled=${isAddButtonDisabled}
-                @click=${addItem}
-              >
-                <iron-icon icon="lumo:plus" class="icon-inline text-l"></iron-icon>
-              </button>
-            </div>
+              ?disabled=${isAddButtonDisabled}
+              @click=${addItem}
+            >
+              <iron-icon icon="lumo:plus" class="icon-inline text-l"></iron-icon>
+            </button>
           </div>
         </div>
+      </div>
-        ${isSummaryItem ? '' : helperAndError}
+      <div
+        class=${classMap({
+            'mt-s leading-xs text-error': true,
+            'text-xs': isSummaryItem,
+            'text-s': !isSummaryItem,
+        })}
+        ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}
+      >
+        ${this._errorMessage}
       </div>
     `;
     }

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n inputParams: { attribute: false },\n options: { type: Array },\n layout: {},\n units: { type: Array },\n range: {},\n __isErrorVisible: { attribute: false },\n __newItem: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n div:has(> select) {\n position: relative;\n }\n\n div:has(> select)::after {\n content: ' ';\n position: absolute;\n top: 50%;\n margin-top: -2px;\n right: 10px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid currentColor;\n }\n `,\n ];\n }\n\n inputParams: Record<string, unknown> = {};\n\n options: Option[] = [];\n\n layout: 'standalone' \| 'summary-item' \| null = null;\n\n units: Unit[] = [];\n\n range: null \| 'optional' = null;\n\n private __isErrorVisible = false;\n\n private __newItem = '';\n\n render(): TemplateResult {\n const isSummaryItem = this.layout === 'summary-item';\n const isInteractive = !this.disabled && !this.readonly;\n\n const deleteButtonClass = classMap({\n 'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n 'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n 'flex items-center justify-center': !this.readonly,\n 'hidden': this.readonly,\n 'mr-xs': !isSummaryItem,\n });\n\n const itemClass = classMap({\n 'transition-colors flex items-center': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,\n 'pl-s border border-contrast-10 rounded-s': isSummaryItem,\n 'ml-s h-m': !isSummaryItem,\n });\n\n const isAddButtonDisabled = this.disabled \|\| !this.__newItem;\n\n const addItem = () => {\n const newValue = [...this._value];\n const unit = this.renderRoot.querySelector('select')?.value;\n\n this.__newItem\n .split('\\n')\n .map(code => code.trim())\n .filter(code => code.length > 0)\n .forEach(value => {\n if (!newValue.some(item => item.value === value)) {\n newValue.push({ value, unit });\n }\n });\n\n this._value = newValue;\n this.__newItem = '';\n };\n\n const helperAndError = html`\n <div\n class=${classMap({\n 'transition-colors text-xs mt-xs': true,\n 'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n 'text-disabled': !isSummaryItem && this.disabled,\n 'text-secondary': isSummaryItem,\n })}\n ?hidden=${!this.helperText}\n >\n ${this.helperText}\n </div>\n\n <div\n class=\"mt-xs text-xs leading-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| !this._errorMessage \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </div>\n `;\n\n return html`\n <div class=\"group\">\n <div\n class=${classMap({\n 'transition-colors mb-xs': true,\n 'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n 'text-disabled': !isSummaryItem && this.disabled,\n 'font-medium text-s': !isSummaryItem,\n 'text-m': isSummaryItem,\n })}\n >\n ${this.label}\n </div>\n\n ${isSummaryItem ? helperAndError : ''}\n\n <div\n class=${classMap({\n 'mt-s': isSummaryItem,\n 'transition-colors': true,\n 'border border-contrast-10 rounded': !isSummaryItem,\n 'group-hover-border-contrast-20': !isSummaryItem && isInteractive,\n })}\n >\n <ol\n class=${classMap({\n 'transition-colors font-medium': true,\n 'divide-y divide-contrast-10': !isSummaryItem,\n 'flex flex-wrap gap-s': isSummaryItem,\n })}\n >\n ${repeat(\n this._value,\n item => item.value,\n (item, index) => {\n return html`\n <li class=${itemClass}>\n <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n <button\n aria-label=${this.t('delete')}\n class=${deleteButtonClass}\n ?disabled=${this.disabled}\n @click=${() => {\n this._value = this._value.filter((_, i) => i !== index);\n }}\n >\n <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n </button>\n </li>\n `;\n }\n )}\n </ol>\n\n <div\n style=${isSummaryItem\n ? ''\n : this._value.length === 0\n ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n class=${classMap({\n 'transition-colors pl-s h-m flex items-center gap-xs': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n 'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,\n 'bg-contrast-5': !isSummaryItem && this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n 'rounded-s border border-contrast-10': isSummaryItem,\n 'mt-s': isSummaryItem && this._value.length > 0,\n })}\n >\n ${this.range\n ? html`\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n </foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[0] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newFrom = evt.clipboardData?.getData('text') ?? '';\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[1] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newTo = evt.clipboardData?.getData('text') ?? '';\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `\n : html`\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n this.__newItem = evt.clipboardData?.getData('text') ?? '';\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `}\n\n <div\n class=${classMap({\n 'relative': true,\n 'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n ?hidden=${this.units.length === 0}\n >\n <select\n style=\"min-width: 8rem\"\n class=${classMap({\n 'transition-colors rounded-s mx-xs px-s': true,\n 'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n 'hover-bg-contrast focus-bg-primary': !this.disabled,\n })}\n ?disabled=${this.disabled}\n >\n ${this.units.map(({ label, value }) => {\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </select>\n </div>\n\n <datalist id=\"list\">\n ${this.options.map(({ label, value }) => {\n if (this._value.some(item => item.value === value)) return;\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </datalist>\n\n <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n <button\n aria-label=${this.t('submit')}\n class=${classMap({\n 'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n 'flex items-center justify-center rounded-s transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n 'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n 'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n 'focus-ring-2': !isAddButtonDisabled,\n })}\n ?disabled=${isAddButtonDisabled}\n @click=${addItem}\n >\n <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n </button>\n </div>\n </div>\n </div>\n\n ${isSummaryItem ? '' : helperAndError}\n </div>\n `;\n }\n\n protected get _value(): Item[] {\n return (super._value ?? []) as Item[];\n }\n\n protected set _value(newValue: Item[]) {\n super._value = newValue;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n inputParams: { attribute: false },\n options: { type: Array },\n layout: {},\n units: { type: Array },\n range: {},\n __isErrorVisible: { attribute: false },\n __newItem: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n div:has(> select) {\n position: relative;\n }\n\n div:has(> select)::after {\n content: ' ';\n position: absolute;\n top: 50%;\n margin-top: -2px;\n right: 10px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid currentColor;\n }\n `,\n ];\n }\n\n inputParams: Record<string, unknown> = {};\n\n options: Option[] = [];\n\n layout: 'standalone' \| 'summary-item' \| null = null;\n\n units: Unit[] = [];\n\n range: null \| 'optional' = null;\n\n private __isErrorVisible = false;\n\n private __newItem = '';\n\n render(): TemplateResult {\n const isSummaryItem = this.layout === 'summary-item';\n const isInteractive = !this.disabled && !this.readonly;\n\n const deleteButtonClass = classMap({\n 'w-xs h-xs rounded-s transition-colors flex-shrink-0': true,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n 'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n 'flex items-center justify-center': !this.readonly,\n 'hidden': this.readonly,\n 'mr-xs': !isSummaryItem,\n });\n\n const itemClass = classMap({\n 'transition-colors flex items-center': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'border border-contrast-10 rounded-s': isSummaryItem,\n 'h-m': !isSummaryItem,\n });\n\n const isAddButtonDisabled = this.disabled \|\| !this.__newItem;\n\n const addItem = () => {\n const newValue = [...this._value];\n const unit = this.renderRoot.querySelector('select')?.value;\n\n this.__newItem\n .split('\\n')\n .map(code => code.trim())\n .filter(code => code.length > 0)\n .forEach(value => {\n if (!newValue.some(item => item.value === value)) {\n newValue.push({ value, unit });\n }\n });\n\n this._value = newValue;\n this.__newItem = '';\n };\n\n return html`\n <div class=\"mb-s\" ?hidden=${!this.label && !this.helperText}>\n <div class=${classMap({ 'font-medium text-l': !isSummaryItem })}>${this.label}</div>\n <div\n class=${classMap({\n 'text-secondary': true,\n 'text-xs': isSummaryItem,\n 'text-s': !isSummaryItem,\n })}\n ?hidden=${!this.helperText}\n >\n ${this.helperText}\n </div>\n </div>\n\n <div\n class=${classMap({\n 'bg-contrast-5 rounded': !isSummaryItem,\n 'mt-s': isSummaryItem,\n })}\n >\n <ol\n class=${classMap({\n 'transition-colors font-medium': true,\n 'divide-y divide-contrast-10': !isSummaryItem,\n 'flex flex-wrap gap-s': isSummaryItem,\n })}\n >\n ${repeat(\n this._value,\n item => item.value,\n (item, index) => {\n return html`\n <li\n class=${itemClass}\n style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n <button\n aria-label=${this.t('delete')}\n class=${deleteButtonClass}\n ?disabled=${this.disabled}\n @click=${() => {\n this._value = this._value.filter((_, i) => i !== index);\n }}\n >\n <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n </button>\n </li>\n `;\n }\n )}\n </ol>\n\n <div\n style=\"padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n class=${classMap({\n 'transition-colors h-m flex items-center gap-xs': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': !isSummaryItem,\n 'bg-contrast-5 hover-bg-contrast-10': !isSummaryItem && isInteractive,\n 'bg-contrast-5': !isSummaryItem && this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n 'rounded-s border border-contrast-10': isSummaryItem,\n 'mt-s': isSummaryItem && this._value.length > 0,\n 'rounded': !isSummaryItem && this._value.length === 0,\n 'rounded-b': !isSummaryItem && this._value.length > 0,\n })}\n >\n ${this.range\n ? html`\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\"> </foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[0] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newFrom = evt.clipboardData?.getData('text') ?? '';\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[1] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newTo = evt.clipboardData?.getData('text') ?? '';\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `\n : html`\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n this.__newItem = evt.clipboardData?.getData('text') ?? '';\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `}\n\n <div\n class=${classMap({\n 'relative': true,\n 'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n ?hidden=${this.units.length === 0}\n >\n <select\n style=\"min-width: 8rem\"\n class=${classMap({\n 'transition-colors rounded-s mx-xs px-s': true,\n 'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n 'hover-bg-contrast focus-bg-primary': !this.disabled,\n })}\n ?disabled=${this.disabled}\n >\n ${this.units.map(({ label, value }) => {\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </select>\n </div>\n\n <datalist id=\"list\">\n ${this.options.map(({ label, value }) => {\n if (this._value.some(item => item.value === value)) return;\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </datalist>\n\n <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n <button\n aria-label=${this.t('submit')}\n class=${classMap({\n 'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n 'flex items-center justify-center rounded-s transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n 'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n 'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n 'focus-ring-2': !isAddButtonDisabled,\n })}\n ?disabled=${isAddButtonDisabled}\n @click=${addItem}\n >\n <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div\n class=${classMap({\n 'mt-s leading-xs text-error': true,\n 'text-xs': isSummaryItem,\n 'text-s': !isSummaryItem,\n })}\n ?hidden=${!this.__isErrorVisible \|\| !this._errorMessage \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </div>\n `;\n }\n\n protected get _value(): Item[] {\n return (super._value ?? []) as Item[];\n }\n\n protected set _value(newValue: Item[]) {\n super._value = newValue;\n }\n}\n"]}

package/dist/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.d.ts CHANGED Viewed

@@ -4,8 +4,8 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 import { Operator } from '../../public/QueryBuilder/types';
 export declare class InternalQueryBuilderControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
-    operators: Operator[];
+    disableZoom: boolean;
     disableOr: boolean;
-    layout: 'standalone' | 'summary-item' | null;
+    operators: Operator[];
     renderControl(): TemplateResult;
 }

package/dist/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.js CHANGED Viewed

@@ -1,71 +1,52 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { Operator } from "../../public/QueryBuilder/types.js";
-import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 export class InternalQueryBuilderControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
-        this.operators = Object.values(Operator);
+        this.disableZoom = false;
         this.disableOr = false;
-        this.layout = null;
+        this.operators = Object.values(Operator);
     }
     static get properties() {
         return {
             ...super.properties,
-            operators: { type: Array },
+            disableZoom: { type: Boolean, attribute: 'disable-zoom' },
             disableOr: { type: Boolean, attribute: 'disable-or' },
-            layout: {},
+            operators: { type: Array },
         };
     }
     renderControl() {
-        var _a;
         const { label, helperText, _errorMessage: error } = this;
         const showError = error && !this.disabled && !this.readonly;
-        const layout = (_a = this.layout) !== null && _a !== void 0 ? _a : 'standalone';
-        const builder = html `
-      <foxy-query-builder
-        infer="query-builder"
-        class=${classMap({ 'mt-xs': layout === 'summary-item' })}
-        style=${layout === 'summary-item'
-            ? '--lumo-border-radius: var(--lumo-border-radius-s)'
-            : ''}
-        .operators=${this.operators}
-        .value=${this._value}
-        ?disable-or=${this.disableOr}
-        @change=${(evt) => {
+        return html `
+      <section class="grid gap-s leading-xs">
+        <div ?hidden=${!label && !helperText}>
+          ${label ? html `<p class="text-l font-medium">${label}</p>` : ''}
+          ${helperText ? html `<p class="text-s text-secondary">${helperText}</p>` : ''}
+        </div>
+        <div
+          class="bg-contrast-5 rounded"
+          style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);"
+        >
+          <foxy-query-builder
+            infer="query-builder"
+            style="--lumo-border-radius: var(--lumo-border-radius-s); --lumo-border-radius-l: var(--lumo-border-radius-s)"
+            .operators=${this.operators}
+            .value=${this._value}
+            ?disable-zoom=${this.disableZoom}
+            ?disable-or=${this.disableOr}
+            @change=${(evt) => {
             var _a;
             const queryBuilder = evt.currentTarget;
             this._value = (_a = queryBuilder.value) !== null && _a !== void 0 ? _a : '';
         }}
-      >
-      </foxy-query-builder>
-    `;
-        return html `
-      <section
-        class=${classMap({
-            'grid gap-xs leading-xs transition-colors text-secondary': true,
-            'hover-text-body': layout === 'standalone' && !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
-            'text-body': this.readonly,
-        })}
-      >
-        ${label
-            ? html `
-              <p
-                class=${classMap({
-                'text-s font-medium': layout === 'standalone',
-                'text-m text-body': layout === 'summary-item',
-                'hidden': !label,
-            })}
-              >
-                ${label}
-              </p>
-            `
-            : ''}
-        ${layout === 'standalone' ? builder : ''}
-        ${helperText ? html `<p class="text-xs">${helperText}</p>` : ''}
-        ${showError ? html `<p class="text-xs text-error">${error}</p>` : ''}
-        ${layout === 'summary-item' ? builder : ''}
+          >
+          </foxy-query-builder>
+        </div>
+        ${showError ? html `<p class="text-s text-error">${error}</p>` : ''}
       </section>
     `;
     }

package/dist/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalQueryBuilderControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,QAAQ,EAAE,2CAAwC;AAC3D,OAAO,EAAE,~~QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,~~IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,2BAA4B,SAAQ,uBAAuB;IAAxE;;QAUE,~~cAAS~~,~~GAAe~~,~~MAAM~~,CAAC,~~MAAM~~,~~CAAC~~,~~QAAQ~~,CAAC~~,CAAC~~;~~QAEhD~~,cAAS,~~GAAG~~,~~KAAK~~,CAAC~~;QAElB~~,~~WAAM~~,~~GAAyC~~,~~IAAI~~,CAAC;~~IAqDtD~~,CAAC;~~IAlEC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,~~SAAS~~,EAAE,EAAE,IAAI,EAAE,~~KAAK~~,EAAE;~~YAC1B~~,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE;YACrD,~~MAAM~~,EAAE,EAAE;~~SACX~~,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACzD,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;~~QAC5D~~,~~MAAM,MAAM,SAAG,IAAI,CAAC,MAAM,mCAAI,YAAY,CAAC;QAC3C,MAAM,~~OAAO,~~GAAG,~~IAAI,CAAA~~;;;gBAGR~~,~~QAAQ,~~CAAC,~~EAAE,OAAO,EAAE,MAAM,~~KAAK,~~cAAc~~,~~EAAE~~,~~CAAC~~;~~gBAChD~~,~~MAAM,~~KAAK,~~cAAc;YAC/B,~~CAAC,CAAC,~~mDAAmD;YACrD,~~CAAC,~~CAAC,EAAE;qBACO,~~IAAI,~~CAAC~~,~~SAAS;iBAClB~~,~~IAAI~~,~~CAAC,~~MAAM~~;sBACN~~,~~IAAI~~,CAAC,~~SAAS;kBAClB,~~CAAC,~~GAAgB,~~EAAE~~,EAAE;;YAC7B,MAAM,YAAY,GAAG,GAAG,CAAC,aAA6B,CAAC~~;~~YACvD~~,~~IAAI~~,CAAC,~~MAAM,SAAG,YAAY,~~CAAC,~~KAAK,mCAAI,EAAE,~~CAAC~~;QACzC~~,~~CAAC;;;KAGJ,CAAC;QAEF,OAAO,~~IAAI,CAAA~~;;gBAEC~~,~~QAAQ~~,~~CAAC;YACf~~,~~yDAAyD,EAAE,IAAI;YAC/D,iBAAiB,EAAE,~~MAAM,~~KAAK~~,~~YAAY,IAAI,~~CAAC,~~IAAI,~~CAAC,~~QAAQ~~,IAAI,CAAC,IAAI,CAAC,~~QAAQ~~;~~YAC9E~~,~~eAAe,EAAE,~~IAAI,CAAC,~~QAAQ~~;~~YAC9B~~,~~WAAW,EAAE,~~IAAI,CAAC,~~QAAQ~~;~~SAC3B~~,CAAC~~;;UAEA~~,~~KAAK;YACL~~,~~CAAC~~,~~CAAC,IAAI,CAAA~~;;~~wBAEQ~~,~~QAAQ,CAAC;gBACf,oBAAoB,EAAE,~~MAAM,~~KAAK,~~YAAY~~;gBAC7C~~,~~kBAAkB~~,~~EAAE~~,~~MAAM,KAAK,cAAc;gBAC7C,QAAQ,EAAE,~~CAAC,~~KAAK;aACjB~~,CAAC~~;;kBAEA,KAAK;;aAEV~~;~~YACH~~,~~CAAC~~,CAAC,~~EAAE;UACJ,~~MAAM,~~KAAK~~,YAAY,CAAC,~~CAAC~~,~~CAAC~~,~~OAAO~~,CAAC~~,CAAC,CAAC,EAAE~~;~~UACtC~~,~~UAAU,~~CAAC,~~CAAC,CAAC,IAAI,CAAA,sBAAsB,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE;UAC5D,~~SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,~~iCAAiC~~,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE~~;UACjE,MAAM,KAAK,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE~~;;~~KAE7C~~,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { QueryBuilder } from '../../public/QueryBuilder/QueryBuilder';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { Operator } from '../../public/QueryBuilder/types';\nimport { ~~classMap } from '../../../utils/class-map';\nimport {~~ html } from 'lit-html';\n\nexport class InternalQueryBuilderControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n ~~operators~~: { type: ~~Array~~ },\n disableOr: { type: Boolean, attribute: 'disable-or' },\n ~~layout~~: {},\n };\n }\n\n ~~operators:~~ ~~Operator[]~~ = ~~Object.values(Operator)~~;\n\n disableOr = false;\n\n ~~layout~~: ~~'standalone'~~ ~~\| 'summary-item' \| null~~ = ~~null~~;\n\n renderControl(): TemplateResult {\n const { label, helperText, _errorMessage: error } = this;\n const showError = error && !this.disabled && !this.readonly;\n ~~const~~ ~~layout~~ = ~~this.layout~~ ?? '~~standalone~~';\n ~~const~~ ~~builder~~ = ~~html`\n <foxy~~-~~query~~-~~builder~~\n ~~infer~~=\"~~query~~-~~builder~~\"\n ~~class=${classMap~~({ ~~'mt~~-~~xs':~~ ~~layout~~ ~~===~~ ~~'summary~~-~~item'~~ })}\n ~~style=${layout === 'summary~~-~~item'~~\n ~~? '~~--lumo-border-radius: var(--lumo-border-radius-s)~~'\n~~ : ~~''}~~\n .operators=${this.operators}\n .value=${this._value}\n ?disable-or=${this.disableOr}\n @change=${(evt: CustomEvent) => {\n const queryBuilder = evt.currentTarget as QueryBuilder;\n this._value = queryBuilder.value ?? '';\n }}\n >\n </foxy-query-builder>\n ~~`;\n\n return html`\n <section\n~~ class=${classMap({\n 'grid gap-xs leading-xs transition-colors text-secondary': true,\n 'hover-text-body': layout === 'standalone' && !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n 'text-body': this.readonly,\n })}\n >\n ${label\n ? html`\n <p\n class=${classMap({\n 'text-s font-medium': layout === 'standalone',\n 'text-m text-body': layout === 'summary-item',\n 'hidden': !label,\n })}\n >\n ${label}\n </p>\n ~~`\n : ''}~~\n ${~~layout === 'standalone' ? builder : ''}\n ${helperText ? html`<p class=\"text-xs\">${helperText}</p>` : ''}\n ${~~showError ? html`<p class=\"text-xs text-error\">${error}</p>` : ''}\n ~~${layout === 'summary-item' ? builder : ''}\n~~ </section>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalQueryBuilderControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,QAAQ,EAAE,2CAAwC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,2BAA4B,SAAQ,uBAAuB;IAAxE;;QAUE,gBAAW,GAAG,KAAK,CAAC;QAEpB,cAAS,GAAG,KAAK,CAAC;QAElB,cAAS,GAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAoClD,CAAC;IAjDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE;YACzD,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE;YACrD,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;SAC3B,CAAC;IACJ,CAAC;IAQD,aAAa;QACX,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACzD,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE5D,OAAO,IAAI,CAAA;;uBAEQ,CAAC,KAAK,IAAI,CAAC,UAAU;YAChC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;YAC7D,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;yBAU7D,IAAI,CAAC,SAAS;qBAClB,IAAI,CAAC,MAAM;4BACJ,IAAI,CAAC,WAAW;0BAClB,IAAI,CAAC,SAAS;sBAClB,CAAC,GAAgB,EAAE,EAAE;;YAC7B,MAAM,YAAY,GAAG,GAAG,CAAC,aAA6B,CAAC;YACvD,IAAI,CAAC,MAAM,SAAG,YAAY,CAAC,KAAK,mCAAI,EAAE,CAAC;QACzC,CAAC;;;;;UAKH,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;;KAErE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { QueryBuilder } from '../../public/QueryBuilder/QueryBuilder';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { Operator } from '../../public/QueryBuilder/types';\nimport { html } from 'lit-html';\n\nexport class InternalQueryBuilderControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n disableZoom: { type: Boolean, attribute: 'disable-zoom' },\n disableOr: { type: Boolean, attribute: 'disable-or' },\n operators: { type: Array },\n };\n }\n\n disableZoom = false;\n\n disableOr = false;\n\n operators: Operator[] = Object.values(Operator);\n\n renderControl(): TemplateResult {\n const { label, helperText, _errorMessage: error } = this;\n const showError = error && !this.disabled && !this.readonly;\n\n return html`\n <section class=\"grid gap-s leading-xs\">\n <div ?hidden=${!label && !helperText}>\n ${label ? html`<p class=\"text-l font-medium\">${label}</p>` : ''}\n ${helperText ? html`<p class=\"text-s text-secondary\">${helperText}</p>` : ''}\n </div>\n\n <div\n class=\"bg-contrast-5 rounded\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\"\n >\n <foxy-query-builder\n infer=\"query-builder\"\n style=\"--lumo-border-radius: var(--lumo-border-radius-s); --lumo-border-radius-l: var(--lumo-border-radius-s)\"\n .operators=${this.operators}\n .value=${this._value}\n ?disable-zoom=${this.disableZoom}\n ?disable-or=${this.disableOr}\n @change=${(evt: CustomEvent) => {\n const queryBuilder = evt.currentTarget as QueryBuilder;\n this._value = queryBuilder.value ?? '';\n }}\n >\n </foxy-query-builder>\n </div>\n\n ${showError ? html`<p class=\"text-s text-error\">${error}</p>` : ''}\n </section>\n `;\n }\n}\n"]}