@foxy.io/elements 1.38.0-beta.3 → 1.38.0-beta.5

package/dist/elements/public/TransactionCard/TransactionCard.js

@@ -87,6 +87,15 @@ class TransactionCard extends Base {
               <foxy-i18n .options=${options} infer="" key="price"></foxy-i18n>
             `
                 : ''}
+        ${(data === null || data === void 0 ? void 0 : data.is_test) ? html `
+              <foxy-i18n
+                infer=""
+                class="inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider"
+                key="test"
+              >
+              </foxy-i18n>
+            `
+                : ''}
       `;
         }
         else {
@@ -101,7 +110,7 @@ class TransactionCard extends Base {
     `;
     }
     __renderStatus() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const specialIcons = {
             authorized: 'icons:done',
             capturing: 'icons:done',
@@ -135,6 +144,18 @@ class TransactionCard extends Base {
         ${this.renderTemplateOrSlot('status:before')}
 
         <div class="text-tertiary text-s flex items-center space-x-xs">
+          ${((_d = this.data) === null || _d === void 0 ? void 0 : _d.hide_transaction) ? html `
+                <vcf-tooltip for="hidden" theme="light" position="top">
+                  <foxy-i18n infer="" key="hidden_hint"></foxy-i18n>
+                </vcf-tooltip>
+                <iron-icon
+                  class="icon-inline cursor-default"
+                  icon="icons:visibility-off"
+                  id="hidden"
+                >
+                </iron-icon>
+              `
+            : ''}
           ${source
             ? html `
                 <vcf-tooltip for="source" theme="light" position="top">
@@ -145,7 +166,7 @@ class TransactionCard extends Base {
             : ''}
 
           <foxy-i18n
-            options=${JSON.stringify({ value: (_d = this.data) === null || _d === void 0 ? void 0 : _d.transaction_date })}
+            options=${JSON.stringify({ value: (_e = this.data) === null || _e === void 0 ? void 0 : _e.transaction_date })}
             lang=${this.lang}
             key="time"
             ns=${this.ns}
@@ -154,9 +175,9 @@ class TransactionCard extends Base {
 
           <iron-icon
             data-testid="status-icon"
-            class="icon-inline cursor-default text-l ${(_e = specialColors[status]) !== null && _e !== void 0 ? _e : 'text-tertiary'}"
+            class="icon-inline cursor-default text-l ${(_f = specialColors[status]) !== null && _f !== void 0 ? _f : 'text-tertiary'}"
             id="status"
-            icon=${(_f = specialIcons[status]) !== null && _f !== void 0 ? _f : 'icons:schedule'}
+            icon=${(_g = specialIcons[status]) !== null && _g !== void 0 ? _g : 'icons:schedule'}
           >
           </iron-icon>
 

package/dist/elements/public/TransactionCard/TransactionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { Resource, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction.\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-s font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between gap-s\">\n                  ${hasTotal ? this.__renderIdAndTotal() : ''}\n                  ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderSummary()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"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  }\n\n  protected async _sendGet(): Promise<Data> {\n    const transaction = await super._sendGet();\n    const storeLink = transaction._links['fx:store']?.href;\n\n    if (typeof storeLink === 'string') {\n      const store = await super._fetch<Resource<Rels.Store>>(storeLink);\n      this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n    } else {\n      this.__currencyDisplay = 'symbol';\n    }\n\n    return transaction;\n  }\n\n  private __renderIdAndTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n      const options = { amount, currencyDisplay };\n\n      content = html`\n        <span class=\"truncate\">ID ${data.display_id || getResourceId(data._links.self.href)}</span>\n        ${data.type !== 'updateinfo' && data.type !== 'subscription_cancellation'\n          ? html`\n              <span>&bull;</span>\n              <foxy-i18n .options=${options} infer=\"\" key=\"price\"></foxy-i18n>\n            `\n          : ''}\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div class=\"min-w-0\" data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-medium flex items-center gap-xs\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      authorized: 'icons:done',\n      capturing: 'icons:done',\n      captured: 'icons:done',\n      approved: 'icons:done',\n      pending: 'icons:done',\n\n      completed: 'icons:done-all',\n\n      pending_fraud_review: 'icons:info-outline',\n      declined: 'icons:highlight-off',\n      rejected: 'icons:highlight-off',\n      problem: 'icons:info-outline',\n\n      refunded: 'icons:restore',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      authorized: 'text-success',\n      completed: 'text-success',\n      capturing: 'text-success',\n      captured: 'text-success',\n      approved: 'text-success',\n      pending: 'text-success',\n\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n    const source = this.data?.source?.substring(0, 3).toUpperCase();\n\n    return html`\n      <div class=\"flex-shrink-0\" data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-xs\">\n          ${source\n            ? html`\n                <vcf-tooltip for=\"source\" theme=\"light\" position=\"top\">\n                  <foxy-i18n infer=\"\" key=\"source_${source}\"></foxy-i18n>\n                </vcf-tooltip>\n                <span class=\"cursor-default\" id=\"source\">${source}</span>\n              `\n            : ''}\n\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline cursor-default text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            id=\"status\"\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n\n          <vcf-tooltip for=\"status\" theme=\"light\" position=\"top\">\n            <foxy-i18n infer=\"\" key=\"status_${status}\"></foxy-i18n>\n          </vcf-tooltip>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderSummary() {\n    const items = this.data?._embedded?.['fx:items'];\n    const type = this.data?.type;\n\n    let content: TemplateResult;\n    let key: string;\n\n    if (type === 'updateinfo') {\n      key = 'summary_payment_method_change';\n    } else if (type === 'subscription_modification') {\n      key = 'summary_subscription_modification';\n    } else if (type === 'subscription_cancellation') {\n      key = 'summary_subscription_cancellation';\n    } else {\n      key = 'summary';\n    }\n\n    if (items) {\n      const options = {\n        most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n        count_minus_one: items.length - 1,\n        count: items.length,\n      };\n\n      content = html`<foxy-i18n .options=${options} infer=\"\" key=${key}></foxy-i18n>`;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}
+{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kBAAkB,CAAC;AAC9B,MAAM,IAAI,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAEpE;;;;;GAKG;AACH,MAAM,eAAgB,SAAQ,IAAU;IAAxC;;QACU,sBAAiB,GAAG,EAAE,CAAC;IAiPjC,CAAC;IA/OC,UAAU;;QACR,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAE1D,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;qBAId,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1E,QAAQ,IAAI,SAAS;YACrB,CAAC,CAAC,IAAI,CAAA;;oBAEE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,EAAE;oBACzC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;;eAE3C;YACH,CAAC,CAAC,EAAE;YACJ,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;YACzE,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;kBAIjE,QAAQ,CAAC;YACf,8DAA8D,EAAE,IAAI;YACpE,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SACzB,CAAC;;;;oBAIQ,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;;;;;KAK3E,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,QAAQ;;QACtB,MAAM,WAAW,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC3C,MAAM,SAAS,SAAG,WAAW,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,IAAI,CAAC;QAEvD,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;YACjC,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,MAAM,CAAuB,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;SACtF;aAAM;YACL,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC;SACnC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IAEO,kBAAkB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,OAAuB,CAAC;QAE5B,IAAI,IAAI,EAAE;YACR,MAAM,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;YAC/C,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;YAE5C,OAAO,GAAG,IAAI,CAAA;oCACgB,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;UACjF,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,2BAA2B;gBACvE,CAAC,CAAC,IAAI,CAAA;;oCAEoB,OAAO;aAC9B;gBACH,CAAC,CAAC,EAAE;UACJ,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,EACb,CAAC,CAAC,IAAI,CAAA;;;;;;;aAOH;gBACH,CAAC,CAAC,EAAE;OACP,CAAC;SACH;aAAM;YACL,OAAO,GAAG,IAAI,CAAA,kBAAkB,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;4DACS,OAAO;UACzD,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;IACJ,CAAC;IAEO,cAAc;;QACpB,MAAM,YAAY,GAA2B;YAC3C,UAAU,EAAE,YAAY;YACxB,SAAS,EAAE,YAAY;YACvB,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,YAAY;YAErB,SAAS,EAAE,gBAAgB;YAE3B,oBAAoB,EAAE,oBAAoB;YAC1C,QAAQ,EAAE,qBAAqB;YAC/B,QAAQ,EAAE,qBAAqB;YAC/B,OAAO,EAAE,oBAAoB;YAE7B,QAAQ,EAAE,eAAe;YACzB,MAAM,EAAE,6BAA6B;SACtC,CAAC;QAEF,MAAM,aAAa,GAA2B;YAC5C,UAAU,EAAE,cAAc;YAC1B,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,cAAc;YACzB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,cAAc;YACxB,OAAO,EAAE,cAAc;YAEvB,oBAAoB,EAAE,YAAY;YAClC,QAAQ,EAAE,YAAY;YACtB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,YAAY;SACtB,CAAC;QAEF,MAAM,MAAM,GAAG,OAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,WAAW,CAAC;QAChD,MAAM,MAAM,eAAG,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;YAGxC,OAAA,IAAI,CAAC,IAAI,0CAAE,gBAAgB,EAC3B,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;eAUH;YACH,CAAC,CAAC,EAAE;YACJ,MAAM;YACN,CAAC,CAAC,IAAI,CAAA;;oDAEkC,MAAM;;2DAEC,MAAM;eAClD;YACH,CAAC,CAAC,EAAE;;;sBAGM,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,QAAE,IAAI,CAAC,IAAI,0CAAE,gBAAgB,EAAE,CAAC;mBACzD,IAAI,CAAC,IAAI;;iBAEX,IAAI,CAAC,EAAE;;;;;;uDAM+B,MAAA,aAAa,CAAC,MAAM,CAAC,mCAAI,eAAe;;mBAE5E,MAAA,YAAY,CAAC,MAAM,CAAC,mCAAI,gBAAgB;;;;;8CAKb,MAAM;;;;UAI1C,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;IACJ,CAAC;IAEO,eAAe;;QACrB,MAAM,KAAK,eAAG,IAAI,CAAC,IAAI,0CAAE,SAAS,0CAAG,UAAU,CAAC,CAAC;QACjD,MAAM,IAAI,SAAG,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC;QAE7B,IAAI,OAAuB,CAAC;QAC5B,IAAI,GAAW,CAAC;QAEhB,IAAI,IAAI,KAAK,YAAY,EAAE;YACzB,GAAG,GAAG,+BAA+B,CAAC;SACvC;aAAM,IAAI,IAAI,KAAK,2BAA2B,EAAE;YAC/C,GAAG,GAAG,mCAAmC,CAAC;SAC3C;aAAM,IAAI,IAAI,KAAK,2BAA2B,EAAE;YAC/C,GAAG,GAAG,mCAAmC,CAAC;SAC3C;aAAM;YACL,GAAG,GAAG,SAAS,CAAC;SACjB;QAED,IAAI,KAAK,EAAE;YACT,MAAM,OAAO,GAAG;gBACd,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;gBACpE,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC;gBACjC,KAAK,EAAE,KAAK,CAAC,MAAM;aACpB,CAAC;YAEF,OAAO,GAAG,IAAI,CAAA,uBAAuB,OAAO,iBAAiB,GAAG,eAAe,CAAC;SACjF;aAAM;YACL,OAAO,GAAG,IAAI,CAAA,kBAAkB,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,oBAAoB,CAAC;sDACH,OAAO;UACnD,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC;;KAEnD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,OAAO,GAAG,IAAI;YAClB,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,cAAc,GAAG;YACvF,CAAC,CAAC,IAAI,CAAA,kBAAkB,CAAC;QAE3B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;qDACD,OAAO;UAClD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;IACJ,CAAC;CACF;AAED,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { Resource, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst NS = 'transaction-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying a transaction.\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  renderBody(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-s font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between gap-s\">\n                  ${hasTotal ? this.__renderIdAndTotal() : ''}\n                  ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderSummary()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"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  }\n\n  protected async _sendGet(): Promise<Data> {\n    const transaction = await super._sendGet();\n    const storeLink = transaction._links['fx:store']?.href;\n\n    if (typeof storeLink === 'string') {\n      const store = await super._fetch<Resource<Rels.Store>>(storeLink);\n      this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n    } else {\n      this.__currencyDisplay = 'symbol';\n    }\n\n    return transaction;\n  }\n\n  private __renderIdAndTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n      const options = { amount, currencyDisplay };\n\n      content = html`\n        <span class=\"truncate\">ID ${data.display_id || getResourceId(data._links.self.href)}</span>\n        ${data.type !== 'updateinfo' && data.type !== 'subscription_cancellation'\n          ? html`\n              <span>&bull;</span>\n              <foxy-i18n .options=${options} infer=\"\" key=\"price\"></foxy-i18n>\n            `\n          : ''}\n        ${data?.is_test\n          ? html`\n              <foxy-i18n\n                infer=\"\"\n                class=\"inline-block text-xs font-medium uppercase bg-contrast-5 text-tertiary rounded-s p-xs leading-none tracking-wider\"\n                key=\"test\"\n              >\n              </foxy-i18n>\n            `\n          : ''}\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div class=\"min-w-0\" data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-medium flex items-center gap-xs\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      authorized: 'icons:done',\n      capturing: 'icons:done',\n      captured: 'icons:done',\n      approved: 'icons:done',\n      pending: 'icons:done',\n\n      completed: 'icons:done-all',\n\n      pending_fraud_review: 'icons:info-outline',\n      declined: 'icons:highlight-off',\n      rejected: 'icons:highlight-off',\n      problem: 'icons:info-outline',\n\n      refunded: 'icons:restore',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      authorized: 'text-success',\n      completed: 'text-success',\n      capturing: 'text-success',\n      captured: 'text-success',\n      approved: 'text-success',\n      pending: 'text-success',\n\n      pending_fraud_review: 'text-error',\n      declined: 'text-error',\n      rejected: 'text-error',\n      problem: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n    const source = this.data?.source?.substring(0, 3).toUpperCase();\n\n    return html`\n      <div class=\"flex-shrink-0\" data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-xs\">\n          ${this.data?.hide_transaction\n            ? html`\n                <vcf-tooltip for=\"hidden\" theme=\"light\" position=\"top\">\n                  <foxy-i18n infer=\"\" key=\"hidden_hint\"></foxy-i18n>\n                </vcf-tooltip>\n                <iron-icon\n                  class=\"icon-inline cursor-default\"\n                  icon=\"icons:visibility-off\"\n                  id=\"hidden\"\n                >\n                </iron-icon>\n              `\n            : ''}\n          ${source\n            ? html`\n                <vcf-tooltip for=\"source\" theme=\"light\" position=\"top\">\n                  <foxy-i18n infer=\"\" key=\"source_${source}\"></foxy-i18n>\n                </vcf-tooltip>\n                <span class=\"cursor-default\" id=\"source\">${source}</span>\n              `\n            : ''}\n\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline cursor-default text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            id=\"status\"\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n\n          <vcf-tooltip for=\"status\" theme=\"light\" position=\"top\">\n            <foxy-i18n infer=\"\" key=\"status_${status}\"></foxy-i18n>\n          </vcf-tooltip>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderSummary() {\n    const items = this.data?._embedded?.['fx:items'];\n    const type = this.data?.type;\n\n    let content: TemplateResult;\n    let key: string;\n\n    if (type === 'updateinfo') {\n      key = 'summary_payment_method_change';\n    } else if (type === 'subscription_modification') {\n      key = 'summary_subscription_modification';\n    } else if (type === 'subscription_cancellation') {\n      key = 'summary_subscription_cancellation';\n    } else {\n      key = 'summary';\n    }\n\n    if (items) {\n      const options = {\n        most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n        count_minus_one: items.length - 1,\n        count: items.length,\n      };\n\n      content = html`<foxy-i18n .options=${options} infer=\"\" key=${key}></foxy-i18n>`;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}

package/dist/mixins/themeable.js

@@ -380,6 +380,10 @@ input::-webkit-date-and-time-value{
   display:none !important;
 }
 
+option{
+  color:var(--lumo-body-text-color);
+}
+
 .container {
   width: 100%;
 }
@@ -1538,6 +1542,10 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-50pct, hsla(214, 45%, 20%, 0.5));
 }
 
+.border-contrast-60 {
+  border-color: var(--lumo-contrast-60pct, hsla(214, 43%, 19%, 0.61));
+}
+
 .border-contrast {
   border-color: var(--lumo-contrast, hsl(214, 35%, 15%));
 }

package/dist/mixins/themeable.js.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAmKF;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;;;KAIF,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          @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      :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"]}
+{"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;;;KAIF,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      :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

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

package/dist/cdn/shared-994c7754.js

@@ -1 +0,0 @@
-import"./foxy-spinner.js";import{I as e}from"./shared-d793edcb.js";customElements.define("foxy-internal-card",e);

package/dist/cdn/shared-ff8eb8a3.js

@@ -1 +0,0 @@
-import{_ as r}from"./shared-cb58dfcd.js";import{p as s}from"./shared-9bd0911a.js";function t(t){var a;const n=s(t),o=null!==(a={y:"yearly",m:"monthly",w:"weekly",d:"daily"}[n.units])&&void 0!==a?a:n.units;return r(r({},n),{},{units:o})}export{t as p};