npm - @roadtrip/components - Versions diffs - 3.39.2 → 3.40.0 - Mend

@roadtrip/components 3.39.2 → 3.40.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 (204) hide show

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const bannerCss = ":host{display:none}:host(.banner-open){position:relative;display:block;padding:1rem 2rem;font-size:var(--road-body-medium);text-align:center;background-color:var(--road-leading-banner)}.banner-close{position:absolute;top:0;right:0;padding:0.25rem;color:currentColor;cursor:pointer;background:none;border:0}.banner-close road-icon{color:currentColor}.banner-open-label{font-weight:700}.banner-open-link{display:block;margin:0.25rem 0.75rem;font-size:var(--road-font-size-14);color:currentColor}@media (min-width: 992px){.banner-close{right:0.25rem;bottom:0}.banner-open-link{display:initial}}";
 const RoadBannerStyle0 = bannerCss;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-fee0103c.js');
-const index$2 = require('./index-bf8a763e.js');
+const index$2 = require('./index-0e4df560.js');
 /**
  * SSR Window 4.0.2

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 require('./polyfill-8e8d96b1.js');
 const checkboxCss = ".sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:\"\";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-label-span.sc-road-checkbox{color:var(--road-on-surface-weak)}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;margin-left:2rem;font-size:var(--road-font-size-14);color:var(--road-on-surface-weak)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 require('./polyfill-8e8d96b1.js');
 const chipCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;padding:0.25rem 0.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:0 0.5rem}:host(.chip-outline){border-style:solid;border-width:1px}::slotted(road-icon){width:1.25rem;height:1.25rem;margin-right:0.5rem;margin-left:-0.5rem}.chip-close{width:1rem;height:1rem;margin-right:-0.25rem;color:var(--road-surface);background:var(--road-on-surface-weak);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-outline.chip-inverse) .chip-close{color:var(--road-icon);background:var(--road-surface)}:host(.chip-lg){height:2.5rem;padding:0 0.75rem;font-size:var(--road-font-size-16)}:host(.chip-lg) ::slotted(road-icon){width:1.5rem;height:1.5rem;margin-right:0.75rem;margin-left:-0.75rem}:host(.chip-lg) .chip-description{padding:0 0.75rem}:host(.chip-lg) .chip-close{width:1.5rem;height:1.5rem}:host(.chip-default){color:var(--road-on-surface);background:var(--road-grey-200)}:host(.chip-inverse){color:var(--road-on-primary);background:none}:host(.chip-outline.chip-default){background:var(--road-surface);border-color:var(--road-input-outline)}:host(.chip-outline.chip-inverse){border-color:var(--road-on-primary)}:host(.chip-secondary){color:var(--road-on-button-primary);background:var(--road-button-primary);border-color:transparent}:host(.chip-secondary) .chip-close{color:var(--road-primary);background:var(--road-surface)}@media (any-hover: hover){:host(.chip-outline:hover){border-color:var(--road-outline-variant)}:host(.chip-secondary:hover){background:var(--road-button-primary-variant)}:host(.chip-secondary:hover) .chip-close{color:var(--road-primary)}}:host(.chip-outline:focus-visible){border-color:var(--road-outline-variant);outline:auto}:host(.chip-secondary.focus-visible){background:var(--road-button-primary-variant);outline:auto}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const dialogCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.dialog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;background:var(--road-overlay)}:host(.dialog-has-close) .dialog-overlay{cursor:pointer}.dialog-modal{position:relative;width:auto;margin:1rem;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.dialog-open){visibility:visible !important;opacity:1}:host(.dialog-open) .dialog-modal{transform:none}.dialog-content{position:relative;display:flex;flex-direction:column;width:100%;padding:0 0 1.5rem;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;border-radius:0.25rem;outline:0;box-shadow:var(--road-elevation-highest)}@media (min-width: 576px){.dialog-content{max-width:454px}}.dialog-header{display:flex;align-items:center;justify-content:flex-end;height:100%;max-height:2.75rem;margin-bottom:2rem}.dialog-close{display:flex;align-items:center;align-self:flex-start;justify-content:center;width:3.5rem;height:3.5rem;padding:0;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.dialog-icon{display:inline-block;width:3rem;height:3rem;font-size:var(--road-font-size-48)}.dialog-body{padding:0 1.5rem;text-align:center}@media (min-width: 768px){.dialog-body{padding:0 3rem}}.dialog-title{padding:0;margin:0 0 1rem;font-size:var(--road-body-medium);font-weight:700;line-height:1.2}.dialog-description{margin:0 0 0.5rem;overflow:auto;font-size:var(--road-body-medium)}.dialog-footer{display:flex;justify-content:center;padding:0 1.5rem}.dialog-footer ::slotted(road-button){margin-top:1rem}.dialog-footer .btn{min-width:130px;max-width:calc(50% - 0.5rem)}";
 const RoadDialogStyle0 = dialogCss;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const modalCss = ":host{--z-index:3;position:fixed;top:0;left:0;z-index:var(--z-index);display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-grey-900);visibility:hidden !important;opacity:0;transition:opacity 0.15s linear, visibility 0.15s}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer;background:var(--road-overlay)}.modal-dialog{position:relative;width:100%;pointer-events:none;transition:transform 0.3s ease-out;transform:translateY(50px)}:host(.modal-open){visibility:visible !important;opacity:1}:host(.modal-open) .modal-dialog{transform:none}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background:var(--road-surface);background-clip:padding-box;box-shadow:var(--road-elevation-hight)}@media (min-width: 768px){.modal-content{height:auto;border-radius:0.25rem}}.modal-header{display:flex;align-items:center;justify-content:flex-end;color:var(--road-on-header-surface);background:var(--road-header-surface)}.modal-header road-icon{color:var(--road-header-icon)}@media (min-width: 768px){.modal-header{border-radius:0.25rem 0.25rem 0 0}}.modal-header-inverse{color:var(--road-on-surface);background:none}.modal-header-inverse road-icon{color:var(--road-icon)}.modal-action,.modal-close{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;padding:0;font-weight:700;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.modal-action~.modal-title,.modal-close~.modal-title{padding-left:0}.modal-action-left,.modal-close-left{margin-right:auto}.modal-title{display:flex;flex-grow:1;align-items:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:var(--road-body-medium);font-weight:400}.modal-body{padding:2.5rem 0.5rem;overflow-y:auto}.modal-header-inverse+.modal-body{padding-top:0}@media (min-width: 768px){.modal-body{max-height:86vh;padding-right:var(--road-spacing-06);padding-bottom:var(--road-spacing-06);padding-left:var(--road-spacing-06)}}";
 const RoadModalStyle0 = modalCss;

package/dist/cjs/road-plate-number.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const plateNumberCss = ".sc-road-plate-number-h{display:block}.plate-number.sc-road-plate-number{--margin-bottom:0}.plate-number-start.sc-road-plate-number,.plate-number-end.sc-road-plate-number{width:1.75rem;height:calc(3rem - 0.25rem);background:var(--road-info-50)}.input-group-prepend.sc-road-plate-number{margin-right:-1px}.input-group-prepend.sc-road-plate-number,.input-group-append.sc-road-plate-number{padding:0}.plate-number-start.sc-road-plate-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-right:0;margin-left:1px;color:var(--road-icon-inverse);border-radius:0.125rem 0 0 0.125rem}.plate-number-icon.sc-road-plate-number{width:1.25rem;height:1.25rem;color:#f3db53}.plate-number-location.sc-road-plate-number{font-size:var(--road-button-medium);font-weight:700}.plate-number-end.sc-road-plate-number{margin-right:1px;border-radius:0 0.125rem 0.125rem 0}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number{color:var(--road-on-danger-surface)}.plate-number-be.sc-road-plate-number .plate-number-input.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-append.sc-road-plate-number,.plate-number-be.sc-road-plate-number .input-group-prepend.sc-road-plate-number{border-color:var(--road-danger-outline)}.plate-number-input.sc-road-plate-number{position:relative;display:block;height:3rem;margin:0;font-family:var(--road-font, sans-serif);font-size:var(--road-heading-04);font-weight:700;color:var(--road-on-surface);text-align:center;background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0;box-shadow:none;appearance:none}.plate-number-input.sc-road-plate-number::placeholder{color:var(--road-on-surface-weak);opacity:1}.plate-number-input.sc-road-plate-number:disabled{color:var(--road-on-surface-disabled);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.plate-number-input.sc-road-plate-number:disabled~.input-group-prepend.sc-road-plate-number,.plate-number-input.sc-road-plate-number:disabled~.input-group-append.sc-road-plate-number{cursor:not-allowed;background:var(--road-surface-disabled)}@media (hover: hover){.plate-number-input.sc-road-plate-number:not(:disabled):not([readonly]):hover{border-color:var(--road-input-outline-variant)}}.plate-number-input.sc-road-plate-number:not([readonly]):focus{outline:auto}.motorbike-plate.sc-road-plate-number .plate-number-input.sc-road-plate-number{height:6rem;padding:0.75rem 1rem 0;resize:none;border-left:0}.motorbike-plate.sc-road-plate-number .input-group-prepend.sc-road-plate-number,.motorbike-plate.sc-road-plate-number .input-group-append.sc-road-plate-number{align-items:flex-start;height:6rem;padding:0}.motorbike-plate.sc-road-plate-number .plate-number-start.sc-road-plate-number{margin-top:1px;border-radius:0.125rem 0 0}.motorbike-plate.sc-road-plate-number .plate-number-end.sc-road-plate-number{margin-top:1px;border-radius:0 0.125rem 0 0}";
 const RoadPlateNumberStyle0 = plateNumberCss;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const rangeCss = ".sc-road-range-h{display:block}.form-group.sc-road-range{width:100%}.form-range.sc-road-range{position:relative;display:flex;flex-direction:column;width:100%;margin-bottom:6px}.form-range-input.sc-road-range{position:relative;z-index:1;width:100%;background:transparent;outline:0;appearance:none}.form-range.sc-road-range>output.sc-road-range::after{display:block;font-size:var(--road-label-medium);text-align:right;content:counter(variable);counter-reset:variable var(--value)}.form-range-label.sc-road-range{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.form-range-progress.sc-road-range{position:relative;z-index:0;display:block;width:100%;margin-top:-1rem}.form-range-input.sc-road-range::-webkit-slider-runnable-track{border:0;appearance:none}.form-range-input.sc-road-range::-moz-range-track{height:0.5rem;border:0;appearance:none}.form-range-progress.sc-road-range::before{display:block;height:0.5rem;content:\"\";background-color:var(--road-on-surface-disabled);border:0;border-radius:1.125rem}.form-range-progress.sc-road-range.sc-road-range::after{position:absolute;top:0;right:0;left:0;display:block;width:calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));height:0.5rem;content:\"\";background:var(--road-primary);border-radius:1.125rem}.disabled.sc-road-range-h .form-range-progress.sc-road-range.sc-road-range::after{background:var(--road-surface-disabled)}.form-range-input.sc-road-range::-webkit-slider-thumb{position:relative;z-index:1;width:1.625rem;height:1.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.form-range-input.sc-road-range::-moz-range-thumb{position:relative;z-index:1;box-sizing:border-box;width:1.625rem;height:1.625rem;margin-top:-0.625rem;cursor:grab;background:var(--road-surface);border:none;border-radius:1.625rem;box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.24);appearance:none}.disabled.sc-road-range-h .form-range-input.sc-road-range::-webkit-slider-thumb,.disabled.sc-road-range-h .form-range-input.sc-road-range::-moz-range-thumb{cursor:not-allowed;background:var(--road-on-surface-disabled);box-shadow:none}.disabled.sc-road-range-h .form-range-input.sc-road-range{pointer-events:none}.disabled.sc-road-range-h{cursor:not-allowed}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-webkit-slider-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-webkit-slider-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-h:not(.disabled).focus-visible .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):active .form-range-input.sc-road-range::-moz-range-thumb,.sc-road-range-h:not(.disabled):focus .form-range-input.sc-road-range::-moz-range-thumb{background:var(--road-input-surface-variant);border:0.5rem solid var(--road-grey-100-new)}.sc-road-range-s>datalist{display:flex;justify-content:space-between}.sc-road-range-s>datalist option{width:32px;margin:0;font-size:var(--road-label-medium);text-align:center}";
 const RoadRangeStyle0 = rangeCss;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.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,.rating-stars.rating-stars--extra-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.rating-number--extra-small{font-size:var(--road-link-extra-small)}.rating-number.readonly{text-decoration:none}";
 const RoadRatingStyle0 = ratingCss;

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

@@ -1968,7 +1968,7 @@ const SelectFilter = class {
         const options = this.filteredOptions;
         const isActive = this.isActive ? 'true' : 'false';
         const notActive = this.isActive ? '' : 'not-active';
-        return (index.h(index.Host, { key: 'eb209aa9c9421eca958fe21a8598edc774d61406', "is-active": isActive }, index.h("slot", { key: '4c7bc828b789101338eafd5091cde5fe749db9a9' }), this.isOpen && (index.h("div", { key: '4f7f5ade504721515a8f5f5ffd6ec93178336b4d', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
+        return (index.h(index.Host, { key: 'e4393a91203759623aa0086e4108463d4f48a44f', "is-active": isActive }, index.h("slot", { key: 'e37819bb33bcdb6560195beca49f609e8a738698' }), this.isOpen && (index.h("div", { key: 'b6f07e78929aaa97f29f4b27575427754ddcc2be', class: `${notActive} select-filter-list`, role: "listbox", onMouseLeave: this.handleMouseLeave }, options.length === 0 ? (index.h("div", { class: "select-filter-empty" }, "Aucune option")) : (index.h("ul", { class: "pl-0" }, options.map((option, idx) => (index.h("li", { class: `select-filter-item ${this.activeIndex === idx ? 'active' : ''}`, role: "option", "aria-selected": this.activeIndex === idx ? 'true' : 'false', onClick: (e) => this.handleOptionClick(option.item.value, option.item.label.replace(/(<([^>]+)>)/gi, ''), e), onMouseOver: () => this.handleOptionMouseOver(idx), innerHTML: option.item.label, tabindex: this.activeIndex === idx ? 0 : -1 })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}";
+const selectCss = ".sc-road-select-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-select.sc-road-select{box-sizing:border-box;display:block;width:100%;height:auto;padding:0.75rem 3rem 0 1rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-select.sc-road-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select.sc-road-select::-ms-expand{display:none}.form-select.sc-road-select::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select.sc-road-select:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select.sc-road-select:focus~.form-select-label.sc-road-select,.form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.form-select.has-value.sc-road-select~.form-select-label.sc-road-select{transform:scale(0.625) translateY(-0.625rem)}.form-select.sc-road-select:disabled,.form-select[readonly].sc-road-select{color:var(--road-on-surface-disabled);cursor:not-allowed;background-color:var(--road-surface-disabled);opacity:1}.form-select-label.sc-road-select{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select.sc-road-select:required~.form-select-label.sc-road-select::after{color:var(--road-on-danger-surface);content:\" *\"}.select-xl.sc-road-select-h .form-select.sc-road-select{min-height:3.5rem;padding:1rem 1rem 0}.select-xl.sc-road-select-h .form-select-label.sc-road-select{top:1rem}.select-xl.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-xl.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-lg.sc-road-select-h .form-select.sc-road-select{min-height:3rem}.select-md.sc-road-select-h .form-select.sc-road-select{min-height:2.5rem;padding:1rem 1rem 0;font-size:var(--road-body-small)}.select-md.sc-road-select-h .form-select-label.sc-road-select{top:0.5rem}.select-md.sc-road-select-h .form-select.sc-road-select:focus~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[required].sc-road-select:valid~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select.has-value.sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"date\"].sc-road-select~.form-select-label.sc-road-select,.select-md.sc-road-select-h .form-select[type=\"time\"].sc-road-select~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.select-md.sc-road-select-h .form-select.sc-road-select:placeholder-shown~.form-select-label.sc-road-select{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-select{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid{border-color:var(--road-on-danger-surface)}.form-select.is-invalid.sc-road-select~.invalid-feedback.sc-road-select,.was-validated.sc-road-select .form-select.sc-road-select:invalid~.invalid-feedback.sc-road-select{display:block}.helper.sc-road-select{margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-surface-weak)}";
 const RoadSelectStyle0 = selectCss;
 const Select = class {
@@ -107,7 +107,7 @@ const Select = class {
         const labelId = this.selectId + '-label';
         const hasValueClass = this.value && this.value !== '' ? 'has-value' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: '531ff3e04c4447214779844ba29b2208ded29d12', class: this.sizes && `select-${this.sizes}` }, index.h("select", { key: 'e5336849c3992793152ffcc2b3670f96c0c1129b', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("option", { key: 'f9f2f7857d3ce3cdb0205b5589388ad0417d6802', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: '4c2d444e030ef6168b4871ae5381550295b91e5f', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: '40808526b05350e9d59dedd814ca620368fa6098', class: "invalid-feedback" }, this.error)));
+        return (index.h(index.Host, { key: 'f14fd892ff313e60f72eca443e2db24e8b76c809', class: this.sizes && `select-${this.sizes}` }, index.h("select", { key: '3666d6920ac0a8cdaabeb9275b201ccff50e64b1', class: `form-select ${hasValueClass} ${isInvalidClass}`, id: this.selectId, "aria-disabled": this.disabled ? 'true' : null, autoFocus: this.autofocus, disabled: this.disabled, name: this.name, required: this.required, size: this.size, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("option", { key: '8d19ea08babdfc0387bf3fd4dbccea7296264938', selected: !this.value, disabled: true, hidden: true, style: { display: 'none' }, value: "" }), this.options && this.options.map(option => (index.h("option", { value: option.value, selected: this.value !== null && option.value == this.value }, option.label)))), index.h("label", { key: '23a6d92409b0ee87600fb9f466759d565b4342e8', class: "form-select-label", id: labelId, htmlFor: this.selectId }, this.label), this.error && this.error !== '' && index.h("p", { key: 'd06cb3072735d1f9c7050e6831953808dd5b7454', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'f0ce5ae0ece1db298febbfc21938960abf8351a8', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

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

	@@ -1 +1 @@
1	- {"file":"road-select.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/\n Select\n \n Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n /\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/ SELECT\n -------------------- /\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-select:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/\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-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 if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n componentWillLoad() {\n if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n }\n\n addSelected() {\n // Désélection de toutes les options\n this.options.forEach(option => option.selected = false);\n\n // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n const selectedOption = this.options.find(option => option.value == this.value);\n if (selectedOption) {\n selectedOption.selected = true;\n }\n }\n\n resetSelection() {\n this.value = null;\n this.options.forEach(option => option.selected = false);\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| null;\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\n selected={!this.value} // sélectionné si this.value est null ou vide\n disabled\n hidden\n style={{ display: 'none' }}\n value=\"\"\n >\n </option>\n {this.options && this.options.map(option => (\n <option\n value={option.value}\n selected={this.value !== null && option.value == this.value}\n >\n {option.label}\n </option>\n ))}\n </select>\n <label class=\"form-select-label\" id={labelId} htmlFor={this.selectId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"],"version":3}
1	+ {"file":"road-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2wIAA2wI,CAAC;AAC9xI,yBAAe,SAAS;;MCMX,MAAM;IALnB;;;;;;;;;;;QAUU,aAAQ,GAAW,eAAe,SAAS,EAAE,EAAE,CAAC;;;;QAKhD,YAAO,GAIV,EAAE,CAAC;;;;QAKA,cAAS,GAAY,KAAK,CAAC;;;;QAK3B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,SAAI,GAAW,IAAI,CAAC,QAAQ,CAAC;;;;QAK7B,aAAQ,GAAY,KAAK,CAAC;;;;;QAW1B,SAAI,GAAW,CAAC,CAAC;;;;QAKjB,UAAK,GAAuB,IAAI,CAAC;;;;QAKjC,UAAK,GAAW,GAAG,IAAI,CAAC,QAAQ,QAAQ,CAAC;QA6EzC,aAAQ,GAAG,CAAC,EAAS;YAC3B,MAAM,MAAM,GAAG,EAAE,CAAC,MAAkC,CAAC;YACrD,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC;aACnC;SACF,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;SACtB,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;KA8CH;IApGC,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;QAED,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YACvB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,WAAW;;QAET,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;;QAGxD,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/E,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC;SAChC;KACF;IAED,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;KACzD;IAmBD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,WAAW,GAAG,EAAE,CAAC;QACzE,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,GAAG,YAAY,GAAG,EAAE,CAAC;QAEzF,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,CAAC,KAAK,EAAE,IAC/CD,qEACA,KAAK,EAAE,eAAe,aAAa,IAAI,cAAc,EAAE,EACvD,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,qEACE,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,EACrB,QAAQ,QACR,MAAM,QACN,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,KAAK,EAAC,EAAE,GAED,EACR,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KACtCA,oBACE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAE1D,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,EACPA,oEAAO,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,EACzF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK,EAC/E,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,IAAIA,gEAAG,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAK,CACpE,EACP;KACH;;;;;AAIH,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/select/select.css?tag=road-select&encapsulation=scoped","src/components/select/select.tsx"],"sourcesContent":["/\n Select\n \n Index\n * - Select\n * - Label\n * - Sizes\n * - Error\n /\n\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/ SELECT\n -------------------- /\n\n.form-select {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: auto;\n padding: 0.75rem 3rem 0 1rem;\n margin: 0;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right 1rem center/1.5rem 2rem;\n background-color: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n.form-select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000000;\n}\n\n.form-select::-ms-expand { / IE fix remove native arrow /\n display: none;\n}\n\n/\n Placeholder\n /\n\n.form-select::placeholder {\n color: var(--road-on-surface-extra-weak);\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-select:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-select:focus ~ .form-select-label,\n.form-select[required]:valid ~ .form-select-label,\n.form-select.has-value ~ .form-select-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/\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-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\n/ HELPER\n -------------------- /\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-body-small);\n color: var(--road-on-surface-weak);\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 Helper message for the field\n /\n @Prop() helper?: string;\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 if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n\n this.roadchange.emit({\n value: this.value,\n });\n this.roadChange.emit({\n value: this.value,\n });\n }\n\n componentWillLoad() {\n if (this.value === null) {\n this.resetSelection();\n } else {\n this.addSelected();\n }\n }\n\n addSelected() {\n // Désélection de toutes les options\n this.options.forEach(option => option.selected = false);\n\n // Sélection de la nouvelle option si elle correspond à la valeur actuelle\n const selectedOption = this.options.find(option => option.value == this.value);\n if (selectedOption) {\n selectedOption.selected = true;\n }\n }\n\n resetSelection() {\n this.value = null;\n this.options.forEach(option => option.selected = false);\n }\n\n private onChange = (ev: Event) => {\n const select = ev.target as HTMLSelectElement \| null;\n if (select) {\n this.value = select.value \|\| null;\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\n selected={!this.value} // sélectionné si this.value est null ou vide\n disabled\n hidden\n style={{ display: 'none' }}\n value=\"\"\n >\n </option>\n {this.options && this.options.map(option => (\n <option\n value={option.value}\n selected={this.value !== null && option.value == this.value}\n >\n {option.label}\n </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 {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet selectIds = 0;\n"],"version":3}

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

@@ -12,7 +12,7 @@ const Skeleton = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("span", { key: 'd0f6fa2c6d1346b4dbdf15e3a2d8f5776961a625' }, "\u00A0"));
+        return (index.h("span", { key: 'c45f6829f46113e050c6a3a5faa42ad1faa4d3df' }, "\u00A0"));
     }
 };
 Skeleton.style = RoadSkeletonStyle0;

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

@@ -22,7 +22,7 @@ const Spinner = class {
     render() {
         const sizeClass = this.size !== undefined ? `spinner spinner--${this.size}` : 'spinner';
         const colorClass = this.size !== undefined ? `spinner-circle spinner-circle--${this.color}` : 'spinner-circle';
-        return (index.h("svg", { key: 'a13fe873d986f18ad6e24d03c8ed2cc08d111bfb', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '2be205cfa0e2fb9898578db0205ecabc865cddf2', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
+        return (index.h("svg", { key: 'c1ef015f047b187de1be189e8671c133b352eeb0', class: `${sizeClass}`, viewBox: "25 25 50 50" }, index.h("circle", { key: '351415ef00644317f6ffac31037454fb41c1df29', class: `${colorClass}`, cx: "50", cy: "50", r: "20" })));
     }
 };
 Spinner.style = RoadSpinnerStyle0;

package/dist/cjs/road-status-chip.cjs.entry.js ADDED Viewed

@@ -0,0 +1,28 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-fee0103c.js');
+const index$1 = require('./index-0e4df560.js');
+require('./polyfill-8e8d96b1.js');
+const statusChipCss = ":host{box-sizing:border-box;display:inline-flex;align-items:center;height:1.5rem;margin-bottom:0.5rem;font-size:var(--road-font-size-14);cursor:pointer;border:0;border-radius:1.625rem;outline:0;background-color:var(--road-info-surface);color:var(--road-on-info-surface);font-weight:700;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.chip-description{display:inline-flex;align-items:center;padding:var(--road-spacing-01) var(--road-spacing-05) var(--road-spacing-01) var(--road-spacing-03)}.chip-icon{width:1rem;height:1rem;margin-right:var(--road-spacing-03);border-radius:50%;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.chip-md){height:2rem;font-size:var(--road-font-size-16)}:host(.chip-md) .chip-description{padding:var(--road-spacing-02) var(--road-spacing-05) var(--road-spacing-02) var(--road-spacing-03)}:host(.chip-md) .chip-icon{width:1.25rem;height:1.25rem}:host(.chip-lg){height:2.5rem;font-size:var(--road-font-size-16)}:host(.chip-lg) .chip-description{padding:var(--road-spacing-02) var(--road-spacing-06) var(--road-spacing-02) var(--road-spacing-04)}:host(.chip-lg) .chip-icon{width:1.5rem;height:1.5rem}:host(:hover),:host(.focus-visible){background:var(--road-info-90)}:host(:active){background:var(--road-info-80)}";
+const RoadStatusChipStyle0 = statusChipCss;
+const Chip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The chip size.
+         */
+        this.size = 'sm';
+    }
+    render() {
+        return (index.h(index.Host, { key: '9334d773536d09520e9bdb394cf1d84d0f370b16', class: `chip-${this.size}`, tabindex: "0" }, index.h("div", { key: 'b8ba0ddd4eb8bcc6749267f3a2dee7f0998a2d82', class: "chip-description" }, index.h("road-icon", { key: '98bdeea36b7016caa0b3c6586385adad4cdccb3f', class: "chip-icon", color: "info", icon: index$1.alertInfoSolid }), index.h("slot", { key: 'a25b1f7338b08a783e9aa6134ebb93276c671cfd' }))));
+    }
+};
+Chip.style = RoadStatusChipStyle0;
+exports.road_status_chip = Chip;
+//# sourceMappingURL=road-status-chip.cjs.entry.js.map

package/dist/cjs/road-status-chip.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"road-status-chip.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,yyCAAyyC,CAAC;AACh0C,6BAAe,aAAa;;MCYf,IAAI;IALjB;;;;;QAUU,SAAI,GAAwB,IAAI,CAAC;KAe1C;IAbC,MAAM;QAEJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG,IAExCD,kEAAK,KAAK,EAAC,kBAAkB,IAC3BA,wEAAW,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAEE,sBAAc,GAAc,EAC5EF,oEAAO,CACH,CACD,EACP;KACH;;;;;;","names":["h","Host","alertInfoSolid"],"sources":["src/components/status-chip/status-chip.css?tag=road-status-chip&encapsulation=shadow","src/components/status-chip/status-chip.tsx"],"sourcesContent":["/*\n * Status Chip\n *\n * Index\n * - Icon\n * - Size\n */\n\n:host {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n height: 1.5rem;\n margin-bottom: 0.5rem;\n font-size: var(--road-font-size-14);\n cursor: pointer;\n border: 0;\n border-radius: 1.625rem;\n outline: 0;\n background-color: var(--road-info-surface);\n color: var(--road-on-info-surface);\n font-weight: 700;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.chip-description {\n display: inline-flex;\n align-items: center;\n padding: var(--road-spacing-01) var(--road-spacing-05) var(--road-spacing-01) var(--road-spacing-03);\n}\n\n/* ICON\n -------------------- */\n\n.chip-icon {\n width: 1rem;\n height: 1rem;\n margin-right: var(--road-spacing-03);\n border-radius: 50%;\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n\n/* SIZE\n -------------------- */\n\n\n:host(.chip-md) {\n height: 2rem;\n font-size: var(--road-font-size-16);\n}\n\n\n:host(.chip-md) .chip-description {\n padding: var(--road-spacing-02) var(--road-spacing-05) var(--road-spacing-02) var(--road-spacing-03);\n}\n\n:host(.chip-md) .chip-icon {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n:host(.chip-lg) {\n height: 2.5rem;\n font-size: var(--road-font-size-16);\n}\n\n:host(.chip-lg) .chip-description {\n padding: var(--road-spacing-02) var(--road-spacing-06) var(--road-spacing-02) var(--road-spacing-04);\n}\n\n:host(.chip-lg) .chip-icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n/**\n * Hover state\n */\n\n\n:host(:hover),\n:host(.focus-visible) {\n background: var(--road-info-90);\n}\n\n\n/**\n * Active\n */\n\n:host(:active) {\n background: var(--road-info-80);\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { alertInfoSolid } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the chip.\n */\n\n@Component({\n tag: 'road-status-chip',\n styleUrl: 'status-chip.css',\n shadow: true,\n})\nexport class Chip {\n\n /**\n * The chip size.\n */\n @Prop() size: 'sm' | 'md' | 'lg' = 'sm';\n\n render() {\n\n return (\n <Host\n class={`chip-${this.size}`} tabindex=\"0\"\n >\n <div class=\"chip-description\">\n <road-icon class=\"chip-icon\" color=\"info\" icon={alertInfoSolid}></road-icon>\n <slot/>\n </div>\n </Host>\n );\n }\n}"],"version":3}

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

@@ -85,11 +85,11 @@ const Switch = class {
     }
     render() {
         const labelId = this.switchId + '-label';
-        const textLabel = index.h("label", { key: '430104d38d5703aa56ce1976a977a126468ec741', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
+        const textLabel = index.h("label", { key: 'd796b35a41bfcee969f7e514a422c86c0188ea83', class: "form-switch-label", id: labelId, htmlFor: this.switchId }, this.label);
         const colorClass = this.color !== undefined ? 'form-switch-' + this.color : '';
         const isSpacedClass = this.isSpaced && 'form-switch-spaced';
         const rightSwitchClass = this.hasLeftLabel ? 'form-switch-right' : '';
-        return (index.h(index.Host, { key: '2bfcb70289e7a90964e1211569ab02e1097cd12b' }, index.h("input", { key: '7c9e3273d965e895479da1fb4349bb35fa5efc3b', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: 'af4acb92308e858b7188c71bdd2cb1e5bb368e31', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '0dcc70814eb2ae967bf5235bb6aac1ba7205d7b4', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
+        return (index.h(index.Host, { key: 'cdc043a58934f23ab59eceb249264e20030dcd81' }, index.h("input", { key: '8f30801f7c589a21cd946758bcf236dde5b19649', class: "form-switch-input", type: "checkbox", id: this.switchId, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("label", { key: 'cedb4631003350829110dc06f56005ee3ce7da8b', class: `form-switch-label ${isSpacedClass} ${colorClass}`, htmlFor: this.switchId }, this.hasLeftLabel && textLabel, index.h("div", { key: '3ceaec7a21c32451721678190cce980b55e95cd9', class: `form-switch-lever ${rightSwitchClass}`, "data-off": this.off, "data-on": this.on }), this.hasLeftLabel ? '' : textLabel)));
     }
     static get watchers() { return {
         "checked": ["checkedChanged"]

package/dist/cjs/road-tab-bar.cjs.entry.js CHANGED Viewed

@@ -44,11 +44,11 @@ const TabBar = class {
     }
     render() {
         const { expand, center, secondary } = this;
-        return (index.h(index.Host, { key: '683e4f5c99d335ec1c744830237bd3cd23db8c75', role: "tablist", class: {
+        return (index.h(index.Host, { key: 'c9b9c4205d68cee5c45fec07585f0cf7efae2918', role: "tablist", class: {
                 'tab-expand': expand,
                 'tab-center': center,
                 'tab-secondary': secondary,
-            } }, index.h("slot", { key: '0757eeb70b98263e316b408bc420fee186de03b0' })));
+            } }, index.h("slot", { key: 'affab8a74a51438ccc5b0de3b2b44b0bf8c2c104' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/road-tab-button.cjs.entry.js CHANGED Viewed

@@ -77,7 +77,7 @@ const TabButton = class {
             rel,
             target,
         };
-        return (index.h(index.Host, { key: '6fdae83a0fe22652c51b92874265e2c32787063d', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (index.h(index.Host, { key: '0f4a9238539815a078c937171e2bc7fd6cdb86a2', onClick: (ev) => !disabled && this.onClick(ev), onKeyup: (ev) => !disabled && this.onKeyUp(ev), role: "tab", tabindex: disabled ? -1 : tabIndex, "aria-selected": selected ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 'tab-selected': selected,
                 'tab-has-label': hasLabel,
                 'tab-has-icon': hasIcon,
@@ -85,7 +85,7 @@ const TabButton = class {
                 'tab-has-icon-only': hasIcon && !hasLabel,
                 [`tab-layout-${layout}`]: true,
                 'tab-disabled': disabled, // Classe CSS pour les styles désactivés
-            } }, index.h("a", Object.assign({ key: 'dc85019d7861a227495a165790d2e5b025f1f979' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '59d9387c00bb48a34f425d9af782e3568f566263', class: "button-inner" }, index.h("slot", { key: '54290ac6eee4506846c8756f5141b493e6ebcc13' })))));
+            } }, index.h("a", Object.assign({ key: '2a5d7f31accdab3c7c5664dfe6ecc873c806ab89' }, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { key: '682fcabe5b1afca95e0cf14254dee7b8ba8e2994', class: "button-inner" }, index.h("slot", { key: 'bea982cf3737759bd7d557ce4328c351a73918d4' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -27,9 +27,9 @@ const Tab = class {
     }
     render() {
         const { tab, active } = this;
-        return (index.h(index.Host, { key: '10d79bb43319e005cf57d629ea4f678e3f3a5ae2', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (index.h(index.Host, { key: '63af8787abb1c214e75ce13b4aa6e265ac27ff5f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'tab-hidden': !active,
-            } }, index.h("slot", { key: 'd11c7858cddf2b5da0db945ee9f69f52d02d7c16' })));
+            } }, index.h("slot", { key: '5a00faa7454b981ba72f2b262c72b3dc3497e48b' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const Table = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("slot", { key: 'e8b08c7f5bbb8fd61ae6d73278b61c8838bbabf4' }));
+        return (index.h("slot", { key: '3b88893af0069fdfc1d2fff80979da38d768f1f5' }));
     }
 };
 Table.style = RoadTableStyle0;

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

@@ -108,7 +108,7 @@ const Tabs = class {
         return Array.from(this.el.querySelectorAll('road-tab'));
     }
     render() {
-        return (index.h(index.Host, { key: '5ac640c40ecdf802d7d56a662d5aa107ced242ef', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: '8f50a94ef5602b121eaf7406c6d83ed93c50a7aa', name: "top" }), index.h("div", { key: 'fb87539786bf6f7d1e3d7a9766b191bca35ce312', class: "tabs-inner" }, index.h("slot", { key: '32f22aabd7e38881d289fbd0af69669d62d918cc' }))));
+        return (index.h(index.Host, { key: 'a20986bf68696a6fdc51b12ad1b046db3b18bc05', onRoadTabButtonClick: this.onTabClicked }, index.h("slot", { key: 'c5bfece44ba292b38661d1c547bbea6c72434ee9', name: "top" }), index.h("div", { key: 'e0f414977fb10b3dae809c1d73043db078996854', class: "tabs-inner" }, index.h("slot", { key: 'e0a09ad0eaacd5dca847ff48ffd632244e25c392' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -22,7 +22,7 @@ const Tag = class {
     }
     render() {
         const contrastClass = this.contrast ? `tag-${this.color} tag-${this.color}-contrast` : `tag-${this.color}`;
-        return (index.h(index.Host, { key: '81f24465ee40fd72b3095258f67f9d46b0f663e2', class: `${contrastClass}` }, index.h("slot", { key: 'baf9168e522f8f4cf682f03c40304d5052a030f2' })));
+        return (index.h(index.Host, { key: '2207dbc70c4b0f387f202702db8008b1b71d0ad0', class: `${contrastClass}` }, index.h("slot", { key: 'ae9980dd95f4fbc893ed868c59b724c08199b1fe' })));
     }
 };
 Tag.style = RoadTagStyle0;

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

@@ -17,7 +17,7 @@ const Text = class {
     }
     render() {
         const colorClass = this.color !== undefined ? `text-${this.color}` : '';
-        return (index.h(index.Host, { key: '8c3872a70719feac2cbf76f50b7491b838fb393b', class: `${colorClass}` }, index.h("slot", { key: 'b746e561a4c05d829492a023120a7d1ade1c146f' })));
+        return (index.h(index.Host, { key: 'ad2c0033ece3bcce8895c4e7cfa028fd91f98559', class: `${colorClass}` }, index.h("slot", { key: 'f39a6b798aee6789bf2fe2d24aa82faff7a088e2' })));
     }
 };
 Text.style = RoadTextStyle0;

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

@@ -99,7 +99,7 @@ const Textarea = class {
         const hasValueClass = this.value !== '' ? 'has-value' : '';
         const noResizeClass = this.resize == false ? 'no-resize' : '';
         const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';
-        return (index.h(index.Host, { key: 'f67a9451b99f450ee2828ea5eb5dc3728795c1dd', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '27f3c926911126812156ccc87172c3e71f634b7c', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { key: '081afb27b83557ce88db5c78d6e90c138f69c0d4', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '3509594cc1523c401e12a796216ed3c97813f419', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'ede03d506c01bf3eae5a633a534eeed696df819d', class: "helper" }, this.helper)));
+        return (index.h(index.Host, { key: '84f001bd32876c45caec89f2e62a653341ca4e3f', "aria-disabled": this.disabled ? 'true' : null, class: this.sizes && `input-${this.sizes}` }, index.h("textarea", { key: '5e972efce077742ab5e69535f4b01c3a1afd7638', class: `form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`, id: this.textareaId, "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": labelId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, value: value, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus }), index.h("label", { key: '4e54a6fc2a45cc9b087dd7fc960b3c200d9ec647', class: "form-label", id: labelId, htmlFor: this.textareaId }, this.label), this.error && this.error !== '' && index.h("p", { key: '1bdf68022659f0ffc06c2e13ac29fded490de06b', class: "invalid-feedback" }, this.error), this.helper && this.helper !== '' && index.h("p", { key: 'adfdb41de302ca191b4e4fb4da785fc9d2c503b3', class: "helper" }, this.helper)));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/road-time-range-picker.cjs.entry.js ADDED Viewed

@@ -0,0 +1,100 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-fee0103c.js');
+const timeRangePickerCss = ".required-indicator.sc-road-time-range-picker{color:var(--road-on-danger-surface);content:\" *\"}.time-range-picker-content.sc-road-time-range-picker road-input.sc-road-time-range-picker{margin-bottom:0}.time-range-picker.sc-road-time-range-picker .messages.sc-road-time-range-picker{display:flex;flex-direction:column}.invalid-feedback.sc-road-time-range-picker{font-size:var(--road-helper-medium);color:var(--road-on-danger-surface);display:flex;align-items:center;gap:4px}.invalid-feedback.sc-road-time-range-picker road-icon.sc-road-time-range-picker{color:var(--road-danger-icon)}.sc-road-time-range-picker-h road-input.error-border.sc-road-time-range-picker{border-radius:0.25rem;outline:1px solid var(--road-danger-outline);outline-offset:-1px}";
+const RoadTimeRangePickerStyle0 = timeRangePickerCss;
+const RoadTimeRangePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.roadChange = index.createEvent(this, "roadChange", 7);
+        this.roadInput = index.createEvent(this, "roadInput", 7);
+        this.roadFocus = index.createEvent(this, "roadFocus", 7);
+        this.roadBlur = index.createEvent(this, "roadBlur", 7);
+        /** Désactivation du picker */
+        this.disabled = false;
+        /** Si `true`, l’utilisateur doit remplir avant submit */
+        this.required = false;
+        /** Taille du champ */
+        this.sizes = 'lg';
+        /** Handle change depuis le slot start */
+        this.handleStartChange = (e) => {
+            var _a;
+            this.start = (_a = e.detail.value) !== null && _a !== void 0 ? _a : undefined;
+            this.emitChange();
+        };
+        /** Handle change depuis le slot end */
+        this.handleEndChange = (e) => {
+            var _a;
+            this.end = (_a = e.detail.value) !== null && _a !== void 0 ? _a : undefined;
+            this.emitChange();
+        };
+    }
+    /** Retourne les messages d'erreur sous forme de tableau */
+    get errorMessages() {
+        if (!this.error)
+            return [];
+        if (Array.isArray(this.error))
+            return this.error.flatMap(e => (typeof e === 'string' ? e.split(',') : [e]));
+        return this.error.split(',');
+    }
+    /** Ajoute ou retire la classe error-border sur le road-input */
+    async updateInvalidClasses() {
+        var _a;
+        const inputs = Array.from(this.hostEl.querySelectorAll('road-input[slot="start"], road-input[slot="end"]'));
+        for (const inputEl of inputs) {
+            await ((_a = inputEl.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(inputEl));
+            if (this.errorMessages.length > 0) {
+                inputEl.style.borderRadius = '0.25rem';
+                inputEl.style.outline = `1px solid var(--road-danger-outline)`;
+                inputEl.style.outlineOffset = '-1px';
+            }
+            else {
+                inputEl.style.borderRadius = '';
+                inputEl.style.outline = '';
+                inputEl.style.outlineOffset = '';
+            }
+        }
+    }
+    /** Vérifie que start <= end et met à jour l’erreur */
+    validateRange() {
+        if (this.start && this.end && this.start > this.end) {
+            this.error = 'L’heure de début doit être inférieure à l’heure de fin.';
+        }
+        else {
+            this.error = undefined;
+        }
+    }
+    /** Émet les changements */
+    async emitChange() {
+        this.validateRange();
+        this.roadChange.emit({ start: this.start, end: this.end });
+        await this.updateInvalidClasses();
+    }
+    componentDidLoad() {
+        const startSlot = this.hostEl.querySelector('[slot="start"]');
+        const endSlot = this.hostEl.querySelector('[slot="end"]');
+        if (startSlot) {
+            startSlot.addEventListener('roadChange', this.handleStartChange);
+        }
+        if (endSlot) {
+            endSlot.addEventListener('roadChange', this.handleEndChange);
+        }
+        this.updateInvalidClasses();
+    }
+    async getRange() {
+        return { start: this.start, end: this.end };
+    }
+    render() {
+        return (index.h(index.Host, { key: '760f1f32a20c9afc47a5fa0c367c25fc5c956762', class: `time-range-picker input-${this.sizes}` }, this.label && (index.h("p", { key: '64c22605cc9081c39b52bb758d543b6352cc3de7', class: "label m-0" }, this.label, this.required && index.h("span", { key: 'aeede78739b2390722ff0a7afed9ccf550d612f3', class: "required-indicator" }, " *"))), index.h("div", { key: '71499bccdd9ce072dd2f7f8b086bb96b3b7e43f0', class: "time-range-picker-content d-flex align-items-center my-4" }, index.h("slot", { key: '77210211e112501ca5c4d471257614418fe831f9', name: "start" }), index.h("span", { key: '2c2c289e8c4638f082773debc355a4350a85e361', class: "separator mx-12" }, this.separator), index.h("slot", { key: 'e79e889d4386c1ba0731a46cfc83002c998a5194', name: "end" })), index.h("div", { key: 'f0754329e6c6ff79e22ae374ad299da9daf1311d', class: "messages mt-1" }, this.errorMessages.map((msg, index$1) => (index.h("p", { key: index$1, class: "invalid-feedback m-0" }, index.h("road-icon", { slot: "start", name: "alert-error-solid", "aria-hidden": "true", size: "sm" }), msg.trim())))), this.helper && index.h("p", { key: 'aa93c11be41410bf52c9d763d3a7a4cb99721747', class: "helper mt-1" }, this.helper)));
+    }
+    get hostEl() { return index.getElement(this); }
+};
+RoadTimeRangePicker.style = RoadTimeRangePickerStyle0;
+exports.road_time_range_picker = RoadTimeRangePicker;
+//# sourceMappingURL=road-time-range-picker.cjs.entry.js.map

package/dist/cjs/road-time-range-picker.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"road-time-range-picker.entry.cjs.js","mappings":"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","names":["h","Host","index"],"sources":["src/components/time-range-picker/time-range-picker.css?tag=road-time-range-picker&encapsulation=scoped","src/components/time-range-picker/time-range-picker.tsx"],"sourcesContent":["/*\n * Time range \n */\n\n\n.required-indicator {\n color: var(--road-on-danger-surface);\n content: \" *\";\n}\n\n.time-range-picker-content road-input{\n margin-bottom: 0;\n}\n\n.time-range-picker .messages {\n display: flex;\n flex-direction: column;\n}\n\n.invalid-feedback {\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.invalid-feedback road-icon{\n color: var(--road-danger-icon);\n}\n\n/* Cible directement le road-input avec la classe error-border */\n:host() road-input.error-border{\n border-radius: 0.25rem;\n outline: 1px solid var(--road-danger-outline);\n outline-offset: -1px;\n}\n\n\n\n\n\n\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, Element } from '@stencil/core';\nimport type { RoadInputCustomEvent } from '../../components';\n\n/**\n * @slot start - Input de début\n * @slot end - Input de fin\n * @slot separator - Label séparateur (optionnel)\n */\n@Component({\n tag: 'road-time-range-picker',\n styleUrl: 'time-range-picker.css',\n scoped: true,\n})\nexport class RoadTimeRangePicker {\n @Element() hostEl!: HTMLElement;\n\n /** Heure de début */\n @Prop({ mutable: true }) start?: string;\n\n /** Heure de fin */\n @Prop({ mutable: true }) end?: string;\n\n /** Désactivation du picker */\n @Prop() disabled = false;\n\n /** Helper message */\n @Prop() helper?: string;\n\n /** Separator label */\n @Prop() separator?: string;\n\n /** Si `true`, l’utilisateur doit remplir avant submit */\n @Prop() required = false;\n\n /** Label global du champ */\n @Prop() label?: string;\n\n /** Taille du champ */\n @Prop() sizes: 'lg' | 'xl' = 'lg';\n\n /** Error messages */\n @Prop() error?: string | string[];\n\n /** Événement quand la plage change */\n @Event() roadChange!: EventEmitter<{ start?: string; end?: string }>;\n\n /** Forward des events enfants */\n @Event() roadInput!: EventEmitter<{ start?: string; end?: string }>;\n @Event() roadFocus!: EventEmitter<'start' | 'end'>;\n @Event() roadBlur!: EventEmitter<'start' | 'end'>;\n\n /** Retourne les messages d'erreur sous forme de tableau */\n private get errorMessages(): string[] {\n if (!this.error) return [];\n if (Array.isArray(this.error)) return this.error.flatMap(e => (typeof e === 'string' ? e.split(',') : [e]));\n return this.error.split(',');\n }\n\n /** Ajoute ou retire la classe error-border sur le road-input */\nprivate async updateInvalidClasses() {\n const inputs = Array.from(\n this.hostEl.querySelectorAll('road-input[slot=\"start\"], road-input[slot=\"end\"]')\n ) as any[];\n\n for (const inputEl of inputs) {\n await inputEl.componentOnReady?.();\n if (this.errorMessages.length > 0) {\n inputEl.style.borderRadius = '0.25rem';\n inputEl.style.outline = `1px solid var(--road-danger-outline)`;\n inputEl.style.outlineOffset = '-1px';\n } else {\n inputEl.style.borderRadius = '';\n inputEl.style.outline = '';\n inputEl.style.outlineOffset = '';\n }\n }\n}\n\n\n /** Vérifie que start <= end et met à jour l’erreur */\n private validateRange() {\n if (this.start && this.end && this.start > this.end) {\n this.error = 'L’heure de début doit être inférieure à l’heure de fin.';\n } else {\n this.error = undefined;\n }\n }\n\n /** Émet les changements */\n private async emitChange() {\n this.validateRange();\n this.roadChange.emit({ start: this.start, end: this.end });\n await this.updateInvalidClasses();\n }\n\n /** Handle change depuis le slot start */\n private handleStartChange = (e: RoadInputCustomEvent<{ value: string | null | undefined }>) => {\n this.start = e.detail.value ?? undefined;\n this.emitChange();\n };\n\n /** Handle change depuis le slot end */\n private handleEndChange = (e: RoadInputCustomEvent<{ value: string | null | undefined }>) => {\n this.end = e.detail.value ?? undefined;\n this.emitChange();\n };\n\n componentDidLoad() {\n const startSlot = this.hostEl.querySelector('[slot=\"start\"]') as any;\n const endSlot = this.hostEl.querySelector('[slot=\"end\"]') as any;\n\n if (startSlot) {\n startSlot.addEventListener('roadChange', this.handleStartChange as EventListener);\n }\n if (endSlot) {\n endSlot.addEventListener('roadChange', this.handleEndChange as EventListener);\n }\n\n this.updateInvalidClasses();\n }\n\n @Method()\n async getRange() {\n return { start: this.start, end: this.end };\n }\n\n render() {\n return (\n <Host class={`time-range-picker input-${this.sizes}`}>\n {/* Label global */}\n {this.label && (\n <p class=\"label m-0\">\n {this.label}\n {this.required && <span class=\"required-indicator\"> *</span>}\n </p>\n )}\n\n <div class=\"time-range-picker-content d-flex align-items-center my-4\">\n {/* Slot start */}\n <slot name=\"start\"></slot>\n\n <span class=\"separator mx-12\">{this.separator}</span>\n\n {/* Slot end */}\n <slot name=\"end\"></slot>\n </div>\n\n {/* Messages error */}\n <div class=\"messages mt-1\">\n {this.errorMessages.map((msg, index) => (\n <p key={index} class=\"invalid-feedback m-0\">\n <road-icon slot=\"start\" name=\"alert-error-solid\" aria-hidden=\"true\" size=\"sm\" />\n {msg.trim()}\n </p>\n ))}\n </div>\n\n {/* Helper */}\n {this.helper && <p class=\"helper mt-1\">{this.helper}</p>}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-fee0103c.js');
-const index$1 = require('./index-bf8a763e.js');
+const index$1 = require('./index-0e4df560.js');
 const toastCss = ":host{position:fixed;right:0;bottom:1rem;left:0;z-index:1;display:flex;justify-content:center;width:328px;margin:0 auto;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s ease-in-out,visibility .15s,transform .3s ease-in-out;transform:translateY(-100%)}@media (min-width: 1200px){:host{right:1.5rem;bottom:3rem;left:auto;width:auto;transform:translateX(100%)}}:host(.toast-open){visibility:visible;opacity:1;transform:none}.toast{position:relative;box-sizing:border-box;display:flex;flex:0 0 100%;flex-flow:wrap;align-items:flex-start;width:328px;padding:0.75rem 2rem 0.6rem 1rem;font-family:var(--road-font);font-size:var(--road-body-medium);line-height:1.4;color:var(--road-on-info-surface-inverse);text-align:left;background:var(--road-info-surface-inverse);border-radius:0.25rem}@media (min-width: 575px){.toast{padding:1rem;margin-right:auto;margin-left:auto}}.toast-danger{color:var(--road-on-danger-surface-inverse);pointer-events:all;background:var(--road-danger-surface-inverse)}.toast-danger road-icon{color:var(--road-danger-icon-inverse)}.toast-warning{color:var(--road-on-warning-surface-inverse);background:var(--road-warning-surface-inverse)}.toast-warning road-icon{color:var(--road-warning-icon-inverse)}.toast-success{color:var(--road-on-success-surface-inverse);background:var(--road-success-surface-inverse)}.toast-success road-icon{color:var(--road-success-icon-inverse)}.toast-info{color:var(--road-on-info-surface-inverse);background:var(--road-info-surface-inverse)}.toast-info road-icon{color:var(--road-info-icon-inverse)}.toast-icon{top:auto;left:0.5rem;margin-top:-5px;margin-right:0.5rem}@media (min-width: 575px){.toast-icon{position:relative;top:auto;left:auto;margin-right:0.5rem}}.toast-close{position:absolute;right:0.5rem;padding:0;color:inherit;cursor:pointer;background:none;border:0;border-radius:4px;fill:var(--road-info-icon-inverse)}.toast-warning .toast-close{fill:var(--road-warning-icon-inverse)}.toast-close:focus{border-color:var(--road-info-surface-inverse);outline:none}.toast-label{width:240px;margin:0}:host ::slotted(road-progress){position:absolute;bottom:-8px;left:0;flex-basis:100%;width:100%;margin-top:0.5rem}@keyframes load{0%{width:0}100%{width:100%}}";
 const RoadToastStyle0 = toastCss;
@@ -88,7 +88,7 @@ const Toast = class {
         if (this.color == 'danger') {
             this.timeout = 0;
         }
-        return (index.h(index.Host, { key: '6f7087bd4eb183f58cde02e0a890e6ab18b6c5b8', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: 'a2494ef9b74ad9fac5d8b81c810bdcfe52936fef', class: `toast toast-${this.color}` }, index.h("road-icon", { key: '4be95019df5ab21b94508a62afd80f0d89d42150', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: 'ca9901aed33cf158c16eadf8587b90ae235dd933', class: "toast-label" }, this.label), index.h("button", { key: 'abdb172097d82844c78e608264995aa8568fdf23', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: 'a6c17efe9a3255210498348ced0ab1e7b5dd8b8c', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: 'ee1c9f42ddb4efaf69466d51edd10c256b35bd22', name: "progress" }))));
+        return (index.h(index.Host, { key: 'ece8943a5a8f0bb9502bf37f8583ade2d43c66eb', class: `${toastIsOpenClass}`, role: "alert" }, index.h("div", { key: '1973b3896a8afba311e4232417d605c28c0e6459', class: `toast toast-${this.color}` }, index.h("road-icon", { key: '8f23c478957da854818a3c64ed0dc25cf2423cbf', class: "toast-icon", icon: icon, "aria-hidden": "true" }), index.h("p", { key: '3769dcd2be747707411f916713bffeaf40311188', class: "toast-label" }, this.label), index.h("button", { key: '9e8c10bc7ee761e32012b70374cfbc76fac4ba5d', type: "button", class: "toast-close", "aria-label": "Close", onClick: this.onClick }, index.h("road-icon", { key: '48838f6a48dcf5b7cefe0a1de74d563d71354df4', icon: index$1.navigationClose, size: "md" })), index.h("slot", { key: '39be4682effadb74b40960c994c0dbe801f0c606', name: "progress" }))));
     }
     static get watchers() { return {
         "isOpen": ["isOpenChanged"]