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/esm/road-progress-indicator-horizontal.entry.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"file":"road-progress-indicator-horizontal.entry.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,QACE,EAAC,IAAI,QACH,eACE,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IACjC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CACF,CACD,CACD,EACP;GACH;;;;;;","names":[],"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.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,QACE,EAAC,IAAI,QACH,eACK,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IAC1B,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE,IACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD,EACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE,IACnC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,EACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE,IAC1D,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE,IAC/D,YAAM,KAAK,EAAC,oCAAoC,IAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,EACP,YAAM,KAAK,EAAC,qCAAqC,IAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,EACP;GACH;;;;;;","names":[],"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/esm/road-rating.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-52302079.js';
 import { s as star, j as starHalfColor } from './index-891decf5.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) {
@@ -9,15 +9,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 (h(Host, null, h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.showreviews && h("a", { class: `${sizeRatingNumberClass}`, href: "#" }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
+    const readOnly = this.readonly == true ? `readonly` : '';
+    return (h(Host, null, h("div", { class: `${sizeRatingStarsClass}` }, [...Array(rate)].map(() => h("road-icon", { icon: star, size: "sm", color: "warning" })), [...Array(rateDecimale)].map(() => h("road-icon", { icon: starHalfColor, size: "sm", class: "rating-star" })), [...Array(5 - rate - rateDecimale)].map(() => h("road-icon", { icon: star, size: "sm", class: "rating-star" }))), this.readonly == false && this.showreviews && h("a", { class: `${sizeRatingNumberClass}`, href: this.url }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")"), this.readonly == true && this.showreviews && h("road-label", { class: `${sizeRatingNumberClass} ${readOnly}` }, "(", this.reviews, this.reviewsText && ` ${this.reviewsText}`, ")")));
   }
 };
 Rating.style = ratingCss;

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

	@@ -1 +1 @@
1	- {"file":"road-rating.entry.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~~,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpB,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5B,iBAAW,IAAI,EAAE,aAAa,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,MACvC,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,WAAW,IAAI,SAAG,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":[],"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.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,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE,IAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,MACpB,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D,EACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,MAC5B,iBAAW,IAAI,EAAE,aAAa,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,MACvC,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG,EACL,IAAI,CAAC,QAAQ,IAAI,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,SAAG,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,IAAI,kBAAY,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":[],"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/esm/road-select.entry.js CHANGED Viewed

@@ -15,6 +15,7 @@ const Select = class {
       const select = ev.target;
       if (select) {
         this.value = select.value || '';
+        this.value = this.addSelected();
       }
     };
     this.onBlur = () => {
@@ -44,6 +45,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/esm/road-select.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-select.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4zIAA4zI;;MCOj0I,MAAM;;;;;;;;;IAiGT,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;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;oBA3GyB,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;GACJ;EAmBD,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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE,IAC/C,cACE,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,IAEnB,cAAQ,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,KACtC,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAChF,CAAC,CACK,EACT,aAAO,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,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC3E,EACP;GACH;;;;;AAIH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":[],"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.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,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE,IAC/C,cACE,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,IAEnB,cAAQ,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,KACtC,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAG,MAAM,CAAC,KAAK,CAAU,CAChF,CAAC,CACK,EACT,aAAO,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,IAAI,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC3E,EACP;GACH;;;;;AAIH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":[],"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/esm/roadtrip.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[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\",[[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\",[[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\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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\",[[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\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal\",[[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\",[[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\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[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\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[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\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[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\",[[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\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[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\",[[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\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[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\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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\",[[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\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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\",[[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\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[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\",[[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\",[[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\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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\",[[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\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal\",[[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\",[[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\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code\",[[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\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[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\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[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\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[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\",[[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\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[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\",[[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\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[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\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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\",[[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\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
 });
 //# sourceMappingURL=roadtrip.js.map

package/dist/html.html-data.json CHANGED Viewed

@@ -1819,32 +1819,36 @@
       },
       "attributes": [
         {
-          "name": "area-label",
-          "description": "The label display in the select area"
+          "name": "code-label",
+          "description": "Country selection placeHolder"
         },
         {
-          "name": "area-value",
-          "description": "The indicatif display in the select area"
+          "name": "country-code",
+          "description": "Selected country code"
         },
         {
-          "name": "input-label",
-          "description": "The label display in the input"
+          "name": "disabled",
+          "description": "Disable both fields"
         },
         {
-          "name": "input-value",
-          "description": "The value of the input"
+          "name": "error-message",
+          "description": "Error message (displayed only if ther is a message)"
         },
         {
           "name": "language",
-          "description": "The translation language of the countries"
+          "description": "Used to display countries with the right language"
+        },
+        {
+          "name": "phone-label",
+          "description": "Phone input placeHolder"
         },
         {
-          "name": "number-type",
-          "description": "Type of the phone number : FIXED_LINE, MOBILE"
+          "name": "phone-value",
+          "description": "Value displayed in the phone input"
         },
         {
           "name": "required",
-          "description": "If `true`, the user must fill in a value before submitting a form."
+          "description": "Add a star in the phone input"
         }
       ],
       "references": [
@@ -2038,6 +2042,10 @@
             }
           ]
         },
+        {
+          "name": "number-step",
+          "description": "The nombre of steps."
+        },
         {
           "name": "state-first-step",
           "description": "The color of the first step.",
@@ -2323,6 +2331,10 @@
           "name": "rate",
           "description": "Rate review between 0 and 5"
         },
+        {
+          "name": "readonly",
+          "description": "Read Only"
+        },
         {
           "name": "reviews",
           "description": "number of reviews"
@@ -2346,6 +2358,10 @@
               "name": "small"
             }
           ]
+        },
+        {
+          "name": "url",
+          "description": "Url."
         }
       ],
       "references": [