@xplor-education/core-stencil-components 3.1.1 → 3.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 (263) hide show
  1. package/components/index.js +28 -3
  2. package/components/index.js.map +1 -1
  3. package/components/{p-B49oUO_9.js → p-AzuDJugb.js} +3 -3
  4. package/components/{p-B49oUO_9.js.map → p-AzuDJugb.js.map} +1 -1
  5. package/components/{p-D4jVa8dE.js → p-BQ6aLuGP.js} +4 -4
  6. package/components/{p-D4jVa8dE.js.map → p-BQ6aLuGP.js.map} +1 -1
  7. package/components/{p-VIJbFoA4.js → p-BZQ63ULK.js} +3 -3
  8. package/components/{p-VIJbFoA4.js.map → p-BZQ63ULK.js.map} +1 -1
  9. package/components/{p-Bs_ocvfe.js → p-CyGsSa4H.js} +7 -4
  10. package/components/p-CyGsSa4H.js.map +1 -0
  11. package/components/{p-B3zR7peH.js → p-oanCZPh6.js} +4 -4
  12. package/components/{p-B3zR7peH.js.map → p-oanCZPh6.js.map} +1 -1
  13. package/components/xplor-alert-message.js +2 -2
  14. package/components/xplor-avatar-and-name.js +2 -2
  15. package/components/xplor-avatar.js +1 -1
  16. package/components/xplor-badge-active.js +1 -1
  17. package/components/xplor-badge-archived.js +1 -1
  18. package/components/xplor-badge-deleted.js +1 -1
  19. package/components/xplor-badge-expired.js +1 -1
  20. package/components/xplor-badge-inactive.js +1 -1
  21. package/components/xplor-badge-recalled.js +1 -1
  22. package/components/xplor-badge-upcoming.js +1 -1
  23. package/components/xplor-badge-waitlist.js +1 -1
  24. package/components/xplor-badge.js +1 -1
  25. package/components/xplor-btn-back-to-parent.js +1 -1
  26. package/components/xplor-btn-back.js +1 -1
  27. package/components/xplor-btn-icon.js +1 -1
  28. package/components/xplor-btn-toggle-group.js +1 -1
  29. package/components/xplor-btn-toggle-secondary.js +1 -1
  30. package/components/xplor-btn-toggle.js +1 -1
  31. package/components/xplor-btn-tooltip.js +3 -3
  32. package/components/xplor-button.js +1 -1
  33. package/components/xplor-canvas-editor.d.ts +11 -0
  34. package/components/xplor-canvas-editor.js +369 -0
  35. package/components/xplor-canvas-editor.js.map +1 -0
  36. package/components/xplor-chat-widget.js +3 -3
  37. package/components/xplor-checkbox.js +1 -1
  38. package/components/xplor-combobox.js +5 -5
  39. package/components/xplor-datatable.js +2 -2
  40. package/components/xplor-date-picker.js +5 -5
  41. package/components/xplor-drag-and-drop-input.js +26 -5
  42. package/components/xplor-drag-and-drop-input.js.map +1 -1
  43. package/components/xplor-dropdown.js +1 -1
  44. package/components/xplor-expansion-panel.js +4 -4
  45. package/components/xplor-expansion-panels.js +1 -1
  46. package/components/xplor-file-upload.js +2 -2
  47. package/components/xplor-inline-checkbox.js +2 -2
  48. package/components/xplor-inline-date-picker.js +1 -1
  49. package/components/xplor-inline-switch.js +1 -1
  50. package/components/xplor-input-file.js +1 -1
  51. package/components/xplor-input-search.js +2 -2
  52. package/components/xplor-input-select.js +2 -2
  53. package/components/xplor-input-send.js +3 -3
  54. package/components/xplor-input-text-area.js +6 -3
  55. package/components/xplor-input-text-area.js.map +1 -1
  56. package/components/xplor-input-text-secondary.js +2 -2
  57. package/components/xplor-input-text.js +6 -3
  58. package/components/xplor-input-text.js.map +1 -1
  59. package/components/xplor-input-title.js +1 -1
  60. package/components/xplor-links.js +1 -1
  61. package/components/xplor-modal-persistent.js +1 -1
  62. package/components/xplor-nav-tabs.js +2 -2
  63. package/components/xplor-radio-btn.js +2 -2
  64. package/components/xplor-rich-text-editor.d.ts +11 -0
  65. package/components/xplor-rich-text-editor.js +23754 -0
  66. package/components/xplor-rich-text-editor.js.map +1 -0
  67. package/components/xplor-section-card.js +2 -2
  68. package/components/xplor-section-heading.js +2 -2
  69. package/components/xplor-table.js +5 -5
  70. package/components/xplor-text-bubble.js +2 -2
  71. package/components/xplor-text-field.js +2 -2
  72. package/components/xplor-time-picker.js +6 -6
  73. package/components/xplor-tooltip.js +1 -1
  74. package/dist/cjs/{index-BjAapk2n.js → index--_m3aUsf.js} +32 -7
  75. package/dist/cjs/index--_m3aUsf.js.map +1 -0
  76. package/dist/cjs/loader.cjs.js +2 -2
  77. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +29457 -0
  78. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -0
  79. package/dist/cjs/xplor-component-library.cjs.js +2 -2
  80. package/dist/collection/collection-manifest.json +2 -0
  81. package/dist/collection/components/xplor-alert-message/xplor-alert-message.js +2 -2
  82. package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js +4 -4
  83. package/dist/collection/components/xplor-avatar/xplor-avatar.js +2 -2
  84. package/dist/collection/components/xplor-avatar-and-name/xplor-avatar-and-name.js +1 -1
  85. package/dist/collection/components/xplor-badge/xplor-badge.js +1 -1
  86. package/dist/collection/components/xplor-badge-active/xplor-badge-active.js +1 -1
  87. package/dist/collection/components/xplor-badge-archived/xplor-badge-archived.js +1 -1
  88. package/dist/collection/components/xplor-badge-deleted/xplor-badge-deleted.js +1 -1
  89. package/dist/collection/components/xplor-badge-expired/xplor-badge-expired.js +1 -1
  90. package/dist/collection/components/xplor-badge-inactive/xplor-badge-inactive.js +1 -1
  91. package/dist/collection/components/xplor-badge-recalled/xplor-badge-recalled.js +1 -1
  92. package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js +2 -2
  93. package/dist/collection/components/xplor-badge-upcoming/xplor-badge-upcoming.js +1 -1
  94. package/dist/collection/components/xplor-badge-waitlist/xplor-badge-waitlist.js +1 -1
  95. package/dist/collection/components/xplor-btn-back/xplor-btn-back.js +1 -1
  96. package/dist/collection/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.js +1 -1
  97. package/dist/collection/components/xplor-btn-icon/xplor-btn-icon.js +1 -1
  98. package/dist/collection/components/xplor-btn-menu/xplor-btn-menu.js +2 -2
  99. package/dist/collection/components/xplor-btn-toggle/xplor-btn-toggle.js +1 -1
  100. package/dist/collection/components/xplor-btn-toggle-group/xplor-btn-toggle-group.js +1 -1
  101. package/dist/collection/components/xplor-btn-toggle-secondary/xplor-btn-toggle-secondary.js +1 -1
  102. package/dist/collection/components/xplor-btn-tooltip/xplor-btn-tooltip.js +1 -1
  103. package/dist/collection/components/xplor-button/xplor-button.css +8 -3
  104. package/dist/collection/components/xplor-button/xplor-button.js +23 -1
  105. package/dist/collection/components/xplor-button/xplor-button.js.map +1 -1
  106. package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.css +1224 -0
  107. package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js +520 -0
  108. package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js.map +1 -0
  109. package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js +280 -0
  110. package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js.map +1 -0
  111. package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.js +1 -1
  112. package/dist/collection/components/xplor-checkbox/xplor-checkbox.js +1 -1
  113. package/dist/collection/components/xplor-combobox/xplor-combobox.js +7 -7
  114. package/dist/collection/components/xplor-datatable/xplor-datatable.js +5 -5
  115. package/dist/collection/components/xplor-date-picker/xplor-date-picker.js +4 -4
  116. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +62 -29
  117. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +25 -4
  118. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
  119. package/dist/collection/components/xplor-dropdown/xplor-dropdown.js +1 -1
  120. package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js +4 -4
  121. package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js +1 -1
  122. package/dist/collection/components/xplor-file-upload/xplor-file-upload.js +4 -4
  123. package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js +2 -2
  124. package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js +1 -1
  125. package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js +1 -1
  126. package/dist/collection/components/xplor-input-file/xplor-input-file.js +1 -1
  127. package/dist/collection/components/xplor-input-search/xplor-input-search.js +2 -2
  128. package/dist/collection/components/xplor-input-select/xplor-input-select.js +3 -3
  129. package/dist/collection/components/xplor-input-send/xplor-input-send.js +2 -2
  130. package/dist/collection/components/xplor-input-text/xplor-input-text.css +41 -13
  131. package/dist/collection/components/xplor-input-text/xplor-input-text.js +5 -2
  132. package/dist/collection/components/xplor-input-text/xplor-input-text.js.map +1 -1
  133. package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.css +39 -13
  134. package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +5 -2
  135. package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js.map +1 -1
  136. package/dist/collection/components/xplor-input-text-secondary/xplor-input-text-secondary.js +2 -2
  137. package/dist/collection/components/xplor-input-title/xplor-input-title.js +1 -1
  138. package/dist/collection/components/xplor-links/xplor-links.js +1 -1
  139. package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js +1 -1
  140. package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js +3 -3
  141. package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js +2 -2
  142. package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.css +1445 -0
  143. package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.js +800 -0
  144. package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.js.map +1 -0
  145. package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.js +260 -0
  146. package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.js.map +1 -0
  147. package/dist/collection/components/xplor-section-card/xplor-section-card.js +2 -2
  148. package/dist/collection/components/xplor-section-heading/xplor-section-heading.js +2 -2
  149. package/dist/collection/components/xplor-table/xplor-table.js +5 -5
  150. package/dist/collection/components/xplor-text-bubble/xplor-text-bubble.js +2 -2
  151. package/dist/collection/components/xplor-text-field/xplor-text-field.js +2 -2
  152. package/dist/collection/components/xplor-time-picker/xplor-time-picker.js +6 -6
  153. package/dist/collection/components/xplor-tooltip/xplor-tooltip.js +4 -4
  154. package/dist/collection/utils/slate-legacy-converter.js +223 -0
  155. package/dist/collection/utils/slate-legacy-converter.js.map +1 -0
  156. package/dist/components/index.js +28 -3
  157. package/dist/components/index.js.map +1 -1
  158. package/dist/components/{p--zhT6rvJ.js → p-DGaHlr-k.js} +4 -4
  159. package/dist/components/{p--zhT6rvJ.js.map → p-DGaHlr-k.js.map} +1 -1
  160. package/dist/components/{p-B5rS_jjI.js → p-DWaTb2EJ.js} +7 -4
  161. package/dist/components/p-DWaTb2EJ.js.map +1 -0
  162. package/dist/components/{p-J41B2nOt.js → p-DroQBoSo.js} +3 -3
  163. package/dist/components/{p-J41B2nOt.js.map → p-DroQBoSo.js.map} +1 -1
  164. package/dist/components/{p-DQ8MCJFX.js → p-TfYzqGwr.js} +3 -3
  165. package/dist/components/{p-DQ8MCJFX.js.map → p-TfYzqGwr.js.map} +1 -1
  166. package/dist/components/{p-DbQ6ZNvh.js → p-vl-J3tKJ.js} +4 -4
  167. package/dist/components/{p-DbQ6ZNvh.js.map → p-vl-J3tKJ.js.map} +1 -1
  168. package/dist/components/xplor-alert-message.js +2 -2
  169. package/dist/components/xplor-avatar-and-name.js +2 -2
  170. package/dist/components/xplor-avatar.js +1 -1
  171. package/dist/components/xplor-badge-active.js +1 -1
  172. package/dist/components/xplor-badge-archived.js +1 -1
  173. package/dist/components/xplor-badge-deleted.js +1 -1
  174. package/dist/components/xplor-badge-expired.js +1 -1
  175. package/dist/components/xplor-badge-inactive.js +1 -1
  176. package/dist/components/xplor-badge-recalled.js +1 -1
  177. package/dist/components/xplor-badge-upcoming.js +1 -1
  178. package/dist/components/xplor-badge-waitlist.js +1 -1
  179. package/dist/components/xplor-badge.js +1 -1
  180. package/dist/components/xplor-btn-back-to-parent.js +1 -1
  181. package/dist/components/xplor-btn-back.js +1 -1
  182. package/dist/components/xplor-btn-icon.js +1 -1
  183. package/dist/components/xplor-btn-toggle-group.js +1 -1
  184. package/dist/components/xplor-btn-toggle-secondary.js +1 -1
  185. package/dist/components/xplor-btn-toggle.js +1 -1
  186. package/dist/components/xplor-btn-tooltip.js +3 -3
  187. package/dist/components/xplor-button.js +1 -1
  188. package/dist/components/xplor-canvas-editor.d.ts +11 -0
  189. package/dist/components/xplor-canvas-editor.js +370 -0
  190. package/dist/components/xplor-canvas-editor.js.map +1 -0
  191. package/dist/components/xplor-chat-widget.js +3 -3
  192. package/dist/components/xplor-checkbox.js +1 -1
  193. package/dist/components/xplor-combobox.js +5 -5
  194. package/dist/components/xplor-datatable.js +2 -2
  195. package/dist/components/xplor-date-picker.js +5 -5
  196. package/dist/components/xplor-drag-and-drop-input.js +26 -5
  197. package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
  198. package/dist/components/xplor-dropdown.js +1 -1
  199. package/dist/components/xplor-expansion-panel.js +4 -4
  200. package/dist/components/xplor-expansion-panels.js +1 -1
  201. package/dist/components/xplor-file-upload.js +2 -2
  202. package/dist/components/xplor-inline-checkbox.js +2 -2
  203. package/dist/components/xplor-inline-date-picker.js +1 -1
  204. package/dist/components/xplor-inline-switch.js +1 -1
  205. package/dist/components/xplor-input-file.js +1 -1
  206. package/dist/components/xplor-input-search.js +2 -2
  207. package/dist/components/xplor-input-select.js +2 -2
  208. package/dist/components/xplor-input-send.js +3 -3
  209. package/dist/components/xplor-input-text-area.js +6 -3
  210. package/dist/components/xplor-input-text-area.js.map +1 -1
  211. package/dist/components/xplor-input-text-secondary.js +2 -2
  212. package/dist/components/xplor-input-text.js +6 -3
  213. package/dist/components/xplor-input-text.js.map +1 -1
  214. package/dist/components/xplor-input-title.js +1 -1
  215. package/dist/components/xplor-links.js +1 -1
  216. package/dist/components/xplor-modal-persistent.js +1 -1
  217. package/dist/components/xplor-nav-tabs.js +2 -2
  218. package/dist/components/xplor-radio-btn.js +2 -2
  219. package/dist/components/xplor-rich-text-editor.d.ts +11 -0
  220. package/dist/components/xplor-rich-text-editor.js +23755 -0
  221. package/dist/components/xplor-rich-text-editor.js.map +1 -0
  222. package/dist/components/xplor-section-card.js +2 -2
  223. package/dist/components/xplor-section-heading.js +2 -2
  224. package/dist/components/xplor-table.js +5 -5
  225. package/dist/components/xplor-text-bubble.js +2 -2
  226. package/dist/components/xplor-text-field.js +2 -2
  227. package/dist/components/xplor-time-picker.js +6 -6
  228. package/dist/components/xplor-tooltip.js +1 -1
  229. package/dist/esm/{index-KRfMjDC2.js → index-QwDfQUbw.js} +32 -7
  230. package/dist/esm/index-QwDfQUbw.js.map +1 -0
  231. package/dist/esm/loader.js +3 -3
  232. package/dist/esm/xplor-alert-dialog_60.entry.js +29396 -0
  233. package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -0
  234. package/dist/esm/xplor-component-library.js +3 -3
  235. package/dist/hydrate/index.js +24238 -97
  236. package/dist/hydrate/index.mjs +24238 -97
  237. package/dist/types/components/xplor-button/xplor-button.d.ts +2 -0
  238. package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.d.ts +63 -0
  239. package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.stories.d.ts +84 -0
  240. package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts +6 -0
  241. package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.d.ts +129 -0
  242. package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.d.ts +105 -0
  243. package/dist/types/components.d.ts +290 -0
  244. package/dist/types/utils/slate-legacy-converter.d.ts +83 -0
  245. package/dist/xplor-component-library/p-QwDfQUbw.js +3 -0
  246. package/dist/xplor-component-library/p-QwDfQUbw.js.map +1 -0
  247. package/dist/xplor-component-library/p-df68ccde.entry.js +2 -0
  248. package/dist/xplor-component-library/p-df68ccde.entry.js.map +1 -0
  249. package/dist/xplor-component-library/xplor-component-library.css +1 -1
  250. package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
  251. package/package.json +7 -1
  252. package/components/p-Bs_ocvfe.js.map +0 -1
  253. package/dist/cjs/index-BjAapk2n.js.map +0 -1
  254. package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +0 -5389
  255. package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +0 -1
  256. package/dist/components/p-B5rS_jjI.js.map +0 -1
  257. package/dist/esm/index-KRfMjDC2.js.map +0 -1
  258. package/dist/esm/xplor-alert-dialog_58.entry.js +0 -5330
  259. package/dist/esm/xplor-alert-dialog_58.entry.js.map +0 -1
  260. package/dist/xplor-component-library/p-5b0cee73.entry.js +0 -2
  261. package/dist/xplor-component-library/p-5b0cee73.entry.js.map +0 -1
  262. package/dist/xplor-component-library/p-KRfMjDC2.js +0 -3
  263. package/dist/xplor-component-library/p-KRfMjDC2.js.map +0 -1
@@ -273,12 +273,6 @@ ul.mdc-list li.mdc-list-item {
273
273
  .xplor-input-text-area {
274
274
  display: flex;
275
275
  flex-direction: column;
276
- gap: 0.25rem;
277
- }
278
- .xplor-input-text-area__label {
279
- font-size: 0.875rem;
280
- color: rgba(0, 0, 0, 0.6);
281
- margin-bottom: 0.25rem;
282
276
  }
283
277
  .xplor-input-text-area__required {
284
278
  color: #d32f2f;
@@ -289,6 +283,20 @@ ul.mdc-list li.mdc-list-item {
289
283
  display: flex;
290
284
  align-items: flex-start;
291
285
  }
286
+ .xplor-input-text-area__label {
287
+ position: absolute;
288
+ left: 1rem;
289
+ top: 0.875rem;
290
+ font-size: 1rem;
291
+ color: rgba(0, 0, 0, 0.6);
292
+ pointer-events: none;
293
+ padding: 0 0.25rem;
294
+ transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
295
+ max-width: calc(100% - 2rem);
296
+ overflow: hidden;
297
+ text-overflow: ellipsis;
298
+ white-space: nowrap;
299
+ }
292
300
  .xplor-input-text-area__input {
293
301
  width: 100%;
294
302
  padding: 0.875rem 1rem;
@@ -299,18 +307,13 @@ ul.mdc-list li.mdc-list-item {
299
307
  outline: none;
300
308
  resize: vertical;
301
309
  min-height: 56px;
302
- transition: border-color 0.2s ease;
310
+ transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
303
311
  }
304
312
  .xplor-input-text-area__input::placeholder {
305
313
  color: rgba(0, 0, 0, 0.38);
306
314
  }
307
315
  .xplor-input-text-area__input:hover:not(:disabled) {
308
- border-color: rgba(0, 0, 0, 0.6);
309
- }
310
- .xplor-input-text-area__input:focus {
311
- border-color: #008480;
312
- border-width: 2px;
313
- padding: calc(0.875rem - 1px) calc(1rem - 1px);
316
+ border-color: rgba(0, 0, 0, 0.87);
314
317
  }
315
318
  .xplor-input-text-area__input:disabled {
316
319
  background-color: rgba(0, 0, 0, 0.04);
@@ -343,9 +346,32 @@ ul.mdc-list li.mdc-list-item {
343
346
  .xplor-input-text-area__clear:active {
344
347
  background-color: rgba(0, 0, 0, 0.08);
345
348
  }
349
+ .xplor-input-text-area--floating .xplor-input-text-area__label {
350
+ top: 0;
351
+ transform: translateY(-50%);
352
+ font-size: 0.75rem;
353
+ }
354
+ .xplor-input-text-area--focused .xplor-input-text-area__input {
355
+ border-color: #008480;
356
+ border-width: 2px;
357
+ padding: calc(0.875rem - 1px) calc(1rem - 1px);
358
+ }
359
+ .xplor-input-text-area--focused .xplor-input-text-area__label {
360
+ color: #008480;
361
+ }
346
362
  .xplor-input-text-area--error .xplor-input-text-area__input {
347
363
  border-color: #d32f2f;
348
364
  }
365
+ .xplor-input-text-area--error .xplor-input-text-area__label {
366
+ color: #d32f2f;
367
+ }
368
+ .xplor-input-text-area--error.xplor-input-text-area--focused .xplor-input-text-area__input {
369
+ border-color: #d32f2f;
370
+ border-width: 2px;
371
+ }
372
+ .xplor-input-text-area--disabled .xplor-input-text-area__label {
373
+ color: rgba(0, 0, 0, 0.38);
374
+ }
349
375
  .xplor-input-text-area__details {
350
376
  min-height: 1.25rem;
351
377
  padding: 0 1rem;
@@ -75,17 +75,20 @@ export class XplorInputTextArea {
75
75
  };
76
76
  }
77
77
  render() {
78
+ const hasValue = this.value != null && this.value !== '';
79
+ const isFloating = this.isFocused || hasValue;
78
80
  const containerClasses = {
79
81
  'xplor-input-text-area': true,
80
82
  'xplor-input-text-area--focused': this.isFocused,
83
+ 'xplor-input-text-area--floating': isFloating,
81
84
  'xplor-input-text-area--disabled': this.disabled,
82
85
  'xplor-input-text-area--error': !!this.error,
83
86
  };
84
87
  const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
85
88
  const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
86
- return (h(Host, { key: '8d29b69ab2e27bd4e1b285cf2c592b22a79518f2' }, h("div", { key: 'd6fa4df24c83488f1e88e8e9ddffeed3c4ebd0d7', class: containerClasses }, this.label && (h("label", { key: '5be952c8c6ce762a578d22da1b883512118ea3d4', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '20c3fd980d575e9e0c3f5573d02556bf9e14099e', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: 'bd37545a117401be68d17f0346321e35d39e544a', class: "xplor-input-text-area__field" }, h("textarea", { key: '164d86d89c96572adca9deec4292b8339c8efd50', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
89
+ return (h(Host, { key: '499771f2851bb143873f4eeffd8b94b2ebea25d1' }, h("div", { key: '1146216625f0e53726e89fa501b6693a2fa193d6', class: containerClasses }, h("div", { key: 'b15032551ad190e6a55aef831e1a5aca8362a858', class: "xplor-input-text-area__field" }, h("textarea", { key: '48727ed731a8c91ec7d60c1416505485c9986941', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: isFloating ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
87
90
  backgroundColor: this.bgColor,
88
- }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (h("button", { key: 'a818cd20c397af9517c1ed013f534ee2d53ccfc3', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: '6b2a6d5a6d8d7e66eef815dbebf3e2ea1c4f80b7', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '8e22ad68e9a5609b7abfa30751685c570c0e3dca', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '0eaa1976d2ac0c2e25c301fd23e690f28d9a3494', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
91
+ }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (h("label", { key: 'be53c38576a49ca6e569628944d2ffde34a1f974', class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'c5c477c25d45ecad8eaa796486d9957b6bad2b42', class: "xplor-input-text-area__required" }, "*"))), showClearButton && (h("button", { key: '3071ff6a2a2f95a27bad3f2659591a442c9ad472', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'dbc13a86ce7ef5f97851e50a64b6905f04eb896d', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '9575a980cca5901ee68b5a40a1ee26827ac45126', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '32a790df7518f6a042bf0737bf1466098f947beb', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
89
92
  }
90
93
  static get is() { return "xplor-input-text-area"; }
91
94
  static get encapsulation() { return "scoped"; }
@@ -1 +1 @@
1
- {"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextAreaIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-area',\n styleUrl: 'xplor-input-text-area.scss',\n scoped: true,\n})\nexport class XplorInputTextArea {\n private inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\n /**\n * Input value\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Input label\n */\n @Prop() label: string = '';\n\n /**\n * Input placeholder\n */\n @Prop() placeholder: string = '';\n\n /**\n * Background color\n */\n @Prop() bgColor: string = 'white';\n\n /**\n * Border/focus color\n */\n @Prop() color: string = '#008480';\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is readonly\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Whether to show clear button\n */\n @Prop() clearable: boolean = true;\n\n /**\n * Number of rows\n */\n @Prop() rows: number = 3;\n\n /**\n * Whether to hide validation details\n */\n @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n /**\n * Error message\n */\n @Prop() error: string = '';\n\n /**\n * Helper text\n */\n @Prop() helperText: string = '';\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Input event\n */\n @Event() xplorInput: EventEmitter<string>;\n\n /**\n * Change event\n */\n @Event() xplorChange: EventEmitter<string>;\n\n /**\n * Clear event\n */\n @Event() xplorClear: EventEmitter<void>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleClear = () => {\n this.value = '';\n this.xplorClear.emit();\n this.xplorChange.emit(this.value);\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-text-area': true,\n 'xplor-input-text-area--focused': this.isFocused,\n 'xplor-input-text-area--disabled': this.disabled,\n 'xplor-input-text-area--error': !!this.error,\n };\n\n const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;\n const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.label && (\n <label class=\"xplor-input-text-area__label\" htmlFor={this.inputId}>\n {this.label}\n {this.required && <span class=\"xplor-input-text-area__required\">*</span>}\n </label>\n )}\n\n <div class=\"xplor-input-text-area__field\">\n <textarea\n id={this.inputId}\n class=\"xplor-input-text-area__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n />\n {showClearButton && (\n <button\n type=\"button\"\n class=\"xplor-input-text-area__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text-area__details\">\n {this.error && <div class=\"xplor-input-text-area__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text-area__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextAreaIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-area',\n styleUrl: 'xplor-input-text-area.scss',\n scoped: true,\n})\nexport class XplorInputTextArea {\n private inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\n /**\n * Input value\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Input label\n */\n @Prop() label: string = '';\n\n /**\n * Input placeholder\n */\n @Prop() placeholder: string = '';\n\n /**\n * Background color\n */\n @Prop() bgColor: string = 'white';\n\n /**\n * Border/focus color\n */\n @Prop() color: string = '#008480';\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is readonly\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Whether to show clear button\n */\n @Prop() clearable: boolean = true;\n\n /**\n * Number of rows\n */\n @Prop() rows: number = 3;\n\n /**\n * Whether to hide validation details\n */\n @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n /**\n * Error message\n */\n @Prop() error: string = '';\n\n /**\n * Helper text\n */\n @Prop() helperText: string = '';\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Input event\n */\n @Event() xplorInput: EventEmitter<string>;\n\n /**\n * Change event\n */\n @Event() xplorChange: EventEmitter<string>;\n\n /**\n * Clear event\n */\n @Event() xplorClear: EventEmitter<void>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleClear = () => {\n this.value = '';\n this.xplorClear.emit();\n this.xplorChange.emit(this.value);\n };\n\n render() {\n const hasValue = this.value != null && this.value !== '';\n const isFloating = this.isFocused || hasValue;\n\n const containerClasses = {\n 'xplor-input-text-area': true,\n 'xplor-input-text-area--focused': this.isFocused,\n 'xplor-input-text-area--floating': isFloating,\n 'xplor-input-text-area--disabled': this.disabled,\n 'xplor-input-text-area--error': !!this.error,\n };\n\n const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;\n const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-text-area__field\">\n <textarea\n id={this.inputId}\n class=\"xplor-input-text-area__input\"\n value={this.value}\n placeholder={isFloating ? this.placeholder : ''}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n />\n {this.label && (\n <label\n class=\"xplor-input-text-area__label\"\n htmlFor={this.inputId}\n style={{ backgroundColor: this.bgColor }}\n >\n {this.label}\n {this.required && <span class=\"xplor-input-text-area__required\">*</span>}\n </label>\n )}\n {showClearButton && (\n <button\n type=\"button\"\n class=\"xplor-input-text-area__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text-area__details\">\n {this.error && <div class=\"xplor-input-text-area__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text-area__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
@@ -46,9 +46,9 @@ export class XplorInputTextSecondary {
46
46
  'input-secondary--dirty': this.isDirty,
47
47
  };
48
48
  const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
49
- return (h(Host, { key: '805c82be35d46be51ebc3e29e78345ae81bf1368' }, h("div", { key: 'df8e81a6553efbd0dade36a7d5871e8d1d789213', class: containerClasses }, this.label && (h("label", { key: '289689dbe52f2ae19af90664ae99240eee499d61', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '7e711647c5cdc04033f2f774eee8d810835685ae', class: "input-secondary__required" }, "*"))), h("div", { key: '6cab22daaade60aa7e5130afda2f2692c1ae73b1', class: "input-secondary__field" }, h("input", { key: 'eb9cc2994c5f68d15683c4584ac270bcb5c20664', id: this.inputId, type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
49
+ return (h(Host, { key: 'a62362fc1f52b7206cffc0756a1a32cdcfbf3ec0' }, h("div", { key: 'c4358644e222ebb2d2349d2f11e7bee17d032c1d', class: containerClasses }, this.label && (h("label", { key: '95dd10cc4f9c27d50aaf6beb5993bf68f45a6352', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'c904c62b4d8124adff62eb8b9759da11835a50cf', class: "input-secondary__required" }, "*"))), h("div", { key: '72ee352843e05f39be97683a4c5d16172e72cb9a', class: "input-secondary__field" }, h("input", { key: 'f76ba5ffa6047ff85fbe73541055c3e5fc56632d', id: this.inputId, type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
50
50
  backgroundColor: this.bgColor,
51
- }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'e51cb67efac2e7037c2a903d78164348ce56998d', name: "append-inner" })), showDetails && (h("div", { key: '5c490ba173da365e8b9393ffee34a4259e9b3dbd', class: "input-secondary__details" }, this.error && h("div", { key: '4415c1feb83542ef0f0202fc48dfb13effc9d4c4', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'fb7e6c208fef2ea8139325438c19612538e1d845', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'e2479a9561cb0bf63f1115b2fc0b1d768bc705ed', name: "append" }))));
51
+ }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: '521dbc72d697f2fb86c0d192efeb987f6033c587', name: "append-inner" })), showDetails && (h("div", { key: 'e155a41d29fd859467e277799746bc253f28aa73', class: "input-secondary__details" }, this.error && h("div", { key: 'fa3b2fbc558a6d5024a77d011141264d2155def8', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '9f0598ea14a287cdc25435e4f8caf740b722bfb3', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'e65a65f11e1d63118dd2566d0eeae7b950ff5987', name: "append" }))));
52
52
  }
53
53
  static get is() { return "xplor-input-text-secondary"; }
54
54
  static get encapsulation() { return "scoped"; }
@@ -33,7 +33,7 @@ export class XplorInputTitle {
33
33
  };
34
34
  }
35
35
  render() {
36
- return (h(Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, h("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
36
+ return (h(Host, { key: 'd704477e948ba0d8184a4a1231b855d56ea8c390' }, h("input", { key: 'd1c171f69b54b7981f56da8b3651f212c52e1af9', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
37
37
  }
38
38
  static get is() { return "xplor-input-title"; }
39
39
  static get encapsulation() { return "scoped"; }
@@ -5,7 +5,7 @@ export class XplorLinks {
5
5
  this.imageAlt = '';
6
6
  }
7
7
  render() {
8
- return (h(Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, h("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, h("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, h("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, h("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, h("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), h("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, h("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
8
+ return (h(Host, { key: '889187734e978da8f6303bc6348d16ff58a4f117', class: `theme-${this.brand}` }, h("a", { key: '31ec1b964e1033ed77ae8e13d4d6a2bbb47681ae', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '5c368f18b9189f2e7d6b078f8d8d55422dbba8be', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c59f722b0c6d67af621872de924f3bfddbee2b71', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '69a8672d3dfa05ae91762f63f879359ee8eaae7c', class: "bg-white py-24 sm:py-32" }, h("div", { key: 'f3cf50757eee5bd60902d9402b9169ace12ab570', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '06c98d24f3fe053033b6e4ab6e7d3339797cfb4f', class: "max-w-xl" }, h("h2", { key: '6a8c0b137fa3cc971271df5f55a87b11d01abc52', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'ae46370f680162d2d073a8a81762ee5cabf66506', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'a02b593fe26d9814b2ebe89bb1fc8a93e7b25dbe', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'a2ce1ff6fc5379cc1c3d93dbb0ede1f47dc20e06' }, h("div", { key: '8ef99aacde6e9d5ea9c3c05ee8f4e262655bd130', class: "flex items-center gap-x-6" }, h("img", { key: 'e742f8c1d0cb3e6bd5649a94966c01027314dc7e', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), h("div", { key: 'dd31c47ff1c7b1d6c3f11938abb61b7556ef9e9c' }, h("h3", { key: 'a1c97a24c3c1baaa1a78409bcc8410aad4f4f1f7', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '77709dadf6ff62a9473ac88ce6fc419fe81217fc', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
9
9
  }
10
10
  static get is() { return "xplor-links"; }
11
11
  static get encapsulation() { return "shadow"; }
@@ -23,7 +23,7 @@ export class XplorModalPersistent {
23
23
  this.loading = false;
24
24
  }
25
25
  render() {
26
- return (h(Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, h("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), h("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), h("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), h("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
26
+ return (h(Host, { key: 'a63a1be6d3f7f91ee12d9ac55263862d4a304520' }, h("xplor-modal", { key: 'd96ca5c6388f90e2345da0b97b7683b785da01f9', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '8bdf1a54705992482008ffc724b90a182c19d6c9', name: "title", slot: "title" }), h("slot", { key: '91316e16134121d55bb5119a7ed6aacce244161a', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b728a60734f050286b8e36079cfcd6872d5bb737', name: "body", slot: "body" }), h("slot", { key: 'd2f44d88fd6e4b109193e07e013168c92741b202', name: "actions", slot: "actions" }))));
27
27
  }
28
28
  static get is() { return "xplor-modal-persistent"; }
29
29
  static get properties() {
@@ -49,7 +49,7 @@ export class XplorNavTabs {
49
49
  }
50
50
  }
51
51
  render() {
52
- return (h(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
52
+ return (h(Host, { key: 'c2ea1eb0316856196a7c84589fa74cb05cf9bd0a' }, h("div", { key: '360f41422ff1a5b29417ffe02b150e19ad2779d3', class: {
53
53
  'nav-tabs': true,
54
54
  'nav-tabs--grow': this.grow,
55
55
  [`nav-tabs--${this.color}`]: true,
@@ -57,7 +57,7 @@ export class XplorNavTabs {
57
57
  'nav-tabs__tab': true,
58
58
  'nav-tabs__tab--active': this.value === item.value,
59
59
  'nav-tabs__tab--disabled': item.disabled,
60
- }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
60
+ }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: '4b070fa29fa37e878b737fdc5d3eaa4b492bdc01' }))));
61
61
  }
62
62
  static get is() { return "xplor-nav-tabs"; }
63
63
  static get encapsulation() { return "scoped"; }
@@ -102,7 +102,7 @@ export class XplorNavTabs {
102
102
  "references": {
103
103
  "NavTabItem": {
104
104
  "location": "local",
105
- "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
105
+ "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
106
106
  "id": "src/components/xplor-nav-tabs/xplor-nav-tabs.tsx::NavTabItem"
107
107
  }
108
108
  }
@@ -76,10 +76,10 @@ export class XplorRadioBtn {
76
76
  return all.filter(radio => radio !== this.el);
77
77
  }
78
78
  render() {
79
- return (h("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
79
+ return (h("label", { key: '7bc995d1df46cd9818692d9a2b59fc6560f23cdd', class: {
80
80
  'radio-wrapper': true,
81
81
  'radio-wrapper--disabled': this.disabled,
82
- } }, h("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
82
+ } }, h("div", { key: 'eea71f02b6335bd443f4410b350a61f1706a9b59', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: '0b61c18ef3a9f08f6b89176de2b7a4d21b16d9fc', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: '7b227dca0fa69409dc71a04bc642c2de30bd2562', class: "label" }, this.label))));
83
83
  }
84
84
  static get is() { return "xplor-radio-btn"; }
85
85
  static get encapsulation() { return "shadow"; }