npm - @foxy.io/elements - Versions diffs - 1.47.0-beta.3 → 1.48.0-beta.1 - Mend

@foxy.io/elements 1.47.0-beta.3 → 1.48.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

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

@@ -27,7 +27,7 @@ export class SubscriptionCard extends Base {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c;
         const status = this.settings
             ? getExtendedSubscriptionStatus(this.data, this.settings)
             : getSubscriptionStatus(this.data);
@@ -38,13 +38,14 @@ export class SubscriptionCard extends Base {
       <div class="relative text-left">
         <div
           class=${classMap({
-            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,
+            'flex items-start space-x-m transition duration-150 ease-in-out': true,
             'opacity-0': !this.in({ idle: 'snapshot' }),
         })}
         >
           <div
+            style="width: calc(var(--lumo-font-size-m) * var(--lumo-line-height-xs) * 2); height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-xs) * 2)"
             class=${classMap({
-            'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,
+            'min-w-0 flex-shrink-0 rounded-full relative flex': true,
             'text-success bg-success-10': isGreen,
             'text-body bg-contrast-5': isNormal,
             'text-error bg-error-10': isRed,
@@ -57,18 +58,16 @@ export class SubscriptionCard extends Base {
             </iron-icon>
           </div>
-          <div class="flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center">
-            <div class="order-1 sm-order-0">
+          <div class="flex-1 min-w-0 leading-xs flex flex-col gap-m sm-flex-row">
+            <div>
               <div class="text-body font-medium origin-top-left text-m">
                 <foxy-i18n
                   data-testid="summary"
-                  options=${JSON.stringify(this.__getSummaryOptions())}
-                  lang=${this.lang}
-                  key="transaction_summary"
-                  ns=${this.ns}
+                  infer=""
+                  key="summary"
+                  .options=${this.__getSummaryOptions()}
                 >
                 </foxy-i18n>
-                &#8203;
               </div>
               <div
@@ -81,33 +80,27 @@ export class SubscriptionCard extends Base {
               >
                 <foxy-i18n
                   data-testid="status"
-                  lang=${this.lang}
+                  infer=""
                   key="status_${status}"
-                  ns=${this.ns}
                   .options=${this.data}
                 >
                 </foxy-i18n>
-                &#8203;
               </div>
             </div>
-            <div class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1">
+            <div class="flex-1 leading-xs sm-text-right sm-flex-shrink-0 sm-whitespace-nowrap">
               <foxy-i18n
                 data-testid="price"
                 options=${JSON.stringify(this.__getPriceOptions())}
-                class="text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block"
-                lang=${this.lang}
+                class="text-l font-medium block"
+                infer=""
                 key="price${((_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.cart_display_config.show_sub_frequency) !== null && _b !== void 0 ? _b : true) ? `_${((_c = this.data) === null || _c === void 0 ? void 0 : _c.frequency) === '.5m' ? 'twice_a_month' : 'recurring'}`
             : ''}"
-                ns=${this.ns}
               >
               </foxy-i18n>
-              <span class="text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s">
-                <span class="sm-hidden">(</span>
-                <span class="hidden sm-inline">*</span>
+              <span class="text-secondary font-normal block text-s">
                 <foxy-i18n infer="" key="fees_hint"></foxy-i18n>
-                <span class="sm-hidden">)</span>
                 <iron-icon id="hint" icon="icons:info-outline" class="icon-inline"></iron-icon>
                 <vcf-tooltip
                   position="bottom"
@@ -124,7 +117,6 @@ export class SubscriptionCard extends Base {
                   </foxy-i18n>
                 </vcf-tooltip>
               </span>
-              &#8203;
             </div>
           </div>
         </div>
@@ -139,8 +131,7 @@ export class SubscriptionCard extends Base {
           <foxy-spinner
             state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
             class="m-auto"
-            lang=${this.lang}
-            ns="${this.ns} ${(_e = (_d = customElements.get('foxy-spinner')) === null || _d === void 0 ? void 0 : _d.defaultNS) !== null && _e !== void 0 ? _e : ''}"
+            infer="spinner"
           >
           </foxy-spinner>
         </div>
@@ -153,11 +144,15 @@ export class SubscriptionCard extends Base {
         if (this.data === null)
             return {};
         const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];
-        return {
-            count_minus_one: items.length - 1,
-            first_item: items[0],
-            count: items.length,
-        };
+        const count = items.length;
+        const context = count === 1
+            ? 'one_item'
+            : count === 2
+                ? 'two_items'
+                : count === 3
+                    ? 'three_items'
+                    : 'four_plus_items';
+        return { items, count_minus_three: count - 3, context };
     }
     __getPriceOptions() {
         if (this.data === null)

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":"AAGA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,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,OAAO,EACL,6BAA6B,EAC7B,qBAAqB,GACtB,kDAA+C;AAEhD,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;IAAhD;;QAQE,aAAQ,GAAoB,IAAI,CAAC;~~IAkJnC~~,CAAC;~~IAzJC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC3B,CAAC;IACJ,CAAC;IAID,MAAM;;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,6BAA6B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;YACzD,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,MAAM,KAAK,GAAG,MAAM,KAAK,QAAQ,CAAC;QAClC,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,cAAc,MAAK,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC,UAAU,EAAC,CAAC;QACvF,MAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC;QAEpC,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,OAAO;YACrC,yBAAyB,EAAE,QAAQ;YACnC,wBAAwB,EAAE,KAAK;SAChC,CAAC;;;;qBAIO,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU~~;;;;;;;;;;4BAUhD~~,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,QAAQ;YACzB,cAAc,EAAE,OAAO;YACvB,YAAY,EAAE,KAAK;SACpB,CAAC~~;;;;yBAIO~~,~~IAAI,CAAC,IAAI;gCACF,~~MAAM;~~uBACf~~,IAAI,CAAC,~~EAAE;6BACD,~~IAAI,~~CAAC,~~IAAI~~;;;;;;;;;;0BAUZ~~,~~IAAI,~~CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC~~;;uBAE3C~~,~~IAAI,CAAC,IAAI;4BACJ,~~aAAA,IAAI,CAAC,QAAQ,0CAAE,mBAAmB,CAAC,kBAAkB,mCAAI,IAAI,EACvE,CAAC,CAAC,IAAI,OAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,MAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,EAAE;YACtE,CAAC,CAAC,EAAE~~;qBACD~~,~~IAAI,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAgCV,~~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,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;~~QAEnF~~,~~OAAO;YACL~~,~~eAAe~~,~~EAAE~~,KAAK,CAAC,MAAM,~~GAAG~~,CAAC;~~YACjC~~,UAAU,~~EAAE~~,KAAK,CAAC,CAAC,CAAC;~~YACpB~~,KAAK,EAAE,KAAK,CAAC,~~MAAM;SACpB~~,CAAC;~~IACJ~~,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO,EAAE,CAAC;QAElC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC;QAC5D,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QAC3D,OAAO,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5D,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\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\nimport {\n getExtendedSubscriptionStatus,\n getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\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 static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n settings: { type: Object },\n };\n }\n\n settings: Settings \| null = null;\n\n render(): TemplateResult {\n const status = this.settings\n ? getExtendedSubscriptionStatus(this.data, this.settings)\n : getSubscriptionStatus(this.data);\n\n const isRed = status === 'failed';\n const isGreen = status?.startsWith('next_payment') \|\| !!status?.startsWith('will_end');\n const isNormal = !isGreen && !isRed;\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': isGreen,\n 'text-body bg-contrast-5': isNormal,\n 'text-error bg-error-10': isRed,\n })}\n >\n <iron-icon\n class=\"m-auto\"\n icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n >\n </iron-icon>\n </div>\n\n <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row ~~sm-items-center~~\">\n <div ~~class=\"order-1 sm-order-0\"~~>\n <div class=\"text-body font-medium 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-m': true,\n 'text-tertiary': isNormal,\n 'text-success': isGreen,\n 'text-error': isRed,\n })}\n >\n <foxy-i18n\n data-testid=\"status\"\n ~~lang=${this.lang}~~\n key=\"status_${status}\"\n ~~ns=${this~~.~~ns}\n .~~options=${this.data}\n >\n </foxy-i18n>\n ~~\n~~ </div>\n </div>\n\n <div class=\"flex-1 leading-xs ~~mb-xs~~ sm-mb-0 sm-~~text~~-~~right order~~-0 sm-~~order~~-1\">\n <foxy-i18n\n data-testid=\"price\"\n options=${JSON.stringify(this.__getPriceOptions())}\n class=\"text-~~xxs sm-text-~~l font-~~tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-~~medium ~~text-secondary sm-text-body sm-~~block\"\n ~~lang=${this.lang}~~\n key=\"price${this.settings?.cart_display_config.show_sub_frequency ?? true\n ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n : ''}\"\n ~~ns=${this.ns}\n~~ >\n </foxy-i18n>\n\n <span class=\"text-secondary font-~~medium sm-font-~~normal ~~sm-~~block text-~~xxs sm-text-~~s\">\n <~~span class=\"sm-hidden\">(</span>\n <span class=\"hidden sm-inline\"></span>\n <~~foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n>\n <~~span class=\"sm-hidden\">)</span>\n <~~iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n <vcf-tooltip\n position=\"bottom\"\n style=\"--lumo-base-color: black\"\n theme=\"light\"\n for=\"hint\"\n >\n <foxy-i18n\n infer=\"\"\n class=\"text-s whitespace-nowrap\"\n style=\"color: white\"\n key=\"fees_explainer\"\n >\n </foxy-i18n>\n </vcf-tooltip>\n </span>\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.data === null) return {};\n const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n ~~return~~ ~~{\n count_minus_one:~~ items.length - 1,\n ~~first_item~~: ~~items[0],\~~n count: ~~items.length,\~~n };\n }\n\n private __getPriceOptions() {\n if (this.data === null) return {};\n\n const cart = this.data._embedded['fx:transaction_template'];\n const amount = `${cart.total_order} ${cart.currency_code}`;\n return { ...parseFrequency(this.data.frequency), amount };\n }\n}\n"]}
1	+ {"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\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\nimport {\n getExtendedSubscriptionStatus,\n getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\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 static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n settings: { type: Object },\n };\n }\n\n settings: Settings \| null = null;\n\n render(): TemplateResult {\n const status = this.settings\n ? getExtendedSubscriptionStatus(this.data, this.settings)\n : getSubscriptionStatus(this.data);\n\n const isRed = status === 'failed';\n const isGreen = status?.startsWith('next_payment') \|\| !!status?.startsWith('will_end');\n const isNormal = !isGreen && !isRed;\n\n return html`\n <div class=\"relative text-left\">\n <div\n class=${classMap({\n 'flex items-start space-x-m transition duration-150 ease-in-out': true,\n 'opacity-0': !this.in({ idle: 'snapshot' }),\n })}\n >\n <div\n style=\"width: calc(var(--lumo-font-size-m) var(--lumo-line-height-xs) * 2); height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-xs) * 2)\"\n class=${classMap({\n 'min-w-0 flex-shrink-0 rounded-full relative flex': true,\n 'text-success bg-success-10': isGreen,\n 'text-body bg-contrast-5': isNormal,\n 'text-error bg-error-10': isRed,\n })}\n >\n <iron-icon\n class=\"m-auto\"\n icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n >\n </iron-icon>\n </div>\n\n <div class=\"flex-1 min-w-0 leading-xs flex flex-col gap-m sm-flex-row\">\n <div>\n <div class=\"text-body font-medium origin-top-left text-m\">\n <foxy-i18n\n data-testid=\"summary\"\n infer=\"\"\n key=\"summary\"\n .options=${this.__getSummaryOptions()}\n >\n </foxy-i18n>\n </div>\n\n <div\n class=${classMap({\n 'text-m': true,\n 'text-tertiary': isNormal,\n 'text-success': isGreen,\n 'text-error': isRed,\n })}\n >\n <foxy-i18n\n data-testid=\"status\"\n infer=\"\"\n key=\"status_${status}\"\n .options=${this.data}\n >\n </foxy-i18n>\n </div>\n </div>\n\n <div class=\"flex-1 leading-xs sm-text-right sm-flex-shrink-0 sm-whitespace-nowrap\">\n <foxy-i18n\n data-testid=\"price\"\n options=${JSON.stringify(this.__getPriceOptions())}\n class=\"text-l font-medium block\"\n infer=\"\"\n key=\"price${this.settings?.cart_display_config.show_sub_frequency ?? true\n ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n : ''}\"\n >\n </foxy-i18n>\n\n <span class=\"text-secondary font-normal block text-s\">\n <foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n>\n <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n <vcf-tooltip\n position=\"bottom\"\n style=\"--lumo-base-color: black\"\n theme=\"light\"\n for=\"hint\"\n >\n <foxy-i18n\n infer=\"\"\n class=\"text-s whitespace-nowrap\"\n style=\"color: white\"\n key=\"fees_explainer\"\n >\n </foxy-i18n>\n </vcf-tooltip>\n </span>\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 infer=\"spinner\"\n >\n </foxy-spinner>\n </div>\n </div>\n\n ${this.renderTemplateOrSlot()}\n `;\n }\n\n private __getSummaryOptions() {\n if (this.data === null) return {};\n const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n const count = items.length;\n const context =\n count === 1\n ? 'one_item'\n : count === 2\n ? 'two_items'\n : count === 3\n ? 'three_items'\n : 'four_plus_items';\n\n return { items, count_minus_three: count - 3, context };\n }\n\n private __getPriceOptions() {\n if (this.data === null) return {};\n\n const cart = this.data._embedded['fx:transaction_template'];\n const amount = `${cart.total_order} ${cart.currency_code}`;\n return { ...parseFrequency(this.data.frequency), amount };\n }\n}\n"]}

package/dist/mixins/themeable.js CHANGED Viewed

@@ -489,14 +489,6 @@ option{
   z-index: 50;
 }
-.order-1 {
-  order: 1;
-}
-:host([sm]) .sm-order-1 {
-  order: 1;
-}
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -790,10 +782,6 @@ option{
   display: block;
 }
-:host([sm]) .sm-inline {
-  display: inline;
-}
 :host([sm]) .sm-flex {
   display: flex;
 }
@@ -802,10 +790,6 @@ option{
   display: table-cell;
 }
-:host([sm]) .sm-hidden {
-  display: none;
-}
 :host([md]) .md-flex {
   display: flex;
 }
@@ -962,6 +946,10 @@ option{
   flex-shrink: 1;
 }
+:host([sm]) .sm-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .table-fixed {
   table-layout: fixed;
 }
@@ -1416,6 +1404,10 @@ option{
   white-space: pre-wrap;
 }
+:host([sm]) .sm-whitespace-nowrap {
+  white-space: nowrap;
+}
 .break-all {
   word-break: break-all;
 }
@@ -1995,18 +1987,10 @@ option{
   font-size: var(--lumo-font-size-xxxl, 2.5rem);
 }
-:host([sm]) .sm-text-s {
-  font-size: var(--lumo-font-size-s, 0.875rem);
-}
 :host([sm]) .sm-text-m {
   font-size: var(--lumo-font-size-m, 1rem);
 }
-:host([sm]) .sm-text-l {
-  font-size: var(--lumo-font-size-l, 1.125rem);
-}
 .font-normal {
   font-weight: 400;
 }
@@ -2015,10 +1999,6 @@ option{
   font-weight: 500;
 }
-:host([sm]) .sm-font-normal {
-  font-weight: 400;
-}
 .uppercase {
   text-transform: uppercase;
 }
@@ -2031,10 +2011,6 @@ option{
   text-transform: capitalize;
 }
-:host([sm]) .sm-normal-case {
-  text-transform: none;
-}
 .ordinal {
   --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);
   --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);
@@ -2076,10 +2052,6 @@ option{
   letter-spacing: 0.1em;
 }
-:host([sm]) .sm-tracking-normal {
-  letter-spacing: 0em;
-}
 .text-folder-red {
   color: var(--lumo-folder-red, #DC143C);
 }
@@ -2218,10 +2190,6 @@ option{
   color: var(--lumo-tertiary-text-color, hsla(214, 45%, 20%, 0.5));
 }
-:host([sm]) .sm-text-body {
-  color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
-}
 .focus-within-text-primary-contrast:focus-within {
   color: var(--lumo-primary-contrast-color, #fff);
 }

package/dist/mixins/themeable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult \| CSSResultArray \| CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n return class ThemeableElement extends BaseElement {\n static get styles(): CSSResultArray {\n const originalCSS = super.styles;\n\n return [\n ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n css`\n @tailwind base;\n\n {\n -webkit-tap-highlight-color: transparent;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n :host {\n display: block;\n color: var(--lumo-body-text-color);\n line-height: var(--lumo-line-height-m);\n font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n }\n\n details > summary::-webkit-details-marker {\n display: none;\n }\n\n details > summary {\n list-style: none;\n }\n\n vaadin-select {\n margin-top: -4px;\n margin-bottom: -4px;\n }\n\n vaadin-text-area,\n vaadin-text-field,\n vaadin-date-picker,\n vaadin-email-field,\n vaadin-number-field,\n vaadin-custom-field,\n vaadin-integer-field,\n vaadin-password-field,\n vaadin-checkbox-group,\n vaadin-radio-group,\n vaadin-combo-box::part(text-field),\n vaadin-date-picker::part(text-field) {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n vaadin-text-area::part(label),\n vaadin-text-field::part(label),\n vaadin-date-picker::part(label),\n vaadin-email-field::part(label),\n vaadin-number-field::part(label),\n vaadin-custom-field::part(label),\n vaadin-integer-field::part(label),\n vaadin-password-field::part(label),\n vaadin-checkbox-group::part(label),\n vaadin-radio-group::part(label),\n vaadin-combo-box::part(label),\n vaadin-date-picker::part(label) {\n margin-left: 0;\n }\n\n vaadin-time-picker,\n vaadin-date-time-picker {\n width: 100%;\n }\n\n vaadin-button,\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(label) {\n margin: 0.1875em var(--lumo-space-m);\n }\n\n .appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n\n .appearance-none::-webkit-calendar-picker-indicator,\n .appearance-none::-webkit-outer-spin-button,\n .appearance-none::-webkit-inner-spin-button,\n .appearance-none::-webkit-list-button {\n opacity: 0 !important;\n width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n input::-webkit-date-and-time-value {\n text-align: inherit !important;\n }\n\n [hidden] {\n display: none !important;\n }\n\n option {\n color: var(--lumo-body-text-color);\n }\n\n @tailwind components;\n\n @tailwind utilities;\n\n @layer utilities {\n .border-radius-overflow-fix {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n @variants sm, md, lg, xl {\n .grid-rows-auto {\n grid-auto-rows: 1fr;\n }\n\n .icon-inline {\n --iron-icon-height: 1em;\n --iron-icon-width: 1em;\n }\n\n .bg-blurred {\n backdrop-filter: blur(25px);\n background: var(--lumo-tint-80pct);\n }\n\n .max-w-modal {\n max-width: 28rem;\n }\n\n .max-w-modal-wide {\n max-width: 50rem;\n }\n\n .w-narrow-modal {\n width: 18rem;\n }\n\n .snap-x-mandatory {\n scroll-snap-type: x mandatory;\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .hljs-tag {\n color: var(--lumo-tertiary-text-color);\n font-weight: 500;\n }\n\n .hljs-name {\n color: var(--lumo-primary-text-color);\n font-weight: 500;\n }\n\n .hljs-attr {\n color: var(--lumo-secondary-text-color);\n font-weight: 500;\n }\n\n .hljs-string {\n color: var(--lumo-success-text-color);\n font-weight: 500;\n }\n }\n }\n `,\n ];\n }\n };\n};\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker',\n css`\n vaadin-date-time-picker-custom-field {\n --lumo-text-field-size: auto;\n padding: 0;\n }\n\n vaadin-date-time-picker-custom-field::part(label) {\n padding-bottom: 0.5em;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-date-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-date-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-time-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-time-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-button',\n css`\n #button {\n cursor: pointer;\n }\n\n :host([theme~='primary']) {\n font-weight: 500;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 /\n registerStyles(\n 'vcf-tooltip',\n css`\n :host([hidden]) [part='container'] {\n display: none !important;\n }\n `\n );\n} catch {\n // ignore\n}\n\n/\n One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n \n @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
1	+ {"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult \| CSSResultArray \| CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n return class ThemeableElement extends BaseElement {\n static get styles(): CSSResultArray {\n const originalCSS = super.styles;\n\n return [\n ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n css`\n @tailwind base;\n\n {\n -webkit-tap-highlight-color: transparent;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n :host {\n display: block;\n color: var(--lumo-body-text-color);\n line-height: var(--lumo-line-height-m);\n font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n }\n\n details > summary::-webkit-details-marker {\n display: none;\n }\n\n details > summary {\n list-style: none;\n }\n\n vaadin-select {\n margin-top: -4px;\n margin-bottom: -4px;\n }\n\n vaadin-text-area,\n vaadin-text-field,\n vaadin-date-picker,\n vaadin-email-field,\n vaadin-number-field,\n vaadin-custom-field,\n vaadin-integer-field,\n vaadin-password-field,\n vaadin-checkbox-group,\n vaadin-radio-group,\n vaadin-combo-box::part(text-field),\n vaadin-date-picker::part(text-field) {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n vaadin-text-area::part(label),\n vaadin-text-field::part(label),\n vaadin-date-picker::part(label),\n vaadin-email-field::part(label),\n vaadin-number-field::part(label),\n vaadin-custom-field::part(label),\n vaadin-integer-field::part(label),\n vaadin-password-field::part(label),\n vaadin-checkbox-group::part(label),\n vaadin-radio-group::part(label),\n vaadin-combo-box::part(label),\n vaadin-date-picker::part(label) {\n margin-left: 0;\n }\n\n vaadin-time-picker,\n vaadin-date-time-picker {\n width: 100%;\n }\n\n vaadin-button,\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(label) {\n margin: 0.1875em var(--lumo-space-m);\n }\n\n .appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n }\n\n .appearance-none::-webkit-calendar-picker-indicator,\n .appearance-none::-webkit-outer-spin-button,\n .appearance-none::-webkit-inner-spin-button,\n .appearance-none::-webkit-list-button {\n opacity: 0 !important;\n width: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n input::-webkit-date-and-time-value {\n text-align: inherit !important;\n }\n\n [hidden] {\n display: none !important;\n }\n\n option {\n color: var(--lumo-body-text-color);\n }\n\n @tailwind components;\n\n @tailwind utilities;\n\n @layer utilities {\n .border-radius-overflow-fix {\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n @variants sm, md, lg, xl {\n .grid-rows-auto {\n grid-auto-rows: 1fr;\n }\n\n .icon-inline {\n --iron-icon-height: 1em;\n --iron-icon-width: 1em;\n }\n\n .bg-blurred {\n backdrop-filter: blur(25px);\n background: var(--lumo-tint-80pct);\n }\n\n .max-w-modal {\n max-width: 28rem;\n }\n\n .max-w-modal-wide {\n max-width: 50rem;\n }\n\n .w-narrow-modal {\n width: 18rem;\n }\n\n .snap-x-mandatory {\n scroll-snap-type: x mandatory;\n }\n\n .snap-start {\n scroll-snap-align: start;\n }\n\n .hljs-tag {\n color: var(--lumo-tertiary-text-color);\n font-weight: 500;\n }\n\n .hljs-name {\n color: var(--lumo-primary-text-color);\n font-weight: 500;\n }\n\n .hljs-attr {\n color: var(--lumo-secondary-text-color);\n font-weight: 500;\n }\n\n .hljs-string {\n color: var(--lumo-success-text-color);\n font-weight: 500;\n }\n }\n }\n `,\n ];\n }\n };\n};\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker',\n css`\n vaadin-date-time-picker-custom-field {\n --lumo-text-field-size: auto;\n padding: 0;\n }\n\n vaadin-date-time-picker-custom-field::part(label) {\n padding-bottom: 0.5em;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-date-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-date-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-date-time-picker-time-picker',\n css`\n :host {\n --lumo-text-field-size: auto;\n }\n vaadin-date-time-picker-time-text-field {\n padding: 0;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n registerStyles(\n 'vaadin-button',\n css`\n #button {\n cursor: pointer;\n }\n\n :host([theme~='primary']) {\n font-weight: 500;\n }\n `\n );\n} catch {\n // ignore\n}\n\ntry {\n /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 /\n registerStyles(\n 'vcf-tooltip',\n css`\n :host([hidden]) [part='container'] {\n display: none !important;\n }\n `\n );\n} catch {\n // ignore\n}\n\n/\n One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n \n @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.47.0-beta.3",
+  "version": "1.48.0-beta.1",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-3d353eb8.js DELETED Viewed

@@ -1 +0,0 @@

- import{F as e,A as t,_ as n}from"./shared-8f9014ff.js";import{h as r,L as s}from"./shared-ba5c42c7.js";import{i,a as o}from"./shared-47f3f5f5.js";import{I as a}from"./shared-930e68b7.js";const l={type:"backend",init:()=>{},read:(n,r,s)=>{const i=async e=>{const t=e.ok?null:new Error(await e.text()),n=!!e.ok&&await e.json();s(t,n)},o=e=>{const t=e instanceof Error?e:new Error(String(e));s(t,!1)},a=new e("fetch",{cancelable:!0,composed:!0,bubbles:!0,request:new t.WHATWGRequest(`foxy://i18n/${r}/${n}`),resolve:i,reject:o});dispatchEvent(a),a.defaultPrevented||fetch(a.request).then(i).catch(o)},create:()=>{throw new Error("foxy-i18n does not support resource creation")}};function c(e,t=!1){var n;const r=e.replace(/^\.?\d+/,""),s=e.substring(0,e.length-r.length);return{count:".5"===s?.5:parseInt(s),units:t&&null!==(n={y:"year",m:"month",w:"week",d:"day"}[r])&&void 0!==n?n:r}}const u={discount:({ns:e,type:t,details:n},r,s)=>{const i=t.endsWith("_percentage")?.01:1,o=n.split("|"),a=["allunits","incremental","repeat","single"].includes(o[0])?o.shift():"single",l=e.split(" "),c=l.shift(),u=[...l,`${a}_${t}_discount_summary`].join(".");return o.map((e=>{var t,n;const r=null!==(n=null===(t=/[-+]/.exec(e))||void 0===t?void 0:t.index)&&void 0!==n?n:-1,s=parseFloat(e.substring(r))*i,o=parseFloat(e.substring(0,r));return`$t(${u}, ${JSON.stringify({maximumFractionDigits:10,adjustment:s,from:o,ns:c})})`})).join("; ")},relative:(e,t,n)=>{const r=new Intl.RelativeTimeFormat(n);let{count:s,units:i}=c(e,!0);return.5===s&&"month"===i&&(s=2,i="week"),r.format(s,i)},percent:(e,t,r,s)=>{let i=null;try{"number"==typeof e&&(i=e.toLocaleString(r,n(n({},s),{},{style:"percent"})))}catch(e){console.warn(`i18next formatter error: ${e.message}`)}return i||String(e)},ordinal:(e,t,n,r)=>{var s,i;const o=new Intl.PluralRules(n,{type:"ordinal"}),a=null!==(i=null===(s=null==r?void 0:r.ns)||void 0===s?void 0:s.split(" "))&&void 0!==i?i:[];null==a||a.shift();return`${e}$t(${[...a,`ordinal_${o.select(e)}`].join(".")})`},price:(e,t,n,r)=>{var s;try{const[t,i]=e.split(" ");return parseFloat(t).toLocaleString(n,{maximumFractionDigits:2,minimumFractionDigits:2,currencyDisplay:null!==(s=null==r?void 0:r.currencyDisplay)&&void 0!==s?s:"symbol",signDisplay:null==r?void 0:r.signDisplay,style:"currency",currency:i})}catch(t){return e}},date:(e,t,n,r)=>{var s,i,o;if(!e)return"$t(unknown)";const a=new Date(e),l=null!==(s=null==r?void 0:r.month)&&void 0!==s?s:"long",c=null!==(i=null==r?void 0:r.year)&&void 0!==i?i:"numeric",u=null!==(o=null==r?void 0:r.day)&&void 0!==o?o:"numeric";return a.toLocaleDateString(n,{month:l,year:c,day:u})},time:(e,t,n)=>new Date(e).toLocaleTimeString(n,{hour:"numeric",minute:"numeric"})};let d,p=e=>e;class h extends(o(a(s),"")){constructor(){super(...arguments),this.options={},this.key=""}static onTranslationChange(e){const t=["initialized","loaded"],n=["removed","added"];return t.forEach((t=>h.i18next.on(t,e))),n.forEach((t=>h.i18next.store.on(t,e))),()=>{t.forEach((t=>h.i18next.off(t,e))),n.forEach((t=>h.i18next.store.off(t,e)))}}static onResourceFetch(t){const n=n=>{if(n instanceof e&&n.request.url.startsWith("foxy://i18n/")){const[e,r]=n.request.url.split("/").reverse();n.respondWith(t(r,e))}};return addEventListener("fetch",n),()=>removeEventListener("fetch",n)}static setGateways({values:e}){for(const t in e)this.i18next.addResource("en","gateways",`gateways.${t}`,e[t].name)}static get properties(){return n(n({},super.properties),{},{options:{type:Object},key:{type:String}})}connectedCallback(){super.connectedCallback(),this.__unsubscribe=h.onTranslationChange((()=>this.requestUpdate()))}render(){return r(d||(d=p`<span>${0}</span>`),this.t(this.key,n(n({},this.options),{},{lng:this.lang})))}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.__unsubscribe)||void 0===e||e.call(this)}}h.FetchEvent=e,h.i18next=i.createInstance().use(l),h.i18next.init({interpolation:{format:(e,t="",n="en",r={})=>t.split(" ").filter((e=>!!e.trim())).reduce(((e,t)=>{var s,i;return null!==(i=null===(s=u[t])||void 0===s?void 0:s.call(u,e,t,n,r))&&void 0!==i?i:e}),e),escapeValue:!1},fallbackLng:"en",fallbackNS:"shared",defaultNS:"shared",ns:["shared"]}),customElements.define("foxy-i18n",h);export{h as I,c as p};