npm - @foxy.io/elements - Versions diffs - 1.11.0-beta.2 → 1.11.0-beta.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/dist/elements/public/DiscountCard/DiscountCard.js ADDED Viewed

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

package/dist/elements/public/DiscountCard/DiscountCard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DiscountCard.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountCard/DiscountCard.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,YAAa,SAAQ,iBAAiB,CAAC,WAAW,EAAE,eAAe,CAAO;IAAvF;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IAmC1B,CAAC;IAjCC,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,EAAE;YACrD,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;oBAER,IAAI,CAAC,SAAS,CAAC;gBACvB,eAAe,EAAE,IAAI,CAAC,iBAAiB;gBACvC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;aACtD,CAAC;iBACK,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE;;;OAGf;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QACxC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACjE,KAAK,CAAC,MAAM,CAAQ,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACtD,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,QAAQ,CAAC;IAClB,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 a discount.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-discount-card\n * @since 1.11.0\n */\nexport class DiscountCard extends TranslatableMixin(TwoLineCard, 'discount-card')<Data> {\n private __currencyDisplay = '';\n\n private __currency = '';\n\n render(): TemplateResult {\n return super.render({\n title: data => html`${data.name} • ${data.code}`,\n subtitle: data => html`\n <foxy-i18n\n options=${JSON.stringify({\n currencyDisplay: this.__currencyDisplay,\n amount: `${Math.abs(data.amount)} ${this.__currency}`,\n })}\n lang=${this.lang}\n key=\"price\"\n ns=${this.ns}\n >\n </foxy-i18n>\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 discount = await super._sendGet();\n const [transaction, store] = await Promise.all([\n super._fetch<Transaction>(discount._links['fx:transaction'].href),\n super._fetch<Store>(discount._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 discount;\n }\n}\n"]}

package/dist/elements/public/DiscountCard/index.d.ts ADDED Viewed

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

package/dist/elements/public/DiscountCard/index.js ADDED Viewed

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

package/dist/elements/public/DiscountCard/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { DiscountCard } from './DiscountCard';\n\ncustomElements.define('foxy-discount-card', DiscountCard);\n\nexport { DiscountCard };\n"]}

package/dist/elements/public/DiscountCard/types.d.ts ADDED Viewed

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

package/dist/elements/public/DiscountCard/types.js ADDED Viewed

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

package/dist/elements/public/DiscountCard/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountCard/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.Discount>;\n"]}

package/dist/elements/public/FormDialog/FormDialog.d.ts CHANGED Viewed

@@ -13,6 +13,8 @@ import { FormRenderer } from './types';
 export declare class FormDialog extends Dialog {
     /** @readonly */
     static get properties(): PropertyDeclarations;
+    /** Optional URI list of the related resources (passed to form). */
+    related: string[];
     /** Optional URL of the collection this resource belongs to (passed to form). */
     parent: string;
     group: string;

package/dist/elements/public/FormDialog/FormDialog.js CHANGED Viewed

@@ -15,6 +15,8 @@ import { UpdateEvent } from "../NucleonElement/UpdateEvent.js";
 export class FormDialog extends Dialog {
     constructor() {
         super(...arguments);
+        /** Optional URI list of the related resources (passed to form). */
+        this.related = [];
         /** Optional URL of the collection this resource belongs to (passed to form). */
         this.parent = '';
         this.group = '';
@@ -54,6 +56,7 @@ export class FormDialog extends Dialog {
             form: { type: String, noAccessor: true },
             group: { type: String },
             parent: { type: String },
+            related: { type: Array },
         };
     }
     /**
@@ -84,6 +87,7 @@ export class FormDialog extends Dialog {
             ?readonly=\${options.dialog.readonly}
             ?hidden=\${options.dialog.hidden}
             .templates=\${options.dialog.templates}
+            .related=\${options.dialog.related}
             @fetch=\${options.handleFetch}
             @update=\${options.handleUpdate}
           >

package/dist/elements/public/FormDialog/FormDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../../src/elements/public/FormDialog/FormDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,IAAI,EAAE,MAAM,aAAa,CAAC;AAEzE,OAAO,EAAE,GAAG,EAAE,iCAA8B;AAC5C,OAAO,EAAE,MAAM,EAAE,uCAAoC;AAErD,OAAO,EAAE,UAAU,EAAE,wCAAqC;AAI1D,OAAO,EAAE,WAAW,EAAE,yCAAsC;AAE5D;;;;;;;;GAQG;AACH,MAAM,OAAO,UAAW,SAAQ,MAAM;IAAtC;;~~QAYE~~,gFAAgF;QAChF,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,EAAE,CAAC;QAEX,6DAA6D;QAC7D,SAAI,GAAG,EAAE,CAAC;QAEF,WAAM,GAAiC,IAAI,CAAC;QAE5C,iBAAY,GAAwB,IAAI,CAAC;QAEzC,kBAAa,GAAG,CAAC,GAAU,EAAE,EAAE;YACrC,IAAI,CAAC,CAAC,GAAG,YAAY,UAAU,CAAC;gBAAE,OAAO;YAEzC,GAAG,CAAC,wBAAwB,EAAE,CAAC;YAC/B,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,GAAG,CAAC,WAAW,CACb,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;gBAC/C,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC;gBACrF,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,CAAC;gBAEnF,IAAI,QAAQ,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,CAAC;oBAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBACjE,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,GAAU,EAAE,EAAE;YACtC,IAAI,CAAC,CAAC,GAAG,YAAY,WAAW,CAAC;gBAAE,OAAO;YAC1C,MAAM,MAAM,GAAG,GAAG,CAAC,MAA+B,CAAC;YAEnD,IAAI,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,CAAC,QAAQ;gBACX,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;oBACrD,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;oBACrD,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;~~IAsFJ~~,CAAC;~~IAtIC~~,gBAAgB;IAChB,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;YACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;~~IAyCD~~;;;;;;OAMG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,IAAI,CAAC,KAAmC;QAC1C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,QAAQ,CAC9B,SAAS,EACT;aACK,KAAK;;+DAE6C,KAAK~~;;;;;;;;;;;;;;;cAetD~~,KAAK,KAAK,CACD,CAAC;SACnB;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;SAC3B;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;IAChB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;eAOA,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;;gBAEJ,CAAC,GAAoB,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;QAI3E,KAAK,CAAC,MAAM,CAAC,GAAG,EAAE;;YAClB,OAAO,IAAI,CAAA,GAAG,MAAA,IAAI,CAAC,YAAY,+CAAjB,IAAI,EAAgB;gBAChC,YAAY,EAAE,IAAI,CAAC,cAAc;gBACjC,WAAW,EAAE,IAAI,CAAC,aAAa;gBAC/B,MAAM,EAAE,IAAI;gBACZ,IAAI;aACL,CAAC,EAAE,CAAC;QACP,CAAC,CAAC;KACH,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK;QAC1B,IAAI,SAAS,EAAE;YACb,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;YACnF,OAAO,CAAC,IAAI,EAAE,CAAC;SAChB;aAAM;YACL,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC9B;IACH,CAAC;IAED,wBAAwB;IACxB,KAAK,CAAC,IAAI;QACP,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAA2B,CAAC,MAAM,EAAE,CAAC;IAC7E,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '../NucleonElement/API';\nimport { Dialog } from '../../private/Dialog/Dialog';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { FormRenderer } from './types';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { UpdateEvent } from '../NucleonElement/UpdateEvent';\n\n/*\n Dialog wrapper for the forms made with NucleonElement.\n \n @fires FormDialog#show - Instance of `FormDialog.ShowEvent`. Dispatched after dialog finishes entry transition.\n * @fires FormDialog#hide - Instance of `FormDialog.HideEvent`. Dispatched after dialog finishes exit transition.\n \n @element foxy-form-dialog\n * @since 1.1.0\n /\nexport class FormDialog extends Dialog {\n /* @readonly /\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n href: { type: String },\n form: { type: String, noAccessor: true },\n group: { type: String },\n parent: { type: String },\n };\n }\n\n /* Optional URL of the collection this resource belongs to (passed to form). /\n parent = '';\n\n group = '';\n\n /* Optional URL of the resource to load (passed to form). /\n href = '';\n\n private __form: string \| null \| FormRenderer = null;\n\n private __renderForm: FormRenderer \| null = null;\n\n private __handleFetch = (evt: Event) => {\n if (!(evt instanceof FetchEvent)) return;\n\n evt.stopImmediatePropagation();\n evt.preventDefault();\n evt.respondWith(\n new API(this).fetch(evt.request).then(response => {\n const wasDeleting = evt.request.url === this.href && evt.request.method === 'DELETE';\n const wasAdding = evt.request.url === this.parent && evt.request.method === 'POST';\n\n if (response.ok && (wasDeleting \|\| wasAdding)) this.open = false;\n return response;\n })\n );\n };\n\n private __handleUpdate = (evt: Event) => {\n if (!(evt instanceof UpdateEvent)) return;\n const target = evt.target as NucleonElement<never>;\n\n this.closable = !target.in('busy');\n this.editable =\n target.in({ idle: { template: { clean: 'valid' } } }) \|\|\n target.in({ idle: { template: { dirty: 'valid' } } }) \|\|\n target.in({ idle: { snapshot: { dirty: 'valid' } } });\n };\n\n /\n Form's custom element tag. Generated custom element will have the following attributes:\n \n - `parent` – same as `foxy-form-dialog[parent]`;\n * - `href` – same as `foxy-form-dialog[href]`;\n * - `lang` – same as `foxy-form-dialog[lang]`;\n /\n get form(): string \| null \| FormRenderer {\n return this.__form;\n }\n\n set form(value: string \| null \| FormRenderer) {\n this.__form = value;\n\n if (typeof value === 'string') {\n this.__renderForm = new Function(\n 'options',\n `return options.html\\`\n <${value}\n id=\"form\"\n ns=\"$\\{options.dialog.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n href=\\${options.dialog.href}\n lang=\\${options.dialog.lang}\n group=\\${options.dialog.group}\n parent=\\${options.dialog.parent}\n disabledcontrols=\\${options.dialog.disabledControls.toString()}\n readonlycontrols=\\${options.dialog.readonlyControls.toString()}\n hiddencontrols=\\${options.dialog.hiddenControls.toString()}\n ?disabled=\\${options.dialog.disabled}\n ?readonly=\\${options.dialog.readonly}\n ?hidden=\\${options.dialog.hidden}\n .templates=\\${options.dialog.templates}\n @fetch=\\${options.handleFetch}\n @update=\\${options.handleUpdate}\n >\n </${value}>\\``\n ) as FormRenderer;\n } else {\n this.__renderForm = value;\n }\n\n this.requestUpdate();\n }\n\n /* @readonly /\n render(): TemplateResult {\n return html`\n <foxy-internal-confirm-dialog\n message=\"undo_message\"\n confirm=\"undo_confirm\"\n cancel=\"undo_cancel\"\n header=\"undo_header\"\n theme=\"error\"\n lang=${this.lang}\n ns=${this.ns}\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && super.hide(true)}\n >\n </foxy-internal-confirm-dialog>\n\n ${super.render(() => {\n return html`${this.__renderForm?.({\n handleUpdate: this.__handleUpdate,\n handleFetch: this.__handleFetch,\n dialog: this,\n html,\n })}`;\n })}\n `;\n }\n\n async hide(cancelled = false): Promise<void> {\n if (cancelled) {\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n confirm.show();\n } else {\n return super.hide(cancelled);\n }\n }\n\n /* Submits the form. */\n async save(): Promise<void> {\n (this.renderRoot.querySelector('#form') as NucleonElement<never>).submit();\n }\n}\n"]}
1	+ {"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../../src/elements/public/FormDialog/FormDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { API } from '../NucleonElement/API';\nimport { Dialog } from '../../private/Dialog/Dialog';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { FormRenderer } from './types';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { UpdateEvent } from '../NucleonElement/UpdateEvent';\n\n/*\n Dialog wrapper for the forms made with NucleonElement.\n \n @fires FormDialog#show - Instance of `FormDialog.ShowEvent`. Dispatched after dialog finishes entry transition.\n * @fires FormDialog#hide - Instance of `FormDialog.HideEvent`. Dispatched after dialog finishes exit transition.\n \n @element foxy-form-dialog\n * @since 1.1.0\n /\nexport class FormDialog extends Dialog {\n /* @readonly /\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n href: { type: String },\n form: { type: String, noAccessor: true },\n group: { type: String },\n parent: { type: String },\n related: { type: Array },\n };\n }\n\n /* Optional URI list of the related resources (passed to form). /\n related: string[] = [];\n\n /* Optional URL of the collection this resource belongs to (passed to form). /\n parent = '';\n\n group = '';\n\n /* Optional URL of the resource to load (passed to form). /\n href = '';\n\n private __form: string \| null \| FormRenderer = null;\n\n private __renderForm: FormRenderer \| null = null;\n\n private __handleFetch = (evt: Event) => {\n if (!(evt instanceof FetchEvent)) return;\n\n evt.stopImmediatePropagation();\n evt.preventDefault();\n evt.respondWith(\n new API(this).fetch(evt.request).then(response => {\n const wasDeleting = evt.request.url === this.href && evt.request.method === 'DELETE';\n const wasAdding = evt.request.url === this.parent && evt.request.method === 'POST';\n\n if (response.ok && (wasDeleting \|\| wasAdding)) this.open = false;\n return response;\n })\n );\n };\n\n private __handleUpdate = (evt: Event) => {\n if (!(evt instanceof UpdateEvent)) return;\n const target = evt.target as NucleonElement<never>;\n\n this.closable = !target.in('busy');\n this.editable =\n target.in({ idle: { template: { clean: 'valid' } } }) \|\|\n target.in({ idle: { template: { dirty: 'valid' } } }) \|\|\n target.in({ idle: { snapshot: { dirty: 'valid' } } });\n };\n\n /\n Form's custom element tag. Generated custom element will have the following attributes:\n \n - `parent` – same as `foxy-form-dialog[parent]`;\n * - `href` – same as `foxy-form-dialog[href]`;\n * - `lang` – same as `foxy-form-dialog[lang]`;\n /\n get form(): string \| null \| FormRenderer {\n return this.__form;\n }\n\n set form(value: string \| null \| FormRenderer) {\n this.__form = value;\n\n if (typeof value === 'string') {\n this.__renderForm = new Function(\n 'options',\n `return options.html\\`\n <${value}\n id=\"form\"\n ns=\"$\\{options.dialog.ns} $\\{customElements.get('${value}')?.defaultNS ?? ''}\"\n href=\\${options.dialog.href}\n lang=\\${options.dialog.lang}\n group=\\${options.dialog.group}\n parent=\\${options.dialog.parent}\n disabledcontrols=\\${options.dialog.disabledControls.toString()}\n readonlycontrols=\\${options.dialog.readonlyControls.toString()}\n hiddencontrols=\\${options.dialog.hiddenControls.toString()}\n ?disabled=\\${options.dialog.disabled}\n ?readonly=\\${options.dialog.readonly}\n ?hidden=\\${options.dialog.hidden}\n .templates=\\${options.dialog.templates}\n .related=\\${options.dialog.related}\n @fetch=\\${options.handleFetch}\n @update=\\${options.handleUpdate}\n >\n </${value}>\\``\n ) as FormRenderer;\n } else {\n this.__renderForm = value;\n }\n\n this.requestUpdate();\n }\n\n /* @readonly /\n render(): TemplateResult {\n return html`\n <foxy-internal-confirm-dialog\n message=\"undo_message\"\n confirm=\"undo_confirm\"\n cancel=\"undo_cancel\"\n header=\"undo_header\"\n theme=\"error\"\n lang=${this.lang}\n ns=${this.ns}\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && super.hide(true)}\n >\n </foxy-internal-confirm-dialog>\n\n ${super.render(() => {\n return html`${this.__renderForm?.({\n handleUpdate: this.__handleUpdate,\n handleFetch: this.__handleFetch,\n dialog: this,\n html,\n })}`;\n })}\n `;\n }\n\n async hide(cancelled = false): Promise<void> {\n if (cancelled) {\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n confirm.show();\n } else {\n return super.hide(cancelled);\n }\n }\n\n /* Submits the form. */\n async save(): Promise<void> {\n (this.renderRoot.querySelector('#form') as NucleonElement<never>).submit();\n }\n}\n"]}

package/dist/elements/public/I18n/I18n.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { StringMap, TOptions } from 'i18next';
 import { FetchEvent } from '../NucleonElement/FetchEvent';
+import { Gateways } from './types';
 declare const I18n_base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
@@ -35,6 +36,15 @@ export declare class I18n extends I18n_base {
      * @example const unsubscribe = I18n.onResourceFetch((ns, lang) => fetch(`path/to/${ns}/${lang}`));
      */
     static onResourceFetch(handler: (ns: string, lang: string) => Promise<Response>): () => void;
+    /**
+     * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`
+     * and `fx:payment_gateways` and call this method to make gateway names available to
+     * elements like `foxy-payment-card`.
+     *
+     * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`
+     * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})
+     */
+    static setGateways({ values }: Gateways): void;
     /** @readonly */
     static get properties(): PropertyDeclarations;
     /**

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

@@ -62,6 +62,19 @@ export class I18n extends TranslatableMixin(LitElement, '') {
         addEventListener('fetch', handleFetch);
         return () => removeEventListener('fetch', handleFetch);
     }
+    /**
+     * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`
+     * and `fx:payment_gateways` and call this method to make gateway names available to
+     * elements like `foxy-payment-card`.
+     *
+     * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`
+     * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})
+     */
+    static setGateways({ values }) {
+        for (const id in values) {
+            this.i18next.addResource('en', 'gateways', `gateways.${id}`, values[id].name);
+        }
+    }
     /** @readonly */
     static get properties() {
         return {

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

	@@ -1 +1 @@
1	- {"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;~~AAC1D~~,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;;~~QAyDE~~;;;WAGG;QACH,YAAO,GAAwB,EAAE,CAAC;QAElC;;;WAGG;QACH,QAAG,GAAG,EAAE,CAAC;IAoBX,CAAC;~~IAhFC~~;;;;;;;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,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,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;IACxE,CAAC;IAED,gBAAgB;IAChB,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,aAAa,+CAAlB,IAAI,EAAmB;IACzB,CAAC;;~~AArFD~~,4FAA4F;AAC5E,eAAU,GAAG,UAAU,CAAC;AAExC,gFAAgF;AAChE,YAAO,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;~~AAoFlE~~,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IAChB,aAAa,EAAE,EAAE,MAAM,EAAE;IACzB,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 { 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 /* @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`${this.t(this.key, { ...this.options, lng: this.lang })}`;\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"]}
1	+ {"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,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;IACxE,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;IACzB,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`${this.t(this.key, { ...this.options, lng: this.lang })}`;\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"]}

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

@@ -1,23 +1,23 @@
 import { date } from "./date.js";
+import { percent } from "./percent.js";
 import { price } from "./price.js";
 import { time } from "./time.js";
+const formatters = {
+    percent,
+    price,
+    date,
+    time,
+};
 /**
  * Chooses the right i18next formatter for the given template.
  * @see https://www.i18next.com/translation-function/formatting
  */
-export const format = (...args) => {
-    var _a, _b, _c;
-    const value = args[0];
-    const formats = (_b = (_a = args[1]) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
-    const language = (_c = args[2]) !== null && _c !== void 0 ? _c : 'en';
-    return formats.reduce((result, format) => {
-        if (format === 'price')
-            return price(result, format, language);
-        if (format === 'date')
-            return date(result, format, language);
-        if (format === 'time')
-            return time(result, format, language);
-        return result;
-    }, value);
+export const format = (value, names = '', lang = 'en', opts = {}) => {
+    const parsedNames = names.split(' ').filter(v => !!v.trim());
+    const applyFormat = (result, name) => {
+        var _a, _b;
+        return (_b = (_a = formatters[name]) === null || _a === void 0 ? void 0 : _a.call(formatters, result, name, lang, opts)) !== null && _b !== void 0 ? _b : result;
+    };
+    return parsedNames.reduce(applyFormat, value);
 };
 //# sourceMappingURL=index.js.map

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

	@@ -1 +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,KAAK,EAAE,mBAAgB;AAChC,OAAO,EAAE,IAAI,EAAE,kBAAe;AAE9B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,CAAC,~~GAAG~~,~~IAAI~~,~~EAAU~~,EAAE~~;;IACxD~~,~~MAAM~~,~~KAAK~~,GAAG,IAAI,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~;~~IACtB~~,MAAM,~~OAAO~~,~~eAAG~~,~~IAAI~~,CAAC,~~CAAC,CAAC,0CAAE,~~KAAK,CAAC,GAAG,~~oCAAK~~,~~EAAE,~~CAAC~~;IAC1C~~,MAAM,~~QAAQ,SAAG,IAAI,~~CAAC,CAAC,CAAC,~~mCAAI~~,~~IAAI~~,CAAC~~;IAEjC~~,~~OAAO,OAAO,~~CAAC,~~MAAM,~~CAAC,CAAC,~~MAAM~~,EAAE,~~MAAM~~,~~EAAE,EAAE~~;~~QACvC~~,~~IAAI,~~MAAM,~~KAAK~~,~~OAAO;YAAE~~,~~OAAO,KAAK,~~CAAC,~~MAAM~~,EAAE,~~MAAM~~,EAAE,~~QAAQ~~,~~CAAC~~,CAAC~~;QAC/D~~,IAAI,~~MAAM~~,~~KAAK~~,MAAM~~;YAAE~~,~~OAAO~~,IAAI,~~CAAC,MAAM,~~EAAE,~~MAAM~~,EAAE,~~QAAQ,CAAC,CAAC;QAC7D,~~IAAI,~~MAAM~~,~~KAAK,~~MAAM~~;YAAE~~,~~OAAO,IAAI,~~CAAC,~~MAAM,EAAE,MAAM,EAAE,QAAQ,~~CAAC,CAAC;~~QAE7D~~,OAAO,~~MAAM~~,CAAC~~;IAChB~~,CAAC,EAAE,KAAK,CAAC,CAAC;~~AACZ~~,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\nimport { date } from './date';\nimport { price } from './price';\nimport { time } from './time';\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 = (~~...args~~): string => {\n const ~~value~~ = ~~args[0];\n const formats = args[1]?.~~split(' ') ?? [];\n const ~~language~~ = ~~args[2] ?? 'en';\n\n return formats.reduce~~((result, ~~format~~) => {\n ~~if (format === 'price')~~ return ~~price~~(result, ~~format~~, ~~language);\n if~~ ~~(format === 'date'~~) ~~return~~ ~~date(~~result~~, format, language)~~;\n ~~if (format === 'time') return time(result, format, language)~~;\n\n return ~~result;\n }~~, value);\n};\n"]}
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"]}

package/dist/elements/public/I18n/format/percent.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { FormatFunction } from 'i18next';
+/**
+ * i18next formatter that presents a fraction as percentage.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export declare const percent: FormatFunction;

package/dist/elements/public/I18n/format/percent.js ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * i18next formatter that presents a fraction as percentage.
+ * @see https://www.i18next.com/translation-function/formatting
+ */
+export const percent = (value, format, lang) => {
+    let result = null;
+    try {
+        if (typeof value === 'number')
+            result = value.toLocaleString(lang, { style: 'percent' });
+    }
+    catch (err) {
+        console.warn(`i18next formatter error: ${err.message}`);
+    }
+    return result || String(value);
+};
+//# sourceMappingURL=percent.js.map

package/dist/elements/public/I18n/format/percent.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"percent.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/percent.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE;IACrE,IAAI,MAAM,GAAkB,IAAI,CAAC;IAEjC,IAAI;QACF,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;KAC1F;IAAC,OAAO,GAAG,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,4BAA4B,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;KACzD;IAED,OAAO,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/**\n * i18next formatter that presents a fraction as percentage.\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const percent: FormatFunction = (value, format, lang): string => {\n let result: string | null = null;\n\n try {\n if (typeof value === 'number') result = value.toLocaleString(lang, { style: 'percent' });\n } catch (err) {\n console.warn(`i18next formatter error: ${err.message}`);\n }\n\n return result || String(value);\n};\n"]}

package/dist/elements/public/I18n/format/price.js CHANGED Viewed

@@ -2,17 +2,19 @@
  * i18next formatter that formats given value as price + currency code (e.g. 9.99 USD) for current locale (e.g. $9,99).
  * @see https://www.i18next.com/translation-function/formatting
  */
-export const price = (value, format, lang) => {
+export const price = (value, format, lang, options) => {
+    var _a;
     try {
         const [amount, currency] = value.split(' ');
         return parseFloat(amount).toLocaleString(lang, {
             maximumFractionDigits: 2,
             minimumFractionDigits: 2,
+            currencyDisplay: (_a = options === null || options === void 0 ? void 0 : options.currencyDisplay) !== null && _a !== void 0 ? _a : 'symbol',
             style: 'currency',
             currency,
         });
     }
-    catch (_a) {
+    catch (_b) {
         return value;
     }
 };

package/dist/elements/public/I18n/format/price.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"price.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/price.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAU,EAAE~~;IACnE~~,IAAI;QACF,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC5C,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE;YAC7C,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;YACxB,KAAK,EAAE,UAAU;YACjB,QAAQ;SACT,CAAC,CAAC;KACJ;IAAC,WAAM;QACN,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/*\n i18next formatter that formats given value as price + currency code (e.g. 9.99 USD) for current locale (e.g. $9,99).\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const price: FormatFunction = (value, format, lang): string => {\n try {\n const [amount, currency] = value.split(' ');\n return parseFloat(amount).toLocaleString(lang, {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n style: 'currency',\n currency,\n });\n } catch {\n return value;\n }\n};\n"]}
1	+ {"version":3,"file":"price.js","sourceRoot":"","sources":["../../../../../src/elements/public/I18n/format/price.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAU,EAAE;;IAC5E,IAAI;QACF,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC5C,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE;YAC7C,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;YACxB,eAAe,QAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,eAAe,mCAAI,QAAQ;YACrD,KAAK,EAAE,UAAU;YACjB,QAAQ;SACT,CAAC,CAAC;KACJ;IAAC,WAAM;QACN,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC","sourcesContent":["import { FormatFunction } from 'i18next';\n\n/*\n i18next formatter that formats given value as price + currency code (e.g. 9.99 USD) for current locale (e.g. $9,99).\n * @see https://www.i18next.com/translation-function/formatting\n */\nexport const price: FormatFunction = (value, format, lang, options): string => {\n try {\n const [amount, currency] = value.split(' ');\n return parseFloat(amount).toLocaleString(lang, {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n currencyDisplay: options?.currencyDisplay ?? 'symbol',\n style: 'currency',\n currency,\n });\n } catch {\n return value;\n }\n};\n"]}

package/dist/elements/public/I18n/types.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare type Gateways = {
+    values: {
+        [key: string]: {
+            name: string;
+        };
+    };
+};

package/dist/elements/public/I18n/types.js ADDED Viewed

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

package/dist/elements/public/I18n/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/I18n/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Gateways = {\n values: {\n [key: string]: { name: string };\n };\n};\n"]}

package/dist/elements/public/NucleonElement/NucleonElement.d.ts CHANGED Viewed

@@ -52,10 +52,16 @@ export declare class NucleonElement<TData extends HALJSONResource> extends LitEl
      * Changing the `parent` attribute will update the value of this property.
      */
     parent: string;
+    /**
+     * Optional URI list of the related resources. If Rumour encounters a related
+     * resource on creation or deletion, it will be reloaded from source.
+     */
+    related: string[];
     private __href;
     private __group;
     private __unsubscribeFromRumour;
     private __fetchEventHandler;
+    private __fetchEventQueue;
     private readonly __service;
     /**
      * If network request returns non-2XX code, the entire error response
@@ -130,12 +136,17 @@ export declare class NucleonElement<TData extends HALJSONResource> extends LitEl
      * @example element.delete()
      */
     delete(): void;
+    /**
+     * Fetches data from `element.href` in background, keeping the edits and v8n errors.
+     * @example element.refresh()
+     */
+    refresh(): void;
     /** @readonly */
     connectedCallback(): void;
     /** @readonly */
     disconnectedCallback(): void;
     /** Sends API request. Throws an error on non-2XX response. */
-    protected _fetch(...args: Parameters<Window['fetch']>): Promise<TData>;
+    protected _fetch<TResult = TData>(...args: Parameters<Window['fetch']>): Promise<TResult>;
     /** POSTs to `element.parent`, shares response with the Rumour group and returns parsed JSON. */
     protected _sendPost(edits: Partial<TData>): Promise<TData>;
     /** GETs `element.href`, shares response with the Rumour group and returns parsed JSON. */
@@ -151,5 +162,7 @@ export declare class NucleonElement<TData extends HALJSONResource> extends LitEl
     private __createServer;
     private __destroyServer;
     private __handleRumourUpdate;
+    private __processFetchEventQueue;
+    private __flushFetchEventQueue;
     private __handleFetchEvent;
 }

package/dist/elements/public/NucleonElement/NucleonElement.js CHANGED Viewed

@@ -28,8 +28,14 @@ export class NucleonElement extends LitElement {
          * Changing the `parent` attribute will update the value of this property.
          */
         this.parent = '';
+        /**
+         * Optional URI list of the related resources. If Rumour encounters a related
+         * resource on creation or deletion, it will be reloaded from source.
+         */
+        this.related = [];
         this.__href = '';
         this.__group = '';
+        this.__fetchEventQueue = [];
         this.__service = interpret(Nucleon.machine.withConfig({
             services: {
                 sendDelete: () => this._sendDelete(),
@@ -54,6 +60,7 @@ export class NucleonElement extends LitElement {
     /** @readonly */
     static get properties() {
         return {
+            related: { type: Array },
             parent: { type: String },
             group: { type: String, noAccessor: true },
             href: { type: String, noAccessor: true },
@@ -180,12 +187,20 @@ export class NucleonElement extends LitElement {
     delete() {
         this.__service.send({ type: 'DELETE' });
     }
+    /**
+     * Fetches data from `element.href` in background, keeping the edits and v8n errors.
+     * @example element.refresh()
+     */
+    refresh() {
+        this.__service.send({ type: 'REFRESH' });
+    }
     /** @readonly */
     connectedCallback() {
         super.connectedCallback();
         this.__createService();
         this.__createRumour();
         this.__createServer();
+        this.__processFetchEventQueue();
     }
     /** @readonly */
     disconnectedCallback() {
@@ -193,6 +208,7 @@ export class NucleonElement extends LitElement {
         this.__destroyService();
         this.__destroyRumour();
         this.__destroyServer();
+        this.__flushFetchEventQueue('parent element was disconnected');
     }
     /** Sends API request. Throws an error on non-2XX response. */
     async _fetch(...args) {
@@ -206,8 +222,9 @@ export class NucleonElement extends LitElement {
         const body = JSON.stringify(edits);
         const data = await this._fetch(this.parent, { body, method: 'POST' });
         const rumour = NucleonElement.Rumour(this.group);
+        const related = [...this.related, this.parent];
         this.__destroyRumour();
-        rumour.share({ data, related: [this.parent], source: data._links.self.href });
+        rumour.share({ data, related, source: data._links.self.href });
         this.__createRumour();
         return data;
     }
@@ -226,7 +243,7 @@ export class NucleonElement extends LitElement {
         const data = await this._fetch(this.href, { body, method: 'PATCH' });
         const rumour = NucleonElement.Rumour(this.group);
         this.__destroyRumour();
-        rumour.share({ data, source: this.href });
+        rumour.share({ data, source: this.href, related: this.related });
         this.__createRumour();
         return data;
     }
@@ -234,8 +251,9 @@ export class NucleonElement extends LitElement {
     async _sendDelete() {
         const data = await this._fetch(this.href, { method: 'DELETE' });
         const rumour = NucleonElement.Rumour(this.group);
+        const related = [...this.related, this.parent];
         this.__destroyRumour();
-        rumour.share({ data: null, source: this.href, related: [this.parent] });
+        rumour.share({ data: null, source: this.href, related });
         this.__createRumour();
         return data;
     }
@@ -247,6 +265,8 @@ export class NucleonElement extends LitElement {
             this.setAttribute('state', [...new Set(flags)].join(' '));
             this.requestUpdate();
             this.dispatchEvent(new UpdateEvent());
+            if (!state.matches('busy'))
+                this.__processFetchEventQueue();
         });
         this.__service.onChange(() => {
             this.requestUpdate();
@@ -284,23 +304,47 @@ export class NucleonElement extends LitElement {
         }
         catch (err) {
             if (err instanceof Rumour.UpdateError) {
-                this.__service.send({ type: 'FETCH' });
+                this.__service.send({ type: 'REFRESH' });
             }
             else {
                 throw err;
             }
         }
     }
+    __processFetchEventQueue() {
+        const api = new NucleonElement.API(this);
+        this.__fetchEventQueue.forEach(event => {
+            const request = event.request;
+            const cacheResponse = serveFromCache(request.url, this.data);
+            const whenResponseReady = cacheResponse.ok ? cacheResponse : api.fetch(request);
+            event.respondWith(Promise.resolve(whenResponseReady));
+            if (cacheResponse.ok) {
+                console.debug(`%c@foxy.io/elements::${this.localName}\n%c200%c GET ${request.url}`, 'color: gray', `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`, '');
+            }
+        });
+        this.__fetchEventQueue = [];
+    }
+    __flushFetchEventQueue(errorMessage) {
+        this.__fetchEventQueue.forEach(event => {
+            event.respondWith(Promise.reject(new Error(errorMessage)));
+        });
+        this.__fetchEventQueue = [];
+    }
     __handleFetchEvent(event) {
         if (!(event instanceof FetchEvent))
             return;
+        if (event.defaultPrevented)
+            return;
         if (event.request.method !== 'GET')
             return;
-        const cacheResponse = serveFromCache(event.request.url, this.data);
-        if (!cacheResponse.ok)
+        if (event.request.url.startsWith('foxy://'))
+            return;
+        if (event.composedPath()[0] === this)
             return;
-        event.respondWith(Promise.resolve(cacheResponse));
-        console.debug(`%c@foxy.io/elements::${this.localName}\n%c200%c GET ${event.request.url}`, 'color: gray', `background: gray; padding: 0 .2em; border-radius: .2em; color: white;`, '');
+        event.preventDefault();
+        this.__fetchEventQueue.push(event);
+        if (!this.in('busy'))
+            this.__processFetchEventQueue();
     }
 }
 /**