npm - @foxy.io/elements - Versions diffs - 1.14.0-beta.7 → 1.14.1 - Mend

@foxy.io/elements 1.14.0-beta.7 → 1.14.1

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

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

@@ -10,9 +10,31 @@ import { classMap } from "../../../utils/class-map.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 const NS = 'email-template-form';
 const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
+/**
+ * Form element for creating or editing email templates (`fx:email_template`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot content:before
+ * @slot content:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-email-template-form
+ * @since 1.14.0
+ */
 export class EmailTemplateForm extends Base {
     constructor() {
         super(...arguments);
+        this.templates = {};
         this.__cacheState = 'idle';
         this.__contentChoice = 'default';
     }
@@ -80,13 +102,17 @@ export class EmailTemplateForm extends Base {
     }
     __renderDescription() {
         var _a, _b;
+        const scope = 'description';
         return html `
       <div>
-        ${this.renderTemplateOrSlot('description:before')}
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
         <vaadin-text-field
+          data-testid=${scope}
           class="w-full mb-s"
-          label=${this.t('description')}
+          label=${this.t(scope)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope)}
+          ?readonly=${this.readonlySelector.matches(scope)}
           .value=${(_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''}
           @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
           @input=${(evt) => {
@@ -95,26 +121,28 @@ export class EmailTemplateForm extends Base {
         >
         </vaadin-text-field>
-        ${this.renderTemplateOrSlot('description:after')}
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
     `;
     }
     __renderContent() {
         return html `
-      <div>
+      <div data-testid="content">
         ${this.renderTemplateOrSlot('content:before')}
         <div class="space-y-l">
-          ${this.__renderTabContent('content_text_url', 'content_text', 'text_template')}
-          ${this.__renderTabContent('content_html_url', 'content_html', 'html_template')}
+          ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}
+          ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}
         </div>
         ${this.renderTemplateOrSlot('content:after')}
       </div>
     `;
     }
-    __renderTabContent(urlPath, textPath, header) {
+    __renderContentVariant(urlPath, textPath, header) {
         var _a;
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);
+        const isReadonly = this.readonlySelector.matches('content', true);
         const contentChoice = this.form[urlPath]
             ? 'url'
             : this.form[textPath]
@@ -122,14 +150,21 @@ export class EmailTemplateForm extends Base {
                 : this.__contentChoice;
         return html `
       <x-group frame>
-        <foxy-i18n lang=${this.lang} slot="header" key=${header} ns=${this.ns}></foxy-i18n>
+        <foxy-i18n
+          class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}
+          lang=${this.lang}
+          slot="header"
+          key=${header}
+          ns=${this.ns}
+        >
+        </foxy-i18n>
         <x-choice
-          data-testid="template-type"
+          data-testid="${textPath.replace('_', '-')}-type"
           .value=${contentChoice}
           .items=${['default', 'url', 'clipboard']}
-          ?readonly=${this.readonlySelector.matches('content', true)}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('content', true)}
+          ?readonly=${isReadonly}
+          ?disabled=${isDisabled}
           @change=${(evt) => {
             if (evt instanceof ChoiceChangeEvent) {
                 this.edit({ [textPath]: '', [urlPath]: '' });
@@ -157,9 +192,12 @@ export class EmailTemplateForm extends Base {
           <div slot="url" ?hidden=${contentChoice !== 'url'}>
             <div class="flex items-center mt-0 mb-m">
               <vaadin-text-field
-                data-testid="content_url"
+                data-testid="${textPath.replace('_', '-')}-url"
                 value=${ifDefined(this.form[urlPath])}
                 class="mr-s flex-grow"
+                ?readonly=${isReadonly}
+                ?disabled=${isDisabled}
+                @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
                 @input=${(evt) => {
             const value = evt.currentTarget.value;
             this.edit({ [textPath]: '', [urlPath]: value });
@@ -167,50 +205,50 @@ export class EmailTemplateForm extends Base {
               >
               </vaadin-text-field>
-              ${this.form[urlPath] === ((_a = this.data) === null || _a === void 0 ? void 0 : _a[urlPath])
-            ? html `
-                    <vaadin-button
-                      class="relative"
-                      ?disabled=${this.__cacheState === 'busy'}
-                      @click=${this.__cache}
-                    >
-                      <foxy-i18n
-                        class=${classMap({
-                'relative transition-opacity': true,
-                'opacity-0': this.__cacheState !== 'idle',
-            })}
-                        lang=${this.lang}
-                        key="cache"
-                        ns=${this.ns}
-                      >
-                      </foxy-i18n>
+              <vaadin-button
+                data-testid="${textPath.replace('_', '-')}-cache"
+                class="relative"
+                ?disabled=${isDisabled || this.__cacheState === 'busy'}
+                ?hidden=${isReadonly || this.form[urlPath] !== ((_a = this.data) === null || _a === void 0 ? void 0 : _a[urlPath])}
+                @click=${this.__cache}
+              >
+                <foxy-i18n
+                  class=${classMap({
+            'relative transition-opacity': true,
+            'opacity-0': this.__cacheState !== 'idle',
+        })}
+                  lang=${this.lang}
+                  key="cache"
+                  ns=${this.ns}
+                >
+                </foxy-i18n>
-                      <div
-                        class=${classMap({
-                'absolute inset-0 flex transition-opacity': true,
-                'opacity-0': this.__cacheState === 'idle',
-            })}
-                      >
-                        <foxy-spinner
-                          layout="no-label"
-                          class="m-auto"
-                          state=${this.__cacheState === 'fail' ? 'error' : 'busy'}
-                          lang=${this.lang}
-                          ns=${this.ns}
-                        >
-                        </foxy-spinner>
-                      </div>
-                    </vaadin-button>
-                  `
-            : ''}
+                <div
+                  class=${classMap({
+            'absolute inset-0 flex transition-opacity': true,
+            'opacity-0': this.__cacheState === 'idle',
+        })}
+                >
+                  <foxy-spinner
+                    layout="no-label"
+                    class="m-auto"
+                    state=${this.__cacheState === 'fail' ? 'error' : 'busy'}
+                    lang=${this.lang}
+                    ns=${this.ns}
+                  >
+                  </foxy-spinner>
+                </div>
+              </vaadin-button>
             </div>
           </div>
           <div slot="clipboard" ?hidden=${contentChoice !== 'clipboard'}>
             <vaadin-text-area
+              data-testid="${textPath.replace('_', '-')}-clipboard"
               id="cached-content"
-              data-testid="content"
               class="w-full mb-m"
+              ?readonly=${isReadonly}
+              ?disabled=${isDisabled}
               .value=${this.form[textPath]}
               @input=${(evt) => {
             const value = evt.currentTarget.value;
@@ -224,9 +262,10 @@ export class EmailTemplateForm extends Base {
     `;
     }
     __renderTimestamps() {
+        const scope = 'timestamps';
         return html `
       <div>
-        ${this.renderTemplateOrSlot('timestamps:before')}
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
         <x-property-table
           data-testid="timestamps"
@@ -241,7 +280,7 @@ export class EmailTemplateForm extends Base {
         >
         </x-property-table>
-        ${this.renderTemplateOrSlot('timestamps:after')}
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
     `;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\nexport class EmailTemplateForm extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __cacheState: { attribute: false },\n __contentChoice: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n #cached-content::part(input-field) {\n max-height: 15em;\n }\n `,\n ];\n }\n\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 'foxy-spinner': customElements.get('foxy-spinner'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-text-area': customElements.get('vaadin-text-area'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-property-table': PropertyTable,\n 'x-choice': Choice,\n 'x-group': Group,\n };\n }\n\n private __cacheState: 'idle' \| 'busy' \| 'fail' = 'idle';\n\n private __contentChoice: 'default' \| 'url' \| 'clipboard' = 'default';\n\n render(): TemplateResult {\n const { hiddenSelector, href, lang, ns } = this;\n const action = href ? 'delete' : 'create';\n const isBusy = this.in('busy');\n const isFail = this.in('fail');\n\n return html`\n <div class=\"space-y-m\">\n ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n ${hiddenSelector.matches('timestamps', true) \|\| !href ? '' : this.__renderTimestamps()}\n ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\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} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private __renderDescription() {\n return html`\n <div>\n ${this.renderTemplateOrSlot('description:before')}\n\n <vaadin-text-field\n class=\"w-full mb-s\"\n label=${this.t('description')}\n .value=${this.form?.description ?? ''}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @input=${(evt: CustomEvent) => {\n this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n }}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot('description:after')}\n </div>\n `;\n }\n\n private __renderContent() {\n return html`\n <div>\n ${this.renderTemplateOrSlot('content:before')}\n\n <div class=\"space-y-l\">\n ${this.__renderTabContent('content_text_url', 'content_text', 'text_template')}\n ${this.__renderTabContent('content_html_url', 'content_html', 'html_template')}\n </div>\n\n ${this.renderTemplateOrSlot('content:after')}\n </div>\n `;\n }\n\n private __renderTabContent(\n urlPath: 'content_text_url' \| 'content_html_url',\n textPath: 'content_text' \| 'content_html',\n header: string\n ) {\n const contentChoice = this.form[urlPath]\n ? 'url'\n : this.form[textPath]\n ? 'clipboard'\n : this.__contentChoice;\n\n return html`\n <x-group frame>\n <foxy-i18n lang=${this.lang} slot=\"header\" key=${header} ns=${this.ns}></foxy-i18n>\n\n <x-choice\n data-testid=\"template-type\"\n .value=${contentChoice}\n .items=${['default', 'url', 'clipboard']}\n ?readonly=${this.readonlySelector.matches('content', true)}\n ?disabled=${this.in('busy') \|\| this.disabledSelector.matches('content', true)}\n @change=${(evt: Event) => {\n if (evt instanceof ChoiceChangeEvent) {\n this.edit({ [textPath]: '', [urlPath]: '' });\n this.__contentChoice = evt.detail as 'url' \| 'clipboard' \| 'default';\n }\n }}\n >\n ${['default', 'url', 'clipboard'].map(value => {\n return html`\n <div slot=\"${value}-label\" class=\"py-s leading-s\">\n <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n </foxy-i18n>\n\n <foxy-i18n\n class=\"block text-s opacity-70\"\n lang=${this.lang}\n key=\"template_${value}_explainer\"\n ns=${this.ns}\n >\n </foxy-i18n>\n </div>\n `;\n })}\n\n <div slot=\"url\" ?hidden=${contentChoice !== 'url'}>\n <div class=\"flex items-center mt-0 mb-m\">\n <vaadin-text-field\n data-testid=\"content_url\"\n value=${ifDefined(this.form[urlPath])}\n class=\"mr-s flex-grow\"\n @input=${(evt: CustomEvent) => {\n const value = (evt.currentTarget as TextFieldElement).value;\n this.edit({ [textPath]: '', [urlPath]: value });\n }}\n >\n </vaadin-text-field>\n\n ${this.form[urlPath] === this.data?.[urlPath]\n ? html`\n <vaadin-button\n class=\"relative\"\n ?disabled=${this.__cacheState === 'busy'}\n @click=${this.__cache}\n >\n <foxy-i18n\n class=${classMap({\n 'relative transition-opacity': true,\n 'opacity-0': this.__cacheState !== 'idle',\n })}\n lang=${this.lang}\n key=\"cache\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n <div\n class=${classMap({\n 'absolute inset-0 flex transition-opacity': true,\n 'opacity-0': this.__cacheState === 'idle',\n })}\n >\n <foxy-spinner\n layout=\"no-label\"\n class=\"m-auto\"\n state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n lang=${this.lang}\n ns=${this.ns}\n >\n </foxy-spinner>\n </div>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n\n <div slot=\"clipboard\" ?hidden=${contentChoice !== 'clipboard'}>\n <vaadin-text-area\n id=\"cached-content\"\n data-testid=\"content\"\n class=\"w-full mb-m\"\n .value=${this.form[textPath]}\n @input=${(evt: CustomEvent) => {\n const value = (evt.currentTarget as TextAreaElement).value;\n this.edit({ [textPath]: value, [urlPath]: '' });\n }}\n >\n </vaadin-text-area>\n </div>\n </x-choice>\n </x-group>\n `;\n }\n\n private __renderTimestamps() {\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 __renderAction(action: string) {\n const { disabledSelector, href, lang, ns } = this;\n\n const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n const isDisabled = !this.in('idle') \|\| disabledSelector.matches(action, true);\n const isValid = isTemplateValid \|\| isSnapshotValid;\n\n const handleClick = (evt: Event) => {\n if (action === 'delete') {\n const confirm = this.renderRoot.querySelector('#confirm');\n (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n } else {\n this.submit();\n }\n };\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${action}:before`)}\n\n <foxy-internal-confirm-dialog\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 data-testid=\"confirm\"\n @hide=${(evt: DialogHideEvent) => {\n if (!evt.detail.cancelled) this.delete();\n }}\n >\n </foxy-internal-confirm-dialog>\n\n <vaadin-button\n class=\"w-full\"\n theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}\n data-testid=${action}\n ?disabled=${(this.in({ idle: 'template' }) && !isValid) \|\| isDisabled}\n @click=${handleClick}\n >\n <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot(`${action}:after`)}\n </div>\n `;\n }\n\n private async __cache(): Promise<void> {\n this.__cacheState = 'busy';\n\n try {\n const url = this.data?._links['fx:cache'].href ?? '';\n const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n\n this.__cacheState = response.ok ? 'idle' : 'fail';\n } catch {\n this.__cacheState = 'fail';\n }\n }\n}\n"]}
1	+ {"version":3,"file":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Form element for creating or editing email templates (`fx:email_template`).\n \n @slot description:before\n * @slot description:after\n \n @slot content:before\n * @slot content:after\n \n @slot timestamps:before\n * @slot timestamps:after\n \n @slot create:before\n * @slot create:after\n \n @slot delete:before\n * @slot delete:after\n \n @element foxy-email-template-form\n * @since 1.14.0\n */\nexport class EmailTemplateForm extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __cacheState: { attribute: false },\n __contentChoice: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n #cached-content::part(input-field) {\n max-height: 15em;\n }\n `,\n ];\n }\n\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 'foxy-spinner': customElements.get('foxy-spinner'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-text-area': customElements.get('vaadin-text-area'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-property-table': PropertyTable,\n 'x-choice': Choice,\n 'x-group': Group,\n };\n }\n\n templates: Templates = {};\n\n private __cacheState: 'idle' \| 'busy' \| 'fail' = 'idle';\n\n private __contentChoice: 'default' \| 'url' \| 'clipboard' = 'default';\n\n render(): TemplateResult {\n const { hiddenSelector, href, lang, ns } = this;\n const action = href ? 'delete' : 'create';\n const isBusy = this.in('busy');\n const isFail = this.in('fail');\n\n return html`\n <div class=\"space-y-m\">\n ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n ${hiddenSelector.matches('timestamps', true) \|\| !href ? '' : this.__renderTimestamps()}\n ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\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} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private __renderDescription() {\n const scope = 'description';\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n <vaadin-text-field\n data-testid=${scope}\n class=\"w-full mb-s\"\n label=${this.t(scope)}\n ?disabled=${!this.in('idle') \|\| this.disabledSelector.matches(scope)}\n ?readonly=${this.readonlySelector.matches(scope)}\n .value=${this.form?.description ?? ''}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @input=${(evt: CustomEvent) => {\n this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n }}\n >\n </vaadin-text-field>\n\n ${this.renderTemplateOrSlot(`${scope}:after`)}\n </div>\n `;\n }\n\n private __renderContent() {\n return html`\n <div data-testid=\"content\">\n ${this.renderTemplateOrSlot('content:before')}\n\n <div class=\"space-y-l\">\n ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}\n ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}\n </div>\n\n ${this.renderTemplateOrSlot('content:after')}\n </div>\n `;\n }\n\n private __renderContentVariant(\n urlPath: 'content_text_url' \| 'content_html_url',\n textPath: 'content_text' \| 'content_html',\n header: string\n ) {\n const isDisabled = !this.in('idle') \|\| this.disabledSelector.matches('content', true);\n const isReadonly = this.readonlySelector.matches('content', true);\n const contentChoice = this.form[urlPath]\n ? 'url'\n : this.form[textPath]\n ? 'clipboard'\n : this.__contentChoice;\n\n return html`\n <x-group frame>\n <foxy-i18n\n class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}\n lang=${this.lang}\n slot=\"header\"\n key=${header}\n ns=${this.ns}\n >\n </foxy-i18n>\n\n <x-choice\n data-testid=\"${textPath.replace('_', '-')}-type\"\n .value=${contentChoice}\n .items=${['default', 'url', 'clipboard']}\n ?readonly=${isReadonly}\n ?disabled=${isDisabled}\n @change=${(evt: Event) => {\n if (evt instanceof ChoiceChangeEvent) {\n this.edit({ [textPath]: '', [urlPath]: '' });\n this.__contentChoice = evt.detail as 'url' \| 'clipboard' \| 'default';\n }\n }}\n >\n ${['default', 'url', 'clipboard'].map(value => {\n return html`\n <div slot=\"${value}-label\" class=\"py-s leading-s\">\n <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n </foxy-i18n>\n\n <foxy-i18n\n class=\"block text-s opacity-70\"\n lang=${this.lang}\n key=\"template_${value}_explainer\"\n ns=${this.ns}\n >\n </foxy-i18n>\n </div>\n `;\n })}\n\n <div slot=\"url\" ?hidden=${contentChoice !== 'url'}>\n <div class=\"flex items-center mt-0 mb-m\">\n <vaadin-text-field\n data-testid=\"${textPath.replace('_', '-')}-url\"\n value=${ifDefined(this.form[urlPath])}\n class=\"mr-s flex-grow\"\n ?readonly=${isReadonly}\n ?disabled=${isDisabled}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n @input=${(evt: CustomEvent) => {\n const value = (evt.currentTarget as TextFieldElement).value;\n this.edit({ [textPath]: '', [urlPath]: value });\n }}\n >\n </vaadin-text-field>\n\n <vaadin-button\n data-testid=\"${textPath.replace('_', '-')}-cache\"\n class=\"relative\"\n ?disabled=${isDisabled \|\| this.__cacheState === 'busy'}\n ?hidden=${isReadonly \|\| this.form[urlPath] !== this.data?.[urlPath]}\n @click=${this.__cache}\n >\n <foxy-i18n\n class=${classMap({\n 'relative transition-opacity': true,\n 'opacity-0': this.__cacheState !== 'idle',\n })}\n lang=${this.lang}\n key=\"cache\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n <div\n class=${classMap({\n 'absolute inset-0 flex transition-opacity': true,\n 'opacity-0': this.__cacheState === 'idle',\n })}\n >\n <foxy-spinner\n layout=\"no-label\"\n class=\"m-auto\"\n state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n lang=${this.lang}\n ns=${this.ns}\n >\n </foxy-spinner>\n </div>\n </vaadin-button>\n </div>\n </div>\n\n <div slot=\"clipboard\" ?hidden=${contentChoice !== 'clipboard'}>\n <vaadin-text-area\n data-testid=\"${textPath.replace('_', '-')}-clipboard\"\n id=\"cached-content\"\n class=\"w-full mb-m\"\n ?readonly=${isReadonly}\n ?disabled=${isDisabled}\n .value=${this.form[textPath]}\n @input=${(evt: CustomEvent) => {\n const value = (evt.currentTarget as TextAreaElement).value;\n this.edit({ [textPath]: value, [urlPath]: '' });\n }}\n >\n </vaadin-text-area>\n </div>\n </x-choice>\n </x-group>\n `;\n }\n\n private __renderTimestamps() {\n const scope = 'timestamps';\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${scope}: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(`${scope}:after`)}\n </div>\n `;\n }\n\n private __renderAction(action: string) {\n const { disabledSelector, href, lang, ns } = this;\n\n const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n const isDisabled = !this.in('idle') \|\| disabledSelector.matches(action, true);\n const isValid = isTemplateValid \|\| isSnapshotValid;\n\n const handleClick = (evt: Event) => {\n if (action === 'delete') {\n const confirm = this.renderRoot.querySelector('#confirm');\n (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n } else {\n this.submit();\n }\n };\n\n return html`\n <div>\n ${this.renderTemplateOrSlot(`${action}:before`)}\n\n <foxy-internal-confirm-dialog\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 data-testid=\"confirm\"\n @hide=${(evt: DialogHideEvent) => {\n if (!evt.detail.cancelled) this.delete();\n }}\n >\n </foxy-internal-confirm-dialog>\n\n <vaadin-button\n class=\"w-full\"\n theme=${this.in('idle') ? `primary ${href ? 'error' : 'success'}` : ''}\n data-testid=${action}\n ?disabled=${(this.in({ idle: 'template' }) && !isValid) \|\| isDisabled}\n @click=${handleClick}\n >\n <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot(`${action}:after`)}\n </div>\n `;\n }\n\n private async __cache(): Promise<void> {\n this.__cacheState = 'busy';\n\n try {\n const url = this.data?._links['fx:cache'].href ?? '';\n const response = await new EmailTemplateForm.API(this).fetch(url, { method: 'POST' });\n\n this.__cacheState = response.ok ? 'idle' : 'fail';\n } catch {\n this.__cacheState = 'fail';\n }\n }\n}\n"]}

package/dist/elements/public/EmailTemplateForm/types.d.ts CHANGED Viewed

@@ -1,3 +1,17 @@
+import { EmailTemplateForm } from './EmailTemplateForm';
 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.EmailTemplate>;
+export declare type Templates = {
+    'description:before'?: Renderer<EmailTemplateForm>;
+    'description:after'?: Renderer<EmailTemplateForm>;
+    'content:before'?: Renderer<EmailTemplateForm>;
+    'content:after'?: Renderer<EmailTemplateForm>;
+    'timestamps:before'?: Renderer<EmailTemplateForm>;
+    'timestamps:after'?: Renderer<EmailTemplateForm>;
+    'create:before'?: Renderer<EmailTemplateForm>;
+    'create:after'?: Renderer<EmailTemplateForm>;
+    'delete:before'?: Renderer<EmailTemplateForm>;
+    'delete:after'?: Renderer<EmailTemplateForm>;
+};

package/dist/elements/public/EmailTemplateForm/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.EmailTemplate>;\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { EmailTemplateForm } from './EmailTemplateForm';\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.EmailTemplate>;\n\nexport type Templates = {\n 'description:before'?: Renderer<EmailTemplateForm>;\n 'description:after'?: Renderer<EmailTemplateForm>;\n 'content:before'?: Renderer<EmailTemplateForm>;\n 'content:after'?: Renderer<EmailTemplateForm>;\n 'timestamps:before'?: Renderer<EmailTemplateForm>;\n 'timestamps:after'?: Renderer<EmailTemplateForm>;\n 'create:before'?: Renderer<EmailTemplateForm>;\n 'create:after'?: Renderer<EmailTemplateForm>;\n 'delete:before'?: Renderer<EmailTemplateForm>;\n 'delete:after'?: Renderer<EmailTemplateForm>;\n};\n"]}

package/dist/elements/public/ItemsForm/private/Picture.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { PreviewItem } from './Preview';
 export declare class Picture extends LitElement {
+    static readonly placeholder = "data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E";
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
     quantity: number;

package/dist/elements/public/ItemsForm/private/Picture.js CHANGED Viewed

@@ -141,6 +141,7 @@ export class Picture extends LitElement {
         const image = new Image();
         image.src = this.image;
         image.setAttribute('part', 'picture');
+        image.addEventListener('error', () => (image.src = Picture.placeholder));
         this.__setImageState(image, state);
         this.__container.insertBefore(image, refChild);
         return image;
@@ -158,4 +159,5 @@ export class Picture extends LitElement {
         image.className = [shared, states[state]].join(' ');
     }
 }
+Picture.placeholder = 'data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="40" height="40" fill="%23E8E8E8"/%3E%3Cpath d="M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z" fill="white"/%3E%3Cpath d="M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z" fill="white"/%3E%3Cpath d="M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z" fill="white"/%3E%3Cpath d="M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z" fill="white"/%3E%3Cpath d="M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z" fill="white"/%3E%3Cpath d="M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z" fill="white"/%3E%3Cpath d="M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z" fill="white"/%3E%3Cpath d="M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z" fill="white"/%3E%3Cpath d="M40 40H34.8333L40 34.8333V40Z" fill="white"/%3E%3Cpath d="M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z" fill="white"/%3E%3Cpath d="M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z" fill="white"/%3E%3Cpath d="M0 0H6.37152L0 6.37151V0Z" fill="white"/%3E%3Cpath d="M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z" fill="white"/%3E%3Cpath d="M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z" fill="white"/%3E%3C/svg%3E';
 //# sourceMappingURL=Picture.js.map

package/dist/elements/public/ItemsForm/private/Picture.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../../../src/elements/public/ItemsForm/private/Picture.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSResultArray,\n LitElement,\n PropertyDeclarations,\n TemplateResult,\n css,\n html,\n} from 'lit-element';\n\nimport { PreviewItem } from './Preview';\nimport { Themeable } from '../../../../mixins/themeable';\n\nenum ImageState {\n Excluded = 0,\n BeforeEnter = 1,\n Default = 2,\n Previous = 3,\n BeforeExit = 4,\n}\n\nexport class Picture extends LitElement {\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n quantity: { attribute: false },\n image: { attribute: false },\n };\n }\n\n public static get styles(): CSSResultArray {\n return [\n Themeable.styles,\n css`\n .ease-out-back {\n transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .blur-1 {\n filter: blur(1px);\n }\n\n .blur-2 {\n filter: blur(2px);\n }\n\n .grayscale {\n filter: grayscale();\n }\n\n .rotate-12 {\n --tw-rotate: 12deg;\n }\n\n .-rotate-12 {\n --tw-rotate: -12deg;\n }\n\n .-rotate-24 {\n --tw-rotate: -24deg;\n }\n\n .translate-y-half {\n --tw-translate-y: 50%;\n }\n `,\n ];\n }\n\n public quantity = 0;\n\n public image = '';\n\n public set empty(newValue: boolean) {\n this.updateComplete.then(() => {\n if (newValue) {\n const [, ...bottomImages] = this.__stack;\n bottomImages.forEach(image => image.remove());\n } else if (this.quantity > 1 && this.__stack.length < 2) {\n this.__insertImage(ImageState.Previous, this.__stack[0]);\n }\n });\n }\n\n public set data({ quantity, image }: PreviewItem) {\n this.quantity = quantity;\n this.image = image;\n }\n\n public render(): TemplateResult {\n return html`<div id=\"image\" class=\"w-full h-full relative\"></div>`;\n }\n\n public firstUpdated(): void {\n const top = this.__insertImage(ImageState.Default);\n if (this.quantity > 1) this.__insertImage(ImageState.Previous, top);\n }\n\n public updated(changedProperties: Map<keyof Picture, unknown>): void {\n if (changedProperties.has('quantity')) {\n const oldValue = changedProperties.get('quantity') as number \| undefined;\n if (oldValue !== undefined) this.quantity > oldValue ? this.__add() : this.__remove();\n }\n\n if (changedProperties.has('image')) {\n this.__stack.forEach(image => (image.src = this.image));\n }\n }\n\n private get __container() {\n return this.shadowRoot!.getElementById('image')!;\n }\n\n private get __stack() {\n const list = this.__container?.querySelectorAll(':not(.opacity-0)') ?? [];\n return [...list].reverse() as HTMLImageElement[];\n }\n\n private __add() {\n const [current, previous] = this.__stack;\n\n if (this.quantity > 1) {\n if (current) this.__setImageState(current, ImageState.Previous);\n\n if (previous) {\n this.__setImageState(previous, ImageState.BeforeExit);\n previous.ontransitionend = /* istanbul ignore next / () => previous.remove();\n }\n\n this.__setImageState(this.__insertImage(ImageState.BeforeEnter), ImageState.Default);\n } else {\n if (current) this.__setImageState(current, ImageState.Default);\n }\n }\n\n private __remove() {\n const [current, previous] = this.__stack;\n let imageToRemove: HTMLImageElement;\n\n if (this.quantity > 0) {\n if (previous) this.__setImageState(previous, ImageState.Default);\n imageToRemove = current;\n } else {\n if (current) this.__setImageState(current, ImageState.Excluded);\n imageToRemove = previous;\n }\n\n if (imageToRemove) {\n this.__setImageState(imageToRemove, ImageState.BeforeEnter);\n imageToRemove.ontransitionend = / istanbul ignore next */ () => imageToRemove!.remove();\n }\n\n if (this.quantity > 1) {\n const last = this.__insertImage(ImageState.BeforeExit, this.__container.firstElementChild);\n this.__setImageState(last, ImageState.Previous);\n }\n }\n\n private __insertImage(state: ImageState, refChild: Node \| null = null) {\n const image = new Image();\n image.src = this.image;\n image.setAttribute('part', 'picture');\n this.__setImageState(image, state);\n this.__container.insertBefore(image, refChild);\n return image;\n }\n\n private __setImageState(image: HTMLImageElement, state: ImageState) {\n const shared =\n 'absolute inset-0 w-full h-full object-cover rounded transform transition duration-700 ease-out-back';\n\n const states = [\n 'grayscale',\n 'shadow-m translate-y-half scale-110 rotate-12 opacity-0',\n 'shadow-m',\n 'blur-1 -rotate-12 opacity-25',\n 'blur-2 -rotate-24 opacity-0',\n ];\n\n void image.offsetHeight; // reflow\n image.className = [shared, states[state]].join(' ');\n }\n}\n"]}
1	+ {"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../../../src/elements/public/ItemsForm/private/Picture.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSResultArray,\n LitElement,\n PropertyDeclarations,\n TemplateResult,\n css,\n html,\n} from 'lit-element';\n\nimport { PreviewItem } from './Preview';\nimport { Themeable } from '../../../../mixins/themeable';\n\nenum ImageState {\n Excluded = 0,\n BeforeEnter = 1,\n Default = 2,\n Previous = 3,\n BeforeExit = 4,\n}\n\nexport class Picture extends LitElement {\n public static readonly placeholder =\n 'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n quantity: { attribute: false },\n image: { attribute: false },\n };\n }\n\n public static get styles(): CSSResultArray {\n return [\n Themeable.styles,\n css`\n .ease-out-back {\n transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .blur-1 {\n filter: blur(1px);\n }\n\n .blur-2 {\n filter: blur(2px);\n }\n\n .grayscale {\n filter: grayscale();\n }\n\n .rotate-12 {\n --tw-rotate: 12deg;\n }\n\n .-rotate-12 {\n --tw-rotate: -12deg;\n }\n\n .-rotate-24 {\n --tw-rotate: -24deg;\n }\n\n .translate-y-half {\n --tw-translate-y: 50%;\n }\n `,\n ];\n }\n\n public quantity = 0;\n\n public image = '';\n\n public set empty(newValue: boolean) {\n this.updateComplete.then(() => {\n if (newValue) {\n const [, ...bottomImages] = this.__stack;\n bottomImages.forEach(image => image.remove());\n } else if (this.quantity > 1 && this.__stack.length < 2) {\n this.__insertImage(ImageState.Previous, this.__stack[0]);\n }\n });\n }\n\n public set data({ quantity, image }: PreviewItem) {\n this.quantity = quantity;\n this.image = image;\n }\n\n public render(): TemplateResult {\n return html`<div id=\"image\" class=\"w-full h-full relative\"></div>`;\n }\n\n public firstUpdated(): void {\n const top = this.__insertImage(ImageState.Default);\n if (this.quantity > 1) this.__insertImage(ImageState.Previous, top);\n }\n\n public updated(changedProperties: Map<keyof Picture, unknown>): void {\n if (changedProperties.has('quantity')) {\n const oldValue = changedProperties.get('quantity') as number \| undefined;\n if (oldValue !== undefined) this.quantity > oldValue ? this.__add() : this.__remove();\n }\n\n if (changedProperties.has('image')) {\n this.__stack.forEach(image => (image.src = this.image));\n }\n }\n\n private get __container() {\n return this.shadowRoot!.getElementById('image')!;\n }\n\n private get __stack() {\n const list = this.__container?.querySelectorAll(':not(.opacity-0)') ?? [];\n return [...list].reverse() as HTMLImageElement[];\n }\n\n private __add() {\n const [current, previous] = this.__stack;\n\n if (this.quantity > 1) {\n if (current) this.__setImageState(current, ImageState.Previous);\n\n if (previous) {\n this.__setImageState(previous, ImageState.BeforeExit);\n previous.ontransitionend = /* istanbul ignore next / () => previous.remove();\n }\n\n this.__setImageState(this.__insertImage(ImageState.BeforeEnter), ImageState.Default);\n } else {\n if (current) this.__setImageState(current, ImageState.Default);\n }\n }\n\n private __remove() {\n const [current, previous] = this.__stack;\n let imageToRemove: HTMLImageElement;\n\n if (this.quantity > 0) {\n if (previous) this.__setImageState(previous, ImageState.Default);\n imageToRemove = current;\n } else {\n if (current) this.__setImageState(current, ImageState.Excluded);\n imageToRemove = previous;\n }\n\n if (imageToRemove) {\n this.__setImageState(imageToRemove, ImageState.BeforeEnter);\n imageToRemove.ontransitionend = / istanbul ignore next */ () => imageToRemove!.remove();\n }\n\n if (this.quantity > 1) {\n const last = this.__insertImage(ImageState.BeforeExit, this.__container.firstElementChild);\n this.__setImageState(last, ImageState.Previous);\n }\n }\n\n private __insertImage(state: ImageState, refChild: Node \| null = null) {\n const image = new Image();\n\n image.src = this.image;\n image.setAttribute('part', 'picture');\n image.addEventListener('error', () => (image.src = Picture.placeholder));\n\n this.__setImageState(image, state);\n this.__container.insertBefore(image, refChild);\n return image;\n }\n\n private __setImageState(image: HTMLImageElement, state: ImageState) {\n const shared =\n 'absolute inset-0 w-full h-full object-cover rounded transform transition duration-700 ease-out-back';\n\n const states = [\n 'grayscale',\n 'shadow-m translate-y-half scale-110 rotate-12 opacity-0',\n 'shadow-m',\n 'blur-1 -rotate-12 opacity-25',\n 'blur-2 -rotate-24 opacity-0',\n ];\n\n void image.offsetHeight; // reflow\n image.className = [shared, states[state]].join(' ');\n }\n}\n"]}

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

@@ -466,20 +466,28 @@ export class SubscriptionForm extends Base {
     get __isNextTransactionDateVisible() {
         if (this.hiddenSelector.matches('next-transaction-date', true))
             return false;
-        if (this.settings === null)
-            return true;
         if (this.data === null)
             return false;
+        if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now())
+            return false;
+        if (this.data.is_active === false)
+            return false;
+        if (this.settings === null)
+            return true;
         const rules = this.settings.subscriptions.allow_next_date_modification;
         return !!getNextTransactionDateConstraints(this.data, rules);
     }
     get __isFrequencyVisible() {
         if (this.hiddenSelector.matches('frequency', true))
             return false;
-        if (this.settings === null)
-            return true;
         if (this.data === null)
             return false;
+        if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now())
+            return false;
+        if (this.data.is_active === false)
+            return false;
+        if (this.settings === null)
+            return true;
         const allowedFrequencies = getAllowedFrequencies({
             subscription: this.data,
             settings: this.settings,