npm - @foxy.io/elements - Versions diffs - 1.8.0 → 1.8.1-beta.1 - Mend

@foxy.io/elements 1.8.0 → 1.8.1-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 (84) hide show

package/dist/elements/public/CustomerPortalSettings/private/DisallowedDates/DisallowedDates.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DisallowedDates.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/DisallowedDates/DisallowedDates.ts"],"names":[],"mappings":"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~~qBAAqB~~,EAAE,IAAI;~~gBAC3B~~,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;gBACvC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;aACxC,CAAC;;;aAGL;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAEM,OAAO;QACZ,MAAM,UAAU,GAAG,oBAAoB,CAAC;QACxC,MAAM,UAAU,GAAI,IAAI,CAAC,WAAyC,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAChG,MAAM,OAAO,GAAG,IAAI,CAAC,UAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAE9D,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAE,MAA4B,CAAC,QAAQ,EAAE,CAAC,CAAC;IAClF,CAAC;IAEO,wBAAwB,CAAC,GAAe;QAC9C,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,YAAY,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QAE5D,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,YAAY,CAAE,CAAC;QAC5C,IAAI,GAAG,IAAI,GAAG,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE;YAAE,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QAEjE,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,sBAAsB,CAAC,GAAe;QAC5C,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,UAAU,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QAC1D,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,EAAE;YACxC,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SAC/E;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SACjD;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAEO,kBAAkB,CAAC,GAAoB;QAC7C,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IACjE,CAAC;CACF","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { ScopedElementsHost } from '@open-wc/scoped-elements/src/types';\nimport '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { DatePickerElement } from '@vaadin/vaadin-date-picker';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { parseDate } from '../../../../../utils/parse-date';\nimport { translateDate } from '../../../../../utils/translate-date';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { I18N, List, Skeleton } from '../../../../private/index';\nimport { DisallowedDatesChangeEvent } from './DisallowedDatesChangeEvent';\n\nexport class DisallowedDates extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-date-picker': DatePickerElement,\n 'vaadin-button': ButtonElement,\n 'x-skeleton': Skeleton,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-i18n': I18N,\n 'x-list': List,\n };\n }\n\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __startValue = '';\n\n private __endValue = '';\n\n public render(): TemplateResult {\n const isInputDisabled = this.value.length >= 20 \|\| this.disabled \|\| !this._isI18nReady;\n\n return html`\n <x-list\n data-testid=\"list\"\n .value=${this.value}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${this.__handleListChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`<span slot=${index} class=\"truncate\">${translateDate(item, this.lang)}</span>`\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"sm-flex sm-items-end\">\n <div class=\"grid grid-cols-2 gap-s\">\n <vaadin-date-picker\n data-testid=\"start\"\n .label=${this._t('ndmod.range_start').toString()}\n .value=${this.__startValue}\n .disabled=${isInputDisabled}\n .placeholder=${this._isI18nReady ? this._t('ndmod.select').toString() : ''}\n @change=${this.__handleStartValueChange}\n >\n </vaadin-date-picker>\n\n <vaadin-date-picker\n data-testid=\"end\"\n .min=${this.__startValue}\n .label=${this._t('ndmod.range_end').toString()}\n .value=${this.__endValue}\n .disabled=${isInputDisabled \|\| !this.__startValue}\n .placeholder=${this._isI18nReady ? this._t('ndmod.select').toString() : ''}\n clear-button-visible\n @change=${this.__handleEndValueChange}\n >\n </vaadin-date-picker>\n </div>\n\n <vaadin-button\n .disabled=${isInputDisabled \|\| !this.__startValue}\n data-testid=\"submit\"\n class=\"w-full mt-s sm-mt-0 sm-w-auto sm-ml-s\"\n @click=${this.__submit}\n >\n <x-i18n\n .lang=${this.lang}\n .key=\"ndmod.add_${this.__endValue ? 'range' : 'single'}\"\n .ns=${this.ns}\n >\n </x-i18n>\n <iron-icon icon=\"icons:add\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.value.length > 0\n ? html`\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=\"ndmod.add_range_hint\"\n class=${classMap({\n 'block text-xs mt-xs': true,\n 'text-tertiary': this.value.length < 20,\n 'text-primary': this.value.length >= 20,\n })}\n >\n </x-i18n>\n `\n : ''}\n </x-list>\n `;\n }\n\n public updated(): void {\n const globalName = 'vaadin-date-picker';\n const scopedName = (this.constructor as typeof ScopedElementsHost).getScopedTagName(globalName);\n const pickers = this.shadowRoot!.querySelectorAll(scopedName);\n\n Array.from(pickers).forEach(picker => (picker as DatePickerElement).validate());\n }\n\n private __handleStartValueChange(evt: InputEvent) {\n evt.stopPropagation();\n this.__startValue = (evt.target as DatePickerElement).value;\n\n const end = parseDate(this.__endValue);\n const start = parseDate(this.__startValue)!;\n if (end && end.getTime() < start.getTime()) this.__endValue = '';\n\n this.requestUpdate();\n }\n\n private __handleEndValueChange(evt: InputEvent) {\n evt.stopPropagation();\n this.__endValue = (evt.target as DatePickerElement).value;\n this.requestUpdate();\n }\n\n private __submit() {\n if (this.__startValue && this.__endValue) {\n this.value = [...this.value, [this.__startValue, this.__endValue].join('..')];\n } else {\n this.value = [...this.value, this.__startValue];\n }\n\n this.__sendChange();\n this.__startValue = '';\n this.__endValue = '';\n }\n\n private __handleListChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n\n private __sendChange() {\n this.dispatchEvent(new DisallowedDatesChangeEvent(this.value));\n }\n}\n"]}
1	+ {"version":3,"file":"DisallowedDates.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/DisallowedDates/DisallowedDates.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { ScopedElementsHost } from '@open-wc/scoped-elements/src/types';\nimport '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { DatePickerElement } from '@vaadin/vaadin-date-picker';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { parseDate } from '../../../../../utils/parse-date';\nimport { translateDate } from '../../../../../utils/translate-date';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { I18N, List, Skeleton } from '../../../../private/index';\nimport { DisallowedDatesChangeEvent } from './DisallowedDatesChangeEvent';\n\nexport class DisallowedDates extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-date-picker': DatePickerElement,\n 'vaadin-button': ButtonElement,\n 'x-skeleton': Skeleton,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-i18n': I18N,\n 'x-list': List,\n };\n }\n\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __startValue = '';\n\n private __endValue = '';\n\n public render(): TemplateResult {\n const isInputDisabled = this.value.length >= 20 \|\| this.disabled \|\| !this._isI18nReady;\n\n return html`\n <x-list\n data-testid=\"list\"\n .value=${this.value}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${this.__handleListChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`<span slot=${index} class=\"truncate\">${translateDate(item, this.lang)}</span>`\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"sm-flex sm-items-end\">\n <div class=\"grid grid-cols-2 gap-s\">\n <vaadin-date-picker\n data-testid=\"start\"\n .label=${this._t('ndmod.range_start').toString()}\n .value=${this.__startValue}\n .disabled=${isInputDisabled}\n .placeholder=${this._isI18nReady ? this._t('ndmod.select').toString() : ''}\n @change=${this.__handleStartValueChange}\n >\n </vaadin-date-picker>\n\n <vaadin-date-picker\n data-testid=\"end\"\n .min=${this.__startValue}\n .label=${this._t('ndmod.range_end').toString()}\n .value=${this.__endValue}\n .disabled=${isInputDisabled \|\| !this.__startValue}\n .placeholder=${this._isI18nReady ? this._t('ndmod.select').toString() : ''}\n clear-button-visible\n @change=${this.__handleEndValueChange}\n >\n </vaadin-date-picker>\n </div>\n\n <vaadin-button\n .disabled=${isInputDisabled \|\| !this.__startValue}\n data-testid=\"submit\"\n class=\"w-full mt-s sm-mt-0 sm-w-auto sm-ml-s\"\n @click=${this.__submit}\n >\n <x-i18n\n .lang=${this.lang}\n .key=\"ndmod.add_${this.__endValue ? 'range' : 'single'}\"\n .ns=${this.ns}\n >\n </x-i18n>\n <iron-icon icon=\"icons:add\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.value.length > 0\n ? html`\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=\"ndmod.add_range_hint\"\n class=${classMap({\n 'block text-xs mt-xs text-center sm-text-left': true,\n 'text-tertiary': this.value.length < 20,\n 'text-primary': this.value.length >= 20,\n })}\n >\n </x-i18n>\n `\n : ''}\n </x-list>\n `;\n }\n\n public updated(): void {\n const globalName = 'vaadin-date-picker';\n const scopedName = (this.constructor as typeof ScopedElementsHost).getScopedTagName(globalName);\n const pickers = this.shadowRoot!.querySelectorAll(scopedName);\n\n Array.from(pickers).forEach(picker => (picker as DatePickerElement).validate());\n }\n\n private __handleStartValueChange(evt: InputEvent) {\n evt.stopPropagation();\n this.__startValue = (evt.target as DatePickerElement).value;\n\n const end = parseDate(this.__endValue);\n const start = parseDate(this.__startValue)!;\n if (end && end.getTime() < start.getTime()) this.__endValue = '';\n\n this.requestUpdate();\n }\n\n private __handleEndValueChange(evt: InputEvent) {\n evt.stopPropagation();\n this.__endValue = (evt.target as DatePickerElement).value;\n this.requestUpdate();\n }\n\n private __submit() {\n if (this.__startValue && this.__endValue) {\n this.value = [...this.value, [this.__startValue, this.__endValue].join('..')];\n } else {\n this.value = [...this.value, this.__startValue];\n }\n\n this.__sendChange();\n this.__startValue = '';\n this.__endValue = '';\n }\n\n private __handleListChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n\n private __sendChange() {\n this.dispatchEvent(new DisallowedDatesChangeEvent(this.value));\n }\n}\n"]}

package/dist/elements/public/CustomerPortalSettings/private/FrequencyList/FrequencyList.js CHANGED Viewed

@@ -41,9 +41,10 @@ export class FrequencyList extends Translatable {
             ? html `<span slot=${index}>${this.__getText(item)}</span>`
             : html `<x-skeleton slot=${index}>${item}</x-skeleton>`)}
-        <div class="space-y-s md-space-y-0 md-space-x-s w-full md-flex">
+        <div class="w-full md-flex">
           <x-frequency-input
             data-testid="input"
+            class="mb-s md-mb-0 md-mr-s"
             .lang=${this.lang}
             .value=${this.__newValue}
             .disabled=${isInputDisabled}
@@ -69,7 +70,7 @@ export class FrequencyList extends Translatable {
                 .lang=${this.lang}
                 key="fmod.add_option_hint"
                 class=${classMap({
-                'block text-xs mt-xs': true,
+                'block text-xs mt-xs text-center md-text-left': true,
                 'text-tertiary': this.value.length < 20,
                 'text-primary': this.value.length >= 20,
             })}

package/dist/elements/public/CustomerPortalSettings/private/FrequencyList/FrequencyList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FrequencyList.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/FrequencyList/FrequencyList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAwC,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,8CAA2C;AAClE,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAE1D,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,qCAAkC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,wBAAwB,EAAE,sCAAmC;AAEtE,MAAM,OAAO,aAAc,SAAQ,YAAY;IA0B7C;QACE,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAP7B,UAAK,GAAa,EAAE,CAAC;QAErB,aAAQ,GAAG,KAAK,CAAC;QAEhB,eAAU,GAAG,cAAc,CAAC,YAAY,CAAC;IAIjD,CAAC;IA3BM,MAAM,KAAK,cAAc;QAC9B,OAAO;YACL,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;YACpD,mBAAmB,EAAE,cAAc;YACnC,YAAY,EAAE,QAAQ;YACtB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI;SACf,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACtB,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC5B,CAAC;IACJ,CAAC;IAYM,MAAM;QACX,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC;QAEvF,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY;kBACrC,IAAI,CAAC,kBAAkB;;UAE/B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,IAAI,CAAC,YAAY;YACf,CAAC,CAAC,IAAI,CAAA,cAAc,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS;YAC1D,CAAC,CAAC,IAAI,CAAA,oBAAoB,KAAK,IAAI,IAAI,eAAe,CACzD~~;;;;;oBAKW~~,IAAI,CAAC,IAAI;qBACR,IAAI,CAAC,UAAU;wBACZ,eAAe;sBACjB,IAAI,CAAC,sBAAsB;;;;;;;wBAOzB,eAAe;qBAClB,IAAI,CAAC,cAAc;;0BAEd,IAAI,CAAC,EAAE,UAAU,IAAI,CAAC,IAAI;;;;;UAK1C,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;YACrB,CAAC,CAAC,IAAI,CAAA;;sBAEM,IAAI,CAAC,EAAE;wBACL,IAAI,CAAC,IAAI;;wBAET,QAAQ,CAAC;gBACf,~~qBAAqB~~,EAAE,IAAI;~~gBAC3B~~,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;gBACvC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;aACxC,CAAC;;;aAGL;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAEO,sBAAsB,CAAC,GAA8B;QAC3D,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,MAAgB,CAAC;IACzC,CAAC;IAEO,kBAAkB,CAAC,GAAoB;QAC7C,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9C,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC;QAC9C,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IAEO,SAAS,CAAC,KAAa;QAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAC1E,CAAC;CACF","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { I18N, List, Skeleton } from '../../../../private/index';\nimport { FrequencyInput } from '../FrequencyInput/FrequencyInput';\nimport { FrequencyInputChangeEvent } from '../FrequencyInput/FrequencyInputChangeEvent';\nimport { FrequencyListChangeEvent } from './FrequencyListChangeEvent';\n\nexport class FrequencyList extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'iron-icon': customElements.get('iron-icon'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-frequency-input': FrequencyInput,\n 'x-skeleton': Skeleton,\n 'x-list': List,\n 'x-i18n': I18N,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __newValue = FrequencyInput.defaultValue;\n\n public constructor() {\n super('customer-portal-settings');\n }\n\n public render(): TemplateResult {\n const isInputDisabled = this.disabled \|\| !this._isI18nReady \|\| this.value.length >= 20;\n\n return html`\n <x-list\n data-testid=\"list\"\n .value=${this.value}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${this.__handleListChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`<span slot=${index}>${this.__getText(item)}</span>`\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"~~space-y-s md-space-y-0 md-space-x-s~~ w-full md-flex\">\n <x-frequency-input\n data-testid=\"input\"\n .lang=${this.lang}\n .value=${this.__newValue}\n .disabled=${isInputDisabled}\n @change=${this.__handleNewValueChange}\n >\n </x-frequency-input>\n\n <vaadin-button\n data-testid=\"button\"\n class=\"w-full md-w-auto\"\n .disabled=${isInputDisabled}\n @click=${this.__handleSubmit}\n >\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"fmod.add_option\"></x-i18n>\n <iron-icon icon=\"lumo:plus\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.value.length > 0\n ? html`\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=\"fmod.add_option_hint\"\n class=${classMap({\n 'block text-xs mt-xs': true,\n 'text-tertiary': this.value.length < 20,\n 'text-primary': this.value.length >= 20,\n })}\n >\n </x-i18n>\n `\n : ''}\n </x-list>\n `;\n }\n\n private __handleNewValueChange(evt: FrequencyInputChangeEvent) {\n this.__newValue = evt.detail as string;\n }\n\n private __handleListChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n\n private __handleSubmit() {\n this.value = [...this.value, this.__newValue];\n this.__newValue = FrequencyInput.defaultValue;\n this.__sendChange();\n }\n\n private __sendChange() {\n this.dispatchEvent(new FrequencyListChangeEvent(this.value));\n }\n\n private __getText(value: string) {\n const units = value[value.length - 1];\n const count = parseInt(value.replace(units, ''));\n return this._t('duration', { count, units: this._t(units, { count }) });\n }\n}\n"]}
1	+ {"version":3,"file":"FrequencyList.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/FrequencyList/FrequencyList.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { I18N, List, Skeleton } from '../../../../private/index';\nimport { FrequencyInput } from '../FrequencyInput/FrequencyInput';\nimport { FrequencyInputChangeEvent } from '../FrequencyInput/FrequencyInputChangeEvent';\nimport { FrequencyListChangeEvent } from './FrequencyListChangeEvent';\n\nexport class FrequencyList extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'iron-icon': customElements.get('iron-icon'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-frequency-input': FrequencyInput,\n 'x-skeleton': Skeleton,\n 'x-list': List,\n 'x-i18n': I18N,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __newValue = FrequencyInput.defaultValue;\n\n public constructor() {\n super('customer-portal-settings');\n }\n\n public render(): TemplateResult {\n const isInputDisabled = this.disabled \|\| !this._isI18nReady \|\| this.value.length >= 20;\n\n return html`\n <x-list\n data-testid=\"list\"\n .value=${this.value}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${this.__handleListChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`<span slot=${index}>${this.__getText(item)}</span>`\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"w-full md-flex\">\n <x-frequency-input\n data-testid=\"input\"\n class=\"mb-s md-mb-0 md-mr-s\"\n .lang=${this.lang}\n .value=${this.__newValue}\n .disabled=${isInputDisabled}\n @change=${this.__handleNewValueChange}\n >\n </x-frequency-input>\n\n <vaadin-button\n data-testid=\"button\"\n class=\"w-full md-w-auto\"\n .disabled=${isInputDisabled}\n @click=${this.__handleSubmit}\n >\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"fmod.add_option\"></x-i18n>\n <iron-icon icon=\"lumo:plus\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n </div>\n\n ${this.value.length > 0\n ? html`\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=\"fmod.add_option_hint\"\n class=${classMap({\n 'block text-xs mt-xs text-center md-text-left': true,\n 'text-tertiary': this.value.length < 20,\n 'text-primary': this.value.length >= 20,\n })}\n >\n </x-i18n>\n `\n : ''}\n </x-list>\n `;\n }\n\n private __handleNewValueChange(evt: FrequencyInputChangeEvent) {\n this.__newValue = evt.detail as string;\n }\n\n private __handleListChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n\n private __handleSubmit() {\n this.value = [...this.value, this.__newValue];\n this.__newValue = FrequencyInput.defaultValue;\n this.__sendChange();\n }\n\n private __sendChange() {\n this.dispatchEvent(new FrequencyListChangeEvent(this.value));\n }\n\n private __getText(value: string) {\n const units = value[value.length - 1];\n const count = parseInt(value.replace(units, ''));\n return this._t('duration', { count, units: this._t(units, { count }) });\n }\n}\n"]}

package/dist/elements/public/CustomerPortalSettings/private/NextDateModificationRule/NextDateModificationRule.js CHANGED Viewed

@@ -106,8 +106,8 @@ export class NextDateModificationRule extends Translatable {
               </x-jsonata-input>
             </x-group>
-            <div class="flex space-y-l md-space-y-0 flex-col md-flex-row">
-              <div class="md-w-1-2 md-border-r md-border-contrast-10">
+            <div class="flex flex-col md-flex-row">
+              <div class="mb-l md-mb-0 md-w-1-2 md-border-r md-border-contrast-10">
                 <x-offset-input
                   data-testid="min"
                   type="min"

package/dist/elements/public/CustomerPortalSettings/private/NextDateModificationRule/NextDateModificationRule.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NextDateModificationRule.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/NextDateModificationRule/NextDateModificationRule.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { concatTruthy } from '../../../../../utils/concat-truthy';\nimport { parseDuration } from '../../../../../utils/parse-duration';\nimport { prevent } from '../../../../../utils/prevent';\nimport { translateDate } from '../../../../../utils/translate-date';\nimport { translateWeekday } from '../../../../../utils/translate-weekday';\nimport { Group, I18N, Warning } from '../../../../private/index';\nimport { AllowedDays } from '../AllowedDays/AllowedDays';\nimport { AllowedDaysChangeEvent } from '../AllowedDays/AllowedDaysChangeEvent';\nimport { DisallowedDates } from '../DisallowedDates/DisallowedDates';\nimport { DisallowedDatesChangeEvent } from '../DisallowedDates/DisallowedDatesChangeEvent';\nimport { JSONataInput } from '../JSONataInput/JSONataInput';\nimport { JSONataInputChangeEvent } from '../JSONataInput/JSONataInputChangeEvent';\nimport { OffsetInput } from '../OffsetInput/OffsetInput';\nimport { OffsetInputChangeEvent } from '../OffsetInput/OffsetInputChangeEvent';\nimport { NextDateModificationRuleChangeEvent } from './NextDateModificationRuleChangeEvent';\nimport { NextDateModificationRuleRemoveEvent } from './NextDateModificationRuleRemoveEvent';\nimport { Rule } from './Rule';\n\nexport class NextDateModificationRule extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'x-disallowed-dates': DisallowedDates,\n 'x-jsonata-input': JSONataInput,\n 'x-offset-input': OffsetInput,\n 'x-allowed-days': AllowedDays,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-warning': Warning,\n 'x-group': Group,\n 'x-i18n': I18N,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n disabled: { type: Boolean },\n value: { type: Object },\n open: { type: Boolean },\n };\n }\n\n public disabled = false;\n\n public value: Rule = { jsonataQuery: '' };\n\n public open = false;\n\n public constructor() {\n super('customer-portal-settings');\n }\n\n public render(): TemplateResult {\n const { min, max, allowedDays, jsonataQuery, disallowedDates } = this.value;\n const hasOffset = min \|\| max;\n const hasAllowed = allowedDays && allowedDays.days.length > 0;\n const hasDisallowed = disallowedDates && disallowedDates.length > 0;\n const openStyle = this.open ? '' : 'rounded-b-l';\n\n return html`\n <x-group frame>\n <details\n data-testid=\"details\"\n class=${classMap({ 'font-lumo': true, 'pointer-events-none': !this._isI18nReady })}\n ?open=${this.open}\n @toggle=${() => (this.open = !this.open)}\n >\n <summary\n class=\"${openStyle} cursor-pointer relative leading-s rounded-t-l focus-outline-none focus-shadow-outline\"\n >\n <div class=\"p-m mr-xl text-m text-header font-medium space-y-s\">\n <div>\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=${`ndmod.${jsonataQuery === '' ? 'all' : 'some'}Title`}\n >\n ${jsonataQuery !== '' ? this.__renderJSONataSummary(jsonataQuery) : ''}\n </x-i18n>\n </div>\n\n ${hasOffset \|\| hasAllowed \|\| hasDisallowed\n ? html`\n <div>\n ${concatTruthy(\n hasOffset && this.__renderMinMaxSummary(min, max),\n hasAllowed && this.__renderAllowedSummary(allowedDays!),\n hasDisallowed && this.__renderDisallowedSummary(disallowedDates!)\n )}\n </div>\n `\n : ''}\n </div>\n\n <button\n data-testid=\"remove\"\n .disabled=${this.disabled \|\| !this._isI18nReady}\n class=\"flex items-center justify-center rounded absolute top-0 right-0 text-tertiary hover-text-secondary disabled-text-tertiary disabled-opacity-50 disabled-cursor-default focus-outline-none focus-shadow-outline\"\n style=\"width: 54px; height: 54px\"\n @click=${prevent(() => this.dispatchEvent(new NextDateModificationRuleRemoveEvent()))}\n >\n <iron-icon icon=\"lumo:cross\"></iron-icon>\n </button>\n </summary>\n\n <article class=\"space-y-l\">\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.match\"> </x-i18n>\n\n <x-jsonata-input\n data-testid=\"jsonata\"\n .ns=${this.ns}\n .lang=${this.lang}\n .value=${jsonataQuery}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: JSONataInputChangeEvent) => {\n this.value = { ...this.value, jsonataQuery: evt.detail as string };\n this.__sendUpdate();\n }}\n >\n </x-jsonata-input>\n </x-group>\n\n <div class=\"flex space-y-l md-space-y-0 flex-col md-flex-row\">\n <div class=\"md-w-1-2 md-border-r md-border-contrast-10\">\n <x-offset-input\n data-testid=\"min\"\n type=\"min\"\n .lang=${this.lang}\n .value=${min}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: OffsetInputChangeEvent) => {\n this.value = { ...this.value, min: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-offset-input>\n </div>\n\n <div class=\"md-w-1-2\">\n <x-offset-input\n data-testid=\"max\"\n type=\"max\"\n .lang=${this.lang}\n .value=${max}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: OffsetInputChangeEvent) => {\n this.value = { ...this.value, max: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-offset-input>\n </div>\n </div>\n\n ${this.__compareDurations(min, max) === -1\n ? html`\n <x-warning class=\"mx-m\" data-testid=\"warning\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.minWarning\"> </x-i18n>\n </x-warning>\n `\n : ''}\n\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.allowed\"> </x-i18n>\n\n <x-allowed-days\n data-testid=\"allowed\"\n .lang=${this.lang}\n .value=${allowedDays}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: AllowedDaysChangeEvent) => {\n this.value = { ...this.value, allowedDays: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-allowed-days>\n </x-group>\n\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.excluded\">\n </x-i18n>\n\n <x-disallowed-dates\n data-testid=\"disallowed\"\n .ns=${this.ns}\n .lang=${this.lang}\n .value=${disallowedDates ?? []}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: DisallowedDatesChangeEvent) => {\n this.value = { ...this.value, disallowedDates: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-disallowed-dates>\n </x-group>\n </article>\n </details>\n </x-group>\n `;\n }\n\n private __sendUpdate() {\n this.dispatchEvent(new NextDateModificationRuleChangeEvent(this.value));\n }\n\n private __getEstimatedDaysFrom(duration: string) {\n const { count, units } = parseDuration(duration);\n const multipliers = { y: 365, m: 31, w: 7, d: 1 };\n\n return count multipliers[units as 'y' \| 'm' \| 'w' \| 'd'];\n }\n\n private __compareDurations(a: string \| undefined, b: string \| undefined) {\n if (a === b) return 0;\n if (!a \|\| !b) return 1;\n if (this.__getEstimatedDaysFrom(a) < this.__getEstimatedDaysFrom(b)) return 1;\n return -1;\n }\n\n private __renderJSONataSummary(content: string) {\n return html`\n <code class=\"inline-block rounded bg-success-10 text-success px-xs text-xs leading-s\">\n ${content}\n </code>\n `;\n }\n\n private __renderMinMaxContent(result?: ReturnType<typeof parseDuration>) {\n if (result) {\n const { count, units } = result;\n return html`\n ${count}\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=${units} .opts=${{ count }}></x-i18n>\n `;\n } else {\n return html`<x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.any\"></x-i18n>`;\n }\n }\n\n private __renderMinMaxSummary(min?: string, max?: string) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.range\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${this.__renderMinMaxContent(min ? parseDuration(min) : undefined)} —\n ${this.__renderMinMaxContent(max ? parseDuration(max) : undefined)}\n </span>\n </x-i18n>\n </div>\n `;\n }\n\n private __renderAllowedSummary({ type, days }: Required<Rule>['allowedDays']) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.allowed\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${type === 'month' ? days.join(', ') : ''}\n ${type === 'day'\n ? days.map(day => translateWeekday(day, this.lang, 'short')).join(', ')\n : ''}\n </span>\n </x-i18n>\n </div>\n `;\n }\n\n private __renderDisallowedSummary(dates: string[]) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.excluded\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${dates.map(date => translateDate(date, this.lang)).join('; ')}\n </span>\n </x-i18n>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"NextDateModificationRule.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/NextDateModificationRule/NextDateModificationRule.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { concatTruthy } from '../../../../../utils/concat-truthy';\nimport { parseDuration } from '../../../../../utils/parse-duration';\nimport { prevent } from '../../../../../utils/prevent';\nimport { translateDate } from '../../../../../utils/translate-date';\nimport { translateWeekday } from '../../../../../utils/translate-weekday';\nimport { Group, I18N, Warning } from '../../../../private/index';\nimport { AllowedDays } from '../AllowedDays/AllowedDays';\nimport { AllowedDaysChangeEvent } from '../AllowedDays/AllowedDaysChangeEvent';\nimport { DisallowedDates } from '../DisallowedDates/DisallowedDates';\nimport { DisallowedDatesChangeEvent } from '../DisallowedDates/DisallowedDatesChangeEvent';\nimport { JSONataInput } from '../JSONataInput/JSONataInput';\nimport { JSONataInputChangeEvent } from '../JSONataInput/JSONataInputChangeEvent';\nimport { OffsetInput } from '../OffsetInput/OffsetInput';\nimport { OffsetInputChangeEvent } from '../OffsetInput/OffsetInputChangeEvent';\nimport { NextDateModificationRuleChangeEvent } from './NextDateModificationRuleChangeEvent';\nimport { NextDateModificationRuleRemoveEvent } from './NextDateModificationRuleRemoveEvent';\nimport { Rule } from './Rule';\n\nexport class NextDateModificationRule extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'x-disallowed-dates': DisallowedDates,\n 'x-jsonata-input': JSONataInput,\n 'x-offset-input': OffsetInput,\n 'x-allowed-days': AllowedDays,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-warning': Warning,\n 'x-group': Group,\n 'x-i18n': I18N,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n disabled: { type: Boolean },\n value: { type: Object },\n open: { type: Boolean },\n };\n }\n\n public disabled = false;\n\n public value: Rule = { jsonataQuery: '' };\n\n public open = false;\n\n public constructor() {\n super('customer-portal-settings');\n }\n\n public render(): TemplateResult {\n const { min, max, allowedDays, jsonataQuery, disallowedDates } = this.value;\n const hasOffset = min \|\| max;\n const hasAllowed = allowedDays && allowedDays.days.length > 0;\n const hasDisallowed = disallowedDates && disallowedDates.length > 0;\n const openStyle = this.open ? '' : 'rounded-b-l';\n\n return html`\n <x-group frame>\n <details\n data-testid=\"details\"\n class=${classMap({ 'font-lumo': true, 'pointer-events-none': !this._isI18nReady })}\n ?open=${this.open}\n @toggle=${() => (this.open = !this.open)}\n >\n <summary\n class=\"${openStyle} cursor-pointer relative leading-s rounded-t-l focus-outline-none focus-shadow-outline\"\n >\n <div class=\"p-m mr-xl text-m text-header font-medium space-y-s\">\n <div>\n <x-i18n\n .ns=${this.ns}\n .lang=${this.lang}\n key=${`ndmod.${jsonataQuery === '' ? 'all' : 'some'}Title`}\n >\n ${jsonataQuery !== '' ? this.__renderJSONataSummary(jsonataQuery) : ''}\n </x-i18n>\n </div>\n\n ${hasOffset \|\| hasAllowed \|\| hasDisallowed\n ? html`\n <div>\n ${concatTruthy(\n hasOffset && this.__renderMinMaxSummary(min, max),\n hasAllowed && this.__renderAllowedSummary(allowedDays!),\n hasDisallowed && this.__renderDisallowedSummary(disallowedDates!)\n )}\n </div>\n `\n : ''}\n </div>\n\n <button\n data-testid=\"remove\"\n .disabled=${this.disabled \|\| !this._isI18nReady}\n class=\"flex items-center justify-center rounded absolute top-0 right-0 text-tertiary hover-text-secondary disabled-text-tertiary disabled-opacity-50 disabled-cursor-default focus-outline-none focus-shadow-outline\"\n style=\"width: 54px; height: 54px\"\n @click=${prevent(() => this.dispatchEvent(new NextDateModificationRuleRemoveEvent()))}\n >\n <iron-icon icon=\"lumo:cross\"></iron-icon>\n </button>\n </summary>\n\n <article class=\"space-y-l\">\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.match\"> </x-i18n>\n\n <x-jsonata-input\n data-testid=\"jsonata\"\n .ns=${this.ns}\n .lang=${this.lang}\n .value=${jsonataQuery}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: JSONataInputChangeEvent) => {\n this.value = { ...this.value, jsonataQuery: evt.detail as string };\n this.__sendUpdate();\n }}\n >\n </x-jsonata-input>\n </x-group>\n\n <div class=\"flex flex-col md-flex-row\">\n <div class=\"mb-l md-mb-0 md-w-1-2 md-border-r md-border-contrast-10\">\n <x-offset-input\n data-testid=\"min\"\n type=\"min\"\n .lang=${this.lang}\n .value=${min}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: OffsetInputChangeEvent) => {\n this.value = { ...this.value, min: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-offset-input>\n </div>\n\n <div class=\"md-w-1-2\">\n <x-offset-input\n data-testid=\"max\"\n type=\"max\"\n .lang=${this.lang}\n .value=${max}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: OffsetInputChangeEvent) => {\n this.value = { ...this.value, max: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-offset-input>\n </div>\n </div>\n\n ${this.__compareDurations(min, max) === -1\n ? html`\n <x-warning class=\"mx-m\" data-testid=\"warning\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.minWarning\"> </x-i18n>\n </x-warning>\n `\n : ''}\n\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.allowed\"> </x-i18n>\n\n <x-allowed-days\n data-testid=\"allowed\"\n .lang=${this.lang}\n .value=${allowedDays}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: AllowedDaysChangeEvent) => {\n this.value = { ...this.value, allowedDays: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-allowed-days>\n </x-group>\n\n <x-group>\n <x-i18n slot=\"header\" .ns=${this.ns} .lang=${this.lang} key=\"ndmod.excluded\">\n </x-i18n>\n\n <x-disallowed-dates\n data-testid=\"disallowed\"\n .ns=${this.ns}\n .lang=${this.lang}\n .value=${disallowedDates ?? []}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n @change=${(evt: DisallowedDatesChangeEvent) => {\n this.value = { ...this.value, disallowedDates: evt.detail };\n this.__sendUpdate();\n }}\n >\n </x-disallowed-dates>\n </x-group>\n </article>\n </details>\n </x-group>\n `;\n }\n\n private __sendUpdate() {\n this.dispatchEvent(new NextDateModificationRuleChangeEvent(this.value));\n }\n\n private __getEstimatedDaysFrom(duration: string) {\n const { count, units } = parseDuration(duration);\n const multipliers = { y: 365, m: 31, w: 7, d: 1 };\n\n return count multipliers[units as 'y' \| 'm' \| 'w' \| 'd'];\n }\n\n private __compareDurations(a: string \| undefined, b: string \| undefined) {\n if (a === b) return 0;\n if (!a \|\| !b) return 1;\n if (this.__getEstimatedDaysFrom(a) < this.__getEstimatedDaysFrom(b)) return 1;\n return -1;\n }\n\n private __renderJSONataSummary(content: string) {\n return html`\n <code class=\"inline-block rounded bg-success-10 text-success px-xs text-xs leading-s\">\n ${content}\n </code>\n `;\n }\n\n private __renderMinMaxContent(result?: ReturnType<typeof parseDuration>) {\n if (result) {\n const { count, units } = result;\n return html`\n ${count}\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=${units} .opts=${{ count }}></x-i18n>\n `;\n } else {\n return html`<x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.any\"></x-i18n>`;\n }\n }\n\n private __renderMinMaxSummary(min?: string, max?: string) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.range\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${this.__renderMinMaxContent(min ? parseDuration(min) : undefined)} —\n ${this.__renderMinMaxContent(max ? parseDuration(max) : undefined)}\n </span>\n </x-i18n>\n </div>\n `;\n }\n\n private __renderAllowedSummary({ type, days }: Required<Rule>['allowedDays']) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.allowed\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${type === 'month' ? days.join(', ') : ''}\n ${type === 'day'\n ? days.map(day => translateWeekday(day, this.lang, 'short')).join(', ')\n : ''}\n </span>\n </x-i18n>\n </div>\n `;\n }\n\n private __renderDisallowedSummary(dates: string[]) {\n return html`\n <div class=\"text-s text-tertiary font-normal\">\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"ndmod.excluded\">\n <span>:</span>\n <span class=\"text-secondary\">\n ${dates.map(date => translateDate(date, this.lang)).join('; ')}\n </span>\n </x-i18n>\n </div>\n `;\n }\n}\n"]}

package/dist/elements/public/CustomerPortalSettings/private/OriginsList/OriginsList.js CHANGED Viewed

@@ -56,9 +56,10 @@ export class OriginsList extends Translatable {
                 `
             : html `<x-skeleton slot=${index}>${item}</x-skeleton>`)}
-          <div class="flex flex-col space-y-s sm-space-y-0 sm-flex-row sm-space-x-s sm-items-start">
+          <div class="flex flex-col sm-flex-row sm-items-start">
             <vaadin-text-field
               data-testid="input"
+              class="mb-s sm-mb-0 sm-mr-s"
               .placeholder=${this._isI18nReady ? 'https://foxy.io' : ''}
               .errorMessage=${this._t(`origins.${this.__errorCode}`).toString()}
               .disabled=${this.disabled || !this._isI18nReady}

package/dist/elements/public/CustomerPortalSettings/private/OriginsList/OriginsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OriginsList.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/OriginsList/OriginsList.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAAE,IAAI,EAAwC,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,8CAA2C;AAClE,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAE1D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,qCAAkC;AACxE,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAElE,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAsBS,UAAK,GAAa,EAAE,CAAC;QAErB,aAAQ,GAAG,KAAK,CAAC;QAEhB,gBAAW,GAA6B,SAAS,CAAC;QAElD,cAAS,GAAG,KAAK,CAAC;QAElB,eAAU,GAAG,EAAE,CAAC;~~IAgH1B~~,CAAC;~~IA7IQ~~,MAAM,KAAK,cAAc;QAC9B,OAAO;YACL,mBAAmB,EAAE,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAC5D,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC;YACpD,YAAY,EAAE,QAAQ;YACtB,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;YAC5C,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI;SACf,CAAC;IACJ,CAAC;IAEM,MAAM,KAAK,UAAU;QAC1B,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACtB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC5B,CAAC;IACJ,CAAC;IAYM,MAAM;QACX,OAAO,IAAI,CAAA;;;;sBAIO,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY;mBACtC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,cAAc;;YAE3B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC/B,IAAI,CAAC,YAAY;YACf,CAAC,CAAC,IAAI,CAAA;wDACoC,KAAK;;;;;uEAKU,IAAI;;sBAErD,IAAI;;iBAET;YACH,CAAC,CAAC,IAAI,CAAA,oBAAoB,KAAK,IAAI,IAAI,eAAe,CACzD~~;;;;;6BAKkB~~,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;8BACzC,IAAI,CAAC,EAAE,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,QAAQ,EAAE;0BACrD,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY;yBACpC,IAAI,CAAC,SAAS;uBAChB,IAAI,CAAC,UAAU;0BACZ,CAAC,GAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;wBAChE,CAAC,GAAe,EAAE,EAAE,CAAC,GAAG,CAAC,eAAe,EAAE;uBAC3C,IAAI,CAAC,aAAa;;;;;;;;4BAQb,CAAC,IAAI,CAAC,YAAY;YAC9B,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;yBACd,IAAI,CAAC,QAAQ;;8BAER,IAAI,CAAC,EAAE,UAAU,IAAI,CAAC,IAAI;;;;;wBAKhC,IAAI,CAAC,IAAI;sBACX,IAAI,CAAC,EAAE;;wBAEL,QAAQ,CAAC;YACf,mFAAmF,EACjF,IAAI;YACN,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;YACvC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;YACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;SAClC,CAAC;;;;;;;KAOb,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEO,aAAa,CAAC,GAAe;QACnC,IAAI,CAAC,UAAU,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QAEzD,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACrC,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,KAAK,QAAQ,CAAC;YAC3C,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,KAAK,WAAW,CAAC;YAEjD,IAAI,CAAC,SAAS,GAAG,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAC;YAC3C,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC;SACjC;QAAC,WAAM;YACN,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5C,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;SAC9B;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;YAC9D,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,cAAc,CAAC,GAAoB;QACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;CACF","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { Group, I18N, List, Skeleton } from '../../../../private/index';\nimport { OriginsListChangeEvent } from './OriginsListChangeEvent';\n\nexport class OriginsList extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-skeleton': Skeleton,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-group': Group,\n 'x-list': List,\n 'x-i18n': I18N,\n };\n }\n\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n invalid: { type: Boolean },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __errorCode: 'invalid' \| 'https_only' = 'invalid';\n\n private __invalid = false;\n\n private __newValue = '';\n\n public render(): TemplateResult {\n return html`\n <x-group frame>\n <x-list\n data-testid=\"list\"\n .disabled=${this.disabled \|\| !this._isI18nReady}\n .value=${this.value}\n @change=${this.__handleChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`\n <div class=\"flex items-center\" slot=${index}>\n <img\n height=\"16\"\n width=\"16\"\n class=\"mr-m\"\n src=\"https://www.google.com/s2/favicons?domain=${item}\"\n />\n ${item}\n </div>\n `\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"flex flex-col ~~space-y-s~~ sm-~~space-y-0 sm-~~flex-row sm-~~space-x-s sm-~~items-start\">\n <vaadin-text-field\n data-testid=\"input\"\n .placeholder=${this._isI18nReady ? 'https://foxy.io' : ''}\n .errorMessage=${this._t(`origins.${this.__errorCode}`).toString()}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n .invalid=${this.__invalid}\n .value=${this.__newValue}\n @keypress=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.__submit()}\n @change=${(evt: InputEvent) => evt.stopPropagation()}\n @input=${this.__handleInput}\n >\n </vaadin-text-field>\n\n <div class=\"sm-flex sm-items-center\">\n <vaadin-button\n class=\"w-full sm-w-auto\"\n data-testid=\"button\"\n .disabled=${!this._isI18nReady \|\|\n this.disabled \|\|\n this.__invalid \|\|\n this.value.length >= 10}\n @click=${this.__submit}\n >\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"origins.add\"></x-i18n>\n <iron-icon icon=\"lumo:plus\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n\n <x-i18n\n .lang=${this.lang}\n .ns=${this.ns}\n key=\"origins.add_hint\"\n class=${classMap({\n 'text-xs text-center block font-lumo mt-xs transition duration-200 sm-mt-0 sm-ml-m':\n true,\n 'text-tertiary': this.value.length < 10,\n 'text-primary': this.value.length >= 10,\n 'hidden': this.value.length === 0,\n })}\n >\n </x-i18n>\n </div>\n </div>\n </x-list>\n </x-group>\n `;\n }\n\n private __sendChange() {\n this.dispatchEvent(new OriginsListChangeEvent(this.value));\n }\n\n private __handleInput(evt: InputEvent) {\n this.__newValue = (evt.target as HTMLInputElement).value;\n\n try {\n const url = new URL(this.__newValue);\n const isSecure = url.protocol === 'https:';\n const isLocalhost = url.hostname === 'localhost';\n\n this.__invalid = !isLocalhost && !isSecure;\n this.__errorCode = 'https_only';\n } catch {\n this.__invalid = this.__newValue.length > 0;\n this.__errorCode = 'invalid';\n }\n\n this.requestUpdate();\n }\n\n private __submit() {\n if (this.__newValue.length > 0) {\n this.value = [...this.value, new URL(this.__newValue).origin];\n this.__newValue = '';\n this.__invalid = false;\n this.__sendChange();\n }\n\n this.requestUpdate();\n }\n\n private __handleChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n}\n"]}
1	+ {"version":3,"file":"OriginsList.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CustomerPortalSettings/private/OriginsList/OriginsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap } from '@open-wc/scoped-elements';\nimport '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-text-field/vaadin-text-field';\nimport { html, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Translatable } from '../../../../../mixins/translatable';\nimport { classMap } from '../../../../../utils/class-map';\nimport { ListChangeEvent } from '../../../../private/events';\nimport { Group, I18N, List, Skeleton } from '../../../../private/index';\nimport { OriginsListChangeEvent } from './OriginsListChangeEvent';\n\nexport class OriginsList extends Translatable {\n public static get scopedElements(): ScopedElementsMap {\n return {\n 'vaadin-text-field': customElements.get('vaadin-text-field'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'x-skeleton': Skeleton,\n 'iron-icon': customElements.get('iron-icon'),\n 'x-group': Group,\n 'x-list': List,\n 'x-i18n': I18N,\n };\n }\n\n public static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n value: { type: Array },\n invalid: { type: Boolean },\n disabled: { type: Boolean },\n };\n }\n\n public value: string[] = [];\n\n public disabled = false;\n\n private __errorCode: 'invalid' \| 'https_only' = 'invalid';\n\n private __invalid = false;\n\n private __newValue = '';\n\n public render(): TemplateResult {\n return html`\n <x-group frame>\n <x-list\n data-testid=\"list\"\n .disabled=${this.disabled \|\| !this._isI18nReady}\n .value=${this.value}\n @change=${this.__handleChange}\n >\n ${this.value.map((item, index) =>\n this._isI18nReady\n ? html`\n <div class=\"flex items-center\" slot=${index}>\n <img\n height=\"16\"\n width=\"16\"\n class=\"mr-m\"\n src=\"https://www.google.com/s2/favicons?domain=${item}\"\n />\n ${item}\n </div>\n `\n : html`<x-skeleton slot=${index}>${item}</x-skeleton>`\n )}\n\n <div class=\"flex flex-col sm-flex-row sm-items-start\">\n <vaadin-text-field\n data-testid=\"input\"\n class=\"mb-s sm-mb-0 sm-mr-s\"\n .placeholder=${this._isI18nReady ? 'https://foxy.io' : ''}\n .errorMessage=${this._t(`origins.${this.__errorCode}`).toString()}\n .disabled=${this.disabled \|\| !this._isI18nReady}\n .invalid=${this.__invalid}\n .value=${this.__newValue}\n @keypress=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.__submit()}\n @change=${(evt: InputEvent) => evt.stopPropagation()}\n @input=${this.__handleInput}\n >\n </vaadin-text-field>\n\n <div class=\"sm-flex sm-items-center\">\n <vaadin-button\n class=\"w-full sm-w-auto\"\n data-testid=\"button\"\n .disabled=${!this._isI18nReady \|\|\n this.disabled \|\|\n this.__invalid \|\|\n this.value.length >= 10}\n @click=${this.__submit}\n >\n <x-i18n .ns=${this.ns} .lang=${this.lang} key=\"origins.add\"></x-i18n>\n <iron-icon icon=\"lumo:plus\" slot=\"suffix\"></iron-icon>\n </vaadin-button>\n\n <x-i18n\n .lang=${this.lang}\n .ns=${this.ns}\n key=\"origins.add_hint\"\n class=${classMap({\n 'text-xs text-center block font-lumo mt-xs transition duration-200 sm-mt-0 sm-ml-m':\n true,\n 'text-tertiary': this.value.length < 10,\n 'text-primary': this.value.length >= 10,\n 'hidden': this.value.length === 0,\n })}\n >\n </x-i18n>\n </div>\n </div>\n </x-list>\n </x-group>\n `;\n }\n\n private __sendChange() {\n this.dispatchEvent(new OriginsListChangeEvent(this.value));\n }\n\n private __handleInput(evt: InputEvent) {\n this.__newValue = (evt.target as HTMLInputElement).value;\n\n try {\n const url = new URL(this.__newValue);\n const isSecure = url.protocol === 'https:';\n const isLocalhost = url.hostname === 'localhost';\n\n this.__invalid = !isLocalhost && !isSecure;\n this.__errorCode = 'https_only';\n } catch {\n this.__invalid = this.__newValue.length > 0;\n this.__errorCode = 'invalid';\n }\n\n this.requestUpdate();\n }\n\n private __submit() {\n if (this.__newValue.length > 0) {\n this.value = [...this.value, new URL(this.__newValue).origin];\n this.__newValue = '';\n this.__invalid = false;\n this.__sendChange();\n }\n\n this.requestUpdate();\n }\n\n private __handleChange(evt: ListChangeEvent) {\n this.value = evt.detail;\n this.__sendChange();\n }\n}\n"]}

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

@@ -137,14 +137,14 @@ export class SubscriptionCard extends Base {
         return { ...parseFrequency(this.data.frequency), amount };
     }
     __getStatusKey() {
-        var _a, _b;
+        var _a, _b, _c;
         if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.first_failed_transaction_date)
             return 'subscription_failed';
         if ((_b = this.data) === null || _b === void 0 ? void 0 : _b.end_date) {
             const hasEnded = new Date(this.data.end_date).getTime() > Date.now();
             return hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';
         }
-        return 'subscription_active';
+        return `subscription_${((_c = this.data) === null || _c === void 0 ? void 0 : _c.is_active) ? 'active' : 'inactive'}`;
     }
 }
 //# sourceMappingURL=SubscriptionCard.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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~~qBAAqB~~,CAAC;~~IAC/B~~,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Card element displaying subscription summary.\n \n @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n render(): TemplateResult {\n const isActive = !!this.data?.is_active;\n const isFailed = !!this.data?.first_failed_transaction_date;\n\n return html`\n <div class=\"relative text-left\">\n <div\n class=${classMap({\n 'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n 'opacity-0': !this.in({ idle: 'snapshot' }),\n })}\n >\n <div\n class=${classMap({\n 'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n 'text-success bg-success-10': isActive && !isFailed,\n 'text-body bg-contrast-5': !isActive && !isFailed,\n 'text-error bg-error-10': isFailed,\n })}\n >\n <iron-icon\n class=\"m-auto\"\n icon=${isFailed ? 'error-outline' : isActive ? 'done' : 'done-all'}\n >\n </iron-icon>\n </div>\n\n <div class=\"flex-1 min-w-0 leading-s flex flex-col sm-flex-row sm-items-center\">\n <div class=\"order-1 sm-order-0\">\n <div class=\"text-body font-semibold origin-top-left text-m\">\n <foxy-i18n\n data-testid=\"summary\"\n options=${JSON.stringify(this.__getSummaryOptions())}\n lang=${this.lang}\n key=\"transaction_summary\"\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n\n <div\n class=${classMap({\n 'text-s': true,\n 'text-tertiary': !isActive && !isFailed,\n 'text-success': isActive && !isFailed,\n 'text-error': isFailed,\n })}\n >\n <foxy-i18n\n data-testid=\"status\"\n options=${JSON.stringify(this.__getStatusOptions())}\n lang=${this.lang}\n key=${this.__getStatusKey()}\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n </div>\n\n <div\n class=\"flex-1 font-semibold leading-xs mb-xs sm-mb-0 sm-text-right text-xxs sm-text-l tracking-wide sm-tracking-normal uppercase sm-normal-case order-0 sm-order-1 font-tnum text-secondary sm-text-body\"\n >\n <foxy-i18n\n data-testid=\"price\"\n options=${JSON.stringify(this.__getPriceOptions())}\n lang=${this.lang}\n key=\"price_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n </div>\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n 'opacity-0': this.in({ idle: 'snapshot' }),\n })}\n >\n <foxy-spinner\n state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n class=\"m-auto\"\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n\n ${this.renderTemplateOrSlot()}\n `;\n }\n\n private __getSummaryOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n return {\n most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n count: items.length,\n };\n }\n\n private __getStatusOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n return {\n date:\n this.data.first_failed_transaction_date ??\n this.data.end_date ??\n this.data.next_transaction_date,\n };\n }\n\n private __getPriceOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n\n const transaction = this.data._embedded['fx:last_transaction'];\n const amount = `${transaction.total_order} ${transaction.currency_code}`;\n return { ...parseFrequency(this.data.frequency), amount };\n }\n\n private __getStatusKey() {\n if (this.data?.first_failed_transaction_date) return 'subscription_failed';\n\n if (this.data?.end_date) {\n const hasEnded = new Date(this.data.end_date).getTime() > Date.now();\n return hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n }\n\n return '~~subscription_active~~';\n }\n}\n"]}
1	+ {"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAEjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,cAAc,EAAE,0CAAuC;AAEhE,MAAM,EAAE,GAAG,mBAAmB,CAAC;AAC/B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,eAAe,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,CACvE,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,gBAAiB,SAAQ,IAAU;IAC9C,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,QAAC,IAAI,CAAC,IAAI,0CAAE,SAAS,CAAA,CAAC;QACxC,MAAM,QAAQ,GAAG,CAAC,QAAC,IAAI,CAAC,IAAI,0CAAE,6BAA6B,CAAA,CAAC;QAE5D,OAAO,IAAI,CAAA;;;kBAGG,QAAQ,CAAC;YACf,gFAAgF,EAAE,IAAI;YACtF,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAC5C,CAAC;;;oBAGQ,QAAQ,CAAC;YACf,sDAAsD,EAAE,IAAI;YAC5D,4BAA4B,EAAE,QAAQ,IAAI,CAAC,QAAQ;YACnD,yBAAyB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;YACjD,wBAAwB,EAAE,QAAQ;SACnC,CAAC;;;;qBAIO,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU;;;;;;;;;;4BAUpD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;yBAC7C,IAAI,CAAC,IAAI;;uBAEX,IAAI,CAAC,EAAE;;;;;;;wBAON,QAAQ,CAAC;YACf,QAAQ,EAAE,IAAI;YACd,eAAe,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;YACvC,cAAc,EAAE,QAAQ,IAAI,CAAC,QAAQ;YACrC,YAAY,EAAE,QAAQ;SACvB,CAAC;;;;4BAIU,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;yBAC5C,IAAI,CAAC,IAAI;wBACV,IAAI,CAAC,cAAc,EAAE;uBACtB,IAAI,CAAC,EAAE;;;;;;;;;;;;0BAYJ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;uBAC3C,IAAI,CAAC,IAAI;6BACH,OAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,MAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW;qBACtE,IAAI,CAAC,EAAE;;;;;;;;;;kBAUV,QAAQ,CAAC;YACf,+EAA+E,EAAE,IAAI;YACrF,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAC3C,CAAC;;;oBAGQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;mBAE7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;;QAMxE,IAAI,CAAC,oBAAoB,EAAE;KAC9B,CAAC;IACJ,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,EAAE,CAAC;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAEnF,OAAO;YACL,mBAAmB,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpE,KAAK,EAAE,KAAK,CAAC,MAAM;SACpB,CAAC;IACJ,CAAC;IAEO,kBAAkB;;QACxB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,EAAE,CAAC;QAC9C,OAAO;YACL,IAAI,cACF,IAAI,CAAC,IAAI,CAAC,6BAA6B,mCACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,mCAClB,IAAI,CAAC,IAAI,CAAC,qBAAqB;SAClC,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,EAAE,CAAC;QAE9C,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAC/D,MAAM,MAAM,GAAG,GAAG,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QACzE,OAAO,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5D,CAAC;IAEO,cAAc;;QACpB,UAAI,IAAI,CAAC,IAAI,0CAAE,6BAA6B;YAAE,OAAO,qBAAqB,CAAC;QAE3E,UAAI,IAAI,CAAC,IAAI,0CAAE,QAAQ,EAAE;YACvB,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACrE,OAAO,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,wBAAwB,CAAC;SAC/E;QAED,OAAO,gBAAgB,OAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACxE,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Card element displaying subscription summary.\n \n @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n render(): TemplateResult {\n const isActive = !!this.data?.is_active;\n const isFailed = !!this.data?.first_failed_transaction_date;\n\n return html`\n <div class=\"relative text-left\">\n <div\n class=${classMap({\n 'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n 'opacity-0': !this.in({ idle: 'snapshot' }),\n })}\n >\n <div\n class=${classMap({\n 'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n 'text-success bg-success-10': isActive && !isFailed,\n 'text-body bg-contrast-5': !isActive && !isFailed,\n 'text-error bg-error-10': isFailed,\n })}\n >\n <iron-icon\n class=\"m-auto\"\n icon=${isFailed ? 'error-outline' : isActive ? 'done' : 'done-all'}\n >\n </iron-icon>\n </div>\n\n <div class=\"flex-1 min-w-0 leading-s flex flex-col sm-flex-row sm-items-center\">\n <div class=\"order-1 sm-order-0\">\n <div class=\"text-body font-semibold origin-top-left text-m\">\n <foxy-i18n\n data-testid=\"summary\"\n options=${JSON.stringify(this.__getSummaryOptions())}\n lang=${this.lang}\n key=\"transaction_summary\"\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n\n <div\n class=${classMap({\n 'text-s': true,\n 'text-tertiary': !isActive && !isFailed,\n 'text-success': isActive && !isFailed,\n 'text-error': isFailed,\n })}\n >\n <foxy-i18n\n data-testid=\"status\"\n options=${JSON.stringify(this.__getStatusOptions())}\n lang=${this.lang}\n key=${this.__getStatusKey()}\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n </div>\n\n <div\n class=\"flex-1 font-semibold leading-xs mb-xs sm-mb-0 sm-text-right text-xxs sm-text-l tracking-wide sm-tracking-normal uppercase sm-normal-case order-0 sm-order-1 font-tnum text-secondary sm-text-body\"\n >\n <foxy-i18n\n data-testid=\"price\"\n options=${JSON.stringify(this.__getPriceOptions())}\n lang=${this.lang}\n key=\"price_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${this.ns}\n >\n </foxy-i18n>\n \n </div>\n </div>\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n 'opacity-0': this.in({ idle: 'snapshot' }),\n })}\n >\n <foxy-spinner\n state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n class=\"m-auto\"\n lang=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n\n ${this.renderTemplateOrSlot()}\n `;\n }\n\n private __getSummaryOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n return {\n most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n count: items.length,\n };\n }\n\n private __getStatusOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n return {\n date:\n this.data.first_failed_transaction_date ??\n this.data.end_date ??\n this.data.next_transaction_date,\n };\n }\n\n private __getPriceOptions() {\n if (!this.in({ idle: 'snapshot' })) return {};\n\n const transaction = this.data._embedded['fx:last_transaction'];\n const amount = `${transaction.total_order} ${transaction.currency_code}`;\n return { ...parseFrequency(this.data.frequency), amount };\n }\n\n private __getStatusKey() {\n if (this.data?.first_failed_transaction_date) return 'subscription_failed';\n\n if (this.data?.end_date) {\n const hasEnded = new Date(this.data.end_date).getTime() > Date.now();\n return hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n }\n\n return `subscription_${this.data?.is_active ? 'active' : 'inactive'}`;\n }\n}\n"]}

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

@@ -64,7 +64,7 @@ export class SubscriptionForm extends Base {
                 }
                 else {
                     date = (_a = data.next_transaction_date) !== null && _a !== void 0 ? _a : new Date().toISOString();
-                    key = 'subscription_active';
+                    key = `subscription_${data.is_active ? 'active' : 'inactive'}`;
                 }
                 const text = html `
         <foxy-i18n

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionForm/SubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, Skeleton } from '../../private/index';\nimport { Data, Item, Settings, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\nimport {\n getAllowedFrequencies,\n getNextTransactionDateConstraints,\n isNextTransactionDate,\n} from '@foxy.io/sdk/customer';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { CellContext } from '../Table/types';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FormDialog } from '../FormDialog';\nimport { InternalCalendar } from '../../internal/InternalCalendar';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PageRendererContext } from '../CollectionPages/types';\nimport { Preview } from '../ItemsForm/private/Preview';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport { Data as TransactionsTableData } from '../TransactionsTable/types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nconst NS = 'subscription-form';\nconst Base = ScopedElementsMixin(\n ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Form element for creating or editing subscriptions.\n \n @slot header:before - new in v1.4.0\n * @slot header:after - new in v1.4.0\n \n @slot items:before - new in v1.4.0\n * @slot items:after - new in v1.4.0\n * @slot items:actions:before - new in v1.4.0\n * @slot items:actions:after - new in v1.4.0\n \n @slot end-date:before - new in v1.4.0\n * @slot end-date:after - new in v1.4.0\n \n @slot next-transaction-date:before - new in v1.4.0\n * @slot next-transaction-date:after - new in v1.4.0\n \n @slot frequency:before - new in v1.4.0\n * @slot frequency:after - new in v1.4.0\n \n @slot transactions:before - new in v1.4.0\n * @slot transactions:after - new in v1.4.0\n \n @element foxy-subscription-form\n * @since 1.2.0\n */\nexport class SubscriptionForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'foxy-internal-calendar': customElements.get('foxy-internal-calendar'),\n 'foxy-collection-pages': customElements.get('foxy-collection-pages'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'vaadin-combo-box': customElements.get('vaadin-combo-box'),\n 'foxy-form-dialog': customElements.get('foxy-form-dialog'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'vcf-tooltip': customElements.get('vcf-tooltip'),\n 'foxy-table': customElements.get('foxy-table'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'iron-icon': customElements.get('iron-icon'),\n 'x-skeleton': Skeleton,\n 'x-preview': Preview,\n 'x-choice': Choice,\n 'x-group': Group,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n settings: { type: Object },\n };\n }\n\n settings: Settings \| null = null;\n\n templates: Templates = {};\n\n private readonly __renderHeaderSubtitle = () => {\n const { data, lang, ns } = this;\n\n if (data) {\n let color = 'text-secondary';\n let date: string;\n let key: string;\n\n if (data.first_failed_transaction_date) {\n color = 'text-error';\n date = data.first_failed_transaction_date;\n key = 'subscription_failed';\n } else if (data.end_date) {\n date = data.end_date;\n const hasEnded = new Date(date).getTime() > Date.now();\n key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n } else {\n date = data.next_transaction_date ?? new Date().toISOString();\n key = 'subscription_active';\n }\n\n const text = html`\n <foxy-i18n\n data-testid=\"header-subtitle\"\n options=${JSON.stringify({ date })}\n class=${color}\n lang=${lang}\n key=${key}\n ns=${ns}\n >\n </foxy-i18n>\n `;\n\n if (data.first_failed_transaction_date) {\n return html`\n <span id=\"status\" class=\"flex items-center space-x-xs ${color}\">\n ${text}<iron-icon icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n </span>\n <vcf-tooltip for=\"status\" position=\"bottom\">\n <span class=\"text-s\">${data.error_message}</span>\n </vcf-tooltip>\n `;\n }\n\n return text;\n }\n\n return html`<x-skeleton class=\"w-full\" variant=\"static\"> </x-skeleton>`;\n };\n\n private readonly __renderHeaderTitle = () => {\n const { data, lang, ns } = this;\n\n if (data) {\n const frequency = parseFrequency(data.frequency);\n const currency = data._embedded['fx:last_transaction'].currency_code;\n const total = data._embedded['fx:last_transaction'].total_order;\n\n return html`\n <foxy-i18n\n data-testid=\"header-title\"\n options=${JSON.stringify({ ...frequency, amount: `${total} ${currency}` })}\n lang=${lang}\n key=\"price_${data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${ns}\n >\n </foxy-i18n>\n `;\n }\n\n return html`<x-skeleton class=\"w-full\" variant=\"static\"> </x-skeleton>`;\n };\n\n private readonly __renderHeader = () => {\n return html`\n <div data-testid=\"header\">\n ${this.renderTemplateOrSlot('header:before')}\n <div class=\"leading-xs text-xxl font-bold\">${this.__renderHeaderTitle()}</div>\n <div class=\"leading-xs text-l\">${this.__renderHeaderSubtitle()}</div>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n };\n\n private readonly __renderItemsActions = () => {\n return html`\n <div class=\"flex\" data-testid=\"items:actions\">\n ${this.renderTemplateOrSlot('items:actions:before')}\n\n <foxy-i18n\n data-testid=\"items:actions-label\"\n class=\"flex-1\"\n lang=${this.lang}\n key=\"item_plural\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n ${this.renderTemplateOrSlot('items:actions:after')}\n </div>\n `;\n };\n\n private readonly __renderItemsItem = (item: Item) => {\n const price = item.price.toLocaleString(this.lang \|\| 'en', {\n style: 'currency',\n currency: this.data!._embedded['fx:last_transaction'].currency_code,\n });\n\n let quantity: TemplateResult;\n\n if (item.quantity > 1) {\n quantity = html`\n <div\n data-testclass=\"item-quantity\"\n class=\"px-s h-xs rounded bg-contrast-5 flex items-center font-tnum text-contrast text-s font-bold\"\n >\n ${item.quantity}\n </div>\n `;\n } else {\n quantity = html``;\n }\n\n return html`\n <figure class=\"flex items-center space-x-m py-s pr-m\" data-testclass=\"item\">\n <x-preview\n data-testclass=\"item-preview\"\n class=\"w-l h-l\"\n .quantity=${item.quantity}\n .image=${item.image}\n >\n </x-preview>\n\n <figcaption class=\"leading-s flex-1 flex justify-between items-center\">\n <div class=\"flex flex-col\">\n <span class=\"font-medium\" data-testclass=\"item-name\">${item.name}</span>\n <span class=\"text-secondary text-s\" data-testclass=\"item-price\">${price}</span>\n </div>\n\n ${quantity}\n </figcaption>\n </figure>\n `;\n };\n\n private readonly __renderItems = () => {\n const hiddenSelector = this.hiddenSelector;\n const items = this.data?._embedded['fx:transaction_template']._embedded['fx:items'] ?? [];\n const label = hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions();\n\n return html`\n <div data-testid=\"items\">\n ${this.renderTemplateOrSlot('items:before')}\n <x-group frame>\n <div slot=\"header\">${label}</div>\n <div class=\"divide-y divide-contrast-10 pl-s\">${items.map(this.__renderItemsItem)}</div>\n </x-group>\n ${this.renderTemplateOrSlot('items:after')}\n </div>\n `;\n };\n\n private readonly __renderEndDate = () => {\n const { disabledSelector, lang, ns } = this;\n const formHiddenSelector = this.hiddenSelector.zoom('end-date:form').toString();\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('end-date:before')}\n\n <foxy-form-dialog\n readonlycontrols=${this.readonlySelector.zoom('end-date:form').toString()}\n disabledcontrols=${disabledSelector.zoom('end-date:form').toString()}\n hiddencontrols=\"save-button ${formHiddenSelector}\"\n data-testid=\"cancellation-form\"\n parent=${this.parent}\n header=\"end_subscription\"\n alert\n form=\"foxy-cancellation-form\"\n href=${this.href}\n lang=${lang}\n id=\"end-date-form\"\n ns=${ns}\n .templates=${this.getNestedTemplates('end-date:form')}\n >\n </foxy-form-dialog>\n\n <vaadin-button\n data-testid=\"end-date\"\n theme=\"error\"\n class=\"w-full\"\n ?disabled=${!this.data \|\| disabledSelector.matches('end-date', true)}\n @click=${(evt: Event) => {\n const form = this.renderRoot.querySelector('#end-date-form') as FormDialog;\n form.show(evt.currentTarget as ButtonElement);\n }}\n >\n <foxy-i18n key=\"end_subscription\" ns=${ns} lang=${lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('end-date:after')}\n </div>\n `;\n };\n\n private readonly __checkNextTransactionDateAvailability = (date: Date) => {\n const { settings, data: subscription } = this;\n\n if (settings && subscription) {\n const value = serializeDate(date);\n return isNextTransactionDate({ value, settings, subscription });\n }\n\n return date.getTime() >= Date.now();\n };\n\n private readonly __renderNextTransactionDate = () => {\n const { data, lang, ns } = this;\n const isActive = !!data?.is_active;\n\n return html`\n <div data-testid=\"next-transaction-date\">\n ${this.renderTemplateOrSlot('next-transaction-date:before')}\n\n <x-group frame>\n <foxy-i18n key=\"next_transaction_date\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n <foxy-internal-calendar\n start=${ifDefined(data?.next_transaction_date.substr(0, 10))}\n value=${ifDefined(data?.next_transaction_date)}\n lang=${lang}\n ?readonly=${!isActive \|\| this.readonlySelector.matches('next-transaction-date', true)}\n ?disabled=${!data \|\| this.disabledSelector.matches('next-transaction-date', true)}\n .checkAvailability=${this.__checkNextTransactionDateAvailability}\n @change=${(evt: Event) => {\n const target = evt.target as InternalCalendar;\n this.edit({ next_transaction_date: target.value });\n }}\n >\n </foxy-internal-calendar>\n </x-group>\n\n ${this.renderTemplateOrSlot('next-transaction-date:after')}\n </div>\n `;\n };\n\n private readonly __renderFrequencyAsDropdown = () => {\n const { data } = this;\n const active = !!data?.is_active;\n const items = this.__frequencies.map(v => ({\n label: this.t(v === '.5m' ? 'twice_a_month' : 'frequency', parseFrequency(v)),\n value: v,\n }));\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n data-testid=\"frequency\"\n ?disabled=${!data \|\| this.disabledSelector.matches('frequency', true)}\n ?readonly=${data && (!active \|\| this.readonlySelector.matches('frequency', true))}\n class=\"w-full\"\n label=${this.t('frequency_label').toString()}\n value=${ifDefined(this.form.frequency)}\n .items=${items}\n @change=${(evt: Event) => {\n this.edit({ frequency: (evt.target as HTMLInputElement).value });\n }}\n >\n </vaadin-combo-box>\n `;\n };\n\n private readonly __renderFrequencyAsRadioList = () => {\n const { data, lang, ns } = this;\n\n return html`\n <x-group frame>\n <foxy-i18n key=\"frequency_label\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n\n <x-choice\n default-custom-value=\"1d\"\n data-testid=\"frequency\"\n type=\"frequency\"\n ns=${SubscriptionForm.defaultNS}\n ?custom=${this.settings === null}\n .items=${this.__frequencies}\n .value=${this.form.frequency ?? null}\n ?disabled=${!data \|\| this.disabledSelector.matches('frequency', true)}\n ?readonly=${data && (!data.is_active \|\| this.readonlySelector.matches('frequency', true))}\n @change=${(evt: Event) => {\n this.edit({ frequency: (evt.target as HTMLInputElement).value });\n }}\n >\n ${this.__frequencies.map(\n frequency => html`\n <foxy-i18n\n options=${JSON.stringify(parseFrequency(frequency))}\n slot=\"${frequency}-label\"\n lang=${lang}\n key=${frequency === '.5m' ? 'twice_a_month' : 'frequency'}\n ns=${ns}\n >\n </foxy-i18n>\n `\n )}\n </x-choice>\n </x-group>\n `;\n };\n\n private readonly __renderFrequency = () => {\n return html`\n <div>\n ${this.renderTemplateOrSlot('frequency:before')}\n ${this.settings && this.__frequencies.length > 4\n ? this.__renderFrequencyAsDropdown()\n : this.__renderFrequencyAsRadioList()}\n ${this.renderTemplateOrSlot('frequency:after')}\n </div>\n `;\n };\n\n private readonly __transactionsTableColumns = [\n {\n cell(ctx: CellContext<TransactionsTableData>) {\n const colors: Record<string, string> = {\n declined: 'text-error',\n rejected: 'text-error',\n };\n\n const status = TransactionsTable.statusColumn.cell!(ctx);\n const price = TransactionsTable.priceColumn.cell!(ctx);\n const color = colors[ctx.data.status] ?? 'text-body';\n\n return ctx.html`\n <span class=\"sr-only\">${status}</span>\n <span class=\"${color} text-s\">${price}</span>\n `;\n },\n },\n { cell: TransactionsTable.idColumn.cell, hideBelow: 'sm' },\n { cell: TransactionsTable.dateColumn.cell },\n { cell: TransactionsTable.receiptColumn.cell },\n ];\n\n private readonly __renderTransactionsPage = ({ html, ...ctx }: PageRendererContext) => {\n return html`\n <foxy-table\n group=${ctx.group}\n lang=${ctx.lang}\n href=${ctx.href}\n ns=\"${ctx.ns} ${customElements.get('foxy-transactions-table')?.defaultNS ?? ''}\"\n .columns=${this.__transactionsTableColumns}\n >\n </foxy-table>\n `;\n };\n\n private readonly __renderTransactions = () => {\n const { lang, ns } = this;\n\n return html`\n <div data-testid=\"transactions\">\n ${this.renderTemplateOrSlot('transactions:before')}\n\n <x-group frame>\n <foxy-i18n lang=${lang} slot=\"header\" key=\"transaction_plural\" ns=${ns}></foxy-i18n>\n <foxy-collection-pages\n group=${this.group}\n class=\"block divide-y divide-contrast-10 px-m\"\n first=${this.data?._links['fx:transactions'].href ?? ''}\n lang=${lang}\n ns=${ns}\n .page=${this.__renderTransactionsPage}\n >\n </foxy-collection-pages>\n </x-group>\n\n ${this.renderTemplateOrSlot('transactions:after')}\n </div>\n `;\n };\n\n render(): TemplateResult {\n const isBusy = this.in('busy');\n const isFail = this.in('fail');\n\n return html`\n <div\n data-testid=\"wrapper\"\n aria-busy=${isBusy}\n aria-live=\"polite\"\n class=\"relative space-y-l text-body font-lumo text-m leading-m\"\n >\n ${this.hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}\n ${this.hiddenSelector.matches('items', true) ? '' : this.__renderItems()}\n ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}\n ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}\n ${this.__isFrequencyVisible ? this.__renderFrequency() : ''}\n ${this.hiddenSelector.matches('transactions', true) ? '' : this.__renderTransactions()}\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=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private get __isNextTransactionDateVisible() {\n if (this.hiddenSelector.matches('next-transaction-date', true)) return false;\n if (this.settings === null) return true;\n if (this.data === null) return false;\n\n const rules = this.settings.subscriptions.allow_next_date_modification;\n return !!getNextTransactionDateConstraints(this.data, rules);\n }\n\n private get __isFrequencyVisible() {\n if (this.hiddenSelector.matches('frequency', true)) return false;\n if (this.settings === null) return true;\n if (this.data === null) return false;\n\n const allowedFrequencies = getAllowedFrequencies({\n subscription: this.data,\n settings: this.settings,\n });\n\n return !allowedFrequencies.next().done;\n }\n\n private get __frequencies() {\n if (!this.settings \|\| !this.data) return ['.5m', '1m', '1y'];\n\n const allowedFrequencies = getAllowedFrequencies({\n subscription: this.data,\n settings: this.settings,\n });\n\n return Array.from(allowedFrequencies);\n }\n}\n"]}
1	+ {"version":3,"file":"SubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionForm/SubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, Skeleton } from '../../private/index';\nimport { Data, Item, Settings, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\nimport {\n getAllowedFrequencies,\n getNextTransactionDateConstraints,\n isNextTransactionDate,\n} from '@foxy.io/sdk/customer';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { CellContext } from '../Table/types';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FormDialog } from '../FormDialog';\nimport { InternalCalendar } from '../../internal/InternalCalendar';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PageRendererContext } from '../CollectionPages/types';\nimport { Preview } from '../ItemsForm/private/Preview';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport { Data as TransactionsTableData } from '../TransactionsTable/types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nconst NS = 'subscription-form';\nconst Base = ScopedElementsMixin(\n ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/*\n Form element for creating or editing subscriptions.\n \n @slot header:before - new in v1.4.0\n * @slot header:after - new in v1.4.0\n \n @slot items:before - new in v1.4.0\n * @slot items:after - new in v1.4.0\n * @slot items:actions:before - new in v1.4.0\n * @slot items:actions:after - new in v1.4.0\n \n @slot end-date:before - new in v1.4.0\n * @slot end-date:after - new in v1.4.0\n \n @slot next-transaction-date:before - new in v1.4.0\n * @slot next-transaction-date:after - new in v1.4.0\n \n @slot frequency:before - new in v1.4.0\n * @slot frequency:after - new in v1.4.0\n \n @slot transactions:before - new in v1.4.0\n * @slot transactions:after - new in v1.4.0\n \n @element foxy-subscription-form\n * @since 1.2.0\n */\nexport class SubscriptionForm extends Base<Data> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'foxy-internal-calendar': customElements.get('foxy-internal-calendar'),\n 'foxy-collection-pages': customElements.get('foxy-collection-pages'),\n 'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n 'vaadin-combo-box': customElements.get('vaadin-combo-box'),\n 'foxy-form-dialog': customElements.get('foxy-form-dialog'),\n 'vaadin-button': customElements.get('vaadin-button'),\n 'foxy-spinner': customElements.get('foxy-spinner'),\n 'vcf-tooltip': customElements.get('vcf-tooltip'),\n 'foxy-table': customElements.get('foxy-table'),\n 'foxy-i18n': customElements.get('foxy-i18n'),\n 'iron-icon': customElements.get('iron-icon'),\n 'x-skeleton': Skeleton,\n 'x-preview': Preview,\n 'x-choice': Choice,\n 'x-group': Group,\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n settings: { type: Object },\n };\n }\n\n settings: Settings \| null = null;\n\n templates: Templates = {};\n\n private readonly __renderHeaderSubtitle = () => {\n const { data, lang, ns } = this;\n\n if (data) {\n let color = 'text-secondary';\n let date: string;\n let key: string;\n\n if (data.first_failed_transaction_date) {\n color = 'text-error';\n date = data.first_failed_transaction_date;\n key = 'subscription_failed';\n } else if (data.end_date) {\n date = data.end_date;\n const hasEnded = new Date(date).getTime() > Date.now();\n key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n } else {\n date = data.next_transaction_date ?? new Date().toISOString();\n key = `subscription_${data.is_active ? 'active' : 'inactive'}`;\n }\n\n const text = html`\n <foxy-i18n\n data-testid=\"header-subtitle\"\n options=${JSON.stringify({ date })}\n class=${color}\n lang=${lang}\n key=${key}\n ns=${ns}\n >\n </foxy-i18n>\n `;\n\n if (data.first_failed_transaction_date) {\n return html`\n <span id=\"status\" class=\"flex items-center space-x-xs ${color}\">\n ${text}<iron-icon icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n </span>\n <vcf-tooltip for=\"status\" position=\"bottom\">\n <span class=\"text-s\">${data.error_message}</span>\n </vcf-tooltip>\n `;\n }\n\n return text;\n }\n\n return html`<x-skeleton class=\"w-full\" variant=\"static\"> </x-skeleton>`;\n };\n\n private readonly __renderHeaderTitle = () => {\n const { data, lang, ns } = this;\n\n if (data) {\n const frequency = parseFrequency(data.frequency);\n const currency = data._embedded['fx:last_transaction'].currency_code;\n const total = data._embedded['fx:last_transaction'].total_order;\n\n return html`\n <foxy-i18n\n data-testid=\"header-title\"\n options=${JSON.stringify({ ...frequency, amount: `${total} ${currency}` })}\n lang=${lang}\n key=\"price_${data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${ns}\n >\n </foxy-i18n>\n `;\n }\n\n return html`<x-skeleton class=\"w-full\" variant=\"static\"> </x-skeleton>`;\n };\n\n private readonly __renderHeader = () => {\n return html`\n <div data-testid=\"header\">\n ${this.renderTemplateOrSlot('header:before')}\n <div class=\"leading-xs text-xxl font-bold\">${this.__renderHeaderTitle()}</div>\n <div class=\"leading-xs text-l\">${this.__renderHeaderSubtitle()}</div>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n };\n\n private readonly __renderItemsActions = () => {\n return html`\n <div class=\"flex\" data-testid=\"items:actions\">\n ${this.renderTemplateOrSlot('items:actions:before')}\n\n <foxy-i18n\n data-testid=\"items:actions-label\"\n class=\"flex-1\"\n lang=${this.lang}\n key=\"item_plural\"\n ns=${this.ns}\n >\n </foxy-i18n>\n\n ${this.renderTemplateOrSlot('items:actions:after')}\n </div>\n `;\n };\n\n private readonly __renderItemsItem = (item: Item) => {\n const price = item.price.toLocaleString(this.lang \|\| 'en', {\n style: 'currency',\n currency: this.data!._embedded['fx:last_transaction'].currency_code,\n });\n\n let quantity: TemplateResult;\n\n if (item.quantity > 1) {\n quantity = html`\n <div\n data-testclass=\"item-quantity\"\n class=\"px-s h-xs rounded bg-contrast-5 flex items-center font-tnum text-contrast text-s font-bold\"\n >\n ${item.quantity}\n </div>\n `;\n } else {\n quantity = html``;\n }\n\n return html`\n <figure class=\"flex items-center space-x-m py-s pr-m\" data-testclass=\"item\">\n <x-preview\n data-testclass=\"item-preview\"\n class=\"w-l h-l\"\n .quantity=${item.quantity}\n .image=${item.image}\n >\n </x-preview>\n\n <figcaption class=\"leading-s flex-1 flex justify-between items-center\">\n <div class=\"flex flex-col\">\n <span class=\"font-medium\" data-testclass=\"item-name\">${item.name}</span>\n <span class=\"text-secondary text-s\" data-testclass=\"item-price\">${price}</span>\n </div>\n\n ${quantity}\n </figcaption>\n </figure>\n `;\n };\n\n private readonly __renderItems = () => {\n const hiddenSelector = this.hiddenSelector;\n const items = this.data?._embedded['fx:transaction_template']._embedded['fx:items'] ?? [];\n const label = hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions();\n\n return html`\n <div data-testid=\"items\">\n ${this.renderTemplateOrSlot('items:before')}\n <x-group frame>\n <div slot=\"header\">${label}</div>\n <div class=\"divide-y divide-contrast-10 pl-s\">${items.map(this.__renderItemsItem)}</div>\n </x-group>\n ${this.renderTemplateOrSlot('items:after')}\n </div>\n `;\n };\n\n private readonly __renderEndDate = () => {\n const { disabledSelector, lang, ns } = this;\n const formHiddenSelector = this.hiddenSelector.zoom('end-date:form').toString();\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('end-date:before')}\n\n <foxy-form-dialog\n readonlycontrols=${this.readonlySelector.zoom('end-date:form').toString()}\n disabledcontrols=${disabledSelector.zoom('end-date:form').toString()}\n hiddencontrols=\"save-button ${formHiddenSelector}\"\n data-testid=\"cancellation-form\"\n parent=${this.parent}\n header=\"end_subscription\"\n alert\n form=\"foxy-cancellation-form\"\n href=${this.href}\n lang=${lang}\n id=\"end-date-form\"\n ns=${ns}\n .templates=${this.getNestedTemplates('end-date:form')}\n >\n </foxy-form-dialog>\n\n <vaadin-button\n data-testid=\"end-date\"\n theme=\"error\"\n class=\"w-full\"\n ?disabled=${!this.data \|\| disabledSelector.matches('end-date', true)}\n @click=${(evt: Event) => {\n const form = this.renderRoot.querySelector('#end-date-form') as FormDialog;\n form.show(evt.currentTarget as ButtonElement);\n }}\n >\n <foxy-i18n key=\"end_subscription\" ns=${ns} lang=${lang}></foxy-i18n>\n </vaadin-button>\n\n ${this.renderTemplateOrSlot('end-date:after')}\n </div>\n `;\n };\n\n private readonly __checkNextTransactionDateAvailability = (date: Date) => {\n const { settings, data: subscription } = this;\n\n if (settings && subscription) {\n const value = serializeDate(date);\n return isNextTransactionDate({ value, settings, subscription });\n }\n\n return date.getTime() >= Date.now();\n };\n\n private readonly __renderNextTransactionDate = () => {\n const { data, lang, ns } = this;\n const isActive = !!data?.is_active;\n\n return html`\n <div data-testid=\"next-transaction-date\">\n ${this.renderTemplateOrSlot('next-transaction-date:before')}\n\n <x-group frame>\n <foxy-i18n key=\"next_transaction_date\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n <foxy-internal-calendar\n start=${ifDefined(data?.next_transaction_date.substr(0, 10))}\n value=${ifDefined(data?.next_transaction_date)}\n lang=${lang}\n ?readonly=${!isActive \|\| this.readonlySelector.matches('next-transaction-date', true)}\n ?disabled=${!data \|\| this.disabledSelector.matches('next-transaction-date', true)}\n .checkAvailability=${this.__checkNextTransactionDateAvailability}\n @change=${(evt: Event) => {\n const target = evt.target as InternalCalendar;\n this.edit({ next_transaction_date: target.value });\n }}\n >\n </foxy-internal-calendar>\n </x-group>\n\n ${this.renderTemplateOrSlot('next-transaction-date:after')}\n </div>\n `;\n };\n\n private readonly __renderFrequencyAsDropdown = () => {\n const { data } = this;\n const active = !!data?.is_active;\n const items = this.__frequencies.map(v => ({\n label: this.t(v === '.5m' ? 'twice_a_month' : 'frequency', parseFrequency(v)),\n value: v,\n }));\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n data-testid=\"frequency\"\n ?disabled=${!data \|\| this.disabledSelector.matches('frequency', true)}\n ?readonly=${data && (!active \|\| this.readonlySelector.matches('frequency', true))}\n class=\"w-full\"\n label=${this.t('frequency_label').toString()}\n value=${ifDefined(this.form.frequency)}\n .items=${items}\n @change=${(evt: Event) => {\n this.edit({ frequency: (evt.target as HTMLInputElement).value });\n }}\n >\n </vaadin-combo-box>\n `;\n };\n\n private readonly __renderFrequencyAsRadioList = () => {\n const { data, lang, ns } = this;\n\n return html`\n <x-group frame>\n <foxy-i18n key=\"frequency_label\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n\n <x-choice\n default-custom-value=\"1d\"\n data-testid=\"frequency\"\n type=\"frequency\"\n ns=${SubscriptionForm.defaultNS}\n ?custom=${this.settings === null}\n .items=${this.__frequencies}\n .value=${this.form.frequency ?? null}\n ?disabled=${!data \|\| this.disabledSelector.matches('frequency', true)}\n ?readonly=${data && (!data.is_active \|\| this.readonlySelector.matches('frequency', true))}\n @change=${(evt: Event) => {\n this.edit({ frequency: (evt.target as HTMLInputElement).value });\n }}\n >\n ${this.__frequencies.map(\n frequency => html`\n <foxy-i18n\n options=${JSON.stringify(parseFrequency(frequency))}\n slot=\"${frequency}-label\"\n lang=${lang}\n key=${frequency === '.5m' ? 'twice_a_month' : 'frequency'}\n ns=${ns}\n >\n </foxy-i18n>\n `\n )}\n </x-choice>\n </x-group>\n `;\n };\n\n private readonly __renderFrequency = () => {\n return html`\n <div>\n ${this.renderTemplateOrSlot('frequency:before')}\n ${this.settings && this.__frequencies.length > 4\n ? this.__renderFrequencyAsDropdown()\n : this.__renderFrequencyAsRadioList()}\n ${this.renderTemplateOrSlot('frequency:after')}\n </div>\n `;\n };\n\n private readonly __transactionsTableColumns = [\n {\n cell(ctx: CellContext<TransactionsTableData>) {\n const colors: Record<string, string> = {\n declined: 'text-error',\n rejected: 'text-error',\n };\n\n const status = TransactionsTable.statusColumn.cell!(ctx);\n const price = TransactionsTable.priceColumn.cell!(ctx);\n const color = colors[ctx.data.status] ?? 'text-body';\n\n return ctx.html`\n <span class=\"sr-only\">${status}</span>\n <span class=\"${color} text-s\">${price}</span>\n `;\n },\n },\n { cell: TransactionsTable.idColumn.cell, hideBelow: 'sm' },\n { cell: TransactionsTable.dateColumn.cell },\n { cell: TransactionsTable.receiptColumn.cell },\n ];\n\n private readonly __renderTransactionsPage = ({ html, ...ctx }: PageRendererContext) => {\n return html`\n <foxy-table\n group=${ctx.group}\n lang=${ctx.lang}\n href=${ctx.href}\n ns=\"${ctx.ns} ${customElements.get('foxy-transactions-table')?.defaultNS ?? ''}\"\n .columns=${this.__transactionsTableColumns}\n >\n </foxy-table>\n `;\n };\n\n private readonly __renderTransactions = () => {\n const { lang, ns } = this;\n\n return html`\n <div data-testid=\"transactions\">\n ${this.renderTemplateOrSlot('transactions:before')}\n\n <x-group frame>\n <foxy-i18n lang=${lang} slot=\"header\" key=\"transaction_plural\" ns=${ns}></foxy-i18n>\n <foxy-collection-pages\n group=${this.group}\n class=\"block divide-y divide-contrast-10 px-m\"\n first=${this.data?._links['fx:transactions'].href ?? ''}\n lang=${lang}\n ns=${ns}\n .page=${this.__renderTransactionsPage}\n >\n </foxy-collection-pages>\n </x-group>\n\n ${this.renderTemplateOrSlot('transactions:after')}\n </div>\n `;\n };\n\n render(): TemplateResult {\n const isBusy = this.in('busy');\n const isFail = this.in('fail');\n\n return html`\n <div\n data-testid=\"wrapper\"\n aria-busy=${isBusy}\n aria-live=\"polite\"\n class=\"relative space-y-l text-body font-lumo text-m leading-m\"\n >\n ${this.hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}\n ${this.hiddenSelector.matches('items', true) ? '' : this.__renderItems()}\n ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}\n ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}\n ${this.__isFrequencyVisible ? this.__renderFrequency() : ''}\n ${this.hiddenSelector.matches('transactions', true) ? '' : this.__renderTransactions()}\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=${this.lang}\n ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n >\n </foxy-spinner>\n </div>\n </div>\n `;\n }\n\n private get __isNextTransactionDateVisible() {\n if (this.hiddenSelector.matches('next-transaction-date', true)) return false;\n if (this.settings === null) return true;\n if (this.data === null) return false;\n\n const rules = this.settings.subscriptions.allow_next_date_modification;\n return !!getNextTransactionDateConstraints(this.data, rules);\n }\n\n private get __isFrequencyVisible() {\n if (this.hiddenSelector.matches('frequency', true)) return false;\n if (this.settings === null) return true;\n if (this.data === null) return false;\n\n const allowedFrequencies = getAllowedFrequencies({\n subscription: this.data,\n settings: this.settings,\n });\n\n return !allowedFrequencies.next().done;\n }\n\n private get __frequencies() {\n if (!this.settings \|\| !this.data) return ['.5m', '1m', '1y'];\n\n const allowedFrequencies = getAllowedFrequencies({\n subscription: this.data,\n settings: this.settings,\n });\n\n return Array.from(allowedFrequencies);\n }\n}\n"]}

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

@@ -69,8 +69,14 @@ SubscriptionsTable.statusColumn = {
         }
         else {
             date = ctx.data.next_transaction_date;
-            key = 'subscription_active';
-            color = 'bg-success-10 text-success';
+            if (ctx.data.is_active) {
+                key = 'subscription_active';
+                color = 'bg-success-10 text-success';
+            }
+            else {
+                key = 'subscription_inactive';
+                color = 'bg-contrast-5 text-tertiary';
+            }
         }
         return ctx.html `
         <foxy-i18n

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionsTable.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionsTable/SubscriptionsTable.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,0BAAuB;AACvC,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,0CAAuC;AAEhE,MAAM,OAAO,kBAAmB,SAAQ,iBAAiB,CAAC,KAAK,EAAE,qBAAqB,CAAO;IAA7F;;~~QAoGE~~,YAAO,GAAG;YACR,kBAAkB,CAAC,WAAW;YAC9B,kBAAkB,CAAC,aAAa;YAChC,kBAAkB,CAAC,YAAY;YAC/B,kBAAkB,CAAC,iBAAiB;SACrC,CAAC;IACJ,CAAC;;~~AAzGQ~~,8BAAW,GAAiB;IACjC,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,MAAM,WAAW,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAC9D,MAAM,MAAM,GAAG,GAAG,WAAW,CAAC,WAAW,IAAI,WAAW,CAAC,aAAa,EAAE,CAAC;QAEzE,OAAO,GAAG,CAAC,IAAI,CAAA;;;;iBAIJ,GAAG,CAAC,IAAI;uBACF,GAAG,CAAC,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW;eACpE,GAAG,CAAC,EAAE;qBACA,EAAE,GAAG,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE;;;OAG/D,CAAC;IACJ,CAAC;CACF,CAAC;AAEK,gCAAa,GAAiB;IACnC,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAClF,MAAM,OAAO,GAAG;YACd,mBAAmB,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACpE,KAAK,EAAE,KAAK,CAAC,MAAM;SACpB,CAAC;QAEF,OAAO,GAAG,CAAC,IAAI,CAAA;;;;iBAIJ,GAAG,CAAC,IAAI;;eAEV,GAAG,CAAC,EAAE;qBACA,OAAO;;;OAGrB,CAAC;IACJ,CAAC;CACF,CAAC;AAEK,+BAAY,GAAiB;IAClC,SAAS,EAAE,IAAI;IACf,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,IAAI,KAAa,CAAC;QAClB,IAAI,IAAY,CAAC;QACjB,IAAI,GAAW,CAAC;QAEhB,IAAI,GAAG,CAAC,IAAI,CAAC,6BAA6B,EAAE;YAC1C,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,6BAA6B,CAAC;YAC9C,GAAG,GAAG,qBAAqB,CAAC;YAC5B,KAAK,GAAG,wBAAwB,CAAC;SAClC;aAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC5B,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YACzB,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;YACpC,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACrD,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,wBAAwB,CAAC;YAC7E,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,6BAA6B,CAAC;SACjF;aAAM;YACL,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,qBAAqB,CAAC;~~YACtC~~,GAAG,GAAG,qBAAqB,CAAC;~~YAC5B~~,KAAK,GAAG,4BAA4B,CAAC;~~SACtC~~;QAED,OAAO,GAAG,CAAC,IAAI,CAAA;;;2DAGsC,KAAK;iBAC/C,GAAG,CAAC,IAAI;gBACT,GAAG;eACJ,GAAG,CAAC,EAAE;qBACA,EAAE,IAAI,EAAE;;;OAGtB,CAAC;IACJ,CAAC;CACF,CAAC;AAEK,oCAAiB,GAAiB;IACvC,IAAI,EAAE,GAAG,CAAC,EAAE;QACV,OAAO,GAAG,CAAC,IAAI,CAAA;;;;;iBAKJ,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI;;;;mBAItC,GAAG,CAAC,IAAI;;iBAEV,GAAG,CAAC,EAAE;;;;OAIhB,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import { Column } from '../Table/types';\nimport { Data } from './types';\nimport { Table } from '../Table/Table';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nexport class SubscriptionsTable extends TranslatableMixin(Table, 'subscriptions-table')<Data> {\n static priceColumn: Column<Data> = {\n cell: ctx => {\n const transaction = ctx.data._embedded['fx:last_transaction'];\n const amount = `${transaction.total_order} ${transaction.currency_code}`;\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n frequencies\"\n class=\"font-semibold text-s font-tnum\"\n lang=${ctx.lang}\n key=\"price_${ctx.data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${ctx.ns}\n .options=${{ ...parseFrequency(ctx.data.frequency), amount }}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static summaryColumn: Column<Data> = {\n cell: ctx => {\n const items = ctx.data._embedded['fx:transaction_template']._embedded['fx:items'];\n const options = {\n most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n count: items.length,\n };\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n summaries\"\n class=\"text-s\"\n lang=${ctx.lang}\n key=\"transaction_summary\"\n ns=${ctx.ns}\n .options=${options}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static statusColumn: Column<Data> = {\n hideBelow: 'md',\n cell: ctx => {\n let color: string;\n let date: string;\n let key: string;\n\n if (ctx.data.first_failed_transaction_date) {\n date = ctx.data.first_failed_transaction_date;\n key = 'subscription_failed';\n color = 'bg-error-10 text-error';\n } else if (ctx.data.end_date) {\n date = ctx.data.end_date;\n const dateAsObject = new Date(date);\n const hasEnded = dateAsObject.getTime() > Date.now();\n key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n color = hasEnded ? 'bg-success-10 text-success' : 'bg-contrast-5 text-tertiary';\n } else {\n date = ctx.data.next_transaction_date;\n key = 'subscription_active';\n color = 'bg-success-10 text-success';\n }\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n statuses\"\n class=\"px-s py-xs text-s font-semibold rounded ${color}\"\n lang=${ctx.lang}\n key=${key}\n ns=${ctx.ns}\n .options=${{ date }}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static subTokenURLColumn: Column<Data> = {\n cell: ctx => {\n return ctx.html`\n <a\n data-testclass=\"links\"\n target=\"_blank\"\n class=\"text-s font-semibold text-primary rounded hover-underline focus-outline-none focus-shadow-outline\"\n href=${ctx.data._links['fx:sub_token_url'].href}\n >\n <foxy-i18n\n data-testclass=\"i18n\"\n lang=${ctx.lang}\n key=\"update\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n </a>\n `;\n },\n };\n\n columns = [\n SubscriptionsTable.priceColumn,\n SubscriptionsTable.summaryColumn,\n SubscriptionsTable.statusColumn,\n SubscriptionsTable.subTokenURLColumn,\n ];\n}\n"]}
1	+ {"version":3,"file":"SubscriptionsTable.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionsTable/SubscriptionsTable.ts"],"names":[],"mappings":"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","sourcesContent":["import { Column } from '../Table/types';\nimport { Data } from './types';\nimport { Table } from '../Table/Table';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nexport class SubscriptionsTable extends TranslatableMixin(Table, 'subscriptions-table')<Data> {\n static priceColumn: Column<Data> = {\n cell: ctx => {\n const transaction = ctx.data._embedded['fx:last_transaction'];\n const amount = `${transaction.total_order} ${transaction.currency_code}`;\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n frequencies\"\n class=\"font-semibold text-s font-tnum\"\n lang=${ctx.lang}\n key=\"price_${ctx.data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n ns=${ctx.ns}\n .options=${{ ...parseFrequency(ctx.data.frequency), amount }}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static summaryColumn: Column<Data> = {\n cell: ctx => {\n const items = ctx.data._embedded['fx:transaction_template']._embedded['fx:items'];\n const options = {\n most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n count: items.length,\n };\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n summaries\"\n class=\"text-s\"\n lang=${ctx.lang}\n key=\"transaction_summary\"\n ns=${ctx.ns}\n .options=${options}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static statusColumn: Column<Data> = {\n hideBelow: 'md',\n cell: ctx => {\n let color: string;\n let date: string;\n let key: string;\n\n if (ctx.data.first_failed_transaction_date) {\n date = ctx.data.first_failed_transaction_date;\n key = 'subscription_failed';\n color = 'bg-error-10 text-error';\n } else if (ctx.data.end_date) {\n date = ctx.data.end_date;\n const dateAsObject = new Date(date);\n const hasEnded = dateAsObject.getTime() > Date.now();\n key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n color = hasEnded ? 'bg-success-10 text-success' : 'bg-contrast-5 text-tertiary';\n } else {\n date = ctx.data.next_transaction_date;\n\n if (ctx.data.is_active) {\n key = 'subscription_active';\n color = 'bg-success-10 text-success';\n } else {\n key = 'subscription_inactive';\n color = 'bg-contrast-5 text-tertiary';\n }\n }\n\n return ctx.html`\n <foxy-i18n\n data-testclass=\"i18n statuses\"\n class=\"px-s py-xs text-s font-semibold rounded ${color}\"\n lang=${ctx.lang}\n key=${key}\n ns=${ctx.ns}\n .options=${{ date }}\n >\n </foxy-i18n>\n `;\n },\n };\n\n static subTokenURLColumn: Column<Data> = {\n cell: ctx => {\n return ctx.html`\n <a\n data-testclass=\"links\"\n target=\"_blank\"\n class=\"text-s font-semibold text-primary rounded hover-underline focus-outline-none focus-shadow-outline\"\n href=${ctx.data._links['fx:sub_token_url'].href}\n >\n <foxy-i18n\n data-testclass=\"i18n\"\n lang=${ctx.lang}\n key=\"update\"\n ns=${ctx.ns}\n >\n </foxy-i18n>\n </a>\n `;\n },\n };\n\n columns = [\n SubscriptionsTable.priceColumn,\n SubscriptionsTable.summaryColumn,\n SubscriptionsTable.statusColumn,\n SubscriptionsTable.subTokenURLColumn,\n ];\n}\n"]}