@roadtrip/components 3.13.1 → 3.13.3
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-fb57f684.js.map +1 -1
- package/dist/cjs/road-select.cjs.entry.js +11 -6
- package/dist/cjs/road-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/icon/svg/funding-refused-color.svg +1 -0
- package/dist/collection/components/icon/svg/funding-refused-outline.svg +1 -0
- package/dist/collection/components/icon/svg/funding-refused-solid.svg +1 -0
- package/dist/collection/components/icon/svg/windscreen-frost-winter-color.svg +1 -1
- package/dist/collection/components/icon/svg/windscreen-frost-winter-outline.svg +1 -1
- package/dist/collection/components/select/select.js +11 -6
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/esm/index-891decf5.js.map +1 -1
- package/dist/esm/road-select.entry.js +11 -6
- package/dist/esm/road-select.entry.js.map +1 -1
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.d.ts +3 -0
- package/dist/icons/index.js +5 -2
- package/dist/roadtrip/p-73fe2357.js.map +1 -1
- package/dist/roadtrip/{p-869a3d78.entry.js → p-a44a569a.entry.js} +2 -2
- package/dist/roadtrip/p-a44a569a.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/svg/funding-refused-color.svg +1 -0
- package/dist/roadtrip/svg/funding-refused-outline.svg +1 -0
- package/dist/roadtrip/svg/funding-refused-solid.svg +1 -0
- package/dist/roadtrip/svg/windscreen-frost-winter-color.svg +1 -1
- package/dist/roadtrip/svg/windscreen-frost-winter-outline.svg +1 -1
- package/hydrate/index.js +11 -6
- package/icons/icons.svg +1 -1
- package/icons/index.d.ts +3 -0
- package/icons/index.js +5 -2
- package/package.json +1 -1
- package/dist/roadtrip/p-869a3d78.entry.js.map +0 -1
|
@@ -55,16 +55,21 @@ const Select = class {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
addSelected() {
|
|
58
|
-
var _a
|
|
59
|
-
|
|
58
|
+
var _a;
|
|
59
|
+
// Recherche de l'option correspondant à la valeur actuelle
|
|
60
|
+
const selectedOption = this.options.find(option => option.value == this.value);
|
|
61
|
+
// Recherche de l'option actuellement sélectionnée
|
|
60
62
|
const selectedOption2 = this.options.find(option => option.selected);
|
|
61
|
-
|
|
62
|
-
selectedOption.selected = true;
|
|
63
|
-
}
|
|
63
|
+
// Désélection de l'option actuellement sélectionnée
|
|
64
64
|
if (selectedOption2) {
|
|
65
65
|
selectedOption2.selected = false;
|
|
66
66
|
}
|
|
67
|
-
|
|
67
|
+
// Sélection de la nouvelle option
|
|
68
|
+
if (selectedOption) {
|
|
69
|
+
selectedOption.selected = true;
|
|
70
|
+
}
|
|
71
|
+
// Retourne la valeur de l'option sélectionnée (ou une chaîne vide si aucune option n'est sélectionnée)
|
|
72
|
+
return (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _a !== void 0 ? _a : '';
|
|
68
73
|
}
|
|
69
74
|
render() {
|
|
70
75
|
const labelId = this.selectId + '-label';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-select:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n min-height: 3.5rem;\n padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n min-height: 2.5rem;\n padding: 1rem 1rem 0;\n font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /**\n * The id of select\n */\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /**\n * List of options of the select\n */\n @Prop() options: Array<{\n value: string | number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n */\n @Prop() size: number = 0;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.selectId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value?: any | null;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n\n componentWillLoad() {\n if(this.value){\n this.addSelected();\n }\n }\n \n addSelected() {\n const selectedOption = this.options.find(option => option.value === this.value);\n const selectedOption2 = this.options.find(option => option.selected);\n\n if (selectedOption) {\n selectedOption.selected = true;\n }\n if(selectedOption2){\n selectedOption2.selected = false\n }\n \n\n return this.options.find(option => option.value === this.value)?.value ?? '';\n\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement | null;\n if (select) {\n this.value = select.value || '';\n }\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const labelId = this.selectId + '-label';\n const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host class={this.sizes && `select-${this.sizes}`}>\n <select\n class={`form-select ${hasValueClass} ${isInvalidClass}`}\n id={this.selectId}\n aria-disabled={this.disabled ? 'true' : null}\n autoFocus={this.autofocus}\n disabled={this.disabled}\n name={this.name}\n required={this.required}\n size={this.size}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <option selected disabled hidden style={{ display: 'none' }} value=\"\"></option>\n {this.options && this.options.map(option => (\n <option value={option.value} selected={option.selected}>{option.label}</option>\n ))}\n </select>\n <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"],"version":3}
|
|
1
|
+
{"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/*\n * Select\n *\n * Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n */\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/* SELECT\n -------------------- */\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { /* IE fix remove native arrow */\n display: none;\n}\n\n/**\n * Placeholder\n */\n\n.form-select::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-select:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/**\n * Focus state\n */\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-select:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n outline: 0;\n}\n\n/**\n * Disabled state\n */\n\n.form-select:disabled,\n.form-select[readonly] {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n background-color: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/* LABEL\n -------------------- */\n\n.form-select-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-label-medium);\n line-height: 1.5;\n color: var(--road-on-surface-extra-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n.form-select:required ~ .form-select-label::after{\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n/* SIZES\n -------------------- */\n\n:host(.select-xl) .form-select {\n min-height: 3.5rem;\n padding: 1rem 1rem 0;\n}\n\n:host(.select-xl) .form-select-label {\n top: 1rem;\n}\n\n:host(.select-xl) .form-select:focus ~ .form-select-label,\n:host(.select-xl) .form-select[required]:valid ~ .form-select-label,\n:host(.select-xl) .form-select.has-value ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-xl) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-xl) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-lg) .form-select {\n min-height: 3rem;\n}\n\n:host(.select-md) .form-select {\n min-height: 2.5rem;\n padding: 1rem 1rem 0;\n font-size: var(--road-body-small);\n}\n\n:host(.select-md) .form-select-label {\n top: 0.5rem;\n}\n\n:host(.select-md) .form-select:focus ~ .form-select-label,\n:host(.select-md) .form-select[required]:valid ~ .form-select-label,\n:host(.select-md) .form-select.has-value ~ .form-select-label,\n:host(.select-md) .form-select[type=\"date\"] ~ .form-select-label,\n:host(.select-md) .form-select[type=\"time\"] ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.select-md) .form-select:placeholder-shown ~ .form-select-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid,\n.was-validated .form-select:invalid {\n border-color: var(--road-on-danger-surface);\n}\n\n.form-select.is-invalid ~ .invalid-feedback,\n.was-validated .form-select:invalid ~ .invalid-feedback {\n display: block;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /**\n * The id of select\n */\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /**\n * List of options of the select\n */\n @Prop() options: Array<{\n value: string | number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n */\n @Prop() size: number = 0;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.selectId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value?: any | null;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n\n componentWillLoad() {\n if(this.value){\n this.addSelected();\n }\n }\n \n addSelected() {\n // Recherche de l'option correspondant à la valeur actuelle\n const selectedOption = this.options.find(option => option.value == this.value);\n \n // Recherche de l'option actuellement sélectionnée\n const selectedOption2 = this.options.find(option => option.selected);\n \n // Désélection de l'option actuellement sélectionnée\n if (selectedOption2) {\n selectedOption2.selected = false;\n }\n \n // Sélection de la nouvelle option\n if (selectedOption) {\n selectedOption.selected = true;\n }\n \n // Retourne la valeur de l'option sélectionnée (ou une chaîne vide si aucune option n'est sélectionnée)\n return selectedOption?.value ?? '';\n }\n \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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.572 47.57a10.2 10.2 0 0 1-10.38-10v-1.026h10.38v-2.5h-10.38V29.47h10.38v-2.5h-10.38v-1.027a10.2 10.2 0 0 1 10.38-9.995c6.015 0 10.38 3.783 10.38 8.995h2.5c0-6.661-5.417-11.495-12.88-11.495a12.706 12.706 0 0 0-12.88 12.495v1.027h-4.276v2.5h4.276v4.581h-4.276v2.5h4.276v1.026a12.706 12.706 0 0 0 12.88 12.5 12.708 12.708 0 0 0 12.88-12.5h-2.5a10.205 10.205 0 0 1-10.38 9.993Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.576 52.923A29.282 29.282 0 0 0 32.25 61.5a29.284 29.284 0 0 0 19.77-7.712l6.096 6.096 1.768-1.768-6.096-6.096A29.284 29.284 0 0 0 61.5 32.25 29.284 29.284 0 0 0 32.25 3a29.283 29.283 0 0 0-19.77 7.712L5.884 4.116 4.116 5.884l6.596 6.595A29.283 29.283 0 0 0 3 32.25a29.282 29.282 0 0 0 8.576 20.673Zm.904-38.675A26.78 26.78 0 0 0 5.5 32.25 26.78 26.78 0 0 0 32.25 59a26.78 26.78 0 0 0 18.002-6.98L12.48 14.248Zm1.768-1.768L52.02 50.252A26.78 26.78 0 0 0 59 32.25 26.78 26.78 0 0 0 32.25 5.5a26.78 26.78 0 0 0-18.002 6.98Z" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32.572 47.57a10.2 10.2 0 0 1-10.38-10v-1.026h10.38v-2.5h-10.38V29.47h10.38v-2.5h-10.38v-1.027a10.2 10.2 0 0 1 10.38-9.995c6.015 0 10.38 3.783 10.38 8.995h2.5c0-6.661-5.417-11.495-12.88-11.495a12.706 12.706 0 0 0-12.88 12.495v1.027h-4.276v2.5h4.276v4.581h-4.276v2.5h4.276v1.026a12.706 12.706 0 0 0 12.88 12.5 12.708 12.708 0 0 0 12.88-12.5h-2.5a10.205 10.205 0 0 1-10.38 9.993Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11.576 52.923A29.282 29.282 0 0 0 32.25 61.5a29.284 29.284 0 0 0 19.77-7.712l6.096 6.096 1.768-1.768-6.096-6.096A29.284 29.284 0 0 0 61.5 32.25 29.284 29.284 0 0 0 32.25 3a29.283 29.283 0 0 0-19.77 7.712L5.884 4.116 4.116 5.884l6.596 6.595A29.283 29.283 0 0 0 3 32.25a29.282 29.282 0 0 0 8.576 20.673Zm.904-38.675A26.78 26.78 0 0 0 5.5 32.25 26.78 26.78 0 0 0 32.25 59a26.78 26.78 0 0 0 18.002-6.98L12.48 14.248Zm1.768-1.768L52.02 50.252A26.78 26.78 0 0 0 59 32.25 26.78 26.78 0 0 0 32.25 5.5a26.78 26.78 0 0 0-18.002 6.98Z" /></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M12.48 10.712A29.283 29.283 0 0 1 32.25 3 29.283 29.283 0 0 1 61.5 32.25a29.283 29.283 0 0 1-7.711 19.77l-9.45-9.45a12.705 12.705 0 0 0 1.113-4.992h-2.5a10.196 10.196 0 0 1-.537 3.07L31.238 29.47h1.334v-2.498h-3.833l-5.444-5.444a10.2 10.2 0 0 1 9.277-5.58c6.015 0 10.38 3.783 10.38 8.995h2.5c0-6.661-5.417-11.495-12.88-11.495a12.706 12.706 0 0 0-11.115 6.241l-8.978-8.977ZM10.712 12.48A29.283 29.283 0 0 0 3 32.25 29.282 29.282 0 0 0 32.25 61.5a29.283 29.283 0 0 0 19.77-7.711l-8.977-8.978a12.707 12.707 0 0 1-10.471 5.259 12.706 12.706 0 0 1-12.88-12.49v-1.027h-4.276v-2.5h4.276V29.47h-4.276v-2.5h4.276v-1.027c.022-1.314.247-2.603.657-3.827l-9.637-9.636Z" /><path d="M22.386 24.154a10.202 10.202 0 0 0-.194 1.789v1.027h3.01l-2.816-2.816ZM27.702 29.47h-5.51v4.581h10.091l-4.58-4.581ZM32.572 34.34v2.211h-10.38v1.027a10.2 10.2 0 0 0 10.38 9.995 10.2 10.2 0 0 0 8.678-4.555l-8.678-8.678Z" /></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="m27.856 22.442 5.464.289 4.978-7.658-3.007-7.816 2.334-.898 2.356 6.125 4.276-6.578 2.096 1.362-11.724 18.035-6.905-.364-2.983 4.588 3.137 6.163-11.73 18.047-2.097-1.363 4.277-6.58-6.558.326-.125-2.496 8.365-.417 4.985-7.67-2.482-4.876-9.13-.48-5.264 6.508-1.944-1.572 4.125-5.1-7.835-.412.131-2.497 7.842.413-3.566-5.506 2.099-1.36 4.55 7.029 9.124.48 2.983-4.588-4.143-8.142-8.28-1.305.389-2.47 6.49 1.023-3.56-6.999 2.227-1.134 3.558 6.993 2.986-5.84 2.226 1.138-3.811 7.454 4.146 8.148Z" fill="#85B1DD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M60.065 24.143a50.311 50.311 0 0 0-15.38-6.915l.63-2.42a52.829 52.829 0 0 1 17.104 7.918 1.25 1.25 0 0 1 .38 1.618l-.002.005c-4.8 8.858-9.599 17.717-14.398 26.566a1.25 1.25 0 0 1-1.818.427 25.363 25.363 0 0 0-20.776-3.844l-.61-2.424a27.867 27.867 0 0 1 21.659 3.446c4.403-8.12 8.807-16.248 13.211-24.377Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m32.45 32.518 6.957 4.04-1.255 2.162-2.21-1.284c.439.973.788 2.198.788 3.903 0 2.713-.847 4.136-1.598 5.39l-.008.014c-.666 1.113-1.234 2.063-1.234 4.086 0 2.024.569 2.973 1.235 4.085l.007.012c.75 1.253 1.598 2.674 1.598 5.383h-2.5c0-2.024-.569-2.973-1.235-4.086l-.007-.012c-.75-1.252-1.598-2.674-1.598-5.382 0-2.709.847-4.13 1.597-5.383l.007-.01c.666-1.114 1.236-2.066 1.236-4.097 0-1.57-.325-2.458-.791-3.316l-.86 2.928-2.399-.704 2.27-7.73Zm10.33 0 6.967 4.04-1.254 2.162-2.21-1.28c.439.972.787 2.196.787 3.899 0 2.713-.847 4.136-1.598 5.39l-.008.014c-.666 1.113-1.234 2.063-1.234 4.086 0 2.024.569 2.973 1.235 4.085l.007.012c.75 1.253 1.598 2.674 1.598 5.383h-2.5c0-2.024-.569-2.973-1.235-4.086l-.007-.012c-.75-1.252-1.598-2.674-1.598-5.382 0-2.709.847-4.13 1.597-5.383l.007-.01c.666-1.114 1.236-2.066 1.236-4.097 0-1.578-.328-2.466-.798-3.328l-.863 2.94-2.398-.704 2.268-7.728Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill-rule="evenodd" clip-rule="evenodd" d="m27.856 22.442 5.464.289 4.978-7.658-3.007-7.816 2.334-.898 2.356 6.125 4.276-6.578 2.096 1.362-11.724 18.035-6.905-.364-2.983 4.588 3.137 6.163-11.73 18.047-2.097-1.363 4.277-6.58-6.558.326-.125-2.496 8.365-.417 4.985-7.67-2.482-4.876-9.13-.48-5.264 6.508-1.944-1.572 4.125-5.1-7.835-.412.131-2.497 7.842.413-3.566-5.506 2.099-1.36 4.55 7.029 9.124.48 2.983-4.588-4.143-8.142-8.28-1.305.389-2.47 6.49 1.023-3.56-6.999 2.227-1.134 3.558 6.993 2.986-5.84 2.226 1.138-3.811 7.454 4.146 8.148Zm32.209 1.701a50.311 50.311 0 0 0-15.38-6.915l.63-2.42a52.829 52.829 0 0 1 17.104 7.918 1.25 1.25 0 0 1 .38 1.618l-.002.005c-4.8 8.858-9.599 17.717-14.398 26.566a1.25 1.25 0 0 1-1.818.427 25.363 25.363 0 0 0-20.776-3.844l-.61-2.424a27.867 27.867 0 0 1 21.659 3.446c4.403-8.12 8.807-16.248 13.211-24.377Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m32.45 32.518 6.957 4.04-1.255 2.162-2.21-1.284c.439.973.788 2.198.788 3.903 0 2.713-.847 4.136-1.598 5.39l-.008.014c-.666 1.113-1.234 2.063-1.234 4.086 0 2.024.569 2.973 1.235 4.085l.007.012c.75 1.253 1.598 2.674 1.598 5.383h-2.5c0-2.024-.569-2.973-1.235-4.086l-.007-.012c-.75-1.252-1.598-2.674-1.598-5.382 0-2.709.847-4.13 1.597-5.383l.007-.01c.666-1.114 1.236-2.066 1.236-4.097 0-1.57-.325-2.458-.791-3.316l-.86 2.928-2.399-.704 2.27-7.73Zm10.33 0 6.967 4.04-1.254 2.162-2.21-1.28c.439.972.787 2.196.787 3.899 0 2.713-.847 4.136-1.598 5.39l-.008.014c-.666 1.113-1.234 2.063-1.234 4.086 0 2.024.569 2.973 1.235 4.085l.007.012c.75 1.253 1.598 2.674 1.598 5.383h-2.5c0-2.024-.569-2.973-1.235-4.086l-.007-.012c-.75-1.252-1.598-2.674-1.598-5.382 0-2.709.847-4.13 1.597-5.383l.007-.01c.666-1.114 1.236-2.066 1.236-4.097 0-1.578-.328-2.466-.798-3.328l-.863 2.94-2.398-.704 2.268-7.728Z"/></svg>
|
|
@@ -41,16 +41,21 @@ export class Select {
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
addSelected() {
|
|
44
|
-
var _a
|
|
45
|
-
|
|
44
|
+
var _a;
|
|
45
|
+
// Recherche de l'option correspondant à la valeur actuelle
|
|
46
|
+
const selectedOption = this.options.find(option => option.value == this.value);
|
|
47
|
+
// Recherche de l'option actuellement sélectionnée
|
|
46
48
|
const selectedOption2 = this.options.find(option => option.selected);
|
|
47
|
-
|
|
48
|
-
selectedOption.selected = true;
|
|
49
|
-
}
|
|
49
|
+
// Désélection de l'option actuellement sélectionnée
|
|
50
50
|
if (selectedOption2) {
|
|
51
51
|
selectedOption2.selected = false;
|
|
52
52
|
}
|
|
53
|
-
|
|
53
|
+
// Sélection de la nouvelle option
|
|
54
|
+
if (selectedOption) {
|
|
55
|
+
selectedOption.selected = true;
|
|
56
|
+
}
|
|
57
|
+
// Retourne la valeur de l'option sélectionnée (ou une chaîne vide si aucune option n'est sélectionnée)
|
|
58
|
+
return (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) !== null && _a !== void 0 ? _a : '';
|
|
54
59
|
}
|
|
55
60
|
render() {
|
|
56
61
|
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,GAAG,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,MAAM;;
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h, } from '@stencil/core';\n\n@Component({\n tag: 'road-select',\n styleUrl: 'select.css',\n scoped: true,\n})\nexport class Select {\n\n /**\n * The id of select\n */\n @Prop() selectId: string = `road-select-${selectIds++}`;\n\n /**\n * List of options of the select\n */\n @Prop() options: Array<{\n value: string | number;\n label: string;\n selected?: boolean;\n }> = [];\n\n /**\n * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the select.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.selectId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If the control is presented as a scrolling list box (e.g. when multiple is specified),\n * this attribute represents the number of rows in the list that should be visible at one time.\n */\n @Prop() size: number = 0;\n\n /**\n * The sizes of the input.\n */\n @Prop() sizes: 'md' | 'lg' | 'xl' = 'xl';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.selectId}-label`;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * the value of the select.\n */\n @Prop({ mutable: true }) value?: any | null;\n\n /**\n * Emitted when the value has changed.\n */\n @Event() roadchange!: EventEmitter<{\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the select has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the select loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('value')\n valueChanged() {\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n\n componentWillLoad() {\n if(this.value){\n this.addSelected();\n }\n }\n \n addSelected() {\n // Recherche de l'option correspondant à la valeur actuelle\n const selectedOption = this.options.find(option => option.value == this.value);\n \n // Recherche de l'option actuellement sélectionnée\n const selectedOption2 = this.options.find(option => option.selected);\n \n // Désélection de l'option actuellement sélectionnée\n if (selectedOption2) {\n selectedOption2.selected = false;\n }\n \n // Sélection de la nouvelle option\n if (selectedOption) {\n selectedOption.selected = true;\n }\n \n // Retourne la valeur de l'option sélectionnée (ou une chaîne vide si aucune option n'est sélectionnée)\n return selectedOption?.value ?? '';\n }\n \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"]}
|