@foxy.io/elements 1.17.0 → 1.18.0-beta.3

package/dist/cdn/translations/store-shipping-method-form/en.json

@@ -0,0 +1,90 @@
+{
+  "shipping-method-uri": {
+    "label": "Shipping Method",
+    "placeholder": "Select service",
+    "helper_text": "",
+    "required": "Please select a shipping method."
+  },
+  "shipping-container-uri": {
+    "label": "Container",
+    "placeholder": "Select container",
+    "helper_text": "",
+    "required": "Please select a shipping method."
+  },
+  "shipping-drop-type-uri": {
+    "label": "Drop Type",
+    "placeholder": "Select pickup",
+    "helper_text": "",
+    "required": "Please select a drop type."
+  },
+  "destinations": {
+    "label": "Destinations",
+    "domestic": "Domestic",
+    "international": "International",
+    "helper_text": ""
+  },
+  "authentication-key": {
+    "label": "Authentication Key",
+    "placeholder": "N/A",
+    "helper_text": "If using account specific rates, enter your shipping account authentication key here, if applicable.",
+    "too_long": "Authentication key must be 50 characters or less."
+  },
+  "meter-number": {
+    "label": "Meter Number",
+    "placeholder": "N/A",
+    "helper_text": "If using account specific rates, enter your shipping account meter number here, if applicable.",
+    "too_long": "Meter number must be 50 characters or less."
+  },
+  "accountid": {
+    "label": "Account ID",
+    "placeholder": "N/A",
+    "helper_text": "If using account specific rates, enter your shipping account id here.",
+    "too_long": "Account ID must be 50 characters or less."
+  },
+  "endpoint": {
+    "label": "Endpoint URL",
+    "placeholder": "https://example.com/rates",
+    "helper_text": "Enter a URL that we'll poll for shipping rates.",
+    "required": "Please enter a valid endpoint URL."
+  },
+  "password": {
+    "label": "Password",
+    "placeholder": "N/A",
+    "helper_text": "If using account specific rates, enter your shipping account password here.",
+    "too_long": "Password must be 50 characters or less."
+  },
+  "custom-code": {
+    "label": "Custom Code",
+    "placeholder": "Paste your code here",
+    "helper_text": "JavaScript used to create and modify shipping rates.",
+    "too_long": "Please reduce the size of your custom code to 64KB or less."
+  },
+  "services": {
+    "header": "Additional services",
+    "first": "First",
+    "last": "Last",
+    "next": "Next",
+    "pagination": "{{from}}-{{to}} out of {{total}}",
+    "previous": "Previous",
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load",
+    "international_only": "– international only"
+  },
+  "timestamps": {
+    "date_created": "Created on",
+    "date_modified": "Last updated",
+    "date": "{{value, date}}"
+  },
+  "delete": {
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "delete_prompt": "Are you sure you'd like to remove this shipping method? You won't be able to undo if you click Delete."
+  },
+  "create": {
+    "create": "Create"
+  },
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load"
+  }
+}

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

@@ -1,3 +1,4 @@
+import type { ComboBoxItem } from '@vaadin/vaadin-combo-box';
 import type { TemplateResult } from 'lit-html';
 import { PropertyDeclarations } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
@@ -14,9 +15,11 @@ export declare class InternalAsyncComboBoxControl extends InternalEditableContro
     itemLabelPath: string | null;
     /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */
     itemValuePath: string | null;
+    selectedItem: ComboBoxItem | string | undefined;
     /** URL of the first page of the hAPI collection serving as a source for items. */
     first: string | null;
     renderControl(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
     protected get _value(): string;
     protected set _value(newValue: string);
 }

package/dist/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.js

@@ -16,6 +16,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
         this.itemLabelPath = null;
         /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */
         this.itemValuePath = null;
+        this.selectedItem = undefined;
         /** URL of the first page of the hAPI collection serving as a source for items. */
         this.first = null;
     }
@@ -24,6 +25,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
             ...super.properties,
             itemLabelPath: { type: String, attribute: 'item-label-path' },
             itemValuePath: { type: String, attribute: 'item-value-path' },
+            selectedItem: { attribute: false },
             first: { type: String },
         };
     }
@@ -59,15 +61,35 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
         .dataProvider=${dataProvider}
+        .selectedItem=${this.selectedItem}
         .value=${this._value}
         @change=${(evt) => {
+            evt.stopPropagation();
             const comboBox = evt.currentTarget;
             this._value = comboBox.value;
+            if (this._value === comboBox.value) {
+                this.selectedItem = comboBox.selectedItem;
+                this.dispatchEvent(new CustomEvent('selected-item-changed'));
+            }
+            else {
+                comboBox.value = this._value;
+            }
         }}
       >
       </vaadin-combo-box>
     `;
     }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('first')) {
+            const comboBox = this.renderRoot.querySelector('vaadin-combo-box');
+            // this forces reload
+            if (comboBox) {
+                comboBox.size = 0;
+                comboBox.size = 1;
+            }
+        }
+    }
     get _value() {
         var _a;
         return (_a = super._value) !== null && _a !== void 0 ? _a : '';

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

@@ -1 +1 @@
-{"version":3,"file":"InternalAsyncComboBoxControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComboBoxDataProvider, ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { TemplateResult } from 'lit-html';\n\nimport { PropertyDeclarations } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { API } from '../../public/NucleonElement/API';\n\n/**\n * Internal control displaying a combo box where items are loaded from\n * a hAPI collection.\n *\n * @since 1.17.0\n * @element foxy-internal-async-combo-box-control\n */\nexport class InternalAsyncComboBoxControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      itemLabelPath: { type: String, attribute: 'item-label-path' },\n      itemValuePath: { type: String, attribute: 'item-value-path' },\n      first: { type: String },\n    };\n  }\n\n  /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */\n  itemLabelPath: string | null = null;\n\n  /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */\n  itemValuePath: string | null = null;\n\n  /** URL of the first page of the hAPI collection serving as a source for items. */\n  first: string | null = null;\n\n  renderControl(): TemplateResult {\n    const dataProvider: ComboBoxDataProvider = async (params, callback) => {\n      if (!this.first) return callback([], 0);\n\n      const url = new URL(this.first);\n      url.searchParams.set('offset', String(params.page * params.pageSize));\n      url.searchParams.set('limit', String(params.pageSize));\n\n      if (params.filter && this.itemLabelPath) {\n        url.searchParams.set(this.itemLabelPath, `*${params.filter}*`);\n      }\n\n      const response = await new API(this).fetch(url.toString());\n      if (!response.ok) throw new Error(await response.text());\n\n      const json = await response.json();\n      const items = Array.from(Object.values(json._embedded))[0] as unknown[];\n\n      callback(items, json.total_items);\n    };\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=${ifDefined(this.itemValuePath ?? undefined)}\n        item-label-path=${ifDefined(this.itemLabelPath ?? undefined)}\n        error-message=${ifDefined(this._errorMessage)}\n        item-id-path=\"_links.self.href\"\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        .dataProvider=${dataProvider}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n        }}\n      >\n      </vaadin-combo-box>\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"]}
+{"version":3,"file":"InternalAsyncComboBoxControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComboBoxDataProvider, ComboBoxElement, ComboBoxItem } from '@vaadin/vaadin-combo-box';\nimport type { TemplateResult } from 'lit-html';\n\nimport { PropertyDeclarations } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { API } from '../../public/NucleonElement/API';\n\n/**\n * Internal control displaying a combo box where items are loaded from\n * a hAPI collection.\n *\n * @since 1.17.0\n * @element foxy-internal-async-combo-box-control\n */\nexport class InternalAsyncComboBoxControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      itemLabelPath: { type: String, attribute: 'item-label-path' },\n      itemValuePath: { type: String, attribute: 'item-value-path' },\n      selectedItem: { attribute: false },\n      first: { type: String },\n    };\n  }\n\n  /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */\n  itemLabelPath: string | null = null;\n\n  /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */\n  itemValuePath: string | null = null;\n\n  selectedItem: ComboBoxItem | string | undefined = undefined;\n\n  /** URL of the first page of the hAPI collection serving as a source for items. */\n  first: string | null = null;\n\n  renderControl(): TemplateResult {\n    const dataProvider: ComboBoxDataProvider = async (params, callback) => {\n      if (!this.first) return callback([], 0);\n\n      const url = new URL(this.first);\n      url.searchParams.set('offset', String(params.page * params.pageSize));\n      url.searchParams.set('limit', String(params.pageSize));\n\n      if (params.filter && this.itemLabelPath) {\n        url.searchParams.set(this.itemLabelPath, `*${params.filter}*`);\n      }\n\n      const response = await new API(this).fetch(url.toString());\n      if (!response.ok) throw new Error(await response.text());\n\n      const json = await response.json();\n      const items = Array.from(Object.values(json._embedded))[0] as unknown[];\n\n      callback(items, json.total_items);\n    };\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=${ifDefined(this.itemValuePath ?? undefined)}\n        item-label-path=${ifDefined(this.itemLabelPath ?? undefined)}\n        error-message=${ifDefined(this._errorMessage)}\n        item-id-path=\"_links.self.href\"\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        .dataProvider=${dataProvider}\n        .selectedItem=${this.selectedItem}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          evt.stopPropagation();\n\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n\n          if (this._value === comboBox.value) {\n            this.selectedItem = comboBox.selectedItem;\n            this.dispatchEvent(new CustomEvent('selected-item-changed'));\n          } else {\n            comboBox.value = this._value;\n          }\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (changes.has('first')) {\n      const comboBox = this.renderRoot.querySelector<ComboBoxElement>('vaadin-combo-box');\n\n      // this forces reload\n      if (comboBox) {\n        comboBox.size = 0;\n        comboBox.size = 1;\n      }\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"]}

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

@@ -0,0 +1,17 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Option } from './types';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control wrapper for `vaadin-checkbox-group` element.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-checkbox-group-control
+ */
+export declare class InternalCheckboxGroupControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    /** List of checkboxes to render. */
+    options: Option[];
+    /** Same as the "theme" attribute/property of `vaadin-checkbox-group`. */
+    theme: string | null;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl.js

@@ -0,0 +1,51 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+/**
+ * Internal control wrapper for `vaadin-checkbox-group` element.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-checkbox-group-control
+ */
+export class InternalCheckboxGroupControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        /** List of checkboxes to render. */
+        this.options = [];
+        /** Same as the "theme" attribute/property of `vaadin-checkbox-group`. */
+        this.theme = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { type: Array },
+            theme: { type: String },
+        };
+    }
+    renderControl() {
+        var _a;
+        return html `
+      <vaadin-checkbox-group
+        error-message=${ifDefined(this._errorMessage)}
+        helper-text=${this.helperText}
+        label=${this.label}
+        class="w-full"
+        theme=${ifDefined((_a = this.theme) !== null && _a !== void 0 ? _a : undefined)}
+        ?disabled=${this.disabled || this.readonly}
+        .checkValidity=${this._checkValidity}
+        .value=${this._value}
+        @change=${(evt) => {
+            const field = evt.currentTarget;
+            this._value = field.value;
+        }}
+      >
+        ${this.options.map(option => html `
+            <vaadin-checkbox value=${option.value}>
+              <foxy-i18n infer="" key=${option.label}></foxy-i18n>
+            </vaadin-checkbox>
+          `)}
+      </vaadin-checkbox-group>
+    `;
+    }
+}
+//# sourceMappingURL=InternalCheckboxGroupControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalCheckboxGroupControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,4BAA6B,SAAQ,uBAAuB;IAAzE;;QASE,oCAAoC;QACpC,YAAO,GAAa,EAAE,CAAC;QAEvB,yEAAyE;QACzE,UAAK,GAAkB,IAAI,CAAC;IA4B9B,CAAC;IAxCC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;yBACzB,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAkB;kBACtB,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAqC,CAAC;YACxD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;UAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;qCACa,MAAM,CAAC,KAAK;wCACT,MAAM,CAAC,KAAK;;WAEzC,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CheckboxGroupElement } from '@vaadin/vaadin-checkbox/vaadin-checkbox-group';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Internal control wrapper for `vaadin-checkbox-group` element.\n *\n * @since 1.17.0\n * @element foxy-internal-checkbox-group-control\n */\nexport class InternalCheckboxGroupControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      theme: { type: String },\n    };\n  }\n\n  /** List of checkboxes to render. */\n  options: Option[] = [];\n\n  /** Same as the \"theme\" attribute/property of `vaadin-checkbox-group`. */\n  theme: string | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-checkbox-group\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled || this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value as string[]}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as CheckboxGroupElement;\n          this._value = field.value;\n        }}\n      >\n        ${this.options.map(\n          option => html`\n            <vaadin-checkbox value=${option.value}>\n              <foxy-i18n infer=\"\" key=${option.label}></foxy-i18n>\n            </vaadin-checkbox>\n          `\n        )}\n      </vaadin-checkbox-group>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';
+import '@vaadin/vaadin-checkbox/vaadin-checkbox';
+import '../InternalEditableControl/index';
+import '../../public/I18n/index';
+import { InternalCheckboxGroupControl as Control } from './InternalCheckboxGroupControl';
+export { Control as InternalCheckboxGroupControl };

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

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';
+import '@vaadin/vaadin-checkbox/vaadin-checkbox';
+import "../InternalEditableControl/index.js";
+import "../../public/I18n/index.js";
+import { InternalCheckboxGroupControl as Control } from "./InternalCheckboxGroupControl.js";
+customElements.define('foxy-internal-checkbox-group-control', Control);
+export { Control as InternalCheckboxGroupControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,+CAA+C,CAAC;AACvD,OAAO,yCAAyC,CAAC;AAEjD,6CAA0C;AAC1C,oCAAiC;AAEjC,OAAO,EAAE,4BAA4B,IAAI,OAAO,EAAE,0CAAuC;AAEzF,cAAc,CAAC,MAAM,CAAC,sCAAsC,EAAE,OAAO,CAAC,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';\nimport '@vaadin/vaadin-checkbox/vaadin-checkbox';\n\nimport '../InternalEditableControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalCheckboxGroupControl as Control } from './InternalCheckboxGroupControl';\n\ncustomElements.define('foxy-internal-checkbox-group-control', Control);\n\nexport { Control as InternalCheckboxGroupControl };\n"]}

package/dist/elements/internal/InternalCheckboxGroupControl/types.d.ts

@@ -0,0 +1,6 @@
+export declare type Option = {
+    /** I18n label key for the checkbox. */
+    label: string;
+    /** Checkbox value. */
+    value: string;
+};

package/dist/elements/internal/InternalCheckboxGroupControl/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Option = {\n  /** I18n label key for the checkbox. */\n  label: string;\n  /** Checkbox value. */\n  value: string;\n};\n"]}

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

@@ -11,6 +11,8 @@ import { InternalControl } from '../InternalControl/InternalControl';
  */
 export declare class InternalEditableControl extends InternalControl {
     static get properties(): PropertyDeclarations;
+    getValue: () => unknown;
+    setValue: (newValue: unknown) => void;
     private __placeholder;
     private __helperText;
     private __v8nPrefix;

package/dist/elements/internal/InternalEditableControl/InternalEditableControl.js

@@ -11,6 +11,8 @@ import { InternalControl } from "../InternalControl/InternalControl.js";
 export class InternalEditableControl extends InternalControl {
     constructor() {
         super(...arguments);
+        this.getValue = () => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.form[this.property]; };
+        this.setValue = (newValue) => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.edit({ [this.property]: newValue }); };
         this.__placeholder = null;
         this.__helperText = null;
         this.__v8nPrefix = null;
@@ -23,6 +25,8 @@ export class InternalEditableControl extends InternalControl {
             placeholder: { type: String, noAccessor: true },
             helperText: { type: String, attribute: 'helper-text', noAccessor: true },
             v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },
+            getValue: { attribute: false },
+            setValue: { attribute: false },
             property: { type: String, noAccessor: true },
             label: { type: String, noAccessor: true },
         };
@@ -126,15 +130,13 @@ export class InternalEditableControl extends InternalControl {
      * with the new value in the detail and write changes to the NucleonElement instance if permitted.
      */
     get _value() {
-        var _a;
-        return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.form[this.property];
+        return this.getValue();
     }
     set _value(newValue) {
-        var _a;
         const event = new CustomEvent('change', { cancelable: true, detail: newValue });
         const useDefaultAction = this.dispatchEvent(event);
         if (useDefaultAction)
-            (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.edit({ [this.property]: newValue });
+            this.setValue(newValue);
     }
     /** A shortcut returning the first v8n error associated with this control. */
     get _error() {

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

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableControl/InternalEditableControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport { InternalControl } from '../InternalControl/InternalControl';\n\n/**\n * An internal base class for controls that have editing functionality, e.g. a text field.\n * Instances of this class will provide shortcuts for translatable placeholder, label, helper\n * text and more. Unlike a regular control, editable control can not only read from a NucleonElement\n * instance up the DOM tree, but also send changes to it and trigger validation process.\n *\n * @element foxy-internal-editable-control\n * @since 1.17.0\n */\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      placeholder: { type: String, noAccessor: true },\n      helperText: { type: String, attribute: 'helper-text', noAccessor: true },\n      v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },\n      property: { type: String, noAccessor: true },\n      label: { type: String, noAccessor: true },\n    };\n  }\n\n  private __placeholder: string | null = null;\n\n  private __helperText: string | null = null;\n\n  private __v8nPrefix: string | null = null;\n\n  private __property: string | null = null;\n\n  private __label: string | null = null;\n\n  /**\n   * Translated placeholder text for this control. You can set your own placeholder text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetPlaceholder()`\n   * to restore the default translation.\n   */\n  get placeholder(): string {\n    return typeof this.__placeholder === 'string' ? this.__placeholder : this.t('placeholder');\n  }\n\n  set placeholder(newValue: string) {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = newValue;\n  }\n\n  /**\n   * Translated helper text for this control. You can set your own helper text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetHelperText()`\n   * to restore the default translation.\n   */\n  get helperText(): string {\n    return typeof this.__helperText === 'string' ? this.__helperText : this.t('helper_text');\n  }\n\n  set helperText(newValue: string) {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = newValue;\n  }\n\n  /**\n   * A prefix for all v8n errors related to this control. You can set your own v8n prefix\n   * if the default one doesn't work for you. Use `.resetV8nPrefix()`\n   * to restore the default v8n prefix.\n   */\n  get v8nPrefix(): string {\n    if (typeof this.__v8nPrefix === 'string') return this.__v8nPrefix;\n    if (typeof this.infer === 'string') return `${this.infer}:`;\n    return '';\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = newValue;\n  }\n\n  /**\n   * Name of the property to bind to inferred from the control name by converting it to snake_case.\n   * You can set your own property name if the default inference method produces an incorrect result.\n   * Use `.resetProperty()` to restore the default property name.\n   */\n  get property(): string {\n    if (typeof this.__property === 'string') return this.__property;\n    if (typeof this.infer === 'string') return this.infer.replace(/-/g, '_');\n    return '';\n  }\n\n  set property(newValue: string) {\n    this.requestUpdate('property', this.__property);\n    this.__property = newValue;\n  }\n\n  /**\n   * Translated label for this control. You can set your own label if the default key in the inferred\n   * namespace doesn't work for you. Use `.resetLabel()` to restore the default translation.\n   */\n  get label(): string {\n    return typeof this.__label === 'string' ? this.__label : this.t('label');\n  }\n\n  set label(newValue: string) {\n    this.requestUpdate('label', this.__label);\n    this.__label = newValue;\n  }\n\n  /** Restores the default placeholder translation. */\n  resetPlaceholder(): void {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = null;\n  }\n\n  /** Restores the default helper text translation. */\n  resetHelperText(): void {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = null;\n  }\n\n  /** Restores the default v8n prefix for errors. */\n  resetV8nPrefix(): void {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = null;\n  }\n\n  /** Restores the default property name. */\n  resetProperty(): void {\n    this.requestUpdate('property', this.__property);\n    this.__property = null;\n  }\n\n  /** Restores the default label translation. */\n  resetLabel(): void {\n    this.requestUpdate('label', this.__label);\n    this.__label = null;\n  }\n\n  /**\n   * A shortcut to get the inferred value from the NucleonElement instance\n   * up the DOM tree. If no such value or instance exists, returns `undefined`.\n   * Assigning a value to this property will dispatch a cancelable `change` event\n   * with the new value in the detail and write changes to the NucleonElement instance if permitted.\n   */\n\n  protected get _value(): unknown | undefined {\n    return this.nucleon?.form[this.property];\n  }\n\n  protected set _value(newValue: unknown | undefined) {\n    const event = new CustomEvent('change', { cancelable: true, detail: newValue });\n    const useDefaultAction = this.dispatchEvent(event);\n    if (useDefaultAction) this.nucleon?.edit({ [this.property]: newValue });\n  }\n  /** A shortcut returning the first v8n error associated with this control. */\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n  /** A shortcut returning the localized text of the first v8n error associated with this control. */\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;\n  }\n  /** A helper returning a `.checkValidity()` function for use with Vaadin elements. */\n\n  protected get _checkValidity(): () => boolean {\n    return () => !this._error;\n  }\n}\n"]}
+{"version":3,"file":"InternalEditableControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableControl/InternalEditableControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport { InternalControl } from '../InternalControl/InternalControl';\n\n/**\n * An internal base class for controls that have editing functionality, e.g. a text field.\n * Instances of this class will provide shortcuts for translatable placeholder, label, helper\n * text and more. Unlike a regular control, editable control can not only read from a NucleonElement\n * instance up the DOM tree, but also send changes to it and trigger validation process.\n *\n * @element foxy-internal-editable-control\n * @since 1.17.0\n */\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      placeholder: { type: String, noAccessor: true },\n      helperText: { type: String, attribute: 'helper-text', noAccessor: true },\n      v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },\n      getValue: { attribute: false },\n      setValue: { attribute: false },\n      property: { type: String, noAccessor: true },\n      label: { type: String, noAccessor: true },\n    };\n  }\n\n  getValue = (): unknown => this.nucleon?.form[this.property];\n\n  setValue = (newValue: unknown): void => this.nucleon?.edit({ [this.property]: newValue });\n\n  private __placeholder: string | null = null;\n\n  private __helperText: string | null = null;\n\n  private __v8nPrefix: string | null = null;\n\n  private __property: string | null = null;\n\n  private __label: string | null = null;\n\n  /**\n   * Translated placeholder text for this control. You can set your own placeholder text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetPlaceholder()`\n   * to restore the default translation.\n   */\n  get placeholder(): string {\n    return typeof this.__placeholder === 'string' ? this.__placeholder : this.t('placeholder');\n  }\n\n  set placeholder(newValue: string) {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = newValue;\n  }\n\n  /**\n   * Translated helper text for this control. You can set your own helper text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetHelperText()`\n   * to restore the default translation.\n   */\n  get helperText(): string {\n    return typeof this.__helperText === 'string' ? this.__helperText : this.t('helper_text');\n  }\n\n  set helperText(newValue: string) {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = newValue;\n  }\n\n  /**\n   * A prefix for all v8n errors related to this control. You can set your own v8n prefix\n   * if the default one doesn't work for you. Use `.resetV8nPrefix()`\n   * to restore the default v8n prefix.\n   */\n  get v8nPrefix(): string {\n    if (typeof this.__v8nPrefix === 'string') return this.__v8nPrefix;\n    if (typeof this.infer === 'string') return `${this.infer}:`;\n    return '';\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = newValue;\n  }\n\n  /**\n   * Name of the property to bind to inferred from the control name by converting it to snake_case.\n   * You can set your own property name if the default inference method produces an incorrect result.\n   * Use `.resetProperty()` to restore the default property name.\n   */\n  get property(): string {\n    if (typeof this.__property === 'string') return this.__property;\n    if (typeof this.infer === 'string') return this.infer.replace(/-/g, '_');\n    return '';\n  }\n\n  set property(newValue: string) {\n    this.requestUpdate('property', this.__property);\n    this.__property = newValue;\n  }\n\n  /**\n   * Translated label for this control. You can set your own label if the default key in the inferred\n   * namespace doesn't work for you. Use `.resetLabel()` to restore the default translation.\n   */\n  get label(): string {\n    return typeof this.__label === 'string' ? this.__label : this.t('label');\n  }\n\n  set label(newValue: string) {\n    this.requestUpdate('label', this.__label);\n    this.__label = newValue;\n  }\n\n  /** Restores the default placeholder translation. */\n  resetPlaceholder(): void {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = null;\n  }\n\n  /** Restores the default helper text translation. */\n  resetHelperText(): void {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = null;\n  }\n\n  /** Restores the default v8n prefix for errors. */\n  resetV8nPrefix(): void {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = null;\n  }\n\n  /** Restores the default property name. */\n  resetProperty(): void {\n    this.requestUpdate('property', this.__property);\n    this.__property = null;\n  }\n\n  /** Restores the default label translation. */\n  resetLabel(): void {\n    this.requestUpdate('label', this.__label);\n    this.__label = null;\n  }\n\n  /**\n   * A shortcut to get the inferred value from the NucleonElement instance\n   * up the DOM tree. If no such value or instance exists, returns `undefined`.\n   * Assigning a value to this property will dispatch a cancelable `change` event\n   * with the new value in the detail and write changes to the NucleonElement instance if permitted.\n   */\n\n  protected get _value(): unknown | undefined {\n    return this.getValue();\n  }\n\n  protected set _value(newValue: unknown | undefined) {\n    const event = new CustomEvent('change', { cancelable: true, detail: newValue });\n    const useDefaultAction = this.dispatchEvent(event);\n    if (useDefaultAction) this.setValue(newValue);\n  }\n  /** A shortcut returning the first v8n error associated with this control. */\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n  /** A shortcut returning the localized text of the first v8n error associated with this control. */\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;\n  }\n  /** A helper returning a `.checkValidity()` function for use with Vaadin elements. */\n\n  protected get _checkValidity(): () => boolean {\n    return () => !this._error;\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+import type { TemplateResult } from 'lit-element';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control displaying a basic text area box.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-text-area-control
+ */
+export declare class InternalTextAreaControl extends InternalEditableControl {
+    renderControl(): TemplateResult;
+    protected get _value(): string;
+    protected set _value(newValue: string);
+}

package/dist/elements/internal/InternalTextAreaControl/InternalTextAreaControl.js

@@ -0,0 +1,40 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-element';
+/**
+ * Internal control displaying a basic text area box.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-text-area-control
+ */
+export class InternalTextAreaControl extends InternalEditableControl {
+    renderControl() {
+        return html `
+      <vaadin-text-area
+        error-message=${ifDefined(this._errorMessage)}
+        helper-text=${this.helperText}
+        placeholder=${this.placeholder}
+        label=${this.label}
+        class="w-full"
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        .checkValidity=${this._checkValidity}
+        .value=${this._value}
+        @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+        @input=${(evt) => {
+            const area = evt.currentTarget;
+            this._value = area.value;
+        }}
+      >
+      </vaadin-text-area>
+    `;
+    }
+    get _value() {
+        var _a;
+        return (_a = super._value) !== null && _a !== void 0 ? _a : '';
+    }
+    set _value(newValue) {
+        super._value = newValue;
+    }
+}
+//# sourceMappingURL=InternalTextAreaControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTextAreaControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextAreaControl/InternalTextAreaControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAClE,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,aAAgC,CAAC;YAClD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;;KAGJ,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;CACF","sourcesContent":["import type { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic text area box.\n *\n * @since 1.17.0\n * @element foxy-internal-text-area-control\n */\nexport class InternalTextAreaControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-text-area\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 TextAreaElement;\n          this._value = area.value;\n        }}\n      >\n      </vaadin-text-area>\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"]}

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

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-text-field/vaadin-text-area';
+import '../InternalEditableControl/index';
+import { InternalTextAreaControl as Control } from './InternalTextAreaControl';
+export { Control as InternalTextAreaControl };

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

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-text-field/vaadin-text-area';
+import "../InternalEditableControl/index.js";
+import { InternalTextAreaControl as Control } from "./InternalTextAreaControl.js";
+customElements.define('foxy-internal-text-area-control', Control);
+export { Control as InternalTextAreaControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextAreaControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC;AACpD,6CAA0C;AAC1C,OAAO,EAAE,uBAAuB,IAAI,OAAO,EAAE,qCAAkC;AAE/E,cAAc,CAAC,MAAM,CAAC,iCAAiC,EAAE,OAAO,CAAC,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '../InternalEditableControl/index';\nimport { InternalTextAreaControl as Control } from './InternalTextAreaControl';\n\ncustomElements.define('foxy-internal-text-area-control', Control);\n\nexport { Control as InternalTextAreaControl };\n"]}

package/dist/elements/public/CustomerPortal/InternalCustomerPortalLoggedInView.js

@@ -2,6 +2,7 @@ import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { html } from 'lit-html';
 import { API } from "../NucleonElement/API.js";
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement)));
@@ -127,28 +128,14 @@ export class InternalCustomerPortalLoggedInView extends Base {
     render() {
         var _a, _b;
         const hiddenSelector = this.hiddenSelector.zoom('customer');
-        const optionallyHiddenInCustomer = ['payment-methods'];
-        const alwaysHiddenInCustomer = [
-            'attributes',
-            'transactions',
-            'subscriptions',
-            'addresses:actions:create',
-            'header:actions:edit:form:delete',
-        ];
-        const customerHiddenControls = [
-            ...optionallyHiddenInCustomer
-                .filter(id => hiddenSelector.matches(id))
-                .map(id => `${id}:${hiddenSelector.zoom(id)}`),
-            ...alwaysHiddenInCustomer.map(id => {
-                const splitId = id.split(':');
-                for (let i = 0; i < splitId.length; ++i) {
-                    const hostId = splitId.slice(0, i + 1).join(':');
-                    if (hiddenSelector.matches(hostId, true))
-                        return hostId;
-                }
-                return id;
-            }),
-        ];
+        const customerHiddenControls = new BooleanSelector(`
+      attributes
+      transactions
+      subscriptions
+      addresses:actions:create
+      header:actions:edit:form:delete
+      ${hiddenSelector.toString()}
+    `).toString();
         const templates = this.getNestedTemplates('customer');
         const originalHeaderActionsAfterTemplate = templates['header:actions:after'];
         const originalTimestampsAfterTemplate = templates['header:actions:edit:form:timestamps:after'];
@@ -211,7 +198,7 @@ export class InternalCustomerPortalLoggedInView extends Base {
       <foxy-customer
         readonlycontrols=${this.readonlySelector.zoom('customer').toString()}
         disabledcontrols=${this.disabledSelector.zoom('customer').toString()}
-        hiddencontrols=${customerHiddenControls.join(' ')}
+        hiddencontrols=${customerHiddenControls}
         data-testid="customer"
         group=${this.group}
         href=${this.customer}