npm - @foxy.io/elements - Versions diffs - 1.45.0 → 1.46.0-beta.1 - Mend

@foxy.io/elements 1.45.0 → 1.46.0-beta.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 (326) hide show

package/dist/elements/internal/InternalForm/InternalForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* Getter that returns a list of the optional badges to put into the subtitle. The badges are shown only if subtitle is visible. /\n get headerSubtitleBadges(): { key: string }[] {\n return [];\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = [super.hiddenSelector.toString()];\n if (this.href) alwaysMatch.unshift('create');\n if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <div class=\"flex items-center gap-s text-secondary leading-s\">\n ${this.headerSubtitleBadges.map(badge => {\n return html`\n <foxy-i18n\n class=\"border border-contrast-60 font-medium uppercase tracking-wider block rounded-s px-xs text-xs\"\n infer=\"header badges\"\n key=${badge.key}\n >\n </foxy-i18n>\n `;\n })}\n <foxy-i18n\n infer=\"header\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n </div>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n const nested = ['delete', 'undo', 'submit', 'create'];\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n <div class=\"w-full\"></div>\n\n <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-all filter': true,\n 'opacity-30 blur-sm pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Badge, Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* Getter that returns a list of the optional badges to put into the subtitle. The badges are shown only if subtitle is visible. /\n get headerSubtitleBadges(): Badge[] {\n return [];\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = [super.hiddenSelector.toString()];\n if (this.href) alwaysMatch.unshift('create');\n if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2 class=\"grid gap-xs\">\n <span class=\"flex items-center gap-s leading-none text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <div class=\"flex flex-wrap items-center gap-s leading-xs\">\n ${this.headerSubtitleBadges.map(badge => {\n return html`\n <span\n data-testclass=\"badge\"\n class=${classMap({\n 'inline-flex gap-xs items-center rounded-s px-xs': true,\n [badge.class ?? 'bg-contrast-5']: true,\n })}\n >\n ${badge.icon}\n ${'text' in badge\n ? badge.text\n : html`<foxy-i18n infer=\"header badges\" key=${badge.key}></foxy-i18n>`}\n </span>\n `;\n })}\n <foxy-i18n\n infer=\"header\"\n class=\"text-secondary\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n </div>\n ${actions ? html`<div class=\"flex gap-x-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n const nested = ['delete', 'undo', 'submit', 'create'];\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n <div class=\"w-full\"></div>\n\n <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-all filter': true,\n 'opacity-30 blur-sm pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalForm/types.d.ts CHANGED Viewed

@@ -1,4 +1,13 @@
+import type { SVGTemplateResult } from 'lit-html';
 export declare type Status = {
     key: string;
     options?: unknown;
 };
+export declare type Badge = ({
+    key: string;
+} | {
+    text: string;
+}) & {
+    class?: string;
+    icon?: SVGTemplateResult;
+};

package/dist/elements/internal/InternalForm/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/types.ts"],"names":[],"mappings":"","sourcesContent":["~~export~~ type Status = { key: string; options?: unknown };\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SVGTemplateResult } from 'lit-html';\n\nexport type Status = { key: string; options?: unknown };\n\nexport type Badge = ({ key: string } \| { text: string }) & {\n class?: string;\n icon?: SVGTemplateResult;\n};\n"]}

package/dist/elements/internal/InternalTextControl/InternalTextControl.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalTextControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
-    layout: 'summary-item' | 'standalone' | null;
+    layout: 'summary-item' | 'standalone' | 'pill' | null;
     prefix: string | null;
     suffix: string | null;
     private __isErrorVisible;
@@ -18,4 +18,5 @@ export declare class InternalTextControl extends InternalEditableControl {
     protected get _value(): string;
     protected set _value(newValue: string);
     private __renderSummaryItemLayout;
+    private __renderPillLayout;
 }

package/dist/elements/internal/InternalTextControl/InternalTextControl.js CHANGED Viewed

@@ -46,6 +46,8 @@ export class InternalTextControl extends InternalEditableControl {
     renderControl() {
         if (this.layout === 'summary-item')
             return this.__renderSummaryItemLayout();
+        if (this.layout === 'pill')
+            return this.__renderPillLayout();
         return html `
       <vaadin-text-field
         error-message=${ifDefined(this._errorMessage)}
@@ -140,5 +142,42 @@ export class InternalTextControl extends InternalEditableControl {
       </div>
     `;
     }
+    __renderPillLayout() {
+        var _a;
+        const content = this._value || this.placeholder;
+        const contentClass = 'relative block whitespace-pre text-center text-xl font-medium px-s py-xs -my-xs opacity-0';
+        return html `
+      <div class="text-center flex items-center gap-s relative" style="min-width: 6rem">
+        <span class=${contentClass}>${content}</span>
+        <input
+          placeholder=${this.placeholder}
+          aria-label=${this.label}
+          class=${classMap({
+            'text-center appearance-none transition-all text-xl font-medium rounded': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'px-s py-xs -my-xs absolute inset-0': true,
+            'hover-bg-contrast-10': !this.disabled && !this.readonly,
+            'bg-transparent': this.readonly,
+            'bg-contrast-5': !this.readonly,
+            'text-disabled': this.disabled && !this.readonly,
+        })}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          .value=${(_a = this._value) !== null && _a !== void 0 ? _a : ''}
+          @keydown=${(evt) => {
+            var _a;
+            if (evt.key === 'Enter') {
+                evt.preventDefault();
+                (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit();
+            }
+        }}
+          @input=${(evt) => {
+            const input = evt.currentTarget;
+            this._value = input.value;
+        }}
+        />
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalTextControl.js.map

package/dist/elements/internal/InternalTextControl/InternalTextControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { live } from 'lit-html/directives/live';\n\n/*\n Internal control displaying a basic text box.\n \n @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n __isErrorVisible: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 0;\n }\n `,\n ];\n }\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-text-field\n error-message=${ifDefined(this._errorMessage)}\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n ?clear-button-visible=${!this.suffix}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: CustomEvent) => {\n const field = evt.currentTarget as TextFieldElement;\n this._value = field.value;\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-text-field>\n `;\n }\n\n protected get _value(): string {\n return (super._value as string \| undefined) ?? '';\n }\n\n protected set _value(newValue: string) {\n super._value = newValue as unknown \| undefined;\n }\n\n private __renderSummaryItemLayout() {\n return html`\n <div class=\"leading-xs\">\n <div class=\"flex items-center gap-xs\">\n <label class=\"text-m text-body flex-1 whitespace-nowrap\" for=\"input\">${this.label}</label>\n\n ${this.prefix ? html`<div>${this.prefix}</div>` : ''}\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"text\"\n id=\"input\"\n .value=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n ${this.suffix ? html`<div class=\"font-medium text-secondary\">${this.suffix}</div>` : ''}\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly \|\| !this._value}\n @click=${() => {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n\n <div style=\"max-width: 32rem\">\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { live } from 'lit-html/directives/live';\n\n/*\n Internal control displaying a basic text box.\n \n @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n __isErrorVisible: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 0;\n }\n `,\n ];\n }\n\n layout: 'summary-item' \| 'standalone' \| 'pill' \| null = null;\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n if (this.layout === 'pill') return this.__renderPillLayout();\n\n return html`\n <vaadin-text-field\n error-message=${ifDefined(this._errorMessage)}\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n ?clear-button-visible=${!this.suffix}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: CustomEvent) => {\n const field = evt.currentTarget as TextFieldElement;\n this._value = field.value;\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-text-field>\n `;\n }\n\n protected get _value(): string {\n return (super._value as string \| undefined) ?? '';\n }\n\n protected set _value(newValue: string) {\n super._value = newValue as unknown \| undefined;\n }\n\n private __renderSummaryItemLayout() {\n return html`\n <div class=\"leading-xs\">\n <div class=\"flex items-center gap-xs\">\n <label class=\"text-m text-body flex-1 whitespace-nowrap\" for=\"input\">${this.label}</label>\n\n ${this.prefix ? html`<div>${this.prefix}</div>` : ''}\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"text\"\n id=\"input\"\n .value=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n ${this.suffix ? html`<div class=\"font-medium text-secondary\">${this.suffix}</div>` : ''}\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly \|\| !this._value}\n @click=${() => {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n\n <div style=\"max-width: 32rem\">\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n </div>\n `;\n }\n\n private __renderPillLayout() {\n const content = this._value \|\| this.placeholder;\n const contentClass =\n 'relative block whitespace-pre text-center text-xl font-medium px-s py-xs -my-xs opacity-0';\n\n return html`\n <div class=\"text-center flex items-center gap-s relative\" style=\"min-width: 6rem\">\n <span class=${contentClass}>${content}</span>\n <input\n placeholder=${this.placeholder}\n aria-label=${this.label}\n class=${classMap({\n 'text-center appearance-none transition-all text-xl font-medium rounded': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'px-s py-xs -my-xs absolute inset-0': true,\n 'hover-bg-contrast-10': !this.disabled && !this.readonly,\n 'bg-transparent': this.readonly,\n 'bg-contrast-5': !this.readonly,\n 'text-disabled': this.disabled && !this.readonly,\n })}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .value=${this._value ?? ''}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter') {\n evt.preventDefault();\n this.nucleon?.submit();\n }\n }}\n @input=${(evt: Event) => {\n const input = evt.currentTarget as HTMLInputElement;\n this._value = input.value;\n }}\n />\n </div>\n `;\n }\n}\n"]}

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

@@ -46,7 +46,6 @@ export class AdminSubscriptionForm extends Base {
         catch (_k) {
             transactionsHref = undefined;
         }
-        // @ts-expect-error - SDK doesn't know yet about the `fx:charge_past_due` link.
         const chargePastDueHref = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links['fx:charge_past_due']) === null || _d === void 0 ? void 0 : _d.href;
         const pastDueAmount = (_e = this.data) === null || _e === void 0 ? void 0 : _e.past_due_amount;
         const errorMessage = (_f = this.data) === null || _f === void 0 ? void 0 : _f.error_message;
@@ -174,7 +173,7 @@ export class AdminSubscriptionForm extends Base {
         infer="transactions"
         class="min-w-0"
         first=${ifDefined(transactionsHref)}
-        item="foxy-transaction-card"
+        item="foxy-admin-transaction-card"
         form="foxy-transaction"
         hide-create-button
         hide-delete-button

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AdminSubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { getSubscriptionStatus } from '../../../utils/get-subscription-status';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'admin-subscription-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\nexport class AdminSubscriptionForm extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n uoeSettingsPage: { attribute: 'uoe-settings-page' },\n };\n }\n\n /** URL of the UOE settings page in the admin. If set, displays a link to that page in the self-service links section. */\n uoeSettingsPage: string \| null = null;\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = ['delete', super.hiddenSelector.toString()];\n const data = this.data;\n if (!data?.error_message \|\| !data.past_due_amount) alwaysMatch.unshift('error-message');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n get headerSubtitleKey(): string {\n const status = getSubscriptionStatus(this.data);\n return status ? `subtitle_${status}` : super.headerSubtitleKey;\n }\n\n renderHeaderActions(): TemplateResult {\n return html`\n <foxy-internal-admin-subscription-form-status-action infer=\"status-action\">\n </foxy-internal-admin-subscription-form-status-action>\n `;\n }\n\n renderBody(): TemplateResult {\n let transactionsHref: string \| undefined;\n\n try {\n const url = new URL(this.data?._links['fx:transactions'].href ?? '');\n url.searchParams.set('zoom', 'items');\n transactionsHref = url.toString();\n } catch {\n transactionsHref = undefined;\n }\n\n // @ts-expect-error - SDK doesn't know yet about the `fx:charge_past_due` link.\n const chargePastDueHref: string \| undefined = this.data?._links['fx:charge_past_due']?.href;\n const pastDueAmount = this.data?.past_due_amount;\n const errorMessage = this.data?.error_message;\n const currencyCode = this.data?._embedded['fx:transaction_template'].currency_code;\n\n return html`\n ${this.renderHeader()}\n\n <foxy-internal-admin-subscription-form-error infer=\"error-message\">\n </foxy-internal-admin-subscription-form-error>\n\n <foxy-internal-summary-control infer=\"general\">\n <foxy-internal-date-control layout=\"summary-item\" infer=\"start-date\">\n </foxy-internal-date-control>\n <foxy-internal-frequency-control\n layout=\"summary-item\"\n infer=\"frequency\"\n allow-twice-a-month\n >\n </foxy-internal-frequency-control>\n <foxy-internal-date-control layout=\"summary-item\" infer=\"next-transaction-date\">\n </foxy-internal-date-control>\n <foxy-internal-date-control layout=\"summary-item\" infer=\"end-date\">\n </foxy-internal-date-control>\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"overdue\">\n <foxy-internal-number-control\n layout=\"summary-item\"\n suffix=${ifDefined(currencyCode)}\n infer=\"past-due-amount\"\n min=\"0\"\n >\n </foxy-internal-number-control>\n\n ${chargePastDueHref && currencyCode && pastDueAmount\n ? html`\n <foxy-internal-post-action-control\n message-options=${JSON.stringify({ amount: `${pastDueAmount} ${currencyCode}` })}\n theme=\"tertiary-inline\"\n infer=\"charge-past-due\"\n href=${chargePastDueHref}\n @success=${() => this.refresh()}\n >\n </foxy-internal-post-action-control>\n `\n : errorMessage && !pastDueAmount\n ? html`\n <details\n class=\"leading-xs text-xs text-secondary rounded-b focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50\"\n style=\"--gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <summary\n class=\"cursor-pointer transition-colors hover-text-body focus-outline-none\"\n >\n <span class=\"flex items-start\" style=\"gap: var(--gap)\">\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"flex-shrink-0\" style=\"width: 1.25em\"><path fill-rule=\"evenodd\" d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z\" clip-rule=\"evenodd\" /></svg>`}\n <foxy-i18n infer=\"\" key=\"error_with_zero_past_due_hint\"></foxy-i18n>\n </span>\n </summary>\n <p style=\"padding-left: calc(1.25em + var(--gap))\" class=\"pt-xs\">\n <span class=\"whitespace-pre-line\">${errorMessage}</span>\n </p>\n </details>\n `\n : ''}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"self-service-links\">\n <foxy-internal-admin-subscription-form-link-control infer=\"load-in-cart\">\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"cart=checkout\"\n infer=\"load-on-checkout\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"sub_cancel=next_transaction_date\"\n infer=\"cancel-at-end-of-billing-period\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"sub_cancel=true\"\n infer=\"cancel-next-day\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <div\n class=\"flex items-start leading-xs text-xs text-secondary\"\n style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"flex-shrink-0\" style=\"width: 1.25em\"><path fill-rule=\"evenodd\" d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z\" clip-rule=\"evenodd\" /></svg>`}\n <p>\n <foxy-i18n infer=\"\" key=\"uoe_hint_text\"></foxy-i18n>\n ${this.uoeSettingsPage\n ? html`\n <a\n target=\"_blank\"\n class=\"inline-block rounded font-medium text-body cursor-pointer hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${this.uoeSettingsPage}\n >\n <foxy-i18n infer=\"\" key=\"uoe_link_text\"></foxy-i18n>\n </a>\n `\n : ''}\n </p>\n </div>\n </foxy-internal-summary-control>\n\n ${this.renderTemplateOrSlot()}\n\n <foxy-internal-async-list-control\n infer=\"attributes\"\n class=\"min-w-0\"\n first=${ifDefined(this.data?._links?.['fx:attributes'].href)}\n item=\"foxy-attribute-card\"\n form=\"foxy-attribute-form\"\n alert\n >\n </foxy-internal-async-list-control>\n\n <foxy-internal-async-list-control\n infer=\"transactions\"\n class=\"min-w-0\"\n first=${ifDefined(transactionsHref)}\n item=\"foxy-transaction-card\"\n form=\"foxy-transaction\"\n hide-create-button\n hide-delete-button\n alert\n wide\n >\n </foxy-internal-async-list-control>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"AdminSubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { getSubscriptionStatus } from '../../../utils/get-subscription-status';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'admin-subscription-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\nexport class AdminSubscriptionForm extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n uoeSettingsPage: { attribute: 'uoe-settings-page' },\n };\n }\n\n /** URL of the UOE settings page in the admin. If set, displays a link to that page in the self-service links section. */\n uoeSettingsPage: string \| null = null;\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = ['delete', super.hiddenSelector.toString()];\n const data = this.data;\n if (!data?.error_message \|\| !data.past_due_amount) alwaysMatch.unshift('error-message');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n get headerSubtitleKey(): string {\n const status = getSubscriptionStatus(this.data);\n return status ? `subtitle_${status}` : super.headerSubtitleKey;\n }\n\n renderHeaderActions(): TemplateResult {\n return html`\n <foxy-internal-admin-subscription-form-status-action infer=\"status-action\">\n </foxy-internal-admin-subscription-form-status-action>\n `;\n }\n\n renderBody(): TemplateResult {\n let transactionsHref: string \| undefined;\n\n try {\n const url = new URL(this.data?._links['fx:transactions'].href ?? '');\n url.searchParams.set('zoom', 'items');\n transactionsHref = url.toString();\n } catch {\n transactionsHref = undefined;\n }\n\n const chargePastDueHref: string \| undefined = this.data?._links['fx:charge_past_due']?.href;\n const pastDueAmount = this.data?.past_due_amount;\n const errorMessage = this.data?.error_message;\n const currencyCode = this.data?._embedded['fx:transaction_template'].currency_code;\n\n return html`\n ${this.renderHeader()}\n\n <foxy-internal-admin-subscription-form-error infer=\"error-message\">\n </foxy-internal-admin-subscription-form-error>\n\n <foxy-internal-summary-control infer=\"general\">\n <foxy-internal-date-control layout=\"summary-item\" infer=\"start-date\">\n </foxy-internal-date-control>\n <foxy-internal-frequency-control\n layout=\"summary-item\"\n infer=\"frequency\"\n allow-twice-a-month\n >\n </foxy-internal-frequency-control>\n <foxy-internal-date-control layout=\"summary-item\" infer=\"next-transaction-date\">\n </foxy-internal-date-control>\n <foxy-internal-date-control layout=\"summary-item\" infer=\"end-date\">\n </foxy-internal-date-control>\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"overdue\">\n <foxy-internal-number-control\n layout=\"summary-item\"\n suffix=${ifDefined(currencyCode)}\n infer=\"past-due-amount\"\n min=\"0\"\n >\n </foxy-internal-number-control>\n\n ${chargePastDueHref && currencyCode && pastDueAmount\n ? html`\n <foxy-internal-post-action-control\n message-options=${JSON.stringify({ amount: `${pastDueAmount} ${currencyCode}` })}\n theme=\"tertiary-inline\"\n infer=\"charge-past-due\"\n href=${chargePastDueHref}\n @success=${() => this.refresh()}\n >\n </foxy-internal-post-action-control>\n `\n : errorMessage && !pastDueAmount\n ? html`\n <details\n class=\"leading-xs text-xs text-secondary rounded-b focus-within-ring-2 focus-within-ring-inset focus-within-ring-primary-50\"\n style=\"--gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <summary\n class=\"cursor-pointer transition-colors hover-text-body focus-outline-none\"\n >\n <span class=\"flex items-start\" style=\"gap: var(--gap)\">\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"flex-shrink-0\" style=\"width: 1.25em\"><path fill-rule=\"evenodd\" d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z\" clip-rule=\"evenodd\" /></svg>`}\n <foxy-i18n infer=\"\" key=\"error_with_zero_past_due_hint\"></foxy-i18n>\n </span>\n </summary>\n <p style=\"padding-left: calc(1.25em + var(--gap))\" class=\"pt-xs\">\n <span class=\"whitespace-pre-line\">${errorMessage}</span>\n </p>\n </details>\n `\n : ''}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"self-service-links\">\n <foxy-internal-admin-subscription-form-link-control infer=\"load-in-cart\">\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"cart=checkout\"\n infer=\"load-on-checkout\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"sub_cancel=next_transaction_date\"\n infer=\"cancel-at-end-of-billing-period\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <foxy-internal-admin-subscription-form-link-control\n search=\"sub_cancel=true\"\n infer=\"cancel-next-day\"\n >\n </foxy-internal-admin-subscription-form-link-control>\n\n <div\n class=\"flex items-start leading-xs text-xs text-secondary\"\n style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"flex-shrink-0\" style=\"width: 1.25em\"><path fill-rule=\"evenodd\" d=\"M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z\" clip-rule=\"evenodd\" /></svg>`}\n <p>\n <foxy-i18n infer=\"\" key=\"uoe_hint_text\"></foxy-i18n>\n ${this.uoeSettingsPage\n ? html`\n <a\n target=\"_blank\"\n class=\"inline-block rounded font-medium text-body cursor-pointer hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${this.uoeSettingsPage}\n >\n <foxy-i18n infer=\"\" key=\"uoe_link_text\"></foxy-i18n>\n </a>\n `\n : ''}\n </p>\n </div>\n </foxy-internal-summary-control>\n\n ${this.renderTemplateOrSlot()}\n\n <foxy-internal-async-list-control\n infer=\"attributes\"\n class=\"min-w-0\"\n first=${ifDefined(this.data?._links?.['fx:attributes'].href)}\n item=\"foxy-attribute-card\"\n form=\"foxy-attribute-form\"\n alert\n >\n </foxy-internal-async-list-control>\n\n <foxy-internal-async-list-control\n infer=\"transactions\"\n class=\"min-w-0\"\n first=${ifDefined(transactionsHref)}\n item=\"foxy-admin-transaction-card\"\n form=\"foxy-transaction\"\n hide-create-button\n hide-delete-button\n alert\n wide\n >\n </foxy-internal-async-list-control>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}

package/dist/elements/public/AdminSubscriptionForm/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import '../../internal/InternalFrequencyControl/index';
 import '../../internal/InternalNumberControl/index';
 import '../../internal/InternalDateControl/index';
 import '../../internal/InternalForm/index';
-import '../TransactionCard/index';
+import '../AdminTransactionCard/index';
 import '../AttributeCard/index';
 import '../AttributeForm/index';
 import '../Transaction/index';

package/dist/elements/public/AdminSubscriptionForm/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import "../../internal/InternalFrequencyControl/index.js";
 import "../../internal/InternalNumberControl/index.js";
 import "../../internal/InternalDateControl/index.js";
 import "../../internal/InternalForm/index.js";
-import "../TransactionCard/index.js";
+import "../AdminTransactionCard/index.js";
 import "../AttributeCard/index.js";
 import "../AttributeForm/index.js";
 import "../Transaction/index.js";

package/dist/elements/public/AdminSubscriptionForm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionForm/index.ts"],"names":[],"mappings":"AAAA,2DAAwD;AACxD,0DAAuD;AACvD,0DAAuD;AACvD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,~~qCAAkC~~;~~AAClC~~,mCAAgC;AAChC,mCAAgC;AAChC,iCAA8B;AAE9B,uEAAoE;AACpE,sEAAmE;AACnE,gEAA6D;AAE7D,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalPostActionControl/index';\nimport '../../internal/InternalAsyncListControl/index';\nimport '../../internal/InternalFrequencyControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalDateControl/index';\nimport '../../internal/InternalForm/index';\n\nimport '../~~TransactionCard~~/index';\nimport '../AttributeCard/index';\nimport '../AttributeForm/index';\nimport '../Transaction/index';\n\nimport './internal/InternalAdminSubscriptionFormStatusAction/index';\nimport './internal/InternalAdminSubscriptionFormLinkControl/index';\nimport './internal/InternalAdminSubscriptionFormError/index';\n\nimport { AdminSubscriptionForm } from './AdminSubscriptionForm';\n\ncustomElements.define('foxy-admin-subscription-form', AdminSubscriptionForm);\n\nexport { AdminSubscriptionForm };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionForm/index.ts"],"names":[],"mappings":"AAAA,2DAAwD;AACxD,0DAAuD;AACvD,0DAAuD;AACvD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,0CAAuC;AACvC,mCAAgC;AAChC,mCAAgC;AAChC,iCAA8B;AAE9B,uEAAoE;AACpE,sEAAmE;AACnE,gEAA6D;AAE7D,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,qBAAqB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalPostActionControl/index';\nimport '../../internal/InternalAsyncListControl/index';\nimport '../../internal/InternalFrequencyControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalDateControl/index';\nimport '../../internal/InternalForm/index';\n\nimport '../AdminTransactionCard/index';\nimport '../AttributeCard/index';\nimport '../AttributeForm/index';\nimport '../Transaction/index';\n\nimport './internal/InternalAdminSubscriptionFormStatusAction/index';\nimport './internal/InternalAdminSubscriptionFormLinkControl/index';\nimport './internal/InternalAdminSubscriptionFormError/index';\n\nimport { AdminSubscriptionForm } from './AdminSubscriptionForm';\n\ncustomElements.define('foxy-admin-subscription-form', AdminSubscriptionForm);\n\nexport { AdminSubscriptionForm };\n"]}

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

@@ -0,0 +1,21 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * Basic card displaying a transaction (`fx:transaction`), for use in Foxy Admin only.
+ *
+ * @element foxy-admin-transaction-card
+ * @since 1.46.0
+ */
+export declare class AdminTransactionCard extends Base<Data> {
+    renderBody(): TemplateResult;
+    get isBodyReady(): boolean;
+    private get __storeLoader();
+    private __renderFolderBadge;
+    private __renderSourceBadge;
+    private __renderTestBadge;
+}
+export {};

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

@@ -0,0 +1,166 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { getResourceId } from '@foxy.io/sdk/core';
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, svg } from 'lit-html';
+import { classMap } from "../../../utils/class-map.js";
+const NS = 'admin-transaction-card';
+const Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));
+/**
+ * Basic card displaying a transaction (`fx:transaction`), for use in Foxy Admin only.
+ *
+ * @element foxy-admin-transaction-card
+ * @since 1.46.0
+ */
+export class AdminTransactionCard extends Base {
+    renderBody() {
+        var _a, _b, _c, _d;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        const data = this.data;
+        const folder = (_b = data === null || data === void 0 ? void 0 : data._embedded) === null || _b === void 0 ? void 0 : _b['fx:folder'];
+        const items = (_c = data === null || data === void 0 ? void 0 : data._embedded) === null || _c === void 0 ? void 0 : _c['fx:items'];
+        const displayId = (data === null || data === void 0 ? void 0 : data.display_id) || (data ? getResourceId(data._links.self.href) : '');
+        const status = (data === null || data === void 0 ? void 0 : data.status) || 'completed';
+        const source = data === null || data === void 0 ? void 0 : data.source;
+        const type = data === null || data === void 0 ? void 0 : data.type;
+        const statusColors = {
+            pending_fraud_review: 'text-error',
+            declined: 'text-error',
+            rejected: 'text-error',
+            problem: 'text-error',
+        };
+        return html `
+      <div class="flex items-center gap-xs">
+        <span class="font-medium">${displayId}</span>
+        ${folder ? this.__renderFolderBadge(folder) : ''}
+        ${source ? this.__renderSourceBadge(source) : ''}
+        ${(data === null || data === void 0 ? void 0 : data.is_test) ? this.__renderTestBadge() : ''}
+        <span class="inline-flex flex-1">&ZeroWidthSpace;</span>
+        ${(data === null || data === void 0 ? void 0 : data.hide_transaction) ? html `
+              <vcf-tooltip for="hidden" theme="light" position="bottom">
+                <foxy-i18n infer="" key="hidden_hint"></foxy-i18n>
+              </vcf-tooltip>
+              <span class="inline-block text-s text-tertiary rounded-s cursor-default" id="hidden">
+                ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z" /><path fill-rule="evenodd" d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z" clip-rule="evenodd" /></svg>`}
+              </span>
+            `
+            : ''}
+        <foxy-i18n
+          options=${JSON.stringify({ value: data === null || data === void 0 ? void 0 : data.transaction_date })}
+          infer=""
+          class="text-s text-tertiary"
+          key="time"
+        >
+        </foxy-i18n>
+      </div>
+      <div class="text-s text-secondary truncate">
+        ${type !== 'updateinfo' && type !== 'subscription_cancellation'
+            ? html `
+              <foxy-i18n
+                options=${JSON.stringify({
+                currencyDisplay: (store === null || store === void 0 ? void 0 : store.use_international_currency_symbol) ? 'code' : 'symbol',
+                amount: `${data === null || data === void 0 ? void 0 : data.total_order} ${data === null || data === void 0 ? void 0 : data.currency_code}`,
+            })}
+                class="whitespace-nowrap"
+                infer=""
+                key="price"
+              >
+              </foxy-i18n>
+              <span>&bull;</span>
+            `
+            : ''}
+        ${items
+            ? html `
+              <foxy-i18n
+                options=${JSON.stringify({
+                count_minus_one: items.length - 1,
+                context: type,
+                first_item: items[0],
+                count: items.length,
+            })}
+                infer=""
+                key="summary"
+              >
+              </foxy-i18n>
+            `
+            : ''}
+      </div>
+      <div class="text-s text-secondary truncate">
+        ${data === null || data === void 0 ? void 0 : data.customer_first_name} ${data === null || data === void 0 ? void 0 : data.customer_last_name} (${data === null || data === void 0 ? void 0 : data.customer_email})
+      </div>
+      <div class="text-s text-secondary truncate">
+        <foxy-i18n class=${statusColors[status] || ''} infer="" key="status_${status}"></foxy-i18n>
+      </div>
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined((_d = this.data) === null || _d === void 0 ? void 0 : _d._links['fx:store'].href)}
+        id="storeLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+    `;
+    }
+    get isBodyReady() {
+        var _a, _b;
+        return super.isBodyReady && (!((_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store']) || !!((_b = this.__storeLoader) === null || _b === void 0 ? void 0 : _b.data));
+    }
+    get __storeLoader() {
+        return this.renderRoot.querySelector('#storeLoader');
+    }
+    __renderFolderBadge(folder) {
+        var _a, _b;
+        const color = (_a = folder.color) !== null && _a !== void 0 ? _a : '';
+        const knownColors = {
+            red: 'bg-folder-red text-white',
+            red_pale: 'bg-folder-red-pale text-black',
+            green: 'bg-folder-green text-white',
+            green_pale: 'bg-folder-green-pale text-black',
+            blue: 'bg-folder-blue text-white',
+            blue_pale: 'bg-folder-blue-pale text-black',
+            orange: 'bg-folder-orange text-white',
+            orange_pale: 'bg-folder-orange-pale text-black',
+            violet: 'bg-folder-violet text-white',
+            violet_pale: 'bg-folder-violet-pale text-black',
+        };
+        return html `
+      <span
+        class=${classMap({
+            'inline-flex items-center gap-xs text-s rounded-s px-xs': true,
+            'bg-contrast-5 text-body': !(color in knownColors),
+            [(_b = knownColors[color]) !== null && _b !== void 0 ? _b : '']: color in knownColors,
+        })}
+      >
+        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" style="width: 1em; height: 1em;"><path d="M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z" /></svg>`}
+        ${(folder === null || folder === void 0 ? void 0 : folder.name) || html `<foxy-i18n infer="" key="folder_no_name"></foxy-i18n>`}
+      </span>
+    `;
+    }
+    __renderSourceBadge(source) {
+        const sourceType = source.substring(0, 3).toUpperCase();
+        return html `
+      <span class="cursor-default text-s px-xs bg-contrast-5 rounded-s" id="source">
+        ${sourceType}
+      </span>
+      <vcf-tooltip for="source" theme="light" position="bottom">
+        <foxy-i18n infer="" key="source_${sourceType}"></foxy-i18n>
+      </vcf-tooltip>
+    `;
+    }
+    __renderTestBadge() {
+        return html `
+      <foxy-i18n infer="" class="inline-block text-s bg-contrast-5 rounded-s px-xs" key="test">
+      </foxy-i18n>
+    `;
+    }
+}
+//# sourceMappingURL=AdminTransactionCard.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"AdminTransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminTransactionCard/AdminTransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Data } from './types';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'admin-transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction (`fx:transaction`), for use in Foxy Admin only.\n *\n * @element foxy-admin-transaction-card\n * @since 1.46.0\n */\nexport class AdminTransactionCard extends Base<Data> {\n renderBody(): TemplateResult {\n const store = this.__storeLoader?.data;\n const data = this.data;\n\n const folder = data?._embedded?.['fx:folder'];\n const items = data?._embedded?.['fx:items'];\n\n const displayId = data?.display_id || (data ? getResourceId(data._links.self.href) : '');\n const status = data?.status || 'completed';\n const source = data?.source;\n const type = data?.type;\n\n const statusColors: Record<string, string> = {\n pending_fraud_review: 'text-error',\n declined: 'text-error',\n rejected: 'text-error',\n problem: 'text-error',\n };\n\n return html`\n <div class=\"flex items-center gap-xs\">\n <span class=\"font-medium\">${displayId}</span>\n\n ${folder ? this.__renderFolderBadge(folder) : ''}\n ${source ? this.__renderSourceBadge(source) : ''}\n ${data?.is_test ? this.__renderTestBadge() : ''}\n\n <span class=\"inline-flex flex-1\">&ZeroWidthSpace;</span>\n\n ${data?.hide_transaction\n ? html`\n <vcf-tooltip for=\"hidden\" theme=\"light\" position=\"bottom\">\n <foxy-i18n infer=\"\" key=\"hidden_hint\"></foxy-i18n>\n </vcf-tooltip>\n <span class=\"inline-block text-s text-tertiary rounded-s cursor-default\" id=\"hidden\">\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z\" /><path fill-rule=\"evenodd\" d=\"M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z\" clip-rule=\"evenodd\" /></svg>`}\n </span>\n `\n : ''}\n\n <foxy-i18n\n options=${JSON.stringify({ value: data?.transaction_date })}\n infer=\"\"\n class=\"text-s text-tertiary\"\n key=\"time\"\n >\n </foxy-i18n>\n </div>\n\n <div class=\"text-s text-secondary truncate\">\n ${type !== 'updateinfo' && type !== 'subscription_cancellation'\n ? html`\n <foxy-i18n\n options=${JSON.stringify({\n currencyDisplay: store?.use_international_currency_symbol ? 'code' : 'symbol',\n amount: `${data?.total_order} ${data?.currency_code}`,\n })}\n class=\"whitespace-nowrap\"\n infer=\"\"\n key=\"price\"\n >\n </foxy-i18n>\n <span>•</span>\n `\n : ''}\n ${items\n ? html`\n <foxy-i18n\n options=${JSON.stringify({\n count_minus_one: items.length - 1,\n context: type,\n first_item: items[0],\n count: items.length,\n })}\n infer=\"\"\n key=\"summary\"\n >\n </foxy-i18n>\n `\n : ''}\n </div>\n\n <div class=\"text-s text-secondary truncate\">\n ${data?.customer_first_name} ${data?.customer_last_name} (${data?.customer_email})\n </div>\n\n <div class=\"text-s text-secondary truncate\">\n <foxy-i18n class=${statusColors[status] || ''} infer=\"\" key=\"status_${status}\"></foxy-i18n>\n </div>\n\n <foxy-nucleon\n infer=\"\"\n class=\"hidden\"\n href=${ifDefined(this.data?._links['fx:store'].href)}\n id=\"storeLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n get isBodyReady(): boolean {\n return super.isBodyReady && (!this.data?._links['fx:store'] || !!this.__storeLoader?.data);\n }\n\n private get __storeLoader() {\n type Loader = NucleonElement<Resource<Rels.Store>>;\n return this.renderRoot.querySelector<Loader>('#storeLoader');\n }\n\n private __renderFolderBadge(folder: Data['_embedded']['fx:folder']) {\n const color = folder.color ?? '';\n const knownColors: Record<string, string> = {\n red: 'bg-folder-red text-white',\n red_pale: 'bg-folder-red-pale text-black',\n green: 'bg-folder-green text-white',\n green_pale: 'bg-folder-green-pale text-black',\n blue: 'bg-folder-blue text-white',\n blue_pale: 'bg-folder-blue-pale text-black',\n orange: 'bg-folder-orange text-white',\n orange_pale: 'bg-folder-orange-pale text-black',\n violet: 'bg-folder-violet text-white',\n violet_pale: 'bg-folder-violet-pale text-black',\n };\n\n return html`\n <span\n class=${classMap({\n 'inline-flex items-center gap-xs text-s rounded-s px-xs': true,\n 'bg-contrast-5 text-body': !(color in knownColors),\n [knownColors[color] ?? '']: color in knownColors,\n })}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"width: 1em; height: 1em;\"><path d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h2.879a1.5 1.5 0 0 1 1.06.44l1.122 1.12A1.5 1.5 0 0 0 9.62 4H12.5A1.5 1.5 0 0 1 14 5.5v1.401a2.986 2.986 0 0 0-1.5-.401h-9c-.546 0-1.059.146-1.5.401V3.5ZM2 9.5v3A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-3A1.5 1.5 0 0 0 12.5 8h-9A1.5 1.5 0 0 0 2 9.5Z\" /></svg>`}\n ${folder?.name || html`<foxy-i18n infer=\"\" key=\"folder_no_name\"></foxy-i18n>`}\n </span>\n `;\n }\n\n private __renderSourceBadge(source: Data['source']) {\n const sourceType = source.substring(0, 3).toUpperCase() as 'MIT' | 'CIT';\n\n return html`\n <span class=\"cursor-default text-s px-xs bg-contrast-5 rounded-s\" id=\"source\">\n ${sourceType}\n </span>\n <vcf-tooltip for=\"source\" theme=\"light\" position=\"bottom\">\n <foxy-i18n infer=\"\" key=\"source_${sourceType}\"></foxy-i18n>\n </vcf-tooltip>\n `;\n }\n\n private __renderTestBadge() {\n return html`\n <foxy-i18n infer=\"\" class=\"inline-block text-s bg-contrast-5 rounded-s px-xs\" key=\"test\">\n </foxy-i18n>\n `;\n }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '@vaadin-component-factory/vcf-tooltip';
+import '../../internal/InternalCard/index';
+import '../NucleonElement/index';
+import '../I18n/index';
+import { AdminTransactionCard } from './AdminTransactionCard';
+export { AdminTransactionCard };

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

@@ -0,0 +1,8 @@
+import '@vaadin-component-factory/vcf-tooltip';
+import "../../internal/InternalCard/index.js";
+import "../NucleonElement/index.js";
+import "../I18n/index.js";
+import { AdminTransactionCard } from "./AdminTransactionCard.js";
+customElements.define('foxy-admin-transaction-card', AdminTransactionCard);
+export { AdminTransactionCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminTransactionCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,8CAA2C;AAC3C,oCAAiC;AACjC,0BAAuB;AAEvB,OAAO,EAAE,oBAAoB,EAAE,kCAA+B;AAE9D,cAAc,CAAC,MAAM,CAAC,6BAA6B,EAAE,oBAAoB,CAAC,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,CAAC","sourcesContent":["import '@vaadin-component-factory/vcf-tooltip';\nimport '../../internal/InternalCard/index';\nimport '../NucleonElement/index';\nimport '../I18n/index';\n\nimport { AdminTransactionCard } from './AdminTransactionCard';\n\ncustomElements.define('foxy-admin-transaction-card', AdminTransactionCard);\n\nexport { AdminTransactionCard };\n"]}

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

@@ -0,0 +1,5 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Data = Resource<Rels.Transaction, {
+    zoom: ['items', 'folder'];
+}>;

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

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

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

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

package/dist/elements/public/CartForm/internal/InternalCartFormTotalsControl/InternalCartFormTotalsControl.js CHANGED Viewed

@@ -32,14 +32,14 @@ export class InternalCartFormTotalsControl extends InternalControl {
         <span><foxy-i18n infer="" key="total_tax"></foxy-i18n>&colon;</span>
         <span>${this.__renderPrice(data.total_tax, true)}</span>
-        ${
-        // @ts-expect-error SDK doesn't support name mismatch between `fx:applied_gift_card_codes` and `fx:gift_card_logs`
-        (_c = (_b = data === null || data === void 0 ? void 0 : data._embedded) === null || _b === void 0 ? void 0 : _b['fx:applied_gift_card_codes']) === null || _c === void 0 ? void 0 : _c.map(code => {
+        ${(_c = (_b = data === null || data === void 0 ? void 0 : data._embedded) === null || _b === void 0 ? void 0 : _b['fx:gift_card_code_logs']) === null || _c === void 0 ? void 0 : _c.map(code => {
             var _a;
+            // @ts-expect-error deep zoom is not supported by the SDK types
+            const name = code._embedded['fx:gift_card'].name;
             return html `
-              <span>${code._embedded['fx:gift_card'].name}&colon;</span>
-              <span>${this.__renderPrice((_a = code.balance_adjustment) !== null && _a !== void 0 ? _a : 0, true)}</span>
-            `;
+            <span>${name}&colon;</span>
+            <span>${this.__renderPrice((_a = code.balance_adjustment) !== null && _a !== void 0 ? _a : 0, true)}</span>
+          `;
         })}
         ${(_e = (_d = data === null || data === void 0 ? void 0 : data._embedded) === null || _d === void 0 ? void 0 : _d['fx:discounts']) === null || _e === void 0 ? void 0 : _e.map(discount => {
             return html `