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

@roadtrip/components 3.11.2 → 3.12.0

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 (85) hide show

package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js CHANGED Viewed

@@ -10,6 +10,7 @@ const Stepper = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.color = 'default';
+    this.numberStep = 3;
     this.stateFirstStep = undefined;
     this.stateSecondStep = undefined;
     this.stateThirdStep = undefined;
@@ -21,11 +22,11 @@ const Stepper = class {
     const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
     const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
     const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
-    const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
+    const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
     const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
     const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
     const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
-    return (index.h(index.Host, null, index.h("nav", null, index.h("ul", { class: `${colorClass}` }, index.h("li", { class: `${stateClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title" })))), index.h("li", { class: `${stateSecondStepClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon2" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title2" })))), index.h("li", { class: `${stateThirdStepClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon3" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
+    return (index.h(index.Host, null, index.h("nav", null, index.h("ul", { class: `${colorClass}` }, index.h("li", { class: `${stateClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep1}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title" })))), index.h("li", { class: `${stateSecondStepClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep2}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon2" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title2" })))), this.numberStep == 3 && index.h("li", { class: `${stateThirdStepClass}` }, index.h("a", { class: "progress-indicator-horizontal-link", href: `${urlStep3}` }, index.h("span", { class: "progress-indicator-horizontal-icon" }, index.h("slot", { name: "progress-indicator-horizontal-icon3" })), index.h("span", { class: "progress-indicator-horizontal-title" }, index.h("slot", { name: "progress-indicator-horizontal-title3" }))))))));
   }
 };
 Stepper.style = progressIndicatorHorizontalCss;

package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-progress-indicator-horizontal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,8BAA8B,GAAG,gxHAAgxH;;MCmB1yH,OAAO;;;iBAKwC,SAAS;;;;;;;;EAiChE,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACpK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAIxE,QACEA,QAACC,UAAI,QACHD,qBACEA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxBA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxBA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACLA,gBAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClCA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACLA,gBAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IACjCA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CACF,CACD,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/\n Progress-indicator-horizontal\n \n Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n /\n\n:host {\n display: block;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL\n -------------------- /\n\n.progress-indicator-horizontal {\n display: flex;\n padding-left: 0;\n margin: 0;\n font-family: var(--road-font);\n line-height: 1.5;\n list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n background-color: var(--road-header-surface);\n}\n\n\n/ PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- /\n\n.progress-indicator-horizontal-item {\n display: flex;\n flex: 1;\n flex-direction: column;\n text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n margin-top: 0.125rem;\n}\n\n/\n Line between items\n /\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-header-surface-disabled);\n}\n\n\n/\n Disabled click for current and next steps\n /\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n cursor: not-allowed;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- /\n\n.progress-indicator-horizontal-link {\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-decoration: none;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- /\n\n.progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n background: var(--road-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n background: var(--road-header-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- /\n\n.progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-header-surface-weak);\n}\n\n/ STEP COMPLETED\n -------------------- /\n\n.completed:not(:last-child)::after {\n background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n color: var(--road-on-primary);\n background: var(--road-primary);\n border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n color: var(--road-primary);\n background: var(--road-surface);\n border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n color: var(--road-header-badge);\n background: none;\n border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n width: calc(1.5rem);\n height: calc(1.5rem);\n color: var(--road-on-header-badge);\n background: var(--road-header-badge);\n border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/\n @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n /\n\n@Component({\n tag: 'road-progress-indicator-horizontal',\n styleUrl: 'progress-indicator-horizontal.css',\n shadow: true,\n})\nexport class Stepper {\n\n /\n The color progress-indicator-horizontal.\n /\n @Prop({ reflect: true }) color?: 'default' \| 'header' = 'default';\n\n /\n The color of the first step.\n /\n @Prop() stateFirstStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The color of the second step.\n /\n @Prop() stateSecondStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The color of the third step.\n /\n @Prop() stateThirdStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The url of the first step.\n /\n @Prop() urlStep1?: string;\n\n /\n The url of the first step.\n /\n @Prop() urlStep2?: string;\n\n /\n The url of the first step.\n */\n @Prop() urlStep3?: string;\n \n\n render() {\n\n const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n const stateThirdStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n\n\n return (\n <Host>\n <nav>\n <ul class={`${colorClass}`}>\n <li class={`${stateClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title\"/>\n </span>\n </a>\n </li>\n <li class={`${stateSecondStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon2\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title2\"/>\n </span>\n </a>\n </li>\n <li class={`${stateThirdStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon3\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title3\"/>\n </span>\n </a>\n </li>\n </ul>\n </nav>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"road-progress-indicator-horizontal.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,8BAA8B,GAAG,gxHAAgxH;;MCmB1yH,OAAO;;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,+DAA+D,IAAI,CAAC,KAAK,EAAE,GAAG,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,eAAe,EAAE,GAAG,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,GAAG,sCAAsC,IAAI,CAAC,cAAc,EAAE,GAAG,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG,CAAC;IAExE,QACEA,QAACC,UAAI,QACHD,qBACKA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1BA,gBAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxBA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACLA,gBAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IACnCA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAIA,gBAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IAC1DA,eAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/DA,kBAAM,KAAK,EAAC,oCAAoC,IAC9CA,kBAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACPA,kBAAM,KAAK,EAAC,qCAAqC,IAC/CA,kBAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/\n Progress-indicator-horizontal\n \n Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n /\n\n:host {\n display: block;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL\n -------------------- /\n\n.progress-indicator-horizontal {\n display: flex;\n padding-left: 0;\n margin: 0;\n font-family: var(--road-font);\n line-height: 1.5;\n list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n background-color: var(--road-header-surface);\n}\n\n\n/ PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- /\n\n.progress-indicator-horizontal-item {\n display: flex;\n flex: 1;\n flex-direction: column;\n text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n margin-top: 0.125rem;\n}\n\n/\n Line between items\n /\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-header-surface-disabled);\n}\n\n\n/\n Disabled click for current and next steps\n /\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n cursor: not-allowed;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- /\n\n.progress-indicator-horizontal-link {\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-decoration: none;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- /\n\n.progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n background: var(--road-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n background: var(--road-header-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n/ PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- /\n\n.progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-header-surface-weak);\n}\n\n/ STEP COMPLETED\n -------------------- /\n\n.completed:not(:last-child)::after {\n background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after {\n background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n color: var(--road-on-primary);\n background: var(--road-primary);\n border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon{\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n color: var(--road-primary);\n background: var(--road-surface);\n border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon {\n color: var(--road-header-badge);\n background: none;\n border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n width: calc(1.5rem);\n height: calc(1.5rem);\n color: var(--road-on-header-badge);\n background: var(--road-header-badge);\n border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-header-surface);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/\n @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n /\n\n@Component({\n tag: 'road-progress-indicator-horizontal',\n styleUrl: 'progress-indicator-horizontal.css',\n shadow: true,\n})\nexport class Stepper {\n\n /\n The color progress-indicator-horizontal.\n /\n @Prop({ reflect: true }) color?: 'default' \| 'header' = 'default';\n\n /\n The nombre of steps.\n /\n @Prop() numberStep?: 3 \| 2 = 3;\n\n /\n The color of the first step.\n /\n @Prop() stateFirstStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The color of the second step.\n /\n @Prop() stateSecondStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The color of the third step.\n /\n @Prop() stateThirdStep?: 'default' \| 'current' \| 'comleted';\n\n /\n The url of the first step.\n /\n @Prop() urlStep1?: string;\n\n /\n The url of the first step.\n /\n @Prop() urlStep2?: string;\n\n /\n The url of the first step.\n */\n @Prop() urlStep3?: string;\n \n\n render() {\n\n const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n return (\n <Host>\n <nav>\n <ul class={`${colorClass}`}>\n <li class={`${stateClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title\"/>\n </span>\n </a>\n </li>\n <li class={`${stateSecondStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon2\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title2\"/>\n </span>\n </a>\n </li>\n {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon3\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title3\"/>\n </span>\n </a>\n </li>}\n \n </ul>\n </nav>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/cjs/road-rating.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
 const index$1 = require('./index-fb57f684.js');
-const ratingCss = ":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}";
+const ratingCss = ":host{display:flex;align-items:center}.rating-stars{display:inline-flex;flex-shrink:0}.rating-star{color:var(--road-surface-disabled)}.rating-stars.rating-stars--small .icon-sm{width:1rem;height:1rem}.rating-number{margin-left:0.5rem;font-size:var(--road-link-medium);color:var(--road-on-surface);text-decoration:underline}.rating-number.rating-number--small{font-size:var(--road-link-small)}.rating-number.readonly{text-decoration:none}";
 const Rating = class {
   constructor(hostRef) {
@@ -13,15 +13,18 @@ const Rating = class {
     this.size = 'medium';
     this.rate = 0;
     this.showreviews = true;
+    this.readonly = false;
     this.reviews = 0;
     this.reviewsText = 'reviews';
+    this.url = '#';
   }
   render() {
     const rate = Math.floor(this.rate);
     const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;
     const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
     const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
-    return (index.h(index.Host, null, index.h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => index.h("road-icon", { icon: index$1.starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", class: "rating-star" }))), this.showreviews && index.h("a", { class: `${sizeRatingNumberClass}`, href: "#" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+    const readOnly = this.readonly == true ? `readonly` : '';
+    return (index.h(index.Host, null, index.h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => index.h("road-icon", { icon: index$1.starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => index.h("road-icon", { icon: index$1.star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && index.h("a", { class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && index.h("road-label", { class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
   }
 };
 Rating.style = ratingCss;

package/dist/cjs/road-rating.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-rating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,~~0YAA0Y~~;;~~MCQ/Y~~,MAAM;;;gBAKqC,QAAQ;gBAKvC,CAAC;uBAKO,IAAI;~~mBAKT~~,CAAC;uBAKG,SAAS;;~~EAEvC~~,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,8BAA8B,IAAI,CAAC,IAAI,EAAE,GAAG,cAAc,CAAC;IAClH,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,CAAC;~~IAEtH~~,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpBA,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5BF,uBAAW,IAAI,EAAEG,qBAAa,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAC3E,EACA,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MACvCH,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAIF,eAAG,KAAK,EAAE,GAAG,qBAAqB,EAAE,EAAE,IAAI,~~EAAC~~,GAAG,~~SAAG~~,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,~~CAE/H~~,EACP;GACH;;;;;;","names":["h","Host","star","starHalfColor"],"sources":["src/components/rating/rating.css?tag=road-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["/\n Rating\n \n Index\n * - Stars\n * - Star\n * - Rating number\n /\n\n/ STARS\n -------------------- /\n\n:host {\n display: flex;\n align-items: center;\n}\n\n.rating-stars {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ STAR\n -------------------- /\n\n.rating-star {\n color: var(--road-surface-disabled);\n}\n\n.rating-stars.rating-stars--small .icon-sm{\n width: 1rem;\n height: 1rem;\n}\n\n/ RATING NUMBER\n -------------------- /\n\n.rating-number {\n margin-left: 0.5rem;\n font-size: var(--road-link-medium);\n color: var(--road-on-surface);\n text-decoration: underline;\n}\n\n.rating-number.rating-number--small {\n font-size: var(--road-link-small);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { star, starHalfColor } from '../../../icons';\n\n@Component({\n tag: 'road-rating',\n styleUrl: 'rating.css',\n shadow: true,\n})\nexport class Rating {\n\n /\n The button size.\n /\n @Prop({ reflect: true }) size?: 'small' \| 'medium' = 'medium';\n\n /\n Rate review between 0 and 5\n /\n @Prop() rate: number = 0;\n\n /\n Show reviews\n /\n @Prop() showreviews: boolean = true;\n\n /\n number of reviews\n /\n @Prop() reviews: number = 0;\n\n /\n Word display next to the number of reviews.\n */\n @Prop() reviewsText: string = 'reviews';\n\n render() {\n const rate = Math.floor(this.rate);\n const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;\n const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';\n const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';\n\n return (\n <Host>\n <div class={`${sizeRatingStarsClass}`}>\n {[...Array(rate)].map(() =>\n <road-icon icon={star} size=\"sm\" color=\"warning\"></road-icon>\n )}\n {[...Array(rateDecimale)].map(() =>\n <road-icon icon={starHalfColor} size=\"sm\" class=\"rating-star\"></road-icon>\n )}\n {[...Array(5 - rate - rateDecimale)].map(() =>\n <road-icon icon={star} size=\"sm\" class=\"rating-star\"></road-icon>\n )}\n </div>\n {this.showreviews && <a class={`${sizeRatingNumberClass}`} href~~=\"#\"~~>({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</a>}\n \n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"road-rating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ubAAub;;MCQ5b,MAAM;;;gBAKqC,QAAQ;gBAKvC,CAAC;uBAKO,IAAI;oBAKP,KAAK;mBAKP,CAAC;uBAKG,SAAS;eAKf,GAAG;;EAE3B,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,8BAA8B,IAAI,CAAC,IAAI,EAAE,GAAG,cAAc,CAAC;IAClH,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,gCAAgC,IAAI,CAAC,IAAI,EAAE,GAAG,eAAe,CAAC;IACtH,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,UAAU,GAAG,EAAE,CAAC;IAGzD,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpBA,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5BF,uBAAW,IAAI,EAAEG,qBAAa,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAC3E,EACA,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MACvCH,uBAAW,IAAI,EAAEE,YAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,QAAQ,IAAI,KAAK,IAAI,IAAI,CAAC,WAAW,IAAIF,eAAG,KAAK,EAAE,GAAG,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,SAAI,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,EACpK,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW,IAAIA,wBAAY,KAAK,EAAE,GAAG,qBAAqB,IAAI,QAAQ,EAAE,SAAI,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,MAAe,CAE7K,EACP;GACH;;;;;;","names":["h","Host","star","starHalfColor"],"sources":["src/components/rating/rating.css?tag=road-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["/\n Rating\n \n Index\n * - Stars\n * - Star\n * - Rating number\n /\n\n/ STARS\n -------------------- /\n\n:host {\n display: flex;\n align-items: center;\n}\n\n.rating-stars {\n display: inline-flex;\n flex-shrink: 0;\n}\n\n/ STAR\n -------------------- /\n\n.rating-star {\n color: var(--road-surface-disabled);\n}\n\n.rating-stars.rating-stars--small .icon-sm{\n width: 1rem;\n height: 1rem;\n}\n\n/ RATING NUMBER\n -------------------- /\n\n.rating-number {\n margin-left: 0.5rem;\n font-size: var(--road-link-medium);\n color: var(--road-on-surface);\n text-decoration: underline;\n}\n\n.rating-number.rating-number--small {\n font-size: var(--road-link-small);\n}\n\n.rating-number.readonly {\n text-decoration: none;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { star, starHalfColor } from '../../../icons';\n\n@Component({\n tag: 'road-rating',\n styleUrl: 'rating.css',\n shadow: true,\n})\nexport class Rating {\n\n /\n The button size.\n /\n @Prop({ reflect: true }) size?: 'small' \| 'medium' = 'medium';\n\n /\n Rate review between 0 and 5\n /\n @Prop() rate: number = 0;\n\n /\n Show reviews\n /\n @Prop() showreviews: boolean = true;\n\n /\n Read Only\n /\n @Prop() readonly: boolean = false;\n\n /\n number of reviews\n /\n @Prop() reviews: number = 0;\n\n /\n Word display next to the number of reviews.\n /\n @Prop() reviewsText: string = 'reviews';\n\n /\n Url.\n */\n @Prop() url: string = '#';\n\n render() {\n const rate = Math.floor(this.rate);\n const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;\n const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';\n const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';\n const readOnly = this.readonly == true ? `readonly` : '';\n\n\n return (\n <Host>\n <div class={`${sizeRatingStarsClass}`}>\n {[...Array(rate)].map(() =>\n <road-icon icon={star} size=\"sm\" color=\"warning\"></road-icon>\n )}\n {[...Array(rateDecimale)].map(() =>\n <road-icon icon={starHalfColor} size=\"sm\" class=\"rating-star\"></road-icon>\n )}\n {[...Array(5 - rate - rateDecimale)].map(() =>\n <road-icon icon={star} size=\"sm\" class=\"rating-star\"></road-icon>\n )}\n </div>\n {this.readonly == false && this.showreviews && <a class={`${sizeRatingNumberClass}`} href={this.url}>({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</a>}\n {this.readonly == true && this.showreviews && <road-label class={`${sizeRatingNumberClass} ${readOnly}`}>({this.reviews}{this.reviewsText && ` ${this.reviewsText}`})</road-label>}\n\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/road-select.cjs.entry.js CHANGED Viewed

@@ -19,6 +19,7 @@ const Select = class {
       const select = ev.target;
       if (select) {
         this.value = select.value || '';
+        this.value = this.addSelected();
       }
     };
     this.onBlur = () => {
@@ -48,6 +49,22 @@ const Select = class {
     this.roadChange.emit({
       value: this.value,
     });
+    this.value = this.addSelected();
+  }
+  componentWillLoad() {
+    this.value = this.addSelected();
+  }
+  addSelected() {
+    var _a, _b;
+    const selectedOption = this.options.find(option => option.value === this.value);
+    const selectedOption2 = this.options.find(option => option.selected);
+    if (selectedOption) {
+      selectedOption.selected = true;
+    }
+    if (selectedOption2) {
+      selectedOption2.selected = false;
+    }
+    return (_b = (_a = this.options.find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
   }
   render() {
     const labelId = this.selectId + '-label';

package/dist/cjs/road-select.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.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}\n\n/ SELECT\n -------------------- /\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\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 background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select::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:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select: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:disabled,\n.form-select[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-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:required ~ .form-select-label::after{\n color: var(--road-on-danger-surface);\n content: \" \";\n}\n\n/* SIZES\n -------------------- /\n\n:host(.select-xl) .form-select {\n min-height: 3.5rem;\n padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n min-height: 2.5rem;\n padding: 1rem 1rem 0;\n font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-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.is-invalid,\n.was-validated .form-select:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n display: block;\n}\n","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 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"],"version":3}
1	+ {"file":"road-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,4zIAA4zI;;MCOj0I,MAAM;;;;;;;;;IA0HT,aAAQ,GAAG,CAAC,EAAS;MAC3B,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;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,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;GACjC;EAGD,iBAAiB;IAEb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;GAGnC;EAED,WAAW;;IACT,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAChF,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,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,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAC;GAE9E;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,GAAG,WAAW,GAAG,EAAE,CAAC;IACzE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;IAEzF,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE,IAC/CD,oBACE,KAAK,EAAE,eAAe,aAAa,IAAI,cAAc,EAAE,EACvD,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,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,IAEnBA,oBAAQ,QAAQ,QAAC,QAAQ,QAAC,MAAM,QAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,EAAE,GAAU,EAC9E,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtCA,oBAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAChF,CAAC,CACK,EACTA,mBAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,EACzF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIA,eAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC3E,EACP;GACH;;;;;AAIH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.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}\n\n/ SELECT\n -------------------- /\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\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 background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select::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:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select: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:disabled,\n.form-select[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-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:required ~ .form-select-label::after{\n color: var(--road-on-danger-surface);\n content: \" \";\n}\n\n/* SIZES\n -------------------- /\n\n:host(.select-xl) .form-select {\n min-height: 3.5rem;\n padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n min-height: 2.5rem;\n padding: 1rem 1rem 0;\n font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-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.is-invalid,\n.was-validated .form-select:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n display: block;\n}\n","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"],"version":3}

package/dist/cjs/roadtrip.cjs.js CHANGED Viewed

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-label\"],[1,\"road-input-group\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"countryData\":[16],\"language\":[1],\"areaLabel\":[1,\"area-label\"],\"areaValue\":[1025,\"area-value\"],\"inputLabel\":[1,\"input-label\"],\"inputValue\":[1,\"input-value\"],\"numberType\":[1,\"number-type\"],\"required\":[4],\"selectedCountry\":[32],\"phoneNumber\":[32],\"inputError\":[32],\"countryOptions\":[32]},null,{\"language\":[\"languageChanged\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/components/global-navigation/global-navigation.stories.js CHANGED Viewed

@@ -153,6 +153,7 @@ export default {
   </road-navbar-item>
   <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
+  <div class="p-16">
   <road-item class="mb-16 text-left bg-light profil">
     <road-avatar slot="start" class="mr-16">
       <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
@@ -184,7 +185,7 @@ export default {
     <road-icon name="log-out"></road-icon>
     Log out
   </road-item>
+</div>
   </road-drawer>

package/dist/collection/components/icon/svg/location-pin-outline-color.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg viewBox="0 0 64 64"><path ~~fill="none"~~ d="M0 0h64v64H0z"/><path d="M32 32.202a7.9 7.9 0 1 1 7.9-7.9 7.911 7.911 0 0 1-7.9 7.9Zm0-13.3a5.4 5.4 0 1 0 5.4 5.4 5.409 5.409 0 0 0-5.4-5.404Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/><path d="m32 58.452-.962-1.16c-4.06-4.9-17.3-21.76-17.3-33.242A18.188 18.188 0 0 1 32 6h.028a18.225 18.225 0 0 1 12.891 5.3 17.845 17.845 0 0 1 5.346 12.772c0 11.46-13.244 28.32-17.3 33.215ZM32 8.5a15.685 15.685 0 0 0-15.766 15.551c0 8.121 7.966 20.837 15.766 30.47 7.795-9.631 15.765-22.337 15.765-30.449a15.374 15.374 0 0 0-4.6-11A15.742 15.742 0 0 0 32.026 8.5Z"/></svg>
1	+ <svg viewBox="0 0 64 64"><path d="M0 0h64v64H0z"/><path d="M32 32.202a7.9 7.9 0 1 1 7.9-7.9 7.911 7.911 0 0 1-7.9 7.9Zm0-13.3a5.4 5.4 0 1 0 5.4 5.4 5.409 5.409 0 0 0-5.4-5.404Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/><path d="m32 58.452-.962-1.16c-4.06-4.9-17.3-21.76-17.3-33.242A18.188 18.188 0 0 1 32 6h.028a18.225 18.225 0 0 1 12.891 5.3 17.845 17.845 0 0 1 5.346 12.772c0 11.46-13.244 28.32-17.3 33.215ZM32 8.5a15.685 15.685 0 0 0-15.766 15.551c0 8.121 7.966 20.837 15.766 30.47 7.795-9.631 15.765-22.337 15.765-30.449a15.374 15.374 0 0 0-4.6-11A15.742 15.742 0 0 0 32.026 8.5Z"/></svg>

package/dist/collection/components/icon/svg/social-whatsapp-badge.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" ><path d="M32.074 47.493h.006c8.668 0 15.722-7.021 15.726-15.651a15.516 15.516 0 0 0-4.602-11.072 15.658 15.658 0 0 0-11.118-4.59c-8.675 0-15.73 7.02-15.733 15.65a15.555 15.555 0 0 0 2.404 8.328l.374.593-1.588 5.775 5.952-1.554.574.34a15.765 15.765 0 0 0 8.005 2.181Zm5.401-13.251c.434.157 2.758 1.295 3.23 1.53v.002l.258.126c.33.159.553.266.648.424.118.196.118 1.138-.276 2.237-.393 1.099-2.282 2.102-3.19 2.237-.815.121-1.846.172-2.978-.186a27.194 27.194 0 0 1-2.695-.992c-4.43-1.904-7.424-6.175-7.993-6.986l-.083-.118-.003-.004c-.248-.329-1.928-2.558-1.928-4.864 0-2.167 1.07-3.303 1.563-3.826l.092-.099c.433-.47.945-.588 1.26-.588.317 0 .631.002.907.016.034.002.07.002.107.002.275-.002.618-.003.957.806.137.327.34.82.552 1.332.399.966.828 2.007.905 2.161.118.236.197.51.04.824l-.07.14c-.117.237-.203.414-.403.645-.08.093-.164.194-.247.294-.161.196-.323.39-.463.53-.236.234-.482.489-.206.96.275.472 1.224 2.012 2.63 3.26a12.233 12.233 0 0 0 3.488 2.194c.13.056.236.102.314.14.472.236.748.197 1.024-.117.276-.313 1.182-1.373 1.497-1.845.315-.47.63-.392 1.063-.235Z"/><path d="M32 64c17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0 14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32Zm.08-51c5.061.002 9.812 1.963 13.383 5.522 3.573 3.56 5.539 8.29 5.537 13.322-.004 10.382-8.493 18.83-18.92 18.83h-.008a18.968 18.968 0 0 1-9.042-2.292L13 51l2.684-9.758a18.718 18.718 0 0 1-2.525-9.413C13.162 21.445 21.65 13 32.079 13Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd"><path d="M32.074 47.493h.006c8.668 0 15.722-7.021 15.726-15.651a15.516 15.516 0 0 0-4.602-11.072 15.658 15.658 0 0 0-11.118-4.59c-8.675 0-15.73 7.02-15.733 15.65a15.555 15.555 0 0 0 2.404 8.328l.374.593-1.588 5.775 5.952-1.554.574.34a15.765 15.765 0 0 0 8.005 2.181Zm5.401-13.251c.434.157 2.758 1.295 3.23 1.53v.002l.258.126c.33.159.553.266.648.424.118.196.118 1.138-.276 2.237-.393 1.099-2.282 2.102-3.19 2.237-.815.121-1.846.172-2.978-.186a27.194 27.194 0 0 1-2.695-.992c-4.43-1.904-7.424-6.175-7.993-6.986l-.083-.118-.003-.004c-.248-.329-1.928-2.558-1.928-4.864 0-2.167 1.07-3.303 1.563-3.826l.092-.099c.433-.47.945-.588 1.26-.588.317 0 .631.002.907.016.034.002.07.002.107.002.275-.002.618-.003.957.806.137.327.34.82.552 1.332.399.966.828 2.007.905 2.161.118.236.197.51.04.824l-.07.14c-.117.237-.203.414-.403.645-.08.093-.164.194-.247.294-.161.196-.323.39-.463.53-.236.234-.482.489-.206.96.275.472 1.224 2.012 2.63 3.26a12.233 12.233 0 0 0 3.488 2.194c.13.056.236.102.314.14.472.236.748.197 1.024-.117.276-.313 1.182-1.373 1.497-1.845.315-.47.63-.392 1.063-.235Z"/><path d="M32 64c17.673 0 32-14.327 32-32C64 14.327 49.673 0 32 0 14.327 0 0 14.327 0 32c0 17.673 14.327 32 32 32Zm.08-51c5.061.002 9.812 1.963 13.383 5.522 3.573 3.56 5.539 8.29 5.537 13.322-.004 10.382-8.493 18.83-18.92 18.83h-.008a18.968 18.968 0 0 1-9.042-2.292L13 51l2.684-9.758a18.718 18.718 0 0 1-2.525-9.413C13.162 21.445 21.65 13 32.079 13Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h64v64H0z"/></clipPath></defs></svg>

package/dist/collection/components/icon/svg/social-whatsapp-color.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M45.463 18.522c-3.572-3.56-8.322-5.52-13.383-5.522-10.43 0-18.918 8.446-18.921 18.828a18.718 18.718 0 0 0 2.525 9.414L13 51l10.03-2.618a18.968 18.968 0 0 0 9.042 2.291h.008c10.427 0 18.916-8.447 18.92-18.83.002-5.03-1.964-9.761-5.537-13.32v-.001ZM32.08 47.493h-.006c-2.822 0-5.59-.756-8.005-2.181l-.574-.34-5.953 1.554 1.589-5.775-.374-.593a15.555 15.555 0 0 1-2.404-8.329c.004-8.628 7.058-15.65 15.733-15.65 4.2.003 8.149 1.632 11.118 4.591a15.516 15.516 0 0 1 4.602 11.072c-.004 8.63-7.058 15.65-15.726 15.65v.001Zm8.626-11.72c-.473-.236-2.797-1.374-3.23-1.531-.435-.157-.75-.236-1.064.236-.315.47-1.221 1.53-1.497 1.844-.276.314-.552.353-1.024.117-.473-.235-1.996-.732-3.802-2.334-1.406-1.248-2.355-2.788-2.63-3.26-.276-.471-.03-.726.206-.96.213-.21.473-.55.71-.824.237-.274.315-.471.472-.785.158-.314.08-.588-.039-.824-.118-.235-1.063-2.551-1.457-3.493-.384-.917-.774-.793-1.064-.808-.276-.014-.59-.016-.906-.016-.316 0-.828.117-1.261.588-.434.472-1.655 1.61-1.655 3.925 0 2.315 1.694 4.553 1.93 4.868.237.314 3.335 5.066 8.077 7.104 1.127.485 2.008.775 2.695.992 1.132.358 2.163.307 2.978.186.908-.135 2.797-1.138 3.19-2.237.394-1.099.394-2.041.276-2.237-.118-.196-.433-.314-.906-.55v-.002Z" fill="#25D366"/></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M45.463 18.522c-3.572-3.56-8.322-5.52-13.383-5.522-10.43 0-18.918 8.446-18.921 18.828a18.718 18.718 0 0 0 2.525 9.414L13 51l10.03-2.618a18.968 18.968 0 0 0 9.042 2.291h.008c10.427 0 18.916-8.447 18.92-18.83.002-5.03-1.964-9.761-5.537-13.32v-.001ZM32.08 47.493h-.006c-2.822 0-5.59-.756-8.005-2.181l-.574-.34-5.953 1.554 1.589-5.775-.374-.593a15.555 15.555 0 0 1-2.404-8.329c.004-8.628 7.058-15.65 15.733-15.65 4.2.003 8.149 1.632 11.118 4.591a15.516 15.516 0 0 1 4.602 11.072c-.004 8.63-7.058 15.65-15.726 15.65v.001Zm8.626-11.72c-.473-.236-2.797-1.374-3.23-1.531-.435-.157-.75-.236-1.064.236-.315.47-1.221 1.53-1.497 1.844-.276.314-.552.353-1.024.117-.473-.235-1.996-.732-3.802-2.334-1.406-1.248-2.355-2.788-2.63-3.26-.276-.471-.03-.726.206-.96.213-.21.473-.55.71-.824.237-.274.315-.471.472-.785.158-.314.08-.588-.039-.824-.118-.235-1.063-2.551-1.457-3.493-.384-.917-.774-.793-1.064-.808-.276-.014-.59-.016-.906-.016-.316 0-.828.117-1.261.588-.434.472-1.655 1.61-1.655 3.925 0 2.315 1.694 4.553 1.93 4.868.237.314 3.335 5.066 8.077 7.104 1.127.485 2.008.775 2.695.992 1.132.358 2.163.307 2.978.186.908-.135 2.797-1.138 3.19-2.237.394-1.099.394-2.041.276-2.237-.118-.196-.433-.314-.906-.55v-.002Z" fill="#25D366"/></svg>

package/dist/collection/components/icon/svg/social-whatsapp-solid.svg CHANGED Viewed

	@@ -1 +1 @@
1	- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M45.463 18.522c-3.572-3.56-8.322-5.52-13.383-5.522-10.43 0-18.918 8.446-18.921 18.828a18.718 18.718 0 0 0 2.525 9.414L13 51l10.03-2.618a18.968 18.968 0 0 0 9.042 2.291h.008c10.427 0 18.916-8.447 18.92-18.83.002-5.03-1.964-9.761-5.537-13.32v-.001ZM32.08 47.493h-.006c-2.822 0-5.59-.756-8.005-2.181l-.574-.34-5.953 1.554 1.589-5.775-.374-.593a15.555 15.555 0 0 1-2.404-8.329c.004-8.628 7.058-15.65 15.733-15.65 4.2.003 8.149 1.632 11.118 4.591a15.516 15.516 0 0 1 4.602 11.072c-.004 8.63-7.058 15.65-15.726 15.65v.001Zm8.626-11.72c-.473-.236-2.797-1.374-3.23-1.531-.435-.157-.75-.236-1.064.236-.315.47-1.221 1.53-1.497 1.844-.276.314-.552.353-1.024.117-.473-.235-1.996-.732-3.802-2.334-1.406-1.248-2.355-2.788-2.63-3.26-.276-.471-.03-.726.206-.96.213-.21.473-.55.71-.824.237-.274.315-.471.472-.785.158-.314.08-.588-.039-.824-.118-.235-1.063-2.551-1.457-3.493-.384-.917-.774-.793-1.064-.808-.276-.014-.59-.016-.906-.016-.316 0-.828.117-1.261.588-.434.472-1.655 1.61-1.655 3.925 0 2.315 1.694 4.553 1.93 4.868.237.314 3.335 5.066 8.077 7.104 1.127.485 2.008.775 2.695.992 1.132.358 2.163.307 2.978.186.908-.135 2.797-1.138 3.19-2.237.394-1.099.394-2.041.276-2.237-.118-.196-.433-.314-.906-.55v-.002Z" /></svg>
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="M45.463 18.522c-3.572-3.56-8.322-5.52-13.383-5.522-10.43 0-18.918 8.446-18.921 18.828a18.718 18.718 0 0 0 2.525 9.414L13 51l10.03-2.618a18.968 18.968 0 0 0 9.042 2.291h.008c10.427 0 18.916-8.447 18.92-18.83.002-5.03-1.964-9.761-5.537-13.32v-.001ZM32.08 47.493h-.006c-2.822 0-5.59-.756-8.005-2.181l-.574-.34-5.953 1.554 1.589-5.775-.374-.593a15.555 15.555 0 0 1-2.404-8.329c.004-8.628 7.058-15.65 15.733-15.65 4.2.003 8.149 1.632 11.118 4.591a15.516 15.516 0 0 1 4.602 11.072c-.004 8.63-7.058 15.65-15.726 15.65v.001Zm8.626-11.72c-.473-.236-2.797-1.374-3.23-1.531-.435-.157-.75-.236-1.064.236-.315.47-1.221 1.53-1.497 1.844-.276.314-.552.353-1.024.117-.473-.235-1.996-.732-3.802-2.334-1.406-1.248-2.355-2.788-2.63-3.26-.276-.471-.03-.726.206-.96.213-.21.473-.55.71-.824.237-.274.315-.471.472-.785.158-.314.08-.588-.039-.824-.118-.235-1.063-2.551-1.457-3.493-.384-.917-.774-.793-1.064-.808-.276-.014-.59-.016-.906-.016-.316 0-.828.117-1.261.588-.434.472-1.655 1.61-1.655 3.925 0 2.315 1.694 4.553 1.93 4.868.237.314 3.335 5.066 8.077 7.104 1.127.485 2.008.775 2.695.992 1.132.358 2.163.307 2.978.186.908-.135 2.797-1.138 3.19-2.237.394-1.099.394-2.041.276-2.237-.118-.196-.433-.314-.906-.55v-.002Z"/></svg>

package/dist/collection/components/phone-number-input/interfaces/country.interface.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=country.interface.js.map

package/dist/collection/components/phone-number-input/interfaces/country.interface.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"country.interface.js","sourceRoot":"","sources":["../../../../src/components/phone-number-input/interfaces/country.interface.ts"],"names":[],"mappings":"","sourcesContent":["export type CountryType = {\n translations: { [key: string]: string },\n countryCode: string,\n phoneCode: string\n};\n\nexport interface CountryOption {\n value: string;\n label: string;\n selected: boolean;\n disabled: boolean;\n}\n"]}

package/dist/collection/components/phone-number-input/interfaces/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './phone.interface';
+export * from './country.interface';
+//# sourceMappingURL=index.js.map

package/dist/collection/components/phone-number-input/interfaces/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/phone-number-input/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './phone.interface';\nexport * from './country.interface';\n"]}

package/dist/collection/components/phone-number-input/interfaces/phone.interface.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=phone.interface.js.map

package/dist/collection/components/phone-number-input/interfaces/phone.interface.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"phone.interface.js","sourceRoot":"","sources":["../../../../src/components/phone-number-input/interfaces/phone.interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface PhoneReturnType {\n numberType: string;\n countryCode: string;\n nationalNumber: string;\n code: string;\n internationalNumber: string;\n}\n\nexport interface ReturnObject {\n isError: boolean;\n phone: PhoneReturnType;\n}\n"]}