@foxy.io/elements 1.15.0-beta.1 → 1.15.0-beta.4

package/dist/elements/public/GiftCardForm/private/CategoryRestrictionsPageItemContent.js

@@ -0,0 +1,53 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../../mixins/configurable.js";
+import { ThemeableMixin } from "../../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../../mixins/translatable.js";
+import { Checkbox } from "../../../private/Checkbox/Checkbox.js";
+import { NucleonElement } from "../../NucleonElement/NucleonElement.js";
+const Base = ConfigurableMixin(ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));
+export class CategoryRestrictionsPageItemContent extends Base {
+    constructor() {
+        super(...arguments);
+        this.itemCategory = '';
+        this.giftCard = '';
+    }
+    static get scopedElements() {
+        return {
+            'x-checkbox': Checkbox,
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            itemCategory: { type: String, attribute: 'item-category' },
+            giftCard: { type: String, attribute: 'gift-card' },
+        };
+    }
+    render() {
+        return html `
+      <div class="h-full flex items-center">
+        <x-checkbox
+          ?disabled=${!this.in('idle') || this.disabled}
+          ?readonly=${this.readonly}
+          ?checked=${!!this.data}
+          @change=${(evt) => {
+            if (evt.detail) {
+                this.edit({
+                    item_category_uri: this.itemCategory,
+                    gift_card_uri: this.giftCard,
+                });
+                this.submit();
+            }
+            else {
+                this.delete();
+            }
+        }}
+        >
+          <slot></slot>
+        </x-checkbox>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=CategoryRestrictionsPageItemContent.js.map

package/dist/elements/public/GiftCardForm/private/CategoryRestrictionsPageItemContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryRestrictionsPageItemContent.js","sourceRoot":"","sources":["../../../../../src/elements/public/GiftCardForm/private/CategoryRestrictionsPageItemContent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,2CAAwC;AACpE,OAAO,EAAE,cAAc,EAAE,wCAAqC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,2CAAwC;AACpE,OAAO,EAAE,QAAQ,EAAE,8CAA2C;AAE9D,OAAO,EAAE,cAAc,EAAE,+CAA4C;AAQrE,MAAM,IAAI,GAAG,iBAAiB,CAC5B,mBAAmB,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CACvE,CAAC;AAEF,MAAM,OAAO,mCAAoC,SAAQ,IAAU;IAAnE;;QAeE,iBAAY,GAAG,EAAE,CAAC;QAElB,aAAQ,GAAG,EAAE,CAAC;IA2BhB,CAAC;IA3CC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,YAAY,EAAE,QAAQ;SACvB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,YAAY,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;YAC1D,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE;SACnD,CAAC;IACJ,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ;sBACjC,IAAI,CAAC,QAAQ;qBACd,CAAC,CAAC,IAAI,CAAC,IAAI;oBACZ,CAAC,GAAwB,EAAE,EAAE;YACrC,IAAI,GAAG,CAAC,MAAM,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC;oBACR,iBAAiB,EAAE,IAAI,CAAC,YAAY;oBACpC,aAAa,EAAE,IAAI,CAAC,QAAQ;iBAC7B,CAAC,CAAC;gBAEH,IAAI,CAAC,MAAM,EAAE,CAAC;aACf;iBAAM;gBACL,IAAI,CAAC,MAAM,EAAE,CAAC;aACf;QACH,CAAC;;;;;KAKN,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { PropertyDeclarations } from 'lit-element';\nimport { html, TemplateResult } from 'lit-html';\nimport { ConfigurableMixin } from '../../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../mixins/translatable';\nimport { Checkbox } from '../../../private/Checkbox/Checkbox';\nimport { CheckboxChangeEvent } from '../../../private/events';\nimport { NucleonElement } from '../../NucleonElement/NucleonElement';\n\ntype Data = {\n  _links: { self: { href: string } };\n  item_category_uri: string;\n  gift_card_uri: string;\n};\n\nconst Base = ConfigurableMixin(\n  ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement)))\n);\n\nexport class CategoryRestrictionsPageItemContent extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-checkbox': Checkbox,\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      itemCategory: { type: String, attribute: 'item-category' },\n      giftCard: { type: String, attribute: 'gift-card' },\n    };\n  }\n\n  itemCategory = '';\n\n  giftCard = '';\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"h-full flex items-center\">\n        <x-checkbox\n          ?disabled=${!this.in('idle') || this.disabled}\n          ?readonly=${this.readonly}\n          ?checked=${!!this.data}\n          @change=${(evt: CheckboxChangeEvent) => {\n            if (evt.detail) {\n              this.edit({\n                item_category_uri: this.itemCategory,\n                gift_card_uri: this.giftCard,\n              });\n\n              this.submit();\n            } else {\n              this.delete();\n            }\n          }}\n        >\n          <slot></slot>\n        </x-checkbox>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,52 @@
+import { Data as GiftCardCode } from '../GiftCardCodeForm/types';
+export { Data } from '../GiftCardCard/types';
+export declare type GiftCardCodes = {
+    _embedded: {
+        'fx:gift_card_codes': GiftCardCode[];
+    };
+    _links: {
+        first: {
+            href: string;
+        };
+        prev: {
+            href: string;
+        };
+        next: {
+            href: string;
+        };
+        last: {
+            href: string;
+        };
+        self: {
+            href: string;
+        };
+    };
+    returned_items: number;
+    total_items: number;
+    offset: number;
+    limit: number;
+};
+export declare type RulesTierParams = {
+    source: string;
+    method: string;
+    units: string;
+    tier?: string;
+    onChange: (newParams: Partial<RulesTierParams>) => void;
+    onDelete: () => void;
+};
+export declare type RulesTierFieldParams = {
+    value: string;
+    label: string;
+    onChange: (newValue: string) => void;
+};
+export declare type RulesTierSwitchParams = {
+    value: number;
+    options: [string, string];
+    onChange: (newValueIndex: number) => void;
+};
+export declare type RulesTierSelectParams = {
+    label: string;
+    value: string;
+    options: Record<string, string>;
+    onChange: (newValue: string) => void;
+};

package/dist/elements/public/GiftCardForm/types.js

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

package/dist/elements/public/GiftCardForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Data as GiftCardCode } from '../GiftCardCodeForm/types';\n\nexport { Data } from '../GiftCardCard/types';\n\nexport type GiftCardCodes = {\n  _embedded: { 'fx:gift_card_codes': GiftCardCode[] };\n  _links: {\n    first: { href: string };\n    prev: { href: string };\n    next: { href: string };\n    last: { href: string };\n    self: { href: string };\n  };\n  returned_items: number;\n  total_items: number;\n  offset: number;\n  limit: number;\n};\n\nexport type RulesTierParams = {\n  source: string;\n  method: string;\n  units: string;\n  tier?: string;\n  onChange: (newParams: Partial<RulesTierParams>) => void;\n  onDelete: () => void;\n};\n\nexport type RulesTierFieldParams = {\n  value: string;\n  label: string;\n  onChange: (newValue: string) => void;\n};\n\nexport type RulesTierSwitchParams = {\n  value: number;\n  options: [string, string];\n  onChange: (newValueIndex: number) => void;\n};\n\nexport type RulesTierSelectParams = {\n  label: string;\n  value: string;\n  options: Record<string, string>;\n  onChange: (newValue: string) => void;\n};\n"]}

package/dist/elements/public/I18n/I18n.js

@@ -104,7 +104,7 @@ I18n.FetchEvent = FetchEvent;
 /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */
 I18n.i18next = i18next.createInstance().use(backend);
 I18n.i18next.init({
-    interpolation: { format },
+    interpolation: { format, escapeValue: false },
     fallbackLng: 'en',
     fallbackNS: 'shared',
     defaultNS: 'shared',

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

@@ -1 +1 @@
-{"version":3,"file":"I18n.js","sourceRoot":"","sources":["../../../../src/elements/public/I18n/I18n.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport i18next, { StringMap, TOptions } from 'i18next';\n\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { Gateways } from './types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backend } from './backend';\nimport { format } from './format/index';\n\n/**\n * Custom element for effortless localization with i18next.\n *\n * @fires I18n#fetch - Instance of `I18n.FetchEvent`. Emitted before each translation request.\n *\n * @element foxy-i18n\n * @since 1.1.0\n */\nexport class I18n extends TranslatableMixin(LitElement, '') {\n  /** Instances of this event are dispatched on an element before each translation request. */\n  static readonly FetchEvent = FetchEvent;\n\n  /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */\n  static readonly i18next = i18next.createInstance().use(backend);\n\n  /**\n   * Registers a joint event listener for all i18next events that indicate\n   * the availability of new translations. If you're using `I18n.i18next` to localize\n   * your components, this function will call the provided handler every time an update is needed.\n   *\n   * @param handler Callback to invoke when translation changes.\n   * @example const unsubscribe = I18n.onTranslationChange(triggerUpdate);\n   */\n  static onTranslationChange(handler: () => void): () => void {\n    const i18nextEvents = ['initialized', 'loaded'] as const;\n    const storeEvents = ['removed', 'added'] as const;\n\n    i18nextEvents.forEach(type => I18n.i18next.on(type, handler));\n    storeEvents.forEach(type => I18n.i18next.store.on(type, handler));\n\n    return () => {\n      i18nextEvents.forEach(type => I18n.i18next.off(type, handler));\n      storeEvents.forEach(type => I18n.i18next.store.off(type, handler));\n    };\n  }\n\n  /**\n   * Registers a global event listener that calls `handler` every time an i18next resource\n   * is downloaded by `foxy-i18n`. Allows devs to specify resource location and/or fetch it\n   * via a different channel (e.g. web sockets or using a localization SaaS).\n   *\n   * @param handler Callback to invoke on resource fetch.\n   * @example const unsubscribe = I18n.onResourceFetch((ns, lang) => fetch(`path/to/${ns}/${lang}`));\n   */\n  static onResourceFetch(handler: (ns: string, lang: string) => Promise<Response>): () => void {\n    const handleFetch = (evt: unknown) => {\n      if (evt instanceof FetchEvent && evt.request.url.startsWith('foxy://i18n/')) {\n        const [lang, ns] = evt.request.url.split('/').reverse();\n        evt.respondWith(handler(ns, lang));\n      }\n    };\n\n    addEventListener('fetch', handleFetch);\n    return () => removeEventListener('fetch', handleFetch);\n  }\n\n  /**\n   * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`\n   * and `fx:payment_gateways` and call this method to make gateway names available to\n   * elements like `foxy-payment-card`.\n   *\n   * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`\n   * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})\n   */\n  static setGateways({ values }: Gateways): void {\n    for (const id in values) {\n      this.i18next.addResource('en', 'gateways', `gateways.${id}`, values[id].name);\n    }\n  }\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Object },\n      key: { type: String },\n    };\n  }\n\n  /**\n   * Optional i18next translation function\n   * [options](https://www.i18next.com/translation-function/essentials#overview-options).\n   */\n  options: TOptions<StringMap> = {};\n\n  /**\n   * Optional key to translate. Empty by default (renders nothing).\n   * See [i18next docs](https://www.i18next.com/translation-function/essentials#accessing-keys) for more info.\n   */\n  key = '';\n\n  private __unsubscribe?: () => void;\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__unsubscribe = I18n.onTranslationChange(() => this.requestUpdate());\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    return html`<span>${this.t(this.key, { ...this.options, lng: this.lang })}</span>`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__unsubscribe?.();\n  }\n}\n\nI18n.i18next.init({\n  interpolation: { format },\n  fallbackLng: 'en',\n  fallbackNS: 'shared',\n  defaultNS: 'shared',\n  ns: ['shared'],\n});\n"]}
+{"version":3,"file":"I18n.js","sourceRoot":"","sources":["../../../../src/elements/public/I18n/I18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,OAAgC,MAAM,SAAS,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,wCAAqC;AAE1D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,MAAM,EAAE,0BAAuB;AAExC;;;;;;;GAOG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB,CAAC,UAAU,EAAE,EAAE,CAAC;IAA3D;;QAuEE;;;WAGG;QACH,YAAO,GAAwB,EAAE,CAAC;QAElC;;;WAGG;QACH,QAAG,GAAG,EAAE,CAAC;IAoBX,CAAC;IA9FC;;;;;;;OAOG;IACH,MAAM,CAAC,mBAAmB,CAAC,OAAmB;QAC5C,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,QAAQ,CAAU,CAAC;QACzD,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC;QAElD,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;QAC9D,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;QAElE,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;YAC/D,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;QACrE,CAAC,CAAC;IACJ,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,eAAe,CAAC,OAAwD;QAC7E,MAAM,WAAW,GAAG,CAAC,GAAY,EAAE,EAAE;YACnC,IAAI,GAAG,YAAY,UAAU,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;gBAC3E,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC;gBACxD,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;aACpC;QACH,CAAC,CAAC;QAEF,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACvC,OAAO,GAAG,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,WAAW,CAAC,EAAE,MAAM,EAAY;QACrC,KAAK,MAAM,EAAE,IAAI,MAAM,EAAE;YACvB,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;SAC/E;IACH,CAAC;IAED,gBAAgB;IAChB,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAgBD,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,gBAAgB;IAChB,MAAM;QACJ,OAAO,IAAI,CAAA,SAAS,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC;IACrF,CAAC;IAED,gBAAgB;IAChB,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,aAAa,+CAAlB,IAAI,EAAmB;IACzB,CAAC;;AAnGD,4FAA4F;AAC5E,eAAU,GAAG,UAAU,CAAC;AAExC,gFAAgF;AAChE,YAAO,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAkGlE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IAChB,aAAa,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE;IAC7C,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,QAAQ;IACnB,EAAE,EAAE,CAAC,QAAQ,CAAC;CACf,CAAC,CAAC","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport i18next, { StringMap, TOptions } from 'i18next';\n\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { Gateways } from './types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backend } from './backend';\nimport { format } from './format/index';\n\n/**\n * Custom element for effortless localization with i18next.\n *\n * @fires I18n#fetch - Instance of `I18n.FetchEvent`. Emitted before each translation request.\n *\n * @element foxy-i18n\n * @since 1.1.0\n */\nexport class I18n extends TranslatableMixin(LitElement, '') {\n  /** Instances of this event are dispatched on an element before each translation request. */\n  static readonly FetchEvent = FetchEvent;\n\n  /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */\n  static readonly i18next = i18next.createInstance().use(backend);\n\n  /**\n   * Registers a joint event listener for all i18next events that indicate\n   * the availability of new translations. If you're using `I18n.i18next` to localize\n   * your components, this function will call the provided handler every time an update is needed.\n   *\n   * @param handler Callback to invoke when translation changes.\n   * @example const unsubscribe = I18n.onTranslationChange(triggerUpdate);\n   */\n  static onTranslationChange(handler: () => void): () => void {\n    const i18nextEvents = ['initialized', 'loaded'] as const;\n    const storeEvents = ['removed', 'added'] as const;\n\n    i18nextEvents.forEach(type => I18n.i18next.on(type, handler));\n    storeEvents.forEach(type => I18n.i18next.store.on(type, handler));\n\n    return () => {\n      i18nextEvents.forEach(type => I18n.i18next.off(type, handler));\n      storeEvents.forEach(type => I18n.i18next.store.off(type, handler));\n    };\n  }\n\n  /**\n   * Registers a global event listener that calls `handler` every time an i18next resource\n   * is downloaded by `foxy-i18n`. Allows devs to specify resource location and/or fetch it\n   * via a different channel (e.g. web sockets or using a localization SaaS).\n   *\n   * @param handler Callback to invoke on resource fetch.\n   * @example const unsubscribe = I18n.onResourceFetch((ns, lang) => fetch(`path/to/${ns}/${lang}`));\n   */\n  static onResourceFetch(handler: (ns: string, lang: string) => Promise<Response>): () => void {\n    const handleFetch = (evt: unknown) => {\n      if (evt instanceof FetchEvent && evt.request.url.startsWith('foxy://i18n/')) {\n        const [lang, ns] = evt.request.url.split('/').reverse();\n        evt.respondWith(handler(ns, lang));\n      }\n    };\n\n    addEventListener('fetch', handleFetch);\n    return () => removeEventListener('fetch', handleFetch);\n  }\n\n  /**\n   * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`\n   * and `fx:payment_gateways` and call this method to make gateway names available to\n   * elements like `foxy-payment-card`.\n   *\n   * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`\n   * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})\n   */\n  static setGateways({ values }: Gateways): void {\n    for (const id in values) {\n      this.i18next.addResource('en', 'gateways', `gateways.${id}`, values[id].name);\n    }\n  }\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Object },\n      key: { type: String },\n    };\n  }\n\n  /**\n   * Optional i18next translation function\n   * [options](https://www.i18next.com/translation-function/essentials#overview-options).\n   */\n  options: TOptions<StringMap> = {};\n\n  /**\n   * Optional key to translate. Empty by default (renders nothing).\n   * See [i18next docs](https://www.i18next.com/translation-function/essentials#accessing-keys) for more info.\n   */\n  key = '';\n\n  private __unsubscribe?: () => void;\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__unsubscribe = I18n.onTranslationChange(() => this.requestUpdate());\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    return html`<span>${this.t(this.key, { ...this.options, lng: this.lang })}</span>`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__unsubscribe?.();\n  }\n}\n\nI18n.i18next.init({\n  interpolation: { format, escapeValue: false },\n  fallbackLng: 'en',\n  fallbackNS: 'shared',\n  defaultNS: 'shared',\n  ns: ['shared'],\n});\n"]}

package/dist/elements/public/I18n/format/date.js

@@ -2,12 +2,13 @@
  * i18next formatter that localizes ISO date.
  * @see https://www.i18next.com/translation-function/formatting
  */
-export const date = (value, format, lang) => {
+export const date = (value, _, lang) => {
+    if (!value)
+        return '$t(unknown)';
     const valueAsDate = new Date(value);
-    return valueAsDate.toLocaleDateString(lang, {
-        month: 'long',
-        year: new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric',
-        day: 'numeric',
-    });
+    const month = 'long';
+    const year = new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric';
+    const day = 'numeric';
+    return valueAsDate.toLocaleDateString(lang, { month, year, day });
 };
 //# sourceMappingURL=date.js.map

package/dist/elements/public/I18n/format/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/date.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IAClE,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,WAAW,CAAC,kBAAkB,CAAC,IAAI,EAAE;QAC1C,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACpF,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that localizes ISO date.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const date: FormatFunction = (value, format, lang): string => {\n  const valueAsDate = new Date(value);\n  return valueAsDate.toLocaleDateString(lang, {\n    month: 'long',\n    year: new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric',\n    day: 'numeric',\n  });\n};\n"]}
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/date.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,IAAI,GAAmB,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,EAAU,EAAE;IAC7D,IAAI,CAAC,KAAK;QAAE,OAAO,aAAa,CAAC;IAEjC,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,KAAK,GAAG,MAAM,CAAC;IACrB,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5F,MAAM,GAAG,GAAG,SAAS,CAAC;IAEtB,OAAO,WAAW,CAAC,kBAAkB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACpE,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that localizes ISO date.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const date: FormatFunction = (value, _, lang): string => {\n  if (!value) return '$t(unknown)';\n\n  const valueAsDate = new Date(value);\n  const month = 'long';\n  const year = new Date().getFullYear() === valueAsDate.getFullYear() ? undefined : 'numeric';\n  const day = 'numeric';\n\n  return valueAsDate.toLocaleDateString(lang, { month, year, day });\n};\n"]}

package/dist/elements/public/I18n/format/discount.d.ts

@@ -0,0 +1,6 @@
+import { FormatFunction } from 'i18next';
+/**
+ * i18next formatter that returns a human-readable discount description for an API value.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export declare const discount: FormatFunction;

package/dist/elements/public/I18n/format/discount.js

@@ -0,0 +1,20 @@
+/**
+ * i18next formatter that returns a human-readable discount description for an API value.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export const discount = ({ type, details }, format, lang) => {
+    const methods = ['allunits', 'incremental', 'repeat', 'single'];
+    const factor = type.endsWith('_percentage') ? 0.01 : 1;
+    const tiers = details.split('|');
+    const method = methods.includes(tiers[0]) ? tiers.shift() : 'single';
+    const i18nKey = `${method}_${type}_discount_summary`;
+    const translatedTiers = tiers.map(tier => {
+        var _a, _b;
+        const signIndex = (_b = (_a = /[-+]/.exec(tier)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1;
+        const adjustment = parseFloat(tier.substring(signIndex)) * factor;
+        const from = parseFloat(tier.substring(0, signIndex));
+        return `$t(${i18nKey}, ${JSON.stringify({ adjustment, from })})`;
+    });
+    return translatedTiers.join('; ');
+};
+//# sourceMappingURL=discount.js.map

package/dist/elements/public/I18n/format/discount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discount.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/discount.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IACzF,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjC,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrE,MAAM,OAAO,GAAG,GAAG,MAAM,IAAI,IAAI,mBAAmB,CAAC;IAErD,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;QACvC,MAAM,SAAS,eAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,0CAAE,KAAK,mCAAI,CAAC,CAAC,CAAC;QACjD,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC;QAClE,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;QAEtD,OAAO,MAAM,OAAO,KAAK,IAAI,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\ntype Value = { type: string; details: string };\n\n/**\n * i18next formatter that returns a human-readable discount description for an API value.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const discount: FormatFunction = ({ type, details }: Value, format, lang): string => {\n  const methods = ['allunits', 'incremental', 'repeat', 'single'];\n  const factor = type.endsWith('_percentage') ? 0.01 : 1;\n  const tiers = details.split('|');\n  const method = methods.includes(tiers[0]) ? tiers.shift() : 'single';\n  const i18nKey = `${method}_${type}_discount_summary`;\n\n  const translatedTiers = tiers.map(tier => {\n    const signIndex = /[-+]/.exec(tier)?.index ?? -1;\n    const adjustment = parseFloat(tier.substring(signIndex)) * factor;\n    const from = parseFloat(tier.substring(0, signIndex));\n\n    return `$t(${i18nKey}, ${JSON.stringify({ adjustment, from })})`;\n  });\n\n  return translatedTiers.join('; ');\n};\n"]}

package/dist/elements/public/I18n/format/index.js

@@ -1,9 +1,13 @@
 import { date } from "./date.js";
+import { discount } from "./discount.js";
+import { ordinal } from "./ordinal.js";
 import { percent } from "./percent.js";
 import { price } from "./price.js";
 import { time } from "./time.js";
 const formatters = {
+    discount,
     percent,
+    ordinal,
     price,
     date,
     time,

package/dist/elements/public/I18n/format/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAE9B,MAAM,UAAU,GAAmC;IACjD,OAAO;IACP,KAAK;IACL,IAAI;IACJ,IAAI;CACL,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAU,EAAE;IAC1F,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,EAAE,EAAE;;QACnD,mBAAO,UAAU,CAAC,IAAI,CAAC,+CAAhB,UAAU,EAAS,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,oCAAK,MAAM,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\nimport { date } from './date';\nimport { percent } from './percent';\nimport { price } from './price';\nimport { time } from './time';\n\nconst formatters: Record<string, FormatFunction> = {\n  percent,\n  price,\n  date,\n  time,\n};\n\n/**\n * Chooses the right i18next formatter for the given template.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const format: FormatFunction = (value, names = '', lang = 'en', opts = {}): string => {\n  const parsedNames = names.split(' ').filter(v => !!v.trim());\n  const applyFormat = (result: string, name: string) => {\n    return formatters[name]?.(result, name, lang, opts) ?? result;\n  };\n\n  return parsedNames.reduce(applyFormat, value);\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,kBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AACtC,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,OAAO,EAAE,qBAAkB;AACpC,OAAO,EAAE,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAE9B,MAAM,UAAU,GAAmC;IACjD,QAAQ;IACR,OAAO;IACP,OAAO;IACP,KAAK;IACL,IAAI;IACJ,IAAI;CACL,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,EAAE,EAAU,EAAE;IAC1F,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,EAAE,EAAE;;QACnD,mBAAO,UAAU,CAAC,IAAI,CAAC,+CAAhB,UAAU,EAAS,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,oCAAK,MAAM,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\nimport { date } from './date';\nimport { discount } from './discount';\nimport { ordinal } from './ordinal';\nimport { percent } from './percent';\nimport { price } from './price';\nimport { time } from './time';\n\nconst formatters: Record<string, FormatFunction> = {\n  discount,\n  percent,\n  ordinal,\n  price,\n  date,\n  time,\n};\n\n/**\n * Chooses the right i18next formatter for the given template.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const format: FormatFunction = (value, names = '', lang = 'en', opts = {}): string => {\n  const parsedNames = names.split(' ').filter(v => !!v.trim());\n  const applyFormat = (result: string, name: string) => {\n    return formatters[name]?.(result, name, lang, opts) ?? result;\n  };\n\n  return parsedNames.reduce(applyFormat, value);\n};\n"]}

package/dist/elements/public/I18n/format/ordinal.d.ts

@@ -0,0 +1,6 @@
+import { FormatFunction } from 'i18next';
+/**
+ * i18next formatter that returns ordinal for a number.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export declare const ordinal: FormatFunction;

package/dist/elements/public/I18n/format/ordinal.js

@@ -0,0 +1,9 @@
+/**
+ * i18next formatter that returns ordinal for a number.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export const ordinal = (value, format, lang) => {
+    const rules = new Intl.PluralRules(lang, { type: 'ordinal' });
+    return `${value}$t(ordinal_${rules.select(value)})`;
+};
+//# sourceMappingURL=ordinal.js.map

package/dist/elements/public/I18n/format/ordinal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ordinal.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/ordinal.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IACrE,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAC9D,OAAO,GAAG,KAAK,cAAc,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;AACtD,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that returns ordinal for a number.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const ordinal: FormatFunction = (value, format, lang): string => {\n  const rules = new Intl.PluralRules(lang, { type: 'ordinal' });\n  return `${value}$t(ordinal_${rules.select(value)})`;\n};\n"]}

package/dist/elements/public/Pagination/Pagination.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
+declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * Helper element that adds pagination controls to elements
+ * representing Hypermedia API collection pages. Works with NucleonElement instances only.
+ * Page element **MUST** be a direct descendant of `foxy-pagination`.
+ *
+ * @example
+ * ```html
+ * <foxy-pagination first="https://demo.api/hapi/customers?limit=3">
+ *   <foxy-customers-table></foxy-customers-table>
+ * </foxy-pagination>
+ * ```
+ *
+ * @element foxy-pagination
+ * @since 1.15.0
+ */
+export declare class Pagination extends Base {
+    static get properties(): PropertyDeclarations;
+    private __pageElement;
+    private __rerender;
+    private __first;
+    /** URL of the first page of the colletion. */
+    get first(): string;
+    set first(newValue: string);
+    connectedCallback(): void;
+    render(): TemplateResult;
+    disconnectedCallback(): void;
+    private __goTo;
+    private __disconnectPageElement;
+    private __connectPageElement;
+}
+export {};

package/dist/elements/public/Pagination/Pagination.js

@@ -0,0 +1,154 @@
+import { LitElement, html } from 'lit-element';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+import get from 'lodash-es/get';
+const NS = 'pagination';
+const Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(LitElement, NS))));
+/**
+ * Helper element that adds pagination controls to elements
+ * representing Hypermedia API collection pages. Works with NucleonElement instances only.
+ * Page element **MUST** be a direct descendant of `foxy-pagination`.
+ *
+ * @example
+ * ```html
+ * <foxy-pagination first="https://demo.api/hapi/customers?limit=3">
+ *   <foxy-customers-table></foxy-customers-table>
+ * </foxy-pagination>
+ * ```
+ *
+ * @element foxy-pagination
+ * @since 1.15.0
+ */
+export class Pagination extends Base {
+    constructor() {
+        super(...arguments);
+        this.__pageElement = null;
+        this.__rerender = () => this.requestUpdate();
+        this.__first = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            first: { type: String },
+            __pageElement: { attribute: false },
+        };
+    }
+    /** URL of the first page of the colletion. */
+    get first() {
+        return this.__first;
+    }
+    set first(newValue) {
+        this.__first = newValue;
+        if (this.__pageElement)
+            this.__pageElement.href = newValue;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__connectPageElement();
+    }
+    render() {
+        var _a;
+        const data = (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data;
+        const { disabled, lang, ns } = this;
+        const returnedItemsValue = Number(get(data, 'returned_items'));
+        const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;
+        const totalItemsValue = Number(get(data, 'total_items'));
+        const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;
+        const offsetValue = Number(get(data, 'offset'));
+        const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;
+        const canGoBack = !disabled && offset > 0;
+        const canGoForth = !disabled && offset + returnedItems < totalItems;
+        const labelClass = 'sr-only sm-not-sr-only';
+        return html `
+      <slot @slotchange=${this.__connectPageElement}></slot>
+
+      <div class="grid grid-cols-3 gap-s items-center">
+        <div class="flex items-center space-x-s">
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoBack}
+            @click=${() => this.__goTo('first')}
+          >
+            <iron-icon class="icon-inline text-s" icon="icons:first-page"></iron-icon>
+            <foxy-i18n class=${labelClass} lang=${lang} key="first" ns=${ns}></foxy-i18n>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoBack}
+            @click=${() => this.__goTo('prev')}
+          >
+            <iron-icon class="icon-inline text-s" icon="icons:chevron-left"></iron-icon>
+            <foxy-i18n class=${labelClass} lang=${lang} key="previous" ns=${ns}></foxy-i18n>
+          </vaadin-button>
+        </div>
+
+        <foxy-i18n
+          options=${JSON.stringify({
+            total: totalItems,
+            from: offset ? offset + 1 : 0,
+            to: offset + returnedItems,
+        })}
+          class=${classMap({
+            'flex-1 text-xs text-tertiary text-center leading-xs': true,
+            'opacity-0': !data,
+        })}
+          lang=${lang}
+          key="pagination"
+          ns=${ns}
+        >
+        </foxy-i18n>
+
+        <div class="flex items-center justify-end space-x-s">
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoForth}
+            @click=${() => this.__goTo('next')}
+          >
+            <foxy-i18n class=${labelClass} lang=${lang} key="next" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:chevron-right"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast tertiary-inline"
+            ?disabled=${!canGoForth}
+            @click=${() => this.__goTo('last')}
+          >
+            <foxy-i18n class=${labelClass} lang=${lang} key="last" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:last-page"></iron-icon>
+          </vaadin-button>
+        </div>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.__disconnectPageElement();
+    }
+    __goTo(rel) {
+        var _a;
+        this.__pageElement.href = String(get((_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data, `_links.${rel}.href`));
+    }
+    __disconnectPageElement() {
+        var _a;
+        (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('update', this.__rerender);
+        this.__pageElement = null;
+    }
+    __connectPageElement() {
+        var _a;
+        this.__disconnectPageElement();
+        const slot = this.renderRoot.querySelector('slot');
+        const assignedElements = (_a = slot === null || slot === void 0 ? void 0 : slot.assignedElements()) !== null && _a !== void 0 ? _a : [];
+        const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement);
+        if (firstNucleonElement) {
+            this.__pageElement = firstNucleonElement;
+            this.__pageElement.addEventListener('update', this.__rerender);
+            this.__pageElement.href = this.first;
+        }
+    }
+}
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport get from 'lodash-es/get';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(LitElement, NS))));\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalItemsValue = Number(get(data, 'total_items'));\n    const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;\n\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < totalItems;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      <div class=\"grid grid-cols-3 gap-s items-center\">\n        <div class=\"flex items-center space-x-s\">\n          <vaadin-button\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('first')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n\n          <vaadin-button\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('prev')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n        </div>\n\n        <foxy-i18n\n          options=${JSON.stringify({\n            total: totalItems,\n            from: offset ? offset + 1 : 0,\n            to: offset + returnedItems,\n          })}\n          class=${classMap({\n            'flex-1 text-xs text-tertiary text-center leading-xs': true,\n            'opacity-0': !data,\n          })}\n          lang=${lang}\n          key=\"pagination\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n\n        <div class=\"flex items-center justify-end space-x-s\">\n          <vaadin-button\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('next')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('last')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n          </vaadin-button>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__rerender);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '@vaadin/vaadin-button';
+import '../I18n/index';
+import { Pagination } from './Pagination';
+export { Pagination };

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

@@ -0,0 +1,8 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '@vaadin/vaadin-button';
+import "../I18n/index.js";
+import { Pagination } from "./Pagination.js";
+customElements.define('foxy-pagination', Pagination);
+export { Pagination };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,0BAAuB;AAEvB,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '@vaadin/vaadin-button';\nimport '../I18n/index';\n\nimport { Pagination } from './Pagination';\n\ncustomElements.define('foxy-pagination', Pagination);\n\nexport { Pagination };\n"]}

package/dist/elements/public/Table/Table.js

@@ -29,15 +29,30 @@ export class Table extends Base {
     /** @readonly */
     render() {
         var _a, _b;
+        const hasHeaders = this.columns.some(column => !!column.header);
         return html `
-      <div data-testid="wrapper" class="relative" aria-busy=${this.in('busy')} aria-live="polite">
+      <div
+        data-testid="wrapper"
+        aria-busy=${this.in('busy')}
+        aria-live="polite"
+        class="relative font-lumo text-m"
+      >
         <table class="table-fixed w-full" data-testid="table">
-          <thead class="sr-only">
+          <thead class=${hasHeaders ? 'border-b border-contrast-10' : 'sr-only'}>
             <tr>
-              ${this.columns.map(column => {
+              ${this.columns.map((column, columnIndex) => {
             var _a;
             return html `
-                  <th>
+                  <th
+                    class=${classMap({
+                'truncate h-l text-tertiary text-m text-left font-medium': true,
+                'text-right': columnIndex === this.columns.length - 1,
+                'hidden sm-table-cell': column.hideBelow === 'sm',
+                'hidden md-table-cell': column.hideBelow === 'md',
+                'hidden lg-table-cell': column.hideBelow === 'lg',
+                'hidden xl-table-cell': column.hideBelow === 'xl',
+            })}
+                  >
                     ${(_a = column.header) === null || _a === void 0 ? void 0 : _a.call(column, { html, lang: this.lang, data: this.data, ns: this.ns })}
                   </th>
                 `;
@@ -60,7 +75,7 @@ export class Table extends Base {
                     'hidden md-table-cell': column.hideBelow === 'md',
                     'hidden lg-table-cell': column.hideBelow === 'lg',
                     'hidden xl-table-cell': column.hideBelow === 'xl',
-                    'truncate h-l font-lumo text-body text-m': true,
+                    'truncate h-l text-body': true,
                 })}
                       >
                         ${resource

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/elements/public/Table/Table.ts"],"names":[],"mappings":"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","sourcesContent":["import { Collection, Column, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));\n\n/**\n * Configurable table element for HAL+JSON collections.\n *\n * @element foxy-table\n * @since 1.1.0\n */\nexport class Table<TData extends Collection> extends Base<TData> {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      columns: { attribute: false },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  /** Array of column templates. See `Column` type for more details. */\n  columns: Column<TData>[] = [];\n\n  /** @readonly */\n  render(): TemplateResult {\n    return html`\n      <div data-testid=\"wrapper\" class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <table class=\"table-fixed w-full\" data-testid=\"table\">\n          <thead class=\"sr-only\">\n            <tr>\n              ${this.columns.map(column => {\n                return html`\n                  <th>\n                    ${column.header?.({ html, lang: this.lang, data: this.data, ns: this.ns })}\n                  </th>\n                `;\n              })}\n            </tr>\n          </thead>\n\n          <tbody class=\"divide-y divide-contrast-10\">\n            ${this.__rows.map(resource => {\n              return html`\n                <tr class=\"h-l\">\n                  ${this.columns?.map((column, columnIndex) => {\n                    return html`\n                      <td\n                        class=${classMap({\n                          'text-right': columnIndex === this.columns.length - 1,\n                          'hidden sm-table-cell': column.hideBelow === 'sm',\n                          'hidden md-table-cell': column.hideBelow === 'md',\n                          'hidden lg-table-cell': column.hideBelow === 'lg',\n                          'hidden xl-table-cell': column.hideBelow === 'xl',\n                          'truncate h-l font-lumo text-body text-m': true,\n                        })}\n                      >\n                        ${resource\n                          ? column.cell?.({ html, lang: this.lang, data: resource, ns: this.ns })\n                          : ''}\n                      </td>\n                    `;\n                  })}\n                </tr>\n              `;\n            })}\n          </tbody>\n        </table>\n\n        ${!this.in({ idle: 'snapshot' })\n          ? html`\n              <div class=\"absolute inset-0 flex items-center justify-center\">\n                <foxy-spinner\n                  data-testid=\"spinner\"\n                  layout=\"vertical\"\n                  state=${this.in('busy') ? 'busy' : this.in('idle') ? 'empty' : 'error'}\n                  class=\"p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n                  lang=${this.lang}\n                  ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n                >\n                </foxy-spinner>\n              </div>\n            `\n          : ''}\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private get __rows() {\n    const defaultLimit = 20;\n    const items = Object.values(this.data?._embedded ?? {}).reduce((p, c) => [...p, ...c], []);\n\n    let rowCount: number;\n\n    if (items.length === 0) {\n      try {\n        const strLimit = new URL(this.href ?? '').searchParams.get('limit');\n        const intLimit = parseInt(strLimit ?? '');\n        rowCount = isNaN(intLimit) ? defaultLimit : intLimit;\n      } catch {\n        rowCount = defaultLimit;\n      }\n    } else {\n      rowCount = items.length;\n    }\n\n    return new Array(rowCount).fill(null).map((v, i) => items[i] ?? v);\n  }\n}\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/elements/public/Table/Table.ts"],"names":[],"mappings":"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","sourcesContent":["import { Collection, Column, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));\n\n/**\n * Configurable table element for HAL+JSON collections.\n *\n * @element foxy-table\n * @since 1.1.0\n */\nexport class Table<TData extends Collection> extends Base<TData> {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      columns: { attribute: false },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  /** Array of column templates. See `Column` type for more details. */\n  columns: Column<TData>[] = [];\n\n  /** @readonly */\n  render(): TemplateResult {\n    const hasHeaders = this.columns.some(column => !!column.header);\n\n    return html`\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative font-lumo text-m\"\n      >\n        <table class=\"table-fixed w-full\" data-testid=\"table\">\n          <thead class=${hasHeaders ? 'border-b border-contrast-10' : 'sr-only'}>\n            <tr>\n              ${this.columns.map((column, columnIndex) => {\n                return html`\n                  <th\n                    class=${classMap({\n                      'truncate h-l text-tertiary text-m text-left font-medium': true,\n                      'text-right': columnIndex === this.columns.length - 1,\n                      'hidden sm-table-cell': column.hideBelow === 'sm',\n                      'hidden md-table-cell': column.hideBelow === 'md',\n                      'hidden lg-table-cell': column.hideBelow === 'lg',\n                      'hidden xl-table-cell': column.hideBelow === 'xl',\n                    })}\n                  >\n                    ${column.header?.({ html, lang: this.lang, data: this.data, ns: this.ns })}\n                  </th>\n                `;\n              })}\n            </tr>\n          </thead>\n\n          <tbody class=\"divide-y divide-contrast-10\">\n            ${this.__rows.map(resource => {\n              return html`\n                <tr class=\"h-l\">\n                  ${this.columns?.map((column, columnIndex) => {\n                    return html`\n                      <td\n                        class=${classMap({\n                          'text-right': columnIndex === this.columns.length - 1,\n                          'hidden sm-table-cell': column.hideBelow === 'sm',\n                          'hidden md-table-cell': column.hideBelow === 'md',\n                          'hidden lg-table-cell': column.hideBelow === 'lg',\n                          'hidden xl-table-cell': column.hideBelow === 'xl',\n                          'truncate h-l text-body': true,\n                        })}\n                      >\n                        ${resource\n                          ? column.cell?.({ html, lang: this.lang, data: resource, ns: this.ns })\n                          : ''}\n                      </td>\n                    `;\n                  })}\n                </tr>\n              `;\n            })}\n          </tbody>\n        </table>\n\n        ${!this.in({ idle: 'snapshot' })\n          ? html`\n              <div class=\"absolute inset-0 flex items-center justify-center\">\n                <foxy-spinner\n                  data-testid=\"spinner\"\n                  layout=\"vertical\"\n                  state=${this.in('busy') ? 'busy' : this.in('idle') ? 'empty' : 'error'}\n                  class=\"p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n                  lang=${this.lang}\n                  ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n                >\n                </foxy-spinner>\n              </div>\n            `\n          : ''}\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private get __rows() {\n    const defaultLimit = 20;\n    const items = Object.values(this.data?._embedded ?? {}).reduce((p, c) => [...p, ...c], []);\n\n    let rowCount: number;\n\n    if (items.length === 0) {\n      try {\n        const strLimit = new URL(this.href ?? '').searchParams.get('limit');\n        const intLimit = parseInt(strLimit ?? '');\n        rowCount = isNaN(intLimit) ? defaultLimit : intLimit;\n      } catch {\n        rowCount = defaultLimit;\n      }\n    } else {\n      rowCount = items.length;\n    }\n\n    return new Array(rowCount).fill(null).map((v, i) => items[i] ?? v);\n  }\n}\n"]}