npm - @roadtrip/components - Versions diffs - 3.12.0 → 3.12.1 - Mend

@roadtrip/components 3.12.0 → 3.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (94) hide show

package/dist/collection/components/phone-number-input/phone-number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport {\n PhoneNumberFormat,\n PhoneNumberType,\n PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n tag: 'road-phone-number-input',\n styleUrl: 'phone-number-input.css',\n scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n /** Computed phone data /\n @Event() roadPhoneNumberInput!: EventEmitter<{\n isError: boolean;\n phone: {\n numberType: string;\n countryCode: string;\n nationalNumber: string;\n code: string;\n internationalNumber: string;\n };\n }>;\n\n @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n /* Disable both fields /\n @Prop() disabled: boolean = false;\n\n /* List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) /\n @Prop() countryData: CountryType[] = [];\n\n /* Used to display countries with the right language /\n @Prop() language: string = 'fr';\n\n /* Country selection placeHolder /\n @Prop() codeLabel: string = '';\n\n /* Phone input placeHolder /\n @Prop() phoneLabel: string = '';\n\n /* Value displayed in the phone input /\n @Prop() phoneValue?: string;\n\n /* Selected country code /\n @Prop() countryCode?: string;\n\n /* Error message (displayed only if ther is a message) /\n @Prop() errorMessage: string = '';\n\n /* Add a star in the phone input */\n @Prop() required = false;\n\n @State() selectedCountry: string = this.countryData[0].countryCode;\n @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n @State() phoneNumber: string = '';\n @State() countryOptions: CountryOption[] = [];\n @State() returnObject: ReturnObject = {\n isError: false,\n phone: this.resetPhoneUtilData(),\n };\n\n @Watch('errorMessage')\n updateMessagePosition() {\n this.placeErrorMessage();\n }\n\n // On component load\n componentWillLoad() {\n this.placeErrorMessage();\n let fromSelect = false;\n\n if (this.phoneValue) {\n this.phoneNumber = this.phoneValue;\n }\n\n if (this.countryCode) {\n this.selectedCountry = this.countryCode;\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode) ?? '');\n fromSelect = true;\n }\n\n this.updateCountryOptions();\n this.createAndDispatchPhoneData(fromSelect);\n }\n\n // On user input\n handleInput(event: RoadInputCustomEvent<{\n value: string \| null \| undefined;\n }>) {\n this.phoneNumber = event.detail.value!;\n this.createAndDispatchPhoneData();\n }\n\n // On user select\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.updateSelectedCountry(select.value);\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n }\n this.createAndDispatchPhoneData(true);\n this.updateCountryOptions();\n }\n\n createAndDispatchPhoneData(fromSelect?: boolean) {\n // Init phone util\n const phoneUtil = PhoneNumberUtil.getInstance();\n const PNF = PhoneNumberFormat;\n\n // Reset the return object data\n this.returnObject.phone = this.resetPhoneUtilData();\n\n const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n try {\n const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n // Set the country code values depending on the event origin\n if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n if (fromSelect) {\n this.returnObject.isError = !(\n phoneUtil.isValidNumber(parsedPhoneNumber) &&\n phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n !this.isEmptyPhoneNumber()\n );\n } else {\n this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n this.returnObject.phone.countryCode = this.selectedCountry;\n this.returnObject.phone.code = this.selectedCountryCode;\n }\n this.updateCountryOptions();\n }\n\n const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n this.returnObject.phone.numberType = phoneType[0];\n } catch {} finally {\n this.roadPhoneNumberInput.emit(this.returnObject);\n }\n }\n\n // utils\n\n updateSelectedCountryCode(countryCode: string) {\n this.selectedCountryCode = countryCode;\n }\n\n updateSelectedCountry(value: string) {\n this.selectedCountry = value;\n }\n\n resetPhoneUtilData(): PhoneReturnType {\n return {\n numberType: 'UNKNOWN',\n countryCode: this.selectedCountry,\n code: this.selectedCountryCode,\n nationalNumber: this.phoneNumber,\n internationalNumber: this.phoneNumber,\n };\n }\n\n isEmptyPhoneNumber(): boolean {\n return !this.phoneNumber.length;\n }\n\n getPhoneCodeFromCountryCode(countryCode: string): string \| undefined {\n return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n }\n\n updateCountryOptions() {\n const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n this.countryOptions = [\n ...this.countryData\n .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n .map(country => ({\n value: country.countryCode,\n label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n selected: country.countryCode === this.selectedCountry,\n disabled: false,\n })\n ),\n {\n value: '',\n label: '--',\n selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n disabled: true,\n },\n ];\n }\n\n placeErrorMessage() {\n this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n messError.style.display = \"block\";\n messError.style.marginTop = \"-0.5rem\";\n const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n phoneNumberInput.appendChild(messError);\n });\n }\n\n waitForElementToExist(selector: string): Promise<HTMLElement> {\n return new Promise(resolve => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector) as HTMLElement);\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector) as HTMLElement);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n subtree: true,\n childList: true,\n });\n });\n }\n\n render() {\n const selectId = `road-select-${selectIds++}`;\n const labelId = selectId + '-label';\n const valueId = selectId + '-value';\n const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n return (\n <Host>\n <road-input-group>\n <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n <select\n id='phone-number-input'\n class={`form-select-area has-value ${isInvalidClass}`}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n onChange={(event) => this.handleSelect(event)}\n >\n {this.countryOptions && this.countryOptions.map(option => (\n <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n </div>\n <road-input\n id=\"phone-number\"\n sizes=\"xl\"\n label={this.phoneLabel}\n value={this.phoneValue}\n onRoadChange={(event) => this.handleInput(event)}\n required={this.required}\n error={this.errorMessage}\n >\n </road-input>\n </road-input-group>\n </Host>\n );\n }\n}\n\n\n"]}
1	+ {"version":3,"file":"phone-number-input.js","sourceRoot":"","sources":["../../../src/components/phone-number-input/phone-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Host, State, h, Event, EventEmitter, Watch } from '@stencil/core';\nimport {\n PhoneNumberFormat,\n PhoneNumberType,\n PhoneNumberUtil,\n} from 'google-libphonenumber';\nimport { CountryOption, CountryType, PhoneReturnType, ReturnObject } from './interfaces';\nimport { RoadInputCustomEvent } from '../../components';\n\nlet selectIds = 0;\n\n@Component({\n tag: 'road-phone-number-input',\n styleUrl: 'phone-number-input.css',\n scoped: true,\n})\nexport class RoadPhoneNumberInput {\n\n /** Computed phone data /\n @Event() roadPhoneNumberInput!: EventEmitter<{\n isError: boolean;\n phone: {\n numberType: string;\n countryCode: string;\n nationalNumber: string;\n code: string;\n internationalNumber: string;\n };\n }>;\n\n @Element() el!: HTMLRoadPhoneNumberInputElement;\n\n /* Disable both fields /\n @Prop() disabled: boolean = false;\n\n /* List of countries displayed in the country selection. Countries will be automatically sorted by alphabetical order (see format in example) /\n @Prop() countryData: CountryType[] = [];\n\n /* Used to display countries with the right language /\n @Prop() language: string = 'fr';\n\n /* Country selection placeHolder /\n @Prop() codeLabel: string = '';\n\n /* Phone input placeHolder /\n @Prop() phoneLabel: string = '';\n\n /* Value displayed in the phone input /\n @Prop() phoneValue?: string;\n\n /* Selected country code /\n @Prop() countryCode?: string;\n\n /* Error message (displayed only if ther is a message) /\n @Prop() errorMessage: string = '';\n\n /* Add a star in the phone input */\n @Prop() required = false;\n\n @State() selectedCountry: string = this.countryData[0].countryCode;\n @State() selectedCountryCode: string = this.countryData[0].phoneCode;\n @State() phoneNumber: string = '';\n @State() countryOptions: CountryOption[] = [];\n @State() returnObject: ReturnObject = {\n isError: false,\n phone: this.resetPhoneUtilData(),\n };\n\n @Watch('errorMessage')\n updateMessagePosition() {\n this.placeErrorMessage();\n }\n\n // On component load\n componentWillLoad() {\n this.placeErrorMessage();\n let fromSelect = false;\n\n if (this.phoneValue) {\n this.phoneNumber = this.phoneValue;\n }\n\n if (this.countryCode) {\n this.selectedCountry = this.countryCode;\n if (this.getPhoneCodeFromCountryCode(this.countryCode)) {\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.countryCode)!);\n fromSelect = true;\n }\n }\n\n this.updateCountryOptions();\n this.createAndDispatchPhoneData(fromSelect);\n }\n\n // On user input\n handleInput(event: RoadInputCustomEvent<{\n value: string \| null \| undefined;\n }>) {\n this.phoneNumber = event.detail.value!;\n this.createAndDispatchPhoneData();\n }\n\n // On user select\n handleSelect(event: Event) {\n const select = event.target as HTMLSelectElement \| null;\n if (select) {\n this.updateSelectedCountry(select.value);\n this.updateSelectedCountryCode(this.getPhoneCodeFromCountryCode(this.selectedCountry)!);\n }\n this.createAndDispatchPhoneData(true);\n this.updateCountryOptions();\n }\n\n createAndDispatchPhoneData(fromSelect?: boolean) {\n // Init phone util\n const phoneUtil = PhoneNumberUtil.getInstance();\n const PNF = PhoneNumberFormat;\n\n // Reset the return object data\n this.returnObject.phone = this.resetPhoneUtilData();\n\n const tmpCountry = this.selectedCountry.length ? this.selectedCountry : this.countryData[0].countryCode;\n\n try {\n const parsedPhoneNumber = phoneUtil.parse(this.phoneNumber, tmpCountry);\n this.returnObject.isError = !phoneUtil.isValidNumber(parsedPhoneNumber) && !this.isEmptyPhoneNumber();\n this.returnObject.phone.nationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.NATIONAL);\n this.returnObject.phone.internationalNumber = phoneUtil.format(parsedPhoneNumber, PNF.INTERNATIONAL);\n\n // Set the country code values depending on the event origin\n if (phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)) {\n if (fromSelect) {\n this.returnObject.isError = !(\n phoneUtil.isValidNumber(parsedPhoneNumber) &&\n phoneUtil.isValidNumberForRegion(parsedPhoneNumber, this.selectedCountry) &&\n !this.isEmptyPhoneNumber()\n );\n } else {\n this.updateSelectedCountryCode(parsedPhoneNumber.getCountryCode()!.toString());\n this.updateSelectedCountry(phoneUtil.getRegionCodeForNumber(parsedPhoneNumber)!);\n\n this.returnObject.phone.countryCode = this.selectedCountry;\n this.returnObject.phone.code = this.selectedCountryCode;\n }\n this.updateCountryOptions();\n }\n\n const phoneType = Object.entries(PhoneNumberType).find(entry => entry[1] === phoneUtil.getNumberType(parsedPhoneNumber))!;\n this.returnObject.phone.numberType = phoneType[0];\n } catch {} finally {\n this.roadPhoneNumberInput.emit(this.returnObject);\n }\n }\n\n // utils\n\n updateSelectedCountryCode(countryCode: string) {\n this.selectedCountryCode = countryCode;\n }\n\n updateSelectedCountry(value: string) {\n this.selectedCountry = value;\n }\n\n resetPhoneUtilData(): PhoneReturnType {\n return {\n numberType: 'UNKNOWN',\n countryCode: this.selectedCountry,\n code: this.selectedCountryCode,\n nationalNumber: this.phoneNumber,\n internationalNumber: this.phoneNumber,\n };\n }\n\n isEmptyPhoneNumber(): boolean {\n return !this.phoneNumber.length;\n }\n\n getPhoneCodeFromCountryCode(countryCode: string): string \| undefined {\n return this.countryData.find(country => country.countryCode === countryCode)?.phoneCode;\n }\n\n updateCountryOptions() {\n const validLanguage = this.countryData[0].translations[this.language] ? this.language : 'fr';\n this.countryOptions = [\n ...this.countryData\n .sort((a, b) => a.translations[validLanguage].localeCompare(b.translations[validLanguage]))\n .map(country => ({\n value: country.countryCode,\n label: `${country.translations[validLanguage]} (+${country.phoneCode})`,\n selected: country.countryCode === this.selectedCountry,\n disabled: false,\n })\n ),\n {\n value: '',\n label: '--',\n selected: this.countryData.every((country) => country.countryCode !== this.selectedCountry),\n disabled: true,\n },\n ];\n }\n\n placeErrorMessage() {\n this.waitForElementToExist('.invalid-feedback').then((messError: HTMLElement) => {\n messError.style.display = \"block\";\n messError.style.marginTop = \"-0.5rem\";\n const phoneNumberInput = (this.el as HTMLRoadPhoneNumberInputElement);\n phoneNumberInput.appendChild(messError);\n });\n }\n\n waitForElementToExist(selector: string): Promise<HTMLElement> {\n return new Promise(resolve => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector) as HTMLElement);\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector) as HTMLElement);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n subtree: true,\n childList: true,\n });\n });\n }\n\n render() {\n const selectId = `road-select-${selectIds++}`;\n const labelId = selectId + '-label';\n const valueId = selectId + '-value';\n const isInvalidClass = this.errorMessage.length ? 'is-invalid' : '';\n const isErrorClass = this.errorMessage.length ? 'is-error' : '';\n\n return (\n <Host>\n <road-input-group>\n <div class={`road-phone-input-select ${isErrorClass}`} slot=\"prepend\">\n <select\n id='phone-number-input'\n class={`form-select-area has-value ${isInvalidClass}`}\n aria-disabled={this.disabled ? 'true' : null}\n disabled={this.disabled}\n onChange={(event) => this.handleSelect(event)}\n >\n {this.countryOptions && this.countryOptions.map(option => (\n <option value={option.value} disabled={option.disabled} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={selectId}>{this.codeLabel}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={selectId}>+{this.selectedCountryCode}</label>\n </div>\n <road-input\n id=\"phone-number\"\n sizes=\"xl\"\n label={this.phoneLabel}\n value={this.phoneValue}\n onRoadChange={(event) => this.handleInput(event)}\n required={this.required}\n error={this.errorMessage}\n >\n </road-input>\n </road-input-group>\n </Host>\n );\n }\n}\n\n\n"]}

package/dist/collection/components/phone-number-input/phone-number-input.stories.js CHANGED Viewed

@@ -564,7 +564,6 @@ const Template = (args) => html`
     .countryData=${args.countryData}
     language=${args.language}
     code-label=${args['code-label']}
-    code-value=${args['code-value']}
     phone-label=${args['phone-label']}
     country-code=${args['country-code']}
     phone-value=${args['phone-value']}

package/dist/collection/components/plate-number/plate-number.css CHANGED Viewed

@@ -90,7 +90,6 @@
   outline: 0;
   box-shadow: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
 }

package/dist/collection/components/range/range.css CHANGED Viewed

@@ -36,7 +36,6 @@
   background: transparent;
   outline: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
 }
@@ -71,8 +70,7 @@
 .form-range-input::-moz-range-track {
   height: 0.5rem;
   border: 0;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
 }
 .form-range-progress::before {
@@ -129,8 +127,7 @@
   border: none;
   border-radius: 1.625rem;
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
 }
 /**

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -36,7 +36,6 @@
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
 }

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -5,7 +5,6 @@ export class Select {
       const select = ev.target;
       if (select) {
         this.value = select.value || '';
-        this.value = this.addSelected();
       }
     };
     this.onBlur = () => {
@@ -35,10 +34,11 @@ export class Select {
     this.roadChange.emit({
       value: this.value,
     });
-    this.value = this.addSelected();
   }
   componentWillLoad() {
-    this.value = this.addSelected();
+    if (this.value) {
+      this.addSelected();
+    }
   }
   addSelected() {
     var _a, _b;

package/dist/collection/components/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,MAAM;;~~IA0HT~~,aAAQ,GAAG,CAAC,EAAS,EAAE,EAAE;MAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAkC,CAAC;MACrD,IAAI,MAAM,EAAE;QACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;~~QAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;~~OACjC;IACH,CAAC,CAAC;IAEM,WAAM,GAAG,GAAG,EAAE;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;~~oBArIyB~~,eAAe,SAAS,EAAE,EAAE;mBASlD,EAAE;qBAKsB,KAAK;oBAKN,KAAK;gBAKV,IAAI,CAAC,QAAQ;oBAKR,KAAK;gBAMV,CAAC;iBAKa,IAAI;iBAKjB,GAAG,IAAI,CAAC,QAAQ,QAAQ;;;;EAsChD,YAAY;IACV,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,KAAK,EAAE,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;~~IACH~~,~~IAAI,~~CAAC~~,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC~~;~~EAClC,CAAC;~~EAGD,iBAAiB;~~IAEb~~,IAAI,CAAC,KAAK,~~GAAG~~,IAAI,CAAC,WAAW,EAAE,CAAC;~~EAGpC~~,CAAC;EAED,WAAW;;IACT,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAChF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAErE,IAAI,cAAc,EAAE;MAChB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;KAClC;IACD,IAAG,eAAe,EAAC;MACjB,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAA;KACjC;IAGD,OAAO,MAAA,MAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAC;EAE/E,CAAC;~~EAoBD~~,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACzC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE;MAC/C,cACE,KAAK,EAAE,eAAe,aAAa,IAAI,cAAc,EAAE,EACvD,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM;QAEnB,cAAQ,QAAQ,QAAC,QAAQ,QAAC,MAAM,QAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,EAAE,GAAU;QAC9E,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1C,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAChF,CAAC,CACK;MACT,aAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS;MACzF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC3E,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF;AAED,IAAI,SAAS,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /*\n The id of select\n /\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /\n List of options of the select\n /\n @Prop() options: Array<{\n value: string \| number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n @Prop() disabled: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n /\n @Prop() size: number = 0;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'md' \| 'lg' \| 'xl' = 'xl';\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.selectId}-label`;\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n the value of the select.\n /\n @Prop({ mutable: true }) value?: any \| null;\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the select has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n ~~this.value = this.addSelected();\n~~ }\n\n\n componentWillLoad() {\n\n this.~~value = this.~~addSelected();\n \n \n }\n\n addSelected() {\n const selectedOption = this.options.find(option => option.value === this.value);\n const selectedOption2 = this.options.find(option => option.selected);\n\n if (selectedOption) {\n selectedOption.selected = true;\n }\n if(selectedOption2){\n selectedOption2.selected = false\n }\n \n\n return this.options.find(option => option.value === this.value)?.value ?? '';\n\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n ~~this.value = this.addSelected();\n~~ }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select ${hasValueClass} ${isInvalidClass}`}\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <option selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"]}
1	+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /*\n The id of select\n /\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /\n List of options of the select\n /\n @Prop() options: Array<{\n value: string \| number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n @Prop() disabled: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n /\n @Prop() size: number = 0;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'md' \| 'lg' \| 'xl' = 'xl';\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.selectId}-label`;\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n the value of the select.\n /\n @Prop({ mutable: true }) value?: any \| null;\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the select has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the select loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n\n componentWillLoad() {\n if(this.value){\n this.addSelected();\n }\n }\n \n addSelected() {\n const selectedOption = this.options.find(option => option.value === this.value);\n const selectedOption2 = this.options.find(option => option.selected);\n\n if (selectedOption) {\n selectedOption.selected = true;\n }\n if(selectedOption2){\n selectedOption2.selected = false\n }\n \n\n return this.options.find(option => option.value === this.value)?.value ?? '';\n\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select ${hasValueClass} ${isInvalidClass}`}\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <option selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"]}

package/dist/collection/components/select/select.stories.js CHANGED Viewed

@@ -62,7 +62,7 @@ export default {
   },
   args: {
     options: [
-      { value: 'value1', label: 'Value1' },
+      { value: 'value1', label: 'Value1'},
       { value: 'value2', label: 'Value2' },
       { value: 'value3', label: 'Value3' }
     ],
@@ -95,7 +95,7 @@ export const Playground = Template.bind({});
 export const WithValue = Template.bind({});
 WithValue.args = {
   options: [
-    { value: 'value1', label: 'Value1' },
+    { value: 'value1', label: 'Value1', selected: true },
     { value: 'value2', label: 'Value2' },
     { value: 'value3', label: 'Value3' }
   ],

package/dist/collection/components/textarea/textarea.css CHANGED Viewed

@@ -35,7 +35,6 @@
   border-radius: 0.25rem;
   box-shadow: none;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
 }

package/dist/esm/road-area-code.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-52302079.js';
-const areaCodeCss = ".sc-road-area-code-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:5rem;height:3.5rem}.form-select-area.sc-road-area-code{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.form-select-area.sc-road-area-code:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-area-code::-ms-expand{display:none}.form-select-area.sc-road-area-code::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-area-code:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-area-code:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-area-code:disabled,.form-select-area[readonly].sc-road-area-code{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-area-code{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-area-code:required~.form-select-area-label.sc-road-area-code::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-area-code{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-area-code-h .form-select-area-label.sc-road-area-code{top:1rem}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"date\"].sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"time\"].sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:placeholder-shown~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-area-code{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code~.invalid-feedback.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid~.invalid-feedback.sc-road-area-code{display:block}.form-select-area.sc-road-area-code option.sc-road-area-code:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-area-code::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
+const areaCodeCss = ".sc-road-area-code-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.form-select-area.sc-road-area-code{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.form-select-area.sc-road-area-code:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-area-code::-ms-expand{display:none}.form-select-area.sc-road-area-code::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-area-code:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-area-code:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-area-code:disabled,.form-select-area[readonly].sc-road-area-code{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-area-code{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-area-code:required~.form-select-area-label.sc-road-area-code::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-area-code{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-area-code-h .form-select-area-label.sc-road-area-code{top:1rem}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:focus~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[required].sc-road-area-code:valid~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area.has-value.sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"date\"].sc-road-area-code~.form-select-area-label.sc-road-area-code,.select-xl.sc-road-area-code-h .form-select-area[type=\"time\"].sc-road-area-code~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-area-code-h .form-select-area.sc-road-area-code:placeholder-shown~.form-select-area-label.sc-road-area-code{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-area-code{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-area-code~.invalid-feedback.sc-road-area-code,.was-validated.sc-road-area-code .form-select-area.sc-road-area-code:invalid~.invalid-feedback.sc-road-area-code{display:block}.form-select-area.sc-road-area-code option.sc-road-area-code:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-area-code::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
 const RoadAreaCode = class {
   constructor(hostRef) {

package/dist/esm/road-area-code.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-area-code.entry.js","mappings":"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","names":[],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.tsx"],"sourcesContent":["/\n Select\n \n Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n /\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n box-shadow: none;\n appearance: none;\n width: 5rem;\n height: 3.5rem;\n}\n\n/ SELECT\n -------------------- /\n\n.form-select-area {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select-area::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-select-area:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/\n Disabled state\n /\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/ LABEL\n -------------------- /\n\n.form-select-area-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n color: var(--road-on-danger-surface);\n content: \" \";\n}\n\n/* Value\n -------------------- /\n\n.form-select-area-value {\n position: absolute;\n top: 1.4rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n\n/ SIZES\n -------------------- /\n\n:host(.select-xl) .form-select-area {\n height: 3.5rem;\n padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/ ERROR\n -------------------- /\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n display: block;\n}\n\n\n.form-select-area option:checked::after {\n position: absolute;\n top: 0;\n left: 0;\n content: attr(data-content);\n}\n\n.form-select-area::after {\n position: absolute;\n top: 0;\n left: 0;\n content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n tag: 'road-area-code',\n styleUrl: 'area-code.css', // Mettez à jour le nom du fichier de style si nécessaire\n scoped: true,\n})\nexport class RoadAreaCode {\n\n /\n The id of select\n /\n\n @Prop() selectId: string = `road-select-${selectIds++}`;\n @State() selectedValue: string = '';\n\n/\n List of options of the area code\n /\n @Prop() options: Array<{\n value: string;\n label: string;\n selected?: boolean;\n }> = [];\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n\n @Prop() disabled: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the areacode\n /\n @Prop() size: number = 0;\n\n /\n The size of the areacode\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n The label of the areacode\n /\n @Prop() label: string = 'Country';\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n the value of the select.\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the select has focus.\n/\n\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the select loses focus.\n/\n\n @Event() roadblur!: EventEmitter<void>;\n /* @internal /\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n this.selectedValue = this.getMatchedOptionValue();\n }\n\n /\n Trigger number.\n */\n @Prop({ mutable: true }) triggerRender: number = 0;\n\n componentWillLoad() {\n if (!this.value && this.options.length > 0) {\n this.selectedValue = this.options[0].value;\n } else {\n this.selectedValue = this.getMatchedOptionValue();\n }\n }\n\n getMatchedOptionValue() {\n return this.options.find(option => option.value === this.value)?.value ?? '';\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n this.selectedValue = this.getMatchedOptionValue();\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const valueId = this.selectId + '-value';\n\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select-area has-value ${isInvalidClass}`} // Appliquez la classe has-value par défaut ici\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"],"version":3}
1	+ {"file":"road-area-code.entry.js","mappings":"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","names":[],"sources":["src/components/area-code/area-code.css?tag=road-area-code&encapsulation=scoped","src/components/area-code/area-code.tsx"],"sourcesContent":["/\n Select\n \n Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n /\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n box-shadow: none;\n appearance: none;\n width: 5rem;\n height: 3.5rem;\n}\n\n/ SELECT\n -------------------- /\n\n.form-select-area {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n border: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.form-select-area:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select-area::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select-area::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-select-area:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select-area:focus ~ .form-select-area-label,\n.form-select-area[required]:valid ~ .form-select-area-label,\n.form-select-area.has-value ~ .form-select-area-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select-area:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/\n Disabled state\n /\n\n.form-select-area:disabled,\n.form-select-area[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/ LABEL\n -------------------- /\n\n.form-select-area-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select-area:required ~ .form-select-area-label::after{\n color: var(--road-on-danger-surface);\n content: \" \";\n}\n\n/* Value\n -------------------- /\n\n.form-select-area-value {\n position: absolute;\n top: 1.4rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n\n/ SIZES\n -------------------- /\n\n:host(.select-xl) .form-select-area {\n height: 3.5rem;\n padding: 0.75rem 0 0 1rem;\n}\n\n:host(.select-xl) .form-select-area-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select-area:focus ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[required]:valid ~ .form-select-area-label,\n:host(.select-xl) .form-select-area.has-value ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"date\"] ~ .form-select-area-label,\n:host(.select-xl) .form-select-area[type=\"time\"] ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select-area:placeholder-shown ~ .form-select-area-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/ ERROR\n -------------------- /\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid,\n.was-validated .form-select-area:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select-area.is-invalid ~ .invalid-feedback,\n.was-validated .form-select-area:invalid ~ .invalid-feedback {\n display: block;\n}\n\n\n.form-select-area option:checked::after {\n position: absolute;\n top: 0;\n left: 0;\n content: attr(data-content);\n}\n\n.form-select-area::after {\n position: absolute;\n top: 0;\n left: 0;\n content: var(--selected-content, '');\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, State } from '@stencil/core';\n\n@Component({\n tag: 'road-area-code',\n styleUrl: 'area-code.css', // Mettez à jour le nom du fichier de style si nécessaire\n scoped: true,\n})\nexport class RoadAreaCode {\n\n /\n The id of select\n /\n\n @Prop() selectId: string = `road-select-${selectIds++}`;\n @State() selectedValue: string = '';\n\n/\n List of options of the area code\n /\n @Prop() options: Array<{\n value: string;\n label: string;\n selected?: boolean;\n }> = [];\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the select.\n /\n\n @Prop() disabled: boolean = false;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.selectId;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n The size of the areacode\n /\n @Prop() size: number = 0;\n\n /\n The size of the areacode\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n The label of the areacode\n /\n @Prop() label: string = 'Country';\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n the value of the select.\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the select has focus.\n/\n\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the select loses focus.\n/\n\n @Event() roadblur!: EventEmitter<void>;\n /* @internal /\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n this.selectedValue = this.getMatchedOptionValue();\n }\n\n /\n Trigger number.\n */\n @Prop({ mutable: true }) triggerRender: number = 0;\n\n componentWillLoad() {\n if (!this.value && this.options.length > 0) {\n this.selectedValue = this.options[0].value;\n } else {\n this.selectedValue = this.getMatchedOptionValue();\n }\n }\n\n getMatchedOptionValue() {\n return this.options.find(option => option.value === this.value)?.value ?? '';\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| '';\n this.selectedValue = this.getMatchedOptionValue();\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const valueId = this.selectId + '-value';\n\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select-area has-value ${isInvalidClass}`} // Appliquez la classe has-value par défaut ici\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-area-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n <label class=\"form-select-area-value\" id={valueId} htmlFor={this.selectId}>+{this.selectedValue}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n}\n\nlet selectIds = 0;\n"],"version":3}

package/dist/esm/road-badge_14.entry.js CHANGED Viewed

@@ -19,7 +19,7 @@ const Badge = class {
 };
 Badge.style = badgeCss;
-const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant)}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;background-color:var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
+const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant)}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-primary)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
 const Button = class {
   constructor(hostRef) {
@@ -207,7 +207,7 @@ const Counter = class {
 let counterIds = 0;
 Counter.style = counterCss;
-const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
+const drawerCss = ":host{--background:var(--road-surface);--color:var(--road-on-surface);--header-icon:var(--road-on-surface);--header-color:var(--road-on-surface);--header-background:var(--road-surface);--header-delimiter:0;--back-chevron-color:var(--road-icon);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateX(-100%)}:host(.drawer-right){justify-content:flex-end}:host(.drawer-right) .drawer-dialog{transform:translateX(100%)}:host(.drawer-bottom){align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}.drawer-header{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-on-primary);--header-color:var(--road-on-primary);--header-background:var(--road-primary-variant);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:flex;align-items:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium)}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{transform:none}";
 const Drawer = class {
   constructor(hostRef) {
@@ -476,7 +476,7 @@ const Icon = class {
 };
 Icon.style = iconCss;
-const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control[type=\"number\"].sc-road-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:block}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
+const inputCss = ".sc-road-input-h{--height:3rem;--border-radius:0.25rem;--input-text-align:left;--margin-bottom:1rem;position:relative;display:block;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);color:var(--road-grey-10)}.form-control.sc-road-input{box-sizing:border-box;display:block;width:100%;height:var(--height);padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);text-align:var(--input-text-align);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:var(--border-radius);box-shadow:none;-webkit-appearance:none;appearance:none}.form-control[type=\"number\"].sc-road-input{-webkit-appearance:textfield;appearance:textfield}.form-control.sc-road-input::-webkit-calendar-picker-indicator{margin-top:-0.75rem}.form-control.sc-road-input::-webkit-date-and-time-value{padding-top:0.625rem}.form-control.sc-road-input::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-input:focus~.form-label.sc-road-input,.form-control[required].sc-road-input:valid~.form-label.sc-road-input,.form-control.has-value.sc-road-input~.form-label.sc-road-input,.form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:-ms-input-placeholder~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-input:not(:disabled):focus,.form-control[autofocus].sc-road-input{border-color:var(--road-input-outline-variant);outline:0}.form-control.sc-road-input:disabled,.form-control[readonly].sc-road-input{cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-label.sc-road-input{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-control.sc-road-input:required~.form-label.sc-road-input::after{color:var(--road-danger-default);content:\" *\"}.less-label.sc-road-input{padding-top:0}.input-xl.sc-road-input-h{--height:3.5rem}.input-xl.sc-road-input-h .form-control.sc-road-input{padding:1rem 1rem 0}.phone-number.sc-road-input-h .form-control.sc-road-input{padding-left:2rem}.phone-number.sc-road-input-h .form-label.sc-road-input{left:2rem}.input-xl.sc-road-input-h .form-label.sc-road-input{top:1rem}.input-xl.sc-road-input-h .form-control.sc-road-input:focus~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[autofocus].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[required].sc-road-input:valid~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control.has-value.sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"date\"].sc-road-input~.form-label.sc-road-input,.input-xl.sc-road-input-h .form-control[type=\"time\"].sc-road-input~.form-label.sc-road-input{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-input-h .form-control.sc-road-input:placeholder-shown~.form-label.sc-road-input{transform:scale(0.625) translateY(-0.625rem)}.invalid-feedback.sc-road-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-input~.invalid-feedback.sc-road-input,.was-validated.sc-road-input .form-control.sc-road-input:invalid~.invalid-feedback.sc-road-input{display:block}.helper.sc-road-input{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}.form-control[type=\"password\"].sc-road-input~.checklist-password.sc-road-input .invalid.sc-road-input{color:var(--road-on-surface-weak)}";
 const debounceEvent = (event, wait) => {
   const original = event._original || event;