npm - @foxy.io/elements - Versions diffs - 1.11.0-beta.3 → 1.11.0-beta.4 - Mend

@foxy.io/elements 1.11.0-beta.3 → 1.11.0-beta.4

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 (95) hide show

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

	@@ -1 +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"]}
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';\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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';\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"]}

package/dist/elements/public/CustomFieldForm/CustomFieldForm.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { Data, Templates } from './types';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { NucleonV8N } from '../NucleonElement/types';
+declare const Base: typeof NucleonElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost> & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Form element for creating or editing custom fields.
+ *
+ * @slot name:before
+ * @slot name:after
+ * @slot value:before
+ * @slot value:after
+ * @slot visibility:before
+ * @slot visibility:after
+ * @slot timestamps:before
+ * @slot timestamps:after
+ * @slot create:before
+ * @slot create:after
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-custom-field-form
+ * @since 1.11.0
+ */
+export declare class CustomFieldForm extends Base<Data> {
+    static get scopedElements(): ScopedElementsMap;
+    static get v8n(): NucleonV8N<Data>;
+    templates: Templates;
+    private readonly __getValidator;
+    private readonly __bindField;
+    private readonly __maybeRenderTextField;
+    private readonly __renderVisibility;
+    private readonly __renderTimestamps;
+    private readonly __renderDelete;
+    private readonly __renderCreate;
+    render(): TemplateResult;
+    disconnectedCallback(): void;
+    private get __confirmDialog();
+    private __getErrorMessage;
+    private __handleKeyDown;
+    private __handleDeleteClick;
+    private __handleConfirmHide;
+}
+export {};

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

@@ -0,0 +1,235 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { PropertyTable } from "../../private/index.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import memoize from 'lodash-es/memoize';
+const NS = 'custom-field-form';
+const Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))), NS);
+/**
+ * Form element for creating or editing custom fields.
+ *
+ * @slot name:before
+ * @slot name:after
+ * @slot value:before
+ * @slot value:after
+ * @slot visibility:before
+ * @slot visibility:after
+ * @slot timestamps:before
+ * @slot timestamps:after
+ * @slot create:before
+ * @slot create:after
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-custom-field-form
+ * @since 1.11.0
+ */
+export class CustomFieldForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+        this.__getValidator = memoize((prefix) => () => {
+            return !this.errors.some(err => err.startsWith(prefix));
+        });
+        this.__bindField = memoize((key) => {
+            return (evt) => {
+                const target = evt.target;
+                this.edit({ [key]: target.value });
+            };
+        });
+        this.__maybeRenderTextField = ({ field }) => {
+            var _a, _b;
+            const bsid = field.replace(/_/, '-');
+            if (this.hiddenSelector.matches(bsid))
+                return '';
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot(`${bsid}:before`)}
+        <vaadin-text-field
+          class="w-full"
+          label=${this.t(field).toString()}
+          value=${ifDefined((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a[field]) === null || _b === void 0 ? void 0 : _b.toString())}
+          error-message=${this.__getErrorMessage(field)}
+          data-testid=${field}
+          .checkValidity=${this.__getValidator(field)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}
+          ?readonly=${this.readonlySelector.matches(bsid)}
+          @input=${this.__bindField(field)}
+          @keydown=${this.__handleKeyDown}
+        >
+        </vaadin-text-field>
+        ${this.renderTemplateOrSlot(`${bsid}:after`)}
+      </div>
+    `;
+        };
+        this.__renderVisibility = () => {
+            const { disabledSelector, form, lang, ns } = this;
+            const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('visibility:before')}
+        <vaadin-checkbox ?checked=${!form.is_hidden} ?disabled=${isDisabled}>
+          <foxy-i18n lang=${lang} key="show_on_receipt" ns=${ns}></foxy-i18n>
+        </vaadin-checkbox>
+        ${this.renderTemplateOrSlot('visibility:after')}
+      </div>
+    `;
+        };
+        this.__renderTimestamps = () => {
+            const items = ['date_modified', 'date_created'].map(field => ({
+                name: this.t(field),
+                value: this.t('date', { value: new Date(this.data[field]) }),
+            }));
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('timestamps:before')}
+        <x-property-table .items=${items} data-testid="timestamps"></x-property-table>
+        ${this.renderTemplateOrSlot('timestamps:after')}
+      </div>
+    `;
+        };
+        this.__renderDelete = () => {
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('delete:before')}
+        <vaadin-button
+          class="w-full"
+          data-testid="delete"
+          theme="error primary"
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
+          @click=${this.__handleDeleteClick}
+        >
+          <foxy-i18n ns=${this.ns} lang=${this.lang} key="delete"></foxy-i18n>
+        </vaadin-button>
+        ${this.renderTemplateOrSlot('delete:after')}
+      </div>
+    `;
+        };
+        this.__renderCreate = () => {
+            const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
+            const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
+            const isValid = isTemplateValid || isSnapshotValid;
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('create:before')}
+        <vaadin-button
+          data-testid="create"
+          class="w-full"
+          theme="success primary"
+          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}
+          @click=${() => this.submit()}
+        >
+          <foxy-i18n ns=${this.ns} lang=${this.lang} key="create"></foxy-i18n>
+        </vaadin-button>
+        ${this.renderTemplateOrSlot('create:after')}
+      </div>
+    `;
+        };
+    }
+    static get scopedElements() {
+        return {
+            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
+            'vaadin-text-field': customElements.get('vaadin-text-field'),
+            'vaadin-checkbox': customElements.get('vaadin-checkbox'),
+            'x-property-table': PropertyTable,
+            'vaadin-button': customElements.get('vaadin-button'),
+            'foxy-i18n': customElements.get('foxy-i18n'),
+            'foxy-spinner': customElements.get('foxy-spinner'),
+        };
+    }
+    static get v8n() {
+        return [
+            ({ value }) => (value && value.length > 0) || 'value_required',
+            ({ value }) => (value && value.length <= 1000) || 'value_too_long',
+            ({ name }) => (name && name.length > 0) || 'name_required',
+            ({ name }) => (name && name.length <= 500) || 'name_too_long',
+        ];
+    }
+    render() {
+        const { hiddenSelector, data, lang, ns } = this;
+        const isBusy = this.in('busy');
+        const isFail = this.in('fail');
+        return html `
+      <foxy-internal-confirm-dialog
+        data-testid="confirm"
+        message="delete_prompt"
+        confirm="delete"
+        cancel="cancel"
+        header="delete"
+        theme="primary error"
+        lang=${lang}
+        ns=${ns}
+        id="confirm"
+        @hide=${this.__handleConfirmHide}
+      >
+      </foxy-internal-confirm-dialog>
+      <div class="relative" aria-busy=${this.in('busy')} aria-live="polite">
+        <div class="grid grid-cols-1 gap-l">
+          ${this.__maybeRenderTextField({ field: 'name' })}
+          ${this.__maybeRenderTextField({ field: 'value' })}
+          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}
+          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}
+          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}
+          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}
+        </div>
+        <div
+          data-testid="spinner"
+          class=${classMap({
+            'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'opacity-0 pointer-events-none': !isBusy && !isFail,
+        })}
+        >
+          <foxy-spinner
+            layout="vertical"
+            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
+            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
+            lang=${lang}
+            ns=${ns}
+          >
+          </foxy-spinner>
+        </div>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        super.disconnectedCallback();
+        (_b = (_a = this.__bindField.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = this.__getValidator.cache).clear) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+    get __confirmDialog() {
+        return this.renderRoot.querySelector('#confirm');
+    }
+    __getErrorMessage(prefix) {
+        const error = this.errors.find(err => err.startsWith(prefix));
+        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
+    }
+    __handleKeyDown(evt) {
+        if (evt.key === 'Enter')
+            this.submit();
+    }
+    __handleDeleteClick(evt) {
+        this.__confirmDialog.show(evt.currentTarget);
+    }
+    __handleConfirmHide(evt) {
+        if (!evt.detail.cancelled)
+            this.delete();
+    }
+}
+//# sourceMappingURL=CustomFieldForm.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"CustomFieldForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/CustomFieldForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'custom-field-form';\nconst Base = TranslatableMixin(\n ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n NS\n);\n\n/**\n * Form element for creating or editing custom fields.\n *\n * @slot name:before\n * @slot name:after\n * @slot value:before\n * @slot value:after\n * @slot visibility:before\n * @slot visibility:after\n * @slot timestamps:before\n * @slot timestamps:after\n * @slot create:before\n * @slot create:after\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-custom-field-form\n * @since 1.11.0\n */\nexport class CustomFieldForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-checkbox': customElements.get('vaadin-checkbox'),\n 'x-property-table': PropertyTable,\n 'vaadin-button': customElements.get('vaadin-button'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ value }) => (value && value.length > 0) || 'value_required',\n ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n ({ name }) => (name && name.length > 0) || 'name_required',\n ({ name }) => (name && name.length <= 500) || 'name_too_long',\n ];\n }\n\n templates: Templates = {};\n\n private readonly __getValidator = memoize((prefix: string) => () => {\n return !this.errors.some(err => err.startsWith(prefix));\n });\n\n private readonly __bindField = memoize((key: keyof Data) => {\n return (evt: CustomEvent) => {\n const target = evt.target as HTMLInputElement;\n this.edit({ [key]: target.value });\n };\n });\n\n private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n const bsid = field.replace(/_/, '-');\n if (this.hiddenSelector.matches(bsid)) return '';\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n <vaadin-text-field\n class=\"w-full\"\n label=${this.t(field).toString()}\n value=${ifDefined(this.form?.[field]?.toString())}\n error-message=${this.__getErrorMessage(field)}\n data-testid=${field}\n .checkValidity=${this.__getValidator(field)}\n ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n ?readonly=${this.readonlySelector.matches(bsid)}\n @input=${this.__bindField(field)}\n @keydown=${this.__handleKeyDown}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot(`${bsid}:after`)}\n </div>\n `;\n };\n\n private readonly __renderVisibility = () => {\n const { disabledSelector, form, lang, ns } = this;\n const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('visibility:before')}\n\n <vaadin-checkbox ?checked=${!form.is_hidden} ?disabled=${isDisabled}>\n <foxy-i18n lang=${lang} key=\"show_on_receipt\" ns=${ns}></foxy-i18n>\n </vaadin-checkbox>\n\n ${this.renderTemplateOrSlot('visibility:after')}\n </div>\n `;\n };\n\n private readonly __renderTimestamps = () => {\n const items = (['date_modified', 'date_created'] as const).map(field => ({\n name: this.t(field),\n value: this.t('date', { value: new Date(this.data![field]) }),\n }));\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('timestamps:before')}\n <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n ${this.renderTemplateOrSlot('timestamps:after')}\n </div>\n `;\n };\n\n private readonly __renderDelete = () => {\n return html`\n <div>\n ${this.renderTemplateOrSlot('delete:before')}\n\n <vaadin-button\n class=\"w-full\"\n data-testid=\"delete\"\n theme=\"error primary\"\n ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n @click=${this.__handleDeleteClick}\n >\n <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('delete:after')}\n </div>\n `;\n };\n\n private readonly __renderCreate = () => {\n const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n const isValid = isTemplateValid || isSnapshotValid;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('create:before')}\n\n <vaadin-button\n data-testid=\"create\"\n class=\"w-full\"\n theme=\"success primary\"\n ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n @click=${() => this.submit()}\n >\n <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('create:after')}\n </div>\n `;\n };\n\n render(): TemplateResult {\n const { hiddenSelector, data, lang, ns } = this;\n const isBusy = this.in('busy');\n const isFail = this.in('fail');\n\n return html`\n <foxy-internal-confirm-dialog\n data-testid=\"confirm\"\n message=\"delete_prompt\"\n confirm=\"delete\"\n cancel=\"cancel\"\n header=\"delete\"\n theme=\"primary error\"\n lang=${lang}\n ns=${ns}\n id=\"confirm\"\n @hide=${this.__handleConfirmHide}\n >\n </foxy-internal-confirm-dialog>\n\n <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n <div class=\"grid grid-cols-1 gap-l\">\n ${this.__maybeRenderTextField({ field: 'name' })}\n ${this.__maybeRenderTextField({ field: 'value' })}\n ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'transition duration-500 ease-in-out absolute inset-0 flex': true,\n 'opacity-0 pointer-events-none': !isBusy && !isFail,\n })}\n >\n <foxy-spinner\n layout=\"vertical\"\n class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n lang=${lang}\n ns=${ns}\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.__bindField.cache.clear?.();\n this.__getValidator.cache.clear?.();\n }\n\n private get __confirmDialog(): InternalConfirmDialog {\n return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n }\n\n private __getErrorMessage(prefix: string) {\n const error = this.errors.find(err => err.startsWith(prefix));\n return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';\n }\n\n private __handleKeyDown(evt: KeyboardEvent) {\n if (evt.key === 'Enter') this.submit();\n }\n\n private __handleDeleteClick(evt: Event) {\n this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n }\n\n private __handleConfirmHide(evt: DialogHideEvent) {\n if (!evt.detail.cancelled) this.delete();\n }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-checkbox';
+import '@vaadin/vaadin-button';
+import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { CustomFieldForm } from './CustomFieldForm';
+export { CustomFieldForm };

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

@@ -0,0 +1,11 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-checkbox';
+import '@vaadin/vaadin-button';
+import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { CustomFieldForm } from "./CustomFieldForm.js";
+customElements.define('foxy-custom-field-form', CustomFieldForm);
+export { CustomFieldForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-checkbox';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { CustomFieldForm } from './CustomFieldForm';\n\ncustomElements.define('foxy-custom-field-form', CustomFieldForm);\n\nexport { CustomFieldForm };\n"]}

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

@@ -0,0 +1,22 @@
+import { CustomFieldForm } from './CustomFieldForm';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.CustomField>;
+export declare type TextFieldParams = {
+    field: keyof Data;
+};
+export declare type Templates = {
+    'name:before'?: Renderer<CustomFieldForm>;
+    'name:after'?: Renderer<CustomFieldForm>;
+    'value:before'?: Renderer<CustomFieldForm>;
+    'value:after'?: Renderer<CustomFieldForm>;
+    'visibility:before'?: Renderer<CustomFieldForm>;
+    'visibility:after'?: Renderer<CustomFieldForm>;
+    'timestamps:before'?: Renderer<CustomFieldForm>;
+    'timestamps:after'?: Renderer<CustomFieldForm>;
+    'delete:before'?: Renderer<CustomFieldForm>;
+    'delete:after'?: Renderer<CustomFieldForm>;
+    'create:before'?: Renderer<CustomFieldForm>;
+    'create:after'?: Renderer<CustomFieldForm>;
+};

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CustomFieldForm } from './CustomFieldForm';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.CustomField>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n 'name:before'?: Renderer<CustomFieldForm>;\n 'name:after'?: Renderer<CustomFieldForm>;\n 'value:before'?: Renderer<CustomFieldForm>;\n 'value:after'?: Renderer<CustomFieldForm>;\n 'visibility:before'?: Renderer<CustomFieldForm>;\n 'visibility:after'?: Renderer<CustomFieldForm>;\n 'timestamps:before'?: Renderer<CustomFieldForm>;\n 'timestamps:after'?: Renderer<CustomFieldForm>;\n 'delete:before'?: Renderer<CustomFieldForm>;\n 'delete:after'?: Renderer<CustomFieldForm>;\n 'create:before'?: Renderer<CustomFieldForm>;\n 'create:after'?: Renderer<CustomFieldForm>;\n};\n"]}

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

@@ -61,6 +61,7 @@ export declare class NucleonElement<TData extends HALJSONResource> extends LitEl
     private __group;
     private __unsubscribeFromRumour;
     private __fetchEventHandler;
+    private __fetchEventQueue;
     private readonly __service;
     /**
      * If network request returns non-2XX code, the entire error response
@@ -135,6 +136,11 @@ 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 */
@@ -156,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

@@ -35,6 +35,7 @@ export class NucleonElement extends LitElement {
         this.related = [];
         this.__href = '';
         this.__group = '';
+        this.__fetchEventQueue = [];
         this.__service = interpret(Nucleon.machine.withConfig({
             services: {
                 sendDelete: () => this._sendDelete(),
@@ -186,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() {
@@ -199,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) {
@@ -233,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;
     }
@@ -255,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();
@@ -292,23 +304,45 @@ 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.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();
     }
 }
 /**