Guanti nitrile black m/l 100pz resistente spontex

if (!customElements.get('country-province-selector')) { class CountryProvinceSelector extends HTMLElement { constructor() { super(); this.countryEl = this.querySelector('.js-country-select'); this.provinceEl = this.querySelector('.js-province-select'); this.provinceInputEl = this.querySelector('.js-province-input'); this.provinceDatalistEl = this.querySelector('.js-province-datalist'); this.provinceContainer = this.querySelector('.js-province-container'); this.init(); } init() { if (!this.countryEl || !this.provinceEl || !this.provinceContainer) return; CountryProvinceSelector.setSelectedOption(this.countryEl, this.countryEl.dataset.default); this.handleCountryChange(this.provinceEl.dataset.default); this.countryEl.addEventListener('change', () => this.handleCountryChange()); this.provinceEl.addEventListener('change', this.syncProvinceInputFromSelect.bind(this)); if (this.provinceInputEl) { this.provinceInputEl.addEventListener('input', this.syncProvinceSelectFromInput.bind(this)); this.provinceInputEl.addEventListener('change', this.syncProvinceSelectFromInput.bind(this)); this.provinceInputEl.addEventListener('blur', this.syncProvinceSelectFromInput.bind(this)); } } /** * Handles 'change' events on the country selector. * @param {string} defaultProvince - Province value selected by default. */ handleCountryChange(defaultProvince = '') { const selectedOption = this.countryEl.options[this.countryEl.selectedIndex]; const provinces = selectedOption && selectedOption.dataset.provinces ? JSON.parse(selectedOption.dataset.provinces) : []; // Remove current options. Array.from(this.provinceEl.options).forEach((option) => option.remove()); if (this.provinceDatalistEl) { this.provinceDatalistEl.innerHTML = ''; } if (provinces && provinces.length === 0) { this.provinceContainer.hidden = true; this.provinceEl.value = ''; if (this.provinceInputEl) this.provinceInputEl.value = ''; } else { provinces.forEach((province) => { const option = document.createElement('option'); [option.value, option.innerHTML] = province; this.provinceEl.appendChild(option); if (this.provinceDatalistEl) { const datalistOption = document.createElement('option'); datalistOption.value = province[1] || province[0]; datalistOption.dataset.provinceValue = province[0] || province[1]; this.provinceDatalistEl.appendChild(datalistOption); } }); if (defaultProvince) { CountryProvinceSelector.setSelectedOption(this.provinceEl, defaultProvince); } else { this.provinceEl.selectedIndex = -1; } this.syncProvinceInputFromSelect(); this.provinceContainer.hidden = false; } } /** * Synchronizes the visible province autocomplete field from the hidden province value. */ syncProvinceInputFromSelect() { if (!this.provinceInputEl) return; const selectedOption = this.provinceEl.options[this.provinceEl.selectedIndex]; this.provinceInputEl.value = selectedOption ? selectedOption.textContent : ''; } /** * Synchronizes the hidden province value from the visible autocomplete field. */ syncProvinceSelectFromInput() { if (!this.provinceInputEl) return; const value = this.provinceInputEl.value.trim(); const matchedOption = CountryProvinceSelector.findProvinceOption(this.provinceEl, value); if (matchedOption) { this.provinceEl.value = matchedOption.value; return; } const freeTextOption = CountryProvinceSelector.getOrCreateFreeTextOption(this.provinceEl); freeTextOption.value = value; freeTextOption.textContent = value; this.provinceEl.value = value; } /** * Sets the selected option of a element. * @param {Element} selector - Country or province element. * @param {string} value - Value of the option to select. */ static setSelectedOption(selector, value) { if (!selector || !value) return; Array.from(selector.options).forEach((option, index) => { if (option.value === value || option.innerHTML === value) { selector.selectedIndex = index; } }); } /** * Finds a province option by code or label. * @param {Element} selector - Province element. * @param {string} value - Province code or label. * @returns {Element|null} */ static findProvinceOption(selector, value) { if (!selector || !value) return null; const normalisedValue = value.toLowerCase(); return Array.from(selector.options).find((option) => { if (option.dataset.freeText === 'true') return false; return option.value.toLowerCase() === normalisedValue || option.textContent.toLowerCase() === normalisedValue; }) || null; } /** * Creates or returns the free text option used when no province suggestion matches. * @param {Element} selector - Province element. * @returns {Element} */ static getOrCreateFreeTextOption(selector) { let option = selector.querySelector('option[data-free-text="true"]'); if (!option) { option = document.createElement('option'); option.dataset.freeText = 'true'; selector.appendChild(option); } return option; } } customElements.define('country-province-selector', CountryProvinceSelector); }