@roadtrip/components 3.21.0 → 3.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +5 -3
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-range.cjs.entry.js +37 -25
- package/dist/cjs/road-range.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select-filter.cjs.entry.js +1 -1
- package/dist/cjs/road-select-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/drawer/drawer.js +20 -1
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/collection/components/drawer/drawer.stories.js +4 -0
- package/dist/collection/components/icon/icon.css +4 -4
- package/dist/collection/components/item/item.css +5 -3
- package/dist/collection/components/item/item.stories.js +8 -0
- package/dist/collection/components/range/range.css +28 -8
- package/dist/collection/components/range/range.js +56 -26
- package/dist/collection/components/range/range.js.map +1 -1
- package/dist/collection/components/range/range.stories.js +5 -1
- package/dist/collection/components/select-filter/select-filter.css +1 -0
- package/dist/collection/components/tooltip/tooltip.css +59 -2
- package/dist/collection/components/tooltip/tooltip.js +2 -2
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.stories.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-badge_14.entry.js +5 -3
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-range.entry.js +37 -25
- package/dist/esm/road-range.entry.js.map +1 -1
- package/dist/esm/road-select-filter.entry.js +1 -1
- package/dist/esm/road-select-filter.entry.js.map +1 -1
- package/dist/esm/road-tooltip.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js.map +1 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +20 -0
- package/dist/roadtrip/p-18c7fb2f.entry.js +2 -0
- package/dist/roadtrip/p-18c7fb2f.entry.js.map +1 -0
- package/dist/roadtrip/{p-73b4f413.entry.js → p-bc217d07.entry.js} +2 -2
- package/dist/roadtrip/{p-73b4f413.entry.js.map → p-bc217d07.entry.js.map} +1 -1
- package/dist/roadtrip/p-c653d32d.entry.js +2 -0
- package/dist/roadtrip/p-c653d32d.entry.js.map +1 -0
- package/dist/roadtrip/p-d5f9dfea.entry.js +2 -0
- package/dist/roadtrip/p-d5f9dfea.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/types/components/drawer/drawer.d.ts +4 -0
- package/dist/types/components/range/range.d.ts +7 -3
- package/dist/types/components/tooltip/tooltip.d.ts +1 -1
- package/dist/types/components.d.ts +24 -0
- package/hydrate/index.js +47 -31
- package/package.json +1 -1
- package/dist/roadtrip/p-3c740697.entry.js +0 -2
- package/dist/roadtrip/p-3c740697.entry.js.map +0 -1
- package/dist/roadtrip/p-418ca731.entry.js +0 -2
- package/dist/roadtrip/p-418ca731.entry.js.map +0 -1
- package/dist/roadtrip/p-c096723c.entry.js +0 -2
- package/dist/roadtrip/p-c096723c.entry.js.map +0 -1
package/dist/cjs/roadtrip.cjs.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
|
|
20
|
+
return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"ariaLabel\":[1,\"aria-label\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -34,6 +34,7 @@ export class Drawer {
|
|
|
34
34
|
this.hasBackIcon = false;
|
|
35
35
|
this.backText = undefined;
|
|
36
36
|
this.drawerTitle = undefined;
|
|
37
|
+
this.ariaLabel = undefined;
|
|
37
38
|
this.hasCloseIcon = true;
|
|
38
39
|
}
|
|
39
40
|
/**
|
|
@@ -88,11 +89,12 @@ export class Drawer {
|
|
|
88
89
|
render() {
|
|
89
90
|
const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
|
|
90
91
|
const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
|
|
92
|
+
const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';
|
|
91
93
|
const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
|
|
92
94
|
const backIconElement = this.hasBackIcon ? h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText) : '';
|
|
93
95
|
const closeIconElement = this.hasCloseIcon ? h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" })) : '';
|
|
94
96
|
const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
|
|
95
|
-
return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label":
|
|
97
|
+
return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": `${ariaLabel}` }, h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, h("div", { class: "drawer-content" }, h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? h("h2", { class: "drawer-title" }, this.drawerTitle) : h("div", { class: "drawer-title" }, h("slot", { name: "title" })), closeIconElement), h("div", { class: "drawer-body" }, h("slot", null)), this.hasFooterContent() && (h("footer", { class: "drawer-footer" }, h("slot", { name: "footer" })))))));
|
|
96
98
|
}
|
|
97
99
|
static get is() { return "road-drawer"; }
|
|
98
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -232,6 +234,23 @@ export class Drawer {
|
|
|
232
234
|
"attribute": "drawer-title",
|
|
233
235
|
"reflect": false
|
|
234
236
|
},
|
|
237
|
+
"ariaLabel": {
|
|
238
|
+
"type": "string",
|
|
239
|
+
"mutable": false,
|
|
240
|
+
"complexType": {
|
|
241
|
+
"original": "string",
|
|
242
|
+
"resolved": "string | undefined",
|
|
243
|
+
"references": {}
|
|
244
|
+
},
|
|
245
|
+
"required": false,
|
|
246
|
+
"optional": true,
|
|
247
|
+
"docs": {
|
|
248
|
+
"tags": [],
|
|
249
|
+
"text": "Aria label of the drawer"
|
|
250
|
+
},
|
|
251
|
+
"attribute": "aria-label",
|
|
252
|
+
"reflect": false
|
|
253
|
+
},
|
|
235
254
|
"hasCloseIcon": {
|
|
236
255
|
"type": "boolean",
|
|
237
256
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEpE;;;;;;;;GAQG;AAQH,MAAM,OAAO,MAAM;;
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host, Watch } from '@stencil/core';\nimport { navigationClose, navigationChevron } from '../../../icons';\n\n/**\n * @slot - Content of the drawer.\n * @slot title - replace the title with a custom title section when `'drawerTitle'` is not set\n * @slot footer - footer of the drawer\n * `<div slot=\"footer\">`\n `<road-button color=\"primary\" outline=\"true\" expand=\"true\">Annuler</road-button>`\n `<road-button color=\"primary\" expand=\"true\" class=\"mb-0\">Valider</road-button>`\n ` </div>`\n */\n\n\n@Component({\n tag: 'road-drawer',\n styleUrl: 'drawer.css',\n shadow: true,\n})\nexport class Drawer {\n\n /**\n * Current reference of the drawer\n */\n @Element() el!: HTMLRoadDrawerElement;\n\n /**\n * Set isOpen property to true to open the drawer\n */\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /**\n * position of the drawer. e.g. left, right, bottom\n */\n @Prop() position: string = 'left';\n\n /**\n * Width of the drawer\n */\n @Prop() drawerWidth: number = 480;\n\n /**\n * Inverse header colors\n */\n @Prop() hasInverseHeader: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() hasBackIcon: boolean = false;\n\n /**\n * Show / hide back icon\n */\n @Prop() backText?: string;\n\n /**\n * Title of the drawer in the header bar\n */\n @Prop() drawerTitle?: string;\n\n /**\n * Aria label of the drawer\n */\n @Prop() ariaLabel?: string;\n\n /**\n * Show / hide close icon\n */\n @Prop() hasCloseIcon: boolean = true;\n\n /**\n * Indicate when opening the drawer\n */\n @Event({ eventName: 'open' }) onOpen!: EventEmitter<void>;\n\n /**\n * Indicate when closing the drawer\n */\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /**\n * Indicate when return to previous state of the drawer content\n */\n @Event({ eventName: 'back' }) onBack!: EventEmitter<void>;\n\n /**\n * Open the drawer\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the drawer\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n /**\n * Return to previous state of the drawer content\n */\n @Method()\n async back() {\n this.onBack.emit();\n }\n\n @Watch('isOpen')\n handleOpen(openValue: boolean) {\n if(openValue === true) {\n this.onOpen.emit();\n } else {\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n this.el.shadowRoot && ((this.el.shadowRoot.querySelector('.drawer-body') as HTMLElement).scrollTop = 0);\n }, { once: true});\n }\n }\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClick = (ev: UIEvent) => {\n ev.stopPropagation();\n ev.preventDefault();\n\n this.close();\n };\n\n /**\n * Close the dialog when clicking on the cross or layer\n */\n private onClickBack = (event: MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n\n this.back();\n };\n\n /**\n * Close the dialog when press Escape key\n */\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if (event.key === 'Escape' || event.key === \"Esc\") {\n this.close();\n }\n }\n\n /**\n * Call close function when clicking an element with data-dismiss=\"modal\" attribute\n */\n componentDidLoad() {\n this.el.querySelectorAll('[data-dismiss=\"modal\"]').forEach(item => {\n item.addEventListener('click', () => this.close());\n });\n }\n\n private hasFooterContent(): boolean {\n const footerSlot = this.el.querySelector('[slot=\"footer\"]');\n return footerSlot !== null && footerSlot.childElementCount > 0;\n }\n\n render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\n const ariaLabel = this.ariaLabel !== undefined ? this.ariaLabel : 'drawer';\n const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';\n const backIconElement = this.hasBackIcon ? <button type=\"button\" class=\"drawer-action\" aria-label=\"Back\" onClick={this.onClickBack}><road-icon icon={navigationChevron} rotate=\"180\"></road-icon>{this.backText}</button> : '';\n const closeIconElement = this.hasCloseIcon ? <button type=\"button\" class=\"drawer-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button> : '';\n const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';\n\n return (\n <Host class={`${drawerIsOpenClass} drawer-${this.position}`} tabindex=\"0\" role=\"dialog\" aria-label={`${ariaLabel}`}>\n <div class=\"drawer-overlay\" onClick={this.onClick} tabindex=\"-1\"></div>\n <div class=\"drawer-dialog\" style={{ maxWidth: `${drawerWidthValue}` }} role=\"document\" tabindex=\"0\">\n <div class=\"drawer-content\">\n <header class={`drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}`}>\n {backIconElement}\n {this.drawerTitle !== undefined ? <h2 class=\"drawer-title\">{this.drawerTitle}</h2> : <div class=\"drawer-title\"><slot name=\"title\" /></div>}\n {closeIconElement}\n </header>\n <div class=\"drawer-body\">\n <slot/>\n </div>\n {this.hasFooterContent() && (\n <footer class=\"drawer-footer\">\n <slot name=\"footer\"/>\n </footer>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}"]}
|
|
@@ -55,6 +55,9 @@ export default {
|
|
|
55
55
|
'title': {
|
|
56
56
|
control: 'text',
|
|
57
57
|
},
|
|
58
|
+
'aria-label': {
|
|
59
|
+
control: 'text',
|
|
60
|
+
},
|
|
58
61
|
' ': {
|
|
59
62
|
control: 'text',
|
|
60
63
|
},
|
|
@@ -166,6 +169,7 @@ const Template = (args) => html`
|
|
|
166
169
|
has-inverse-header="${ifDefined(args['has-inverse-header'])}"
|
|
167
170
|
drawer-width="${ifDefined(args['drawer-width'])}"
|
|
168
171
|
drawer-title="${ifDefined(args['drawer-title'])}"
|
|
172
|
+
aria-label="${ifDefined(args['aria-label'])}"
|
|
169
173
|
>
|
|
170
174
|
${unsafeHTML(args['title'])}
|
|
171
175
|
${unsafeHTML(args[' '])}
|
|
@@ -69,22 +69,22 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
:host(.icon-info) {
|
|
72
|
-
color: var(--road-info-
|
|
72
|
+
color: var(--road-info-icon);
|
|
73
73
|
fill: currentColor;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
:host(.icon-success) {
|
|
77
|
-
color: var(--road-success-
|
|
77
|
+
color: var(--road-success-icon);
|
|
78
78
|
fill: currentColor;
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
:host(.icon-warning) {
|
|
82
|
-
color: var(--road-warning-
|
|
82
|
+
color: var(--road-warning-icon);
|
|
83
83
|
fill: currentColor;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
:host(.icon-danger) {
|
|
87
|
-
color: var(--road-danger-
|
|
87
|
+
color: var(--road-danger-icon);
|
|
88
88
|
fill: currentColor;
|
|
89
89
|
}
|
|
90
90
|
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
/**
|
|
14
14
|
* @prop --border-radius: Radius of the item border
|
|
15
15
|
* @prop --background-color: Background of the item
|
|
16
|
+
* @prop --border-color: Border of the item button
|
|
16
17
|
* @prop --min-height: Minimum height of the item
|
|
17
18
|
* @prop --padding-left: Padding left of the native element
|
|
18
19
|
* @prop --inner-padding: inner padding of the item
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
:host {
|
|
23
24
|
--border-radius: var(--road-spacing-02);
|
|
24
25
|
--background-color: var(--road-surface);
|
|
26
|
+
--border-color: var(--road-outline-variant);
|
|
25
27
|
--detail-color: var(--road-icon);
|
|
26
28
|
|
|
27
29
|
position: relative;
|
|
@@ -66,7 +68,7 @@
|
|
|
66
68
|
color: var(--road-on-surface);
|
|
67
69
|
text-align: left;
|
|
68
70
|
background-color: var(--background-color);
|
|
69
|
-
border: 2px solid
|
|
71
|
+
border: 2px solid transparent;
|
|
70
72
|
outline: none;
|
|
71
73
|
transition: background 0.15s ease-in-out;
|
|
72
74
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
@@ -77,7 +79,7 @@
|
|
|
77
79
|
*/
|
|
78
80
|
|
|
79
81
|
.item-active {
|
|
80
|
-
border: 2px solid var(--
|
|
82
|
+
border: 2px solid var(--border-color);
|
|
81
83
|
}
|
|
82
84
|
|
|
83
85
|
/**
|
|
@@ -86,7 +88,7 @@
|
|
|
86
88
|
|
|
87
89
|
button.item-native:not(:disabled):not(.item-active):hover,
|
|
88
90
|
button.item-native:not(:disabled):not(.item-active):focus {
|
|
89
|
-
border: 2px solid var(--
|
|
91
|
+
border: 2px solid var(--border-color);
|
|
90
92
|
}
|
|
91
93
|
|
|
92
94
|
/**
|
|
@@ -130,6 +130,14 @@ Playground.argTypes = {
|
|
|
130
130
|
type: null,
|
|
131
131
|
},
|
|
132
132
|
},
|
|
133
|
+
'--border-color': {
|
|
134
|
+
table: {
|
|
135
|
+
defaultValue: { summary: 'var(--road-outline-variant)' },
|
|
136
|
+
},
|
|
137
|
+
control: {
|
|
138
|
+
type: null,
|
|
139
|
+
},
|
|
140
|
+
},
|
|
133
141
|
'--detail-color': {
|
|
134
142
|
table: {
|
|
135
143
|
defaultValue: { summary: 'var(--road-grey-900)' },
|
|
@@ -96,19 +96,23 @@
|
|
|
96
96
|
/* PROGRESS
|
|
97
97
|
-------------------- */
|
|
98
98
|
|
|
99
|
-
.form-range-progress::after {
|
|
99
|
+
.form-range-progress.sc-road-range::after {
|
|
100
100
|
position: absolute;
|
|
101
101
|
top: 0;
|
|
102
102
|
right: 0;
|
|
103
103
|
left: 0;
|
|
104
104
|
display: block;
|
|
105
|
-
width: calc((var(--value) * 100%) / var(--max));
|
|
105
|
+
width: calc(((var(--value) - var(--min)) * 100%) / (var(--max) - var(--min)));
|
|
106
106
|
height: 0.5rem;
|
|
107
107
|
content: "";
|
|
108
108
|
background: var(--road-primary);
|
|
109
109
|
border-radius: 1.125rem;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
:host(.disabled) .form-range-progress.sc-road-range::after {
|
|
113
|
+
background: var(--road-surface-disabled);
|
|
114
|
+
}
|
|
115
|
+
|
|
112
116
|
/* CURSOR
|
|
113
117
|
-------------------- */
|
|
114
118
|
|
|
@@ -140,20 +144,36 @@
|
|
|
140
144
|
appearance: none;
|
|
141
145
|
}
|
|
142
146
|
|
|
147
|
+
/* Styles for disabled state */
|
|
148
|
+
:host(.disabled) .form-range-input::-webkit-slider-thumb,
|
|
149
|
+
:host(.disabled) .form-range-input::-moz-range-thumb {
|
|
150
|
+
cursor: not-allowed;
|
|
151
|
+
background: var(--road-on-surface-disabled);
|
|
152
|
+
box-shadow: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:host(.disabled) .form-range-input {
|
|
156
|
+
pointer-events: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:host(.disabled) {
|
|
160
|
+
cursor: not-allowed;
|
|
161
|
+
}
|
|
162
|
+
|
|
143
163
|
/**
|
|
144
164
|
* Focus state
|
|
145
165
|
*/
|
|
146
166
|
|
|
147
|
-
:host(.focus-visible) .form-range-input::-webkit-slider-thumb,
|
|
148
|
-
:host(:active) .form-range-input::-webkit-slider-thumb,
|
|
149
|
-
:host(:focus) .form-range-input::-webkit-slider-thumb {
|
|
167
|
+
:host(:not(.disabled).focus-visible) .form-range-input::-webkit-slider-thumb,
|
|
168
|
+
:host(:not(.disabled):active) .form-range-input::-webkit-slider-thumb,
|
|
169
|
+
:host(:not(.disabled):focus) .form-range-input::-webkit-slider-thumb {
|
|
150
170
|
background: var(--road-input-surface-variant);
|
|
151
171
|
border: 0.5rem solid var(--road-grey-100-new);
|
|
152
172
|
}
|
|
153
173
|
|
|
154
|
-
:host(.focus-visible) .form-range-input::-moz-range-thumb,
|
|
155
|
-
:host(:active) .form-range-input::-moz-range-thumb,
|
|
156
|
-
:host(:focus) .form-range-input::-moz-range-thumb {
|
|
174
|
+
:host(:not(.disabled).focus-visible) .form-range-input::-moz-range-thumb,
|
|
175
|
+
:host(:not(.disabled):active) .form-range-input::-moz-range-thumb,
|
|
176
|
+
:host(:not(.disabled):focus) .form-range-input::-moz-range-thumb {
|
|
157
177
|
background: var(--road-input-surface-variant);
|
|
158
178
|
border: 0.5rem solid var(--road-grey-100-new);
|
|
159
179
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, Host } from "@stencil/core";
|
|
1
|
+
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import { navigationAddLessSolid, navigationAddMoreSolid } from "../../../icons";
|
|
3
3
|
/**
|
|
4
4
|
* @slot datalist - list of labels. also put show-labels="true" and max="10" for this exemple
|
|
@@ -21,61 +21,73 @@ export class Range {
|
|
|
21
21
|
this.onInput = (ev) => {
|
|
22
22
|
const input = ev.target;
|
|
23
23
|
if (input) {
|
|
24
|
-
this.value = input.value ||
|
|
24
|
+
this.value = input.value || "";
|
|
25
25
|
}
|
|
26
26
|
if (this.value !== null && this.value !== undefined) {
|
|
27
|
-
this.el.style.setProperty(
|
|
27
|
+
this.el.style.setProperty("--value", `${this.value}`);
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
this.rangeId = `road-range-${rangeIds++}`;
|
|
31
|
-
this.value =
|
|
31
|
+
this.value = "";
|
|
32
32
|
this.min = undefined;
|
|
33
33
|
this.max = undefined;
|
|
34
34
|
this.step = undefined;
|
|
35
35
|
this.showValue = false;
|
|
36
36
|
this.showTick = false;
|
|
37
37
|
this.showLabels = false;
|
|
38
|
+
this.disabled = false;
|
|
38
39
|
}
|
|
39
40
|
/**
|
|
40
41
|
* Update the native input element when the value changes
|
|
41
42
|
*/
|
|
42
43
|
valueChanged() {
|
|
43
|
-
this.roadchange.emit({
|
|
44
|
-
|
|
44
|
+
this.roadchange.emit({
|
|
45
|
+
value: this.value == null ? this.value : this.value.toString(),
|
|
46
|
+
});
|
|
47
|
+
this.roadChange.emit({
|
|
48
|
+
value: this.value == null ? this.value : this.value.toString(),
|
|
49
|
+
});
|
|
45
50
|
}
|
|
46
51
|
getValue() {
|
|
47
|
-
return typeof this.value ===
|
|
52
|
+
return typeof this.value === "number"
|
|
48
53
|
? this.value.toString()
|
|
49
|
-
: (this.value ||
|
|
54
|
+
: (this.value || "").toString();
|
|
50
55
|
}
|
|
51
56
|
handleFocus() {
|
|
52
|
-
this.el.classList.add(
|
|
57
|
+
this.el.classList.add("focus-visible");
|
|
53
58
|
}
|
|
54
59
|
handleBlur() {
|
|
55
|
-
this.el.classList.remove(
|
|
60
|
+
this.el.classList.remove("focus-visible");
|
|
56
61
|
}
|
|
57
62
|
componentDidLoad() {
|
|
58
63
|
// Cacher le label pour accessibilité
|
|
59
|
-
const label = this.el.querySelector(
|
|
60
|
-
const input = this.el.querySelector(
|
|
64
|
+
const label = this.el.querySelector(".form-label");
|
|
65
|
+
const input = this.el.querySelector(".form-control.sc-road-input");
|
|
61
66
|
if (label) {
|
|
62
|
-
label.style.clip =
|
|
63
|
-
label.style.border =
|
|
64
|
-
label.style.height =
|
|
65
|
-
label.style.left =
|
|
66
|
-
label.style.margin =
|
|
67
|
-
label.style.overflow =
|
|
68
|
-
label.style.padding =
|
|
69
|
-
label.style.position =
|
|
70
|
-
label.style.top =
|
|
71
|
-
label.style.width =
|
|
72
|
-
input.style.padding =
|
|
67
|
+
label.style.clip = "rect(0 0 0 0)";
|
|
68
|
+
label.style.border = "0";
|
|
69
|
+
label.style.height = "1px";
|
|
70
|
+
label.style.left = "0";
|
|
71
|
+
label.style.margin = "-1px";
|
|
72
|
+
label.style.overflow = "hidden";
|
|
73
|
+
label.style.padding = "0";
|
|
74
|
+
label.style.position = "absolute";
|
|
75
|
+
label.style.top = "0";
|
|
76
|
+
label.style.width = "1px";
|
|
77
|
+
input.style.padding = "0 1rem 0";
|
|
73
78
|
}
|
|
74
79
|
}
|
|
75
80
|
render() {
|
|
76
81
|
const value = this.getValue();
|
|
77
|
-
const datalist = this.showLabels !== undefined ? `tickmarks` :
|
|
78
|
-
return (h(Host, { tabindex: "0" }, h("div", { class: "form-group d-flex align-items-end" }, this.showTick && h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size:
|
|
82
|
+
const datalist = this.showLabels !== undefined ? `tickmarks` : "";
|
|
83
|
+
return (h(Host, { tabindex: "0", class: { disabled: this.disabled } }, h("div", { class: "form-group d-flex align-items-end" }, this.showTick && (h("road-icon", { icon: navigationAddLessSolid, class: "mr-8", size: "sm" })), h("div", { class: "form-range", style: {
|
|
84
|
+
"--min": this.min,
|
|
85
|
+
"--max": this.max,
|
|
86
|
+
"--value": value,
|
|
87
|
+
"--background-color": this.disabled
|
|
88
|
+
? "var(--road-surface-disabled)"
|
|
89
|
+
: "initial",
|
|
90
|
+
} }, this.showValue && h("output", null), this.showLabels && h("slot", { name: "datalist" }), h("input", { type: "range", class: "form-range-input", id: this.rangeId, min: this.min, max: this.max, value: value, onInput: this.onInput, list: datalist, "aria-label": "Valeur", tabindex: "0", disabled: this.disabled }), h("label", { class: "form-range-label" }, "Valeur"), h("div", { class: "form-range-progress" })), this.showTick && (h("road-icon", { icon: navigationAddMoreSolid, class: "ml-8", size: "sm" })))));
|
|
79
91
|
}
|
|
80
92
|
static get is() { return "road-range"; }
|
|
81
93
|
static get encapsulation() { return "scoped"; }
|
|
@@ -125,7 +137,7 @@ export class Range {
|
|
|
125
137
|
},
|
|
126
138
|
"attribute": "value",
|
|
127
139
|
"reflect": false,
|
|
128
|
-
"defaultValue": "
|
|
140
|
+
"defaultValue": "\"\""
|
|
129
141
|
},
|
|
130
142
|
"min": {
|
|
131
143
|
"type": "string",
|
|
@@ -231,6 +243,24 @@ export class Range {
|
|
|
231
243
|
"attribute": "show-labels",
|
|
232
244
|
"reflect": false,
|
|
233
245
|
"defaultValue": "false"
|
|
246
|
+
},
|
|
247
|
+
"disabled": {
|
|
248
|
+
"type": "boolean",
|
|
249
|
+
"mutable": false,
|
|
250
|
+
"complexType": {
|
|
251
|
+
"original": "boolean",
|
|
252
|
+
"resolved": "boolean",
|
|
253
|
+
"references": {}
|
|
254
|
+
},
|
|
255
|
+
"required": false,
|
|
256
|
+
"optional": false,
|
|
257
|
+
"docs": {
|
|
258
|
+
"tags": [],
|
|
259
|
+
"text": "If true, the range will be disabled"
|
|
260
|
+
},
|
|
261
|
+
"attribute": "disabled",
|
|
262
|
+
"reflect": false,
|
|
263
|
+
"defaultValue": "false"
|
|
234
264
|
}
|
|
235
265
|
};
|
|
236
266
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range.js","sourceRoot":"","sources":["../../../src/components/range/range.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"range.js","sourceRoot":"","sources":["../../../src/components/range/range.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Element,\n Prop,\n Event,\n Host,\n EventEmitter,\n Watch,\n Listen,\n} from \"@stencil/core\";\nimport { navigationAddLessSolid, navigationAddMoreSolid } from \"../../../icons\";\n\n/**\n * @slot datalist - list of labels. also put show-labels=\"true\" and max=\"10\" for this exemple\n * `<datalist id=\"tickmarks\" slot=\"datalist\" class=\"tickmarks\">`\n `<option value=\"0\" label=\"0%\"></option>`\n `<option value=\"10\" label=\"10%\"></option>`\n `<option value=\"20\" label=\"20%\"></option>`\n `<option value=\"30\" label=\"30%\"></option>`\n `<option value=\"40\" label=\"40%\"></option>`\n `<option value=\"50\" label=\"50%\"></option>`\n `<option value=\"60\" label=\"60%\"></option>`\n `<option value=\"70\" label=\"70%\"></option>`\n `<option value=\"80\" label=\"80%\"></option>`\n `<option value=\"90\" label=\"90%\"></option>`\n `<option value=\"100\" label=\"100%\"></option>`\n `</datalist>`\n */\n\n@Component({\n tag: \"road-range\",\n styleUrl: \"range.css\",\n scoped: true,\n})\nexport class Range {\n @Element() el!: HTMLRoadRangeElement;\n\n /**\n * The id of range\n */\n @Prop() rangeId: string = `road-range-${rangeIds++}`;\n\n /**\n * The value of the range.\n */\n @Prop({ mutable: true }) value?: string | number | null = \"\";\n\n /**\n * The minimum value, which must not be greater than its maximum (max attribute) value.\n */\n @Prop() min!: string;\n\n /**\n * The maximum value, which must not be less than its minimum (min attribute) value.\n */\n @Prop() max!: string;\n\n /**\n * Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n */\n @Prop() step?: string;\n\n /**\n * Display the current value of the range\n */\n @Prop() showValue: boolean = false;\n\n /**\n * Display Tick of the range\n */\n @Prop() showTick: boolean = false;\n\n /**\n * Display labels of the range\n */\n @Prop() showLabels: boolean = false;\n\n /**\n * If true, the range will be disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch(\"value\")\n protected valueChanged() {\n this.roadchange.emit({\n value: this.value == null ? this.value : this.value.toString(),\n });\n this.roadChange.emit({\n value: this.value == null ? this.value : this.value.toString(),\n });\n }\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 private getValue(): string {\n return typeof this.value === \"number\"\n ? this.value.toString()\n : (this.value || \"\").toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || \"\";\n }\n if (this.value !== null && this.value !== undefined) {\n this.el.style.setProperty(\"--value\", `${this.value}`);\n }\n };\n\n @Listen(\"focus\", { capture: true })\n handleFocus() {\n this.el.classList.add(\"focus-visible\");\n }\n\n @Listen(\"blur\", { capture: true })\n handleBlur() {\n this.el.classList.remove(\"focus-visible\");\n }\n\n componentDidLoad() {\n // Cacher le label pour accessibilité\n\n const label = this.el.querySelector(\".form-label\") as HTMLElement;\n const input = this.el.querySelector(\n \".form-control.sc-road-input\"\n ) as HTMLElement;\n if (label) {\n label.style.clip = \"rect(0 0 0 0)\";\n label.style.border = \"0\";\n label.style.height = \"1px\";\n label.style.left = \"0\";\n label.style.margin = \"-1px\";\n label.style.overflow = \"hidden\";\n label.style.padding = \"0\";\n label.style.position = \"absolute\";\n label.style.top = \"0\";\n label.style.width = \"1px\";\n\n input.style.padding = \"0 1rem 0\";\n }\n }\n\n render() {\n const value = this.getValue();\n const datalist = this.showLabels !== undefined ? `tickmarks` : \"\";\n\n return (\n <Host tabindex=\"0\" class={{ disabled: this.disabled }}>\n <div class=\"form-group d-flex align-items-end\">\n {this.showTick && (\n <road-icon\n icon={navigationAddLessSolid}\n class=\"mr-8\"\n size=\"sm\"\n ></road-icon>\n )}\n <div\n class=\"form-range\"\n style={{\n \"--min\": this.min,\n \"--max\": this.max,\n \"--value\": value,\n \"--background-color\": this.disabled\n ? \"var(--road-surface-disabled)\"\n : \"initial\",\n }}\n >\n {this.showValue && <output></output>}\n {this.showLabels && <slot name=\"datalist\" />}\n <input\n type=\"range\"\n class=\"form-range-input\"\n id={this.rangeId}\n min={this.min}\n max={this.max}\n value={value}\n onInput={this.onInput}\n list={datalist}\n aria-label=\"Valeur\"\n tabindex=\"0\"\n disabled={this.disabled}\n />\n <label class=\"form-range-label\">Valeur</label>\n <div class=\"form-range-progress\"></div>\n </div>\n {this.showTick && (\n <road-icon\n icon={navigationAddMoreSolid}\n class=\"ml-8\"\n size=\"sm\"\n ></road-icon>\n )}\n </div>\n </Host>\n );\n }\n}\n\nlet rangeIds = 0;\n"]}
|
|
@@ -39,6 +39,9 @@ export default {
|
|
|
39
39
|
type: null,
|
|
40
40
|
},
|
|
41
41
|
},
|
|
42
|
+
disabled: {
|
|
43
|
+
control: 'boolean',
|
|
44
|
+
},
|
|
42
45
|
},
|
|
43
46
|
args: {
|
|
44
47
|
min: 0,
|
|
@@ -49,6 +52,7 @@ export default {
|
|
|
49
52
|
'show-tick': null,
|
|
50
53
|
'show-labels': null,
|
|
51
54
|
datalist: '',
|
|
55
|
+
disabled: null,
|
|
52
56
|
},
|
|
53
57
|
};
|
|
54
58
|
|
|
@@ -61,10 +65,10 @@ export const Playground = (args) => html`
|
|
|
61
65
|
show-value="${ifDefined(args['show-value'])}"
|
|
62
66
|
show-tick="${ifDefined(args['show-tick'])}"
|
|
63
67
|
show-labels="${ifDefined(args['show-labels'])}"
|
|
68
|
+
disabled="${ifDefined(args.disabled)}"
|
|
64
69
|
@roadchange=${event => args.roadchange(event.detail.value)}
|
|
65
70
|
class="d-flex align-items-end"
|
|
66
71
|
>
|
|
67
72
|
${unsafeHTML(args.datalist)}
|
|
68
73
|
</road-range>
|
|
69
|
-
|
|
70
74
|
`;
|