JezK

Edit File: sc-product-pills-variant-option.cjs.entry.js.map

{"file":"sc-product-pills-variant-option.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,8BAA8B,GAAG,sGAAsG,CAAC;AAC9I,0CAAe,8BAA8B;;;;;;;;;;;;;;;;;6GC0C1B,eAAO,CAAC,UAAE,wGACmB,UAAE,mKAC6D,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/product/sc-product-pills-variant-option/sc-product-pills-variant-option.scss?tag=sc-product-pills-variant-option","src/components/controllers/product/sc-product-pills-variant-option/sc-product-pills-variant-option.tsx"],"sourcesContent":[".sc-product-pills-variant-option {\n &__wrapper {\n display: flex;\n flex-wrap: wrap;\n gap: var(--sc-spacing-x-small);\n }\n}\n","import { Component, Fragment, h, Prop } from '@stencil/core';\nimport { state } from '@store/product';\nimport { isOptionMissing, isOptionSoldOut } from '@store/product/getters';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { setProduct } from '@store/product/setters';\n\n@Component({\n tag: 'sc-product-pills-variant-option',\n styleUrl: 'sc-product-pills-variant-option.scss',\n shadow: false,\n})\nexport class ScProductPillsVariantOption {\n /** Label */\n @Prop() label: string;\n\n /** Which option number? */\n @Prop() optionNumber: 1 | 2 | 3 = 1;\n\n /** The product id */\n @Prop() productId: string;\n\n render() {\n return (\n <sc-form-control label={this.label}>\n <span slot=\"label\">{this.label}</span>\n <div class=\"sc-product-pills-variant-option__wrapper\">\n {(state[this.productId].variant_options[this.optionNumber - 1].values || []).map(value => {\n const isUnavailable = isOptionSoldOut(this.productId, this.optionNumber, value) || isOptionMissing(this.productId, this.optionNumber, value);\n return (\n <sc-pill-option\n isUnavailable={isUnavailable}\n isSelected={state[this.productId].variantValues[`option_${this.optionNumber}`] === value}\n onClick={() =>\n setProduct(this.productId, {\n variantValues: {\n ...state[this.productId].variantValues,\n [`option_${this.optionNumber}`]: value,\n },\n })\n }\n >\n <span aria-hidden=\"true\">{value}</span>\n <sc-visually-hidden>\n {sprintf(__('Select %s: %s.', 'surecart'), this.label, value)}\n {isUnavailable && <Fragment> {__('(option unavailable)', 'surecart')}</Fragment>}\n {state[this.productId].variantValues[`option_${this.optionNumber}`] === value && <Fragment> {__('This option is currently selected.', 'surecart')}</Fragment>}\n </sc-visually-hidden>\n </sc-pill-option>\n );\n })}\n </div>\n </sc-form-control>\n );\n }\n}\n"],"version":3}