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

package/dist/elements/internal/InternalArrayMapControl/InternalArrayMapControl.js

@@ -0,0 +1,277 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { css, html, svg } from 'lit-element';
+import { classMap } from "../../../utils/class-map.js";
+import { repeat } from 'lit-html/directives/repeat';
+class InternalArrayMapControl extends ResponsiveMixin(InternalEditableControl) {
+    static get styles() {
+        return [
+            super.styles,
+            css `.gap-1px{
+  gap:1px;
+}
+
+.grid-vertical{
+  grid-template:auto / var(--lumo-size-m) 1fr;
+}
+
+:host([sm]) .sm-grid-horizontal{
+  grid-template:auto / var(--lumo-size-m) 1fr var(--lumo-size-m) 1fr;
+}
+      `,
+        ];
+    }
+    renderControl() {
+        const divider = html `
+      <div class="flex items-center h-s">
+        <div class="w-m text-center leading-none uppercase font-medium text-xs text-contrast-20">
+          <foxy-i18n infer="" key="or"></foxy-i18n>
+        </div>
+
+        <div class="flex-1 border-t border-contrast-10"></div>
+        <div class="w-m ml-s flex-shrink-0"></div>
+      </div>
+    `;
+        return html `
+      <div class="mb-s" ?hidden=${!this.label && !this.helperText}>
+        <p class="font-medium text-body text-l" ?hidden=${!this.label}>${this.label}</p>
+        <p class="text-s text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+      </div>
+
+      <div
+        class="rounded bg-contrast-5"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        ${repeat([...Object.entries(this._value || {}), null], (rule, ruleIndex) => String(ruleIndex), (rule, ruleIndex) => {
+            if (rule === null) {
+                return [
+                    ruleIndex > 0 ? divider : '',
+                    this.__renderRule({
+                        onChange: ({ key, items }) => {
+                            var _a;
+                            this._value = {
+                                ...this._value,
+                                [key]: [...((_a = this._value[key]) !== null && _a !== void 0 ? _a : []), ...items],
+                            };
+                        },
+                    }),
+                ];
+            }
+            return [
+                ruleIndex > 0 ? divider : '',
+                this.__renderRule({
+                    rule: { key: rule[0], items: rule[1] },
+                    onChange: updatedRule => {
+                        var _a, _b;
+                        const newValue = {};
+                        const oldKeys = Object.keys(this._value);
+                        for (let i = 0; i < oldKeys.length; i++) {
+                            const oldKey = oldKeys[i];
+                            if (oldKey === rule[0]) {
+                                if (updatedRule.key === oldKey) {
+                                    newValue[oldKey] = updatedRule.items;
+                                }
+                                else {
+                                    const existingItems = (_a = this._value[updatedRule.key]) !== null && _a !== void 0 ? _a : [];
+                                    if (i > oldKeys.indexOf(updatedRule.key)) {
+                                        newValue[updatedRule.key] = [...existingItems, ...updatedRule.items];
+                                    }
+                                    else {
+                                        newValue[updatedRule.key] = [...updatedRule.items, ...existingItems];
+                                        oldKeys.splice(oldKeys.indexOf(updatedRule.key), 1);
+                                    }
+                                }
+                            }
+                            else {
+                                newValue[oldKey] = (_b = this._value[oldKey]) !== null && _b !== void 0 ? _b : [];
+                            }
+                        }
+                        this._value = newValue;
+                    },
+                    onDelete: () => {
+                        const newValue = { ...this._value };
+                        delete newValue[rule[0]];
+                        this._value = newValue;
+                    },
+                }),
+            ];
+        })}
+      </div>
+
+      <p
+        class="text-s text-error mt-s"
+        ?hidden=${!this._errorMessage || this.disabled || this.readonly}
+      >
+        ${this._errorMessage}
+      </p>
+    `;
+    }
+    get _value() {
+        var _a;
+        return (_a = super._value) !== null && _a !== void 0 ? _a : {};
+    }
+    set _value(value) {
+        super._value = value;
+    }
+    __renderRule({ rule, onDelete, onChange }) {
+        var _a, _b;
+        const items = (_a = rule === null || rule === void 0 ? void 0 : rule.items) !== null && _a !== void 0 ? _a : [];
+        return html `
+      <div class="flex items-center space-x-s" aria-label=${this.t('rule')}>
+        <div class="flex-1 bg-base rounded-s overflow-hidden border border-contrast-10">
+          <div class="bg-contrast-10">
+            <div class="grid gap-1px grid-vertical sm-grid-horizontal">
+              <div class="bg-base">
+                <div
+                  aria-hidden="true"
+                  class=${classMap({
+            'text-tertiary': !this.readonly && !this.disabled,
+            'text-disabled': this.readonly || this.disabled,
+            'w-m h-m': true,
+        })}
+                >
+                  ${svg `<svg class="w-full h-full" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 8C12.48 8 8 12.48 8 18C8 23.52 12.48 28 18 28C23.52 28 28 23.52 28 18C28 12.48 23.52 8 18 8ZM18 26C13.59 26 10 22.41 10 18C10 13.59 13.59 10 18 10C22.41 10 26 13.59 26 18C26 22.41 22.41 26 18 26Z" class="fill-current"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.49 17.38C19.92 16.16 19.66 14.74 18.68 13.76C17.57 12.65 15.89 12.46 14.58 13.17L16.93 15.52L15.52 16.93L13.17 14.58C12.46 15.9 12.65 17.57 13.76 18.68C14.74 19.66 16.16 19.92 17.38 19.49L20.79 22.9C20.99 23.1 21.3 23.1 21.5 22.9L22.9 21.5C23.1 21.3 23.1 20.99 22.9 20.79L19.49 17.38Z" class="fill-current"/></svg>`}
+                </div>
+              </div>
+              <div class="bg-base">
+                ${this.__renderInput({
+            value: (_b = rule === null || rule === void 0 ? void 0 : rule.key) !== null && _b !== void 0 ? _b : '',
+            label: this.t('option_name'),
+            onChange: newPath => {
+                if (newPath === undefined) {
+                    onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+                }
+                else {
+                    onChange({ key: newPath, items });
+                }
+            },
+        })}
+              </div>
+              <div class="bg-base">
+                <div
+                  class=${classMap({
+            'flex items-center justify-center w-m h-m transition-colors': true,
+            'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
+            'cursor-default text-tertiary': !(this.disabled || this.readonly),
+            'text-disabled cursor-default': this.disabled || this.readonly,
+        })}
+                >
+                  <div aria-hidden="true">
+                    ${svg `<svg class="w-full h-full" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 9.8C11.0088 9.8 9.8 11.0088 9.8 12.5V23.5C9.8 24.9912 11.0088 26.2 12.5 26.2H14C14.6627 26.2 15.2 25.6627 15.2 25C15.2 24.3373 14.6627 23.8 14 23.8H13.5C12.782 23.8 12.2 23.218 12.2 22.5V13.5C12.2 12.782 12.782 12.2 13.5 12.2H14C14.6627 12.2 15.2 11.6627 15.2 11C15.2 10.3373 14.6627 9.8 14 9.8H12.5Z" class="fill-current"/><path d="M22 9.8C21.3373 9.8 20.8 10.3373 20.8 11C20.8 11.6627 21.3373 12.2 22 12.2H22.5C23.218 12.2 23.8 12.782 23.8 13.5V22.5C23.8 23.218 23.218 23.8 22.5 23.8H22C21.3373 23.8 20.8 24.3373 20.8 25C20.8 25.6627 21.3373 26.2 22 26.2H23.5C24.9912 26.2 26.2 24.9912 26.2 23.5V12.5C26.2 11.0088 24.9912 9.8 23.5 9.8H22Z" class="fill-current"/></svg>`}
+                  </div>
+                </div>
+              </div>
+              <div class="bg-base">
+                <div class="bg-contrast-10 grid grid-cols-1 gap-1px">
+                  ${repeat(this.readonly ? items : [...items, null], (value, index) => index, (value, index) => html `
+                      <div class="bg-base">
+                        ${this.__renderInput({
+            value: value !== null && value !== void 0 ? value : '',
+            label: value ? String(index + 1) : this.t('add_value'),
+            onChange: newValue => {
+                const newItems = [...items];
+                if (newValue) {
+                    if (value === null) {
+                        newItems.push(newValue);
+                    }
+                    else {
+                        newItems[index] = newValue;
+                    }
+                }
+                else {
+                    newItems.splice(index, 1);
+                }
+                if (rule)
+                    onChange({ key: rule.key, items: newItems });
+            },
+        })}
+                      </div>
+                    `)}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="flex -mr-s self-start flex-col sm-flex-row flex-shrink-0 items-center border-t border-b border-transparent divide-y divide-transparent"
+          ?hidden=${this.readonly || Object.keys(this._value).length === 0}
+        >
+          <button
+            aria-label=${this.t('delete')}
+            class=${classMap({
+            'box-content flex items-center justify-center': true,
+            'w-m h-m rounded-full transition-colors': true,
+            'text-secondary hover-bg-contrast-5 hover-text-error': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+            'focus-outline-none focus-ring-2 ring-primary-50': true,
+            'opacity-0 pointer-events-none': !rule,
+        })}
+            ?disabled=${this.disabled || this.readonly || !rule}
+            @click=${() => onDelete === null || onDelete === void 0 ? void 0 : onDelete()}
+          >
+            ${svg `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-l" style="width: 1.25em; height: 1.25em"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    __renderInput(params) {
+        return html `
+      <label class="relative flex items-center cursor-text group text-tertiary">
+        <div class="relative flex-1 min-w-0 overflow-hidden">
+          <input
+            placeholder=${params.label}
+            class=${classMap({
+            'bg-base relative flex h-m px-s font-medium w-full': true,
+            'text-body': !this.disabled && !this.readonly,
+            'text-disabled': this.disabled,
+            'text-secondary': this.readonly,
+            'flex max-w-full whitespace-nowrap': true,
+            'focus-outline-none': true,
+        })}
+            .value=${params.value}
+            ?disabled=${this.disabled || this.readonly}
+            @keydown=${(evt) => {
+            const input = evt.currentTarget;
+            if (evt.key === 'Backspace' && !input.value)
+                params.onChange();
+        }}
+            @change=${(evt) => {
+            const input = evt.currentTarget;
+            if (!input.value)
+                params.onChange();
+        }}
+            @input=${(evt) => {
+            const input = evt.currentTarget;
+            params.onChange(input.value);
+        }}
+          />
+        </div>
+
+        <span
+          class=${classMap({
+            'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,
+            'inline-block': !!params.value,
+            'sr-only': !params.value,
+            'text-body': !this.disabled && !this.readonly,
+            'text-disabled': this.disabled,
+            'text-secondary': this.readonly,
+        })}
+        >
+          ${this.t(params.label)}
+        </span>
+
+        ${this.disabled || this.readonly
+            ? ''
+            : html `
+              <div
+                class="absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none"
+              ></div>
+            `}
+      </label>
+    `;
+    }
+}
+export { InternalArrayMapControl };
+//# sourceMappingURL=InternalArrayMapControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalArrayMapControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalArrayMapControl/InternalArrayMapControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { css, html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\n\ntype InputParams = { label: string; value: string; onChange: (newValue?: string) => void };\ntype RuleParams = { rule?: Rule; onChange: (newRule: Rule) => void; onDelete?: () => void };\ntype Rule = { key: string; items: string[] };\n\nclass InternalArrayMapControl extends ResponsiveMixin(InternalEditableControl) {\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .gap-1px {\n          gap: 1px;\n        }\n\n        .grid-vertical {\n          grid-template: auto / var(--lumo-size-m) 1fr;\n        }\n\n        :host([sm]) .sm-grid-horizontal {\n          grid-template: auto / var(--lumo-size-m) 1fr var(--lumo-size-m) 1fr;\n        }\n      `,\n    ];\n  }\n\n  renderControl(): TemplateResult {\n    const divider = html`\n      <div class=\"flex items-center h-s\">\n        <div class=\"w-m text-center leading-none uppercase font-medium text-xs text-contrast-20\">\n          <foxy-i18n infer=\"\" key=\"or\"></foxy-i18n>\n        </div>\n\n        <div class=\"flex-1 border-t border-contrast-10\"></div>\n        <div class=\"w-m ml-s flex-shrink-0\"></div>\n      </div>\n    `;\n\n    return html`\n      <div class=\"mb-s\" ?hidden=${!this.label && !this.helperText}>\n        <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n        <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n      </div>\n\n      <div\n        class=\"rounded bg-contrast-5\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        ${repeat(\n          [...Object.entries(this._value || {}), null],\n          (rule, ruleIndex) => String(ruleIndex),\n          (rule, ruleIndex) => {\n            if (rule === null) {\n              return [\n                ruleIndex > 0 ? divider : '',\n                this.__renderRule({\n                  onChange: ({ key, items }) => {\n                    this._value = {\n                      ...this._value,\n                      [key]: [...(this._value[key] ?? []), ...items],\n                    };\n                  },\n                }),\n              ];\n            }\n\n            return [\n              ruleIndex > 0 ? divider : '',\n              this.__renderRule({\n                rule: { key: rule[0], items: rule[1] },\n                onChange: updatedRule => {\n                  const newValue: Record<string, string[]> = {};\n                  const oldKeys = Object.keys(this._value);\n\n                  for (let i = 0; i < oldKeys.length; i++) {\n                    const oldKey = oldKeys[i];\n                    if (oldKey === rule[0]) {\n                      if (updatedRule.key === oldKey) {\n                        newValue[oldKey] = updatedRule.items;\n                      } else {\n                        const existingItems = this._value[updatedRule.key] ?? [];\n                        if (i > oldKeys.indexOf(updatedRule.key)) {\n                          newValue[updatedRule.key] = [...existingItems, ...updatedRule.items];\n                        } else {\n                          newValue[updatedRule.key] = [...updatedRule.items, ...existingItems];\n                          oldKeys.splice(oldKeys.indexOf(updatedRule.key), 1);\n                        }\n                      }\n                    } else {\n                      newValue[oldKey] = this._value[oldKey] ?? [];\n                    }\n                  }\n\n                  this._value = newValue;\n                },\n                onDelete: () => {\n                  const newValue = { ...this._value };\n                  delete newValue[rule[0]];\n                  this._value = newValue;\n                },\n              }),\n            ];\n          }\n        )}\n      </div>\n\n      <p\n        class=\"text-s text-error mt-s\"\n        ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n      >\n        ${this._errorMessage}\n      </p>\n    `;\n  }\n\n  protected get _value(): Record<string, string[]> {\n    return (super._value as Record<string, string[]>) ?? {};\n  }\n\n  protected set _value(value: Record<string, string[]>) {\n    super._value = value;\n  }\n\n  private __renderRule({ rule, onDelete, onChange }: RuleParams) {\n    const items = rule?.items ?? [];\n\n    return html`\n      <div class=\"flex items-center space-x-s\" aria-label=${this.t('rule')}>\n        <div class=\"flex-1 bg-base rounded-s overflow-hidden border border-contrast-10\">\n          <div class=\"bg-contrast-10\">\n            <div class=\"grid gap-1px grid-vertical sm-grid-horizontal\">\n              <div class=\"bg-base\">\n                <div\n                  aria-hidden=\"true\"\n                  class=${classMap({\n                    'text-tertiary': !this.readonly && !this.disabled,\n                    'text-disabled': this.readonly || this.disabled,\n                    'w-m h-m': true,\n                  })}\n                >\n                  ${svg`<svg class=\"w-full h-full\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 8C12.48 8 8 12.48 8 18C8 23.52 12.48 28 18 28C23.52 28 28 23.52 28 18C28 12.48 23.52 8 18 8ZM18 26C13.59 26 10 22.41 10 18C10 13.59 13.59 10 18 10C22.41 10 26 13.59 26 18C26 22.41 22.41 26 18 26Z\" class=\"fill-current\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.49 17.38C19.92 16.16 19.66 14.74 18.68 13.76C17.57 12.65 15.89 12.46 14.58 13.17L16.93 15.52L15.52 16.93L13.17 14.58C12.46 15.9 12.65 17.57 13.76 18.68C14.74 19.66 16.16 19.92 17.38 19.49L20.79 22.9C20.99 23.1 21.3 23.1 21.5 22.9L22.9 21.5C23.1 21.3 23.1 20.99 22.9 20.79L19.49 17.38Z\" class=\"fill-current\"/></svg>`}\n                </div>\n              </div>\n              <div class=\"bg-base\">\n                ${this.__renderInput({\n                  value: rule?.key ?? '',\n                  label: this.t('option_name'),\n                  onChange: newPath => {\n                    if (newPath === undefined) {\n                      onDelete?.();\n                    } else {\n                      onChange({ key: newPath, items });\n                    }\n                  },\n                })}\n              </div>\n              <div class=\"bg-base\">\n                <div\n                  class=${classMap({\n                    'flex items-center justify-center w-m h-m transition-colors': true,\n                    'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n                    'cursor-default text-tertiary': !(this.disabled || this.readonly),\n                    'text-disabled cursor-default': this.disabled || this.readonly,\n                  })}\n                >\n                  <div aria-hidden=\"true\">\n                    ${svg`<svg class=\"w-full h-full\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.5 9.8C11.0088 9.8 9.8 11.0088 9.8 12.5V23.5C9.8 24.9912 11.0088 26.2 12.5 26.2H14C14.6627 26.2 15.2 25.6627 15.2 25C15.2 24.3373 14.6627 23.8 14 23.8H13.5C12.782 23.8 12.2 23.218 12.2 22.5V13.5C12.2 12.782 12.782 12.2 13.5 12.2H14C14.6627 12.2 15.2 11.6627 15.2 11C15.2 10.3373 14.6627 9.8 14 9.8H12.5Z\" class=\"fill-current\"/><path d=\"M22 9.8C21.3373 9.8 20.8 10.3373 20.8 11C20.8 11.6627 21.3373 12.2 22 12.2H22.5C23.218 12.2 23.8 12.782 23.8 13.5V22.5C23.8 23.218 23.218 23.8 22.5 23.8H22C21.3373 23.8 20.8 24.3373 20.8 25C20.8 25.6627 21.3373 26.2 22 26.2H23.5C24.9912 26.2 26.2 24.9912 26.2 23.5V12.5C26.2 11.0088 24.9912 9.8 23.5 9.8H22Z\" class=\"fill-current\"/></svg>`}\n                  </div>\n                </div>\n              </div>\n              <div class=\"bg-base\">\n                <div class=\"bg-contrast-10 grid grid-cols-1 gap-1px\">\n                  ${repeat(\n                    this.readonly ? items : [...items, null],\n                    (value, index) => index,\n                    (value, index) => html`\n                      <div class=\"bg-base\">\n                        ${this.__renderInput({\n                          value: value ?? '',\n                          label: value ? String(index + 1) : this.t('add_value'),\n                          onChange: newValue => {\n                            const newItems = [...items];\n\n                            if (newValue) {\n                              if (value === null) {\n                                newItems.push(newValue);\n                              } else {\n                                newItems[index] = newValue;\n                              }\n                            } else {\n                              newItems.splice(index, 1);\n                            }\n\n                            if (rule) onChange({ key: rule.key, items: newItems });\n                          },\n                        })}\n                      </div>\n                    `\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"flex -mr-s self-start flex-col sm-flex-row flex-shrink-0 items-center border-t border-b border-transparent divide-y divide-transparent\"\n          ?hidden=${this.readonly || Object.keys(this._value).length === 0}\n        >\n          <button\n            aria-label=${this.t('delete')}\n            class=${classMap({\n              'box-content flex items-center justify-center': true,\n              'w-m h-m rounded-full transition-colors': true,\n              'text-secondary hover-bg-contrast-5 hover-text-error': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n              'focus-outline-none focus-ring-2 ring-primary-50': true,\n              'opacity-0 pointer-events-none': !rule,\n            })}\n            ?disabled=${this.disabled || this.readonly || !rule}\n            @click=${() => onDelete?.()}\n          >\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"text-l\" style=\"width: 1.25em; height: 1.25em\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" /></svg>`}\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderInput(params: InputParams) {\n    return html`\n      <label class=\"relative flex items-center cursor-text group text-tertiary\">\n        <div class=\"relative flex-1 min-w-0 overflow-hidden\">\n          <input\n            placeholder=${params.label}\n            class=${classMap({\n              'bg-base relative flex h-m px-s font-medium w-full': true,\n              'text-body': !this.disabled && !this.readonly,\n              'text-disabled': this.disabled,\n              'text-secondary': this.readonly,\n              'flex max-w-full whitespace-nowrap': true, // ugh safari\n              'focus-outline-none': true,\n            })}\n            .value=${params.value}\n            ?disabled=${this.disabled || this.readonly}\n            @keydown=${(evt: KeyboardEvent) => {\n              const input = evt.currentTarget as HTMLInputElement;\n              if (evt.key === 'Backspace' && !input.value) params.onChange();\n            }}\n            @change=${(evt: Event) => {\n              const input = evt.currentTarget as HTMLInputElement;\n              if (!input.value) params.onChange();\n            }}\n            @input=${(evt: Event) => {\n              const input = evt.currentTarget as HTMLInputElement;\n              params.onChange(input.value);\n            }}\n          />\n        </div>\n\n        <span\n          class=${classMap({\n            'font-tnum text-xs font-medium border border-current mr-s px-xs rounded-s': true,\n            'inline-block': !!params.value,\n            'sr-only': !params.value,\n            'text-body': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n            'text-secondary': this.readonly,\n          })}\n        >\n          ${this.t(params.label)}\n        </span>\n\n        ${this.disabled || this.readonly\n          ? ''\n          : html`\n              <div\n                class=\"absolute inset-0 transition-colors bg-transparent group-hover-bg-contrast-5 pointer-events-none\"\n              ></div>\n            `}\n      </label>\n    `;\n  }\n}\n\nexport { InternalArrayMapControl };\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalArrayMapControl/index.ts"],"names":[],"mappings":"AAAA,oCAAiC;AAEjC,6CAA0C;AAE1C,OAAO,EAAE,uBAAuB,EAAE,qCAAkC;AAEpE,cAAc,CAAC,MAAM,CAAC,iCAAiC,EAAE,uBAAuB,CAAC,CAAC;AAElF,OAAO,EAAE,uBAAuB,EAAE,CAAC","sourcesContent":["import '../../public/I18n/index';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalArrayMapControl } from './InternalArrayMapControl';\n\ncustomElements.define('foxy-internal-array-map-control', InternalArrayMapControl);\n\nexport { InternalArrayMapControl };\n"]}

package/dist/elements/internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl.js

@@ -105,20 +105,17 @@ export class InternalAsyncResourceLinkListControl extends InternalEditableContro
         const isStatusVisible = this.__isFetching || !this.__allLinks;
         return html `
       <div class="group">
-        <div
-          class=${classMap({
-            'flex justify-between transition-colors mb-xs font-medium text-s': true,
-            'text-secondary': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
-        })}
-        >
-          <span>${this.label}</span>
-          <foxy-i18n
-            class="transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}"
-            infer=""
-            key=${this.__isFetching ? 'status_saving' : 'status_loading'}
-          >
-          </foxy-i18n>
+        <div class="mb-s" ?hidden=${!this.label && !this.helperText}>
+          <div class="flex justify-between font-medium text-l" ?hidden=${!this.label}>
+            <span>${this.label}</span>
+            <foxy-i18n
+              class="transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}"
+              infer=""
+              key=${this.__isFetching ? 'status_saving' : 'status_loading'}
+            >
+            </foxy-i18n>
+          </div>
+          <div class="text-secondary text-s" ?hidden=${!this.helperText}>${this.helperText}</div>
         </div>
 
         <foxy-pagination first=${ifDefined(firstHref)} infer="pagination">
@@ -126,7 +123,7 @@ export class InternalAsyncResourceLinkListControl extends InternalEditableContro
             infer="card"
             class=${classMap({
             'block transition-colors divide-y rounded overflow-hidden': true,
-            'divide-contrast-10 ring-1 ring-inset ring-contrast-10': true,
+            'bg-contrast-5 divide-contrast-10': true,
         })}
             .item=${this.__renderItem}
           >
@@ -134,18 +131,7 @@ export class InternalAsyncResourceLinkListControl extends InternalEditableContro
         </foxy-pagination>
 
         <div
-          class=${classMap({
-            'transition-colors mt-xs text-xs': true,
-            'text-secondary': !this.disabled && !this.readonly,
-            'text-disabled': this.disabled,
-        })}
-          ?hidden=${!this.helperText}
-        >
-          ${this.helperText}
-        </div>
-
-        <div
-          class="mt-xs text-xs leading-xs text-error"
+          class="mt-s text-s leading-xs text-error"
           ?hidden=${!this._errorMessage || this.disabled || this.readonly}
         >
           ${this._errorMessage}

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

@@ -1 +1 @@
-{"version":3,"file":"InternalAsyncResourceLinkListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport type { TemplateResult } from 'lit-html';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { Collection } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\nimport { css } from 'lit-element';\n\nimport memoize from 'lodash-es/memoize';\n\nexport class InternalAsyncResourceLinkListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      foreignKeyForUri: { attribute: 'foreign-key-for-uri' },\n      foreignKeyForId: { attribute: 'foreign-key-for-id' },\n      ownKeyForUri: { attribute: 'own-key-for-uri' },\n      optionsHref: { attribute: 'options-href' },\n      linksHref: { attribute: 'links-href' },\n      embedKey: { attribute: 'embed-key' },\n      ownUri: { attribute: 'own-uri' },\n      limit: { type: Number },\n      item: {},\n      __isFetching: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        vaadin-checkbox::part(label) {\n          margin: 0 0 0 calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n          align-self: center;\n        }\n      `,\n    ];\n  }\n\n  foreignKeyForUri: string | null = null;\n\n  foreignKeyForId: string | null = null;\n\n  ownKeyForUri: string | null = null;\n\n  optionsHref: string | null = null;\n\n  linksHref: string | null = null;\n\n  embedKey: string | null = null;\n\n  ownUri: string | null = null;\n\n  limit = 20;\n\n  item: string | null = null;\n\n  private readonly __getItemRenderer = memoize(\n    (item: string | null, hasData: boolean) => {\n      return new Function(\n        'ctx',\n        `return ctx.html\\`\n        <${item ?? 'foxy-null'}\n          related=\\${JSON.stringify(ctx.related)}\n          parent=\\${ctx.parent}\n          infer=\"\"\n          ${hasData ? '.data=${ctx.data}' : 'href=${ctx.href}'}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n      ) as ItemRenderer;\n    },\n    (...args) => args.join()\n  );\n\n  private readonly __renderItem: ItemRenderer = ctx => {\n    const render = this.__getItemRenderer(this.item, !!ctx.data);\n    const wrap = (content: TemplateResult) => html`\n      <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">${content}</div>\n    `;\n\n    if (!ctx.href || ctx.href.startsWith('foxy://')) return wrap(render(ctx));\n    if (this.readonly) return wrap(render(ctx));\n\n    const foreignKeyForUri = this.foreignKeyForUri;\n    const linkResource = foreignKeyForUri\n      ? this.__allLinks?.find(link => link[foreignKeyForUri] === ctx.href)\n      : undefined;\n\n    const isDisabled = this.disabled || !this.__allLinks || this.__isFetching;\n\n    return wrap(html`\n      <vaadin-checkbox\n        class=\"block\"\n        ?disabled=${isDisabled}\n        ?checked=${!!linkResource}\n        @change=${(evt: CustomEvent) => {\n          const target = evt.currentTarget as CheckboxElement;\n          if (target.checked) {\n            this.__insertLink(ctx.data?._links.self.href ?? '');\n          } else {\n            this.__deleteLink(linkResource?._links.self.href ?? '');\n          }\n        }}\n      >\n        <div class=\"transition-opacity ${isDisabled ? 'opacity-50' : 'opacity-100'}\">\n          ${render(ctx)}\n        </div>\n      </vaadin-checkbox>\n    `);\n  };\n\n  private __isFetching = false;\n\n  renderControl(): TemplateResult {\n    let firstHref: string | undefined;\n\n    try {\n      const url = new URL(this.optionsHref ?? '');\n      url.searchParams.set('limit', this.limit.toString());\n      firstHref = url.toString();\n    } catch {\n      firstHref = undefined;\n    }\n\n    const isStatusVisible = this.__isFetching || !this.__allLinks;\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'flex justify-between transition-colors mb-xs font-medium text-s': true,\n            'text-secondary': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <span>${this.label}</span>\n          <foxy-i18n\n            class=\"transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}\"\n            infer=\"\"\n            key=${this.__isFetching ? 'status_saving' : 'status_loading'}\n          >\n          </foxy-i18n>\n        </div>\n\n        <foxy-pagination first=${ifDefined(firstHref)} infer=\"pagination\">\n          <foxy-collection-page\n            infer=\"card\"\n            class=${classMap({\n              'block transition-colors divide-y rounded overflow-hidden': true,\n              'divide-contrast-10 ring-1 ring-inset ring-contrast-10': true,\n            })}\n            .item=${this.__renderItem}\n          >\n          </foxy-collection-page>\n        </foxy-pagination>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary': !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._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n\n        ${this.__renderLinkResourceLoaders()}\n      </div>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n  }\n\n  private async __insertLink(foreignUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(this.linksHref ?? '', {\n      method: 'POST',\n      body: JSON.stringify({\n        [this.foreignKeyForUri ?? '']: foreignUri,\n        [this.ownKeyForUri ?? '']: this.ownUri,\n      }),\n    });\n\n    if (response.ok) {\n      const json = await response.json();\n      const dataResponse = await api.fetch(json._links.self.href);\n\n      if (dataResponse.ok) {\n        const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n        const data = await dataResponse.json();\n\n        rumour.share({\n          related: [this.linksHref ?? ''],\n          source: json._links.self.href,\n          data,\n        });\n      }\n    }\n\n    this.__isFetching = false;\n  }\n\n  private async __deleteLink(linkUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(linkUri, { method: 'DELETE' });\n\n    if (response.ok) {\n      const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n      rumour.share({ related: [this.linksHref ?? ''], source: linkUri, data: null });\n    }\n\n    this.__isFetching = false;\n  }\n\n  private __renderLinkResourceLoaders() {\n    const maxApiLimit = 200;\n    const firstPage = this.renderRoot.querySelector<NucleonElement<Collection>>('[data-link-page]');\n    const totalItems = Number(firstPage?.data?.total_items ?? maxApiLimit); // sometimes total_items is a string in hAPI\n    const links: string[] = [];\n\n    try {\n      for (let i = 0; i < Math.max(1, Math.ceil(totalItems / maxApiLimit)); i++) {\n        const url = new URL(this.linksHref ?? '');\n        url.searchParams.set('offset', String(i * maxApiLimit));\n        url.searchParams.set('limit', String(maxApiLimit));\n        links.push(url.toString());\n      }\n    } catch {\n      // Do nothing.\n    }\n\n    return links.map(\n      href => html`\n        <foxy-nucleon\n          class=\"hidden\"\n          data-link-page\n          infer=\"\"\n          href=${href}\n          @update=${() => this.requestUpdate()}\n        >\n        </foxy-nucleon>\n      `\n    );\n  }\n\n  private get __allLinks() {\n    const embedKey = this.embedKey;\n    if (!embedKey) return null;\n\n    type Loader = NucleonElement<Collection>;\n    const loaders = this.renderRoot.querySelectorAll<Loader>('[data-link-page]');\n    const allLinks: any[] = [];\n\n    for (const loader of loaders) {\n      const embedded = loader.data?._embedded?.[embedKey];\n      if (!embedded) return null;\n      allLinks.push(...embedded);\n    }\n\n    return allLinks;\n  }\n}\n"]}
+{"version":3,"file":"InternalAsyncResourceLinkListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport type { TemplateResult } from 'lit-html';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { Collection } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\nimport { css } from 'lit-element';\n\nimport memoize from 'lodash-es/memoize';\n\nexport class InternalAsyncResourceLinkListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      foreignKeyForUri: { attribute: 'foreign-key-for-uri' },\n      foreignKeyForId: { attribute: 'foreign-key-for-id' },\n      ownKeyForUri: { attribute: 'own-key-for-uri' },\n      optionsHref: { attribute: 'options-href' },\n      linksHref: { attribute: 'links-href' },\n      embedKey: { attribute: 'embed-key' },\n      ownUri: { attribute: 'own-uri' },\n      limit: { type: Number },\n      item: {},\n      __isFetching: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        vaadin-checkbox::part(label) {\n          margin: 0 0 0 calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n          align-self: center;\n        }\n      `,\n    ];\n  }\n\n  foreignKeyForUri: string | null = null;\n\n  foreignKeyForId: string | null = null;\n\n  ownKeyForUri: string | null = null;\n\n  optionsHref: string | null = null;\n\n  linksHref: string | null = null;\n\n  embedKey: string | null = null;\n\n  ownUri: string | null = null;\n\n  limit = 20;\n\n  item: string | null = null;\n\n  private readonly __getItemRenderer = memoize(\n    (item: string | null, hasData: boolean) => {\n      return new Function(\n        'ctx',\n        `return ctx.html\\`\n        <${item ?? 'foxy-null'}\n          related=\\${JSON.stringify(ctx.related)}\n          parent=\\${ctx.parent}\n          infer=\"\"\n          ${hasData ? '.data=${ctx.data}' : 'href=${ctx.href}'}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n      ) as ItemRenderer;\n    },\n    (...args) => args.join()\n  );\n\n  private readonly __renderItem: ItemRenderer = ctx => {\n    const render = this.__getItemRenderer(this.item, !!ctx.data);\n    const wrap = (content: TemplateResult) => html`\n      <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">${content}</div>\n    `;\n\n    if (!ctx.href || ctx.href.startsWith('foxy://')) return wrap(render(ctx));\n    if (this.readonly) return wrap(render(ctx));\n\n    const foreignKeyForUri = this.foreignKeyForUri;\n    const linkResource = foreignKeyForUri\n      ? this.__allLinks?.find(link => link[foreignKeyForUri] === ctx.href)\n      : undefined;\n\n    const isDisabled = this.disabled || !this.__allLinks || this.__isFetching;\n\n    return wrap(html`\n      <vaadin-checkbox\n        class=\"block\"\n        ?disabled=${isDisabled}\n        ?checked=${!!linkResource}\n        @change=${(evt: CustomEvent) => {\n          const target = evt.currentTarget as CheckboxElement;\n          if (target.checked) {\n            this.__insertLink(ctx.data?._links.self.href ?? '');\n          } else {\n            this.__deleteLink(linkResource?._links.self.href ?? '');\n          }\n        }}\n      >\n        <div class=\"transition-opacity ${isDisabled ? 'opacity-50' : 'opacity-100'}\">\n          ${render(ctx)}\n        </div>\n      </vaadin-checkbox>\n    `);\n  };\n\n  private __isFetching = false;\n\n  renderControl(): TemplateResult {\n    let firstHref: string | undefined;\n\n    try {\n      const url = new URL(this.optionsHref ?? '');\n      url.searchParams.set('limit', this.limit.toString());\n      firstHref = url.toString();\n    } catch {\n      firstHref = undefined;\n    }\n\n    const isStatusVisible = this.__isFetching || !this.__allLinks;\n\n    return html`\n      <div class=\"group\">\n        <div class=\"mb-s\" ?hidden=${!this.label && !this.helperText}>\n          <div class=\"flex justify-between font-medium text-l\" ?hidden=${!this.label}>\n            <span>${this.label}</span>\n            <foxy-i18n\n              class=\"transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}\"\n              infer=\"\"\n              key=${this.__isFetching ? 'status_saving' : 'status_loading'}\n            >\n            </foxy-i18n>\n          </div>\n          <div class=\"text-secondary text-s\" ?hidden=${!this.helperText}>${this.helperText}</div>\n        </div>\n\n        <foxy-pagination first=${ifDefined(firstHref)} infer=\"pagination\">\n          <foxy-collection-page\n            infer=\"card\"\n            class=${classMap({\n              'block transition-colors divide-y rounded overflow-hidden': true,\n              'bg-contrast-5 divide-contrast-10': true,\n            })}\n            .item=${this.__renderItem}\n          >\n          </foxy-collection-page>\n        </foxy-pagination>\n\n        <div\n          class=\"mt-s text-s leading-xs text-error\"\n          ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n\n        ${this.__renderLinkResourceLoaders()}\n      </div>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n  }\n\n  private async __insertLink(foreignUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(this.linksHref ?? '', {\n      method: 'POST',\n      body: JSON.stringify({\n        [this.foreignKeyForUri ?? '']: foreignUri,\n        [this.ownKeyForUri ?? '']: this.ownUri,\n      }),\n    });\n\n    if (response.ok) {\n      const json = await response.json();\n      const dataResponse = await api.fetch(json._links.self.href);\n\n      if (dataResponse.ok) {\n        const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n        const data = await dataResponse.json();\n\n        rumour.share({\n          related: [this.linksHref ?? ''],\n          source: json._links.self.href,\n          data,\n        });\n      }\n    }\n\n    this.__isFetching = false;\n  }\n\n  private async __deleteLink(linkUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(linkUri, { method: 'DELETE' });\n\n    if (response.ok) {\n      const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n      rumour.share({ related: [this.linksHref ?? ''], source: linkUri, data: null });\n    }\n\n    this.__isFetching = false;\n  }\n\n  private __renderLinkResourceLoaders() {\n    const maxApiLimit = 200;\n    const firstPage = this.renderRoot.querySelector<NucleonElement<Collection>>('[data-link-page]');\n    const totalItems = Number(firstPage?.data?.total_items ?? maxApiLimit); // sometimes total_items is a string in hAPI\n    const links: string[] = [];\n\n    try {\n      for (let i = 0; i < Math.max(1, Math.ceil(totalItems / maxApiLimit)); i++) {\n        const url = new URL(this.linksHref ?? '');\n        url.searchParams.set('offset', String(i * maxApiLimit));\n        url.searchParams.set('limit', String(maxApiLimit));\n        links.push(url.toString());\n      }\n    } catch {\n      // Do nothing.\n    }\n\n    return links.map(\n      href => html`\n        <foxy-nucleon\n          class=\"hidden\"\n          data-link-page\n          infer=\"\"\n          href=${href}\n          @update=${() => this.requestUpdate()}\n        >\n        </foxy-nucleon>\n      `\n    );\n  }\n\n  private get __allLinks() {\n    const embedKey = this.embedKey;\n    if (!embedKey) return null;\n\n    type Loader = NucleonElement<Collection>;\n    const loaders = this.renderRoot.querySelectorAll<Loader>('[data-link-page]');\n    const allLinks: any[] = [];\n\n    for (const loader of loaders) {\n      const embedded = loader.data?._embedded?.[embedKey];\n      if (!embedded) return null;\n      allLinks.push(...embedded);\n    }\n\n    return allLinks;\n  }\n}\n"]}