@foxy.io/elements 1.27.0-beta.4 → 1.27.0-beta.5

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

@@ -1,14 +1,17 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html, css } from 'lit-element';
 import { classMap } from "../../../utils/class-map.js";
 import { repeat } from 'lit-html/directives/repeat';
 import { spread } from '@open-wc/lit-helpers';
 import { live } from 'lit-html/directives/live';
-import { html } from 'lit-element';
 export class InternalEditableListControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
         this.inputParams = {};
         this.options = [];
+        this.units = [];
+        this.range = null;
+        this.__isErrorVisible = false;
         this.__newItem = '';
     }
     static get properties() {
@@ -16,10 +19,36 @@ export class InternalEditableListControl extends InternalEditableControl {
             ...super.properties,
             inputParams: { attribute: false },
             options: { type: Array },
+            units: { type: Array },
+            range: {},
+            __isErrorVisible: { attribute: false },
             __newItem: { attribute: false },
         };
     }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `div:has(> select){
+  position:relative;
+}
+
+div:has(> select)::after{
+  content:' ';
+  position:absolute;
+  top:50%;
+  margin-top:-2px;
+  right:10px;
+  width:0;
+  height:0;
+  border-left:5px solid transparent;
+  border-right:5px solid transparent;
+  border-top:5px solid currentColor;
+}
+      `,
+        ];
+    }
     render() {
+        var _a, _b;
         const deleteButtonClass = classMap({
             'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,
             'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,
@@ -36,14 +65,16 @@ export class InternalEditableListControl extends InternalEditableControl {
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
         const addItem = () => {
+            var _a;
             const newValue = [...this._value];
+            const unit = (_a = this.renderRoot.querySelector('select')) === null || _a === void 0 ? void 0 : _a.value;
             this.__newItem
                 .split('\n')
                 .map(code => code.trim())
                 .filter(code => code.length > 0)
                 .forEach(value => {
                 if (!newValue.some(item => item.value === value)) {
-                    newValue.push({ value });
+                    newValue.push({ value, unit });
                 }
             });
             this._value = newValue;
@@ -94,7 +125,7 @@ export class InternalEditableListControl extends InternalEditableControl {
             ? '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': true,
+            'transition-colors pl-s h-m flex items-center gap-xs': true,
             'focus-within-ring-2 focus-within-ring-primary-50': true,
             'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,
             'bg-contrast-5': this.disabled,
@@ -102,29 +133,128 @@ export class InternalEditableListControl extends InternalEditableControl {
             'hidden': this.readonly,
         })}
           >
-            <input
-              placeholder=${this.placeholder}
+            ${this.range
+            ? html `
+                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_from">
+                  </foxy-i18n>
+
+                  <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) => {
+                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) => {
+                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 : '';
+                const oldTo = (_c = this.__newItem.split('..')[1]) !== null && _c !== void 0 ? _c : '';
+                this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;
+                addItem();
+            }}
+                    @blur=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+
+                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_to"></foxy-i18n>
+
+                  <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) => {
+                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) => {
+                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 : '';
+                const oldFrom = (_c = this.__newItem.split('..')[0]) !== null && _c !== void 0 ? _c : '';
+                this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;
+                addItem();
+            }}
+                    @blur=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+                `
+            : html `
+                  <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) => {
+                this.__newItem = evt.currentTarget.value.trim();
+            }}
+                    @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=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+                `}
+
+            <div
               class=${classMap({
-            'w-full bg-transparent appearance-none h-m font-medium focus-outline-none': true,
+            'relative': true,
+            'hover-text-base focus-within-text-primary-contrast': !this.disabled,
             '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) => {
-            this.__newItem = evt.currentTarget.value.trim();
-        }}
-              @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();
-        }}
-            />
+              ?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 }) => {
+            return html `<option value=${value}>${label !== null && label !== void 0 ? label : value}</option>`;
+        })}
+              </select>
+            </div>
 
             <datalist id="list">
               ${this.options.map(({ label, value }) => {
@@ -134,14 +264,14 @@ export class InternalEditableListControl extends InternalEditableControl {
         })}
             </datalist>
 
-            <div class="transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}">
+            <div class="mr-xs ml-auto" ?hidden=${!this.__newItem}>
               <button
                 aria-label=${this.t('submit')}
                 class=${classMap({
-            'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,
-            'flex items-center justify-center rounded-full transition-colors': true,
+            '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,
-            'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,
+            'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,
             'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,
             'focus-ring-2': !isAddButtonDisabled,
         })}
@@ -160,9 +290,17 @@ export class InternalEditableListControl extends InternalEditableControl {
             'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
             'text-disabled': this.disabled,
         })}
+          ?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>
       </div>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\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';\nimport { html } from 'lit-element';\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      __newItem: { attribute: false },\n    };\n  }\n\n  inputParams: Record<string, unknown> = {};\n\n  options: Option[] = [];\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const deleteButtonClass = classMap({\n      'w-xs h-xs mr-xs rounded-full 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    });\n\n    const itemClass = classMap({\n      'transition-colors h-m ml-s flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !this.disabled && !this.readonly,\n    });\n\n    const isAddButtonDisabled = this.disabled || !this.__newItem;\n\n    const addItem = () => {\n      const newValue = [...this._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 });\n          }\n        });\n\n      this._value = newValue;\n      this.__newItem = '';\n    };\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'border border-contrast-10 rounded transition-colors': true,\n            'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n          })}\n        >\n          <ol class=\"transition-colors divide-y divide-contrast-10 font-medium\">\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=${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': true,\n              'focus-within-ring-2 focus-within-ring-primary-50': true,\n              'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,\n              'bg-contrast-5': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.placeholder}\n              class=${classMap({\n                'w-full 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)}\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            />\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=\"transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}\">\n              <button\n                aria-label=${this.t('submit')}\n                class=${classMap({\n                  'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none':\n                    true,\n                  'flex items-center justify-center rounded-full transition-colors': true,\n                  'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n                  'bg-success-10 text-success 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            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.helperText}\n        </div>\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"]}
+{"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      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  units: Unit[] = [];\n\n  range: null | 'optional' = null;\n\n  private __isErrorVisible = false;\n\n  private __newItem = '';\n\n  render(): TemplateResult {\n    const deleteButtonClass = classMap({\n      'w-xs h-xs mr-xs rounded-full 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    });\n\n    const itemClass = classMap({\n      'transition-colors h-m ml-s flex items-center': true,\n      'text-secondary': this.readonly,\n      'text-disabled': this.disabled,\n      'group-hover-divide-contrast-20': !this.disabled && !this.readonly,\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=\"group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=${classMap({\n            'border border-contrast-10 rounded transition-colors': true,\n            'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n          })}\n        >\n          <ol class=\"transition-colors divide-y divide-contrast-10 font-medium\">\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=${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': true,\n              'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,\n              'bg-contrast-5': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\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        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\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/InternalEditableListControl/types.d.ts

@@ -2,6 +2,11 @@ import type { TemplateResult } from 'lit-html';
 export declare type Item = {
     label?: string | TemplateResult;
     value: string;
+    unit?: string;
+};
+export declare type Unit = {
+    label?: string;
+    value: string;
 };
 export declare type Option = {
     label?: string;

package/dist/elements/internal/InternalEditableListControl/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nexport type Item = { label?: string | TemplateResult; value: string };\nexport type Option = { label?: string; value: string };\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nexport type Item = { label?: string | TemplateResult; value: string; unit?: string };\nexport type Unit = { label?: string; value: string };\nexport type Option = { label?: string; value: string };\n"]}

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

@@ -13,6 +13,7 @@ export declare class InternalFrequencyControl extends InternalEditableControl {
         value: string;
         label: string;
     }[];
+    max: number | null;
     private __i18n;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;

package/dist/elements/internal/InternalFrequencyControl/InternalFrequencyControl.js

@@ -1,5 +1,6 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { css, html } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
 /**
  * Internal control displaying a custom field for frequency input.
  *
@@ -15,6 +16,7 @@ export class InternalFrequencyControl extends InternalEditableControl {
             { value: 'm', label: 'month' },
             { value: 'y', label: 'year' },
         ];
+        this.max = 999;
         this.__i18n = {
             formatValue: inputValues => inputValues.join(''),
             parseValue: value => {
@@ -30,6 +32,7 @@ export class InternalFrequencyControl extends InternalEditableControl {
         return {
             ...super.properties,
             options: { attribute: false },
+            max: { type: Number },
         };
     }
     static get styles() {
@@ -94,7 +97,7 @@ vaadin-combo-box::part(text-field){
         }}
       >
         <vaadin-integer-field
-          max="999"
+          max=${ifDefined(this.max || undefined)}
           min="1"
           prevent-invalid-input
           has-controls

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

@@ -1 +1 @@
-{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html } from 'lit-element';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n      `,\n    ];\n  }\n\n  options = [\n    { value: 'd', label: 'day' },\n    { value: 'w', label: 'week' },\n    { value: 'm', label: 'month' },\n    { value: 'y', label: 'year' },\n  ];\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n      const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n      const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n      return isNaN(count) ? ['0', ''] : [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    const value = (this._value ?? '') as string;\n    const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n    const items = this.options.map(({ value, label }) => ({\n      label: this.t(label, { count }),\n      value,\n    }));\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=\"999\"\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${items}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.querySelector('vaadin-custom-field');\n    if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n  }\n}\n"]}
+{"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\n/**\n * Internal control displaying a custom field for frequency input.\n *\n * @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { attribute: false },\n      max: { type: Number },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          display: block;\n        }\n\n        vaadin-custom-field {\n          width: 100%;\n          font-size: 0;\n          line-height: 0;\n          padding-top: 0 !important;\n        }\n\n        vaadin-custom-field::part(label) {\n          padding-bottom: var(--lumo-space-s);\n        }\n\n        vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n          padding-top: var(--lumo-space-xs);\n        }\n\n        vaadin-integer-field,\n        vaadin-combo-box {\n          width: calc(50% - (var(--lumo-space-s) / 2));\n        }\n\n        vaadin-integer-field {\n          margin-right: var(--lumo-space-s);\n          padding: 0;\n        }\n\n        vaadin-combo-box::part(text-field) {\n          padding: 0;\n        }\n      `,\n    ];\n  }\n\n  options = [\n    { value: 'd', label: 'day' },\n    { value: 'w', label: 'week' },\n    { value: 'm', label: 'month' },\n    { value: 'y', label: 'year' },\n  ];\n\n  max: number | null = 999;\n\n  private __i18n: CustomFieldI18n = {\n    formatValue: inputValues => inputValues.join(''),\n    parseValue: value => {\n      const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n      const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n      const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n      return isNaN(count) ? ['0', ''] : [count.toString(), units];\n    },\n  };\n\n  renderControl(): TemplateResult {\n    const value = (this._value ?? '') as string;\n    const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n    const items = this.options.map(({ value, label }) => ({\n      label: this.t(label, { count }),\n      value,\n    }));\n\n    return html`\n      <vaadin-custom-field\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .errorMessage=${this._errorMessage ?? ''}\n        .helperText=${this.helperText}\n        .label=${this.label}\n        .value=${value}\n        .i18n=${this.__i18n}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CustomFieldElement;\n          this._value = field.value as string;\n        }}\n      >\n        <vaadin-integer-field\n          max=${ifDefined(this.max || undefined)}\n          min=\"1\"\n          prevent-invalid-input\n          has-controls\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-integer-field>\n\n        <vaadin-combo-box\n          item-value-path=\"value\"\n          item-label-path=\"label\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?invalid=${!this._checkValidity()}\n          .items=${items}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        >\n        </vaadin-combo-box>\n      </vaadin-custom-field>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    const field = this.renderRoot.querySelector('vaadin-custom-field');\n    if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n  }\n}\n"]}

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

@@ -8,6 +8,10 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalPasswordControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    generatorOptions: null | {
+        length?: number;
+        charset?: string;
+    };
     /** If true, renders the password generator button. */
     showGenerator: boolean;
     renderControl(): TemplateResult;

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.js

@@ -12,12 +12,14 @@ import { classMap } from "../../../utils/class-map.js";
 export class InternalPasswordControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.generatorOptions = null;
         /** If true, renders the password generator button. */
         this.showGenerator = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            generatorOptions: { type: Object, attribute: 'generator-options' },
             showGenerator: { type: Boolean, attribute: 'show-generator' },
         };
     }
@@ -61,7 +63,8 @@ export class InternalPasswordControl extends InternalEditableControl {
         })}
         slot="suffix"
         @click=${() => {
-            this._value = generateRandomPassword();
+            var _a;
+            this._value = generateRandomPassword((_a = this.generatorOptions) !== null && _a !== void 0 ? _a : void 0);
             const field = this.renderRoot.querySelector('vaadin-password-field');
             // @ts-expect-error: this is a private method but it's ok since the version is fixed
             field === null || field === void 0 ? void 0 : field._setPasswordVisible(true);

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

@@ -1 +1 @@
-{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QAQE,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IA9DC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAKD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,EAAE,CAAC;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      showGenerator: { type: Boolean, attribute: 'show-generator' },\n    };\n  }\n\n  /** If true, renders the password generator button. */\n  showGenerator = false;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n        ${this.showGenerator ? this.__renderGenerator() : ''}\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n\n  private __renderGenerator(): TemplateResult {\n    return html`\n      <div\n        data-testid=\"generator\"\n        class=${classMap({\n          'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n          'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n          'text-contrast-20': this.disabled || this.readonly,\n        })}\n        slot=\"suffix\"\n        @click=${() => {\n          this._value = generateRandomPassword();\n          const field = this.renderRoot.querySelector('vaadin-password-field');\n          // @ts-expect-error: this is a private method but it's ok since the version is fixed\n          field?._setPasswordVisible(true);\n        }}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QASE,qBAAgB,GAAiD,IAAI,CAAC;QAEtE,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IAjEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;YAClE,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAOD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,OAAC,IAAI,CAAC,gBAAgB,mCAAI,KAAK,CAAC,CAAC,CAAC;YACtE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      generatorOptions: { type: Object, attribute: 'generator-options' },\n      showGenerator: { type: Boolean, attribute: 'show-generator' },\n    };\n  }\n\n  generatorOptions: null | { length?: number; charset?: string } = null;\n\n  /** If true, renders the password generator button. */\n  showGenerator = false;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n        ${this.showGenerator ? this.__renderGenerator() : ''}\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n\n  private __renderGenerator(): TemplateResult {\n    return html`\n      <div\n        data-testid=\"generator\"\n        class=${classMap({\n          'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n          'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n          'text-contrast-20': this.disabled || this.readonly,\n        })}\n        slot=\"suffix\"\n        @click=${() => {\n          this._value = generateRandomPassword(this.generatorOptions ?? void 0);\n          const field = this.renderRoot.querySelector('vaadin-password-field');\n          // @ts-expect-error: this is a private method but it's ok since the version is fixed\n          field?._setPasswordVisible(true);\n        }}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.d.ts

@@ -1 +1,4 @@
-export declare function generateRandomPassword(): string;
+export declare function generateRandomPassword(opts?: {
+    length?: number;
+    charset?: string;
+}): string;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js

@@ -1,7 +1,9 @@
-export function generateRandomPassword() {
-    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+export function generateRandomPassword(opts) {
+    var _a, _b;
+    const charset = (_a = opts === null || opts === void 0 ? void 0 : opts.charset) !== null && _a !== void 0 ? _a : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const length = (_b = opts === null || opts === void 0 ? void 0 : opts.length) !== null && _b !== void 0 ? _b : 18;
     let result = '';
-    for (let i = 0; i < 18; i++) {
+    for (let i = 0; i < length; i++) {
         if (i > 0 && i % 6 === 0)
             result += '-';
         result += charset[Math.floor(Math.random() * charset.length)];

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,sBAAsB;IACpC,MAAM,OAAO,GAAG,gEAAgE,CAAC;IACjF,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;QAC3B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,GAAG,CAAC;QACxC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function generateRandomPassword(): string {\n  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  let result = '';\n\n  for (let i = 0; i < 18; i++) {\n    if (i > 0 && i % 6 === 0) result += '-';\n    result += charset[Math.floor(Math.random() * charset.length)];\n  }\n\n  return result;\n}\n"]}
+{"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,sBAAsB,CAAC,IAA4C;;IACjF,MAAM,OAAO,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,gEAAgE,CAAC;IAClG,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,EAAE,CAAC;IAClC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,GAAG,CAAC;QACxC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function generateRandomPassword(opts?: { length?: number; charset?: string }): string {\n  const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  const length = opts?.length ?? 18;\n  let result = '';\n\n  for (let i = 0; i < length; i++) {\n    if (i > 0 && i % 6 === 0) result += '-';\n    result += charset[Math.floor(Math.random() * charset.length)];\n  }\n\n  return result;\n}\n"]}

package/dist/elements/public/CollectionPage/CollectionPage.js

@@ -60,6 +60,7 @@ export class CollectionPage extends Base {
             ?disabled=\${ctx.disabled}
             ?readonly=\${ctx.readonly}
             ?hidden=\${ctx.hidden}
+            .simplifyNsLoading=\${ctx.simplifyNsLoading}
             .templates=\${ctx.templates}
             ...=\${ctx.spread(ctx.props)}
           >
@@ -100,6 +101,7 @@ export class CollectionPage extends Base {
             }));
         }
         return html `${repeat(items, item => item.key, (item, index) => { var _a, _b, _c, _d, _e; return (_a = this.__renderItem) === null || _a === void 0 ? void 0 : _a.call(this, {
+            simplifyNsLoading: this.simplifyNsLoading,
             disabledControls: this.disabledControls,
             readonlyControls: this.readonlyControls,
             hiddenControls: this.hiddenControls,

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionPage.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPage/CollectionPage.ts"],"names":[],"mappings":"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","sourcesContent":["import { ExtractItem, ItemRenderer, Page } from './types';\nimport { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\n\nconst Base = ConfigurableMixin(TranslatableMixin(NucleonElement));\n\n/**\n * Renders an element for each resource in a collection page.\n *\n * @element foxy-collection-page\n * @since 1.1.0\n */\nexport class CollectionPage<TPage extends Page> extends Base<TPage> {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      props: { type: Object },\n      item: { type: String },\n    };\n  }\n\n  /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */\n  props: Record<string, unknown> = {};\n\n  private __pageFetchEventHandler = (evt: unknown) => this.__handlePageFetchEvent(evt);\n\n  private __renderItem!: ItemRenderer<ExtractItem<TPage>>;\n\n  private __item!: null | string | ItemRenderer<ExtractItem<TPage>>;\n\n  constructor() {\n    super();\n    this.item = 'foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection items.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `parent` – same as `foxy-collection-page[href]`;\n   * - `group` - same as `foxy-collection-page[group]`;\n   * - `href` – collection page item's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-page[lang]`;\n   *\n   * Render function will receive `ItemRendererContext` in the first argument.\n   */\n  get item(): null | string | ItemRenderer<ExtractItem<TPage>> {\n    return this.__item;\n  }\n\n  set item(value: null | string | ItemRenderer<ExtractItem<TPage>>) {\n    const tagOrRenderer = value ?? 'foxy-null';\n\n    if (typeof tagOrRenderer === 'string') {\n      this.__renderItem = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${tagOrRenderer}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            data-testclass=\"items\"\n            related=\\${JSON.stringify(ctx.related)}\n            parent=\\${ctx.parent}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"\\${ctx.ns} $\\{customElements.get('${tagOrRenderer}')?.defaultNS ?? ''}\"\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .templates=\\${ctx.templates}\n            ...=\\${ctx.spread(ctx.props)}\n          >\n          </${tagOrRenderer}>\\``\n      ) as ItemRenderer;\n    } else {\n      this.__renderItem = tagOrRenderer;\n    }\n\n    this.__item = value;\n    this.requestUpdate();\n  }\n\n  /** @readonly */\n  createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__pageFetchEventHandler);\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    type RepeatItem = { key: string; href: string; data: ExtractItem<TPage> | null };\n    let items: RepeatItem[] = [];\n\n    if (this.in('busy')) {\n      items = [{ key: 'stalled', href: 'foxy://collection-page/stall', data: null }];\n    } else if (this.in('fail')) {\n      items = [{ key: 'failed', href: 'foxy://collection-page/fail', data: null }];\n    } else if (this.in({ idle: 'template' }) || this.__items.length === 0) {\n      items = [{ key: 'empty', href: '', data: null }];\n    } else {\n      items = this.__items.map(item => ({\n        key: item._links.self.href,\n        href: item._links.self.href,\n        data: item,\n      }));\n    }\n\n    return html`${repeat(\n      items,\n      item => item.key,\n      (item, index) =>\n        this.__renderItem?.({\n          disabledControls: this.disabledControls,\n          readonlyControls: this.readonlyControls,\n          hiddenControls: this.hiddenControls,\n          templates: this.templates,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          previous: items[index - 1]?.data ?? null,\n          related: this.related,\n          hidden: this.hidden,\n          parent: this.href,\n          spread: spread,\n          props: this.props,\n          group: this.group,\n          lang: this.lang,\n          data: item.data,\n          href: item.href,\n          next: items[index + 1]?.data ?? null,\n          ns: this.ns,\n          html,\n        })\n    )}`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__pageFetchEventHandler);\n  }\n\n  private get __items(): ExtractItem<TPage>[] {\n    return Array.from(Object.values(this.form?._embedded ?? {}) as any[]).reduce(\n      (p, c) => [...p, ...c],\n      [] as ExtractItem<TPage>[]\n    );\n  }\n\n  private __handlePageFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-page/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-page/fail') return this.__failRequest(event);\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(new Response(null, { status: 500 })));\n  }\n}\n\nexport * from './types';\n"]}
+{"version":3,"file":"CollectionPage.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPage/CollectionPage.ts"],"names":[],"mappings":"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","sourcesContent":["import { ExtractItem, ItemRenderer, Page } from './types';\nimport { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\n\nconst Base = ConfigurableMixin(TranslatableMixin(NucleonElement));\n\n/**\n * Renders an element for each resource in a collection page.\n *\n * @element foxy-collection-page\n * @since 1.1.0\n */\nexport class CollectionPage<TPage extends Page> extends Base<TPage> {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      props: { type: Object },\n      item: { type: String },\n    };\n  }\n\n  /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */\n  props: Record<string, unknown> = {};\n\n  private __pageFetchEventHandler = (evt: unknown) => this.__handlePageFetchEvent(evt);\n\n  private __renderItem!: ItemRenderer<ExtractItem<TPage>>;\n\n  private __item!: null | string | ItemRenderer<ExtractItem<TPage>>;\n\n  constructor() {\n    super();\n    this.item = 'foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection items.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `parent` – same as `foxy-collection-page[href]`;\n   * - `group` - same as `foxy-collection-page[group]`;\n   * - `href` – collection page item's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-page[lang]`;\n   *\n   * Render function will receive `ItemRendererContext` in the first argument.\n   */\n  get item(): null | string | ItemRenderer<ExtractItem<TPage>> {\n    return this.__item;\n  }\n\n  set item(value: null | string | ItemRenderer<ExtractItem<TPage>>) {\n    const tagOrRenderer = value ?? 'foxy-null';\n\n    if (typeof tagOrRenderer === 'string') {\n      this.__renderItem = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${tagOrRenderer}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            data-testclass=\"items\"\n            related=\\${JSON.stringify(ctx.related)}\n            parent=\\${ctx.parent}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"\\${ctx.ns} $\\{customElements.get('${tagOrRenderer}')?.defaultNS ?? ''}\"\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .simplifyNsLoading=\\${ctx.simplifyNsLoading}\n            .templates=\\${ctx.templates}\n            ...=\\${ctx.spread(ctx.props)}\n          >\n          </${tagOrRenderer}>\\``\n      ) as ItemRenderer;\n    } else {\n      this.__renderItem = tagOrRenderer;\n    }\n\n    this.__item = value;\n    this.requestUpdate();\n  }\n\n  /** @readonly */\n  createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__pageFetchEventHandler);\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    type RepeatItem = { key: string; href: string; data: ExtractItem<TPage> | null };\n    let items: RepeatItem[] = [];\n\n    if (this.in('busy')) {\n      items = [{ key: 'stalled', href: 'foxy://collection-page/stall', data: null }];\n    } else if (this.in('fail')) {\n      items = [{ key: 'failed', href: 'foxy://collection-page/fail', data: null }];\n    } else if (this.in({ idle: 'template' }) || this.__items.length === 0) {\n      items = [{ key: 'empty', href: '', data: null }];\n    } else {\n      items = this.__items.map(item => ({\n        key: item._links.self.href,\n        href: item._links.self.href,\n        data: item,\n      }));\n    }\n\n    return html`${repeat(\n      items,\n      item => item.key,\n      (item, index) =>\n        this.__renderItem?.({\n          simplifyNsLoading: this.simplifyNsLoading,\n          disabledControls: this.disabledControls,\n          readonlyControls: this.readonlyControls,\n          hiddenControls: this.hiddenControls,\n          templates: this.templates,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          previous: items[index - 1]?.data ?? null,\n          related: this.related,\n          hidden: this.hidden,\n          parent: this.href,\n          spread: spread,\n          props: this.props,\n          group: this.group,\n          lang: this.lang,\n          data: item.data,\n          href: item.href,\n          next: items[index + 1]?.data ?? null,\n          ns: this.ns,\n          html,\n        })\n    )}`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__pageFetchEventHandler);\n  }\n\n  private get __items(): ExtractItem<TPage>[] {\n    return Array.from(Object.values(this.form?._embedded ?? {}) as any[]).reduce(\n      (p, c) => [...p, ...c],\n      [] as ExtractItem<TPage>[]\n    );\n  }\n\n  private __handlePageFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-page/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-page/fail') return this.__failRequest(event);\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(new Response(null, { status: 500 })));\n  }\n}\n\nexport * from './types';\n"]}

package/dist/elements/public/CollectionPage/types.d.ts

@@ -10,6 +10,7 @@ export declare type ExtractItem<T> = T extends {
     _embedded: Record<string, (infer U)[]>;
 } ? U : never;
 export declare type ItemRendererContext<TItem extends HALJSONResource = HALJSONResource> = {
+    simplifyNsLoading: boolean;
     readonlyControls: BooleanSelector;
     disabledControls: BooleanSelector;
     hiddenControls: BooleanSelector;