@foxy.io/elements 1.11.0-beta.2 → 1.11.0-beta.6

package/dist/cdn/translations/shared/en.json

@@ -34,6 +34,7 @@
   "end_subscription_explainer": "Your subscription will remain active until the selected end date. You might have to resubscribe if you decide to resume this subscription later.",
   "expires": "Expires",
   "first_name": "First name",
+  "fraud_risk": "Fraud risk: {{ score }}",
   "frequency": "$t({{units}}, { \"count\": {{count}} })",
   "frequency_label": "Frequency",
   "frequency_plural": "$t({{units}}, { \"count\": {{count}} })",
@@ -71,6 +72,7 @@
   "next_transaction_date": "Next transaction date",
   "password": "Password",
   "payment_method_plural": "Payment methods",
+  "percent": "{{fraction, percent}}",
   "phone": "Phone",
   "postal_code": "Postal code",
   "preview": "Preview",
@@ -84,6 +86,7 @@
   "region": "Region",
   "request": "Request",
   "save": "Save",
+  "show_on_receipt": "Show on receipt",
   "sign_in": "Sign in",
   "sign_in_hint": "Please enter your email and password",
   "subscription_active": "Next payment on {{date, date}}",

package/dist/cdn/translations/shared/es.json

@@ -34,6 +34,7 @@
   "end_subscription_explainer": "Su suscripción permanecerá activa hasta la fecha de finalización seleccionada. Es posible que deba volver a suscribirse si decide reanudar esta suscripción más adelante.",
   "expires": "Caduca",
   "first_name": "Nombre",
+  "fraud_risk": "Riesgo de fraude: {{ score }}",
   "frequency": "$t({{units}}, { \"count\": {{count}} })",
   "frequency_label": "Frecuencia",
   "frequency_plural": "{{count}} $t({{units}}, { \"count\": {{count}} })",
@@ -84,6 +85,7 @@
   "region": "Region",
   "request": "Pedido",
   "save": "Guardar",
+  "show_on_receipt": "Mostrar en recibo",
   "sign_in": "Iniciar sesión",
   "sign_in_hint": "Por favor, introduzca su correo electrónico y contraseña",
   "subscription_active": "Próximo pago el {{date, date}}",

package/dist/elements/public/AddressCard/AddressCard.js

@@ -39,7 +39,7 @@ export class AddressCard extends Base {
       <div class="mb-s leading-none">
         ${this.renderTemplateOrSlot('address-name:before')}
 
-        <span class="uppercase text-xxs font-semibold text-primary tracking-wider">
+        <span class="font-semibold">
           ${isDefaultBilling || isDefaultShipping
                 ? html `
                 <foxy-i18n
@@ -63,7 +63,7 @@ export class AddressCard extends Base {
       <p>
         ${this.renderTemplateOrSlot(`${id}:before`)}
 
-        <span class="flex items-center text-s space-x-s">
+        <span class="flex items-center text-s space-x-s text-secondary">
           <iron-icon icon=${icon} class="icon-inline flex-shrink-0"></iron-icon>
           <span class="truncate" data-testid=${id}>${text}</span>
           &ZeroWidthSpace;

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

@@ -1 +1 @@
-{"version":3,"file":"AddressCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressCard/AddressCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'address-card';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Card element displaying a customer address.\n *\n * @slot address-name:before - **new in v1.4.0**\n * @slot address-name:after - **new in v1.4.0**\n *\n * @slot full-name:before - **new in v1.4.0**\n * @slot full-name:after - **new in v1.4.0**\n *\n * @slot full-address:before - **new in v1.4.0**\n * @slot full-address:after - **new in v1.4.0**\n *\n * @slot company:before - **new in v1.4.0**\n * @slot company:after - **new in v1.4.0**\n *\n * @slot phone:before - **new in v1.4.0**\n * @slot phone:after - **new in v1.4.0**\n *\n * @element foxy-address-card\n * @since 1.2.0\n */\nexport class AddressCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderAddressName = () => {\n    const isDefaultBilling = !!this.data?.is_default_billing;\n    const isDefaultShipping = !!this.data?.is_default_shipping;\n\n    return html`\n      <div class=\"mb-s leading-none\">\n        ${this.renderTemplateOrSlot('address-name:before')}\n\n        <span class=\"uppercase text-xxs font-semibold text-primary tracking-wider\">\n          ${isDefaultBilling || isDefaultShipping\n            ? html`\n                <foxy-i18n\n                  data-testid=\"address-name\"\n                  lang=${this.lang}\n                  key=\"default_${isDefaultBilling ? 'billing' : 'shipping'}_address\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n              `\n            : html`<span data-testid=\"address-name\">${this.data?.address_name}</span>`}\n          &ZeroWidthSpace;\n        </span>\n\n        ${this.renderTemplateOrSlot('address-name:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderLine = (id: string, icon: string, text: TemplateResult) => {\n    return html`\n      <p>\n        ${this.renderTemplateOrSlot(`${id}:before`)}\n\n        <span class=\"flex items-center text-s space-x-s\">\n          <iron-icon icon=${icon} class=\"icon-inline flex-shrink-0\"></iron-icon>\n          <span class=\"truncate\" data-testid=${id}>${text}</span>\n          &ZeroWidthSpace;\n        </span>\n\n        ${this.renderTemplateOrSlot(`${id}:after`)}\n      </p>\n    `;\n  };\n\n  private readonly __renderFullName = () => {\n    const text = this.data\n      ? html`\n          <foxy-i18n\n            options=${JSON.stringify(this.data)}\n            lang=${this.lang}\n            key=\"full_name\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `\n      : html`–`;\n\n    return this.__renderLine('full-name', 'social:person', text);\n  };\n\n  private readonly __renderFullAddress = () => {\n    const text = this.data\n      ? html`\n          <foxy-i18n\n            data-testid=\"full-address\"\n            options=${JSON.stringify(this.data)}\n            lang=${this.lang}\n            key=\"full_address\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `\n      : html`–`;\n\n    return this.__renderLine('full-address', 'maps:place', text);\n  };\n\n  private readonly __renderCompany = () => {\n    const text = html`${this.data?.company || '–'}`;\n    return this.__renderLine('company', 'icons:work', text);\n  };\n\n  private readonly __renderPhone = () => {\n    const text = html`${this.data?.phone || '–'}`;\n    return this.__renderLine('phone', 'maps:local-phone', text);\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n    const isBusy = this.in('busy');\n\n    return html`\n      <div\n        class=\"relative h-full text-left text-s leading-m font-lumo text-body\"\n        aria-live=\"polite\"\n        aria-busy=${isBusy}\n        data-testid=\"wrapper\"\n      >\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out': true,\n            'opacity-0 pointer-events-none': !isLoaded,\n          })}\n        >\n          ${hiddenSelector.matches('address-name', true) ? '' : this.__renderAddressName()}\n          ${hiddenSelector.matches('full-name', true) ? '' : this.__renderFullName()}\n          ${hiddenSelector.matches('full-address', true) ? '' : this.__renderFullAddress()}\n          ${hiddenSelector.matches('company', true) ? '' : this.__renderCompany()}\n          ${hiddenSelector.matches('phone', true) ? '' : this.__renderPhone()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : isEmpty ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AddressCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressCard/AddressCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'address-card';\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Card element displaying a customer address.\n *\n * @slot address-name:before - **new in v1.4.0**\n * @slot address-name:after - **new in v1.4.0**\n *\n * @slot full-name:before - **new in v1.4.0**\n * @slot full-name:after - **new in v1.4.0**\n *\n * @slot full-address:before - **new in v1.4.0**\n * @slot full-address:after - **new in v1.4.0**\n *\n * @slot company:before - **new in v1.4.0**\n * @slot company:after - **new in v1.4.0**\n *\n * @slot phone:before - **new in v1.4.0**\n * @slot phone:after - **new in v1.4.0**\n *\n * @element foxy-address-card\n * @since 1.2.0\n */\nexport class AddressCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderAddressName = () => {\n    const isDefaultBilling = !!this.data?.is_default_billing;\n    const isDefaultShipping = !!this.data?.is_default_shipping;\n\n    return html`\n      <div class=\"mb-s leading-none\">\n        ${this.renderTemplateOrSlot('address-name:before')}\n\n        <span class=\"font-semibold\">\n          ${isDefaultBilling || isDefaultShipping\n            ? html`\n                <foxy-i18n\n                  data-testid=\"address-name\"\n                  lang=${this.lang}\n                  key=\"default_${isDefaultBilling ? 'billing' : 'shipping'}_address\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n              `\n            : html`<span data-testid=\"address-name\">${this.data?.address_name}</span>`}\n          &ZeroWidthSpace;\n        </span>\n\n        ${this.renderTemplateOrSlot('address-name:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderLine = (id: string, icon: string, text: TemplateResult) => {\n    return html`\n      <p>\n        ${this.renderTemplateOrSlot(`${id}:before`)}\n\n        <span class=\"flex items-center text-s space-x-s text-secondary\">\n          <iron-icon icon=${icon} class=\"icon-inline flex-shrink-0\"></iron-icon>\n          <span class=\"truncate\" data-testid=${id}>${text}</span>\n          &ZeroWidthSpace;\n        </span>\n\n        ${this.renderTemplateOrSlot(`${id}:after`)}\n      </p>\n    `;\n  };\n\n  private readonly __renderFullName = () => {\n    const text = this.data\n      ? html`\n          <foxy-i18n\n            options=${JSON.stringify(this.data)}\n            lang=${this.lang}\n            key=\"full_name\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `\n      : html`–`;\n\n    return this.__renderLine('full-name', 'social:person', text);\n  };\n\n  private readonly __renderFullAddress = () => {\n    const text = this.data\n      ? html`\n          <foxy-i18n\n            data-testid=\"full-address\"\n            options=${JSON.stringify(this.data)}\n            lang=${this.lang}\n            key=\"full_address\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `\n      : html`–`;\n\n    return this.__renderLine('full-address', 'maps:place', text);\n  };\n\n  private readonly __renderCompany = () => {\n    const text = html`${this.data?.company || '–'}`;\n    return this.__renderLine('company', 'icons:work', text);\n  };\n\n  private readonly __renderPhone = () => {\n    const text = html`${this.data?.phone || '–'}`;\n    return this.__renderLine('phone', 'maps:local-phone', text);\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n    const isBusy = this.in('busy');\n\n    return html`\n      <div\n        class=\"relative h-full text-left text-s leading-m font-lumo text-body\"\n        aria-live=\"polite\"\n        aria-busy=${isBusy}\n        data-testid=\"wrapper\"\n      >\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out': true,\n            'opacity-0 pointer-events-none': !isLoaded,\n          })}\n        >\n          ${hiddenSelector.matches('address-name', true) ? '' : this.__renderAddressName()}\n          ${hiddenSelector.matches('full-name', true) ? '' : this.__renderFullName()}\n          ${hiddenSelector.matches('full-address', true) ? '' : this.__renderFullAddress()}\n          ${hiddenSelector.matches('company', true) ? '' : this.__renderCompany()}\n          ${hiddenSelector.matches('phone', true) ? '' : this.__renderPhone()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : isEmpty ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit-html';
+import { Data } from './types';
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const AppliedTaxCard_base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Basic card displaying an applied tax.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-applied-tax-card
+ * @since 1.11.0
+ */
+export declare class AppliedTaxCard extends AppliedTaxCard_base<Data> {
+    private __currencyDisplay;
+    private __currency;
+    render(): TemplateResult;
+    protected _sendGet(): Promise<Data>;
+}
+export {};

package/dist/elements/public/AppliedTaxCard/AppliedTaxCard.js

@@ -0,0 +1,62 @@
+import { html } from 'lit-html';
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+/**
+ * Basic card displaying an applied tax.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-applied-tax-card
+ * @since 1.11.0
+ */
+export class AppliedTaxCard extends TranslatableMixin(TwoLineCard, 'applied-tax-card') {
+    constructor() {
+        super(...arguments);
+        this.__currencyDisplay = '';
+        this.__currency = '';
+    }
+    render() {
+        return super.render({
+            title: data => html `${data.name}`,
+            subtitle: data => {
+                return html `
+          <foxy-i18n
+            options=${JSON.stringify({
+                    amount: `${data.amount} ${this.__currency}`,
+                    currencyDisplay: this.__currencyDisplay,
+                })}
+            lang=${this.lang}
+            key="price"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+
+          <span>&bull;</span>
+
+          <foxy-i18n
+            options=${JSON.stringify({ fraction: data.rate / 100 })}
+            lang=${this.lang}
+            key="percent"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+        `;
+            },
+        });
+    }
+    async _sendGet() {
+        const appliedTax = await super._sendGet();
+        const [transaction, store] = await Promise.all([
+            super._fetch(appliedTax._links['fx:transaction'].href),
+            super._fetch(appliedTax._links['fx:store'].href),
+        ]);
+        this.__currency = transaction.currency_code;
+        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
+        return appliedTax;
+    }
+}
+//# sourceMappingURL=AppliedTaxCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppliedTaxCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedTaxCard/AppliedTaxCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAKhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAE7D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB,CAAC,WAAW,EAAE,kBAAkB,CAAO;IAA5F;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA+C1B,CAAC;IA7CC,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,OAAO,IAAI,CAAA;;sBAEG,IAAI,CAAC,SAAS,CAAC;oBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE;oBAC3C,eAAe,EAAE,IAAI,CAAC,iBAAiB;iBACxC,CAAC;mBACK,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;;;;;sBAOF,IAAI,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,CAAC;mBAChD,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;SAGf,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACnE,KAAK,CAAC,MAAM,CAAQ,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACxD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,UAAU,CAAC;IACpB,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\n\n/**\n * Basic card displaying an applied tax.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-applied-tax-card\n * @since 1.11.0\n */\nexport class AppliedTaxCard extends TranslatableMixin(TwoLineCard, 'applied-tax-card')<Data> {\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name}`,\n      subtitle: data => {\n        return html`\n          <foxy-i18n\n            options=${JSON.stringify({\n              amount: `${data.amount} ${this.__currency}`,\n              currencyDisplay: this.__currencyDisplay,\n            })}\n            lang=${this.lang}\n            key=\"price\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <span>&bull;</span>\n\n          <foxy-i18n\n            options=${JSON.stringify({ fraction: data.rate / 100 })}\n            lang=${this.lang}\n            key=\"percent\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n        `;\n      },\n    });\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const appliedTax = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(appliedTax._links['fx:transaction'].href),\n      super._fetch<Store>(appliedTax._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return appliedTax;\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { AppliedTaxCard } from './AppliedTaxCard';
+export { AppliedTaxCard };

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

@@ -0,0 +1,7 @@
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { AppliedTaxCard } from "./AppliedTaxCard.js";
+customElements.define('foxy-applied-tax-card', AppliedTaxCard);
+export { AppliedTaxCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedTaxCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAElD,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { AppliedTaxCard } from './AppliedTaxCard';\n\ncustomElements.define('foxy-applied-tax-card', AppliedTaxCard);\n\nexport { AppliedTaxCard };\n"]}

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

@@ -0,0 +1,3 @@
+import { Rels } from '@foxy.io/sdk/backend';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.AppliedTax>;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AppliedTaxCard/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.AppliedTax>;\n"]}

package/dist/elements/public/AttributeCard/AttributeCard.js

@@ -27,12 +27,8 @@ export class AttributeCard extends Base {
             return html `
       ${this.renderTemplateOrSlot('name:before')}
 
-      <div class="flex items-center space-x-xs text-xxs text-primary">
-        <div
-          class="truncate uppercase font-semibold tracking-wider"
-          title=${(_a = data === null || data === void 0 ? void 0 : data.name) !== null && _a !== void 0 ? _a : ''}
-          data-testid="name"
-        >
+      <div class="flex items-center space-x-xs text-secondary">
+        <div class="truncate" title=${(_a = data === null || data === void 0 ? void 0 : data.name) !== null && _a !== void 0 ? _a : ''} data-testid="name">
           ${(_b = data === null || data === void 0 ? void 0 : data.name) !== null && _b !== void 0 ? _b : html `&nbsp;`}
         </div>
 
@@ -49,7 +45,7 @@ export class AttributeCard extends Base {
             const { data } = this;
             return html `
       ${this.renderTemplateOrSlot('value:before')}
-      <div class="truncate" title=${(_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : ''} data-testid="value">
+      <div class="truncate font-semibold" title=${(_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : ''} data-testid="value">
         ${(_b = data === null || data === void 0 ? void 0 : data.value) !== null && _b !== void 0 ? _b : html `&nbsp;`}
       </div>
       ${this.renderTemplateOrSlot('value:after')}
@@ -63,7 +59,7 @@ export class AttributeCard extends Base {
         const isEmpty = this.in({ idle: 'template' });
         return html `
       <div
-        class="relative text-body text-s font-lumo leading-m focus-outline-none"
+        class="relative text-body text-s font-lumo leading-m"
         aria-live="polite"
         aria-busy=${this.in('busy')}
       >

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

@@ -1 +1 @@
-{"version":3,"file":"AttributeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/AttributeCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAEtF;;;;;;;;;;GAUG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAU;IAA7C;;QACE,cAAS,GAAc,EAAE,CAAC;QAET,iBAAY,GAAG,GAAG,EAAE;;YACnC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;;;;kBAK9B,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,EAAE;;;YAGtB,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,CAAA,QAAQ;;;UAG5B,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ;gBACpC,CAAC,CAAC,IAAI,CAAA,+DAA+D;gBACrE,CAAC,CAAC,EAAE;;;QAGN,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;KAC1C,CAAC;QACJ,CAAC,CAAC;QAEe,kBAAa,GAAG,GAAG,EAAE;;YACpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;oCACb,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE;UAC3C,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,IAAI,CAAA,QAAQ;;QAE7B,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;KAC3C,CAAC;QACJ,CAAC,CAAC;IAkCJ,CAAC;IAhCC,MAAM;;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAA;;;;oBAIK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;UAEzB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/D,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;;;kBAGzD,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,QAAQ;SAC1C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBACvD,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'attribute-card';\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS);\n\n/**\n * Basic card displaying an attribute.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n *\n * @element foxy-attribute-card\n * @since 1.2.0\n */\nexport class AttributeCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderName = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('name:before')}\n\n      <div class=\"flex items-center space-x-xs text-xxs text-primary\">\n        <div\n          class=\"truncate uppercase font-semibold tracking-wider\"\n          title=${data?.name ?? ''}\n          data-testid=\"name\"\n        >\n          ${data?.name ?? html`&nbsp;`}\n        </div>\n\n        ${data && data.visibility !== 'public'\n          ? html`<iron-icon icon=\"icons:lock\" class=\"icon-inline\"></iron-icon>`\n          : ''}\n      </div>\n\n      ${this.renderTemplateOrSlot('name:after')}\n    `;\n  };\n\n  private readonly __renderValue = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('value:before')}\n      <div class=\"truncate\" title=${data?.value ?? ''} data-testid=\"value\">\n        ${data?.value ?? html`&nbsp;`}\n      </div>\n      ${this.renderTemplateOrSlot('value:after')}\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n\n    return html`\n      <div\n        class=\"relative text-body text-s font-lumo leading-m focus-outline-none\"\n        aria-live=\"polite\"\n        aria-busy=${this.in('busy')}\n      >\n        ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n        ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : isEmpty ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"AttributeCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeCard/AttributeCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAEtF;;;;;;;;;;GAUG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAU;IAA7C;;QACE,cAAS,GAAc,EAAE,CAAC;QAET,iBAAY,GAAG,GAAG,EAAE;;YACnC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;;sCAGV,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,EAAE;YAC1C,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,mCAAI,IAAI,CAAA,QAAQ;;;UAG5B,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ;gBACpC,CAAC,CAAC,IAAI,CAAA,+DAA+D;gBACrE,CAAC,CAAC,EAAE;;;QAGN,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC;KAC1C,CAAC;QACJ,CAAC,CAAC;QAEe,kBAAa,GAAG,GAAG,EAAE;;YACpC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;kDACC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,EAAE;UACzD,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,mCAAI,IAAI,CAAA,QAAQ;;QAE7B,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;KAC3C,CAAC;QACJ,CAAC,CAAC;IAkCJ,CAAC;IAhCC,MAAM;;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAA;;;;oBAIK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;UAEzB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;UAC/D,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;;;kBAGzD,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,QAAQ;SAC1C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBACvD,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'attribute-card';\nconst Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(NucleonElement)), NS);\n\n/**\n * Basic card displaying an attribute.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n *\n * @element foxy-attribute-card\n * @since 1.2.0\n */\nexport class AttributeCard extends Base<Data> {\n  templates: Templates = {};\n\n  private readonly __renderName = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('name:before')}\n\n      <div class=\"flex items-center space-x-xs text-secondary\">\n        <div class=\"truncate\" title=${data?.name ?? ''} data-testid=\"name\">\n          ${data?.name ?? html`&nbsp;`}\n        </div>\n\n        ${data && data.visibility !== 'public'\n          ? html`<iron-icon icon=\"icons:lock\" class=\"icon-inline\"></iron-icon>`\n          : ''}\n      </div>\n\n      ${this.renderTemplateOrSlot('name:after')}\n    `;\n  };\n\n  private readonly __renderValue = () => {\n    const { data } = this;\n\n    return html`\n      ${this.renderTemplateOrSlot('value:before')}\n      <div class=\"truncate font-semibold\" title=${data?.value ?? ''} data-testid=\"value\">\n        ${data?.value ?? html`&nbsp;`}\n      </div>\n      ${this.renderTemplateOrSlot('value:after')}\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isLoaded = this.in({ idle: 'snapshot' });\n    const isEmpty = this.in({ idle: 'template' });\n\n    return html`\n      <div\n        class=\"relative text-body text-s font-lumo leading-m\"\n        aria-live=\"polite\"\n        aria-busy=${this.in('busy')}\n      >\n        ${hiddenSelector.matches('name', true) ? '' : this.__renderName()}\n        ${hiddenSelector.matches('value', true) ? '' : this.__renderValue()}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': isLoaded,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : isEmpty ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -11,6 +11,8 @@ declare const CollectionPage_base: typeof NucleonElement & import("lit-element")
 export declare class CollectionPage<TPage extends Page> extends CollectionPage_base<TPage> {
     /** @readonly */
     static get properties(): PropertyDeclarations;
+    /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */
+    props: Record<string, unknown>;
     ns: string;
     private __pageFetchEventHandler;
     private __renderItem;

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

@@ -3,6 +3,7 @@ import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { FetchEvent } from "../NucleonElement/FetchEvent.js";
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import { repeat } from 'lit-html/directives/repeat';
+import { spread } from '@open-wc/lit-helpers';
 /**
  * Renders an element for each resource in a collection page.
  *
@@ -12,6 +13,8 @@ import { repeat } from 'lit-html/directives/repeat';
 export class CollectionPage extends ConfigurableMixin(NucleonElement) {
     constructor() {
         super();
+        /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the item element). */
+        this.props = {};
         this.ns = '';
         this.__pageFetchEventHandler = (evt) => this.__handlePageFetchEvent(evt);
         this.item = 'foxy-null';
@@ -20,6 +23,7 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
     static get properties() {
         return {
             ...super.properties,
+            props: { type: Object },
             item: { type: String },
             ns: { type: String },
         };
@@ -55,6 +59,7 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
             ?readonly=\${ctx.readonly}
             ?hidden=\${ctx.hidden}
             .templates=\${ctx.templates}
+            ...=\${ctx.spread(ctx.props)}
           >
           </${value}>\``);
         }
@@ -98,6 +103,8 @@ export class CollectionPage extends ConfigurableMixin(NucleonElement) {
             readonly: this.readonly,
             hidden: this.hidden,
             parent: this.href,
+            spread: spread,
+            props: this.props,
             group: this.group,
             lang: this.lang,
             data: item.data,

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

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

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

@@ -2,6 +2,7 @@ import { TemplateResult, html } from 'lit-html';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { HALJSONResource } from '../NucleonElement/types';
 import { Renderer } from '../../../mixins/configurable';
+import { spread } from '@open-wc/lit-helpers';
 export declare type Page = HALJSONResource & {
     _embedded: Record<string, HALJSONResource[]>;
 };
@@ -17,6 +18,8 @@ export declare type ItemRendererContext<TItem extends HALJSONResource = HALJSONR
     disabled: boolean;
     hidden: boolean;
     parent: string;
+    spread: typeof spread;
+    props: Record<string, unknown>;
     group: string;
     html: typeof html;
     lang: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPage/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { Renderer } from '../../../mixins/configurable';\n\nexport type Page = HALJSONResource & { _embedded: Record<string, HALJSONResource[]> };\nexport type ExtractItem<T> = T extends { _embedded: Record<string, (infer U)[]> } ? U : never;\n\nexport type ItemRendererContext<TItem extends HALJSONResource = HALJSONResource> = {\n  readonlyControls: BooleanSelector;\n  disabledControls: BooleanSelector;\n  hiddenControls: BooleanSelector;\n  templates: Partial<Record<string, Renderer<any>>>;\n  readonly: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  parent: string;\n  group: string;\n  html: typeof html;\n  lang: string;\n  href: string;\n  data: TItem | null;\n  ns: string;\n};\n\nexport type ItemRenderer<TItem extends HALJSONResource = HALJSONResource> = (\n  ctx: ItemRendererContext<TItem>\n) => TemplateResult;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPage/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { Renderer } from '../../../mixins/configurable';\nimport { spread } from '@open-wc/lit-helpers';\n\nexport type Page = HALJSONResource & { _embedded: Record<string, HALJSONResource[]> };\nexport type ExtractItem<T> = T extends { _embedded: Record<string, (infer U)[]> } ? U : never;\n\nexport type ItemRendererContext<TItem extends HALJSONResource = HALJSONResource> = {\n  readonlyControls: BooleanSelector;\n  disabledControls: BooleanSelector;\n  hiddenControls: BooleanSelector;\n  templates: Partial<Record<string, Renderer<any>>>;\n  readonly: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  parent: string;\n  spread: typeof spread;\n  props: Record<string, unknown>;\n  group: string;\n  html: typeof html;\n  lang: string;\n  href: string;\n  data: TItem | null;\n  ns: string;\n};\n\nexport type ItemRenderer<TItem extends HALJSONResource = HALJSONResource> = (\n  ctx: ItemRendererContext<TItem>\n) => TemplateResult;\n"]}

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

@@ -14,6 +14,8 @@ declare const CollectionPages_base: typeof LitElement & import("lit-element").Co
 export declare class CollectionPages<TPage extends Page> extends CollectionPages_base {
     /** @readonly */
     static get properties(): PropertyDeclarations;
+    /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the page element). */
+    props: Record<string, unknown>;
     /** Optional ISO 639-1 code describing the language element content is written in. */
     lang: string;
     ns: string;

package/dist/elements/public/CollectionPages/CollectionPages.js

@@ -7,6 +7,7 @@ import { Rumour } from '@foxy.io/sdk/core';
 import { machine } from "./machine.js";
 import { repeat } from 'lit-html/directives/repeat';
 import { serveFromCache } from "../NucleonElement/serveFromCache.js";
+import { spread } from '@open-wc/lit-helpers';
 /**
  * Renders an element for each page in a collection.
  *
@@ -19,6 +20,8 @@ import { serveFromCache } from "../NucleonElement/serveFromCache.js";
 export class CollectionPages extends ConfigurableMixin(LitElement) {
     constructor() {
         super();
+        /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the page element). */
+        this.props = {};
         /** Optional ISO 639-1 code describing the language element content is written in. */
         this.lang = '';
         this.ns = '';
@@ -62,6 +65,7 @@ export class CollectionPages extends ConfigurableMixin(LitElement) {
             first: { type: String, noAccessor: true },
             pages: { type: Array, noAccessor: true },
             group: { type: String },
+            props: { type: Object },
             lang: { type: String },
             page: { type: String },
             ns: { type: String },
@@ -100,6 +104,7 @@ export class CollectionPages extends ConfigurableMixin(LitElement) {
             ?readonly=\${ctx.readonly}
             ?hidden=\${ctx.hidden}
             .templates=\${ctx.templates}
+            ...=\${ctx.spread(ctx.props)}
           >
           </${value}>\``);
         }
@@ -195,6 +200,8 @@ export class CollectionPages extends ConfigurableMixin(LitElement) {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 hidden: this.hidden,
+                spread: spread,
+                props: this.props,
                 group: this.group,
                 data: (_a = this.pages[pageIndex]) !== null && _a !== void 0 ? _a : null,
                 href: page.href,

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionPages.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/CollectionPages.ts"],"names":[],"mappings":"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","sourcesContent":["import { Context, Event, Page, PageRenderer } from './types';\nimport { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport { State, StateMachine, interpret } from 'xstate';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rumour } from '@foxy.io/sdk/core';\nimport { machine } from './machine';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { serveFromCache } from '../NucleonElement/serveFromCache';\n\n/**\n * Renders an element for each page in a collection.\n *\n * @fires NucleonElement#update - Instance of `NucleonElement.UpdateEvent`. Dispatched on an element whenever it changes its state.\n * @fires NucleonElement#fetch - Instance of `NucleonElement.API.FetchEvent`. Emitted before each API request.\n *\n * @element foxy-collection-pages\n * @since 1.1.0\n */\nexport class CollectionPages<TPage extends Page> extends ConfigurableMixin(LitElement) {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      manual: { type: Boolean, reflect: true },\n      first: { type: String, noAccessor: true },\n      pages: { type: Array, noAccessor: true },\n      group: { type: String },\n      lang: { type: String },\n      page: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang = '';\n\n  ns = '';\n\n  private __renderPage!: PageRenderer<TPage>;\n\n  private __page!: string | PageRenderer<TPage>;\n\n  private __group = '';\n\n  private __stopTrackingRumour!: () => void;\n\n  private __fetchEventHandler = (evt: unknown) => this.__handleFetchEvent(evt);\n\n  private __service = interpret(\n    (machine as unknown as StateMachine<Context<TPage>, any, Event<TPage>>).withConfig({\n      services: {\n        observeChildren: () => callback => {\n          const observer = new IntersectionObserver(entries => {\n            if (entries.some(entry => entry.isIntersecting)) callback('RESUME');\n          });\n\n          observer.observe(this.renderRoot.children[this.renderRoot.children.length - 1]);\n          return () => observer.disconnect();\n        },\n\n        sendGet: async ctx => {\n          const lastPage = ctx.pages[ctx.pages.length - 1];\n          const lastPageHref = lastPage?._links.next.href ?? ctx.first;\n          const response = await new NucleonElement.API(this).fetch(lastPageHref);\n\n          if (!response.ok) throw response;\n          const json = await response.json();\n\n          this.__stopTrackingRumour();\n\n          NucleonElement.Rumour(this.group).share({\n            source: json._links.self.href,\n            data: json,\n          });\n\n          this.__trackRumour();\n\n          return json;\n        },\n      },\n    })\n  );\n\n  constructor() {\n    super();\n    this.page = 'foxy-collection-page foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection pages.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `group` – same as `foxy-collection-pages[group]`;\n   * - `href` – collection page's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-pages[lang]`;\n   * - `item` – will contain `item-tag` when provided with a string value formatted as `page-tag item-tag`.\n   *\n   * Render function will receive `PageRenderer<TPage>` in the first argument.\n   * Uses `foxy-collection-page` by default.\n   */\n  get page(): string | PageRenderer<TPage> {\n    return this.__page;\n  }\n\n  set page(value: string | PageRenderer<TPage>) {\n    if (typeof value === 'string') {\n      const item = value.split(' ').pop();\n      const itemAttribute = item ? `item=\"${item}\"` : '';\n\n      this.__renderPage = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${value}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"$\\{ctx.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n            ${itemAttribute}\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .templates=\\${ctx.templates}\n          >\n          </${value}>\\``\n      ) as PageRenderer<TPage>;\n    } else {\n      this.__renderPage = value;\n    }\n\n    this.__page = value;\n    this.requestUpdate();\n  }\n\n  /** URL of the first page in a collection. */\n  get first(): string {\n    return this.__service.state.context.first;\n  }\n\n  set first(data: string) {\n    this.__service.send({ type: 'SET_FIRST', data });\n  }\n\n  /** Array of all currently loaded pages in a collection. */\n  get pages(): TPage[] {\n    return this.__service.state.context.pages;\n  }\n\n  set pages(data: TPage[]) {\n    this.__service.send({ type: 'SET_PAGES', data });\n  }\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  get group(): string {\n    return this.__group;\n  }\n\n  set group(value: string) {\n    this.__group = value;\n    this.__stopTrackingRumour?.();\n    this.__trackRumour();\n  }\n\n  /** If false, will load pages on scroll. If true, will display a button triggering the process. */\n  get manual(): boolean {\n    return this.__service.state.context.manual;\n  }\n\n  set manual(data: boolean) {\n    this.__service.send({ type: 'SET_MANUAL', data });\n  }\n\n  /**\n   * Checks if this element is in the given state. Available states:\n   *\n   * - `busy` when loading a page;\n   * - `fail` when page load fails;\n   * - `idle` when not loading anything for one of the reasons below:\n   *   - `paused` if waiting for user to scroll further;\n   *     - `manual` when next page load will be triggered by clicking a button;\n   *     - `auto` when next page load will be triggered by scrolling to the observer target;\n   *   - `empty` if collection is empty;\n   *   - `end` if there are no more items in a collection.\n   *\n   * @example element.in({ idle: 'empty' })\n   */\n  in(stateValue: State<Context, Event>['value']): boolean {\n    return this.__service.state.matches(stateValue);\n  }\n\n  /** @readonly */\n  createRenderRoot(): CollectionPages<TPage> {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__fetchEventHandler);\n    this.__createService();\n    this.__trackRumour();\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    const items = this.pages.map(page => ({\n      key: page._links.self.href,\n      href: page._links.self.href,\n    }));\n\n    if (this.__service.state.matches('busy')) {\n      items.push({ key: 'stalled', href: 'foxy://collection-pages/stall' });\n    } else if (this.__service.state.matches('fail')) {\n      items.push({ key: 'failed', href: 'foxy://collection-pages/fail' });\n    } else if (this.__service.state.matches({ idle: 'empty' })) {\n      items.push({ key: 'empty', href: '' });\n    }\n\n    return html`\n      <!-- collection items -->\n      ${repeat(\n        items,\n        page => page.key,\n        (page, pageIndex) => {\n          return this.__renderPage({\n            disabledControls: this.disabledControls,\n            readonlyControls: this.readonlyControls,\n            hiddenControls: this.hiddenControls,\n            templates: this.templates,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            hidden: this.hidden,\n            group: this.group,\n            data: this.pages[pageIndex] ?? null,\n            href: page.href,\n            lang: this.lang,\n            ns: this.ns,\n            html,\n          });\n        }\n      )}\n      ${this.manual\n        ? this.in({ idle: 'paused' })\n          ? html`\n              <!-- manual trigger -->\n              <vaadin-button theme=\"small contrast\" @click=${() => this.__service.send('RESUME')}>\n                <foxy-i18n lang=${this.lang} key=\"load_more\" ns=${this.ns}></foxy-i18n>\n              </vaadin-button>\n            `\n          : ''\n        : html`\n            <!-- intersection observer target -->\n            <span></span>\n          `}\n    `;\n  }\n\n  /** @readonly */\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.dispatchEvent(new NucleonElement.UpdateEvent());\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__fetchEventHandler);\n    this.__service.stop();\n    this.__stopTrackingRumour?.();\n  }\n\n  private __trackRumour() {\n    this.__stopTrackingRumour = NucleonElement.Rumour(this.group).track(update => {\n      try {\n        if (this.pages.length === 0) {\n          update({ _links: { self: { href: this.first } } });\n        } else {\n          this.pages.map(page => update(page));\n        }\n      } catch (err) {\n        if (err instanceof Rumour.UpdateError) {\n          this.__service.send({ type: 'SET_FIRST', data: this.first });\n        } else {\n          throw err;\n        }\n      }\n    });\n  }\n\n  private __createService() {\n    this.__service\n      .onTransition(({ changed }) => changed && this.requestUpdate())\n      .onChange(() => this.requestUpdate())\n      .start();\n  }\n\n  private __handleFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-pages/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-pages/fail') return this.__failRequest(event);\n\n    this.__respondIfPossible(event);\n  }\n\n  private __respondIfPossible(event: FetchEvent) {\n    const cacheResponse = serveFromCache(event.request.url, this.pages);\n    if (!cacheResponse.ok) return;\n\n    event.respondWith(Promise.resolve(cacheResponse));\n    console.debug(\n      `%c@foxy.io/elements::${this.localName}\\n%c200%c GET ${event.request.url}`,\n      'color: gray',\n      `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`,\n      ''\n    );\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(this.__service.state.context.error as Response));\n  }\n}\n"]}
+{"version":3,"file":"CollectionPages.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/CollectionPages.ts"],"names":[],"mappings":"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","sourcesContent":["import { Context, Event, Page, PageRenderer } from './types';\nimport { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport { State, StateMachine, interpret } from 'xstate';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rumour } from '@foxy.io/sdk/core';\nimport { machine } from './machine';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { serveFromCache } from '../NucleonElement/serveFromCache';\nimport { spread } from '@open-wc/lit-helpers';\n\n/**\n * Renders an element for each page in a collection.\n *\n * @fires NucleonElement#update - Instance of `NucleonElement.UpdateEvent`. Dispatched on an element whenever it changes its state.\n * @fires NucleonElement#fetch - Instance of `NucleonElement.API.FetchEvent`. Emitted before each API request.\n *\n * @element foxy-collection-pages\n * @since 1.1.0\n */\nexport class CollectionPages<TPage extends Page> extends ConfigurableMixin(LitElement) {\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      manual: { type: Boolean, reflect: true },\n      first: { type: String, noAccessor: true },\n      pages: { type: Array, noAccessor: true },\n      group: { type: String },\n      props: { type: Object },\n      lang: { type: String },\n      page: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  /** Spread directive argument from `@open-wc/lit-helpers` (properties, event listeners and attributes you'd like to pass to the page element). */\n  props: Record<string, unknown> = {};\n\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang = '';\n\n  ns = '';\n\n  private __renderPage!: PageRenderer<TPage>;\n\n  private __page!: string | PageRenderer<TPage>;\n\n  private __group = '';\n\n  private __stopTrackingRumour!: () => void;\n\n  private __fetchEventHandler = (evt: unknown) => this.__handleFetchEvent(evt);\n\n  private __service = interpret(\n    (machine as unknown as StateMachine<Context<TPage>, any, Event<TPage>>).withConfig({\n      services: {\n        observeChildren: () => callback => {\n          const observer = new IntersectionObserver(entries => {\n            if (entries.some(entry => entry.isIntersecting)) callback('RESUME');\n          });\n\n          observer.observe(this.renderRoot.children[this.renderRoot.children.length - 1]);\n          return () => observer.disconnect();\n        },\n\n        sendGet: async ctx => {\n          const lastPage = ctx.pages[ctx.pages.length - 1];\n          const lastPageHref = lastPage?._links.next.href ?? ctx.first;\n          const response = await new NucleonElement.API(this).fetch(lastPageHref);\n\n          if (!response.ok) throw response;\n          const json = await response.json();\n\n          this.__stopTrackingRumour();\n\n          NucleonElement.Rumour(this.group).share({\n            source: json._links.self.href,\n            data: json,\n          });\n\n          this.__trackRumour();\n\n          return json;\n        },\n      },\n    })\n  );\n\n  constructor() {\n    super();\n    this.page = 'foxy-collection-page foxy-null';\n  }\n\n  /**\n   * Custom element tag or a render function to use for displaying collection pages.\n   * Generated custom elements will have the following attributes:\n   *\n   * - `group` – same as `foxy-collection-pages[group]`;\n   * - `href` – collection page's `_links.self.href` value;\n   * - `lang` – same as `foxy-collection-pages[lang]`;\n   * - `item` – will contain `item-tag` when provided with a string value formatted as `page-tag item-tag`.\n   *\n   * Render function will receive `PageRenderer<TPage>` in the first argument.\n   * Uses `foxy-collection-page` by default.\n   */\n  get page(): string | PageRenderer<TPage> {\n    return this.__page;\n  }\n\n  set page(value: string | PageRenderer<TPage>) {\n    if (typeof value === 'string') {\n      const item = value.split(' ').pop();\n      const itemAttribute = item ? `item=\"${item}\"` : '';\n\n      this.__renderPage = new Function(\n        'ctx',\n        `return ctx.html\\`\n          <${value}\n            disabledcontrols=\\${ctx.disabledControls.toString()}\n            readonlycontrols=\\${ctx.readonlyControls.toString()}\n            hiddencontrols=\\${ctx.hiddenControls.toString()}\n            group=\\${ctx.group}\n            href=\\${ctx.href}\n            lang=\\${ctx.lang}\n            ns=\"$\\{ctx.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n            ${itemAttribute}\n            ?disabled=\\${ctx.disabled}\n            ?readonly=\\${ctx.readonly}\n            ?hidden=\\${ctx.hidden}\n            .templates=\\${ctx.templates}\n            ...=\\${ctx.spread(ctx.props)}\n          >\n          </${value}>\\``\n      ) as PageRenderer<TPage>;\n    } else {\n      this.__renderPage = value;\n    }\n\n    this.__page = value;\n    this.requestUpdate();\n  }\n\n  /** URL of the first page in a collection. */\n  get first(): string {\n    return this.__service.state.context.first;\n  }\n\n  set first(data: string) {\n    this.__service.send({ type: 'SET_FIRST', data });\n  }\n\n  /** Array of all currently loaded pages in a collection. */\n  get pages(): TPage[] {\n    return this.__service.state.context.pages;\n  }\n\n  set pages(data: TPage[]) {\n    this.__service.send({ type: 'SET_PAGES', data });\n  }\n\n  /** Rumour group. Elements in different groups will not share updates. Empty by default. */\n  get group(): string {\n    return this.__group;\n  }\n\n  set group(value: string) {\n    this.__group = value;\n    this.__stopTrackingRumour?.();\n    this.__trackRumour();\n  }\n\n  /** If false, will load pages on scroll. If true, will display a button triggering the process. */\n  get manual(): boolean {\n    return this.__service.state.context.manual;\n  }\n\n  set manual(data: boolean) {\n    this.__service.send({ type: 'SET_MANUAL', data });\n  }\n\n  /**\n   * Checks if this element is in the given state. Available states:\n   *\n   * - `busy` when loading a page;\n   * - `fail` when page load fails;\n   * - `idle` when not loading anything for one of the reasons below:\n   *   - `paused` if waiting for user to scroll further;\n   *     - `manual` when next page load will be triggered by clicking a button;\n   *     - `auto` when next page load will be triggered by scrolling to the observer target;\n   *   - `empty` if collection is empty;\n   *   - `end` if there are no more items in a collection.\n   *\n   * @example element.in({ idle: 'empty' })\n   */\n  in(stateValue: State<Context, Event>['value']): boolean {\n    return this.__service.state.matches(stateValue);\n  }\n\n  /** @readonly */\n  createRenderRoot(): CollectionPages<TPage> {\n    return this;\n  }\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('fetch', this.__fetchEventHandler);\n    this.__createService();\n    this.__trackRumour();\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    const items = this.pages.map(page => ({\n      key: page._links.self.href,\n      href: page._links.self.href,\n    }));\n\n    if (this.__service.state.matches('busy')) {\n      items.push({ key: 'stalled', href: 'foxy://collection-pages/stall' });\n    } else if (this.__service.state.matches('fail')) {\n      items.push({ key: 'failed', href: 'foxy://collection-pages/fail' });\n    } else if (this.__service.state.matches({ idle: 'empty' })) {\n      items.push({ key: 'empty', href: '' });\n    }\n\n    return html`\n      <!-- collection items -->\n      ${repeat(\n        items,\n        page => page.key,\n        (page, pageIndex) => {\n          return this.__renderPage({\n            disabledControls: this.disabledControls,\n            readonlyControls: this.readonlyControls,\n            hiddenControls: this.hiddenControls,\n            templates: this.templates,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            hidden: this.hidden,\n            spread: spread,\n            props: this.props,\n            group: this.group,\n            data: this.pages[pageIndex] ?? null,\n            href: page.href,\n            lang: this.lang,\n            ns: this.ns,\n            html,\n          });\n        }\n      )}\n      ${this.manual\n        ? this.in({ idle: 'paused' })\n          ? html`\n              <!-- manual trigger -->\n              <vaadin-button theme=\"small contrast\" @click=${() => this.__service.send('RESUME')}>\n                <foxy-i18n lang=${this.lang} key=\"load_more\" ns=${this.ns}></foxy-i18n>\n              </vaadin-button>\n            `\n          : ''\n        : html`\n            <!-- intersection observer target -->\n            <span></span>\n          `}\n    `;\n  }\n\n  /** @readonly */\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.dispatchEvent(new NucleonElement.UpdateEvent());\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('fetch', this.__fetchEventHandler);\n    this.__service.stop();\n    this.__stopTrackingRumour?.();\n  }\n\n  private __trackRumour() {\n    this.__stopTrackingRumour = NucleonElement.Rumour(this.group).track(update => {\n      try {\n        if (this.pages.length === 0) {\n          update({ _links: { self: { href: this.first } } });\n        } else {\n          this.pages.map(page => update(page));\n        }\n      } catch (err) {\n        if (err instanceof Rumour.UpdateError) {\n          this.__service.send({ type: 'SET_FIRST', data: this.first });\n        } else {\n          throw err;\n        }\n      }\n    });\n  }\n\n  private __createService() {\n    this.__service\n      .onTransition(({ changed }) => changed && this.requestUpdate())\n      .onChange(() => this.requestUpdate())\n      .start();\n  }\n\n  private __handleFetchEvent(event: unknown) {\n    if (!(event instanceof FetchEvent) || event.target === this) return;\n    const { method, url } = event.request;\n\n    if (method !== 'GET') return;\n    if (url === 'foxy://collection-pages/stall') return this.__stallRequest(event);\n    if (url === 'foxy://collection-pages/fail') return this.__failRequest(event);\n\n    this.__respondIfPossible(event);\n  }\n\n  private __respondIfPossible(event: FetchEvent) {\n    const cacheResponse = serveFromCache(event.request.url, this.pages);\n    if (!cacheResponse.ok) return;\n\n    event.respondWith(Promise.resolve(cacheResponse));\n    console.debug(\n      `%c@foxy.io/elements::${this.localName}\\n%c200%c GET ${event.request.url}`,\n      'color: gray',\n      `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`,\n      ''\n    );\n  }\n\n  private __stallRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(new Promise(() => void 0));\n  }\n\n  private __failRequest(event: FetchEvent) {\n    event.stopImmediatePropagation();\n    event.respondWith(Promise.resolve(this.__service.state.context.error as Response));\n  }\n}\n"]}

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

@@ -1,6 +1,7 @@
 import { TemplateResult, html } from 'lit-html';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { Renderer } from '../../../mixins/configurable';
+import { spread } from '@open-wc/lit-helpers';
 export declare type Page = {
     _links: {
         next: {
@@ -44,6 +45,8 @@ export declare type PageRendererContext<TPage extends Page = Page> = {
     readonly: boolean;
     disabled: boolean;
     hidden: boolean;
+    spread: typeof spread;
+    props: Record<string, unknown>;
     group: string;
     html: typeof html;
     href: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { Renderer } from '../../../mixins/configurable';\n\nexport type Page = {\n  _links: { next: { href: string }; self: { href: string } };\n  returned_items: number;\n  total_items: number;\n  limit: number;\n};\n\nexport type Context<TPage extends Page = Page> = {\n  first: string;\n  pages: TPage[];\n  error: Response | null;\n  manual: boolean;\n};\n\nexport type ResumeEvent = {\n  type: 'RESUME';\n};\n\nexport type SetPagesEvent<TPage extends Page = Page> = {\n  type: 'SET_PAGES';\n  data: TPage[];\n};\n\nexport type SetFirstEvent = {\n  type: 'SET_FIRST';\n  data: string;\n};\n\nexport type SetManualEvent = {\n  type: 'SET_MANUAL';\n  data: boolean;\n};\n\nexport type Event<TPage extends Page = Page> =\n  | SetPagesEvent<TPage>\n  | SetFirstEvent\n  | SetManualEvent\n  | ResumeEvent;\n\nexport type PageRendererContext<TPage extends Page = Page> = {\n  readonlyControls: BooleanSelector;\n  disabledControls: BooleanSelector;\n  hiddenControls: BooleanSelector;\n  templates: Partial<Record<string, Renderer<any>>>;\n  readonly: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  group: string;\n  html: typeof html;\n  href: string;\n  lang: string;\n  data: TPage | null;\n  ns: string;\n};\n\nexport type PageRenderer<TPage extends Page = Page> = (\n  context: PageRendererContext<TPage>\n) => TemplateResult;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CollectionPages/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { Renderer } from '../../../mixins/configurable';\nimport { spread } from '@open-wc/lit-helpers';\n\nexport type Page = {\n  _links: { next: { href: string }; self: { href: string } };\n  returned_items: number;\n  total_items: number;\n  limit: number;\n};\n\nexport type Context<TPage extends Page = Page> = {\n  first: string;\n  pages: TPage[];\n  error: Response | null;\n  manual: boolean;\n};\n\nexport type ResumeEvent = {\n  type: 'RESUME';\n};\n\nexport type SetPagesEvent<TPage extends Page = Page> = {\n  type: 'SET_PAGES';\n  data: TPage[];\n};\n\nexport type SetFirstEvent = {\n  type: 'SET_FIRST';\n  data: string;\n};\n\nexport type SetManualEvent = {\n  type: 'SET_MANUAL';\n  data: boolean;\n};\n\nexport type Event<TPage extends Page = Page> =\n  | SetPagesEvent<TPage>\n  | SetFirstEvent\n  | SetManualEvent\n  | ResumeEvent;\n\nexport type PageRendererContext<TPage extends Page = Page> = {\n  readonlyControls: BooleanSelector;\n  disabledControls: BooleanSelector;\n  hiddenControls: BooleanSelector;\n  templates: Partial<Record<string, Renderer<any>>>;\n  readonly: boolean;\n  disabled: boolean;\n  hidden: boolean;\n  spread: typeof spread;\n  props: Record<string, unknown>;\n  group: string;\n  html: typeof html;\n  href: string;\n  lang: string;\n  data: TPage | null;\n  ns: string;\n};\n\nexport type PageRenderer<TPage extends Page = Page> = (\n  context: PageRendererContext<TPage>\n) => TemplateResult;\n"]}