@roadtrip/components 3.23.1 → 3.25.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 (191) hide show
  1. package/assets/assets.svg +1 -0
  2. package/assets/index.d.ts +7 -0
  3. package/assets/index.js +1 -0
  4. package/dist/assets/assets.svg +1 -0
  5. package/dist/assets/index.d.ts +7 -0
  6. package/dist/assets/index.js +1 -0
  7. package/dist/cjs/index-12592729.js +4 -0
  8. package/dist/cjs/index.cjs.js +2 -0
  9. package/dist/cjs/index.cjs.js.map +1 -1
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/cjs/road-accordion.cjs.entry.js +1 -1
  12. package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
  13. package/dist/cjs/road-asset.cjs.entry.js +167 -0
  14. package/dist/cjs/road-asset.cjs.entry.js.map +1 -0
  15. package/dist/cjs/road-avatar.cjs.entry.js +1 -1
  16. package/dist/cjs/road-avatar.cjs.entry.js.map +1 -1
  17. package/dist/cjs/road-badge_14.cjs.entry.js +44 -7
  18. package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
  19. package/dist/cjs/road-chip.cjs.entry.js +1 -1
  20. package/dist/cjs/road-chip.cjs.entry.js.map +1 -1
  21. package/dist/cjs/road-dropdown.cjs.entry.js +1 -1
  22. package/dist/cjs/road-dropdown.cjs.entry.js.map +1 -1
  23. package/dist/cjs/road-navbar.cjs.entry.js +1 -1
  24. package/dist/cjs/road-navbar.cjs.entry.js.map +1 -1
  25. package/dist/cjs/road-plate-number.cjs.entry.js +1 -1
  26. package/dist/cjs/road-plate-number.cjs.entry.js.map +1 -1
  27. package/dist/cjs/road-segmented-button.cjs.entry.js +1 -1
  28. package/dist/cjs/road-segmented-button.cjs.entry.js.map +1 -1
  29. package/dist/cjs/road-select.cjs.entry.js +1 -1
  30. package/dist/cjs/road-select.cjs.entry.js.map +1 -1
  31. package/dist/cjs/road-tab-button.cjs.entry.js +1 -1
  32. package/dist/cjs/road-tab-button.cjs.entry.js.map +1 -1
  33. package/dist/cjs/road-textarea.cjs.entry.js +1 -1
  34. package/dist/cjs/road-textarea.cjs.entry.js.map +1 -1
  35. package/dist/cjs/road-tooltip.cjs.entry.js +14 -2
  36. package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
  37. package/dist/cjs/roadtrip.cjs.js +1 -1
  38. package/dist/cjs/utils-5483e9fa.js +82 -0
  39. package/dist/cjs/utils-5483e9fa.js.map +1 -0
  40. package/dist/collection/collection-manifest.json +1 -0
  41. package/dist/collection/components/accordion/accordion.css +4 -7
  42. package/dist/collection/components/accordion/accordion.stories.js +10 -2
  43. package/dist/collection/components/asset/asset.css +22 -0
  44. package/dist/collection/components/asset/asset.js +231 -0
  45. package/dist/collection/components/asset/asset.js.map +1 -0
  46. package/dist/collection/components/asset/asset.stories.js +42 -0
  47. package/dist/collection/components/asset/request.js +33 -0
  48. package/dist/collection/components/asset/request.js.map +1 -0
  49. package/dist/collection/components/asset/svg/ecomobiliste-baseline-fr.svg +9 -0
  50. package/dist/collection/components/asset/svg/ecomobiliste-es.svg +22 -0
  51. package/dist/collection/components/asset/svg/ecomobiliste-fr.svg +9 -0
  52. package/dist/collection/components/asset/svg/ecomobiliste-inverse-baseline-fr.svg +9 -0
  53. package/dist/collection/components/asset/svg/ecomobiliste-inverse-es.svg +22 -0
  54. package/dist/collection/components/asset/svg/ecomobiliste-inverse-fr.svg +9 -0
  55. package/dist/collection/components/asset/svg/ecomobiliste-inverse-it.svg +21 -0
  56. package/dist/collection/components/asset/svg/ecomobiliste-it.svg +21 -0
  57. package/dist/collection/components/asset/utils.js +73 -0
  58. package/dist/collection/components/asset/utils.js.map +1 -0
  59. package/dist/collection/components/asset/validate.js +44 -0
  60. package/dist/collection/components/asset/validate.js.map +1 -0
  61. package/dist/collection/components/avatar/avatar.css +5 -2
  62. package/dist/collection/components/button/button.css +5 -3
  63. package/dist/collection/components/chip/chip.css +2 -0
  64. package/dist/collection/components/counter/counter.css +0 -5
  65. package/dist/collection/components/counter/counter.js +11 -1
  66. package/dist/collection/components/counter/counter.js.map +1 -1
  67. package/dist/collection/components/drawer/drawer.js +63 -2
  68. package/dist/collection/components/drawer/drawer.js.map +1 -1
  69. package/dist/collection/components/drawer/drawer.stories.js +9 -1
  70. package/dist/collection/components/dropdown/dropdown.css +5 -4
  71. package/dist/collection/components/global-navigation/global-navigation.stories.js +4 -4
  72. package/dist/collection/components/input/input.css +2 -2
  73. package/dist/collection/components/navbar/navbar.css +2 -2
  74. package/dist/collection/components/navbar/navbar.stories.js +1 -1
  75. package/dist/collection/components/plate-number/plate-number.css +1 -3
  76. package/dist/collection/components/segmented-button/segmented-button.css +1 -1
  77. package/dist/collection/components/select/select.css +0 -5
  78. package/dist/collection/components/tab-button/tab-button.css +7 -1
  79. package/dist/collection/components/textarea/textarea.css +0 -1
  80. package/dist/collection/components/toolbar/toolbar.css +3 -3
  81. package/dist/collection/components/tooltip/tooltip.css +7 -2
  82. package/dist/collection/components/tooltip/tooltip.js +14 -2
  83. package/dist/collection/components/tooltip/tooltip.js.map +1 -1
  84. package/dist/collection/components/tooltip/tooltip.stories.js +2 -2
  85. package/dist/collection/index.js +1 -0
  86. package/dist/collection/index.js.map +1 -1
  87. package/dist/esm/index-52302079.js +4 -0
  88. package/dist/esm/index.js +1 -0
  89. package/dist/esm/index.js.map +1 -1
  90. package/dist/esm/loader.js +1 -1
  91. package/dist/esm/road-accordion.entry.js +1 -1
  92. package/dist/esm/road-accordion.entry.js.map +1 -1
  93. package/dist/esm/road-asset.entry.js +163 -0
  94. package/dist/esm/road-asset.entry.js.map +1 -0
  95. package/dist/esm/road-avatar.entry.js +1 -1
  96. package/dist/esm/road-avatar.entry.js.map +1 -1
  97. package/dist/esm/road-badge_14.entry.js +44 -7
  98. package/dist/esm/road-badge_14.entry.js.map +1 -1
  99. package/dist/esm/road-chip.entry.js +1 -1
  100. package/dist/esm/road-chip.entry.js.map +1 -1
  101. package/dist/esm/road-dropdown.entry.js +1 -1
  102. package/dist/esm/road-dropdown.entry.js.map +1 -1
  103. package/dist/esm/road-navbar.entry.js +1 -1
  104. package/dist/esm/road-navbar.entry.js.map +1 -1
  105. package/dist/esm/road-plate-number.entry.js +1 -1
  106. package/dist/esm/road-plate-number.entry.js.map +1 -1
  107. package/dist/esm/road-segmented-button.entry.js +1 -1
  108. package/dist/esm/road-segmented-button.entry.js.map +1 -1
  109. package/dist/esm/road-select.entry.js +1 -1
  110. package/dist/esm/road-select.entry.js.map +1 -1
  111. package/dist/esm/road-tab-button.entry.js +1 -1
  112. package/dist/esm/road-tab-button.entry.js.map +1 -1
  113. package/dist/esm/road-textarea.entry.js +1 -1
  114. package/dist/esm/road-textarea.entry.js.map +1 -1
  115. package/dist/esm/road-tooltip.entry.js +14 -2
  116. package/dist/esm/road-tooltip.entry.js.map +1 -1
  117. package/dist/esm/roadtrip.js +1 -1
  118. package/dist/esm/utils-158dc960.js +77 -0
  119. package/dist/esm/utils-158dc960.js.map +1 -0
  120. package/dist/html.html-data.json +52 -1
  121. package/dist/roadtrip/index.esm.js +1 -1
  122. package/dist/roadtrip/p-10903095.entry.js +2 -0
  123. package/dist/roadtrip/p-10903095.entry.js.map +1 -0
  124. package/dist/roadtrip/p-4111f5f2.entry.js +2 -0
  125. package/dist/roadtrip/p-4111f5f2.entry.js.map +1 -0
  126. package/dist/roadtrip/p-48fad2ec.entry.js +2 -0
  127. package/dist/roadtrip/p-48fad2ec.entry.js.map +1 -0
  128. package/dist/roadtrip/{p-31cf9b61.entry.js → p-548b3e44.entry.js} +2 -2
  129. package/dist/roadtrip/{p-31cf9b61.entry.js.map → p-548b3e44.entry.js.map} +1 -1
  130. package/dist/roadtrip/p-631eca8b.entry.js +2 -0
  131. package/dist/roadtrip/p-631eca8b.entry.js.map +1 -0
  132. package/dist/roadtrip/p-6ff5ec7c.entry.js +2 -0
  133. package/dist/roadtrip/p-6ff5ec7c.entry.js.map +1 -0
  134. package/dist/roadtrip/p-73f81e81.entry.js +2 -0
  135. package/dist/roadtrip/p-73f81e81.entry.js.map +1 -0
  136. package/dist/roadtrip/p-98cd42c5.entry.js +2 -0
  137. package/dist/roadtrip/p-98cd42c5.entry.js.map +1 -0
  138. package/dist/roadtrip/p-a0cde368.entry.js +2 -0
  139. package/dist/roadtrip/p-a0cde368.entry.js.map +1 -0
  140. package/dist/roadtrip/p-a77727f2.entry.js +2 -0
  141. package/dist/roadtrip/p-a77727f2.entry.js.map +1 -0
  142. package/dist/roadtrip/p-c0f80d9b.js +2 -0
  143. package/dist/roadtrip/p-c0f80d9b.js.map +1 -0
  144. package/dist/roadtrip/p-d9c73068.entry.js +2 -0
  145. package/dist/roadtrip/{p-0c4ae774.entry.js.map → p-d9c73068.entry.js.map} +1 -1
  146. package/dist/roadtrip/p-f0a7c904.entry.js +2 -0
  147. package/dist/roadtrip/p-f0a7c904.entry.js.map +1 -0
  148. package/dist/roadtrip/p-fc41f5e6.entry.js +2 -0
  149. package/dist/roadtrip/p-fc41f5e6.entry.js.map +1 -0
  150. package/dist/roadtrip/roadtrip.css +1 -1
  151. package/dist/roadtrip/roadtrip.esm.js +1 -1
  152. package/dist/roadtrip/roadtrip.esm.js.map +1 -1
  153. package/dist/roadtrip/svg/ecomobiliste-baseline-fr.svg +9 -0
  154. package/dist/roadtrip/svg/ecomobiliste-es.svg +22 -0
  155. package/dist/roadtrip/svg/ecomobiliste-fr.svg +9 -0
  156. package/dist/roadtrip/svg/ecomobiliste-inverse-baseline-fr.svg +9 -0
  157. package/dist/roadtrip/svg/ecomobiliste-inverse-es.svg +22 -0
  158. package/dist/roadtrip/svg/ecomobiliste-inverse-fr.svg +9 -0
  159. package/dist/roadtrip/svg/ecomobiliste-inverse-it.svg +21 -0
  160. package/dist/roadtrip/svg/ecomobiliste-it.svg +21 -0
  161. package/dist/types/components/asset/asset.d.ts +44 -0
  162. package/dist/types/components/asset/request.d.ts +2 -0
  163. package/dist/types/components/asset/utils.d.ts +11 -0
  164. package/dist/types/components/asset/validate.d.ts +2 -0
  165. package/dist/types/components/drawer/drawer.d.ts +12 -0
  166. package/dist/types/components/tooltip/tooltip.d.ts +3 -1
  167. package/dist/types/components.d.ts +87 -2
  168. package/dist/types/index.d.ts +1 -0
  169. package/hydrate/index.js +179 -19
  170. package/package.json +2 -1
  171. package/dist/roadtrip/p-08b0be1b.entry.js +0 -2
  172. package/dist/roadtrip/p-08b0be1b.entry.js.map +0 -1
  173. package/dist/roadtrip/p-0c4ae774.entry.js +0 -2
  174. package/dist/roadtrip/p-14ecc91e.entry.js +0 -2
  175. package/dist/roadtrip/p-14ecc91e.entry.js.map +0 -1
  176. package/dist/roadtrip/p-38099006.entry.js +0 -2
  177. package/dist/roadtrip/p-38099006.entry.js.map +0 -1
  178. package/dist/roadtrip/p-3c2da24f.entry.js +0 -2
  179. package/dist/roadtrip/p-3c2da24f.entry.js.map +0 -1
  180. package/dist/roadtrip/p-4001ab77.entry.js +0 -2
  181. package/dist/roadtrip/p-4001ab77.entry.js.map +0 -1
  182. package/dist/roadtrip/p-78e9bbd5.entry.js +0 -2
  183. package/dist/roadtrip/p-78e9bbd5.entry.js.map +0 -1
  184. package/dist/roadtrip/p-91455bc9.entry.js +0 -2
  185. package/dist/roadtrip/p-91455bc9.entry.js.map +0 -1
  186. package/dist/roadtrip/p-b09c076d.entry.js +0 -2
  187. package/dist/roadtrip/p-b09c076d.entry.js.map +0 -1
  188. package/dist/roadtrip/p-c653d32d.entry.js +0 -2
  189. package/dist/roadtrip/p-c653d32d.entry.js.map +0 -1
  190. package/dist/roadtrip/p-cfa6e719.entry.js +0 -2
  191. package/dist/roadtrip/p-cfa6e719.entry.js.map +0 -1
@@ -1 +1 @@
1
- {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,w+EAAw+E;;MCa9+E,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAvE0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAoBO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,2BACE,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 100%;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 6rem;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
1
+ {"file":"road-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,qgFAAqgF;;MCa3gF,OAAO;;;IA8DV,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;OAC1C;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QACxD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;KACF,CAAC;qBAnF0B,gBAAgB,EAAE,UAAU,EAAE;mBAKxC,EAAE;oBAaP,KAAK;wBAOL,QAAQ;kBAKa,KAAK;mBAOb,OAAO;;;;;EAMjC,MAAM,IAAI;IACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;GACpB;;;;EAMD,MAAM,KAAK;IACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAgCO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;GACvC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAC,GAAG;;+BACW,IAAI,CAAC,QAAQ,IAEpCD,sCAAwB,IAAI,CAAC,SAAS,GAAI,EAE1CA,iBACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,IAAI,CAAC,MAAM;OAC5B,EACD,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,IAE3C,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,EACP;GACH;;;AAGH,IAAI,UAAU,GAAG,CAAC,CAAC;;;;;","names":["h","Host"],"sources":["src/components/tooltip/tooltip.css?tag=road-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * Tooltip\n *\n * Index\n * - Tooltip\n * - Position\n */\n\n/**\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --z-index: The z-index of the tooltip.\n * @prop --width: width of the tooltip.\n */\n\n/* TOOLTIP\n -------------------- */\n\n:host {\n --max-width: 85vw;\n --z-index: 1;\n --width: max-content;\n\n position: relative;\n display: inline-block;\n}\n\n:host(:hover) {\n cursor: pointer;\n}\n\n\n:host([trigger=\"hover\"]) .tooltip {\n display: none;\n}\n\n@media (min-width: 1200px) {\n\n :host([trigger=\"hover\"]) .tooltip {\n display: block;\n }\n}\n\n.tooltip {\n position: absolute;\n top: -0.5rem;\n left: 50%;\n z-index: 1;\n width: var(--width);\n min-width: 100%;\n max-width: var(--max-width);\n padding: 0.5rem;\n font-family: var(--road-font);\n font-size: var(--road-body-small);\n color: var(--road-on-surface);\n text-align: center;\n pointer-events: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n opacity: 0;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: translateX(-50%) translateY(-100%);\n}\n\n:host([contentalign=\"left\"]) .tooltip {\n text-align: left;\n}\n\n.tooltip.tooltip-text-left::after {\n text-align: left;\n}\n\n.tooltip-open {\n opacity: 1;\n}\n\n/* POSITION\n -------------------- */\n\n/**\n * Top\n */\n\n:host([data-tooltip-position=\"top\"]) .tooltip {\n left: 50%;\n transform: translateX(-50%) translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top\"]) .tooltip-open {\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n}\n\n/**\n * Top Left\n */\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip {\n left: 0%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-left\"]) .tooltip-open {\n transform: translateY(-100%);\n}\n\n/**\n * Top Right\n */\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip {\n left: 50%;\n transform: translateY(-70%);\n}\n\n:host([data-tooltip-position=\"top-right\"]) .tooltip-open {\n left: 100%;\n transform: translateY(-100%);\n}\n\n/**\n * Left\n */\n\n:host([data-tooltip-position=\"left\"]) .tooltip {\n top: 50%;\n left: 0%;\n margin-right: 0.5rem;\n transform: translateX(-94%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"left\"]) .tooltip-open {\n transform: translateX(-103%) translateY(-55%);\n}\n\n/**\n * Bottom\n */\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip {\n top: 100%;\n left: 50%;\n margin-top: 0.5rem;\n transform: translateX(-50%) translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom\"]) .tooltip-open {\n transform: translateX(-50%) translateY(-6%);\n}\n\n/**\n * Bottom Left\n */\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip {\n top: 100%;\n left: 0;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-left\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Bottom Right\n */\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip {\n top: 100%;\n left: 100%;\n margin-top: 0.5rem;\n transform: translateY(-40%);\n}\n\n:host([data-tooltip-position=\"bottom-right\"]) .tooltip-open {\n transform: translateY(-6%);\n}\n\n/**\n * Right\n */\n\n:host([data-tooltip-position=\"right\"]) .tooltip {\n top: 50%;\n left: 100%;\n margin-left: 0.5rem;\n transform: translateX(-14%) translateY(-55%);\n}\n\n:host([data-tooltip-position=\"right\"]) .tooltip-open {\n transform: translateX(-4%) translateY(-55%);\n}\n","import { Component, Host, h, Prop, Method, Element } from '@stencil/core';\n\n/**\n * @slot tooltip-content - content of the tooltip, if you need to add html content, use this slot, otherwise use directly the content prop.\n *\n * @part tooltip - tooltip container\n */\n\n@Component({\n tag: 'road-tooltip',\n styleUrl: 'tooltip.css',\n shadow: true,\n})\nexport class Tooltip {\n\n @Element() el!: HTMLRoadTooltipElement;\n\n /**\n * The id of tooltip\n */\n @Prop() tooltipId: string = `road-tooltip-${++tooltipIds}`;\n\n /**\n * The tooltip's content.\n */\n @Prop() content = '';\n\n /**\n * The position of the tooltip.\n */\n @Prop() position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n | 'left' = 'top';\n\n /**\n * The content align of the tooltip.\n */\n @Prop() contentAlign:\n | 'center'\n | 'left' = 'center';\n\n /**\n * Indicates whether or not the tooltip is open. You can use this or the open/close methods.\n */\n @Prop({ mutable: true }) isOpen = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = 'hover';\n\n /**\n * Open the tooltip.\n */\n @Method()\n async open() {\n this.isOpen = true;\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n async close() {\n this.isOpen = false;\n }\n\n private onClick = () => {\n if (this.hasTrigger('click')) {\n this.isOpen ? this.close() : this.open();\n }\n };\n\n private onMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private onFocus = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.open();\n }\n };\n\n private onBlur = () => {\n if (this.hasTrigger('focus') || this.hasTrigger('hover')) {\n this.close();\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n render() {\n return (\n <Host\n onMouseOver={this.onMouseOver}\n onMouseOut={this.onMouseOut}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n tabindex=\"0\" // Makes the element focusable\n data-tooltip-position={this.position}\n >\n <slot aria-describedby={this.tooltipId} />\n\n <div\n part=\"tooltip\"\n id={this.tooltipId}\n class={{\n tooltip: true,\n 'tooltip-open': this.isOpen,\n }}\n role=\"tooltip\"\n aria-hidden={!this.isOpen ? 'true' : 'false'}\n >\n {this.content}\n <slot name=\"tooltip-content\" />\n </div>\n </Host>\n );\n }\n}\n\nlet tooltipIds = 0;\n"],"version":3}
@@ -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\"],\"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);
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\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"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-asset.cjs\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"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;
@@ -0,0 +1,82 @@
1
+ 'use strict';
2
+
3
+ const index = require('./index-12592729.js');
4
+
5
+ let CACHED_MAP;
6
+ const getAssetMap = () => {
7
+ if (typeof window === 'undefined') {
8
+ return new Map();
9
+ }
10
+ else {
11
+ if (!CACHED_MAP) {
12
+ const win = window;
13
+ win.Ionicons = win.Ionicons || {};
14
+ CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
15
+ }
16
+ return CACHED_MAP;
17
+ }
18
+ };
19
+ const addAssets = (assets) => {
20
+ const map = getAssetMap();
21
+ Object.keys(assets).forEach(name => map.set(name, assets[name]));
22
+ };
23
+ const getUrl = (i) => {
24
+ let url = getSrc(i.src);
25
+ if (url) {
26
+ return url;
27
+ }
28
+ url = getName(i.name, i.asset);
29
+ if (url) {
30
+ return getNamedUrl(url);
31
+ }
32
+ if (i.asset) {
33
+ url = getSrc(i.asset);
34
+ if (url) {
35
+ return url;
36
+ }
37
+ }
38
+ return null;
39
+ };
40
+ const getNamedUrl = (assetName) => {
41
+ const url = getAssetMap().get(assetName);
42
+ if (url) {
43
+ return url;
44
+ }
45
+ return index.getAssetPath(`svg/${assetName}.svg`);
46
+ };
47
+ const getName = (assetName, asset) => {
48
+ if (!assetName && asset && !isSrc(asset)) {
49
+ assetName = asset;
50
+ }
51
+ if (isStr(assetName)) {
52
+ assetName = toLower(assetName);
53
+ }
54
+ if (!isStr(assetName) || assetName.trim() === '') {
55
+ return null;
56
+ }
57
+ // only allow alpha characters and dash
58
+ const invalidChars = assetName.replace(/[a-z]|-|\d/gi, '');
59
+ if (invalidChars !== '') {
60
+ return null;
61
+ }
62
+ return assetName;
63
+ };
64
+ const getSrc = (src) => {
65
+ if (isStr(src)) {
66
+ src = src.trim();
67
+ if (isSrc(src)) {
68
+ return src;
69
+ }
70
+ }
71
+ return null;
72
+ };
73
+ const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
74
+ const isStr = (val) => typeof val === 'string';
75
+ const toLower = (val) => val.toLowerCase();
76
+
77
+ exports.addAssets = addAssets;
78
+ exports.getName = getName;
79
+ exports.getUrl = getUrl;
80
+ exports.isStr = isStr;
81
+
82
+ //# sourceMappingURL=utils-5483e9fa.js.map
@@ -0,0 +1 @@
1
+ {"file":"utils-5483e9fa.js","mappings":"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","names":["getAssetPath"],"sources":["src/components/asset/utils.ts"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Asset } from './asset';\n\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getAssetMap = (): Map<string, string> => {\n if (typeof window === 'undefined') {\n return new Map();\n } else {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Ionicons = win.Ionicons || {};\n CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();\n }\n return CACHED_MAP;\n }\n};\n\nexport const addAssets = (assets: { [name: string]: string; }) => {\n const map = getAssetMap();\n Object.keys(assets).forEach(name => map.set(name, assets[name]));\n};\n\n\nexport const getUrl = (i: Asset) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.asset);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.asset) {\n url = getSrc(i.asset);\n if (url) {\n return url;\n }\n }\n\n return null;\n};\n\n\nconst getNamedUrl = (assetName: string) => {\n const url = getAssetMap().get(assetName);\n if (url) {\n return url;\n }\n return getAssetPath(`svg/${assetName}.svg`);\n};\n\n\nexport const getName = (\n assetName: string | undefined,\n asset: string | undefined\n) => {\n\n if (!assetName && asset && !isSrc(asset)) {\n assetName = asset;\n }\n if (isStr(assetName)) {\n assetName = toLower(assetName);\n }\n\n if (!isStr(assetName) || assetName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = assetName.replace(/[a-z]|-|\\d/gi, '');\n if (invalidChars !== '') {\n return null;\n }\n\n return assetName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\n\nexport const isStr = (val: any): val is string => typeof val === 'string';\n\nexport const toLower = (val: string) => val.toLowerCase();"],"version":3}
@@ -2,6 +2,7 @@
2
2
  "entries": [
3
3
  "components/icon/icon.js",
4
4
  "components/illustration/illustration.js",
5
+ "components/asset/asset.js",
5
6
  "components/accordion/accordion.js",
6
7
  "components/alert/alert.js",
7
8
  "components/area-code/area-code.js",
@@ -15,7 +15,8 @@
15
15
  * @prop --accordion-header-border: height of the border of the header
16
16
  * @prop --content-margin: margin of the accordion content
17
17
  * @prop --content-padding: padding of the accordion content
18
- * @prop --header-padding: padding of the accordion header
18
+ * @prop --header-padding: padding horizontal and vertical of the accordion header
19
+ * @prop --header-padding-vertical: padding of the accordion header
19
20
  * @prop --icon-color: color of the chevron icon
20
21
  * @prop --max-height: maximum height of the collapse content
21
22
  */
@@ -25,16 +26,13 @@
25
26
  --content-margin: 0 var(--road-spacing-05) var(--road-spacing-04);
26
27
  --content-padding: var(--road-spacing-04) 0 0;
27
28
  --header-padding: var(--road-spacing-04) var(--road-spacing-05);
29
+ --header-padding-vertical: var(--road-spacing-04);
28
30
  --icon-color: var(--road-icon);
29
31
  --max-height: none;
30
32
 
31
33
  display: block;
32
34
  }
33
35
 
34
- :host(.focus-visible){
35
- border: 1px solid var(--road-primary);
36
- }
37
-
38
36
  /* ACCORDION
39
37
  -------------------- */
40
38
 
@@ -90,7 +88,6 @@
90
88
  display: block;
91
89
  border: 1px solid transparent;
92
90
  border-radius: 0.25rem;
93
- outline: 0;
94
91
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
95
92
  }
96
93
 
@@ -138,7 +135,7 @@
138
135
 
139
136
  .accordion-light-header {
140
137
  position: relative;
141
- padding: var(--road-spacing-04) 0;
138
+ padding: var(--header-padding-vertical) 0;
142
139
  font-size: var(--road-body-large);
143
140
  }
144
141
 
@@ -53,7 +53,15 @@ export default {
53
53
  },
54
54
  '--header-padding': {
55
55
  table: {
56
- defaultValue: { summary: '1rem 0.5rem 1rem 1rem' },
56
+ defaultValue: { summary: 'var(--road-spacing-04) var(--road-spacing-05)' },
57
+ },
58
+ control: {
59
+ type: null,
60
+ },
61
+ },
62
+ '--header-padding-vertical': {
63
+ table: {
64
+ defaultValue: { summary: 'var(--road-spacing-04)' },
57
65
  },
58
66
  control: {
59
67
  type: null,
@@ -61,7 +69,7 @@ export default {
61
69
  },
62
70
  '--icon-color': {
63
71
  table: {
64
- defaultValue: { summary: 'var(--road-grey-900)' },
72
+ defaultValue: { summary: 'var(--road-icon)' },
65
73
  },
66
74
  control: {
67
75
  type: null,
@@ -0,0 +1,22 @@
1
+ /*
2
+ * Asset
3
+ *
4
+ * Index
5
+ */
6
+
7
+ :host {
8
+ box-sizing: content-box;
9
+ contain: strict;
10
+ display: table;
11
+ }
12
+
13
+ .icon-inner{
14
+ width: -moz-fit-content;
15
+ width: fit-content;
16
+ }
17
+
18
+ :host svg {
19
+ display: block;
20
+ width: 100%;
21
+ height: 100%;
22
+ }
@@ -0,0 +1,231 @@
1
+ import { Build, Host, h } from "@stencil/core";
2
+ import { getAssetSvgContent, roadassetContent } from "./request";
3
+ import { getName, getUrl } from "./utils";
4
+ export class Asset {
5
+ constructor() {
6
+ this.assetSvgContent = undefined;
7
+ this.isVisible = false;
8
+ this.ariaLabel = undefined;
9
+ this.ariaHidden = undefined;
10
+ this.name = undefined;
11
+ this.src = undefined;
12
+ this.asset = undefined;
13
+ this.lazy = false;
14
+ this.sanitize = true;
15
+ }
16
+ componentWillLoad() {
17
+ this.waitUntilVisible(this.el, '50px', () => {
18
+ this.isVisible = true;
19
+ this.loadAsset();
20
+ });
21
+ }
22
+ disconnectedCallback() {
23
+ if (this.io) {
24
+ this.io.disconnect();
25
+ this.io = undefined;
26
+ }
27
+ }
28
+ waitUntilVisible(el, rootMargin, cb) {
29
+ if (this.lazy && window.IntersectionObserver) {
30
+ const io = this.io = new window.IntersectionObserver((data) => {
31
+ if (data[0].isIntersecting) {
32
+ io.disconnect();
33
+ this.io = undefined;
34
+ cb();
35
+ }
36
+ }, { rootMargin });
37
+ io.observe(el);
38
+ }
39
+ else {
40
+ // browser doesn't support IntersectionObserver
41
+ // so just fallback to always show it
42
+ cb();
43
+ }
44
+ }
45
+ loadAsset() {
46
+ if (Build.isBrowser && this.isVisible) {
47
+ const url = getUrl(this);
48
+ if (url) {
49
+ if (roadassetContent.has(url)) {
50
+ // sync if it's already loaded
51
+ this.assetSvgContent = roadassetContent.get(url);
52
+ }
53
+ else {
54
+ // async if it hasn't been loaded
55
+ getAssetSvgContent(url, this.sanitize).then(() => (this.assetSvgContent = roadassetContent.get(url)));
56
+ }
57
+ }
58
+ }
59
+ if (!this.ariaLabel && this.ariaHidden !== 'true') {
60
+ const label = getName(this.name, this.asset);
61
+ // user did not provide a label
62
+ // come up with the label based on the icon name
63
+ if (label) {
64
+ this.ariaLabel = label.replace(/-/g, ' ');
65
+ }
66
+ }
67
+ }
68
+ render() {
69
+ return (h(Host, { "aria-hidden": "true", role: "img" }, ((this.assetSvgContent !== '')
70
+ ? h("div", { class: "icon-inner", innerHTML: this.assetSvgContent })
71
+ : h("div", { class: "icon-inner" }))));
72
+ }
73
+ static get is() { return "road-asset"; }
74
+ static get encapsulation() { return "shadow"; }
75
+ static get originalStyleUrls() {
76
+ return {
77
+ "$": ["asset.css"]
78
+ };
79
+ }
80
+ static get styleUrls() {
81
+ return {
82
+ "$": ["asset.css"]
83
+ };
84
+ }
85
+ static get assetsDirs() { return ["svg"]; }
86
+ static get properties() {
87
+ return {
88
+ "ariaLabel": {
89
+ "type": "string",
90
+ "mutable": true,
91
+ "complexType": {
92
+ "original": "string",
93
+ "resolved": "string | undefined",
94
+ "references": {}
95
+ },
96
+ "required": false,
97
+ "optional": true,
98
+ "docs": {
99
+ "tags": [],
100
+ "text": "Specifies the label to use for accessibility. Defaults to the illustration name."
101
+ },
102
+ "attribute": "aria-label",
103
+ "reflect": true
104
+ },
105
+ "ariaHidden": {
106
+ "type": "string",
107
+ "mutable": false,
108
+ "complexType": {
109
+ "original": "string",
110
+ "resolved": "string | undefined",
111
+ "references": {}
112
+ },
113
+ "required": false,
114
+ "optional": true,
115
+ "docs": {
116
+ "tags": [],
117
+ "text": "Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree."
118
+ },
119
+ "attribute": "aria-hidden",
120
+ "reflect": true
121
+ },
122
+ "name": {
123
+ "type": "string",
124
+ "mutable": false,
125
+ "complexType": {
126
+ "original": "string",
127
+ "resolved": "string | undefined",
128
+ "references": {}
129
+ },
130
+ "required": false,
131
+ "optional": true,
132
+ "docs": {
133
+ "tags": [],
134
+ "text": "Specifies which illustration to use from the built-in set of illustrations."
135
+ },
136
+ "attribute": "name",
137
+ "reflect": false
138
+ },
139
+ "src": {
140
+ "type": "string",
141
+ "mutable": false,
142
+ "complexType": {
143
+ "original": "string",
144
+ "resolved": "string | undefined",
145
+ "references": {}
146
+ },
147
+ "required": false,
148
+ "optional": true,
149
+ "docs": {
150
+ "tags": [],
151
+ "text": "Specifies the exact `src` of an SVG file to use."
152
+ },
153
+ "attribute": "src",
154
+ "reflect": false
155
+ },
156
+ "asset": {
157
+ "type": "any",
158
+ "mutable": false,
159
+ "complexType": {
160
+ "original": "any",
161
+ "resolved": "any",
162
+ "references": {}
163
+ },
164
+ "required": false,
165
+ "optional": true,
166
+ "docs": {
167
+ "tags": [],
168
+ "text": "A combination of both `name` and `src`. If a `src` url is detected\nit will set the `src` property. Otherwise it assumes it's a built-in named\nSVG and set the `name` property."
169
+ },
170
+ "attribute": "asset",
171
+ "reflect": false
172
+ },
173
+ "lazy": {
174
+ "type": "boolean",
175
+ "mutable": false,
176
+ "complexType": {
177
+ "original": "boolean",
178
+ "resolved": "boolean",
179
+ "references": {}
180
+ },
181
+ "required": false,
182
+ "optional": false,
183
+ "docs": {
184
+ "tags": [],
185
+ "text": "If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\nDefault, `false`."
186
+ },
187
+ "attribute": "lazy",
188
+ "reflect": false,
189
+ "defaultValue": "false"
190
+ },
191
+ "sanitize": {
192
+ "type": "boolean",
193
+ "mutable": false,
194
+ "complexType": {
195
+ "original": "boolean",
196
+ "resolved": "boolean",
197
+ "references": {}
198
+ },
199
+ "required": false,
200
+ "optional": false,
201
+ "docs": {
202
+ "tags": [],
203
+ "text": "When set to `false`, SVG content that is HTTP fetched will not be checked\nif the response SVG content has any `<script>` elements, or any attributes\nthat start with `on`, such as `onclick`."
204
+ },
205
+ "attribute": "sanitize",
206
+ "reflect": false,
207
+ "defaultValue": "true"
208
+ }
209
+ };
210
+ }
211
+ static get states() {
212
+ return {
213
+ "assetSvgContent": {},
214
+ "isVisible": {}
215
+ };
216
+ }
217
+ static get elementRef() { return "el"; }
218
+ static get watchers() {
219
+ return [{
220
+ "propName": "name",
221
+ "methodName": "loadAsset"
222
+ }, {
223
+ "propName": "src",
224
+ "methodName": "loadAsset"
225
+ }, {
226
+ "propName": "asset",
227
+ "methodName": "loadAsset"
228
+ }];
229
+ }
230
+ }
231
+ //# sourceMappingURL=asset.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"asset.js","sourceRoot":"","sources":["../../../src/components/asset/asset.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getAssetSvgContent, roadassetContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n tag: 'road-asset',\n assetsDirs: ['svg'],\n styleUrl: 'asset.css',\n shadow: true,\n})\nexport class Asset {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLRoadAssetElement;\n\n @State() private assetSvgContent?: string;\n\n @State() private isVisible = false;\n\n\n\n /**\n * Specifies the label to use for accessibility. Defaults to the illustration name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n /**\n * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n */\n @Prop({ reflect: true }) ariaHidden?: string;\n\n /**\n * Specifies which illustration to use from the built-in set of illustrations.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() asset?: any;\n\n /**\n * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n * Default, `false`.\n */\n @Prop() lazy: boolean = false;\n\n /**\n * When set to `false`, SVG content that is HTTP fetched will not be checked\n * if the response SVG content has any `<script>` elements, or any attributes\n * that start with `on`, such as `onclick`.\n */\n @Prop() sanitize = true;\n\n componentWillLoad() {\n\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadAsset();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n private waitUntilVisible(el: HTMLRoadAssetElement, rootMargin: string, cb: () => void) {\n if (this.lazy && (window as any).IntersectionObserver) {\n const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n }, { rootMargin });\n\n io.observe(el);\n\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('asset')\n loadAsset() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (roadassetContent.has(url)) {\n // sync if it's already loaded\n this.assetSvgContent = roadassetContent.get(url);\n } else {\n // async if it hasn't been loaded\n getAssetSvgContent(url, this.sanitize).then(() => (this.assetSvgContent = roadassetContent.get(url)));\n }\n }\n }\n\n if (!this.ariaLabel && this.ariaHidden !== 'true') {\n const label = getName(this.name, this.asset);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.replace(/-/g, ' ');\n }\n }\n }\n\n render() {\n\n return (\n <Host aria-hidden=\"true\" role=\"img\">\n {(\n (this.assetSvgContent !== '')\n ? <div class=\"icon-inner\" innerHTML={this.assetSvgContent}></div>\n : <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}"]}
@@ -0,0 +1,42 @@
1
+ import { html } from 'lit-html';
2
+ import { ifDefined } from 'lit-html/directives/if-defined';
3
+ import { asset } from '../../../.storybook/asset';
4
+
5
+ export default {
6
+ title: 'Media/Asset',
7
+ component: 'road-asset',
8
+ };
9
+
10
+ export const Playground = ({ name, lazy }) => html`
11
+ <road-asset
12
+ name="${ifDefined(name)}"
13
+ lazy="${ifDefined(lazy)}"
14
+ ></road-asset>
15
+ `;
16
+ Playground.args = {
17
+ name: 'ecomobiliste-fr',
18
+ lazy: null,
19
+ };
20
+ Playground.argTypes = {
21
+ name: {
22
+ options: asset,
23
+ control: {
24
+ type: 'select',
25
+ },
26
+ },
27
+ lazy: {
28
+ control: 'boolean',
29
+ },
30
+ 'aria-label': {
31
+ control: 'text',
32
+ },
33
+ 'aria-hidden': {
34
+ control: 'text',
35
+ },
36
+ src: {
37
+ control: 'text',
38
+ },
39
+ sanitize: {
40
+ control: 'boolean',
41
+ },
42
+ };