npm - @foxy.io/elements - Versions diffs - 1.15.0-beta.8 → 1.16.0-beta.10 - Mend

@foxy.io/elements 1.15.0-beta.8 → 1.16.0-beta.10

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ErrorEntryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ErrorEntryCard/ErrorEntryCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGlF,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AACtC,OAAO,EAAE,KAAK,EAAE,qCAAkC;AAClD,OAAO,EAAE,cAAc,EAAE,mCAAgC;AACzD,OAAO,EAAE,cAAc,EAAE,4BAAyB;AAClD,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kBAAkB,CAAC;AAC9B,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAExF;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAU;IAA9C;;QAmBE;;;WAGG;QACH,SAAI,GAAG,KAAK,CAAC;IA2Lf,CAAC;IAjNC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,mBAAmB,EAAE,cAAc;YACnC,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC;YAClD,aAAa,EAAE,QAAQ;YACvB,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,SAAS,EAAE,KAAK;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;SACvC,CAAC;IACJ,CAAC;IAQD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;QAE/B,IAAI,IAAI,EAAE;YACR,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;YAC5B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,OAAO,IAAI,CAAA;;sBAEK,MAAM;;;kBAGV,IAAI;oBACF,IAAI,CAAC,cAAc;;;;;;;sBAOjB,QAAQ,CAAC;gBACf,8CAA8C,EAAE,IAAI;gBACpD,iBAAiB,EAAE,UAAU,IAAI,CAAC,IAAI;gBACtC,gBAAgB,EAAE,CAAC,UAAU;gBAC7B,cAAc,EAAE,UAAU,IAAI,IAAI;gBAClC,KAAK,EAAE,CAAC,IAAI;aACb,CAAC;;gBAEA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;;;;YAI9B,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;;OAE3C,CAAC;SACH;aAAM;YACL,OAAO,IAAI,CAAA;;sBAEK,MAAM;;;;;;;;oBAQR,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;mBACtD,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,EAAE;;;;OAIjB,CAAC;SACH;IACH,CAAC;IAEO,uBAAuB,CAAC,SAAiB,EAAE,UAAkB;QACnE,MAAM,MAAM,GAAG,SAAS,IAAI,UAAU,CAAC;QACvC,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9D,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QAE1C,OAAO,IAAI,CAAA;;uFAEwE,MAAM;4BACjE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;;KAEnE,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,QAAgB;QACvC,OAAO,IAAI,CAAA;;;;;eAKA,QAAQ;;;UAGb,QAAQ;;KAEb,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,IAAU;QAChC,OAAO,IAAI,CAAA;;wCAEyB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;iCAGlC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc;;oBAE5D,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;iBAC/C,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE;;;;;oBAKF,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;iBAC/C,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE;;;;;kBAKJ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;UACnC,IAAI,CAAC,aAAa;;KAEvB,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,IAAU;QAChC,OAAO,IAAI,CAAA;;;0CAG2B,IAAI,CAAC,IAAI,qBAAqB,IAAI,CAAC,EAAE;;;;kDAI7B,IAAI,CAAC,GAAG;gBAC1C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;;;cAG3D,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW;YACnC,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC;YACjE,CAAC,CAAC,EAAE;;;;;0CAKwB,IAAI,CAAC,IAAI,oBAAoB,IAAI,CAAC,EAAE;;;;gBAI9D,IAAI,CAAC,UAAU;gBACf,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,UAAU,EAAE;YAChE,CAAC,CAAC,EAAE;;;cAGN,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,UAAU,SAAS,CAAC,CAAC,CAAC,EAAE;;;;UAIvF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE;YAClD,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAAE,OAAO,EAAE,CAAC;YAE9D,OAAO,IAAI,CAAA;;8CAEyB,IAAI,CAAC,IAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE;;;;;uBAKrE,IAAI,CAAC,IAAI;uBACT,IAAI,CAAC,IAAI;qBACX,IAAI,CAAC,EAAE;;;;WAIjB,CAAC;QACJ,CAAC,CAAC;;KAEL,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,KAAY;;QACjC,MAAM,OAAO,GAAG,KAAK,CAAC,MAA4B,CAAC;QAEnD,IAAI,OAAO,CAAC,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,MAAK,KAAK,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;QAED,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC3B,CAAC;IAEO,YAAY,CAAC,IAAY;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACvD,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;QAC7B,OAAO,WAAW,CAAC,KAAK,CAAC;IAC3B,CAAC;CACF","sourcesContent":["import { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { Data } from './types';\nimport { DataList } from './DataList';\nimport { Group } from '../../private/Group/Group';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ResourceViewer } from './ResourceViewer';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'error-entry-card';\nconst Base = TranslatableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement)), NS);\n\n/*\n Displays an ErrorEntry from the Log of FoxyAPI.\n \n @element foxy-error-entry-card\n /\nexport class ErrorEntryCard extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'x-resource-viewer': ResourceViewer,\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'x-data-list': DataList,\n 'iron-icon': customElements.get('iron-icon'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'x-group': Group,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n open: { type: Boolean, reflect: true },\n };\n }\n\n /\n If true, displays the error details.\n * Additionally, sets `form.hide_error` to `true` and submits changes on first view.\n */\n open = false;\n\n render(): TemplateResult {\n const data = this.data;\n const isBusy = this.in('busy');\n\n if (data) {\n const { hide_error } = data;\n const { open } = this;\n\n return html`\n <details\n aria-busy=${isBusy}\n aria-live=\"polite\"\n class=\"text-body w-full\"\n ?open=${open}\n @toggle=${this.__handleToggle}\n >\n <summary\n class=\"rounded-s ring-offset-4 ring-offset-base ring-primary-50 focus-outline-none focus-ring-2\"\n >\n <div\n style=\"padding-left: calc(var(--lumo-space-xs) + var(--lumo-space-s) - 1px)\"\n class=${classMap({\n 'border-l-2 leading-s relative cursor-pointer': true,\n 'border-contrast': hide_error && !open,\n 'border-primary': !hide_error,\n 'border-error': hide_error && open,\n 'h-l': !open,\n })}\n >\n ${this.__renderSummary(data)}\n </div>\n </summary>\n\n ${open ? this.__renderDetails(data) : ''}\n </details>\n `;\n } else {\n return html`\n <div\n aria-busy=${isBusy}\n aria-live=\"polite\"\n style=\"padding-left: calc(var(--lumo-space-xs) + var(--lumo-space-s) - 1px)\"\n class=\"flex items-center justify-center border-l-2 leading-s relative border-contrast-10 h-l\"\n >\n <foxy-spinner\n data-testid=\"spinner\"\n layout=\"horizontal\"\n state=${isBusy ? 'busy' : this.in('fail') ? 'error' : 'empty'}\n lang=${this.lang}\n ns=${this.ns}\n >\n </foxy-spinner>\n </div>\n `;\n }\n }\n\n private __renderGetOrPostValues(getValues: string, postValues: string) {\n const values = getValues \|\| postValues;\n const params = new URLSearchParams(this.__decodeHtml(values));\n const method = getValues ? 'GET' : 'POST';\n\n return html`\n <div class=\"relative leading-xs pt-s\">\n <div class=\"absolute font-semibold right-0 text-tertiary text-xs top-0 mt-s\">${method}</div>\n <x-data-list data=${JSON.stringify(Array.from(params.entries()))}></x-data-list>\n </div>\n `;\n }\n\n private __renderReferrer(referrer: string) {\n return html`\n <span class=\"text-secondary\">Navigated from</span>\n <a\n target=\"_blank\"\n class=\"font-semibold text-primary hover-underline\"\n href=${referrer}\n rel=\"nofollow noopener noreferrer\"\n >\n ${referrer}\n </a>\n `;\n }\n\n private __renderSummary(data: Data) {\n return html`\n <div class=\"text-s absolute right-0 top-0 text-tertiary\">\n <iron-icon icon=\"icons:expand-${this.open ? 'less' : 'more'}\"></iron-icon>\n </div>\n\n <div class=\"text-s mb-xs ${data.hide_error ? 'text-error' : 'text-primary'}\">\n <foxy-i18n\n options=${JSON.stringify({ value: data.date_created })}\n lang=${this.lang}\n key=\"date\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n <foxy-i18n\n options=${JSON.stringify({ value: data.date_created })}\n lang=${this.lang}\n key=\"time\"\n ns=${this.ns}\n >\n </foxy-i18n>\n </div>\n\n <p class=\"${this.open ? '' : 'truncate'} overflow-hidden font-medium\">\n ${data.error_message}\n </p>\n `;\n }\n\n private __renderDetails(data: Data) {\n return html`\n <div class=\"space-y-m pt-m\">\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=\"request\" ns=${this.ns}></foxy-i18n>\n\n <div class=\"mx-xs p-s text-s divide-y divide-contrast-10 space-y-s\">\n <p>\n <span class=\"block font-semibold\">${data.url}</span>\n ${data.referrer ? this.__renderReferrer(data.referrer) : ''}\n </p>\n\n ${data.get_values \|\| data.post_values\n ? this.__renderGetOrPostValues(data.get_values, data.post_values)\n : ''}\n </div>\n </x-group>\n\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=\"client\" ns=${this.ns}></foxy-i18n>\n\n <div class=\"text-s flex flex-col mx-xs p-s\">\n <span class=\"font-semibold\">\n ${data.ip_address}\n ${data.ip_country\n ? html`<span class=\"text-tertiary\"> • </span>${data.ip_country}`\n : ''}\n </span>\n\n ${data.user_agent ? html`<span class=\"text-secondary\">${data.user_agent}</span>` : ''}\n </div>\n </x-group>\n\n ${Object.entries(data._links).map(([curie, link]) => {\n if (['self', 'fx:store', 'curies'].includes(curie)) return '';\n\n return html`\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=${curie.substr(3)} ns=${this.ns}>\n </foxy-i18n>\n\n <x-resource-viewer\n class=\"p-s mx-xs\"\n href=${link.href}\n lang=${this.lang}\n ns=${this.ns}\n >\n </x-resource-viewer>\n </x-group>\n `;\n })}\n </div>\n `;\n }\n\n private __handleToggle(event: Event) {\n const details = event.target as HTMLDetailsElement;\n\n if (details.open && this.data?.hide_error === false) {\n this.edit({ hide_error: true });\n this.submit();\n }\n\n this.open = details.open;\n }\n\n private __decodeHtml(html: string) {\n const areaElement = document.createElement('textarea');\n areaElement.innerHTML = html;\n return areaElement.value;\n }\n}\n"]}
1	+ {"version":3,"file":"ErrorEntryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ErrorEntryCard/ErrorEntryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { Data } from './types';\nimport { DataList } from './DataList';\nimport { Group } from '../../private/Group/Group';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ResourceViewer } from './ResourceViewer';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'error-entry-card';\nconst Base = TranslatableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement)), NS);\n\n/*\n Displays an ErrorEntry from the Log of FoxyAPI.\n \n @element foxy-error-entry-card\n /\nexport class ErrorEntryCard extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'x-resource-viewer': ResourceViewer,\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'x-data-list': DataList,\n 'iron-icon': customElements.get('iron-icon'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'x-group': Group,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n open: { type: Boolean, reflect: true },\n };\n }\n\n /\n If true, displays the error details.\n * Additionally, sets `form.hide_error` to `true` and submits changes on first view.\n */\n open = false;\n\n render(): TemplateResult {\n const data = this.data;\n const isBusy = this.in('busy');\n\n if (data) {\n const { hide_error } = data;\n const { open } = this;\n\n return html`\n <details\n aria-busy=${isBusy}\n aria-live=\"polite\"\n class=\"text-body w-full\"\n ?open=${open}\n @toggle=${this.__handleToggle}\n >\n <summary\n class=\"rounded-s ring-offset-4 ring-offset-base ring-primary-50 focus-outline-none focus-ring-2\"\n >\n <div\n style=\"padding-left: calc(var(--lumo-space-xs) + var(--lumo-space-s) - 1px)\"\n class=${classMap({\n 'border-l-2 leading-s relative cursor-pointer': true,\n 'border-contrast': hide_error && !open,\n 'border-primary': !hide_error,\n 'border-error': hide_error && open,\n 'h-l': !open,\n })}\n >\n ${this.__renderSummary(data)}\n </div>\n </summary>\n\n ${open ? this.__renderDetails(data) : ''}\n </details>\n `;\n } else {\n return html`\n <div\n aria-busy=${isBusy}\n aria-live=\"polite\"\n style=\"padding-left: calc(var(--lumo-space-xs) + var(--lumo-space-s) - 1px)\"\n class=\"flex items-center justify-center border-l-2 leading-s relative border-contrast-10 h-l\"\n >\n <foxy-spinner\n data-testid=\"spinner\"\n layout=\"horizontal\"\n state=${isBusy ? 'busy' : this.in('fail') ? 'error' : 'empty'}\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n `;\n }\n }\n\n private __renderGetOrPostValues(getValues: string, postValues: string) {\n const values = getValues \|\| postValues;\n const params = new URLSearchParams(this.__decodeHtml(values));\n const method = getValues ? 'GET' : 'POST';\n\n return html`\n <div class=\"relative leading-xs pt-s\">\n <div class=\"absolute font-semibold right-0 text-tertiary text-xs top-0 mt-s\">${method}</div>\n <x-data-list data=${JSON.stringify(Array.from(params.entries()))}></x-data-list>\n </div>\n `;\n }\n\n private __renderReferrer(referrer: string) {\n return html`\n <span class=\"text-secondary\">Navigated from</span>\n <a\n target=\"_blank\"\n class=\"font-semibold text-primary hover-underline\"\n href=${referrer}\n rel=\"nofollow noopener noreferrer\"\n >\n ${referrer}\n </a>\n `;\n }\n\n private __renderSummary(data: Data) {\n return html`\n <div class=\"text-s absolute right-0 top-0 text-tertiary\">\n <iron-icon icon=\"icons:expand-${this.open ? 'less' : 'more'}\"></iron-icon>\n </div>\n\n <div class=\"text-s mb-xs ${data.hide_error ? 'text-error' : 'text-primary'}\">\n <foxy-i18n\n options=${JSON.stringify({ value: data.date_created })}\n lang=${this.lang}\n key=\"date\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n <foxy-i18n\n options=${JSON.stringify({ value: data.date_created })}\n lang=${this.lang}\n key=\"time\"\n ns=${this.ns}\n >\n </foxy-i18n>\n </div>\n\n <p class=\"${this.open ? '' : 'truncate'} overflow-hidden font-medium\">\n ${data.error_message}\n </p>\n `;\n }\n\n private __renderDetails(data: Data) {\n return html`\n <div class=\"space-y-m pt-m\">\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=\"request\" ns=${this.ns}></foxy-i18n>\n\n <div class=\"mx-xs p-s text-s divide-y divide-contrast-10 space-y-s\">\n <p>\n <span class=\"block font-semibold\">${data.url}</span>\n ${data.referrer ? this.__renderReferrer(data.referrer) : ''}\n </p>\n\n ${data.get_values \|\| data.post_values\n ? this.__renderGetOrPostValues(data.get_values, data.post_values)\n : ''}\n </div>\n </x-group>\n\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=\"client\" ns=${this.ns}></foxy-i18n>\n\n <div class=\"text-s flex flex-col mx-xs p-s\">\n <span class=\"font-semibold\">\n ${data.ip_address}\n ${data.ip_country\n ? html`<span class=\"text-tertiary\"> • </span>${data.ip_country}`\n : ''}\n </span>\n\n ${data.user_agent ? html`<span class=\"text-secondary\">${data.user_agent}</span>` : ''}\n </div>\n </x-group>\n\n ${Object.entries(data._links).map(([curie, link]) => {\n if (['self', 'fx:store', 'curies'].includes(curie)) return '';\n\n return html`\n <x-group frame>\n <foxy-i18n slot=\"header\" lang=${this.lang} key=${curie.substr(3)} ns=${this.ns}>\n </foxy-i18n>\n\n <x-resource-viewer\n class=\"p-s mx-xs\"\n href=${link.href}\n lang=${this.lang}\n ns=${this.ns}\n >\n </x-resource-viewer>\n </x-group>\n `;\n })}\n </div>\n `;\n }\n\n private __handleToggle(event: Event) {\n const details = event.target as HTMLDetailsElement;\n\n if (details.open && this.data?.hide_error === false) {\n this.edit({ hide_error: true });\n this.submit();\n }\n\n this.open = details.open;\n }\n\n private __decodeHtml(html: string) {\n const areaElement = document.createElement('textarea');\n areaElement.innerHTML = html;\n return areaElement.value;\n }\n}\n"]}

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

@@ -73,7 +73,7 @@ export class GiftCardCodeForm extends Base {
           data-testid="spinner"
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !this.in('busy') && !this.in('fail'),
+            'opacity-0 pointer-events-none': this.in('idle'),
         })}
         >
           <foxy-spinner
@@ -131,7 +131,7 @@ export class GiftCardCodeForm extends Base {
           .checkValidity=${this.__getValidator('code')}
           .errorMessage=${this.__getErrorMessage('code')}
           .value=${this.form.code}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('code', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('code', true)}
           ?readonly=${this.readonlySelector.matches('code', true)}
           required
           @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
@@ -159,7 +159,7 @@ export class GiftCardCodeForm extends Base {
           .checkValidity=${this.__getValidator('current_balance')}
           .errorMessage=${this.__getErrorMessage('current_balance')}
           .value=${this.form.current_balance}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('current-balance', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('current-balance', true)}
           ?readonly=${this.readonlySelector.matches('current-balance', true)}
           prevent-invalid-input
           has-controls
@@ -189,7 +189,7 @@ export class GiftCardCodeForm extends Base {
           .checkValidity=${this.__getValidator('end_date')}
           .errorMessage=${this.__getErrorMessage('end_date')}
           .value=${this.form.end_date}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('end-date', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('end-date', true)}
           ?readonly=${this.readonlySelector.matches('end-date', true)}
           @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
           @change=${(evt) => {
@@ -233,7 +233,7 @@ export class GiftCardCodeForm extends Base {
         const isTemplateInvalid = isCleanTemplateInvalid || isDirtyTemplateInvalid;
         const isSnaphotInvalid = isCleanSnapshotInvalid || isDirtySnapshotInvalid;
         const isInvalid = isTemplateInvalid || isSnaphotInvalid;
-        const isBusy = this.in('busy');
+        const isIdle = this.in('idle');
         return html `
       <div>
         ${this.renderTemplateOrSlot('create:before')}
@@ -242,7 +242,7 @@ export class GiftCardCodeForm extends Base {
           data-testid="create"
           class="w-full"
           theme="primary success"
-          ?disabled=${isBusy || isInvalid || this.disabledSelector.matches('create', true)}
+          ?disabled=${!isIdle || isInvalid || this.disabledSelector.matches('create', true)}
           @click=${() => this.submit()}
         >
           <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GiftCardCodeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\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 { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-code-form';\nconst Base = ConfigurableMixin(\n ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Form element for creating or editing gift card codes (`fx:gift_card_code`).\n \n @slot code:before\n * @slot code:after\n \n @slot current-balance:before\n * @slot current-balance:after\n \n @slot end-date:before\n * @slot end-date:after\n \n @slot timestamps:before\n * @slot timestamps:after\n \n @slot delete:before\n * @slot delete:after\n \n @slot create:before\n * @slot create:after\n \n @element foxy-gift-card-code-form\n * @since 1.15.0\n */\nexport class GiftCardCodeForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-number-field': customElements.get('vaadin-number-field'),\n 'vaadin-date-picker': customElements.get('vaadin-date-picker'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-button': customElements.get('vaadin-button'),\n\n 'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n\n 'x-property-table': PropertyTable,\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ code: v }) => !!v \|\| 'code_required',\n ({ code: v }) => !v \|\| v.length <= 50 \|\| 'code_too_long',\n ({ current_balance: v }) => !!v \|\| 'current_balance_required',\n ({ current_balance: v }) => !v \|\| !isNaN(v) \|\| 'current_balance_required',\n ];\n }\n\n templates: Templates = {};\n\n render(): TemplateResult {\n return html`\n <div class=\"relative space-y-m\">\n ${this.__isCodeHidden ? null : this.__renderCode()}\n ${this.__isCurrentBalanceHidden ? null : this.__renderCurrentBalance()}\n ${this.__isEndDateHidden ? null : this.__renderEndDate()}\n ${this.__isTimestampsHidden ? null : this.__renderTimestamps()}\n ${this.__isCreateHidden ? null : this.__renderCreate()}\n ${this.__isDeleteHidden ? null : this.__renderDelete()}\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': !this.in('busy') && !this.in('fail'),\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=${this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty'}\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private get __isCodeHidden(): boolean {\n return this.hiddenSelector.matches('code', true);\n }\n\n private get __isCurrentBalanceHidden(): boolean {\n return this.hiddenSelector.matches('current-balance', true);\n }\n\n private get __isEndDateHidden(): boolean {\n return this.hiddenSelector.matches('end-date', true);\n }\n\n private get __isTimestampsHidden(): boolean {\n if (this.hiddenSelector.matches('timestamps', true)) return true;\n return !this.data;\n }\n\n private get __isCreateHidden(): boolean {\n if (this.hiddenSelector.matches('create', true)) return true;\n return !!this.data;\n }\n\n private get __isDeleteHidden(): boolean {\n if (this.hiddenSelector.matches('delete', true)) return true;\n return !this.data;\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 __getValidator(prefix: string) {\n return () => !this.errors.some(err => err.startsWith(prefix));\n }\n\n private __renderCode(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('code:before')}\n\n <vaadin-text-field\n data-testid=\"code\"\n class=\"w-full\"\n label=${this.t('code')}\n .checkValidity=${this.__getValidator('code')}\n .errorMessage=${this.__getErrorMessage('code')}\n .value=${this.form.code}\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('code', true)}\n ?readonly=${this.readonlySelector.matches('code', true)}\n required\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @input=${(evt: CustomEvent) => {\n const newCode = (evt.currentTarget as TextFieldElement).value;\n this.edit({ code: newCode });\n }}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot('code:after')}\n </div>\n `;\n }\n\n private __renderCurrentBalance(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('current-balance:before')}\n\n <vaadin-number-field\n data-testid=\"current-balance\"\n class=\"w-full\"\n label=${this.t('current_balance')}\n min=\"0\"\n .checkValidity=${this.__getValidator('current_balance')}\n .errorMessage=${this.__getErrorMessage('current_balance')}\n .value=${this.form.current_balance}\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('current-balance', true)}\n ?readonly=${this.readonlySelector.matches('current-balance', true)}\n prevent-invalid-input\n has-controls\n required\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @change=${(evt: CustomEvent) => {\n const newCurrentBalance = (evt.currentTarget as TextFieldElement).value;\n this.edit({ current_balance: parseFloat(newCurrentBalance) });\n }}\n >\n </vaadin-number-field>\n\n ${this.renderTemplateOrSlot('current-balance:after')}\n </div>\n `;\n }\n\n private __renderEndDate(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('end-date:before')}\n\n <vaadin-date-picker\n data-testid=\"end-date\"\n class=\"w-full\"\n label=${this.t('end_date')}\n min=\"0\"\n .checkValidity=${this.__getValidator('end_date')}\n .errorMessage=${this.__getErrorMessage('end_date')}\n .value=${this.form.end_date}\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('end-date', true)}\n ?readonly=${this.readonlySelector.matches('end-date', true)}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @change=${(evt: CustomEvent) => {\n const newEndDate = (evt.currentTarget as TextFieldElement).value;\n this.edit({ end_date: newEndDate });\n }}\n >\n </vaadin-date-picker>\n\n ${this.renderTemplateOrSlot('end-date:after')}\n </div>\n `;\n }\n\n private __renderTimestamps(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('timestamps:before')}\n\n <x-property-table\n data-testid=\"timestamps\"\n .items=${(['date_modified', 'date_created'] as const).map(field => ({\n name: this.t(field),\n value: this.data?.[field]\n ? this.t('date', { value: new Date(this.data[field] as string) })\n : '',\n }))}\n >\n </x-property-table>\n\n ${this.renderTemplateOrSlot('timestamps:after')}\n </div>\n `;\n }\n\n private __renderCreate(): TemplateResult {\n const isCleanTemplateInvalid = this.in({ idle: { template: { clean: 'invalid' } } });\n const isDirtyTemplateInvalid = this.in({ idle: { template: { dirty: 'invalid' } } });\n const isCleanSnapshotInvalid = this.in({ idle: { snapshot: { clean: 'invalid' } } });\n const isDirtySnapshotInvalid = this.in({ idle: { snapshot: { dirty: 'invalid' } } });\n const isTemplateInvalid = isCleanTemplateInvalid \|\| isDirtyTemplateInvalid;\n const isSnaphotInvalid = isCleanSnapshotInvalid \|\| isDirtySnapshotInvalid;\n const isInvalid = isTemplateInvalid \|\| isSnaphotInvalid;\n const isBusy = this.in('busy');\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=\"primary success\"\n ?disabled=${isBusy \|\| isInvalid \|\| this.disabledSelector.matches('create', true)}\n @click=${() => this.submit()}\n >\n <foxy-i18n ns=${this.ns} key=\"create\" lang=${this.lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('create:after')}\n </div>\n `;\n }\n\n private __renderDelete(): TemplateResult {\n return html`\n <div>\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=${this.lang}\n ns=${this.ns}\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && this.delete()}\n >\n </foxy-internal-confirm-dialog>\n\n ${this.renderTemplateOrSlot('delete:before')}\n\n <vaadin-button\n data-testid=\"delete\"\n theme=\"primary error\"\n class=\"w-full\"\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('delete', true)}\n @click=${(evt: CustomEvent) => {\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n confirm.show(evt.currentTarget as ButtonElement);\n }}\n >\n <foxy-i18n ns=${this.ns} key=\"delete\" lang=${this.lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('delete:after')}\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"GiftCardCodeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodeForm/GiftCardCodeForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\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 { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-code-form';\nconst Base = ConfigurableMixin(\n ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Form element for creating or editing gift card codes (`fx:gift_card_code`).\n \n @slot code:before\n * @slot code:after\n \n @slot current-balance:before\n * @slot current-balance:after\n \n @slot end-date:before\n * @slot end-date:after\n \n @slot timestamps:before\n * @slot timestamps:after\n \n @slot delete:before\n * @slot delete:after\n \n @slot create:before\n * @slot create:after\n \n @element foxy-gift-card-code-form\n * @since 1.15.0\n */\nexport class GiftCardCodeForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-number-field': customElements.get('vaadin-number-field'),\n 'vaadin-date-picker': customElements.get('vaadin-date-picker'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-button': customElements.get('vaadin-button'),\n\n 'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n\n 'x-property-table': PropertyTable,\n };\n }\n\n static get v8n(): NucleonV8N<Data> {\n return [\n ({ code: v }) => !!v \|\| 'code_required',\n ({ code: v }) => !v \|\| v.length <= 50 \|\| 'code_too_long',\n ({ current_balance: v }) => !!v \|\| 'current_balance_required',\n ({ current_balance: v }) => !v \|\| !isNaN(v) \|\| 'current_balance_required',\n ];\n }\n\n templates: Templates = {};\n\n render(): TemplateResult {\n return html`\n <div class=\"relative space-y-m\">\n ${this.__isCodeHidden ? null : this.__renderCode()}\n ${this.__isCurrentBalanceHidden ? null : this.__renderCurrentBalance()}\n ${this.__isEndDateHidden ? null : this.__renderEndDate()}\n ${this.__isTimestampsHidden ? null : this.__renderTimestamps()}\n ${this.__isCreateHidden ? null : this.__renderCreate()}\n ${this.__isDeleteHidden ? null : this.__renderDelete()}\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': this.in('idle'),\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=${this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty'}\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private get __isCodeHidden(): boolean {\n return this.hiddenSelector.matches('code', true);\n }\n\n private get __isCurrentBalanceHidden(): boolean {\n return this.hiddenSelector.matches('current-balance', true);\n }\n\n private get __isEndDateHidden(): boolean {\n return this.hiddenSelector.matches('end-date', true);\n }\n\n private get __isTimestampsHidden(): boolean {\n if (this.hiddenSelector.matches('timestamps', true)) return true;\n return !this.data;\n }\n\n private get __isCreateHidden(): boolean {\n if (this.hiddenSelector.matches('create', true)) return true;\n return !!this.data;\n }\n\n private get __isDeleteHidden(): boolean {\n if (this.hiddenSelector.matches('delete', true)) return true;\n return !this.data;\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 __getValidator(prefix: string) {\n return () => !this.errors.some(err => err.startsWith(prefix));\n }\n\n private __renderCode(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('code:before')}\n\n <vaadin-text-field\n data-testid=\"code\"\n class=\"w-full\"\n label=${this.t('code')}\n .checkValidity=${this.__getValidator('code')}\n .errorMessage=${this.__getErrorMessage('code')}\n .value=${this.form.code}\n ?disabled=${!this.in('idle') \|\| this.disabledSelector.matches('code', true)}\n ?readonly=${this.readonlySelector.matches('code', true)}\n required\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @input=${(evt: CustomEvent) => {\n const newCode = (evt.currentTarget as TextFieldElement).value;\n this.edit({ code: newCode });\n }}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot('code:after')}\n </div>\n `;\n }\n\n private __renderCurrentBalance(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('current-balance:before')}\n\n <vaadin-number-field\n data-testid=\"current-balance\"\n class=\"w-full\"\n label=${this.t('current_balance')}\n min=\"0\"\n .checkValidity=${this.__getValidator('current_balance')}\n .errorMessage=${this.__getErrorMessage('current_balance')}\n .value=${this.form.current_balance}\n ?disabled=${!this.in('idle') \|\| this.disabledSelector.matches('current-balance', true)}\n ?readonly=${this.readonlySelector.matches('current-balance', true)}\n prevent-invalid-input\n has-controls\n required\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @change=${(evt: CustomEvent) => {\n const newCurrentBalance = (evt.currentTarget as TextFieldElement).value;\n this.edit({ current_balance: parseFloat(newCurrentBalance) });\n }}\n >\n </vaadin-number-field>\n\n ${this.renderTemplateOrSlot('current-balance:after')}\n </div>\n `;\n }\n\n private __renderEndDate(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('end-date:before')}\n\n <vaadin-date-picker\n data-testid=\"end-date\"\n class=\"w-full\"\n label=${this.t('end_date')}\n min=\"0\"\n .checkValidity=${this.__getValidator('end_date')}\n .errorMessage=${this.__getErrorMessage('end_date')}\n .value=${this.form.end_date}\n ?disabled=${!this.in('idle') \|\| this.disabledSelector.matches('end-date', true)}\n ?readonly=${this.readonlySelector.matches('end-date', true)}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @change=${(evt: CustomEvent) => {\n const newEndDate = (evt.currentTarget as TextFieldElement).value;\n this.edit({ end_date: newEndDate });\n }}\n >\n </vaadin-date-picker>\n\n ${this.renderTemplateOrSlot('end-date:after')}\n </div>\n `;\n }\n\n private __renderTimestamps(): TemplateResult {\n return html`\n <div>\n ${this.renderTemplateOrSlot('timestamps:before')}\n\n <x-property-table\n data-testid=\"timestamps\"\n .items=${(['date_modified', 'date_created'] as const).map(field => ({\n name: this.t(field),\n value: this.data?.[field]\n ? this.t('date', { value: new Date(this.data[field] as string) })\n : '',\n }))}\n >\n </x-property-table>\n\n ${this.renderTemplateOrSlot('timestamps:after')}\n </div>\n `;\n }\n\n private __renderCreate(): TemplateResult {\n const isCleanTemplateInvalid = this.in({ idle: { template: { clean: 'invalid' } } });\n const isDirtyTemplateInvalid = this.in({ idle: { template: { dirty: 'invalid' } } });\n const isCleanSnapshotInvalid = this.in({ idle: { snapshot: { clean: 'invalid' } } });\n const isDirtySnapshotInvalid = this.in({ idle: { snapshot: { dirty: 'invalid' } } });\n const isTemplateInvalid = isCleanTemplateInvalid \|\| isDirtyTemplateInvalid;\n const isSnaphotInvalid = isCleanSnapshotInvalid \|\| isDirtySnapshotInvalid;\n const isInvalid = isTemplateInvalid \|\| isSnaphotInvalid;\n const isIdle = this.in('idle');\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=\"primary success\"\n ?disabled=${!isIdle \|\| isInvalid \|\| this.disabledSelector.matches('create', true)}\n @click=${() => this.submit()}\n >\n <foxy-i18n ns=${this.ns} key=\"create\" lang=${this.lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('create:after')}\n </div>\n `;\n }\n\n private __renderDelete(): TemplateResult {\n return html`\n <div>\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=${this.lang}\n ns=${this.ns}\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && this.delete()}\n >\n </foxy-internal-confirm-dialog>\n\n ${this.renderTemplateOrSlot('delete:before')}\n\n <vaadin-button\n data-testid=\"delete\"\n theme=\"primary error\"\n class=\"w-full\"\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('delete', true)}\n @click=${(evt: CustomEvent) => {\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n confirm.show(evt.currentTarget as ButtonElement);\n }}\n >\n <foxy-i18n ns=${this.ns} key=\"delete\" lang=${this.lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('delete:after')}\n </div>\n `;\n }\n}\n"]}

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

@@ -55,20 +55,34 @@ export class GiftCardForm extends Base {
         this.__codesTableColumns = [
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="code" ns=${ctx.ns}></foxy-i18n>`,
-                cell: ctx => html `
-        <vaadin-button
-          theme="tertiary contrast"
-          class="p-0"
-          @click=${(evt) => {
-                    const dialog = this.renderRoot.querySelector('#code-dialog');
-                    const button = evt.currentTarget;
-                    dialog.href = ctx.data._links.self.href;
-                    dialog.show(button);
-                }}
-        >
-          <span class="font-tnum">${ctx.data.code}</span>
-        </vaadin-button>
-      `,
+                cell: ctx => {
+                    const isDisabled = !this.in('idle') || this.disabledSelector.matches('codes', true);
+                    return html `
+          <div class="flex items-center gap-xs">
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              class="p-0"
+              ?disabled=${isDisabled}
+              @click=${(evt) => {
+                        const dialog = this.renderRoot.querySelector('#code-dialog');
+                        const button = evt.currentTarget;
+                        dialog.href = ctx.data._links.self.href;
+                        dialog.show(button);
+                    }}
+            >
+              <span class="font-tnum">${ctx.data.code}</span>
+            </vaadin-button>
+            <foxy-copy-to-clipboard
+              ?disabled=${isDisabled}
+              text=${ctx.data.code}
+              lang=${ctx.lang}
+              ns="${ctx.ns} copy-to-clipboard"
+            >
+            </foxy-copy-to-clipboard>
+          </div>
+        `;
+                },
             },
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="date_created" ns=${ctx.ns}></foxy-i18n>`,
@@ -229,7 +243,7 @@ export class GiftCardForm extends Base {
           label=${this.t('name')}
           .checkValidity=${this.__getValidator('name')}
           .value=${(_a = this.form.name) !== null && _a !== void 0 ? _a : ''}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('name', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('name', true)}
           ?readonly=${this.readonlySelector.matches('name', true)}
           required
           @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
@@ -254,6 +268,7 @@ export class GiftCardForm extends Base {
           item-label-path="label"
           item-value-path="value"
           item-id-path="value"
+          data-testid="currency"
           class="w-full"
           label=${this.t('currency')}
           ?disabled=${!this.in('idle') || this.disabledSelector.matches('currency', true)}
@@ -281,9 +296,12 @@ export class GiftCardForm extends Base {
         ${this.renderTemplateOrSlot('expires:before')}
         <x-frequency-input
-          class="w-full"
-          label=${this.t('expires_after')}
           placeholder=${this.t('select')}
+          data-testid="expires"
+          label=${this.t('expires_after')}
+          class="w-full"
+          lang=${this.lang}
+          ns=${this.ns}
           ?disabled=${!this.in('idle') || this.disabledSelector.matches('expires', true)}
           ?readonly=${this.readonlySelector.matches('expires', true)}
           .value=${(_a = this.form.expires_after) !== null && _a !== void 0 ? _a : ''}
@@ -299,8 +317,8 @@ export class GiftCardForm extends Base {
     `;
     }
     __renderCodes() {
-        var _a;
-        const { disabledSelector, group, data, lang, ns } = this;
+        var _a, _b, _c, _d, _e;
+        const { disabledSelector, readonlySelector, hiddenSelector, group, data, lang, ns } = this;
         const isDisabled = !this.in('idle') || disabledSelector.matches('codes', true);
         const filters = this.__codesTableQuery;
         const url = new URL(data._links['fx:gift_card_codes'].href);
@@ -309,51 +327,51 @@ export class GiftCardForm extends Base {
         const filterButtonLabel = filters === null ? 'filter' : 'clear_filters';
         const filterButtonIcon = `icons:${filters === null ? 'filter-list' : 'clear'}`;
         return html `
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:generate:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:generate:form').toString()}
-        hiddencontrols="save-button ${this.hiddenSelector.zoom('codes:generate:form').toString()}"
-        header="generate"
-        parent=${(_a = data === null || data === void 0 ? void 0 : data._links['fx:generate_codes'].href) !== null && _a !== void 0 ? _a : ''}
-        group=${group}
-        lang=${lang}
-        form="foxy-generate-codes-form"
-        ns=${ns}
-        id="generate-codes-dialog"
-        alert
-        .related=${[url.toString()]}
-      >
-      </foxy-form-dialog>
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:form').toString()}
-        hiddencontrols=${this.hiddenSelector.zoom('codes:form').toString()}
-        header="code"
-        parent=${url.toString()}
-        group=${group}
-        lang=${lang}
-        form="foxy-gift-card-code-form"
-        ns=${ns}
-        id="code-dialog"
-      >
-      </foxy-form-dialog>
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:import:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:import:form').toString()}
-        hiddencontrols="save-button ${this.hiddenSelector.zoom('codes:generate:form').toString()}"
-        header="import"
-        parent=${data._links['fx:gift_card_codes'].href}
-        group=${group}
-        lang=${lang}
-        form="foxy-gift-card-codes-form"
-        ns=${ns}
-        id="import-dialog"
-      >
-      </foxy-form-dialog>
+      <div data-testid="codes">
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:generate:form').toString()}
+          readonlycontrols=${readonlySelector.zoom('codes:generate:form').toString()}
+          hiddencontrols="save-button ${hiddenSelector.zoom('codes:generate:form').toString()}"
+          header="generate"
+          parent=${(_a = data === null || data === void 0 ? void 0 : data._links['fx:generate_codes'].href) !== null && _a !== void 0 ? _a : ''}
+          group=${group}
+          lang=${lang}
+          form="foxy-generate-codes-form"
+          ns=${ns}
+          id="generate-codes-dialog"
+          alert
+          .related=${[url.toString()]}
+        >
+        </foxy-form-dialog>
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:form').toString()}
+          readonlycontrols=${readonlySelector.zoom('codes:form').toString()}
+          hiddencontrols=${hiddenSelector.zoom('codes:form').toString()}
+          header="code"
+          parent=${url.toString()}
+          group=${group}
+          lang=${lang}
+          form="foxy-gift-card-code-form"
+          ns=${ns}
+          id="code-dialog"
+        >
+        </foxy-form-dialog>
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:import:form').toString()}
+          readonlycontrols=${readonlySelector.zoom('codes:import:form').toString()}
+          hiddencontrols="save-button ${hiddenSelector.zoom('codes:import:form').toString()}"
+          header="import"
+          parent=${data._links['fx:gift_card_codes'].href}
+          group=${group}
+          lang=${lang}
+          form="foxy-gift-card-codes-form"
+          ns=${ns}
+          id="import-dialog"
+        >
+        </foxy-form-dialog>
-      <div>
         ${this.renderTemplateOrSlot('codes:before')}
         <div class="flex items-center justify-between mb-xs space-x-s">
@@ -366,6 +384,7 @@ export class GiftCardForm extends Base {
           </foxy-i18n>
           <vaadin-button
+            data-testid="codes:generate-button"
             theme="success tertiary small"
             ?disabled=${isDisabled}
             @click=${(evt) => {
@@ -379,6 +398,7 @@ export class GiftCardForm extends Base {
           </vaadin-button>
           <vaadin-button
+            data-testid="codes:import-button"
             theme="contrast tertiary small"
             ?disabled=${isDisabled}
             @click=${(evt) => {
@@ -392,6 +412,7 @@ export class GiftCardForm extends Base {
           </vaadin-button>
           <vaadin-button
+            data-testid="codes:filter-button"
             theme="contrast ${filters === null ? 'tertiary' : ''} small"
             ?disabled=${isDisabled}
             @click=${() => (this.__codesTableQuery = filters === null ? '' : null)}
@@ -404,7 +425,7 @@ export class GiftCardForm extends Base {
         <foxy-query-builder
           class="bg-contrast-5 rounded-tl-l rounded-tr-s rounded-b-l p-m mb-s"
           lang=${lang}
-          ns=${ns}
+          ns="${ns} ${(_c = (_b = customElements.get('foxy-query-builder')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
           ?disabled=${isDisabled}
           ?hidden=${filters === null}
           .options=${GiftCardForm.__codesQueryOptions}
@@ -416,7 +437,12 @@ export class GiftCardForm extends Base {
         >
         </foxy-query-builder>
-        <foxy-pagination first=${url.toString()} lang=${lang} ns=${ns} ?disabled=${isDisabled}>
+        <foxy-pagination
+          first=${url.toString()}
+          lang=${lang}
+          ns="${ns} ${(_e = (_d = customElements.get('foxy-pagination')) === null || _d === void 0 ? void 0 : _d.defaultNS) !== null && _e !== void 0 ? _e : ''}"
+          ?disabled=${isDisabled}
+        >
           <foxy-table
             class="px-m mb-s border border-contrast-10 rounded-t-l rounded-b-l"
             group=${group}
@@ -450,7 +476,7 @@ export class GiftCardForm extends Base {
             });
         }
         return html `
-      <div>
+      <div data-testid="product-restrictions">
         ${this.renderTemplateOrSlot('product-restrictions:before')}
         <div class="space-y-s">
@@ -478,6 +504,7 @@ export class GiftCardForm extends Base {
                     </foxy-i18n>
                     <x-editable-list
+                      data-testid="product-restrictions:${group.header}"
                       lang=${this.lang}
                       ns=${this.ns}
                       ?disabled=${isDisabled}
@@ -523,51 +550,55 @@ export class GiftCardForm extends Base {
     `;
     }
     __renderCategoryRestrictions() {
-        var _a;
+        var _a, _b, _c;
         const scope = 'category-restrictions';
         const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope, true);
         const isReadonly = this.readonlySelector.matches(scope, true);
+        const giftCardItemCategories = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:gift_card_item_categories'].href;
         return html `
-      ${this.renderTemplateOrSlot('category-restrictions:before')}
+      <div data-testid="category-restrictions">
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
-      <div class="space-y-xs">
-        <foxy-pagination
-          first=${this.__itemCategories}
-          lang=${this.lang}
-          ns=${this.ns}
-          ?disabled=${isDisabled}
-        >
-          <foxy-i18n
-            class="block text-s font-medium text-secondary leading-none mb-s"
+        <div class="space-y-xs">
+          <foxy-pagination
+            first=${this.__itemCategories}
             lang=${this.lang}
-            key="category_restrictions"
-            ns=${this.ns}
+            ns="${this.ns} ${(_c = (_b = customElements.get('foxy-pagination')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
+            ?disabled=${isDisabled}
           >
-          </foxy-i18n>
+            <foxy-i18n
+              class="block text-s font-medium text-secondary leading-none mb-s"
+              lang=${this.lang}
+              key="category_restrictions"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
+            <x-category-restrictions-page
+              gift-card-item-categories=${ifDefined(giftCardItemCategories)}
+              data-testid="category-restrictions:page"
+              gift-card=${this.href}
+              class="border border-contrast-10 rounded-t-l rounded-b-l mb-s"
+              group=${this.group}
+              lang=${this.lang}
+              ns=${this.ns}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+            >
+            </x-category-restrictions-page>
+          </foxy-pagination>
-          <x-category-restrictions-page
-            gift-card-item-categories=${ifDefined((_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:gift_card_item_categories'].href)}
-            gift-card=${this.href}
-            class="border border-contrast-10 rounded-t-l rounded-b-l mb-s"
-            group=${this.group}
+          <foxy-i18n
+            class="block text-xs leading-s text-secondary"
             lang=${this.lang}
+            key="gift_card_category_restrictions_helper_text"
             ns=${this.ns}
-            ?disabled=${isDisabled}
-            ?readonly=${isReadonly}
           >
-          </x-category-restrictions-page>
-        </foxy-pagination>
+          </foxy-i18n>
+        </div>
-        <foxy-i18n
-          class="block text-xs leading-s text-secondary"
-          lang=${this.lang}
-          key="gift_card_category_restrictions_helper_text"
-          ns=${this.ns}
-        >
-        </foxy-i18n>
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
-      ${this.renderTemplateOrSlot('category-restrictions:after')}
     `;
     }
     __renderTimestamps() {
@@ -642,7 +673,7 @@ export class GiftCardForm extends Base {
           data-testid="delete"
           theme="primary error"
           class="w-full"
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('delete', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
           @click=${(evt) => {
             const confirm = this.renderRoot.querySelector('#confirm');
             confirm.show(evt.currentTarget);