JezK

Edit File: sc-product-donation-custom-amount.cjs.entry.js.map

{"file":"sc-product-donation-custom-amount.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,gCAAgC,GAAG,oWAAoW,CAAC;AAC9Y,4CAAe,gCAAgC;;;;;;;;;;;;;;;;;;;;;;oHCyChB,UAAE;;;;;;;;;;;","names":[],"sources":["src/components/controllers/checkout-form/product-donation-custom-amount/sc-product-donation-custom-amount.scss?tag=sc-product-donation-custom-amount","src/components/controllers/checkout-form/product-donation-custom-amount/sc-product-donation-custom-amount.tsx"],"sourcesContent":["sc-product-donation-custom-amount sc-price-input sc-button {\n margin-right: -10px !important;\n}\n\n.sc-product-donation-custom-amount {\n sc-button {\n opacity: 0;\n visibility: hidden;\n transition: opacity var(--sc-transition-fast) ease-in-out, visibility var(--sc-transition-fast) ease-in-out;\n }\n\n &--has-value {\n sc-button {\n opacity: 1;\n visibility: visible;\n }\n }\n}\n","import { Component, h, Prop, Element, Host } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { state as donationState } from '@store/product-donation';\n@Component({\n tag: 'sc-product-donation-custom-amount',\n styleUrl: 'sc-product-donation-custom-amount.scss',\n})\nexport class ScProductDonationCustomAmount {\n @Element() el: HTMLScProductDonationCustomAmountElement;\n priceInput: HTMLScPriceInputElement;\n\n /** Selected Product Id for the donation. */\n @Prop() productId: string;\n\n /** Custom Amount of the donation. */\n @Prop() value: number;\n\n state() {\n return donationState[this.productId];\n }\n\n updateState(data) {\n donationState[this.productId] = {\n ...donationState[this.productId],\n ...data,\n };\n }\n\n render() {\n const checked = !!this.state()?.custom_amount;\n return (\n <Host class={{ 'sc-product-donation-custom-amount': true, 'sc-product-donation-custom-amount--has-value': !!this.value }}>\n <sc-choice-container\n value={`${this.state()?.custom_amount}`}\n show-control=\"false\"\n checked={checked}\n onClick={() => this.priceInput.triggerFocus()}\n onKeyDown={() => {\n this.priceInput.triggerFocus();\n }}\n role=\"button\"\n >\n <sc-visually-hidden>{__('Enter a custom amount.', 'surecart')}</sc-visually-hidden>\n <sc-price-input\n ref={el => (this.priceInput = el)}\n currencyCode={this.state()?.selectedPrice?.currency || window?.scData?.currency || 'usd'}\n showCode={false}\n showLabel={false}\n value={`${this.state()?.custom_amount || ''}`}\n onScChange={e =>\n this.updateState({\n ad_hoc_amount: null,\n custom_amount: e.target.value,\n })\n }\n min={this.state()?.selectedPrice?.ad_hoc_min_amount}\n max={this.state()?.selectedPrice?.ad_hoc_max_amount}\n style={{ '--sc-input-border-color-focus': 'var(--sc-input-border-color-hover)', '--sc-focus-ring-color-primary': 'transparent' }}\n />\n </sc-choice-container>\n </Host>\n );\n }\n}\n"],"version":3}