@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.
- package/dist/cjs/index-12592729.js +4 -4
- package/dist/cjs/index-fb57f684.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js +114 -155
- package/dist/cjs/road-phone-number-input.cjs.entry.js.map +1 -1
- package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js +3 -2
- package/dist/cjs/road-progress-indicator-horizontal.cjs.entry.js.map +1 -1
- package/dist/cjs/road-rating.cjs.entry.js +5 -2
- package/dist/cjs/road-rating.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select.cjs.entry.js +17 -0
- package/dist/cjs/road-select.cjs.entry.js.map +1 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/global-navigation/global-navigation.stories.js +2 -1
- package/dist/collection/components/icon/svg/location-pin-outline-color.svg +1 -1
- package/dist/collection/components/icon/svg/social-whatsapp-badge.svg +1 -1
- package/dist/collection/components/icon/svg/social-whatsapp-color.svg +1 -1
- package/dist/collection/components/icon/svg/social-whatsapp-solid.svg +1 -1
- package/dist/collection/components/phone-number-input/interfaces/country.interface.js +2 -0
- package/dist/collection/components/phone-number-input/interfaces/country.interface.js.map +1 -0
- package/dist/collection/components/phone-number-input/interfaces/index.js +3 -0
- package/dist/collection/components/phone-number-input/interfaces/index.js.map +1 -0
- package/dist/collection/components/phone-number-input/interfaces/phone.interface.js +2 -0
- package/dist/collection/components/phone-number-input/interfaces/phone.interface.js.map +1 -0
- package/dist/collection/components/phone-number-input/phone-number-input.css +200 -1
- package/dist/collection/components/phone-number-input/phone-number-input.js +171 -229
- package/dist/collection/components/phone-number-input/phone-number-input.js.map +1 -1
- package/dist/collection/components/phone-number-input/phone-number-input.stories.js +30 -28
- package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js +21 -2
- package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js.map +1 -1
- package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.stories.js +12 -5
- package/dist/collection/components/rating/rating.css +4 -0
- package/dist/collection/components/rating/rating.js +40 -1
- package/dist/collection/components/rating/rating.js.map +1 -1
- package/dist/collection/components/rating/rating.stories.js +17 -0
- package/dist/collection/components/select/select.js +18 -1
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/select/select.stories.js +2 -2
- package/dist/esm/index-52302079.js +4 -4
- package/dist/esm/index-891decf5.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-phone-number-input.entry.js +114 -155
- package/dist/esm/road-phone-number-input.entry.js.map +1 -1
- package/dist/esm/road-progress-indicator-horizontal.entry.js +3 -2
- package/dist/esm/road-progress-indicator-horizontal.entry.js.map +1 -1
- package/dist/esm/road-rating.entry.js +5 -2
- package/dist/esm/road-rating.entry.js.map +1 -1
- package/dist/esm/road-select.entry.js +17 -0
- package/dist/esm/road-select.entry.js.map +1 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +28 -12
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.js +4 -4
- package/dist/roadtrip/{p-4f5e8cc2.entry.js → p-254ba3c4.entry.js} +2 -2
- package/dist/roadtrip/p-254ba3c4.entry.js.map +1 -0
- package/dist/roadtrip/p-73fe2357.js.map +1 -1
- package/dist/roadtrip/{p-995e1e53.entry.js → p-9173eb4b.entry.js} +2 -2
- package/dist/roadtrip/p-9173eb4b.entry.js.map +1 -0
- package/dist/roadtrip/{p-a2a9a650.entry.js → p-be8aee32.entry.js} +2 -2
- package/dist/roadtrip/p-be8aee32.entry.js.map +1 -0
- package/dist/roadtrip/p-cbc00bfb.entry.js +2 -0
- package/dist/roadtrip/p-cbc00bfb.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/roadtrip/svg/location-pin-outline-color.svg +1 -1
- package/dist/roadtrip/svg/social-whatsapp-badge.svg +1 -1
- package/dist/roadtrip/svg/social-whatsapp-color.svg +1 -1
- package/dist/roadtrip/svg/social-whatsapp-solid.svg +1 -1
- package/dist/types/components/phone-number-input/interfaces/country.interface.d.ts +13 -0
- package/dist/types/components/phone-number-input/interfaces/index.d.ts +2 -0
- package/dist/types/components/phone-number-input/interfaces/phone.interface.d.ts +11 -0
- package/dist/types/components/phone-number-input/phone-number-input.d.ts +41 -75
- package/dist/types/components/progress-indicator-horizontal/progress-indicator-horizontal.d.ts +4 -0
- package/dist/types/components/rating/rating.d.ts +8 -0
- package/dist/types/components/select/select.d.ts +2 -0
- package/dist/types/components.d.ts +75 -44
- package/hydrate/index.js +155 -170
- package/icons/icons.svg +1 -1
- package/icons/index.js +4 -4
- package/package.json +2 -2
- package/dist/roadtrip/p-39d1c90a.entry.js +0 -2
- package/dist/roadtrip/p-39d1c90a.entry.js.map +0 -1
- package/dist/roadtrip/p-4f5e8cc2.entry.js.map +0 -1
- package/dist/roadtrip/p-995e1e53.entry.js.map +0 -1
- package/dist/roadtrip/p-a2a9a650.entry.js.map +0 -1
|
@@ -8,32 +8,32 @@ export default {
|
|
|
8
8
|
component: 'road-phone-number-input',
|
|
9
9
|
argTypes: {
|
|
10
10
|
countryData: { control: 'object' },
|
|
11
|
-
language: {
|
|
12
|
-
control: {
|
|
13
|
-
type: 'select',
|
|
14
|
-
options: ['en', 'fr', 'es', 'pt', 'it', 'nl', 'de']
|
|
15
|
-
}
|
|
11
|
+
language: {
|
|
12
|
+
control: {
|
|
13
|
+
type: 'select',
|
|
14
|
+
options: ['en', 'fr', 'es', 'pt', 'it', 'nl', 'de']
|
|
15
|
+
}
|
|
16
16
|
},
|
|
17
17
|
required: {
|
|
18
18
|
control: 'boolean',
|
|
19
19
|
},
|
|
20
|
-
|
|
20
|
+
disabled: {
|
|
21
|
+
control: 'boolean',
|
|
22
|
+
},
|
|
23
|
+
'country-code': {
|
|
21
24
|
control: 'text',
|
|
22
25
|
},
|
|
23
|
-
|
|
26
|
+
'code-label': {
|
|
24
27
|
control: 'text',
|
|
25
28
|
},
|
|
26
|
-
|
|
29
|
+
'phone-label': {
|
|
27
30
|
control: 'text',
|
|
28
31
|
},
|
|
29
|
-
|
|
32
|
+
'phone-value': {
|
|
30
33
|
control: 'text',
|
|
31
34
|
},
|
|
32
|
-
|
|
33
|
-
control:
|
|
34
|
-
type: 'select',
|
|
35
|
-
options: ['MOBILE', 'FIXED_LINE', 'FIXED_LINE_OR_MOBILE']
|
|
36
|
-
}
|
|
35
|
+
'error-message': {
|
|
36
|
+
control: 'text',
|
|
37
37
|
},
|
|
38
38
|
},
|
|
39
39
|
args: {
|
|
@@ -547,26 +547,28 @@ export default {
|
|
|
547
547
|
"phoneCode": "44"
|
|
548
548
|
}
|
|
549
549
|
],
|
|
550
|
-
|
|
551
|
-
|
|
550
|
+
'code-label': 'Indicatif',
|
|
551
|
+
'country-code': 'FR',
|
|
552
552
|
language: 'fr',
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
553
|
+
'phone-label': 'Phone Number',
|
|
554
|
+
'phone-value': '0645362719',
|
|
555
|
+
'error-message': '',
|
|
556
|
+
disabled: false,
|
|
556
557
|
},
|
|
557
558
|
};
|
|
558
559
|
|
|
559
560
|
const Template = (args) => html`
|
|
560
561
|
<road-phone-number-input
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
562
|
+
required="${ifDefined(args.required)}"
|
|
563
|
+
disabled="${ifDefined(args.disabled)}"
|
|
564
|
+
.countryData=${args.countryData}
|
|
565
|
+
language=${args.language}
|
|
566
|
+
code-label=${args['code-label']}
|
|
567
|
+
code-value=${args['code-value']}
|
|
568
|
+
phone-label=${args['phone-label']}
|
|
569
|
+
country-code=${args['country-code']}
|
|
570
|
+
phone-value=${args['phone-value']}
|
|
571
|
+
error-message=${args['error-message']}
|
|
570
572
|
>
|
|
571
573
|
</road-phone-number-input>
|
|
572
574
|
`;
|
package/dist/collection/components/progress-indicator-horizontal/progress-indicator-horizontal.js
CHANGED
|
@@ -13,6 +13,7 @@ import { Host, h } from "@stencil/core";
|
|
|
13
13
|
export class Stepper {
|
|
14
14
|
constructor() {
|
|
15
15
|
this.color = 'default';
|
|
16
|
+
this.numberStep = 3;
|
|
16
17
|
this.stateFirstStep = undefined;
|
|
17
18
|
this.stateSecondStep = undefined;
|
|
18
19
|
this.stateThirdStep = undefined;
|
|
@@ -24,11 +25,11 @@ export class Stepper {
|
|
|
24
25
|
const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';
|
|
25
26
|
const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';
|
|
26
27
|
const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';
|
|
27
|
-
const stateThirdStepClass = this.
|
|
28
|
+
const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';
|
|
28
29
|
const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';
|
|
29
30
|
const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';
|
|
30
31
|
const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';
|
|
31
|
-
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" }))))))));
|
|
32
|
+
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" }))))))));
|
|
32
33
|
}
|
|
33
34
|
static get is() { return "road-progress-indicator-horizontal"; }
|
|
34
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -62,6 +63,24 @@ export class Stepper {
|
|
|
62
63
|
"reflect": true,
|
|
63
64
|
"defaultValue": "'default'"
|
|
64
65
|
},
|
|
66
|
+
"numberStep": {
|
|
67
|
+
"type": "number",
|
|
68
|
+
"mutable": false,
|
|
69
|
+
"complexType": {
|
|
70
|
+
"original": "3 | 2",
|
|
71
|
+
"resolved": "2 | 3 | undefined",
|
|
72
|
+
"references": {}
|
|
73
|
+
},
|
|
74
|
+
"required": false,
|
|
75
|
+
"optional": true,
|
|
76
|
+
"docs": {
|
|
77
|
+
"tags": [],
|
|
78
|
+
"text": "The nombre of steps."
|
|
79
|
+
},
|
|
80
|
+
"attribute": "number-step",
|
|
81
|
+
"reflect": false,
|
|
82
|
+
"defaultValue": "3"
|
|
83
|
+
},
|
|
65
84
|
"stateFirstStep": {
|
|
66
85
|
"type": "string",
|
|
67
86
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-indicator-horizontal.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,OAAO;;iBAKwC,SAAS;;;;;;;;
|
|
1
|
+
{"version":3,"file":"progress-indicator-horizontal.js","sourceRoot":"","sources":["../../../src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,OAAO;;iBAKwC,SAAS;sBAKpC,CAAC;;;;;;;;EAiC7B,MAAM;IAEJ,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,+DAA+D,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,+BAA+B,CAAC;IAC5J,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IAC1J,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACtK,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,sCAAsC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,oCAAoC,CAAC;IACnK,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAExE,OAAO,CACL,EAAC,IAAI;MACH;QACK,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;UAC1B,UAAI,KAAK,EAAE,GAAG,UAAU,EAAE;YACxB,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,oCAAoC,GAAE,CAC5C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C,CACL,CACD;UACL,UAAI,KAAK,EAAE,GAAG,oBAAoB,EAAE;YACnC,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD;UACJ,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,UAAI,KAAK,EAAE,GAAG,mBAAmB,EAAE;YAC1D,SAAG,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,GAAG,QAAQ,EAAE;cAC/D,YAAM,KAAK,EAAC,oCAAoC;gBAC9C,YAAM,IAAI,EAAC,qCAAqC,GAAE,CAC7C;cACP,YAAM,KAAK,EAAC,qCAAqC;gBAC/C,YAAM,IAAI,EAAC,sCAAsC,GAAE,CAC9C,CACL,CACD,CAEF,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEL","sourcesContent":["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"]}
|
|
@@ -12,6 +12,12 @@ export default {
|
|
|
12
12
|
type: 'select',
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
|
+
'number-step': {
|
|
16
|
+
options: [3, 2],
|
|
17
|
+
control: {
|
|
18
|
+
type: 'select',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
15
21
|
'state-first-step': {
|
|
16
22
|
options: ['default', 'current', 'completed'],
|
|
17
23
|
control: {
|
|
@@ -51,6 +57,7 @@ export default {
|
|
|
51
57
|
},
|
|
52
58
|
args: {
|
|
53
59
|
color: 'default',
|
|
60
|
+
'number-step': 3,
|
|
54
61
|
'state-first-step': 'default',
|
|
55
62
|
'state-second-step': 'default',
|
|
56
63
|
'state-third-step': 'default',
|
|
@@ -64,7 +71,7 @@ export default {
|
|
|
64
71
|
};
|
|
65
72
|
|
|
66
73
|
export const Template = (args) => html`
|
|
67
|
-
<road-progress-indicator-horizontal color="${ifDefined(args.color)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
|
|
74
|
+
<road-progress-indicator-horizontal color="${ifDefined(args.color)}" number-step="${ifDefined(args['number-step'])}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
|
|
68
75
|
<div slot="progress-indicator-horizontal-icon">
|
|
69
76
|
${unsafeHTML(args['progress-indicator-horizontal-icon'])}
|
|
70
77
|
</div>
|
|
@@ -87,7 +94,7 @@ export const Template = (args) => html`
|
|
|
87
94
|
`;
|
|
88
95
|
|
|
89
96
|
export const withoutlabel = (args) => html`
|
|
90
|
-
<road-progress-indicator-horizontal color="${ifDefined(args.color)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
|
|
97
|
+
<road-progress-indicator-horizontal color="${ifDefined(args.color)}" number-step="${ifDefined(args['number-step'])}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
|
|
91
98
|
<div slot="progress-indicator-horizontal-icon">
|
|
92
99
|
${unsafeHTML(args['progress-indicator-horizontal-icon'])}
|
|
93
100
|
</div>
|
|
@@ -101,7 +108,7 @@ export const withoutlabel = (args) => html`
|
|
|
101
108
|
`;
|
|
102
109
|
|
|
103
110
|
export const primary = (args) => html`
|
|
104
|
-
<road-progress-indicator-horizontal color="default" state-first-step="current" state-second-step="default" state-third-step="default">
|
|
111
|
+
<road-progress-indicator-horizontal color="default" number-step="${ifDefined(args['number-step'])}" state-first-step="current" state-second-step="default" state-third-step="default">
|
|
105
112
|
<div slot="progress-indicator-horizontal-icon">
|
|
106
113
|
${unsafeHTML(args['progress-indicator-horizontal-icon'])}
|
|
107
114
|
</div>
|
|
@@ -124,7 +131,7 @@ export const primary = (args) => html`
|
|
|
124
131
|
`;
|
|
125
132
|
|
|
126
133
|
export const header = (args) => html`
|
|
127
|
-
<road-progress-indicator-horizontal color="header" state-first-step="current" state-second-step="default" state-third-step="default">
|
|
134
|
+
<road-progress-indicator-horizontal color="header" number-step="${ifDefined(args['number-step'])}" state-first-step="current" state-second-step="default" state-third-step="default">
|
|
128
135
|
<div slot="progress-indicator-horizontal-icon">
|
|
129
136
|
${unsafeHTML(args['progress-indicator-horizontal-icon'])}
|
|
130
137
|
</div>
|
|
@@ -147,7 +154,7 @@ export const header = (args) => html`
|
|
|
147
154
|
`;
|
|
148
155
|
|
|
149
156
|
export const stepcompleted = (args) => html`
|
|
150
|
-
<road-progress-indicator-horizontal color="header" state-first-step="completed" state-second-step="current" state-third-step="default">
|
|
157
|
+
<road-progress-indicator-horizontal color="header" number-step="${ifDefined(args['number-step'])}" state-first-step="completed" state-second-step="current" state-third-step="default">
|
|
151
158
|
<div slot="progress-indicator-horizontal-icon">
|
|
152
159
|
<road-icon name="check-small" class="d-block" color="default"></road-icon>
|
|
153
160
|
</div>
|
|
@@ -5,15 +5,18 @@ export class Rating {
|
|
|
5
5
|
this.size = 'medium';
|
|
6
6
|
this.rate = 0;
|
|
7
7
|
this.showreviews = true;
|
|
8
|
+
this.readonly = false;
|
|
8
9
|
this.reviews = 0;
|
|
9
10
|
this.reviewsText = 'reviews';
|
|
11
|
+
this.url = '#';
|
|
10
12
|
}
|
|
11
13
|
render() {
|
|
12
14
|
const rate = Math.floor(this.rate);
|
|
13
15
|
const rateDecimale = this.rate - Math.floor(this.rate) > 0 ? 1 : 0;
|
|
14
16
|
const sizeRatingStarsClass = this.size !== undefined ? `rating-stars rating-stars--${this.size}` : 'rating-stars';
|
|
15
17
|
const sizeRatingNumberClass = this.size !== undefined ? `rating-number rating-number--${this.size}` : 'rating-number';
|
|
16
|
-
|
|
18
|
+
const readOnly = this.readonly == true ? `readonly` : '';
|
|
19
|
+
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}`, ")")));
|
|
17
20
|
}
|
|
18
21
|
static get is() { return "road-rating"; }
|
|
19
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -83,6 +86,24 @@ export class Rating {
|
|
|
83
86
|
"reflect": false,
|
|
84
87
|
"defaultValue": "true"
|
|
85
88
|
},
|
|
89
|
+
"readonly": {
|
|
90
|
+
"type": "boolean",
|
|
91
|
+
"mutable": false,
|
|
92
|
+
"complexType": {
|
|
93
|
+
"original": "boolean",
|
|
94
|
+
"resolved": "boolean",
|
|
95
|
+
"references": {}
|
|
96
|
+
},
|
|
97
|
+
"required": false,
|
|
98
|
+
"optional": false,
|
|
99
|
+
"docs": {
|
|
100
|
+
"tags": [],
|
|
101
|
+
"text": "Read Only"
|
|
102
|
+
},
|
|
103
|
+
"attribute": "readonly",
|
|
104
|
+
"reflect": false,
|
|
105
|
+
"defaultValue": "false"
|
|
106
|
+
},
|
|
86
107
|
"reviews": {
|
|
87
108
|
"type": "number",
|
|
88
109
|
"mutable": false,
|
|
@@ -118,6 +139,24 @@ export class Rating {
|
|
|
118
139
|
"attribute": "reviews-text",
|
|
119
140
|
"reflect": false,
|
|
120
141
|
"defaultValue": "'reviews'"
|
|
142
|
+
},
|
|
143
|
+
"url": {
|
|
144
|
+
"type": "string",
|
|
145
|
+
"mutable": false,
|
|
146
|
+
"complexType": {
|
|
147
|
+
"original": "string",
|
|
148
|
+
"resolved": "string",
|
|
149
|
+
"references": {}
|
|
150
|
+
},
|
|
151
|
+
"required": false,
|
|
152
|
+
"optional": false,
|
|
153
|
+
"docs": {
|
|
154
|
+
"tags": [],
|
|
155
|
+
"text": "Url."
|
|
156
|
+
},
|
|
157
|
+
"attribute": "url",
|
|
158
|
+
"reflect": false,
|
|
159
|
+
"defaultValue": "'#'"
|
|
121
160
|
}
|
|
122
161
|
};
|
|
123
162
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAOrD,MAAM,OAAO,MAAM;;gBAKqC,QAAQ;gBAKvC,CAAC;uBAKO,IAAI;
|
|
1
|
+
{"version":3,"file":"rating.js","sourceRoot":"","sources":["../../../src/components/rating/rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAOrD,MAAM,OAAO,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,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,8BAA8B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;IAClH,MAAM,qBAAqB,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,gCAAgC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC;IACtH,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAGzD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,GAAG,oBAAoB,EAAE;QAClC,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CACzB,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAa,CAC9D;QACA,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CACjC,iBAAW,IAAI,EAAE,aAAa,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAC3E;QACA,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAC5C,iBAAW,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAa,CAClE,CACG;MACL,IAAI,CAAC,QAAQ,IAAI,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAE,GAAG,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG;;QAAI,IAAI,CAAC,OAAO;QAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;YAAM;MACpK,IAAI,CAAC,QAAQ,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW,IAAI,kBAAY,KAAK,EAAE,GAAG,qBAAqB,IAAI,QAAQ,EAAE;;QAAI,IAAI,CAAC,OAAO;QAAE,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;YAAe,CAE7K,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
|
|
@@ -30,6 +30,12 @@ export default {
|
|
|
30
30
|
'reviews-text': {
|
|
31
31
|
control: 'text',
|
|
32
32
|
},
|
|
33
|
+
url: {
|
|
34
|
+
control: 'text',
|
|
35
|
+
},
|
|
36
|
+
readonly: {
|
|
37
|
+
control: 'boolean',
|
|
38
|
+
},
|
|
33
39
|
},
|
|
34
40
|
args: {
|
|
35
41
|
size: null,
|
|
@@ -43,6 +49,8 @@ const Template = (args) => html`
|
|
|
43
49
|
reviews-text="${ifDefined(args['reviews-text'])}"
|
|
44
50
|
size="${ifDefined(args.size)}"
|
|
45
51
|
showreviews="${ifDefined(args.showreviews)}"
|
|
52
|
+
readonly="${ifDefined(args.readonly)}"
|
|
53
|
+
url="${ifDefined(args.url)}"
|
|
46
54
|
></road-rating>
|
|
47
55
|
`;
|
|
48
56
|
|
|
@@ -52,6 +60,7 @@ Playground.args = {
|
|
|
52
60
|
reviews: 5,
|
|
53
61
|
'reviews-text': 'reviews',
|
|
54
62
|
showreviews:'true',
|
|
63
|
+
url:'#'
|
|
55
64
|
};
|
|
56
65
|
|
|
57
66
|
export const Rating = Template.bind({});
|
|
@@ -72,3 +81,11 @@ LightRating.args = {
|
|
|
72
81
|
reviews: 50,
|
|
73
82
|
showreviews:'false',
|
|
74
83
|
};
|
|
84
|
+
|
|
85
|
+
export const ReadOnly = Template.bind({});
|
|
86
|
+
ReadOnly.args = {
|
|
87
|
+
rate: 5,
|
|
88
|
+
reviews: 50,
|
|
89
|
+
showreviews:'true',
|
|
90
|
+
readonly:'true',
|
|
91
|
+
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { Host, h } from "@stencil/core";
|
|
1
|
+
import { Host, h, } from "@stencil/core";
|
|
2
2
|
export class Select {
|
|
3
3
|
constructor() {
|
|
4
4
|
this.onChange = (ev) => {
|
|
5
5
|
const select = ev.target;
|
|
6
6
|
if (select) {
|
|
7
7
|
this.value = select.value || '';
|
|
8
|
+
this.value = this.addSelected();
|
|
8
9
|
}
|
|
9
10
|
};
|
|
10
11
|
this.onBlur = () => {
|
|
@@ -34,6 +35,22 @@ export class Select {
|
|
|
34
35
|
this.roadChange.emit({
|
|
35
36
|
value: this.value,
|
|
36
37
|
});
|
|
38
|
+
this.value = this.addSelected();
|
|
39
|
+
}
|
|
40
|
+
componentWillLoad() {
|
|
41
|
+
this.value = this.addSelected();
|
|
42
|
+
}
|
|
43
|
+
addSelected() {
|
|
44
|
+
var _a, _b;
|
|
45
|
+
const selectedOption = this.options.find(option => option.value === this.value);
|
|
46
|
+
const selectedOption2 = this.options.find(option => option.selected);
|
|
47
|
+
if (selectedOption) {
|
|
48
|
+
selectedOption.selected = true;
|
|
49
|
+
}
|
|
50
|
+
if (selectedOption2) {
|
|
51
|
+
selectedOption2.selected = false;
|
|
52
|
+
}
|
|
53
|
+
return (_b = (_a = this.options.find(option => option.value === this.value)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
|
|
37
54
|
}
|
|
38
55
|
render() {
|
|
39
56
|
const labelId = this.selectId + '-label';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /**\n * The id of select\n */\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /**\n * List of options of the select\n */\n @Prop() options: Array<{\n value: string | number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n */\n @Prop() size: number = 0;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.selectId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value?: any | null;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n 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"]}
|
|
@@ -95,11 +95,11 @@ export const Playground = Template.bind({});
|
|
|
95
95
|
export const WithValue = Template.bind({});
|
|
96
96
|
WithValue.args = {
|
|
97
97
|
options: [
|
|
98
|
-
{ value: 'value1', label: 'Value1'
|
|
98
|
+
{ value: 'value1', label: 'Value1' },
|
|
99
99
|
{ value: 'value2', label: 'Value2' },
|
|
100
100
|
{ value: 'value3', label: 'Value3' }
|
|
101
101
|
],
|
|
102
|
-
value: '
|
|
102
|
+
value: 'value2',
|
|
103
103
|
};
|
|
104
104
|
|
|
105
105
|
export const Disabled = Template.bind({});
|
|
@@ -2617,6 +2617,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
2617
2617
|
return import(
|
|
2618
2618
|
/* webpackMode: "lazy" */
|
|
2619
2619
|
'./road-alert.entry.js').then(processMod, consoleError);
|
|
2620
|
+
case 'road-area-code':
|
|
2621
|
+
return import(
|
|
2622
|
+
/* webpackMode: "lazy" */
|
|
2623
|
+
'./road-area-code.entry.js').then(processMod, consoleError);
|
|
2620
2624
|
case 'road-autocomplete':
|
|
2621
2625
|
return import(
|
|
2622
2626
|
/* webpackMode: "lazy" */
|
|
@@ -2825,10 +2829,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
2825
2829
|
return import(
|
|
2826
2830
|
/* webpackMode: "lazy" */
|
|
2827
2831
|
'./road-tooltip.entry.js').then(processMod, consoleError);
|
|
2828
|
-
case 'road-area-code':
|
|
2829
|
-
return import(
|
|
2830
|
-
/* webpackMode: "lazy" */
|
|
2831
|
-
'./road-area-code.entry.js').then(processMod, consoleError);
|
|
2832
2832
|
case 'road-avatar':
|
|
2833
2833
|
return import(
|
|
2834
2834
|
/* webpackMode: "lazy" */
|