npm - @roadtrip/components - Versions diffs - 3.17.0 → 3.18.0 - Mend

@roadtrip/components 3.17.0 → 3.18.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 (325) hide show

package/dist/collection/components/carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport Swiper, {SwiperOptions, Autoplay, Pagination, Scrollbar, Keyboard, Zoom} from \"swiper\"\n\nSwiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]);\n\n/*\n @slot - content of the carousel, it should be road-carousel-item elements.\n /\n\n@Component({\n tag: 'road-carousel',\n styleUrl: 'carousel.css',\n shadow: true,\n})\nexport class Carousel {\n private paginationEl?: HTMLElement;\n private swiperReady = false;\n private mutationO?: MutationObserver;\n private readySwiper!: (swiper: Swiper) => void;\n private swiper: Promise<Swiper> = new Promise(resolve => {\n this.readySwiper = resolve;\n });\n private syncSwiper?: Swiper;\n private didInit = false;\n\n @Element() el!: HTMLRoadCarouselElement;\n\n /\n Options to pass to the swiper instance.\n * See http://idangero.us/swiper/api/ for valid options\n /\n @Prop() options: any = {}; // SwiperOptions; // TODO\n\n @Watch('options')\n async optionsChanged() {\n if (this.swiperReady) {\n const swiper = await this.getSwiper();\n Object.assign(swiper.params, this.options);\n await this.update();\n }\n }\n\n /\n If `true`, show the pagination.\n /\n @Prop() pager = true;\n\n /\n If `true`, show arrows.\n /\n @Prop() arrows = false;\n\n /\n Emitted after Swiper initialization\n /\n @Event() roadslidesdidload!: EventEmitter<void>;\n\n /\n Emitted when the user taps/clicks on the slide's container.\n /\n @Event() roadslidetap!: EventEmitter<void>;\n\n /\n Emitted when the user double taps on the slide's container.\n /\n @Event() roadslidedoubletap!: EventEmitter<void>;\n\n /\n Emitted before the active slide has changed.\n /\n @Event() roadslidewillchange!: EventEmitter<void>;\n\n /\n Emitted after the active slide has changed.\n /\n @Event() roadslidedidchange!: EventEmitter<void>;\n\n /\n Emitted when the next slide has started.\n /\n @Event() roadslidenextstart!: EventEmitter<void>;\n\n /\n Emitted when the previous slide has started.\n /\n @Event() roadslideprevstart!: EventEmitter<void>;\n\n /\n Emitted when the next slide has ended.\n /\n @Event() roadslidenextend!: EventEmitter<void>;\n\n /\n Emitted when the previous slide has ended.\n /\n @Event() roadslideprevend!: EventEmitter<void>;\n\n /\n Emitted when the slide transition has started.\n /\n @Event() roadslidetransitionstart!: EventEmitter<void>;\n\n /\n Emitted when the slide transition has ended.\n /\n @Event() roadslidetransitionend!: EventEmitter<void>;\n\n /\n Emitted when the slider is actively being moved.\n /\n @Event() roadslidedrag!: EventEmitter<void>;\n\n /\n Emitted when the slider is at its initial position.\n /\n @Event() roadslidereachstart!: EventEmitter<void>;\n\n /\n Emitted when the slider is at the last slide.\n /\n @Event() roadslidereachend!: EventEmitter<void>;\n\n /\n Emitted when the user first touches the slider.\n /\n @Event() roadslidetouchstart!: EventEmitter<void>;\n\n /\n Emitted when the user releases the touch.\n /\n @Event() roadslidetouchend!: EventEmitter<void>;\n\n connectedCallback() {\n // tslint:disable-next-line: strict-type-predicates\n if (typeof MutationObserver !== 'undefined') {\n const mut = this.mutationO = new MutationObserver(() => {\n if (this.swiperReady) {\n this.update();\n }\n });\n mut.observe(this.el, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n componentDidLoad(){\n if (!this.didInit) {\n this.didInit = true;\n this.initSwiper();\n }\n }\n\n disconnectedCallback() {\n if (this.mutationO) {\n this.mutationO.disconnect();\n this.mutationO = undefined;\n }\n\n /\n We need to synchronously destroy\n * swiper otherwise it is possible\n * that it will be left in a\n * destroyed state if connectedCallback\n * is called multiple times\n /\n const swiper = this.syncSwiper;\n if (swiper !== undefined) {\n swiper.destroy(true, true);\n this.swiper = new Promise(resolve => {\n this.readySwiper = resolve;\n });\n this.swiperReady = false;\n this.syncSwiper = undefined;\n }\n\n this.didInit = false;\n }\n\n /\n Update the underlying slider implementation. Call this if you've added or removed\n * child slides.\n /\n @Method()\n async update() {\n const [swiper] = await Promise.all([\n this.getSwiper(),\n waitForSlides(this.el)\n ]);\n swiper.update();\n }\n\n /\n Force swiper to update its height (when autoHeight is enabled) for the duration\n * equal to 'speed' parameter.\n \n @param speed The transition duration (in ms).\n /\n @Method()\n async updateAutoHeight(speed?: number) {\n const swiper = await this.getSwiper();\n swiper.updateAutoHeight(speed);\n }\n\n /\n Transition to the specified slide.\n \n @param index The index of the slide to transition to.\n * @param speed The transition duration (in ms).\n * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.\n /\n @Method()\n async slideTo(index: number, speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slideTo(index, speed, runCallbacks);\n }\n\n /\n Transition to the next slide.\n \n @param speed The transition duration (in ms).\n * @param runCallbacks If true, the transition will produce [Transition/SlideChange][Start/End] transition events.\n /\n @Method()\n async slideNext(speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slideNext(speed!, runCallbacks!);\n }\n\n /\n Transition to the previous slide.\n \n @param speed The transition duration (in ms).\n * @param runCallbacks If true, the transition will produce the [Transition/SlideChange][Start/End] transition events.\n /\n @Method()\n async slidePrev(speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slidePrev(speed, runCallbacks);\n }\n\n /\n Get the index of the active slide.\n /\n @Method()\n async getActiveIndex(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.activeIndex;\n }\n\n /\n Get the index of the previous slide.\n /\n @Method()\n async getPreviousIndex(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.previousIndex;\n }\n\n /\n Get the total number of slides.\n /\n @Method()\n async length(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.slides.length;\n }\n\n /\n Get whether or not the current slide is the last slide.\n /\n @Method()\n async isEnd(): Promise<boolean> {\n const swiper = await this.getSwiper();\n return swiper.isEnd;\n }\n\n /\n Get whether or not the current slide is the first slide.\n /\n @Method()\n async isBeginning(): Promise<boolean> {\n const swiper = await this.getSwiper();\n return swiper.isBeginning;\n }\n\n /\n Start auto play.\n /\n @Method()\n async startAutoplay() {\n const swiper = await this.getSwiper();\n if (swiper.autoplay) {\n swiper.autoplay.start();\n }\n }\n\n /\n Stop auto play.\n /\n @Method()\n async stopAutoplay() {\n const swiper = await this.getSwiper();\n if (swiper.autoplay) {\n swiper.autoplay.stop();\n }\n }\n\n /\n Lock or unlock the ability to slide to the next slide.\n \n @param lock If `true`, disable swiping to the next slide.\n /\n @Method()\n async lockSwipeToNext(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlideNext = !lock;\n }\n\n /\n Lock or unlock the ability to slide to the previous slide.\n \n @param lock If `true`, disable swiping to the previous slide.\n /\n @Method()\n async lockSwipeToPrev(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlidePrev = !lock;\n }\n\n /\n Lock or unlock the ability to slide to the next or previous slide.\n \n @param lock If `true`, disable swiping to the next and previous slide.\n /\n @Method()\n async lockSwipes(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlideNext = !lock;\n swiper.allowSlidePrev = !lock;\n swiper.allowTouchMove = !lock;\n }\n\n /\n Get the Swiper instance.\n * Use this to access the full Swiper API.\n * See https://idangero.us/swiper/api/ for all API options.\n */\n @Method()\n async getSwiper(): Promise<any> {\n return this.swiper;\n }\n\n private async initSwiper() {\n const finalOptions = this.normalizeOptions();\n\n // init swiper core\n await waitForSlides(this.el);\n // @ts-ignore\n const swiper = new Swiper(this.el, finalOptions);\n this.swiperReady = true;\n this.syncSwiper = swiper;\n this.readySwiper(swiper);\n }\n\n private normalizeOptions(): SwiperOptions {\n // Base options, can be changed\n // TODO Add interface SwiperOptions\n const swiperOptions: SwiperOptions = {\n effect: undefined,\n direction: 'horizontal',\n initialSlide: 0,\n loop: false,\n parallax: false,\n slidesPerView: 1,\n spaceBetween: 0,\n speed: 300,\n grid: {\n rows: 1,\n fill: 'column',\n },\n slidesPerGroup: 1,\n centeredSlides: false,\n slidesOffsetBefore: 0,\n slidesOffsetAfter: 0,\n touchEventsTarget: 'container',\n autoplay: false,\n freeMode: {\n enabled: false,\n momentum: true,\n momentumRatio: 1,\n momentumBounce: true,\n momentumBounceRatio: 1,\n momentumVelocityRatio: 1,\n sticky: false,\n minimumVelocity: 0.02,\n },\n autoHeight: false,\n setWrapperSize: false,\n zoom: {\n maxRatio: 3,\n minRatio: 1,\n toggle: false,\n },\n touchRatio: 1,\n touchAngle: 45,\n simulateTouch: true,\n touchStartPreventDefault: false,\n shortSwipes: true,\n longSwipes: true,\n longSwipesRatio: 0.5,\n longSwipesMs: 300,\n followFinger: true,\n threshold: 0,\n touchMoveStopPropagation: true,\n touchReleaseOnEdges: false,\n resistance: true,\n resistanceRatio: 0.85,\n watchSlidesProgress: false,\n preventClicks: true,\n preventClicksPropagation: true,\n slideToClickedSlide: false,\n loopAdditionalSlides: 0,\n noSwiping: true,\n runCallbacksOnInit: true,\n coverflowEffect: {\n rotate: 50,\n stretch: 0,\n depth: 100,\n modifier: 1,\n slideShadows: true,\n },\n flipEffect: {\n slideShadows: true,\n limitRotation: true,\n },\n cubeEffect: {\n slideShadows: true,\n shadow: true,\n shadowOffset: 20,\n shadowScale: 0.94,\n },\n fadeEffect: {\n crossFade: false,\n },\n a11y: {\n prevSlideMessage: 'Previous slide',\n nextSlideMessage: 'Next slide',\n firstSlideMessage: 'This is the first slide',\n lastSlideMessage: 'This is the last slide',\n },\n };\n\n if (this.pager) {\n swiperOptions.pagination = {\n el: this.paginationEl!,\n type: 'bullets',\n clickable: true,\n hideOnClick: false,\n };\n }\n\n // Keep the event options separate, we dont want users\n // overwriting these\n const eventOptions: SwiperOptions = {\n on: {\n init: () => {\n setTimeout(() => {\n this.roadslidesdidload.emit();\n }, 20);\n },\n // @ts-ignore\n slideChangeTransitionStart: this.roadslidewillchange.emit,\n // @ts-ignore\n slideChangeTransitionEnd: this.roadslidedidchange.emit,\n // @ts-ignore\n slideNextTransitionStart: this.roadslidenextstart.emit,\n // @ts-ignore\n slidePrevTransitionStart: this.roadslideprevstart.emit,\n // @ts-ignore\n slideNextTransitionEnd: this.roadslidenextend.emit,\n // @ts-ignore\n slidePrevTransitionEnd: this.roadslideprevend.emit,\n // @ts-ignore\n transitionStart: this.roadslidetransitionstart.emit,\n // @ts-ignore\n transitionEnd: this.roadslidetransitionend.emit,\n // @ts-ignore\n sliderMove: this.roadslidedrag.emit,\n // @ts-ignore\n reachBeginning: this.roadslidereachstart.emit,\n // @ts-ignore\n reachEnd: this.roadslidereachend.emit,\n // @ts-ignore\n touchStart: this.roadslidetouchstart.emit,\n // @ts-ignore\n touchEnd: this.roadslidetouchend.emit,\n // @ts-ignore\n tap: this.roadslidetap.emit,\n // @ts-ignore\n doubleTap: this.roadslidedoubletap.emit,\n },\n };\n\n const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};\n\n // merge \"on\" event listeners, while giving our event listeners priority\n const mergedEventOptions = { on: { ...customEvents, ...eventOptions.on } };\n\n // Merge the base, user options, and events together then pas to swiper\n return { ...swiperOptions, ...this.options, ...mergedEventOptions };\n }\n\n render() {\n return (\n <Host class=\"swiper-container\">\n <div class=\"swiper-wrapper\">\n <slot/>\n </div>\n {this.pager && <div class=\"swiper-pagination\" ref={el => this.paginationEl = el}></div>}\n {this.arrows && (\n <div class=\"swiper-button-prev\" onClick={() => this.el.slidePrev()}>\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n </div>\n )}\n {this.arrows && (\n <div class=\"swiper-button-next\" onClick={() => this.el.slideNext()}>\n <road-icon icon={navigationChevron}></road-icon>\n </div>\n )}\n </Host>\n );\n }\n}\n\nconst waitForSlides = (el: HTMLElement) => {\n return Promise.all(\n Array.from(el.querySelectorAll('road-carousel-item')).map(s => s.componentOnReady())\n );\n};\n"]}
1	+ {"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../../src/components/carousel/carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport Swiper, { SwiperOptions, Autoplay, Pagination, Scrollbar, Keyboard, Zoom } from \"swiper\"\n\nSwiper.use([Pagination, Scrollbar, Autoplay, Keyboard, Zoom]);\n\n@Component({\n tag: 'road-carousel',\n styleUrl: 'carousel.css',\n shadow: true,\n})\nexport class Carousel {\n private paginationEl?: HTMLElement;\n private swiperReady = false;\n private mutationO?: MutationObserver;\n private readySwiper!: (swiper: Swiper) => void;\n private swiper: Promise<Swiper> = new Promise(resolve => {\n this.readySwiper = resolve;\n });\n private syncSwiper?: Swiper;\n private didInit = false;\n\n @Element() el!: HTMLRoadCarouselElement;\n\n @Prop() options: any = {};\n\n @Watch('options')\n async optionsChanged() {\n if (this.swiperReady) {\n const swiper = await this.getSwiper();\n Object.assign(swiper.params, this.options);\n await this.update();\n }\n }\n\n @Prop() pager = true;\n @Prop() arrows = false;\n\n @Event() roadslidesdidload!: EventEmitter<void>;\n @Event() roadslidetap!: EventEmitter<void>;\n @Event() roadslidedoubletap!: EventEmitter<void>;\n @Event() roadslidewillchange!: EventEmitter<void>;\n @Event() roadslidedidchange!: EventEmitter<void>;\n @Event() roadslidenextstart!: EventEmitter<void>;\n @Event() roadslideprevstart!: EventEmitter<void>;\n @Event() roadslidenextend!: EventEmitter<void>;\n @Event() roadslideprevend!: EventEmitter<void>;\n @Event() roadslidetransitionstart!: EventEmitter<void>;\n @Event() roadslidetransitionend!: EventEmitter<void>;\n @Event() roadslidedrag!: EventEmitter<void>;\n @Event() roadslidereachstart!: EventEmitter<void>;\n @Event() roadslidereachend!: EventEmitter<void>;\n @Event() roadslidetouchstart!: EventEmitter<void>;\n @Event() roadslidetouchend!: EventEmitter<void>;\n\n connectedCallback() {\n if (typeof MutationObserver !== 'undefined') {\n const mut = this.mutationO = new MutationObserver(() => {\n if (this.swiperReady) {\n this.update();\n }\n });\n mut.observe(this.el, {\n childList: true,\n subtree: true,\n });\n }\n }\n\n componentDidLoad() {\n if (!this.didInit) {\n this.didInit = true;\n this.initSwiper();\n }\n this.setupKeyboardNavigation();\n }\n\n disconnectedCallback() {\n if (this.mutationO) {\n this.mutationO.disconnect();\n this.mutationO = undefined;\n }\n\n const swiper = this.syncSwiper;\n if (swiper !== undefined) {\n swiper.destroy(true, true);\n this.swiper = new Promise(resolve => {\n this.readySwiper = resolve;\n });\n this.swiperReady = false;\n this.syncSwiper = undefined;\n }\n\n this.didInit = false;\n }\n\n @Method()\n async update() {\n const [swiper] = await Promise.all([\n this.getSwiper(),\n waitForSlides(this.el)\n ]);\n swiper.update();\n }\n\n @Method()\n async updateAutoHeight(speed?: number) {\n const swiper = await this.getSwiper();\n swiper.updateAutoHeight(speed);\n }\n\n @Method()\n async slideTo(index: number, speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slideTo(index, speed, runCallbacks);\n }\n\n @Method()\n async slideNext(speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slideNext(speed!, runCallbacks!);\n }\n\n @Method()\n async slidePrev(speed?: number, runCallbacks?: boolean) {\n const swiper = await this.getSwiper();\n swiper.slidePrev(speed, runCallbacks);\n }\n\n @Method()\n async getActiveIndex(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.activeIndex;\n }\n\n @Method()\n async getPreviousIndex(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.previousIndex;\n }\n\n @Method()\n async length(): Promise<number> {\n const swiper = await this.getSwiper();\n return swiper.slides.length;\n }\n\n @Method()\n async isEnd(): Promise<boolean> {\n const swiper = await this.getSwiper();\n return swiper.isEnd;\n }\n\n @Method()\n async isBeginning(): Promise<boolean> {\n const swiper = await this.getSwiper();\n return swiper.isBeginning;\n }\n\n @Method()\n async startAutoplay() {\n const swiper = await this.getSwiper();\n if (swiper.autoplay) {\n swiper.autoplay.start();\n }\n }\n\n @Method()\n async stopAutoplay() {\n const swiper = await this.getSwiper();\n if (swiper.autoplay) {\n swiper.autoplay.stop();\n }\n }\n\n @Method()\n async lockSwipeToNext(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlideNext = !lock;\n }\n\n @Method()\n async lockSwipeToPrev(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlidePrev = !lock;\n }\n\n @Method()\n async lockSwipes(lock: boolean) {\n const swiper = await this.getSwiper();\n swiper.allowSlideNext = !lock;\n swiper.allowSlidePrev = !lock;\n swiper.allowTouchMove = !lock;\n }\n\n @Method()\n async getSwiper(): Promise<any> {\n return this.swiper;\n }\n\n private async initSwiper() {\n const finalOptions = this.normalizeOptions();\n\n await waitForSlides(this.el);\n const swiper = new Swiper(this.el, finalOptions);\n this.swiperReady = true;\n this.syncSwiper = swiper;\n this.readySwiper(swiper);\n }\n\n private normalizeOptions(): SwiperOptions {\n const swiperOptions: SwiperOptions = {\n effect: undefined,\n direction: 'horizontal',\n initialSlide: 0,\n loop: false,\n parallax: false,\n slidesPerView: 1,\n spaceBetween: 0,\n speed: 300,\n grid: {\n rows: 1,\n fill: 'column',\n },\n slidesPerGroup: 1,\n centeredSlides: false,\n slidesOffsetBefore: 0,\n slidesOffsetAfter: 0,\n touchEventsTarget: 'container',\n autoplay: false,\n freeMode: {\n enabled: false,\n momentum: true,\n momentumRatio: 1,\n momentumBounce: true,\n momentumBounceRatio: 1,\n momentumVelocityRatio: 1,\n sticky: false,\n minimumVelocity: 0.02,\n },\n autoHeight: false,\n setWrapperSize: false,\n zoom: {\n maxRatio: 3,\n minRatio: 1,\n toggle: false,\n },\n touchRatio: 1,\n touchAngle: 45,\n simulateTouch: true,\n touchStartPreventDefault: false,\n shortSwipes: true,\n longSwipes: true,\n longSwipesRatio: 0.5,\n longSwipesMs: 300,\n followFinger: true,\n threshold: 0,\n touchMoveStopPropagation: true,\n touchReleaseOnEdges: false,\n resistance: true,\n resistanceRatio: 0.85,\n watchSlidesProgress: false,\n preventClicks: true,\n preventClicksPropagation: true,\n slideToClickedSlide: false,\n loopAdditionalSlides: 0,\n noSwiping: true,\n runCallbacksOnInit: true,\n coverflowEffect: {\n rotate: 50,\n stretch: 0,\n depth: 100,\n modifier: 1,\n slideShadows: true,\n },\n flipEffect: {\n slideShadows: true,\n limitRotation: true,\n },\n cubeEffect: {\n slideShadows: true,\n shadow: true,\n shadowOffset: 20,\n shadowScale: 0.94,\n },\n fadeEffect: {\n crossFade: false,\n },\n a11y: {\n prevSlideMessage: 'Previous slide',\n nextSlideMessage: 'Next slide',\n firstSlideMessage: 'This is the first slide',\n lastSlideMessage: 'This is the last slide',\n },\n };\n\n if (this.pager) {\n swiperOptions.pagination = {\n el: this.paginationEl!,\n type: 'bullets',\n clickable: true,\n hideOnClick: false,\n };\n }\n\n const eventOptions: SwiperOptions = {\n on: {\n init: () => {\n setTimeout(() => {\n this.roadslidesdidload.emit();\n }, 20);\n },\n slideChangeTransitionStart: () => this.roadslidewillchange.emit(),\n slideChangeTransitionEnd: () => this.roadslidedidchange.emit(),\n slideNextTransitionStart: () => this.roadslidenextstart.emit(),\n slidePrevTransitionStart: () => this.roadslideprevstart.emit(),\n slideNextTransitionEnd: () => this.roadslidenextend.emit(),\n slidePrevTransitionEnd: () => this.roadslideprevend.emit(),\n transitionStart: () => this.roadslidetransitionstart.emit(),\n transitionEnd: () => this.roadslidetransitionend.emit(),\n sliderMove: () => this.roadslidedrag.emit(),\n reachBeginning: () => this.roadslidereachstart.emit(),\n reachEnd: () => this.roadslidereachend.emit(),\n touchStart: () => this.roadslidetouchstart.emit(),\n touchEnd: () => this.roadslidetouchend.emit(),\n tap: () => this.roadslidetap.emit(),\n doubleTap: () => this.roadslidedoubletap.emit(),\n },\n };\n\n const customEvents = (!!this.options && !!this.options.on) ? this.options.on : {};\n const mergedEventOptions = { on: { ...customEvents, ...eventOptions.on } };\n\n return { ...swiperOptions, ...this.options, ...mergedEventOptions };\n }\n\n private setupKeyboardNavigation() {\n this.el.addEventListener('keydown', (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowLeft':\n this.slidePrev();\n break;\n case 'ArrowRight':\n this.slideNext();\n break;\n }\n });\n }\n\n render() {\n return (\n <Host class=\"swiper-container\" tabindex=\"0\">\n <div class=\"swiper-wrapper\">\n <slot />\n </div>\n {this.pager && <div class=\"swiper-pagination\" ref={el => this.paginationEl = el}></div>}\n {this.arrows && (\n <div role=\"button\" class=\"swiper-button-prev\" tabindex=\"0\" aria-label=\"Previous slide\" onClick={() => this.slidePrev()}>\n <road-icon icon={navigationChevron} rotate=\"180\"></road-icon>\n </div>\n )}\n {this.arrows && (\n <div role=\"button\" class=\"swiper-button-next\" tabindex=\"0\" aria-label=\"Next slide\" onClick={() => this.slideNext()}>\n <road-icon icon={navigationChevron}></road-icon>\n </div>\n )}\n </Host>\n );\n }\n}\n\nconst waitForSlides = (el: HTMLElement) => {\n return Promise.all(\n Array.from(el.querySelectorAll('road-carousel-item')).map(s => s.componentOnReady())\n );\n};\n"]}

package/dist/collection/components/chip/chip.css CHANGED Viewed

@@ -100,7 +100,7 @@
 }
 :host(.chip-secondary) {
-  color: var(--road-surface-inverse);
+  color: var(--road-on-button-primary);
   background: var(--road-button-primary);
   border-color: transparent;
 }
@@ -133,7 +133,7 @@
  * Focus state
  */
-:host(.chip-outline:hover) {
+:host(.chip-outline:focus-visible) {
   border-color: var(--road-outline-variant);
 }

package/dist/collection/components/chip/chip.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class Chip {
   }
   render() {
     const outlineClass = this.outline ? 'chip-outline' : '';
-    return (h(Host, { class: `${outlineClass} chip-${this.color} chip-${this.size}` }, h("div", { class: "chip-description" }, h("slot", null)), this.hasCloseIcon && h("road-icon", { class: "chip-close", icon: navigationClose })));
+    return (h(Host, { class: `${outlineClass} chip-${this.color} chip-${this.size}`, tabindex: "0" }, h("div", { class: "chip-description" }, h("slot", null)), this.hasCloseIcon && h("road-icon", { class: "chip-close", icon: navigationClose })));
   }
   static get is() { return "road-chip"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,IAAI;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE;~~MAE7D~~,WAAK,KAAK,EAAC,kBAAkB;QAC3B,eAAO,CACH;MACL,IAAI,CAAC,YAAY,IAAI,iBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,eAAe,GAAc,CAClF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/*\n @slot - Content of the chip.\n /\n\n@Component({\n tag: 'road-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class Chip {\n /\n The color to use from your application's color palette.\n /\n @Prop() color?: 'default' \| 'secondary' = 'default';\n\n /\n Display an outline style chip.\n /\n @Prop() outline: boolean = false;\n\n /\n The chip size.\n /\n @Prop() size: 'md' \| 'lg' = 'md';\n\n /\n Display a close icon\n */\n @Prop() hasCloseIcon: boolean = false;\n\n render() {\n const outlineClass = this.outline ? 'chip-outline' : '';\n\n return (\n <Host\n class={`${outlineClass} chip-${this.color} chip-${this.size}`}\n >\n <div class=\"chip-description\">\n <slot/>\n </div>\n {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,wBAAwB,CAAC;AAEhC;;GAEG;AAOH,MAAM,OAAO,IAAI;;iBAI2B,SAAS;mBAKxB,KAAK;gBAKJ,IAAI;wBAKA,KAAK;;EAErC,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,YAAY,SAAS,IAAI,CAAC,KAAK,SAAS,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAC,GAAG;MAE3E,WAAK,KAAK,EAAC,kBAAkB;QAC3B,eAAO,CACH;MACL,IAAI,CAAC,YAAY,IAAI,iBAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,eAAe,GAAc,CAClF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { navigationClose } from '../../../icons';\nimport './../../utils/polyfill';\n\n/*\n @slot - Content of the chip.\n /\n\n@Component({\n tag: 'road-chip',\n styleUrl: 'chip.css',\n shadow: true,\n})\nexport class Chip {\n /\n The color to use from your application's color palette.\n /\n @Prop() color?: 'default' \| 'secondary' = 'default';\n\n /\n Display an outline style chip.\n /\n @Prop() outline: boolean = false;\n\n /\n The chip size.\n /\n @Prop() size: 'md' \| 'lg' = 'md';\n\n /\n Display a close icon\n */\n @Prop() hasCloseIcon: boolean = false;\n\n render() {\n const outlineClass = this.outline ? 'chip-outline' : '';\n\n return (\n <Host\n class={`${outlineClass} chip-${this.color} chip-${this.size}`} tabindex=\"0\"\n >\n <div class=\"chip-description\">\n <slot/>\n </div>\n {this.hasCloseIcon && <road-icon class=\"chip-close\" icon={navigationClose}></road-icon>}\n </Host>\n );\n }\n}"]}

package/dist/collection/components/chip/chip.stories.js CHANGED Viewed

@@ -49,6 +49,31 @@ const Template = (args) => html`
 >
   ${unsafeHTML(args[' '])}
 </road-chip>
+<road-chip
+  outline="${ifDefined(args.outline)}"
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+  size="${ifDefined(args.size)}"
+  color="${ifDefined(args.color)}"
+>
+  ${unsafeHTML(args[' '])}
+</road-chip>
+<road-chip
+  outline="${ifDefined(args.outline)}"
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+  size="${ifDefined(args.size)}"
+  color="${ifDefined(args.color)}"
+>
+  ${unsafeHTML(args[' '])}
+</road-chip>
+<road-chip
+  outline="${ifDefined(args.outline)}"
+  has-close-icon="${ifDefined(args['has-close-icon'])}"
+  size="${ifDefined(args.size)}"
+  color="${ifDefined(args.color)}"
+>
+  ${unsafeHTML(args[' '])}
+</road-chip>
 `;
 export const Playground = Template.bind({});
@@ -61,7 +86,7 @@ export const withIcon = Template.bind({});
 withIcon.args = {
   outline: true,
   'has-close-icon': true,
-  ' ': `<road-icon name="weather-rain"></road-icon>
+  ' ': `<road-icon name="weather-rain" role="button"></road-icon>
   B`,
 };

package/dist/collection/components/collapse/collapse.css CHANGED Viewed

@@ -56,6 +56,10 @@
   --font-size: var(--btn-font-size);
 }
+.collapse-btn:focus {
+  outline: 1px solid var(--road-link-primary);
+}
 .collapse-btn-centered {
   display: flex;
   justify-content: center;

package/dist/collection/components/collapse/collapse.stories.js CHANGED Viewed

@@ -112,25 +112,25 @@ VehicleTypes.args = {
     <road-row>
       <road-col class="col-6 col-md-4 col-lg-3">
         <road-card button value="car">
-          <road-icon name="vehicle-car" size="3x"></road-icon>
+          <road-icon name="vehicle-car" size="3x" aria-hidden="true"></road-icon>
           <road-label>Car</road-label>
         </road-card>
       </road-col>
       <road-col class="col-6 col-md-4 col-lg-3">
         <road-card button value="4x4">
-          <road-icon name="vehicle-suv" size="3x"></road-icon>
+          <road-icon name="vehicle-suv" size="3x" aria-hidden="true"></road-icon>
           <road-label>4x4</road-label>
         </road-card>
       </road-col>
       <road-col class="col-6 col-md-4 col-lg-3">
         <road-card button value="truck">
-          <road-icon name="vehicle-pickup-van" size="3x"></road-icon>
+          <road-icon name="vehicle-pickup-van" size="3x" aria-hidden="true"></road-icon>
           <road-label>Truck</road-label>
         </road-card>
       </road-col>
       <road-col class="col-6 col-md-4 col-lg-3">
         <road-card button value="bike">
-          <road-icon name="vehicle-moto" size="3x"></road-icon>
+          <road-icon name="vehicle-moto" size="3x" aria-hidden="true"></road-icon>
           <road-label>Bike</road-label>
         </road-card>
       </road-col>
@@ -140,25 +140,25 @@ VehicleTypes.args = {
       <road-row>
         <road-col class="col-6 col-md-4 col-lg-3">
           <road-card button value="scooter">
-            <road-icon name="vehicle-scooter" size="3x"></road-icon>
+            <road-icon name="vehicle-scooter" size="3x" aria-hidden="true"></road-icon>
             <road-label>Scooter</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
           <road-card button value="competition">
-            <road-icon name="vehicle-rally" size="3x"></road-icon>
+            <road-icon name="vehicle-rally" size="3x" aria-hidden="true"></road-icon>
             <road-label>Compétition</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
           <road-card button value="colletion">
-            <road-icon name="vehicle-collector" size="3x"></road-icon>
+            <road-icon name="vehicle-collector" size="3x" aria-hidden="true"></road-icon>
             <road-label>Colletion</road-label>
           </road-card>
         </road-col>
         <road-col class="col-6 col-md-4 col-lg-3">
           <road-card button value="quad">
-            <road-icon name="vehicle-quad" size="3x"></road-icon>
+            <road-icon name="vehicle-quad" size="3x" aria-hidden="true"></road-icon>
             <road-label>Quad</road-label>
           </road-card>
         </road-col>

package/dist/collection/components/counter/counter.css CHANGED Viewed

@@ -26,6 +26,11 @@ road-input {
   --margin-bottom: 0;
 }
+.test{
+display: none;
+}
 /* BUTTONS
  -------------------- */

package/dist/collection/components/counter/counter.js CHANGED Viewed

@@ -92,9 +92,27 @@ export class Counter {
   componentWillLoad() {
     this.onValueChange(this.value);
   }
+  componentDidLoad() {
+    // Cacher le label pour accessibilité
+    const label = this.el.querySelector('.form-label');
+    const input = this.el.querySelector('.form-control.sc-road-input');
+    if (label) {
+      label.style.clip = 'rect(0 0 0 0)';
+      label.style.border = '0';
+      label.style.height = '1px';
+      label.style.left = '0';
+      label.style.margin = '-1px';
+      label.style.overflow = 'hidden';
+      label.style.padding = '0';
+      label.style.position = 'absolute';
+      label.style.top = '0';
+      label.style.width = '1px';
+      input.style.padding = '0 1rem 0';
+    }
+  }
   render() {
     const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-    return (h("road-input-group", { class: this.size && `counter-${this.size}` }, h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi })), h("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly }), h("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { name: "navigation-add-more", size: this.size }))));
+    return (h("road-input-group", { class: this.size && `counter-${this.size}` }, h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi, role: "button" })), h("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly, label: "Quantit\u00E9" }), h("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { name: "navigation-add-more", size: this.size, role: "button" }))));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/counter/counter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'road-counter',\n styleUrl: 'counter.css',\n scoped: true,\n})\nexport class Counter {\n\n @Element() el!: HTMLRoadCounterElement;\n\n iconCounterLess!: HTMLRoadIconElement;\n\n inputElement!: HTMLRoadInputElement;\n\n @State() leftIconClasses: string = \"\";\n\n @State() rightIconClasses: string = \"\";\n\n @State() isDustbinVisible: boolean = false;\n\n /*\n The id of counter\n /\n @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min: number = 0;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: number;\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 The value of the counter.\n /\n @Prop() value: number = 1;\n\n /\n The size of the counter.\n /\n @Prop() size?: 'sm' \| 'md' \| 'lg' = \"lg\";\n\n /\n Set to `true` to add the dustbin icon if the value is equal to the min.\n /\n @Prop() dustbin: boolean = false;\n\n /\n Set to `true` to not modify the input field\n /\n @Prop() readonly: boolean = false;\n\n /\n Emitted when the plus button is clicked\n /\n @Event() roadIncrease!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the minus button is clicked\n /\n @Event() roadDecrease!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the minus button is clicked\n /\n @Event() roadChange!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the dustbin is clicked\n */\n @Event() roadDustbinClick!: EventEmitter<void>;\n\n @Watch('value')\n private onValueChange(valueInput: number) {\n this.setIsDustbinVisible(valueInput);\n this.setIconsClasses(valueInput);\n }\n\n private setIconsClasses(valueInput?: number) {\n valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n }\n\n private setIsDustbinVisible = (valueInput: number) => {\n if (valueInput > this.min) {\n this.isDustbinVisible = false;\n } else if (this.dustbin) {\n this.isDustbinVisible = true;\n }\n else {\n this.isDustbinVisible = false;\n }\n }\n\n private increase = () => {\n (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n if(!valueInput) {\n valueInput = this.min\n };\n this.onValueChange(valueInput);\n this.roadIncrease.emit({ value: valueInput });\n };\n\n private decrease = () => {\n if(this.isDustbinVisible){\n this.roadDustbinClick.emit();\n return;\n }\n\n (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n if(!valueInput) {\n valueInput = this.min\n };\n this.onValueChange(valueInput);\n\n this.roadDecrease.emit({ value: valueInput });\n };\n\n private checkValue = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n\n if (value == null \|\| value === \"\") return;\n\n if (value < this.min) {\n input.value = this.min.toString()\n }\n else if (this.max && value > this.max) {\n input.value = this.max.toString()\n }\n\n this.onValueChange(parseInt(input.value));\n }\n\n private onRoadChange = (ev: Event) => {\n ev.stopPropagation();\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n if (value !== null && value !== \"\") {\n if (value < this.min) {\n this.roadChange.emit({ value: this.min });\n }\n else if (this.max && value > this.max) {\n this.roadChange.emit({ value: this.max });\n }\n else {\n this.roadChange.emit({ value: parseInt(input.value) });\n }\n }\n else {\n this.roadChange.emit({ value: null });\n }\n };\n\n componentWillLoad() {\n this.onValueChange(this.value);\n }\n render() {\n\n const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n\n return (\n <road-input-group\n class={this.size && `counter-${this.size}`}\n >\n <road-button\n slot=\"prepend\"\n size={this.size}\n onClick={this.decrease}\n class={this.leftIconClasses}\n data-cy=\"road-decrease\"\n >\n <road-icon\n name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n size={this.size}\n data-cy={dataCi}\n />\n </road-button>\n <road-input\n ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n type=\"number\"\n min={this.min.toString()}\n max={(this.max && this.max.toString()) as string}\n step={this.step}\n value={this.value}\n onRoadChange={this.onRoadChange}\n onKeyUp={this.checkValue}\n data-cy=\"road-input-counter\"\n readonly={this.readonly}\n />\n <road-button\n slot=\"append\"\n size={this.size}\n onClick={this.increase}\n class={this.rightIconClasses}\n data-cy=\"road-increase\"\n >\n <road-icon\n name=\"navigation-add-more\"\n size={this.size}\n />\n </road-button>\n </road-input-group>\n );\n }\n}\n\nlet counterIds = 0;\n"]}
1	+ {"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'road-counter',\n styleUrl: 'counter.css',\n scoped: true,\n})\nexport class Counter {\n\n @Element() el!: HTMLRoadCounterElement;\n\n iconCounterLess!: HTMLRoadIconElement;\n\n inputElement!: HTMLRoadInputElement;\n\n @State() leftIconClasses: string = \"\";\n\n @State() rightIconClasses: string = \"\";\n\n @State() isDustbinVisible: boolean = false;\n\n /*\n The id of counter\n /\n @Prop() inputId: string = `road-counter-${counterIds++}`;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min: number = 0;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: number;\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 The value of the counter.\n /\n @Prop() value: number = 1;\n\n /\n The size of the counter.\n /\n @Prop() size?: 'sm' \| 'md' \| 'lg' = \"lg\";\n\n /\n Set to `true` to add the dustbin icon if the value is equal to the min.\n /\n @Prop() dustbin: boolean = false;\n\n /\n Set to `true` to not modify the input field\n /\n @Prop() readonly: boolean = false;\n\n /\n Emitted when the plus button is clicked\n /\n @Event() roadIncrease!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the minus button is clicked\n /\n @Event() roadDecrease!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the minus button is clicked\n /\n @Event() roadChange!: EventEmitter<{\n value: number \| undefined \| null;\n }>;\n\n /\n Emitted when the dustbin is clicked\n */\n @Event() roadDustbinClick!: EventEmitter<void>;\n\n @Watch('value')\n private onValueChange(valueInput: number) {\n this.setIsDustbinVisible(valueInput);\n this.setIconsClasses(valueInput);\n }\n\n private setIconsClasses(valueInput?: number) {\n valueInput = valueInput ?? parseInt(this.inputElement.querySelector('input')!.value as string);\n\n this.leftIconClasses = valueInput <= this.min && !this.dustbin ? \"disabled\" : \"\";\n this.rightIconClasses = this.max && valueInput >= this.max ? \"disabled\" : \"\";\n }\n\n private setIsDustbinVisible = (valueInput: number) => {\n if (valueInput > this.min) {\n this.isDustbinVisible = false;\n } else if (this.dustbin) {\n this.isDustbinVisible = true;\n }\n else {\n this.isDustbinVisible = false;\n }\n }\n\n private increase = () => {\n (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepUp();\n let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n if(!valueInput) {\n valueInput = this.min\n };\n this.onValueChange(valueInput);\n this.roadIncrease.emit({ value: valueInput });\n };\n\n private decrease = () => {\n if(this.isDustbinVisible){\n this.roadDustbinClick.emit();\n return;\n }\n\n (this.inputElement as unknown as HTMLInputElement).querySelector('input')!.stepDown();\n\n let valueInput = parseInt(this.inputElement.querySelector('input')!.value as string);\n if(!valueInput) {\n valueInput = this.min\n };\n this.onValueChange(valueInput);\n\n this.roadDecrease.emit({ value: valueInput });\n };\n\n private checkValue = (ev: Event) => {\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n\n if (value == null \|\| value === \"\") return;\n\n if (value < this.min) {\n input.value = this.min.toString()\n }\n else if (this.max && value > this.max) {\n input.value = this.max.toString()\n }\n\n this.onValueChange(parseInt(input.value));\n }\n\n private onRoadChange = (ev: Event) => {\n ev.stopPropagation();\n const input = ev.target as HTMLInputElement;\n const value = input.value && parseInt(input.value)\n if (value !== null && value !== \"\") {\n if (value < this.min) {\n this.roadChange.emit({ value: this.min });\n }\n else if (this.max && value > this.max) {\n this.roadChange.emit({ value: this.max });\n }\n else {\n this.roadChange.emit({ value: parseInt(input.value) });\n }\n }\n else {\n this.roadChange.emit({ value: null });\n }\n };\n\n componentWillLoad() {\n this.onValueChange(this.value);\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('.form-control.sc-road-input') 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\n render() {\n\n const dataCi = this.isDustbinVisible ? \"road-dustbin\" : \"\";\n\n return (\n <road-input-group\n class={this.size && `counter-${this.size}`}\n >\n <road-button\n slot=\"prepend\"\n size={this.size}\n onClick={this.decrease}\n class={this.leftIconClasses}\n data-cy=\"road-decrease\"\n >\n <road-icon\n name={this.isDustbinVisible ? \"delete-forever\" : \"navigation-add-less\"}\n ref={(el) => this.iconCounterLess = el as HTMLRoadIconElement}\n size={this.size}\n data-cy={dataCi}\n role=\"button\"\n />\n </road-button>\n <road-input\n ref={(el) => this.inputElement = el as HTMLRoadInputElement}\n type=\"number\"\n min={this.min.toString()}\n max={(this.max && this.max.toString()) as string}\n step={this.step}\n value={this.value}\n onRoadChange={this.onRoadChange}\n onKeyUp={this.checkValue}\n data-cy=\"road-input-counter\"\n readonly={this.readonly}\n label=\"Quantité\"\n />\n <road-button\n slot=\"append\"\n size={this.size}\n onClick={this.increase}\n class={this.rightIconClasses}\n data-cy=\"road-increase\"\n >\n <road-icon\n name=\"navigation-add-more\"\n size={this.size}\n role=\"button\"\n />\n </road-button>\n </road-input-group>\n );\n }\n}\n\nlet counterIds = 0;\n"]}

package/dist/collection/components/dialog/dialog.js CHANGED Viewed

@@ -79,11 +79,11 @@ export class Dialog {
           break;
       }
     }
-    return (h(Host, { class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-labelledby": "dialogLabel", "aria-describedby": "dialogDesc" }, h("div", { class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { class: "dialog-content" }, h("header", { class: "dialog-header" }, this.hasCloseIcon
+    return (h(Host, { class: `dialog ${modalIsOpenClass} ${modalhasClose}`, role: "alertdialog", "aria-modal": "true", tabindex: "-1", "aria-label": "dialogLabel" }, h("div", { class: "dialog-overlay", onClick: this.hasCloseIcon === true ? this.onClick : undefined, tabindex: "-1" }), h("div", { class: "dialog-modal", role: "document", tabindex: "0" }, h("div", { class: "dialog-content" }, h("header", { class: "dialog-header" }, this.hasCloseIcon
       ? h("button", { type: "button", class: "dialog-close", onClick: this.onClick, "aria-label": "Close" }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))
       : ''), h("div", { class: "dialog-body" }, this.color !== undefined
       ? h("road-icon", { class: "dialog-icon", part: "dialog-icon", color: this.color, icon: icon, "aria-hidden": "true" })
-      : '', h("h2", { class: "dialog-title", id: "dialogLabel" }, this.label), h("p", { class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { class: "dialog-footer" }, h("slot", null))))));
+      : '', h("h2", { class: "dialog-title" }, this.label), h("p", { class: "dialog-description", id: "dialogDesc" }, this.description)), h("footer", { class: "dialog-footer" }, h("slot", null))))));
   }
   static get is() { return "road-dialog"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEjI;;;;GAIG;AAOH,MAAM,OAAO,MAAM;;IA6DjB;;OAEG;IACK,YAAO,GAAG,CAAC,EAAW,EAAE,EAAE;MAChC,EAAE,CAAC,eAAe,EAAE,CAAC;MACrB,EAAE,CAAC,cAAc,EAAE,CAAC;MAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;kBA3DyC,KAAK;wBAKhB,IAAI;;;;;;EA2BpC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;MAC7C,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;EACpB,CAAC;EAYD;;KAEG;EAEH,QAAQ,CAAC,KAAoB;IAC3B,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,EAAE;MACvF,IAAI,CAAC,KAAK,EAAE,CAAC;KACd;EACH,CAAC;EAED;;KAEG;EACH,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,IAAI,IAAI,CAAC;IAET,IAAG,IAAI,CAAC,IAAI,EAAE;MACZ,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;KAClB;SAAM;MACL,QAAO,IAAI,CAAC,KAAK,EAAE;QACnB,KAAK,MAAM;UACT,IAAI,GAAG,gBAAgB,CAAC;UACxB,MAAM;QACR,KAAK,SAAS;UACZ,IAAI,GAAG,mBAAmB,CAAC;UAC3B,MAAM;QACR,KAAK,SAAS;UACZ,IAAI,GAAG,mBAAmB,CAAC;UAC3B,MAAM;QACR,KAAK,QAAQ;UACX,IAAI,GAAG,kBAAkB,CAAC;UAC1B,MAAM;QACR;UACE,IAAI,GAAG,gBAAgB,CAAC;UACxB,MAAM;OACP;KACF;IAED,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,gBAAgB,IAAI,aAAa,EAAE,EAAE,IAAI,EAAC,aAAa,gBAAY,MAAM,EAAC,QAAQ,EAAC,IAAI,~~qBAAiB~~,aAAa~~,sBAAkB,YAAY~~;~~MACxK~~,WAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAC,IAAI,GAAO;MAChH,WAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG;QACpD,WAAK,KAAK,EAAC,gBAAgB;UACzB,cAAQ,KAAK,EAAC,eAAe,IAC1B,IAAI,CAAC,YAAY;YAChB,CAAC,CAAC,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,gBAAa,OAAO;cAAC,iBAAW,IAAI,EAAE,eAAe,iBAAc,MAAM,GAAa,CAAS;YACjK,CAAC,CAAC,EAAE,CACC;UACT,WAAK,KAAK,EAAC,aAAa;YACrB,IAAI,CAAC,KAAK,KAAK,SAAS;cACvB,CAAC,CAAC,iBAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,iBAAc,MAAM,GAAa;cAClH,CAAC,CAAC,EAAE;YACN,UAAI,KAAK,EAAC,cAAc,~~EAAC,EAAE,EAAC,aAAa,~~IAAE,IAAI,CAAC,KAAK,CAAM;~~YAC3D~~,SAAG,KAAK,EAAC,oBAAoB,EAAC,EAAE,EAAC,YAAY,IAAE,IAAI,CAAC,WAAW,CAAK,CAChE;UACN,cAAQ,KAAK,EAAC,eAAe;YAC3B,eAAO,CACA,CACL,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/*\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors;\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\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 press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\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 render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-~~labelledby~~=\"dialogLabel\" ~~aria-describedby=\"dialogDesc\"~~>\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\" ~~id=\"dialogLabel\"~~>{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h, Host } from '@stencil/core';\nimport { FeedbackColors } from '../../interface';\nimport { navigationClose, alertDangerOutline, alertInfoOutline, alertSuccessOutline, alertWarningOutline } from '../../../icons';\n\n/*\n @slot - Content of the footer dialog if it's an action dialog add action buttons here.\n \n @part dialog-icon - main icon of the dialog\n /\n\n@Component({\n tag: 'road-dialog',\n styleUrl: 'dialog.css',\n shadow: true,\n})\nexport class Dialog {\n\n /\n Current reference of the dialog\n /\n @Element() el!: HTMLRoadDialogElement;\n\n /\n Set isOpen property to true to open the dialog\n /\n @Prop({ mutable: true }) isOpen: boolean = false;\n\n /\n Show / hide the close icon\n /\n @Prop() hasCloseIcon: boolean = true;\n\n /\n Set the color of information dialog. e.g. info, success, warning, danger\n /\n @Prop() color?: FeedbackColors;\n\n /\n override default icon\n /\n @Prop() icon?: string;\n\n /\n Text to the top\n /\n @Prop() label?: string;\n\n /\n Content description of the dialog\n /\n @Prop() description?: string;\n\n /\n Indicate when closing the dialog\n /\n @Event({ eventName: 'close' }) onClose!: EventEmitter<void>;\n\n /\n Open the dialog\n /\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /\n Close the dialog\n /\n @Method()\n async close() {\n this.isOpen = false;\n this.el.addEventListener('transitionend', () => {\n this.onClose.emit();\n }, { once: true});\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 press Escape key\n /\n @Listen('keyup', { target: 'document' })\n onEscape(event: KeyboardEvent) {\n if ((event.key === 'Escape' \|\| event.key === \"Esc\") && this.isOpen && this.hasCloseIcon) {\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 render() {\n const modalIsOpenClass = this.isOpen ? 'dialog-open' : '';\n const modalhasClose = this.hasCloseIcon ? 'dialog-has-close' : '';\n\n let icon;\n\n if(this.icon) {\n icon = this.icon;\n } else {\n switch(this.color) {\n case 'info':\n icon = alertInfoOutline;\n break;\n case 'success':\n icon = alertSuccessOutline;\n break;\n case 'warning':\n icon = alertWarningOutline;\n break;\n case 'danger':\n icon = alertDangerOutline;\n break;\n default:\n icon = alertInfoOutline;\n break;\n }\n }\n\n return (\n <Host class={`dialog ${modalIsOpenClass} ${modalhasClose}`} role=\"alertdialog\" aria-modal=\"true\" tabindex=\"-1\" aria-label=\"dialogLabel\">\n <div class=\"dialog-overlay\" onClick={this.hasCloseIcon === true ? this.onClick : undefined} tabindex=\"-1\"></div>\n <div class=\"dialog-modal\" role=\"document\" tabindex=\"0\">\n <div class=\"dialog-content\">\n <header class=\"dialog-header\">\n {this.hasCloseIcon\n ? <button type=\"button\" class=\"dialog-close\" onClick={this.onClick} aria-label=\"Close\"><road-icon icon={navigationClose} aria-hidden=\"true\"></road-icon></button>\n : ''}\n </header>\n <div class=\"dialog-body\">\n {this.color !== undefined\n ? <road-icon class=\"dialog-icon\" part=\"dialog-icon\" color={this.color} icon={icon} aria-hidden=\"true\"></road-icon>\n : ''}\n <h2 class=\"dialog-title\">{this.label}</h2>\n <p class=\"dialog-description\" id=\"dialogDesc\">{this.description}</p>\n </div>\n <footer class=\"dialog-footer\">\n <slot/>\n </footer>\n </div>\n </div>\n </Host>\n );\n }\n}"]}

package/dist/collection/components/drawer/drawer.js CHANGED Viewed

@@ -84,7 +84,7 @@ export class Drawer {
     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) : '';
     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" })) : '';
     const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-    return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "-1", role: "dialog" }, 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))))));
+    return (h(Host, { class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": "drawer" }, 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))))));
   }
   static get is() { return "road-drawer"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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~~IAAI~~,EAAC,IAAI,EAAC,QAAQ;~~MACtF~~,WAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,GAAO;MACvE,WAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG;QACjG,WAAK,KAAK,EAAC,gBAAgB;UACzB,cAAQ,KAAK,EAAE,iBAAiB,kBAAkB,IAAI,oBAAoB,EAAE;YACzE,eAAe;YACf,IAAI,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,UAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAM,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,cAAc;cAAC,YAAM,IAAI,EAAC,OAAO,GAAG,CAAM;YACzI,gBAAgB,CACV;UACT,WAAK,KAAK,EAAC,aAAa;YACtB,eAAO,CACH,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 \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 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 render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\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=\"-1\" role=\"dialog\">\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 </div>\n </div>\n </Host>\n );\n }\n}"]}
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 \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 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 render() {\n const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';\n const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';\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=\"drawer\">\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 </div>\n </div>\n </Host>\n );\n }\n}"]}

package/dist/collection/components/drawer/drawer.stories.js CHANGED Viewed

@@ -194,9 +194,9 @@ customTitle.args = {
   position: 'right',
   'drawer-width': 480,
   title: `<div slot="title" class="d-flex align-items-center">
-    <road-icon name="key" color="secondary" class="mr-16"></road-icon>
+    <road-icon name="key" color="secondary" class="mr-16" role="img"></road-icon>
     <road-text color="secondary">618</road-text>
-    <road-icon name="multi-service-outline" color="secondary" class="ml-16"></road-icon>
+    <road-icon name="multi-service-outline" color="secondary" class="ml-16" role="img"></road-icon>
   </div>`,
 };

package/dist/collection/components/dropdown/dropdown.css CHANGED Viewed

@@ -25,9 +25,18 @@
 .dropdown summary {
   display: block;
+  width: max-content;
+  background-color: var(--road-surface);
+  border-radius: 0.25rem;
   outline: none;
 }
+.dropdown summary:focus,
+.dropdown summary.focus-visible,
+.dropdown summary:focus-within{
+  background: var(--road-surface-inverse);
+}
 .dropdown summary::-webkit-details-marker { /* remove native arrow */
   display: none;
 }
@@ -48,10 +57,6 @@
   height: 2.5rem;
 }
-.dropdown-button:hover{
-  background: var(--road-grey-200);
-}
 .position-right{
   display: flex;
   justify-content: flex-end;

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -19,12 +19,12 @@ export class Dropdown {
     this.isOpen = false;
   }
   render() {
-    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button bg-white';
-    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button bg-white';
+    const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';
+    const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';
     const positionClass = this.position ? `position-${this.position}` : '';
     const dropdownClass = this.position ? `dropdown-${this.position}` : '';
     const directionClass = this.direction ? `direction-${this.direction}` : '';
-    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { name: "list" }))));
+    return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": this.isOpen.toString(), tabindex: "0", role: "button", onClick: this.onClick, "tab-index": "0" }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon", "aria-hidden": "true" })))), h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { name: "list" }))));
   }
   static get is() { return "road-dropdown"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOpE,MAAM,OAAO,QAAQ;;IAWX,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;IAChC,sDAAsD;IACtD,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO,CAAC,uDAAuD;KAChE;IACD,kDAAkD;IAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,~~0BAA0B~~,CAAC;~~IAC5F~~,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,~~0BAA0B~~,CAAC;~~IACrH~~,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3E,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO;~~QAC9F~~,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE;UACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE;YAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,~~CACvE~~,CACF,CACE;MACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE;QAC5D,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n tag: 'road-dropdown',\n styleUrl: 'dropdown.css',\n shadow: true,\n})\nexport class Dropdown {\n\n @Element() el!: HTMLRoadDropdownElement;\n\n\n @Prop({ mutable: true }) isOpen: boolean = false;\n @Prop() isLight: boolean = false;\n @Prop() isMedium: boolean = false;\n @Prop({ reflect: true }) position?: 'left' \| 'right';\n @Prop({ reflect: true }) direction?: 'top' \| 'bottom' = 'bottom';\n\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(ev: MouseEvent) {\n // Check if the clicked element is the dropdown button\n if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n return; // Do nothing if clicked element is the dropdown button\n }\n // Close dropdown if click is outside the dropdown\n this.isOpen = false;\n }\n\n render() {\n const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button ~~bg-white~~';\n const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button ~~bg-white~~';\n const positionClass = this.position ? `position-${this.position}` : '';\n const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n return (\n <details class=\"dropdown\" open={this.isOpen}>\n <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={`d-flex ${positionClass}`}>\n <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n </div>\n </div>\n </summary>\n <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n <slot name=\"list\" />\n </div>\n </details>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOpE,MAAM,OAAO,QAAQ;;IAWX,YAAO,GAAG,GAAG,EAAE;MACrB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;IAChC,sDAAsD;IACtD,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO,CAAC,uDAAuD;KAChE;IACD,kDAAkD;IAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3E,OAAO,CACL,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM;MACzC,gCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG;QAC7G,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE;UACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE;YAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE;MACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE;QAC5D,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n tag: 'road-dropdown',\n styleUrl: 'dropdown.css',\n shadow: true,\n})\nexport class Dropdown {\n\n @Element() el!: HTMLRoadDropdownElement;\n\n\n @Prop({ mutable: true }) isOpen: boolean = false;\n @Prop() isLight: boolean = false;\n @Prop() isMedium: boolean = false;\n @Prop({ reflect: true }) position?: 'left' \| 'right';\n @Prop({ reflect: true }) direction?: 'top' \| 'bottom' = 'bottom';\n\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(ev: MouseEvent) {\n // Check if the clicked element is the dropdown button\n if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n return; // Do nothing if clicked element is the dropdown button\n }\n // Close dropdown if click is outside the dropdown\n this.isOpen = false;\n }\n\n render() {\n const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';\n const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\n const positionClass = this.position ? `position-${this.position}` : '';\n const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n return (\n <details class=\"dropdown\" open={this.isOpen}>\n <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick} tab-index=\"0\">\n <div class={`d-flex ${positionClass}`}>\n <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></road-icon>\n </div>\n </div>\n </summary>\n <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n <slot name=\"list\" />\n </div>\n </details>\n );\n }\n}\n"]}