@foxy.io/elements 1.16.0-beta.1 → 1.16.0-beta.12

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\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 get from 'lodash-es/get';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(LitElement, NS))));\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalItemsValue = Number(get(data, 'total_items'));\n    const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;\n\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < totalItems;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      <div class=\"grid grid-cols-3 gap-s items-center\">\n        <div class=\"flex items-center space-x-s\">\n          <vaadin-button\n            data-testid=\"first\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('first')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"prev\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('prev')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n        </div>\n\n        <foxy-i18n\n          options=${JSON.stringify({\n            total: totalItems,\n            from: offset ? offset + 1 : 0,\n            to: offset + returnedItems,\n          })}\n          class=${classMap({\n            'flex-1 text-xs text-tertiary text-center leading-xs': true,\n            'opacity-0': !data,\n          })}\n          lang=${lang}\n          key=\"pagination\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n\n        <div class=\"flex items-center justify-end space-x-s\">\n          <vaadin-button\n            data-testid=\"next\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('next')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"last\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('last')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n          </vaadin-button>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__rerender);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\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 get from 'lodash-es/get';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalItemsValue = Number(get(data, 'total_items'));\n    const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;\n\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < totalItems;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      <div class=\"grid grid-cols-3 gap-s items-center -mx-xs\">\n        <div class=\"flex items-center space-x-s\">\n          <vaadin-button\n            data-testid=\"first\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('first')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"prev\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('prev')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n        </div>\n\n        <foxy-i18n\n          options=${JSON.stringify({\n            total: totalItems,\n            from: offset ? offset + 1 : 0,\n            to: offset + returnedItems,\n          })}\n          class=${classMap({\n            'flex-1 text-xs text-tertiary text-center leading-xs': true,\n            'opacity-0': !data,\n          })}\n          lang=${lang}\n          key=\"pagination\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n\n        <div class=\"flex items-center justify-end space-x-s\">\n          <vaadin-button\n            data-testid=\"next\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('next')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"last\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('last')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n          </vaadin-button>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__rerender);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}

package/dist/elements/public/PaymentCard/PaymentCard.js

@@ -60,7 +60,7 @@ export class PaymentCard extends Base {
           ${isCardInfoHidden && isFraudRiskHidden
             ? ''
             : html `
-                <div class="my-s flex space-x-s">
+                <div class="my-s flex space-x-s overflow-auto">
                   ${isCardInfoHidden ? '' : this.__renderCardInfo()}
                   ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}
                 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/PaymentCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,sCAAmC;AAGpD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAGlE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,IAAI,GAAG,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;AAElG;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAU;IAA3C;;QACE,cAAS,GAAc,EAAE,CAAC;QAElB,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA8J1B,CAAC;IA5JC,MAAM;;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAC3D,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAE7D,OAAO,IAAI,CAAA;;oBAEK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAK/B,QAAQ,CAAC;YACf,8CAA8C,EAAE,IAAI;YACpD,+BAA+B,EAAE,CAAC,IAAI,CAAC,IAAI;SAC5C,CAAC;;YAEA,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACzD,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC/D,gBAAgB,IAAI,iBAAiB;YACrC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;oBAEE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE;oBAC/C,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;eAEtD;YACH,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE;;;;kBAI5E,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAC7C,CAAC;;;;;oBAKQ,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;mBAC7E,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;QAItB,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QACvC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YAChE,KAAK,CAAC,MAAM,CAAQ,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACrD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,aAAa;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,WAAW,CAAC;QAEjC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;0BACzB,IAAI,CAAC,IAAI,QAAQ,GAAG,OAAO,EAAE;UAC7C,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;IACJ,CAAC;IAEO,gBAAgB;;QACtB,MAAM,MAAM,GAAG,GAAG,YAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,mCAAI,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAE1F,MAAM,IAAI,eAAG,IAAI,CAAC,IAAI,0CAAE,YAAY,mCAAI,EAAE,CAAC;QAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QAEpD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAEnB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;6BAEzB,aAAa,SAAS,IAAI,mBAAmB,EAAE;;6BAE/C,WAAW,SAAS,IAAI,kBAAkB,EAAE;;UAE/D,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;IACJ,CAAC;IAEO,gBAAgB;;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,IAAI,GAAG,OAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,SAAS,CAAC,CAAC,WAAW,EAAwB,CAAC;QAC9E,MAAM,IAAI,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,0CAAE,SAAS,CAAC,CAAC,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC;QACjC,MAAM,WAAW,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,0CAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QAE/D,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO;QAE5C,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC;;;6BAG1B,MAAA,KAAK,CAAC,IAAI,CAAC,mCAAI,KAAK,CAAC,OAAO;wDACD,WAAW,IAAI,KAAK,IAAI,IAAI;;;UAG1E,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;;KAEjD,CAAC;IACJ,CAAC;IAEO,iBAAiB;;QACvB,MAAM,KAAK,eAAG,IAAI,CAAC,IAAI,0CAAE,sBAAsB,mCAAI,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;QACxD,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAE/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,mBAAmB,CAAC;;;oBAGpC,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC;oFACuC,KAAK,IAAI,UAAU;iBACtF,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE;;;;UAIZ,IAAI,CAAC,oBAAoB,CAAC,kBAAkB,CAAC;;KAElD,CAAC;IACJ,CAAC;IAEO,yBAAyB;;QAC/B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,2BAA2B,CAAC;UACtD,MAAA,IAAI,CAAC,IAAI,0CAAE,kBAAkB;UAC7B,IAAI,CAAC,oBAAoB,CAAC,0BAA0B,CAAC;;KAE1D,CAAC;IACJ,CAAC;CACF","sourcesContent":["import * as logos from '../PaymentMethodCard/logos';\n\nimport { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'payment-card')));\n\n/**\n * Basic card displaying a payment.\n *\n * Note: payment gateway names need to be loaded separately. You can obtain\n * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values\n * you need. Once you have the gateway names, call `I18n.setGateways(names)`.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @slot card-info:before\n * @slot card-info:after\n *\n * @slot fraud-risk:before\n * @slot fraud-risk:after\n *\n * @slot processor-response:before\n * @slot processor-response:after\n *\n * @element foxy-payment-card\n * @since 1.11.0\n */\nexport class PaymentCard extends Base<Data> {\n  templates: Templates = {};\n\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    const hidden = this.hiddenSelector;\n    const isCardInfoHidden = hidden.matches('card-info', true);\n    const isFraudRiskHidden = hidden.matches('fraud-risk', true);\n\n    return html`\n      <div\n        aria-busy=${!this.data && this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative text-body text-m font-lumo leading-m focus-outline-none\"\n      >\n        <div\n          class=${classMap({\n            'relative transition duration-250 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.data,\n          })}\n        >\n          ${hidden.matches('title', true) ? '' : this.__renderTitle()}\n          ${hidden.matches('subtitle', true) ? '' : this.__renderSubtitle()}\n          ${isCardInfoHidden && isFraudRiskHidden\n            ? ''\n            : html`\n                <div class=\"my-s flex space-x-s\">\n                  ${isCardInfoHidden ? '' : this.__renderCardInfo()}\n                  ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}\n                </div>\n              `}\n          ${hidden.matches('processor-response', true) ? '' : this.__renderProcessorResponse()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\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    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const payment = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(payment._links['fx:transaction'].href),\n      super._fetch<Store>(payment._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return payment;\n  }\n\n  private __renderTitle() {\n    const key = this.data ? `gateways.${this.data.gateway_type}` : '';\n    const ns = `${this.ns} gateways`;\n\n    return html`\n      <div class=\"text-m flex text-secondary\" data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n        <foxy-i18n lang=${this.lang} key=${key} ns=${ns}></foxy-i18n>&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  }\n\n  private __renderSubtitle() {\n    const amount = `${this.data?.amount ?? ''} ${this.__currency}`;\n    const amountOptions = JSON.stringify({ amount, currencyDisplay: this.__currencyDisplay });\n\n    const date = this.data?.date_created ?? '';\n    const dateOptions = JSON.stringify({ value: date });\n\n    const lang = this.lang;\n    const ns = this.ns;\n\n    return html`\n      <div class=\"flex font-semibold text-m\" data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <foxy-i18n options=${amountOptions} lang=${lang} key=\"price\" ns=${ns}></foxy-i18n>\n        <span>&nbsp;&bull;&nbsp;</span>\n        <foxy-i18n options=${dateOptions} lang=${lang} key=\"date\" ns=${ns}></foxy-i18n>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  }\n\n  private __renderCardInfo() {\n    const data = this.data;\n    const type = (data?.cc_type ?? 'unknown').toLowerCase() as keyof typeof logos;\n    const year = data?.cc_exp_year?.substring(2);\n    const month = data?.cc_exp_month;\n    const last4Digits = data?.cc_number_masked?.replace(/x/gi, '');\n\n    if (!month || !year || !last4Digits) return;\n\n    return html`\n      <div class=\"flex\" data-testid=\"card-info\">\n        ${this.renderTemplateOrSlot('card-info:before')}\n\n        <div class=\"truncate flex items-center h-s rounded overflow-hidden bg-contrast-5\">\n          <div class=\"h-s\">${logos[type] ?? logos.unknown}</div>\n          <div class=\"text-m font-semibold px-s\">•••• ${last4Digits} ${month}/${year}</div>\n        </div>\n\n        ${this.renderTemplateOrSlot('card-info:after')}\n      </div>\n    `;\n  }\n\n  private __renderFraudRisk() {\n    const score = this.data?.fraud_protection_score ?? 0;\n    const color = score > 0 ? 'text-error' : 'text-success';\n    const background = score > 0 ? 'bg-error-10' : 'bg-success-10';\n\n    return html`\n      <div class=\"flex\" data-testid=\"fraud-risk\">\n        ${this.renderTemplateOrSlot('fraud-risk:before')}\n\n        <foxy-i18n\n          options=${JSON.stringify({ score })}\n          class=\"truncate flex font-semibold h-s items-center px-s rounded text-m ${color} ${background}\"\n          lang=${this.lang}\n          key=\"fraud_risk\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('fraud-risk:after')}\n      </div>\n    `;\n  }\n\n  private __renderProcessorResponse() {\n    return html`\n      <div class=\"text-m text-tertiary\" data-testid=\"processor-response\">\n        ${this.renderTemplateOrSlot('processor-response:before')}\n        ${this.data?.processor_response}&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('processor-response:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"PaymentCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCard/PaymentCard.ts"],"names":[],"mappings":"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","sourcesContent":["import * as logos from '../PaymentMethodCard/logos';\n\nimport { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'payment-card')));\n\n/**\n * Basic card displaying a payment.\n *\n * Note: payment gateway names need to be loaded separately. You can obtain\n * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values\n * you need. Once you have the gateway names, call `I18n.setGateways(names)`.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @slot card-info:before\n * @slot card-info:after\n *\n * @slot fraud-risk:before\n * @slot fraud-risk:after\n *\n * @slot processor-response:before\n * @slot processor-response:after\n *\n * @element foxy-payment-card\n * @since 1.11.0\n */\nexport class PaymentCard extends Base<Data> {\n  templates: Templates = {};\n\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    const hidden = this.hiddenSelector;\n    const isCardInfoHidden = hidden.matches('card-info', true);\n    const isFraudRiskHidden = hidden.matches('fraud-risk', true);\n\n    return html`\n      <div\n        aria-busy=${!this.data && this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative text-body text-m font-lumo leading-m focus-outline-none\"\n      >\n        <div\n          class=${classMap({\n            'relative transition duration-250 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.data,\n          })}\n        >\n          ${hidden.matches('title', true) ? '' : this.__renderTitle()}\n          ${hidden.matches('subtitle', true) ? '' : this.__renderSubtitle()}\n          ${isCardInfoHidden && isFraudRiskHidden\n            ? ''\n            : html`\n                <div class=\"my-s flex space-x-s overflow-auto\">\n                  ${isCardInfoHidden ? '' : this.__renderCardInfo()}\n                  ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}\n                </div>\n              `}\n          ${hidden.matches('processor-response', true) ? '' : this.__renderProcessorResponse()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\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    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const payment = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(payment._links['fx:transaction'].href),\n      super._fetch<Store>(payment._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return payment;\n  }\n\n  private __renderTitle() {\n    const key = this.data ? `gateways.${this.data.gateway_type}` : '';\n    const ns = `${this.ns} gateways`;\n\n    return html`\n      <div class=\"text-m flex text-secondary\" data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n        <foxy-i18n lang=${this.lang} key=${key} ns=${ns}></foxy-i18n>&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  }\n\n  private __renderSubtitle() {\n    const amount = `${this.data?.amount ?? ''} ${this.__currency}`;\n    const amountOptions = JSON.stringify({ amount, currencyDisplay: this.__currencyDisplay });\n\n    const date = this.data?.date_created ?? '';\n    const dateOptions = JSON.stringify({ value: date });\n\n    const lang = this.lang;\n    const ns = this.ns;\n\n    return html`\n      <div class=\"flex font-semibold text-m\" data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n\n        <foxy-i18n options=${amountOptions} lang=${lang} key=\"price\" ns=${ns}></foxy-i18n>\n        <span>&nbsp;&bull;&nbsp;</span>\n        <foxy-i18n options=${dateOptions} lang=${lang} key=\"date\" ns=${ns}></foxy-i18n>\n\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  }\n\n  private __renderCardInfo() {\n    const data = this.data;\n    const type = (data?.cc_type ?? 'unknown').toLowerCase() as keyof typeof logos;\n    const year = data?.cc_exp_year?.substring(2);\n    const month = data?.cc_exp_month;\n    const last4Digits = data?.cc_number_masked?.replace(/x/gi, '');\n\n    if (!month || !year || !last4Digits) return;\n\n    return html`\n      <div class=\"flex\" data-testid=\"card-info\">\n        ${this.renderTemplateOrSlot('card-info:before')}\n\n        <div class=\"truncate flex items-center h-s rounded overflow-hidden bg-contrast-5\">\n          <div class=\"h-s\">${logos[type] ?? logos.unknown}</div>\n          <div class=\"text-m font-semibold px-s\">•••• ${last4Digits} ${month}/${year}</div>\n        </div>\n\n        ${this.renderTemplateOrSlot('card-info:after')}\n      </div>\n    `;\n  }\n\n  private __renderFraudRisk() {\n    const score = this.data?.fraud_protection_score ?? 0;\n    const color = score > 0 ? 'text-error' : 'text-success';\n    const background = score > 0 ? 'bg-error-10' : 'bg-success-10';\n\n    return html`\n      <div class=\"flex\" data-testid=\"fraud-risk\">\n        ${this.renderTemplateOrSlot('fraud-risk:before')}\n\n        <foxy-i18n\n          options=${JSON.stringify({ score })}\n          class=\"truncate flex font-semibold h-s items-center px-s rounded text-m ${color} ${background}\"\n          lang=${this.lang}\n          key=\"fraud_risk\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('fraud-risk:after')}\n      </div>\n    `;\n  }\n\n  private __renderProcessorResponse() {\n    return html`\n      <div class=\"text-m text-tertiary\" data-testid=\"processor-response\">\n        ${this.renderTemplateOrSlot('processor-response:before')}\n        ${this.data?.processor_response}&ZeroWidthSpace;\n        ${this.renderTemplateOrSlot('processor-response:after')}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/QueryBuilder/QueryBuilder.d.ts

@@ -1,6 +1,8 @@
 import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { Operator, Option, Type } from './types';
-declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
+    inferredProperties: string[];
+} & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 } & {
     styles: CSSResultArray;

package/dist/elements/public/QueryBuilder/QueryBuilder.js

@@ -7,8 +7,9 @@ import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { parse } from "./utils/parse.js";
 import { stringify } from "./utils/stringify.js";
 import { styles } from "./styles.js";
+import { InferrableMixin } from "../../../mixins/inferrable.js";
 const NS = 'query-builder';
-const Base = ResponsiveMixin(ThemeableMixin(TranslatableMixin(LitElement, NS)));
+const Base = ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));
 /**
  * UI component for creating Foxy hAPI filters visually. Compatible with
  * Backend API, Customer API or any other API using the same format as described

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

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAwC,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAU,IAAI,EAAE,mBAAgB;AAEjD,OAAO,EAAE,KAAK,EAAE,8BAA2B;AAC3C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,yBAAsB;AACtC,OAAO,EAAE,SAAS,EAAE,6BAA0B;AAC9C,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAElC,MAAM,EAAE,GAAG,eAAe,CAAC;AAC3B,MAAM,IAAI,GAAG,eAAe,CAAC,cAAc,CAAC,iBAAiB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEhF;;;;;;;GAOG;AACH,MAAM,YAAa,SAAQ,IAAI;IAA/B;;QAsBE,gCAAgC;QAChC,YAAO,GAAoB,IAAI,CAAC;QAEhC,2CAA2C;QAC3C,UAAK,GAAkB,IAAI,CAAC;IAa9B,CAAC;IA7BC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;IAQD,MAAM;;QACJ,OAAO,KAAK,CAAC;YACX,YAAY,EAAE,KAAK,OAAC,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;YACrC,OAAO,QAAE,IAAI,CAAC,OAAO,mCAAI,EAAE;YAC3B,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC7D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AArCD,uEAAuE;AACvD,wBAAW,GAAG,KAAM,SAAQ,WAAiB;CAAG,CAAC;AAEjE,2DAA2D;AAC3C,qBAAQ,GAAG,QAAQ,CAAC;AAEpC,6DAA6D;AAC7C,iBAAI,GAAG,IAAI,CAAC;AAiC9B,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Operator, Option, Type } from './types';\n\nimport { Group } from './components/Group';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parse } from './utils/parse';\nimport { stringify } from './utils/stringify';\nimport { styles } from './styles';\n\nconst NS = 'query-builder';\nconst Base = ResponsiveMixin(ThemeableMixin(TranslatableMixin(LitElement, NS)));\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nclass QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** Autocomplete suggestions. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  render(): TemplateResult {\n    return Group({\n      parsedValues: parse(this.value ?? ''),\n      options: this.options ?? [],\n      t: this.t.bind(this),\n      onChange: newValue => {\n        this.value = stringify(newValue);\n        this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n      },\n    });\n  }\n}\n\nexport { QueryBuilder };\n"]}
+{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/QueryBuilder/QueryBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,UAAU,EAAwC,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAU,IAAI,EAAE,mBAAgB;AAEjD,OAAO,EAAE,KAAK,EAAE,8BAA2B;AAC3C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,KAAK,EAAE,yBAAsB;AACtC,OAAO,EAAE,SAAS,EAAE,6BAA0B;AAC9C,OAAO,EAAE,MAAM,EAAE,oBAAiB;AAClC,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAE7D,MAAM,EAAE,GAAG,eAAe,CAAC;AAC3B,MAAM,IAAI,GAAG,eAAe,CAAC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjG;;;;;;;GAOG;AACH,MAAM,YAAa,SAAQ,IAAI;IAA/B;;QAsBE,gCAAgC;QAChC,YAAO,GAAoB,IAAI,CAAC;QAEhC,2CAA2C;QAC3C,UAAK,GAAkB,IAAI,CAAC;IAa9B,CAAC;IA7BC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,CAAC;IAQD,MAAM;;QACJ,OAAO,KAAK,CAAC;YACX,YAAY,EAAE,KAAK,OAAC,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;YACrC,OAAO,QAAE,IAAI,CAAC,OAAO,mCAAI,EAAE;YAC3B,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB,QAAQ,EAAE,QAAQ,CAAC,EAAE;gBACnB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;gBACjC,IAAI,CAAC,aAAa,CAAC,IAAI,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC7D,CAAC;SACF,CAAC,CAAC;IACL,CAAC;;AArCD,uEAAuE;AACvD,wBAAW,GAAG,KAAM,SAAQ,WAAiB;CAAG,CAAC;AAEjE,2DAA2D;AAC3C,qBAAQ,GAAG,QAAQ,CAAC;AAEpC,6DAA6D;AAC7C,iBAAI,GAAG,IAAI,CAAC;AAiC9B,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { Operator, Option, Type } from './types';\n\nimport { Group } from './components/Group';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { parse } from './utils/parse';\nimport { stringify } from './utils/stringify';\nimport { styles } from './styles';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst NS = 'query-builder';\nconst Base = ResponsiveMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));\n\n/**\n * UI component for creating Foxy hAPI filters visually. Compatible with\n * Backend API, Customer API or any other API using the same format as described\n * in our [docs](https://api.foxy.io/docs/cheat-sheet).\n *\n * @element foxy-query-builder\n * @since 1.12.0\n */\nclass QueryBuilder extends Base {\n  /** QueryBuilder dispatches this event on itself when value changes. */\n  static readonly ChangeEvent = class extends CustomEvent<void> {};\n\n  /** Operator dictionary for use in autocomplete options. */\n  static readonly Operator = Operator;\n\n  /** Field type dictionary for use in autocomplete options. */\n  static readonly Type = Type;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      value: { type: String },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [super.styles, styles];\n  }\n\n  /** Autocomplete suggestions. */\n  options: Option[] | null = null;\n\n  /** Current value as hAPI filter string. */\n  value: string | null = null;\n\n  render(): TemplateResult {\n    return Group({\n      parsedValues: parse(this.value ?? ''),\n      options: this.options ?? [],\n      t: this.t.bind(this),\n      onChange: newValue => {\n        this.value = stringify(newValue);\n        this.dispatchEvent(new QueryBuilder.ChangeEvent('change'));\n      },\n    });\n  }\n}\n\nexport { QueryBuilder };\n"]}

package/dist/elements/public/ReportForm/ReportForm.d.ts

@@ -1,6 +1,6 @@
 import { Data, Templates } from './types';
+import { PropertyDeclarations, TemplateResult } from 'lit-element';
 import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { TemplateResult } from 'lit-element';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { NucleonV8N } from '../NucleonElement/types';
 declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
@@ -14,11 +14,8 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @slot name:before
  * @slot name:after
  *
- * @slot start:before
- * @slot start:after
- *
- * @slot end:before
- * @slot end:after
+ * @slot range:before
+ * @slot range:after
  *
  * @slot timestamps:before
  * @slot timestamps:after
@@ -34,15 +31,18 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  */
 export declare class ReportForm extends Base<Data> {
     static get scopedElements(): ScopedElementsMap;
+    static get properties(): PropertyDeclarations;
     static get v8n(): NucleonV8N<Data>;
     templates: Templates;
+    private __showRangeTime;
     render(): TemplateResult;
     private __renderName;
-    private __renderStart;
-    private __renderEnd;
+    private __renderRangePreset;
+    private __renderRangeDateTimePicker;
+    private __renderRangeDatePicker;
+    private __renderRange;
     private __renderTimestamps;
     private __renderCreate;
     private __renderDelete;
-    private __convertFormValueToPickerValue;
 }
 export {};

package/dist/elements/public/ReportForm/ReportForm.js

@@ -1,26 +1,26 @@
 import { Choice, Group, PropertyTable } from "../../private/index.js";
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html } from 'lit-element';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { getCurrentMonth, getCurrentQuarter, getCurrentYear, getLast30Days, getLast365Days, getPreviousMonth, getPreviousQuarter, getPreviousYear, toAPIDateTime, toDatePickerValue, toDateTimePickerValue, } from "./utils.js";
 import { ChoiceChangeEvent } from "../../private/Choice/ChoiceChangeEvent.js";
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { DateTimePicker } from '@vaadin/vaadin-date-time-picker';
 import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'report-form'))));
+import { live } from 'lit-html/directives/live';
+import { render } from 'lit-html';
+const Base = ScopedElementsMixin(ResponsiveMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'report-form')))));
 /**
  * Form element for creating or editing reports (`fx:report`).
  *
  * @slot name:before
  * @slot name:after
  *
- * @slot start:before
- * @slot start:after
- *
- * @slot end:before
- * @slot end:after
+ * @slot range:before
+ * @slot range:after
  *
  * @slot timestamps:before
  * @slot timestamps:after
@@ -38,12 +38,17 @@ export class ReportForm extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
+        this.__showRangeTime = false;
     }
     static get scopedElements() {
         return {
-            'vaadin-date-time-picker': DateTimePicker,
+            'vaadin-date-time-picker': customElements.get('vaadin-date-time-picker'),
+            'vaadin-date-picker': customElements.get('vaadin-date-picker'),
+            'vaadin-checkbox': customElements.get('vaadin-checkbox'),
+            'vaadin-select': customElements.get('vaadin-select'),
             'vaadin-button': customElements.get('vaadin-button'),
             'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
             'foxy-spinner': customElements.get('foxy-spinner'),
             'foxy-i18n': customElements.get('foxy-i18n'),
             'x-property-table': PropertyTable,
@@ -51,11 +56,17 @@ export class ReportForm extends Base {
             'x-group': Group,
         };
     }
+    static get properties() {
+        return {
+            ...super.properties,
+            __showRangeTime: { attribute: false },
+        };
+    }
     static get v8n() {
         return [
             ({ name: v }) => !!v || 'name_required',
-            ({ datetime_start: v }) => !!v || 'start_required',
-            ({ datetime_end: v }) => !!v || 'end_required',
+            ({ datetime_start: v }) => !!v || 'datetime_start_required',
+            ({ datetime_end: v }) => !!v || 'datetime_end_required',
         ];
     }
     render() {
@@ -70,8 +81,7 @@ export class ReportForm extends Base {
       >
         <div class="space-y-m">
           ${hidden.matches('name', true) ? '' : this.__renderName()}
-          ${hidden.matches('start', true) ? '' : this.__renderStart()}
-          ${hidden.matches('end', true) ? '' : this.__renderEnd()}
+          ${hidden.matches('range', true) ? '' : this.__renderRange()}
           ${hidden.matches('timestamps', true) || !this.data ? '' : this.__renderTimestamps()}
           ${hidden.matches('create', true) || this.data ? '' : this.__renderCreate()}
           ${hidden.matches('delete', true) || !this.data ? '' : this.__renderDelete()}
@@ -106,17 +116,10 @@ export class ReportForm extends Base {
         ${this.renderTemplateOrSlot(`${scope}:before`)}
 
         <x-group frame>
-          <foxy-i18n
-            class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}
-            lang=${this.lang}
-            slot="header"
-            key="name"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
+          <foxy-i18n lang=${this.lang} slot="header" key="name" ns=${this.ns}></foxy-i18n>
 
           <x-choice
-            data-testid="content-type"
+            data-testid="name-choice"
             .value=${this.form.name}
             .items=${items}
             ?readonly=${isReadonly}
@@ -150,65 +153,152 @@ export class ReportForm extends Base {
       </div>
     `;
     }
-    __renderStart() {
-        const error = this.errors.find(error => error.startsWith('start_'));
-        const value = this.form.datetime_start;
+    __renderRangePreset() {
+        var _a;
+        const options = [
+            [
+                { value: '0', label: 'preset_previous_quarter', ...getPreviousQuarter() },
+                { value: '1', label: 'preset_previous_month', ...getPreviousMonth() },
+                { value: '2', label: 'preset_previous_year', ...getPreviousYear() },
+            ],
+            [
+                { value: '3', label: 'preset_this_quarter', ...getCurrentQuarter() },
+                { value: '4', label: 'preset_this_month', ...getCurrentMonth() },
+                { value: '5', label: 'preset_this_year', ...getCurrentYear() },
+            ],
+            [
+                { value: '6', label: 'preset_last_365_days', ...getLast365Days() },
+                { value: '7', label: 'preset_last_30_days', ...getLast30Days() },
+            ],
+        ];
+        const currentOption = options.flat(1).find(option => {
+            const { datetime_end: end, datetime_start: start } = this.form;
+            return (start && end && toAPIDateTime(option.start) === start && toAPIDateTime(option.end) === end);
+        });
+        const renderer = (root) => {
+            const custom = html `<vaadin-item value="custom">${this.t('preset_custom')}</vaadin-item>`;
+            const separator = html `<hr />`;
+            const predefined = options.map(group => {
+                const items = group.map(({ value, label }) => {
+                    return html `<vaadin-item value=${value}>${this.t(label)}</vaadin-item>`;
+                });
+                return html `${items}${separator}`;
+            });
+            if (!root.firstElementChild)
+                root.appendChild(document.createElement('vaadin-list-box'));
+            render(html `${predefined}${custom}`, root.firstElementChild);
+        };
         return html `
       <div>
-        ${this.renderTemplateOrSlot('start:before')}
-
-        <vaadin-date-time-picker
-          date-placeholder=${this.t('select_date')}
-          time-placeholder=${this.t('select_time')}
-          error-message=${ifDefined(error ? this.t(error) : undefined)}
-          data-testid="start"
-          class="-mt-m"
-          label=${this.t('start')}
-          step="1"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('start', true)}
-          ?readonly=${this.readonlySelector.matches('start', true)}
-          .checkValidity=${() => !error}
-          .value=${value ? this.__convertFormValueToPickerValue(value) : ''}
-          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+        <vaadin-select
+          data-testid="range:preset"
+          label=${this.t('preset')}
+          class="w-full -mt-m -mb-xs"
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('range', true)}
+          ?readonly=${this.readonlySelector.matches('range', true)}
+          .value=${live((_a = currentOption === null || currentOption === void 0 ? void 0 : currentOption.value) !== null && _a !== void 0 ? _a : 'custom')}
+          .renderer=${renderer}
           @change=${(evt) => {
-            const picker = evt.currentTarget;
-            this.edit({ datetime_start: picker.value });
+            const select = evt.currentTarget;
+            const option = options.flat(1).find(option => option.value === select.value);
+            if (option) {
+                this.edit({
+                    datetime_start: toAPIDateTime(option.start),
+                    datetime_end: toAPIDateTime(option.end),
+                });
+            }
         }}
         >
-        </vaadin-date-time-picker>
-
-        ${this.renderTemplateOrSlot('start:after')}
+        </vaadin-select>
       </div>
     `;
     }
-    __renderEnd() {
-        const error = this.errors.find(error => error.startsWith('end_'));
-        const value = this.form.datetime_end;
+    __renderRangeDateTimePicker(type) {
+        const field = type === 'end' ? 'datetime_end' : 'datetime_start';
+        const error = this.errors.find(error => error.startsWith(`${field}_`));
+        const value = this.form[field];
         return html `
-      <div>
-        ${this.renderTemplateOrSlot('end:before')}
-
-        <vaadin-date-time-picker
-          date-placeholder=${this.t('select_date')}
-          time-placeholder=${this.t('select_time')}
-          error-message=${ifDefined(error ? this.t(error) : undefined)}
-          data-testid="end"
-          label=${this.t('end')}
-          class="-mt-m"
-          step="1"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('end', true)}
-          ?readonly=${this.readonlySelector.matches('end', true)}
-          .checkValidity=${() => !error}
-          .value=${value ? this.__convertFormValueToPickerValue(value) : ''}
-          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
-          @change=${(evt) => {
+      <vaadin-date-time-picker
+        date-placeholder=${this.t('select_date')}
+        time-placeholder=${this.t('select_time')}
+        error-message=${ifDefined(error ? this.t(error) : undefined)}
+        data-testid="range:${type}"
+        class="w-full"
+        label=${this.t(type)}
+        step="1"
+        ?disabled=${!this.in('idle') || this.disabledSelector.matches('range', true)}
+        ?readonly=${this.readonlySelector.matches('range', true)}
+        .checkValidity=${() => !error}
+        .value=${value ? toDateTimePickerValue(value) : ''}
+        @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+        @change=${(evt) => {
             const picker = evt.currentTarget;
-            this.edit({ datetime_end: picker.value });
+            this.edit({ [field]: picker.value });
         }}
-        >
-        </vaadin-date-time-picker>
+      >
+      </vaadin-date-time-picker>
+    `;
+    }
+    __renderRangeDatePicker(type) {
+        const field = type === 'end' ? 'datetime_end' : 'datetime_start';
+        const error = this.errors.find(error => error.startsWith(`${field}_`));
+        const value = this.form[field];
+        return html `
+      <vaadin-date-picker
+        error-message=${ifDefined(error ? this.t(error) : undefined)}
+        placeholder=${this.t('select_date')}
+        data-testid="range:${type}"
+        class="w-full"
+        label=${this.t(type)}
+        step="1"
+        ?disabled=${!this.in('idle') || this.disabledSelector.matches('range', true)}
+        ?readonly=${this.readonlySelector.matches('range', true)}
+        .checkValidity=${() => !error}
+        .value=${value ? toDatePickerValue(value) : ''}
+        @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+        @change=${(evt) => {
+            const picker = evt.currentTarget;
+            const time = type === 'end' ? '23:59:59' : '00:00:00';
+            this.edit({ [field]: `${picker.value}T${time}` });
+        }}
+      >
+      </vaadin-date-picker>
+    `;
+    }
+    __renderRange() {
+        const renderer = this.__showRangeTime
+            ? this.__renderRangeDateTimePicker
+            : this.__renderRangeDatePicker;
+        return html `
+      <div data-testid="range">
+        ${this.renderTemplateOrSlot('range:before')}
 
-        ${this.renderTemplateOrSlot('end:after')}
+        <x-group frame>
+          <foxy-i18n slot="header" lang=${this.lang} key="range" ns=${this.ns}></foxy-i18n>
+
+          <div class="p-m grid gap-m ${this.__showRangeTime ? 'grid-cols-1' : 'sm-grid-cols-2'}">
+            <div class=${this.__showRangeTime ? 'col-span-1' : 'sm-col-span-2'}>
+              ${this.__renderRangePreset()}
+            </div>
+
+            ${renderer.call(this, 'start')} ${renderer.call(this, 'end')}
+
+            <vaadin-checkbox
+              data-testid="range:toggle"
+              class="-my-xs w-full ${this.__showRangeTime ? 'col-span-1' : 'sm-col-span-2'}"
+              ?disabled=${!this.in('idle') || this.disabledSelector.matches('range', true)}
+              ?checked=${this.__showRangeTime}
+              @change=${(evt) => {
+            const checkbox = evt.currentTarget;
+            this.__showRangeTime = checkbox.checked;
+        }}
+            >
+              <foxy-i18n lang=${this.lang} key="use_precise_time" ns=${this.ns}></foxy-i18n>
+            </vaadin-checkbox>
+          </div>
+        </x-group>
+
+        ${this.renderTemplateOrSlot('range:after')}
       </div>
     `;
     }
@@ -297,9 +387,5 @@ export class ReportForm extends Base {
       </div>
     `;
     }
-    __convertFormValueToPickerValue(formValue) {
-        var _a, _b;
-        return (_b = (_a = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.exec(formValue)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : '';
-    }
 }
 //# sourceMappingURL=ReportForm.js.map