JezK

Edit File: sc-compact-address2.js.map

{"file":"sc-compact-address2.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,sfAAsf,CAAC;AACnhB,+BAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBC6DR,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sKAiH2B,UAAE,wuCA4BM,UAAE,2lBAUV,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ui/sc-compact-address/sc-compact-address.scss?tag=sc-compact-address&encapsulation=shadow","src/components/ui/sc-compact-address/sc-compact-address.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sc-address {\n display: block;\n position: relative;\n\n [hidden] {\n display: none;\n }\n\n &--loading {\n min-height: 70px;\n\n sc-skeleton {\n display: block;\n margin-bottom: 1em;\n }\n }\n\n\n &__control {\n display: block;\n\n > * {\n margin-bottom: -1px;\n }\n }\n\n &__columns {\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n justify-content: space-between;\n\n > * {\n flex: 1;\n width: 50%;\n margin-left: -1px;\n\n &:first-child {\n margin-left: 0;\n }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { Address } from '../../../types';\nimport { countryChoices, getCountryDetails } from '../../../functions/address';\nimport { __ } from '@wordpress/i18n';\nimport { reportChildrenValidity } from '../../../functions/form-data';\nimport { getCurrentUserCountryCode } from '../../../functions/google-maps';\n\n/**\n * @part base - The elements base wrapper.\n * @part input__base - The inputs base element.\n * @part select__base - The select boxes base element.\n * @part input - The html input element.\n * @part form-control - The form control wrapper.\n * @part label - The input label.\n * @part help-text - Help text that describes how to use the input.\n * @part trigger - The select box trigger.\n * @part panel - The select box panel.\n * @part caret - The select box caret.\n * @part search__base - The select search base.\n * @part search__input - The select search input.\n * @part search__form-control - The select search form control.\n * @part menu__base - The select menu base.\n * @part spinner__base - The select spinner base.\n * @part empty - The select empty message.\n * @part block-ui - The block ui base component.\n * @part block-ui__content - The block ui content (spinner).\n */\n@Component({\n tag: 'sc-compact-address',\n styleUrl: 'sc-compact-address.scss',\n shadow: true,\n})\nexport class ScCompactAddress {\n @Element() el: HTMLScCompactAddressElement;\n\n /** The address. */\n @Prop({ mutable: true }) address: Partial<Address> = {\n country: null,\n city: null,\n line_1: null,\n line_2: null,\n postal_code: null,\n state: null,\n };\n\n @Prop() names: Partial<Address> = {\n country: 'shipping_country',\n city: 'shipping_city',\n line_1: 'shipping_line_1',\n line_2: 'shipping_line_2',\n postal_code: 'shipping_postal_code',\n state: 'shipping_state',\n };\n\n /**Placeholders */\n @Prop() placeholders: Partial<Address> = {\n country: '',\n postal_code: '',\n state: '',\n };\n\n /** Label for the address */\n @Prop() label: string = __('Country or region', 'surecart');\n\n /** Is this required? */\n @Prop() required: boolean;\n\n /** Is this loading */\n @Prop() loading: boolean;\n\n /** Address change event. */\n @Event() scChangeAddress: EventEmitter<Partial<Address>>;\n\n /** Address input event. */\n @Event() scInputAddress: EventEmitter<Partial<Address>>;\n\n /** Holds our country choices. */\n @State() countryChoices: Array<{ value: string; label: string }>;\n\n /** Holds the regions for a given country. */\n @State() regions: Array<{ value: string; label: string }>;\n\n @State() showState: boolean;\n @State() showPostal: boolean;\n\n /** Postal code regex pattern for validation. */\n @State() postalCodeRegex: string;\n\n /** When the state changes, we want to update city and postal fields. */\n @Watch('address')\n handleAddressChange() {\n if (!this.address?.country) return;\n this.setRegions();\n this.showState = ['US', 'CA'].includes(this.address.country);\n this.showPostal = ['US'].includes(this.address.country);\n this.scChangeAddress.emit(this.address);\n this.scInputAddress.emit(this.address);\n }\n\n updateAddress(address: Partial<Address>) {\n this.address = { ...this.address, ...address };\n }\n\n handleAddressInput(address: Partial<Address>) {\n this.scInputAddress.emit({ ...this.address, ...address });\n }\n\n clearAddress() {\n this.address = {\n name: this.address?.name,\n country: null,\n line_1: null,\n line_2: null,\n city: null,\n postal_code: null,\n state: null,\n };\n }\n\n /** Set the regions based on the country. */\n async setRegions() {\n const countryDetails = await getCountryDetails(this.address?.country);\n this.regions =\n countryDetails?.states?.map(state => ({\n value: state?.code,\n label: state?.name,\n })) || [];\n\n this.placeholders = countryDetails?.address_labels;\n this.postalCodeRegex = countryDetails?.postal_code_regex || undefined;\n }\n\n componentWillLoad() {\n this.initCountryChoices();\n this.handleAddressChange();\n const country = this.countryChoices?.find(country => country.value === this.address.country)?.value;\n if (country) {\n this.updateAddress({ country });\n }\n this.fetchUserCountry();\n }\n\n async fetchUserCountry() {\n if (this.address?.country) {\n return;\n }\n\n const countryCode = await getCurrentUserCountryCode();\n if (countryCode) {\n this.updateAddress({ country: countryCode });\n }\n }\n\n async initCountryChoices() {\n this.countryChoices = await countryChoices();\n }\n\n @Method()\n async reportValidity() {\n return reportChildrenValidity(this.el);\n }\n\n render() {\n return (\n <div class=\"sc-address\" part=\"base\">\n <sc-form-control exportparts=\"label, help-text, form-control\" label={this.label} class=\"sc-address__control\" part=\"control\" required={this.required}>\n <sc-select\n exportparts=\"base:select__base, input, form-control, label, help-text, trigger, panel, caret, search__base, search__input, search__form-control, menu__base, spinner__base, empty\"\n value={this.address?.country}\n onScChange={(e: any) => {\n this.clearAddress();\n this.updateAddress({ country: e.target.value || null });\n }}\n choices={this.countryChoices}\n autocomplete={'country-name'}\n placeholder={this.placeholders?.country || __('Select Your Country', 'surecart')}\n name={this.names.country}\n search\n unselect={false}\n squared-bottom={this.showState || this.showPostal}\n required={this.required}\n />\n\n <div class=\"sc-address__columns\">\n {this.showState && (\n <sc-select\n exportparts=\"base:select__base, input, form-control, label, help-text, trigger, panel, caret, search__base, search__input, search__form-control, menu__base, spinner__base, empty\"\n placeholder={this.placeholders?.state}\n name={this.names.state}\n autocomplete={'address-level1'}\n value={this?.address?.state}\n onScChange={(e: any) => this.updateAddress({ state: e.target.value || null })}\n choices={this.regions}\n required={this.required}\n search\n squared-top\n unselect={false}\n squared-right={this.showPostal}\n />\n )}\n {this.showPostal && (\n <sc-input\n exportparts=\"base:input__base, input, form-control, label, help-text\"\n placeholder={this.placeholders?.postal_code || __('Postal Code/Zip', 'surecart')}\n name={this.names.postal_code}\n onScChange={(e: any) => this.updateAddress({ postal_code: e.target.value || null })}\n onScInput={(e: any) => this.handleAddressInput({ postal_code: e.target.value || null })}\n autocomplete={'postal-code'}\n required={this.required}\n value={this?.address?.postal_code}\n squared-top\n maxlength={this.address?.country === 'US' ? 5 : undefined}\n pattern={this.postalCodeRegex}\n customValidity={this.postalCodeRegex ? __('Please enter a valid postal code', 'surecart') : undefined}\n squared-left={this.showState}\n />\n )}\n </div>\n </sc-form-control>\n {this.loading && <sc-block-ui exportparts=\"base:block-ui, content:block-ui__content\"></sc-block-ui>}\n </div>\n );\n }\n}\n"],"version":3}