@tmorrow/cre8-wc 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (435) hide show
  1. package/cdn/cre8-wc.esm.js +1 -1
  2. package/cdn/cre8-wc.esm.js.map +1 -1
  3. package/cdn/cre8-wc.min.js +1 -1
  4. package/cdn/cre8-wc.min.js.map +1 -1
  5. package/lib/cdn-entry.js +129 -0
  6. package/lib/cdn-entry.js.map +1 -0
  7. package/lib/components/accordion/accordion.js +58 -40
  8. package/lib/components/accordion/accordion.js.map +1 -0
  9. package/lib/components/accordion/accordion.styles.js +4 -0
  10. package/lib/components/accordion/accordion.styles.js.map +1 -0
  11. package/lib/components/accordion-item/accordion-item.js +187 -98
  12. package/lib/components/accordion-item/accordion-item.js.map +1 -0
  13. package/lib/components/accordion-item/accordion-item.styles.js +4 -0
  14. package/lib/components/accordion-item/accordion-item.styles.js.map +1 -0
  15. package/lib/components/alert/alert.js +146 -107
  16. package/lib/components/alert/alert.js.map +1 -0
  17. package/lib/components/alert/alert.styles.js +4 -0
  18. package/lib/components/alert/alert.styles.js.map +1 -0
  19. package/lib/components/badge/badge.js +73 -50
  20. package/lib/components/badge/badge.js.map +1 -0
  21. package/lib/components/badge/badge.styles.js +4 -0
  22. package/lib/components/badge/badge.styles.js.map +1 -0
  23. package/lib/components/band/band.js +34 -31
  24. package/lib/components/band/band.js.map +1 -0
  25. package/lib/components/band/band.styles.js +4 -0
  26. package/lib/components/band/band.styles.js.map +1 -0
  27. package/lib/components/breadcrumbs/breadcrumbs.js +52 -28
  28. package/lib/components/breadcrumbs/breadcrumbs.js.map +1 -0
  29. package/lib/components/breadcrumbs/breadcrumbs.styles.js +4 -0
  30. package/lib/components/breadcrumbs/breadcrumbs.styles.js.map +1 -0
  31. package/lib/components/breadcrumbs-item/breadcrumbs-item.js +28 -27
  32. package/lib/components/breadcrumbs-item/breadcrumbs-item.js.map +1 -0
  33. package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.js +4 -0
  34. package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.js.map +1 -0
  35. package/lib/components/button/button.js +297 -1040
  36. package/lib/components/button/button.js.map +1 -0
  37. package/lib/components/button/button.styles.js +885 -0
  38. package/lib/components/button/button.styles.js.map +1 -0
  39. package/lib/components/button-group/button-group.js +30 -27
  40. package/lib/components/button-group/button-group.js.map +1 -0
  41. package/lib/components/button-group/button-group.styles.js +4 -0
  42. package/lib/components/button-group/button-group.styles.js.map +1 -0
  43. package/lib/components/card/card.js +57 -35
  44. package/lib/components/card/card.js.map +1 -0
  45. package/lib/components/card/card.styles.js +4 -0
  46. package/lib/components/card/card.styles.js.map +1 -0
  47. package/lib/components/chart/chart.js +528 -354
  48. package/lib/components/chart/chart.js.map +1 -0
  49. package/lib/components/chart/chart.styles.js +4 -0
  50. package/lib/components/chart/chart.styles.js.map +1 -0
  51. package/lib/components/checkbox-field/checkbox-field.js +66 -53
  52. package/lib/components/checkbox-field/checkbox-field.js.map +1 -0
  53. package/lib/components/checkbox-field/checkbox-field.styles.js +4 -0
  54. package/lib/components/checkbox-field/checkbox-field.styles.js.map +1 -0
  55. package/lib/components/checkbox-field-item/checkbox-field-item.js +252 -183
  56. package/lib/components/checkbox-field-item/checkbox-field-item.js.map +1 -0
  57. package/lib/components/checkbox-field-item/checkbox-field-item.styles.js +4 -0
  58. package/lib/components/checkbox-field-item/checkbox-field-item.styles.js.map +1 -0
  59. package/lib/components/contexts/form-internals-context.js +9 -0
  60. package/lib/components/contexts/form-internals-context.js.map +1 -0
  61. package/lib/components/cre8-element.js +57 -56
  62. package/lib/components/cre8-element.js.map +1 -0
  63. package/lib/components/cre8-form-element.js +212 -244
  64. package/lib/components/cre8-form-element.js.map +1 -0
  65. package/lib/components/danger-button/danger-button.js +274 -147
  66. package/lib/components/danger-button/danger-button.js.map +1 -0
  67. package/lib/components/danger-button/danger-button.styles.js +4 -0
  68. package/lib/components/danger-button/danger-button.styles.js.map +1 -0
  69. package/lib/components/date-picker/calendar/calendar.js +465 -0
  70. package/lib/components/date-picker/calendar/calendar.js.map +1 -0
  71. package/lib/components/date-picker/calendar/calendar.styles.js +4 -0
  72. package/lib/components/date-picker/calendar/calendar.styles.js.map +1 -0
  73. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js +76 -0
  74. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.js.map +1 -0
  75. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.js +4 -0
  76. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.js.map +1 -0
  77. package/lib/components/date-picker/calendar-navigation/calendar-navigation.js +110 -0
  78. package/lib/components/date-picker/calendar-navigation/calendar-navigation.js.map +1 -0
  79. package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.js +4 -0
  80. package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.js.map +1 -0
  81. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.js +116 -0
  82. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.js.map +1 -0
  83. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.js +4 -0
  84. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.js.map +1 -0
  85. package/lib/components/date-picker/date-picker.js +91 -784
  86. package/lib/components/date-picker/date-picker.js.map +1 -0
  87. package/lib/components/date-picker/date-picker.styles.js +4 -0
  88. package/lib/components/date-picker/date-picker.styles.js.map +1 -0
  89. package/lib/components/divider/divider.js +45 -35
  90. package/lib/components/divider/divider.js.map +1 -0
  91. package/lib/components/divider/divider.styles.js +4 -0
  92. package/lib/components/divider/divider.styles.js.map +1 -0
  93. package/lib/components/dropdown/dropdown.js +97 -63
  94. package/lib/components/dropdown/dropdown.js.map +1 -0
  95. package/lib/components/dropdown/dropdown.styles.js +4 -0
  96. package/lib/components/dropdown/dropdown.styles.js.map +1 -0
  97. package/lib/components/dropdown-item/dropdown-item.js +38 -31
  98. package/lib/components/dropdown-item/dropdown-item.js.map +1 -0
  99. package/lib/components/dropdown-item/dropdown-item.styles.js +4 -0
  100. package/lib/components/dropdown-item/dropdown-item.styles.js.map +1 -0
  101. package/lib/components/feature/feature.js +40 -35
  102. package/lib/components/feature/feature.js.map +1 -0
  103. package/lib/components/feature/feature.styles.js +4 -0
  104. package/lib/components/feature/feature.styles.js.map +1 -0
  105. package/lib/components/field/field.js +218 -153
  106. package/lib/components/field/field.js.map +1 -0
  107. package/lib/components/field/field.styles.js +4 -0
  108. package/lib/components/field/field.styles.js.map +1 -0
  109. package/lib/components/field-note/field-note.js +58 -45
  110. package/lib/components/field-note/field-note.js.map +1 -0
  111. package/lib/components/field-note/field-note.styles.js +4 -0
  112. package/lib/components/field-note/field-note.styles.js.map +1 -0
  113. package/lib/components/footer/footer.js +25 -18
  114. package/lib/components/footer/footer.js.map +1 -0
  115. package/lib/components/footer/footer.styles.js +4 -0
  116. package/lib/components/footer/footer.styles.js.map +1 -0
  117. package/lib/components/global-nav/global-nav.js +44 -37
  118. package/lib/components/global-nav/global-nav.js.map +1 -0
  119. package/lib/components/global-nav/global-nav.styles.js +4 -0
  120. package/lib/components/global-nav/global-nav.styles.js.map +1 -0
  121. package/lib/components/global-nav-item/global-nav-item.js +149 -112
  122. package/lib/components/global-nav-item/global-nav-item.js.map +1 -0
  123. package/lib/components/global-nav-item/global-nav-item.styles.js +4 -0
  124. package/lib/components/global-nav-item/global-nav-item.styles.js.map +1 -0
  125. package/lib/components/grid/grid.js +48 -45
  126. package/lib/components/grid/grid.js.map +1 -0
  127. package/lib/components/grid/grid.styles.js +4 -0
  128. package/lib/components/grid/grid.styles.js.map +1 -0
  129. package/lib/components/grid-item/grid-item.js +19 -16
  130. package/lib/components/grid-item/grid-item.js.map +1 -0
  131. package/lib/components/grid-item/grid-item.styles.js +4 -0
  132. package/lib/components/grid-item/grid-item.styles.js.map +1 -0
  133. package/lib/components/header/header.js +34 -29
  134. package/lib/components/header/header.js.map +1 -0
  135. package/lib/components/header/header.styles.js +4 -0
  136. package/lib/components/header/header.styles.js.map +1 -0
  137. package/lib/components/heading/heading.js +113 -76
  138. package/lib/components/heading/heading.js.map +1 -0
  139. package/lib/components/heading/heading.styles.js +4 -0
  140. package/lib/components/heading/heading.styles.js.map +1 -0
  141. package/lib/components/hero/hero.js +43 -40
  142. package/lib/components/hero/hero.js.map +1 -0
  143. package/lib/components/hero/hero.styles.js +4 -0
  144. package/lib/components/hero/hero.styles.js.map +1 -0
  145. package/lib/components/icon/icon.js +232 -9
  146. package/lib/components/icon/icon.js.map +1 -0
  147. package/lib/components/icon/icon.styles.js +4 -0
  148. package/lib/components/icon/icon.styles.js.map +1 -0
  149. package/lib/components/inline-alert/inline-alert.js +114 -87
  150. package/lib/components/inline-alert/inline-alert.js.map +1 -0
  151. package/lib/components/inline-alert/inline-alert.styles.js +4 -0
  152. package/lib/components/inline-alert/inline-alert.styles.js.map +1 -0
  153. package/lib/components/layout/layout.js +30 -27
  154. package/lib/components/layout/layout.js.map +1 -0
  155. package/lib/components/layout/layout.styles.js +4 -0
  156. package/lib/components/layout/layout.styles.js.map +1 -0
  157. package/lib/components/layout-container/layout-container.js +30 -27
  158. package/lib/components/layout-container/layout-container.js.map +1 -0
  159. package/lib/components/layout-container/layout-container.styles.js +4 -0
  160. package/lib/components/layout-container/layout-container.styles.js.map +1 -0
  161. package/lib/components/layout-section/layout-section.js +41 -33
  162. package/lib/components/layout-section/layout-section.js.map +1 -0
  163. package/lib/components/layout-section/layout-section.styles.js +4 -0
  164. package/lib/components/layout-section/layout-section.styles.js.map +1 -0
  165. package/lib/components/linelength-container/linelength-container.js +19 -16
  166. package/lib/components/linelength-container/linelength-container.js.map +1 -0
  167. package/lib/components/linelength-container/linelength-container.styles.js +4 -0
  168. package/lib/components/linelength-container/linelength-container.styles.js.map +1 -0
  169. package/lib/components/link/link.js +125 -87
  170. package/lib/components/link/link.js.map +1 -0
  171. package/lib/components/link/link.styles.js +4 -0
  172. package/lib/components/link/link.styles.js.map +1 -0
  173. package/lib/components/link-list/link-list.js +48 -45
  174. package/lib/components/link-list/link-list.js.map +1 -0
  175. package/lib/components/link-list/link-list.styles.js +4 -0
  176. package/lib/components/link-list/link-list.styles.js.map +1 -0
  177. package/lib/components/link-list-item/link-list-item.js +40 -37
  178. package/lib/components/link-list-item/link-list-item.js.map +1 -0
  179. package/lib/components/link-list-item/link-list-item.styles.js +4 -0
  180. package/lib/components/link-list-item/link-list-item.styles.js.map +1 -0
  181. package/lib/components/list/list.js +35 -32
  182. package/lib/components/list/list.js.map +1 -0
  183. package/lib/components/list/list.styles.js +4 -0
  184. package/lib/components/list/list.styles.js.map +1 -0
  185. package/lib/components/list-item/list-item.js +25 -21
  186. package/lib/components/list-item/list-item.js.map +1 -0
  187. package/lib/components/list-item/list-item.styles.js +4 -0
  188. package/lib/components/list-item/list-item.styles.js.map +1 -0
  189. package/lib/components/loading-spinner/loading-spinner.js +126 -71
  190. package/lib/components/loading-spinner/loading-spinner.js.map +1 -0
  191. package/lib/components/loading-spinner/loading-spinner.styles.js +4 -0
  192. package/lib/components/loading-spinner/loading-spinner.styles.js.map +1 -0
  193. package/lib/components/logo/logo.js +28 -25
  194. package/lib/components/logo/logo.js.map +1 -0
  195. package/lib/components/logo/logo.styles.js +4 -0
  196. package/lib/components/logo/logo.styles.js.map +1 -0
  197. package/lib/components/main/main.js +29 -26
  198. package/lib/components/main/main.js.map +1 -0
  199. package/lib/components/main/main.styles.js +4 -0
  200. package/lib/components/main/main.styles.js.map +1 -0
  201. package/lib/components/modal/modal.js +174 -125
  202. package/lib/components/modal/modal.js.map +1 -0
  203. package/lib/components/modal/modal.styles.js +4 -0
  204. package/lib/components/modal/modal.styles.js.map +1 -0
  205. package/lib/components/multi-select/multi-select.js +300 -211
  206. package/lib/components/multi-select/multi-select.js.map +1 -0
  207. package/lib/components/multi-select/multi-select.styles.js +4 -0
  208. package/lib/components/multi-select/multi-select.styles.js.map +1 -0
  209. package/lib/components/nav-container/nav-container.js +19 -16
  210. package/lib/components/nav-container/nav-container.js.map +1 -0
  211. package/lib/components/nav-container/nav-container.styles.js +4 -0
  212. package/lib/components/nav-container/nav-container.styles.js.map +1 -0
  213. package/lib/components/page-header/page-header.js +36 -29
  214. package/lib/components/page-header/page-header.js.map +1 -0
  215. package/lib/components/page-header/page-header.styles.js +4 -0
  216. package/lib/components/page-header/page-header.styles.js.map +1 -0
  217. package/lib/components/pagination/page-counter/page-counter.js +67 -0
  218. package/lib/components/pagination/page-counter/page-counter.js.map +1 -0
  219. package/lib/components/pagination/page-counter/page-counter.styles.js +4 -0
  220. package/lib/components/pagination/page-counter/page-counter.styles.js.map +1 -0
  221. package/lib/components/pagination/pagination.js +282 -237
  222. package/lib/components/pagination/pagination.js.map +1 -0
  223. package/lib/components/pagination/pagination.styles.js +4 -0
  224. package/lib/components/pagination/pagination.styles.js.map +1 -0
  225. package/lib/components/percent-bar/percent-bar.js +56 -48
  226. package/lib/components/percent-bar/percent-bar.js.map +1 -0
  227. package/lib/components/percent-bar/percent-bar.styles.js +4 -0
  228. package/lib/components/percent-bar/percent-bar.styles.js.map +1 -0
  229. package/lib/components/popover/popover.js +304 -179
  230. package/lib/components/popover/popover.js.map +1 -0
  231. package/lib/components/popover/popover.styles.js +4 -0
  232. package/lib/components/popover/popover.styles.js.map +1 -0
  233. package/lib/components/primary-nav/primary-nav.js +44 -37
  234. package/lib/components/primary-nav/primary-nav.js.map +1 -0
  235. package/lib/components/primary-nav/primary-nav.styles.js +4 -0
  236. package/lib/components/primary-nav/primary-nav.styles.js.map +1 -0
  237. package/lib/components/primary-nav-item/primary-nav-item.js +151 -113
  238. package/lib/components/primary-nav-item/primary-nav-item.js.map +1 -0
  239. package/lib/components/primary-nav-item/primary-nav-item.styles.js +4 -0
  240. package/lib/components/primary-nav-item/primary-nav-item.styles.js.map +1 -0
  241. package/lib/components/progress-meter/progress-meter.js +74 -57
  242. package/lib/components/progress-meter/progress-meter.js.map +1 -0
  243. package/lib/components/progress-meter/progress-meter.styles.js +4 -0
  244. package/lib/components/progress-meter/progress-meter.styles.js.map +1 -0
  245. package/lib/components/progress-steps/progress-steps.js +19 -0
  246. package/lib/components/progress-steps/progress-steps.js.map +1 -0
  247. package/lib/components/progress-steps/progress-steps.styles.js +4 -0
  248. package/lib/components/progress-steps/progress-steps.styles.js.map +1 -0
  249. package/lib/components/progress-steps-item/progress-steps-item.js +52 -40
  250. package/lib/components/progress-steps-item/progress-steps-item.js.map +1 -0
  251. package/lib/components/progress-steps-item/progress-steps-item.styles.js +4 -0
  252. package/lib/components/progress-steps-item/progress-steps-item.styles.js.map +1 -0
  253. package/lib/components/radio-field/radio-field.js +59 -49
  254. package/lib/components/radio-field/radio-field.js.map +1 -0
  255. package/lib/components/radio-field/radio-field.styles.js +4 -0
  256. package/lib/components/radio-field/radio-field.styles.js.map +1 -0
  257. package/lib/components/radio-field-item/radio-field-item.js +222 -179
  258. package/lib/components/radio-field-item/radio-field-item.js.map +1 -0
  259. package/lib/components/radio-field-item/radio-field-item.styles.js +4 -0
  260. package/lib/components/radio-field-item/radio-field-item.styles.js.map +1 -0
  261. package/lib/components/remove-tag/remove-tag.js +89 -60
  262. package/lib/components/remove-tag/remove-tag.js.map +1 -0
  263. package/lib/components/remove-tag/remove-tag.styles.js +4 -0
  264. package/lib/components/remove-tag/remove-tag.styles.js.map +1 -0
  265. package/lib/components/section/section.js +46 -27
  266. package/lib/components/section/section.js.map +1 -0
  267. package/lib/components/section/section.styles.js +4 -0
  268. package/lib/components/section/section.styles.js.map +1 -0
  269. package/lib/components/select/select.js +243 -158
  270. package/lib/components/select/select.js.map +1 -0
  271. package/lib/components/select/select.styles.js +4 -0
  272. package/lib/components/select/select.styles.js.map +1 -0
  273. package/lib/components/select-tile/select-tile-checkbox-controller.js +60 -0
  274. package/lib/components/select-tile/select-tile-checkbox-controller.js.map +1 -0
  275. package/lib/components/select-tile/select-tile-radio-controller.js +167 -0
  276. package/lib/components/select-tile/select-tile-radio-controller.js.map +1 -0
  277. package/lib/components/select-tile/select-tile.js +228 -223
  278. package/lib/components/select-tile/select-tile.js.map +1 -0
  279. package/lib/components/select-tile/select-tile.styles.js +4 -0
  280. package/lib/components/select-tile/select-tile.styles.js.map +1 -0
  281. package/lib/components/select-tile-list/select-tile-list.js +76 -62
  282. package/lib/components/select-tile-list/select-tile-list.js.map +1 -0
  283. package/lib/components/select-tile-list/select-tile-list.styles.js +4 -0
  284. package/lib/components/select-tile-list/select-tile-list.styles.js.map +1 -0
  285. package/lib/components/skeleton-loader/skeleton-loader.js +68 -39
  286. package/lib/components/skeleton-loader/skeleton-loader.js.map +1 -0
  287. package/lib/components/skeleton-loader/skeleton-loader.styles.js +4 -0
  288. package/lib/components/skeleton-loader/skeleton-loader.styles.js.map +1 -0
  289. package/lib/components/split-button/split-button.js +51 -46
  290. package/lib/components/split-button/split-button.js.map +1 -0
  291. package/lib/components/split-button/split-button.styles.js +4 -0
  292. package/lib/components/split-button/split-button.styles.js.map +1 -0
  293. package/lib/components/submenu/submenu.js +19 -16
  294. package/lib/components/submenu/submenu.js.map +1 -0
  295. package/lib/components/submenu/submenu.styles.js +4 -0
  296. package/lib/components/submenu/submenu.styles.js.map +1 -0
  297. package/lib/components/submenu-item/submenu-item.js +32 -26
  298. package/lib/components/submenu-item/submenu-item.js.map +1 -0
  299. package/lib/components/submenu-item/submenu-item.styles.js +4 -0
  300. package/lib/components/submenu-item/submenu-item.styles.js.map +1 -0
  301. package/lib/components/tab/tab.js +74 -63
  302. package/lib/components/tab/tab.js.map +1 -0
  303. package/lib/components/tab/tab.styles.js +4 -0
  304. package/lib/components/tab/tab.styles.js.map +1 -0
  305. package/lib/components/tab-panel/tab-panel.js +49 -43
  306. package/lib/components/tab-panel/tab-panel.js.map +1 -0
  307. package/lib/components/tab-panel/tab-panel.styles.js +4 -0
  308. package/lib/components/tab-panel/tab-panel.styles.js.map +1 -0
  309. package/lib/components/table/table.js +46 -41
  310. package/lib/components/table/table.js.map +1 -0
  311. package/lib/components/table/table.styles.js +4 -0
  312. package/lib/components/table/table.styles.js.map +1 -0
  313. package/lib/components/table-body/table-body.js +20 -17
  314. package/lib/components/table-body/table-body.js.map +1 -0
  315. package/lib/components/table-body/table-body.styles.js +4 -0
  316. package/lib/components/table-body/table-body.styles.js.map +1 -0
  317. package/lib/components/table-cell/table-cell.js +39 -36
  318. package/lib/components/table-cell/table-cell.js.map +1 -0
  319. package/lib/components/table-cell/table-cell.styles.js +4 -0
  320. package/lib/components/table-cell/table-cell.styles.js.map +1 -0
  321. package/lib/components/table-header/table-header.js +20 -17
  322. package/lib/components/table-header/table-header.js.map +1 -0
  323. package/lib/components/table-header/table-header.styles.js +4 -0
  324. package/lib/components/table-header/table-header.styles.js.map +1 -0
  325. package/lib/components/table-header-cell/table-header-cell.js +35 -32
  326. package/lib/components/table-header-cell/table-header-cell.js.map +1 -0
  327. package/lib/components/table-header-cell/table-header-cell.styles.js +4 -0
  328. package/lib/components/table-header-cell/table-header-cell.styles.js.map +1 -0
  329. package/lib/components/table-object/table-object.js +21 -18
  330. package/lib/components/table-object/table-object.js.map +1 -0
  331. package/lib/components/table-object/table-object.styles.js +4 -0
  332. package/lib/components/table-object/table-object.styles.js.map +1 -0
  333. package/lib/components/table-row/table-row.js +76 -55
  334. package/lib/components/table-row/table-row.js.map +1 -0
  335. package/lib/components/table-row/table-row.styles.js +4 -0
  336. package/lib/components/table-row/table-row.styles.js.map +1 -0
  337. package/lib/components/tabs/tabs.js +452 -303
  338. package/lib/components/tabs/tabs.js.map +1 -0
  339. package/lib/components/tabs/tabs.styles.js +4 -0
  340. package/lib/components/tabs/tabs.styles.js.map +1 -0
  341. package/lib/components/tag/tag.js +236 -167
  342. package/lib/components/tag/tag.js.map +1 -0
  343. package/lib/components/tag/tag.styles.js +4 -0
  344. package/lib/components/tag/tag.styles.js.map +1 -0
  345. package/lib/components/tag-list/tag-list.js +40 -35
  346. package/lib/components/tag-list/tag-list.js.map +1 -0
  347. package/lib/components/tag-list/tag-list.styles.js +4 -0
  348. package/lib/components/tag-list/tag-list.styles.js.map +1 -0
  349. package/lib/components/tertiary-nav/tertiary-nav.js +40 -33
  350. package/lib/components/tertiary-nav/tertiary-nav.js.map +1 -0
  351. package/lib/components/tertiary-nav/tertiary-nav.styles.js +4 -0
  352. package/lib/components/tertiary-nav/tertiary-nav.styles.js.map +1 -0
  353. package/lib/components/tertiary-nav-item/tertiary-nav-item.js +52 -43
  354. package/lib/components/tertiary-nav-item/tertiary-nav-item.js.map +1 -0
  355. package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.js +4 -0
  356. package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.js.map +1 -0
  357. package/lib/components/text-link/text-link.js +45 -41
  358. package/lib/components/text-link/text-link.js.map +1 -0
  359. package/lib/components/text-link/text-link.styles.js +4 -0
  360. package/lib/components/text-link/text-link.styles.js.map +1 -0
  361. package/lib/components/text-passage/text-passage-light-dom.js +145 -0
  362. package/lib/components/text-passage/text-passage-light-dom.js.map +1 -0
  363. package/lib/components/text-passage/text-passage-light-dom.styles.js +4 -0
  364. package/lib/components/text-passage/text-passage-light-dom.styles.js.map +1 -0
  365. package/lib/components/text-passage/text-passage.js +72 -44
  366. package/lib/components/text-passage/text-passage.js.map +1 -0
  367. package/lib/components/text-passage/text-passage.styles.js +4 -0
  368. package/lib/components/text-passage/text-passage.styles.js.map +1 -0
  369. package/lib/components/tooltip/tooltip.js +278 -173
  370. package/lib/components/tooltip/tooltip.js.map +1 -0
  371. package/lib/components/tooltip/tooltip.styles.js +4 -0
  372. package/lib/components/tooltip/tooltip.styles.js.map +1 -0
  373. package/lib/components/utility-nav/utility-nav.js +40 -33
  374. package/lib/components/utility-nav/utility-nav.js.map +1 -0
  375. package/lib/components/utility-nav/utility-nav.styles.js +4 -0
  376. package/lib/components/utility-nav/utility-nav.styles.js.map +1 -0
  377. package/lib/components/utility-nav-item/utility-nav-item.js +70 -49
  378. package/lib/components/utility-nav-item/utility-nav-item.js.map +1 -0
  379. package/lib/components/utility-nav-item/utility-nav-item.styles.js +4 -0
  380. package/lib/components/utility-nav-item/utility-nav-item.styles.js.map +1 -0
  381. package/lib/design-tokens/brands/blue/css/tokens_blue.module.js +737 -0
  382. package/lib/design-tokens/brands/blue/css/tokens_blue.module.js.map +1 -0
  383. package/lib/design-tokens/brands/bolt/tokens_bolt.theme.js +756 -0
  384. package/lib/design-tokens/brands/bolt/tokens_bolt.theme.js.map +1 -0
  385. package/lib/design-tokens/brands/cre8/css/tokens_cre8.module.js +771 -0
  386. package/lib/design-tokens/brands/cre8/css/tokens_cre8.module.js.map +1 -0
  387. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js +772 -0
  388. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js.map +1 -0
  389. package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.js +737 -0
  390. package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.js.map +1 -0
  391. package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.js +983 -0
  392. package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.js.map +1 -0
  393. package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.js +737 -0
  394. package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.js.map +1 -0
  395. package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.js +736 -0
  396. package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.js.map +1 -0
  397. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.js +737 -0
  398. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.js.map +1 -0
  399. package/lib/design-tokens/brands/prisma/tokens_prisma.module.js +771 -0
  400. package/lib/design-tokens/brands/prisma/tokens_prisma.module.js.map +1 -0
  401. package/lib/design-tokens/brands/starbucks/tokens.module.js +552 -0
  402. package/lib/design-tokens/brands/starbucks/tokens.module.js.map +1 -0
  403. package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.js +776 -0
  404. package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.js.map +1 -0
  405. package/lib/design-tokens/brands copy/blue/css/tokens_blue.module.js +253 -0
  406. package/lib/design-tokens/brands copy/blue/css/tokens_blue.module.js.map +1 -0
  407. package/lib/design-tokens/core/scss/theming/head.module.js +6 -0
  408. package/lib/design-tokens/core/scss/theming/head.module.js.map +1 -0
  409. package/lib/design-tokens/tokens_netflix.theme.js +806 -0
  410. package/lib/design-tokens/tokens_netflix.theme.js.map +1 -0
  411. package/lib/directives/if-truthy.js +24 -0
  412. package/lib/directives/if-truthy.js.map +1 -0
  413. package/lib/directives/spread.js +29 -0
  414. package/lib/directives/spread.js.map +1 -0
  415. package/lib/index.js +84 -168
  416. package/lib/index.js.map +1 -0
  417. package/lib/scripts/convert-scss-to-ts.js +25 -0
  418. package/lib/scripts/convert-scss-to-ts.js.map +1 -0
  419. package/lib/scripts/extract-tokens.js +120 -0
  420. package/lib/scripts/extract-tokens.js.map +1 -0
  421. package/lib/scripts/generate-react-wrappers.js +229 -0
  422. package/lib/scripts/generate-react-wrappers.js.map +1 -0
  423. package/lib/scripts/generateWesparkleThemes.js +52 -0
  424. package/lib/scripts/generateWesparkleThemes.js.map +1 -0
  425. package/lib/toBeAccessible.js +18 -0
  426. package/lib/toBeAccessible.js.map +1 -0
  427. package/lib/utilities/is-mobile.js +10 -0
  428. package/lib/utilities/is-mobile.js.map +1 -0
  429. package/lib/utilities/story-helpers.js +14 -0
  430. package/lib/utilities/story-helpers.js.map +1 -0
  431. package/lib/vite.config.cdn.js +85 -0
  432. package/lib/vite.config.cdn.js.map +1 -0
  433. package/lib/vite.config.js +156 -0
  434. package/lib/vite.config.js.map +1 -0
  435. package/package.json +8 -9
package/lib/components/heading/heading.styles.js ADDED
@@ -0,0 +1,4 @@
1
+ import { css } from 'lit';
2
+ const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline;text-align:left}.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading,.cre8-c-heading--title-large{margin:0;color:var(--cre8-color-content-default)}.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-mobile-font-family);font-size:var(--cre8-typography-headline-large-mobile-font-size);font-weight:var(--cre8-typography-headline-large-mobile-font-weight);line-height:var(--cre8-typography-headline-large-mobile-line-height);text-decoration:var(--cre8-typography-headline-large-mobile-text-decoration);text-transform:var(--cre8-typography-headline-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-font-family);font-size:var(--cre8-typography-headline-large-font-size);font-weight:var(--cre8-typography-headline-large-font-weight);line-height:var(--cre8-typography-headline-large-line-height);text-decoration:var(--cre8-typography-headline-large-text-decoration);text-transform:var(--cre8-typography-headline-large-text-transform)}}.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-mobile-font-family);font-size:var(--cre8-typography-headline-default-mobile-font-size);font-weight:var(--cre8-typography-headline-default-mobile-font-weight);line-height:var(--cre8-typography-headline-default-mobile-line-height);text-decoration:var(--cre8-typography-headline-default-mobile-text-decoration);text-transform:var(--cre8-typography-headline-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-font-family);font-size:var(--cre8-typography-headline-default-font-size);font-weight:var(--cre8-typography-headline-default-font-weight);line-height:var(--cre8-typography-headline-default-line-height);text-decoration:var(--cre8-typography-headline-default-text-decoration);text-transform:var(--cre8-typography-headline-default-text-transform)}}.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-mobile-font-family);font-size:var(--cre8-typography-headline-small-mobile-font-size);font-weight:var(--cre8-typography-headline-small-mobile-font-weight);line-height:var(--cre8-typography-headline-small-mobile-line-height);text-decoration:var(--cre8-typography-headline-small-mobile-text-decoration);text-transform:var(--cre8-typography-headline-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-font-family);font-size:var(--cre8-typography-headline-small-font-size);font-weight:var(--cre8-typography-headline-small-font-weight);line-height:var(--cre8-typography-headline-small-line-height);text-decoration:var(--cre8-typography-headline-small-text-decoration);text-transform:var(--cre8-typography-headline-small-text-transform)}}.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-mobile-font-family);font-size:var(--cre8-typography-title-xlarge-mobile-font-size);font-weight:var(--cre8-typography-title-xlarge-mobile-font-weight);line-height:var(--cre8-typography-title-xlarge-mobile-line-height);text-decoration:var(--cre8-typography-title-xlarge-mobile-text-decoration);text-transform:var(--cre8-typography-title-xlarge-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-font-family);font-size:var(--cre8-typography-title-xlarge-font-size);font-weight:var(--cre8-typography-title-xlarge-font-weight);line-height:var(--cre8-typography-title-xlarge-line-height);text-decoration:var(--cre8-typography-title-xlarge-text-decoration);text-transform:var(--cre8-typography-title-xlarge-text-transform)}}.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-mobile-font-family);font-size:var(--cre8-typography-display-small-mobile-font-size);font-weight:var(--cre8-typography-display-small-mobile-font-weight);line-height:var(--cre8-typography-display-small-mobile-line-height);text-decoration:var(--cre8-typography-display-small-mobile-text-decoration);text-transform:var(--cre8-typography-display-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-font-family);font-size:var(--cre8-typography-display-small-font-size);font-weight:var(--cre8-typography-display-small-font-weight);line-height:var(--cre8-typography-display-small-line-height);text-decoration:var(--cre8-typography-display-small-text-decoration);text-transform:var(--cre8-typography-display-small-text-transform)}}.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-mobile-font-family);font-size:var(--cre8-typography-display-default-mobile-font-size);font-weight:var(--cre8-typography-display-default-mobile-font-weight);line-height:var(--cre8-typography-display-default-mobile-line-height);text-decoration:var(--cre8-typography-display-default-mobile-text-decoration);text-transform:var(--cre8-typography-display-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-font-family);font-size:var(--cre8-typography-display-default-font-size);font-weight:var(--cre8-typography-display-default-font-weight);line-height:var(--cre8-typography-display-default-line-height);text-decoration:var(--cre8-typography-display-default-text-decoration);text-transform:var(--cre8-typography-display-default-text-transform)}}.cre8-c-heading--label-large{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform)}.cre8-c-heading--label-default{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform)}.cre8-c-heading--label-small{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-c-heading--meta-large{font-family:var(--cre8-typography-meta-large-font-family);font-size:var(--cre8-typography-meta-large-font-size);font-weight:var(--cre8-typography-meta-large-font-weight);line-height:var(--cre8-typography-meta-large-line-height);text-decoration:var(--cre8-typography-meta-large-text-decoration);text-transform:var(--cre8-typography-meta-large-text-transform);text-transform:uppercase}.cre8-c-heading--meta-default{font-family:var(--cre8-typography-meta-default-font-family);font-size:var(--cre8-typography-meta-default-font-size);font-weight:var(--cre8-typography-meta-default-font-weight);line-height:var(--cre8-typography-meta-default-line-height);text-decoration:var(--cre8-typography-meta-default-text-decoration);text-transform:var(--cre8-typography-meta-default-text-transform);text-transform:uppercase}.cre8-c-heading--meta-small{font-family:var(--cre8-typography-meta-small-font-family);font-size:var(--cre8-typography-meta-small-font-size);font-weight:var(--cre8-typography-meta-small-font-weight);line-height:var(--cre8-typography-meta-small-line-height);text-decoration:var(--cre8-typography-meta-small-text-decoration);text-transform:var(--cre8-typography-meta-small-text-transform);text-transform:uppercase}.cre8-c-heading--brand-color{color:var(--cre8-color-content-brand-strong)}.cre8-c-heading--brand-color.cre8-c-heading--inverted{color:var(--cre8-color-content-brand-knockout)}.cre8-c-heading--inverted{color:var(--cre8-color-content-knockout)}`;
3
+ export default styles;
4
+ //# sourceMappingURL=heading.styles.js.map
package/lib/components/heading/heading.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"heading.styles.js","sourceRoot":"","sources":["../../../components/heading/heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,qvaAAqva,CAAC;AACxwa,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline;text-align:left}.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading,.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading,.cre8-c-heading--title-large{margin:0;color:var(--cre8-color-content-default)}.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-mobile-font-family);font-size:var(--cre8-typography-headline-large-mobile-font-size);font-weight:var(--cre8-typography-headline-large-mobile-font-weight);line-height:var(--cre8-typography-headline-large-mobile-line-height);text-decoration:var(--cre8-typography-headline-large-mobile-text-decoration);text-transform:var(--cre8-typography-headline-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-large{font-family:var(--cre8-typography-headline-large-font-family);font-size:var(--cre8-typography-headline-large-font-size);font-weight:var(--cre8-typography-headline-large-font-weight);line-height:var(--cre8-typography-headline-large-line-height);text-decoration:var(--cre8-typography-headline-large-text-decoration);text-transform:var(--cre8-typography-headline-large-text-transform)}}.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-mobile-font-family);font-size:var(--cre8-typography-headline-default-mobile-font-size);font-weight:var(--cre8-typography-headline-default-mobile-font-weight);line-height:var(--cre8-typography-headline-default-mobile-line-height);text-decoration:var(--cre8-typography-headline-default-mobile-text-decoration);text-transform:var(--cre8-typography-headline-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-default{font-family:var(--cre8-typography-headline-default-font-family);font-size:var(--cre8-typography-headline-default-font-size);font-weight:var(--cre8-typography-headline-default-font-weight);line-height:var(--cre8-typography-headline-default-line-height);text-decoration:var(--cre8-typography-headline-default-text-decoration);text-transform:var(--cre8-typography-headline-default-text-transform)}}.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-mobile-font-family);font-size:var(--cre8-typography-headline-small-mobile-font-size);font-weight:var(--cre8-typography-headline-small-mobile-font-weight);line-height:var(--cre8-typography-headline-small-mobile-line-height);text-decoration:var(--cre8-typography-headline-small-mobile-text-decoration);text-transform:var(--cre8-typography-headline-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--headline-small{font-family:var(--cre8-typography-headline-small-font-family);font-size:var(--cre8-typography-headline-small-font-size);font-weight:var(--cre8-typography-headline-small-font-weight);line-height:var(--cre8-typography-headline-small-line-height);text-decoration:var(--cre8-typography-headline-small-text-decoration);text-transform:var(--cre8-typography-headline-small-text-transform)}}.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-mobile-font-family);font-size:var(--cre8-typography-title-xlarge-mobile-font-size);font-weight:var(--cre8-typography-title-xlarge-mobile-font-weight);line-height:var(--cre8-typography-title-xlarge-mobile-line-height);text-decoration:var(--cre8-typography-title-xlarge-mobile-text-decoration);text-transform:var(--cre8-typography-title-xlarge-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-xlarge{font-family:var(--cre8-typography-title-xlarge-font-family);font-size:var(--cre8-typography-title-xlarge-font-size);font-weight:var(--cre8-typography-title-xlarge-font-weight);line-height:var(--cre8-typography-title-xlarge-line-height);text-decoration:var(--cre8-typography-title-xlarge-text-decoration);text-transform:var(--cre8-typography-title-xlarge-text-transform)}}.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-mobile-font-family);font-size:var(--cre8-typography-title-large-mobile-font-size);font-weight:var(--cre8-typography-title-large-mobile-font-weight);line-height:var(--cre8-typography-title-large-mobile-line-height);text-decoration:var(--cre8-typography-title-large-mobile-text-decoration);text-transform:var(--cre8-typography-title-large-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-large{font-family:var(--cre8-typography-title-large-font-family);font-size:var(--cre8-typography-title-large-font-size);font-weight:var(--cre8-typography-title-large-font-weight);line-height:var(--cre8-typography-title-large-line-height);text-decoration:var(--cre8-typography-title-large-text-decoration);text-transform:var(--cre8-typography-title-large-text-transform)}}.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-default{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--title-small{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-mobile-font-family);font-size:var(--cre8-typography-display-small-mobile-font-size);font-weight:var(--cre8-typography-display-small-mobile-font-weight);line-height:var(--cre8-typography-display-small-mobile-line-height);text-decoration:var(--cre8-typography-display-small-mobile-text-decoration);text-transform:var(--cre8-typography-display-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-small{font-family:var(--cre8-typography-display-small-font-family);font-size:var(--cre8-typography-display-small-font-size);font-weight:var(--cre8-typography-display-small-font-weight);line-height:var(--cre8-typography-display-small-line-height);text-decoration:var(--cre8-typography-display-small-text-decoration);text-transform:var(--cre8-typography-display-small-text-transform)}}.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-mobile-font-family);font-size:var(--cre8-typography-display-default-mobile-font-size);font-weight:var(--cre8-typography-display-default-mobile-font-weight);line-height:var(--cre8-typography-display-default-mobile-line-height);text-decoration:var(--cre8-typography-display-default-mobile-text-decoration);text-transform:var(--cre8-typography-display-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-heading--display-default{font-family:var(--cre8-typography-display-default-font-family);font-size:var(--cre8-typography-display-default-font-size);font-weight:var(--cre8-typography-display-default-font-weight);line-height:var(--cre8-typography-display-default-line-height);text-decoration:var(--cre8-typography-display-default-text-decoration);text-transform:var(--cre8-typography-display-default-text-transform)}}.cre8-c-heading--label-large{font-family:var(--cre8-typography-label-large-font-family);font-size:var(--cre8-typography-label-large-font-size);font-weight:var(--cre8-typography-label-large-font-weight);line-height:var(--cre8-typography-label-large-line-height);text-decoration:var(--cre8-typography-label-large-text-decoration);text-transform:var(--cre8-typography-label-large-text-transform)}.cre8-c-heading--label-default{font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform)}.cre8-c-heading--label-small{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-c-heading--meta-large{font-family:var(--cre8-typography-meta-large-font-family);font-size:var(--cre8-typography-meta-large-font-size);font-weight:var(--cre8-typography-meta-large-font-weight);line-height:var(--cre8-typography-meta-large-line-height);text-decoration:var(--cre8-typography-meta-large-text-decoration);text-transform:var(--cre8-typography-meta-large-text-transform);text-transform:uppercase}.cre8-c-heading--meta-default{font-family:var(--cre8-typography-meta-default-font-family);font-size:var(--cre8-typography-meta-default-font-size);font-weight:var(--cre8-typography-meta-default-font-weight);line-height:var(--cre8-typography-meta-default-line-height);text-decoration:var(--cre8-typography-meta-default-text-decoration);text-transform:var(--cre8-typography-meta-default-text-transform);text-transform:uppercase}.cre8-c-heading--meta-small{font-family:var(--cre8-typography-meta-small-font-family);font-size:var(--cre8-typography-meta-small-font-size);font-weight:var(--cre8-typography-meta-small-font-weight);line-height:var(--cre8-typography-meta-small-line-height);text-decoration:var(--cre8-typography-meta-small-text-decoration);text-transform:var(--cre8-typography-meta-small-text-transform);text-transform:uppercase}.cre8-c-heading--brand-color{color:var(--cre8-color-content-brand-strong)}.cre8-c-heading--brand-color.cre8-c-heading--inverted{color:var(--cre8-color-content-brand-knockout)}.cre8-c-heading--inverted{color:var(--cre8-color-content-knockout)}`;\nexport default styles;\n"]}
package/lib/components/hero/hero.js CHANGED
@@ -1,26 +1,30 @@
1
- import { css as l, html as h } from "lit";
2
- import { property as a } from "lit/decorators.js";
3
- import { Cre8Element as m } from "../cre8-element.js";
4
- const p = l`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-hero{position:relative;margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-hero{height:40vh}}.cre8-c-hero__image{width:100%;height:100%}@media all and (min-width: 768px){.cre8-c-hero__image{position:absolute;top:0;left:0;object-fit:cover}}.cre8-c-hero__body{display:flex;flex-direction:column;padding-top:1rem}@media all and (min-width: 768px){.cre8-c-hero__body{position:absolute;align-items:flex-start;justify-content:flex-end;width:100%;height:100%;padding-top:2rem;padding-bottom:2rem}}@media all and (min-width: 768px){.cre8-c-hero--top-left .cre8-c-hero__body{justify-content:flex-start;align-items:flex-start}}@media all and (min-width: 768px){.cre8-c-hero--left .cre8-c-hero__body{justify-content:center}}@media all and (min-width: 768px){.cre8-c-hero--top-center .cre8-c-hero__body{justify-content:flex-start;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--center .cre8-c-hero__body{justify-content:center;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--bottom-center .cre8-c-hero__body{justify-content:flex-end;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--top-right .cre8-c-hero__body{justify-content:flex-start;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--right .cre8-c-hero__body{justify-content:center;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--bottom-right .cre8-c-hero__body{justify-content:flex-end;align-items:flex-end}}`;
5
- var f = Object.defineProperty, o = (s, r, c, g) => {
6
- for (var e = void 0, i = s.length - 1, d; i >= 0; i--)
7
- (d = s[i]) && (e = d(r, c, e) || e);
8
- return e && f(r, c, e), e;
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
9
6
  };
10
- const n = class n extends m {
11
- render() {
12
- const r = this.componentClassNames("cre8-c-hero", {
13
- "cre8-c-hero--top-left": this.align === "top-left",
14
- "cre8-c-hero--left": this.align === "left",
15
- "cre8-c-hero--top-center": this.align === "top-center",
16
- "cre8-c-hero--center": this.align === "center",
17
- "cre8-c-hero--bottom-center": this.align === "bottom-center",
18
- "cre8-c-hero--top-right": this.align === "top-right",
19
- "cre8-c-hero--right": this.align === "right",
20
- "cre8-c-hero--bottom-right": this.align === "bottom-right"
21
- });
22
- return h`
23
- <div class="${r}">
7
+ import { html, } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ import { Cre8Element } from '../cre8-element';
10
+ import styles from './hero.styles.js';
11
+ /**
12
+ * @slot - The component content
13
+ */
14
+ export class Cre8Hero extends Cre8Element {
15
+ render() {
16
+ const componentClassNames = this.componentClassNames('cre8-c-hero', {
17
+ 'cre8-c-hero--top-left': this.align === 'top-left',
18
+ 'cre8-c-hero--left': this.align === 'left',
19
+ 'cre8-c-hero--top-center': this.align === 'top-center',
20
+ 'cre8-c-hero--center': this.align === 'center',
21
+ 'cre8-c-hero--bottom-center': this.align === 'bottom-center',
22
+ 'cre8-c-hero--top-right': this.align === 'top-right',
23
+ 'cre8-c-hero--right': this.align === 'right',
24
+ 'cre8-c-hero--bottom-right': this.align === 'bottom-right',
25
+ });
26
+ return html `
27
+ <div class="${componentClassNames}">
24
28
  <cre8-layout-container>
25
29
  <img class="cre8-c-hero__image" src="${this.imgSrc}" alt="${this.imgAlt}" />
26
30
  <div class="cre8-c-hero__body">
@@ -29,21 +33,20 @@ const n = class n extends m {
29
33
  </cre8-layout-container>
30
34
  </div>
31
35
  `;
32
- }
33
- };
34
- n.styles = [p];
35
- let t = n;
36
- o([
37
- a()
38
- ], t.prototype, "imgSrc");
39
- o([
40
- a()
41
- ], t.prototype, "imgAlt");
42
- o([
43
- a()
44
- ], t.prototype, "align");
45
- customElements.get("cre8-hero") === void 0 && customElements.define("cre8-hero", t);
46
- export {
47
- t as Cre8Hero,
48
- t as default
49
- };
36
+ }
37
+ }
38
+ Cre8Hero.styles = [styles];
39
+ __decorate([
40
+ property()
41
+ ], Cre8Hero.prototype, "imgSrc", void 0);
42
+ __decorate([
43
+ property()
44
+ ], Cre8Hero.prototype, "imgAlt", void 0);
45
+ __decorate([
46
+ property()
47
+ ], Cre8Hero.prototype, "align", void 0);
48
+ if (customElements.get('cre8-hero') === undefined) {
49
+ customElements.define('cre8-hero', Cre8Hero);
50
+ }
51
+ export default Cre8Hero;
52
+ //# sourceMappingURL=hero.js.map
package/lib/components/hero/hero.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hero.js","sourceRoot":"","sources":["../../../components/hero/hero.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAiCvC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YAClD,mBAAmB,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;YAC1C,yBAAyB,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACtD,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC9C,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,eAAe;YAC5D,wBAAwB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;YACpD,oBAAoB,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC5C,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc;SAC7D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;iDAEU,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,MAAM;;;;;;KAM5E,CAAC;IACJ,CAAC;;AAtDQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;wCACS;AAMhB;IADH,QAAQ,EAAE;wCACS;AAkBhB;IADH,QAAQ,EAAE;uCAC0G;AA2BvH,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './hero.styles.js';\n\n/**\n * @slot - The component content\n */\nexport class Cre8Hero extends Cre8Element {\n static styles = [styles];\n\n /**\n * Image source\n */\n @property()\n imgSrc?: string;\n\n /**\n * Image alt text\n */\n @property()\n imgAlt?: string;\n\n /**\n * Position variant. Bottom left is the default position\n * <cre8-text-passage size=\"sm\">\n * <ul>\n * <li>**top-left** renders content in the top left corner of the image</li>\n * <li>**left** renders content in the left, center part of the image</li>\n * <li>**top-center** renders content in the top, center part of the image</li>\n * <li>**center** renders content center of the image</li>\n * <li>**bottom-center** renders content bottom center of the image</li>\n * <li>**top-right** renders content top-right of the image</li>\n * <li>**right** renders content right of the image</li>\n * <li>**bottom-right** renders content bottom, right part of the image</li>\n * </ul>\n * </cre8-text-passage>\n */\n @property()\n align?: 'top-left' | 'left' | 'top-center' | 'center' | 'bottom-center' | 'top-right' | 'right' | 'bottom-right';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-hero', {\n 'cre8-c-hero--top-left': this.align === 'top-left',\n 'cre8-c-hero--left': this.align === 'left',\n 'cre8-c-hero--top-center': this.align === 'top-center',\n 'cre8-c-hero--center': this.align === 'center',\n 'cre8-c-hero--bottom-center': this.align === 'bottom-center',\n 'cre8-c-hero--top-right': this.align === 'top-right',\n 'cre8-c-hero--right': this.align === 'right',\n 'cre8-c-hero--bottom-right': this.align === 'bottom-right',\n });\n\n return html`\n <div class=\"${componentClassNames}\">\n <cre8-layout-container>\n <img class=\"cre8-c-hero__image\" src=\"${this.imgSrc}\" alt=\"${this.imgAlt}\" />\n <div class=\"cre8-c-hero__body\">\n <slot></slot>\n </div>\n </cre8-layout-container>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-hero') === undefined) {\n customElements.define('cre8-hero', Cre8Hero);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-hero': Cre8Hero;\n }\n}\n\nexport default Cre8Hero;\n"]}
package/lib/components/hero/hero.styles.js ADDED
@@ -0,0 +1,4 @@
1
+ import { css } from 'lit';
2
+ const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-hero{position:relative;margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-hero{height:40vh}}.cre8-c-hero__image{width:100%;height:100%}@media all and (min-width: 768px){.cre8-c-hero__image{position:absolute;top:0;left:0;object-fit:cover}}.cre8-c-hero__body{display:flex;flex-direction:column;padding-top:1rem}@media all and (min-width: 768px){.cre8-c-hero__body{position:absolute;align-items:flex-start;justify-content:flex-end;width:100%;height:100%;padding-top:2rem;padding-bottom:2rem}}@media all and (min-width: 768px){.cre8-c-hero--top-left .cre8-c-hero__body{justify-content:flex-start;align-items:flex-start}}@media all and (min-width: 768px){.cre8-c-hero--left .cre8-c-hero__body{justify-content:center}}@media all and (min-width: 768px){.cre8-c-hero--top-center .cre8-c-hero__body{justify-content:flex-start;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--center .cre8-c-hero__body{justify-content:center;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--bottom-center .cre8-c-hero__body{justify-content:flex-end;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--top-right .cre8-c-hero__body{justify-content:flex-start;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--right .cre8-c-hero__body{justify-content:center;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--bottom-right .cre8-c-hero__body{justify-content:flex-end;align-items:flex-end}}`;
3
+ export default styles;
4
+ //# sourceMappingURL=hero.styles.js.map
package/lib/components/hero/hero.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hero.styles.js","sourceRoot":"","sources":["../../../components/hero/hero.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,usGAAusG,CAAC;AAC1tG,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}.cre8-c-hero{position:relative;margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-hero{height:40vh}}.cre8-c-hero__image{width:100%;height:100%}@media all and (min-width: 768px){.cre8-c-hero__image{position:absolute;top:0;left:0;object-fit:cover}}.cre8-c-hero__body{display:flex;flex-direction:column;padding-top:1rem}@media all and (min-width: 768px){.cre8-c-hero__body{position:absolute;align-items:flex-start;justify-content:flex-end;width:100%;height:100%;padding-top:2rem;padding-bottom:2rem}}@media all and (min-width: 768px){.cre8-c-hero--top-left .cre8-c-hero__body{justify-content:flex-start;align-items:flex-start}}@media all and (min-width: 768px){.cre8-c-hero--left .cre8-c-hero__body{justify-content:center}}@media all and (min-width: 768px){.cre8-c-hero--top-center .cre8-c-hero__body{justify-content:flex-start;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--center .cre8-c-hero__body{justify-content:center;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--bottom-center .cre8-c-hero__body{justify-content:flex-end;align-items:center}}@media all and (min-width: 768px){.cre8-c-hero--top-right .cre8-c-hero__body{justify-content:flex-start;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--right .cre8-c-hero__body{justify-content:center;align-items:flex-end}}@media all and (min-width: 768px){.cre8-c-hero--bottom-right .cre8-c-hero__body{justify-content:flex-end;align-items:flex-end}}`;\nexport default styles;\n"]}
package/lib/components/icon/icon.js CHANGED
@@ -1,10 +1,233 @@
1
- import "lit";
2
- import "lit/directives/unsafe-html.js";
3
- import "lit/decorators.js";
4
- import { C as e, C } from "../../icon-D22g8aWB.js";
5
- import "../../Caret_Down-VI6aytYo.js";
6
- import "../cre8-element.js";
7
- export {
8
- e as Cre8Icon,
9
- C as default
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
10
6
  };
7
+ /* eslint-disable max-len */
8
+ /* eslint-disable dot-notation */
9
+ /* eslint-disable max-statements */
10
+ import { html, } from 'lit';
11
+ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
12
+ import { property } from 'lit/decorators.js';
13
+ import svgAdd from '../../icons/System/Regular/Add.svg?raw';
14
+ import svgArrowLeft from '../../icons/System/Regular/Arrow_-_Left.svg?raw';
15
+ import svgChat from '../../icons/System/Filled/Chat_Default.svg?raw';
16
+ import svgCalendar from '../../icons/System/Regular/Calendar.svg?raw';
17
+ import svgCaretDown from '../../icons/System/Filled/Caret_Down.svg?raw';
18
+ import svgCheckCircle from '../../icons/System/Filled/Check.svg?raw';
19
+ import svgCheck from '../../icons/System/Regular/Check.svg?raw';
20
+ import svgClose from '../../icons/System/Regular/Close.svg?raw';
21
+ import svgDownload from '../../icons/System/Filled/Download.svg?raw';
22
+ import svgEdit from '../../icons/System/Regular/Edit.svg?raw';
23
+ import svgEllipsis from '../../icons/System/Filled/Ellipsis.svg?raw';
24
+ import svgMessageFilled from '../../icons/System/Filled/Message_Unread.svg?raw';
25
+ import svgMessage from '../../icons/System/Regular/Message_Unread.svg?raw';
26
+ import svgError from '../../icons/System/Regular/Error.svg?raw';
27
+ import svgExternal from '../../icons/System/Regular/External_Link.svg?raw';
28
+ import svgMedication from '../../icons/System/Regular/Medication.svg?raw';
29
+ import svgGlobe from '../../icons/System/Regular/Globe.svg?raw';
30
+ import svgHandHeart from '../../icons/System/Regular/Wellness.svg?raw';
31
+ import svgHelp from '../../icons/System/Regular/Help.svg?raw';
32
+ import svgInfoFilled from '../../icons/System/Filled/Info.svg?raw';
33
+ import svgCaretUp from '../../icons/System/Regular/Caret_Up.svg?raw';
34
+ import svgLightbulb from '../../icons/System/Regular/Lightbulb.svg?raw';
35
+ import svgLocation from '../../icons/System/Filled/Location.svg?raw';
36
+ import svgMenu from '../../icons/System/Regular/Menu.svg?raw';
37
+ import svgMinus from '../../icons/System/Regular/Minus.svg?raw';
38
+ import svgAccountFilled from '../../icons/System/Filled/Account.svg?raw';
39
+ import svgNotification from '../../icons/System/Regular/Notification.svg?raw';
40
+ import svgRefill from '../../icons/Marketing/Duotone/Refill.svg?raw';
41
+ import svgAccount from '../../icons/System/Regular/Account.svg?raw';
42
+ import svgPlayFilled from '../../icons/System/Filled/Play_Arrow.svg?raw';
43
+ import svgPlayCircle from '../../icons/System/Regular/Play_Circle.svg?raw';
44
+ import svgSpinner from '../../icons/System/Regular/Spinner/75.svg?raw';
45
+ import svgUndo from '../../icons/System/Regular/Undo.svg?raw';
46
+ import svgSearch from '../../icons/System/Regular/Search.svg?raw';
47
+ import svgCart from '../../icons/System/Regular/Cart.svg?raw';
48
+ import svgRectangle from '../../icons/System/Filled/Shape/Rectangle.svg?raw';
49
+ import svgVaccine from '../../icons/Marketing/Duotone/Vaccinations.svg?raw';
50
+ import svgWarningFilled from '../../icons/System/Filled/Warning.svg?raw';
51
+ import svgCaretDoubleRight from '../../icons/System/Regular/Caret_Double_Right.svg?raw';
52
+ import svgErrorAlt from '../../icons/error-alt.svg?raw';
53
+ import svgEsi from '../../icons/express-scripts.svg?raw';
54
+ import svgInsta from '../../icons/instagram.svg?raw';
55
+ import svgLinkedin from '../../icons/linkedin.svg?raw';
56
+ import svgOpen from '../../icons/open.svg?raw';
57
+ import svgPause from '../../icons/pause.svg?raw';
58
+ import svgPersonBubble from '../../icons/person-bubble.svg?raw';
59
+ import svgPinterest from '../../icons/pinterest.svg?raw';
60
+ import svgRss from '../../icons/rss-feed.svg?raw';
61
+ import svgRx from '../../icons/rx.svg?raw';
62
+ import svgSwap from '../../icons/swap.svg?raw';
63
+ import svgThumbsUp from '../../icons/thumb-up.svg?raw';
64
+ import svgTrendFlat from '../../icons/trending-flat.svg?raw';
65
+ import svgTrendUp from '../../icons/trending-up.svg?raw';
66
+ import svgTwitter from '../../icons/twitter.svg?raw';
67
+ import { Cre8Element } from '../cre8-element';
68
+ import styles from './icon.styles.js';
69
+ import iconSprite from '../../icons/cre8-icons.svg?raw';
70
+ /**
71
+ *
72
+ * <svg> is a web component, which can be used with any frontend framework and use any svg.
73
+ * It takes raw svgs as props and renders them.
74
+ *
75
+ * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0
76
+ *
77
+ * - [List of new figma icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)
78
+ * - The new `svg` from the svg package: https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/.
79
+ *
80
+ * ##Usability Considerations
81
+ * - If the icon is decorative: set `aria-hidden` to true.
82
+ * - If the icon is interactive (not decorative): set `aria-hidden` to false and add the `aria-label`
83
+ * - If the icon is key to functionality from a screen reader perspective, it is required to add `aria-label`
84
+ * which will describe the icon.
85
+ * For example, if the icon is a close button, setting `aria-label="Close"`will give
86
+ * the SVG an aria-label to make it sufficiently accessible.
87
+ *
88
+ * [More information on Accessibility with svgs](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/getting-started-accessibility--page)
89
+ *
90
+ * ##How to use
91
+ * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.
92
+ * If you need to install a newer version than what's included, please see
93
+ * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).
94
+ * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`
95
+ * - Import an svg as a string: `import svgInfo from 'cre8_dev/svgs/lib/icons/System/Regular/Info.svg?raw';`
96
+ *
97
+ * Your import paths may be different depending on your project's build configuration.
98
+ * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-icons--page)
99
+ * of the `cre8_dev/svgs` documentation for more information.
100
+ */
101
+ export class Cre8Icon extends Cre8Element {
102
+ constructor() {
103
+ super(...arguments);
104
+ /**
105
+ * Icon path
106
+ * 1) This points to the file where the icon sprite lives
107
+ * 2) This method of pathing will soon be depricated
108
+ *
109
+ */
110
+ this.iconUrl = iconSprite;
111
+ }
112
+ /**
113
+ * Get the path to the icons, either by overriding it on the window
114
+ * or by using the bundled icon path
115
+ */
116
+ getIconPath() {
117
+ if (window.Cre8_ICON_URL) {
118
+ return window.Cre8_ICON_URL;
119
+ }
120
+ const script = document.querySelector('script[src$="icon"]');
121
+ if (script) {
122
+ return `${script.src.replace(/^(.+)\/.*$/, '$1')}/svgs/svgs.svg?raw`;
123
+ }
124
+ return this.iconUrl;
125
+ }
126
+ render() {
127
+ const componentClassName = this.componentClassNames('cre8-c-icon-wrapper', {});
128
+ const iconMap = {};
129
+ iconMap['add'] = html `<svg src=${svgAdd} container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
130
+ iconMap['arrow-back'] = html `<svg src='${svgArrowLeft}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
131
+ iconMap['arrow-forward'] = html `<svg src='${svgArrowLeft}' rotate="180" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
132
+ iconMap['attention'] = html `<svg src='${svgChat}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
133
+ iconMap['calendar'] = html `<svg src='${svgCalendar}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
134
+ iconMap['calendar-datepicker'] = html `<svg src='${svgCalendar}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}" height="24" width="24"></svg>`;
135
+ iconMap['caret-down'] = html `<svg src='${svgCaretDown}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
136
+ iconMap['caret-double-left'] = html `<svg src='${svgCaretDoubleRight}' rotate="180" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
137
+ iconMap['caret-double-right'] = html `<svg src='${svgCaretDoubleRight}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
138
+ iconMap['check-circle'] = html `<svg src='${svgCheckCircle}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
139
+ iconMap['check'] = html `<svg src='${svgCheck}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
140
+ iconMap['close'] = html `<svg src='${svgClose}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
141
+ iconMap['delta-down'] = html `<svg src='${svgCaretDown}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
142
+ iconMap['delta-up'] = html `<svg src='${svgCaretDown}' flip="vertical" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
143
+ iconMap['download'] = html `<svg src='${svgDownload}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
144
+ iconMap['edit'] = html `<svg src='${svgEdit}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
145
+ iconMap['ellipsis'] = html `<svg src='${svgEllipsis}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
146
+ iconMap['email'] = html `${svgMessageFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
147
+ iconMap['envelope'] = html `<svg src='${svgMessage}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
148
+ iconMap['error-alt'] = html `<svg src='${svgErrorAlt}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
149
+ iconMap['error-round'] = html `<svg src='${svgError}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
150
+ iconMap['error'] = html `<svg src='${svgError}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
151
+ iconMap['express-scripts'] = html `<svg src='${svgEsi}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
152
+ iconMap['external-file'] = html `<svg src='${svgExternal}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
153
+ iconMap['find-drug'] = html `<svg src='${svgMedication}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
154
+ iconMap['globe'] = html `<svg src='${svgGlobe}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
155
+ iconMap['hand-heart'] = html `<svg src='${svgHandHeart}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
156
+ iconMap['help'] = html `<svg src='${svgHelp}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
157
+ iconMap['info'] = html `<svg src='${svgInfoFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
158
+ iconMap['instagram'] = html `<svg src='${svgInsta}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
159
+ iconMap['keyboard-arrow-down'] = html `<svg src='${svgCaretUp}' rotate="180" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
160
+ iconMap['keyboard-arrow-left'] = html `<svg src='${svgCaretUp}' rotate="-90" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
161
+ iconMap['keyboard-arrow-right'] = html `<svg src='${svgCaretUp}' rotate="90" container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
162
+ iconMap['keyboard-arrow-up'] = html `<svg src='${svgCaretUp}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
163
+ iconMap['language'] = html `<svg src='${svgGlobe}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
164
+ iconMap['light-bulb'] = html `<svg src='${svgLightbulb}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
165
+ iconMap['linkedin'] = html `<svg src='${svgLinkedin}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
166
+ iconMap['location-on'] = html `<svg src='${svgLocation}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
167
+ iconMap['menu'] = html `<svg src='${svgMenu}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
168
+ iconMap['minus'] = html `<svg src='${svgMinus}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
169
+ iconMap['neutral'] = html `<svg src='${svgAccountFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
170
+ iconMap['notifications'] = html `<svg src='${svgNotification}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
171
+ iconMap['open'] = html `<svg src='${svgOpen}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
172
+ iconMap['order-status'] = html `<svg src='${svgRefill}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
173
+ iconMap['pause'] = html `<svg src='${svgPause}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
174
+ iconMap['people'] = html `<svg src='${svgAccount}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
175
+ iconMap['person-bubble'] = html `<svg src='${svgPersonBubble}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
176
+ iconMap['person'] = html `<svg src='${svgAccountFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
177
+ iconMap['pinterest'] = html `<svg src='${svgPinterest}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
178
+ iconMap['play-arrow'] = html `<svg src='${svgPlayFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
179
+ iconMap['play-circle-outline'] = html `<svg src='${svgPlayCircle}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
180
+ iconMap['progress-spinner'] = html `<svg src='${svgSpinner}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
181
+ iconMap['replay'] = html `<svg src='${svgUndo}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
182
+ iconMap['rss-feed'] = html `<svg src='${svgRss}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
183
+ iconMap['rx'] = html `<svg src='${svgRx}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
184
+ iconMap['search'] = html `<svg src='${svgSearch}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
185
+ iconMap['shop'] = html `<svg src='${svgCart}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
186
+ iconMap['spinner'] = html `<svg src='${svgSpinner}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
187
+ iconMap['square'] = html `<svg src='${svgRectangle}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
188
+ iconMap['success'] = html `<svg src='${svgCheckCircle}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
189
+ iconMap['swap'] = html `<svg src='${svgSwap}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
190
+ iconMap['thumb-up'] = html `<svg src='${svgThumbsUp}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
191
+ iconMap['trending-flat'] = html `<svg src='${svgTrendFlat}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
192
+ iconMap['trending-up'] = html `<svg src='${svgTrendUp}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
193
+ iconMap['twitter'] = html `<svg src='${svgTwitter}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
194
+ iconMap['vaccine'] = html `<svg src='${svgVaccine}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
195
+ iconMap['warning'] = html `<svg src='${svgWarningFilled}' container-class="${componentClassName}" class="cre8-c-icon" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}"></svg>`;
196
+ const iconPath = this.getIconPath();
197
+ // if (iconMap[this.name] !== undefined) {
198
+ // return iconMap[this.name];
199
+ // }
200
+ if (!this.name && !this.svg) {
201
+ console.warn('Cre8Icon: No icon name or svg provided. Please provide either a name or svg.');
202
+ return html ``;
203
+ }
204
+ return html `
205
+ ${this.svg ? html `<span class="${componentClassName}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">${unsafeHTML(this.svg)}</span>` : html `
206
+ <span class="${componentClassName}" aria-label="${this.iconTitle}" aria-hidden="${!this.iconTitle}">
207
+ <svg class="cre8-c-icon" xmlns="http://www.w3.org/2000/svg" focusable="${this.focusable ? 'true' : 'false'}" role="img">
208
+ <use href="${iconPath}#${this.name}"></use>
209
+ </svg>
210
+ </span>`}`;
211
+ }
212
+ }
213
+ Cre8Icon.styles = [styles];
214
+ __decorate([
215
+ property({ type: Boolean, reflect: true })
216
+ ], Cre8Icon.prototype, "focusable", void 0);
217
+ __decorate([
218
+ property()
219
+ ], Cre8Icon.prototype, "name", void 0);
220
+ __decorate([
221
+ property({ reflect: true })
222
+ ], Cre8Icon.prototype, "svg", void 0);
223
+ __decorate([
224
+ property()
225
+ ], Cre8Icon.prototype, "iconUrl", void 0);
226
+ __decorate([
227
+ property()
228
+ ], Cre8Icon.prototype, "iconTitle", void 0);
229
+ if (customElements.get('cre8-icon') === undefined) {
230
+ customElements.define('cre8-icon', Cre8Icon);
231
+ }
232
+ export default Cre8Icon;
233
+ //# sourceMappingURL=icon.js.map
package/lib/components/icon/icon.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../components/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,iCAAiC;AACjC,mCAAmC;AACnC,OAAO,EAAE,IAAI,GAAoB,MAAM,KAAK,CAAC;AAC7C,OAAO,EAAC,UAAU,EAAC,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,MAAM,MAAM,wCAAwC,CAAC;AAC5D,OAAO,YAAY,MAAM,iDAAiD,CAAC;AAC3E,OAAO,OAAO,MAAM,gDAAgD,CAAC;AACrE,OAAO,WAAW,MAAM,6CAA6C,CAAC;AACtE,OAAO,YAAY,MAAM,8CAA8C,CAAC;AACxE,OAAO,cAAc,MAAM,yCAAyC,CAAC;AACrE,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,WAAW,MAAM,4CAA4C,CAAC;AACrE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,WAAW,MAAM,4CAA4C,CAAC;AACrE,OAAO,gBAAgB,MAAM,kDAAkD,CAAC;AAChF,OAAO,UAAU,MAAM,mDAAmD,CAAC;AAC3E,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,WAAW,MAAM,kDAAkD,CAAC;AAC3E,OAAO,aAAa,MAAM,+CAA+C,CAAC;AAC1E,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,YAAY,MAAM,6CAA6C,CAAC;AACvE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,YAAY,MAAM,8CAA8C,CAAC;AACxE,OAAO,WAAW,MAAM,4CAA4C,CAAC;AACrE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,gBAAgB,MAAM,2CAA2C,CAAC;AACzE,OAAO,eAAe,MAAM,iDAAiD,CAAC;AAC9E,OAAO,SAAS,MAAM,8CAA8C,CAAC;AACrE,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,8CAA8C,CAAC;AACzE,OAAO,aAAa,MAAM,gDAAgD,CAAC;AAC3E,OAAO,UAAU,MAAM,+CAA+C,CAAC;AACvE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,SAAS,MAAM,2CAA2C,CAAC;AAClE,OAAO,OAAO,MAAM,yCAAyC,CAAC;AAC9D,OAAO,YAAY,MAAM,mDAAmD,CAAC;AAC7E,OAAO,UAAU,MAAM,oDAAoD,CAAC;AAC5E,OAAO,gBAAgB,MAAM,2CAA2C,CAAC;AACzE,OAAO,mBAAmB,MAAM,uDAAuD,CAAC;AACxF,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,MAAM,MAAM,qCAAqC,CAAC;AACzD,OAAO,QAAQ,MAAM,+BAA+B,CAAC;AACrD,OAAO,WAAW,MAAM,8BAA8B,CAAC;AACvD,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,QAAQ,MAAM,2BAA2B,CAAC;AACjD,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAClD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,WAAW,MAAM,8BAA8B,CAAC;AACvD,OAAO,YAAY,MAAM,mCAAmC,CAAC;AAC7D,OAAO,UAAU,MAAM,iCAAiC,CAAC;AACzD,OAAO,UAAU,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAqBI;;;;;WAKG;QAEC,YAAO,GAAY,UAAU,CAAC;IAsHlC,CAAC;IA5GD;;;OAGG;IACH,WAAW;QACP,IAAI,MAAM,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QAED,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAoB,qBAAqB,CAAC,CAAC;QAChF,IAAI,MAAM,EAAE,CAAC;YACT,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC;QACzE,CAAC;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;QAE/E,MAAM,OAAO,GAA0C,EAAE,CAAC;QAE1D,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA,YAAY,MAAM,qBAAqB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC7K,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,mCAAmC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5M,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACtL,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,iCAAiC,CAAC;QAC3N,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAA,aAAa,mBAAmB,mCAAmC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvN,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAA,aAAa,mBAAmB,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3M,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA,aAAa,cAAc,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAChM,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sCAAsC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC1M,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,GAAG,gBAAgB,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACxL,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC1L,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAA,aAAa,MAAM,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3L,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC9L,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA,aAAa,aAAa,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,aAAa,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvL,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvL,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,mCAAmC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAChN,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,mCAAmC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAChN,OAAO,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,kCAAkC,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAChN,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjM,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACtL,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,gBAAgB,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC7L,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA,aAAa,eAAe,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAClM,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA,aAAa,SAAS,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3L,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA,aAAa,QAAQ,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACtL,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA,aAAa,eAAe,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAClM,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,aAAa,gBAAgB,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC5L,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3L,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA,aAAa,aAAa,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC7L,OAAO,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAA,aAAa,aAAa,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACtM,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAChM,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACnL,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,MAAM,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACpL,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA,aAAa,KAAK,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC7K,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,aAAa,SAAS,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACrL,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvL,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACxL,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,cAAc,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3L,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA,aAAa,OAAO,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACjL,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA,aAAa,WAAW,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACzL,OAAO,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA,aAAa,YAAY,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC/L,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAC3L,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvL,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,UAAU,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QACvL,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAA,aAAa,gBAAgB,sBAAsB,kBAAkB,qCAAqC,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,UAAU,CAAC;QAE7L,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEpC,0CAA0C;QAC1C,iCAAiC;QACjC,IAAI;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YAC1B,OAAO,CAAC,IAAI,CAAC,8EAA8E,CAAC,CAAC;YAC7F,OAAO,IAAI,CAAA,EAAE,CAAC;QAClB,CAAC;QAED,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,gBAAgB,kBAAkB,iBAAiB,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;uBACjJ,kBAAkB,iBAAiB,IAAI,CAAC,SAAS,kBAAkB,CAAC,IAAI,CAAC,SAAS;qFACpB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BACzF,QAAQ,IAAI,IAAI,CAAC,IAAI;;gBAEjC,EAAE,CAAC;IACb,CAAC;;AAhJG,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAQrB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACnB;AAQpB;IADH,QAAQ,EAAE;sCACM;AAGb;IADC,QAAQ,CAAC,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC;qCACd;AAQX;IADH,QAAQ,EAAE;yCACuB;AAQ9B;IADH,QAAQ,EAAE;2CACY;AAiH3B,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAWD,eAAe,QAAQ,CAAC","sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable dot-notation */\n/* eslint-disable max-statements */\nimport { html, TemplateResult, } from 'lit';\nimport {unsafeHTML} from 'lit/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport svgAdd from '../../icons/System/Regular/Add.svg?raw';\nimport svgArrowLeft from '../../icons/System/Regular/Arrow_-_Left.svg?raw';\nimport svgChat from '../../icons/System/Filled/Chat_Default.svg?raw';\nimport svgCalendar from '../../icons/System/Regular/Calendar.svg?raw';\nimport svgCaretDown from '../../icons/System/Filled/Caret_Down.svg?raw';\nimport svgCheckCircle from '../../icons/System/Filled/Check.svg?raw';\nimport svgCheck from '../../icons/System/Regular/Check.svg?raw';\nimport svgClose from '../../icons/System/Regular/Close.svg?raw';\nimport svgDownload from '../../icons/System/Filled/Download.svg?raw';\nimport svgEdit from '../../icons/System/Regular/Edit.svg?raw';\nimport svgEllipsis from '../../icons/System/Filled/Ellipsis.svg?raw';\nimport svgMessageFilled from '../../icons/System/Filled/Message_Unread.svg?raw';\nimport svgMessage from '../../icons/System/Regular/Message_Unread.svg?raw';\nimport svgError from '../../icons/System/Regular/Error.svg?raw';\nimport svgExternal from '../../icons/System/Regular/External_Link.svg?raw';\nimport svgMedication from '../../icons/System/Regular/Medication.svg?raw';\nimport svgGlobe from '../../icons/System/Regular/Globe.svg?raw';\nimport svgHandHeart from '../../icons/System/Regular/Wellness.svg?raw';\nimport svgHelp from '../../icons/System/Regular/Help.svg?raw';\nimport svgInfoFilled from '../../icons/System/Filled/Info.svg?raw';\nimport svgCaretUp from '../../icons/System/Regular/Caret_Up.svg?raw';\nimport svgLightbulb from '../../icons/System/Regular/Lightbulb.svg?raw';\nimport svgLocation from '../../icons/System/Filled/Location.svg?raw';\nimport svgMenu from '../../icons/System/Regular/Menu.svg?raw';\nimport svgMinus from '../../icons/System/Regular/Minus.svg?raw';\nimport svgAccountFilled from '../../icons/System/Filled/Account.svg?raw';\nimport svgNotification from '../../icons/System/Regular/Notification.svg?raw';\nimport svgRefill from '../../icons/Marketing/Duotone/Refill.svg?raw';\nimport svgAccount from '../../icons/System/Regular/Account.svg?raw';\nimport svgPlayFilled from '../../icons/System/Filled/Play_Arrow.svg?raw';\nimport svgPlayCircle from '../../icons/System/Regular/Play_Circle.svg?raw';\nimport svgSpinner from '../../icons/System/Regular/Spinner/75.svg?raw';\nimport svgUndo from '../../icons/System/Regular/Undo.svg?raw';\nimport svgSearch from '../../icons/System/Regular/Search.svg?raw';\nimport svgCart from '../../icons/System/Regular/Cart.svg?raw';\nimport svgRectangle from '../../icons/System/Filled/Shape/Rectangle.svg?raw';\nimport svgVaccine from '../../icons/Marketing/Duotone/Vaccinations.svg?raw';\nimport svgWarningFilled from '../../icons/System/Filled/Warning.svg?raw';\nimport svgCaretDoubleRight from '../../icons/System/Regular/Caret_Double_Right.svg?raw';\nimport svgErrorAlt from '../../icons/error-alt.svg?raw';\nimport svgEsi from '../../icons/express-scripts.svg?raw';\nimport svgInsta from '../../icons/instagram.svg?raw';\nimport svgLinkedin from '../../icons/linkedin.svg?raw';\nimport svgOpen from '../../icons/open.svg?raw';\nimport svgPause from '../../icons/pause.svg?raw';\nimport svgPersonBubble from '../../icons/person-bubble.svg?raw';\nimport svgPinterest from '../../icons/pinterest.svg?raw';\nimport svgRss from '../../icons/rss-feed.svg?raw';\nimport svgRx from '../../icons/rx.svg?raw';\nimport svgSwap from '../../icons/swap.svg?raw';\nimport svgThumbsUp from '../../icons/thumb-up.svg?raw';\nimport svgTrendFlat from '../../icons/trending-flat.svg?raw';\nimport svgTrendUp from '../../icons/trending-up.svg?raw';\nimport svgTwitter from '../../icons/twitter.svg?raw';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './icon.styles.js';\nimport iconSprite from '../../icons/cre8-icons.svg?raw';\n\n/**\n *\n * <svg> is a web component, which can be used with any frontend framework and use any svg.\n * It takes raw svgs as props and renders them.\n *\n * **'svg-legacy'** will be **deprecated** in Web Components v0.5.0\n *\n * - [List of new figma icons](https:/www.figma.com/file/j1a0rBkoH65XiGKfq7ppWa/Iconography?type=design&node-id=2037-5773&mode=design&t=6ZzC6KH3Gkxf3fj5-4)\n * - The new `svg` from the svg package: https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/.\n *\n * ##Usability Considerations\n * - If the icon is decorative: set `aria-hidden` to true.\n * - If the icon is interactive (not decorative): set `aria-hidden` to false and add the `aria-label`\n * - If the icon is key to functionality from a screen reader perspective, it is required to add `aria-label`\n * which will describe the icon.\n * For example, if the icon is a close button, setting `aria-label=\"Close\"`will give\n * the SVG an aria-label to make it sufficiently accessible.\n *\n * [More information on Accessibility with svgs](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/getting-started-accessibility--page)\n *\n * ##How to use\n * Cre8 Web Components (cre8-wc) includes the `cre8_dev/svgs` package.\n * If you need to install a newer version than what's included, please see\n * the [installation instructions for svgs](https:/git.express-scripts.com/ExpressScripts/svgs#installation).\n * - Import the component (this is the icon container): `import '@cre8_dev/svgs';`\n * - Import an svg as a string: `import svgInfo from 'cre8_dev/svgs/lib/icons/System/Regular/Info.svg?raw';`\n *\n * Your import paths may be different depending on your project's build configuration.\n * Please see [Importing Icons](https:/static-dev.esi-memberweb-dev.aws.evernorthcloud.com/svgs/?path=/story/icon-sets-importing-icons--page)\n * of the `cre8_dev/svgs` documentation for more information.\n */\n\nexport class Cre8Icon extends Cre8Element {\n static styles = [styles];\n\n /**\n * Focusable\n *\n * @required\n */\n @property({ type: Boolean, reflect: true })\n focusable?: boolean;\n\n /**\n * Icon name (this method of passing in svgs is to be deprecated)\n *\n * @required\n */\n @property()\n name: string;\n\n @property({reflect:true})\n svg?:string\n /**\n * Icon path\n * 1) This points to the file where the icon sprite lives\n * 2) This method of pathing will soon be depricated\n *\n */\n @property()\n iconUrl?: string = iconSprite;\n\n /**\n * Icon Title, this string is used for the aira-label of the svg\n *\n * @required\n */\n @property()\n iconTitle?: string;\n\n /**\n * Get the path to the icons, either by overriding it on the window\n * or by using the bundled icon path\n */\n getIconPath() {\n if (window.Cre8_ICON_URL) {\n return window.Cre8_ICON_URL;\n }\n\n const script = document.querySelector<HTMLScriptElement>('script[src$=\"icon\"]');\n if (script) {\n return `${script.src.replace(/^(.+)\\/.*$/, '$1')}/svgs/svgs.svg?raw`;\n }\n\n return this.iconUrl;\n }\n\n render() {\n const componentClassName = this.componentClassNames('cre8-c-icon-wrapper', {});\n\n const iconMap: { [name: string]: TemplateResult<1> } = {};\n\n iconMap['add'] = html`<svg src=${svgAdd} container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['arrow-back'] = html`<svg src='${svgArrowLeft}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['arrow-forward'] = html`<svg src='${svgArrowLeft}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['attention'] = html`<svg src='${svgChat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['calendar'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['calendar-datepicker'] = html`<svg src='${svgCalendar}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\" height=\"24\" width=\"24\"></svg>`;\n iconMap['caret-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['caret-double-left'] = html`<svg src='${svgCaretDoubleRight}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['caret-double-right'] = html`<svg src='${svgCaretDoubleRight}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['check-circle'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['check'] = html`<svg src='${svgCheck}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['close'] = html`<svg src='${svgClose}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['delta-down'] = html`<svg src='${svgCaretDown}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['delta-up'] = html`<svg src='${svgCaretDown}' flip=\"vertical\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['download'] = html`<svg src='${svgDownload}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['edit'] = html`<svg src='${svgEdit}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['ellipsis'] = html`<svg src='${svgEllipsis}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['email'] = html`${svgMessageFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['envelope'] = html`<svg src='${svgMessage}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['error-alt'] = html`<svg src='${svgErrorAlt}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['error-round'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['error'] = html`<svg src='${svgError}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['express-scripts'] = html`<svg src='${svgEsi}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['external-file'] = html`<svg src='${svgExternal}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['find-drug'] = html`<svg src='${svgMedication}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['globe'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['hand-heart'] = html`<svg src='${svgHandHeart}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['help'] = html`<svg src='${svgHelp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['info'] = html`<svg src='${svgInfoFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['instagram'] = html`<svg src='${svgInsta}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['keyboard-arrow-down'] = html`<svg src='${svgCaretUp}' rotate=\"180\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['keyboard-arrow-left'] = html`<svg src='${svgCaretUp}' rotate=\"-90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['keyboard-arrow-right'] = html`<svg src='${svgCaretUp}' rotate=\"90\" container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['keyboard-arrow-up'] = html`<svg src='${svgCaretUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['language'] = html`<svg src='${svgGlobe}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['light-bulb'] = html`<svg src='${svgLightbulb}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['linkedin'] = html`<svg src='${svgLinkedin}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['location-on'] = html`<svg src='${svgLocation}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['menu'] = html`<svg src='${svgMenu}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['minus'] = html`<svg src='${svgMinus}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['neutral'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['notifications'] = html`<svg src='${svgNotification}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['open'] = html`<svg src='${svgOpen}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['order-status'] = html`<svg src='${svgRefill}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['pause'] = html`<svg src='${svgPause}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['people'] = html`<svg src='${svgAccount}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['person-bubble'] = html`<svg src='${svgPersonBubble}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['person'] = html`<svg src='${svgAccountFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['pinterest'] = html`<svg src='${svgPinterest}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['play-arrow'] = html`<svg src='${svgPlayFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['play-circle-outline'] = html`<svg src='${svgPlayCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['progress-spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['replay'] = html`<svg src='${svgUndo}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['rss-feed'] = html`<svg src='${svgRss}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['rx'] = html`<svg src='${svgRx}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['search'] = html`<svg src='${svgSearch}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['shop'] = html`<svg src='${svgCart}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['spinner'] = html`<svg src='${svgSpinner}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['square'] = html`<svg src='${svgRectangle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['success'] = html`<svg src='${svgCheckCircle}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['swap'] = html`<svg src='${svgSwap}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['thumb-up'] = html`<svg src='${svgThumbsUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['trending-flat'] = html`<svg src='${svgTrendFlat}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['trending-up'] = html`<svg src='${svgTrendUp}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['twitter'] = html`<svg src='${svgTwitter}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['vaccine'] = html`<svg src='${svgVaccine}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n iconMap['warning'] = html`<svg src='${svgWarningFilled}' container-class=\"${componentClassName}\" class=\"cre8-c-icon\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\"></svg>`;\n\n const iconPath = this.getIconPath();\n\n // if (iconMap[this.name] !== undefined) {\n // return iconMap[this.name];\n // }\n if (!this.name && !this.svg) {\n console.warn('Cre8Icon: No icon name or svg provided. Please provide either a name or svg.');\n return html``;\n }\n\n return html`\n ${this.svg ? html`<span class=\"${componentClassName}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">${unsafeHTML(this.svg)}</span>` : html`\n <span class=\"${componentClassName}\" aria-label=\"${this.iconTitle}\" aria-hidden=\"${!this.iconTitle}\">\n <svg class=\"cre8-c-icon\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"${this.focusable ? 'true' : 'false'}\" role=\"img\">\n <use href=\"${iconPath}#${this.name}\"></use>\n </svg>\n </span>` }`;\n }\n }\n\n\nif (customElements.get('cre8-icon') === undefined) {\n customElements.define('cre8-icon', Cre8Icon);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-icon': Cre8Icon;\n }\n interface Window {\n Cre8_ICON_URL?: string;\n }\n}\n\nexport default Cre8Icon;\n"]}
package/lib/components/icon/icon.styles.js ADDED
@@ -0,0 +1,4 @@
1
+ import { css } from 'lit';
2
+ const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex;--cre8-u-icon-display: block}.cre8-c-icon-wrapper{align-items:var(--cre8-u-icon-align-items);justify-content:var(--cre8-u-icon-justify-content);animation:var(--cre8-loading-animation, --cre8-icon-animation, none);margin:var(--cre8-icon-margin, 0)}.cre8-c-icon{height:var(--cre8-icon-height, 1rem);width:var(--cre8-icon-width, 1rem);color:var(--cre8-icon-fill, currentColor)}cre8-icon{display:inline-flex;vertical-align:middle}@media(prefers-reduced-motion){cre8-icon[spin]:not([spin=false]){animation-duration:6400ms !important}}cre8-icon[spin]:not([spin=false]){animation-duration:2000ms;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}@media(prefers-reduced-motion){cre8-icon[pulse]:not([pulse=false]) svg *{animation-duration:3s !important;animation-timing-function:linear}}cre8-icon[pulse]:not([pulse=false]) svg *{animation:pulse 1.5s ease-in-out infinite}cre8-icon[flip=vertical]{transform:scaleY(-1)}cre8-icon[flip=horizontal]{transform:scaleX(-1)}cre8-icon[flip=both]{transform:scaleX(-1) scaleY(-1)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}`;
3
+ export default styles;
4
+ //# sourceMappingURL=icon.styles.js.map
package/lib/components/icon/icon.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../components/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,27FAA27F,CAAC;AAC98F,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex;--cre8-u-icon-display: block}.cre8-c-icon-wrapper{align-items:var(--cre8-u-icon-align-items);justify-content:var(--cre8-u-icon-justify-content);animation:var(--cre8-loading-animation, --cre8-icon-animation, none);margin:var(--cre8-icon-margin, 0)}.cre8-c-icon{height:var(--cre8-icon-height, 1rem);width:var(--cre8-icon-width, 1rem);color:var(--cre8-icon-fill, currentColor)}cre8-icon{display:inline-flex;vertical-align:middle}@media(prefers-reduced-motion){cre8-icon[spin]:not([spin=false]){animation-duration:6400ms !important}}cre8-icon[spin]:not([spin=false]){animation-duration:2000ms;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}@media(prefers-reduced-motion){cre8-icon[pulse]:not([pulse=false]) svg *{animation-duration:3s !important;animation-timing-function:linear}}cre8-icon[pulse]:not([pulse=false]) svg *{animation:pulse 1.5s ease-in-out infinite}cre8-icon[flip=vertical]{transform:scaleY(-1)}cre8-icon[flip=horizontal]{transform:scaleX(-1)}cre8-icon[flip=both]{transform:scaleX(-1) scaleY(-1)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}`;\nexport default styles;\n"]}