@nectary/components 2.8.7 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (448) hide show
  1. package/package.json +1 -1
  2. package/types.d.ts +1 -1
  3. package/accordion/index.d.ts +0 -11
  4. package/accordion/index.js +0 -86
  5. package/accordion/types.d.ts +0 -21
  6. package/accordion/types.js +0 -1
  7. package/accordion-item/index.d.ts +0 -14
  8. package/accordion-item/index.js +0 -95
  9. package/accordion-item/types.d.ts +0 -36
  10. package/accordion-item/types.js +0 -1
  11. package/accordion-item/utils.d.ts +0 -2
  12. package/accordion-item/utils.js +0 -1
  13. package/action-menu/index.d.ts +0 -11
  14. package/action-menu/index.js +0 -195
  15. package/action-menu/types.d.ts +0 -13
  16. package/action-menu/types.js +0 -1
  17. package/action-menu-option/index.d.ts +0 -12
  18. package/action-menu-option/index.js +0 -82
  19. package/action-menu-option/types.d.ts +0 -23
  20. package/action-menu-option/types.js +0 -1
  21. package/action-menu-option/utils.d.ts +0 -2
  22. package/action-menu-option/utils.js +0 -3
  23. package/alert/index.d.ts +0 -14
  24. package/alert/index.js +0 -48
  25. package/alert/types.d.ts +0 -18
  26. package/alert/types.js +0 -1
  27. package/alert/utils.d.ts +0 -2
  28. package/alert/utils.js +0 -1
  29. package/avatar/index.d.ts +0 -11
  30. package/avatar/index.js +0 -94
  31. package/avatar/types.d.ts +0 -37
  32. package/avatar/types.js +0 -1
  33. package/avatar/utils.d.ts +0 -4
  34. package/avatar/utils.js +0 -7
  35. package/badge/index.d.ts +0 -11
  36. package/badge/index.js +0 -114
  37. package/badge/types.d.ts +0 -34
  38. package/badge/types.js +0 -1
  39. package/badge/utils.d.ts +0 -2
  40. package/badge/utils.js +0 -1
  41. package/button/index.d.ts +0 -11
  42. package/button/index.js +0 -182
  43. package/button/types.d.ts +0 -53
  44. package/button/types.js +0 -1
  45. package/button/utils.d.ts +0 -2
  46. package/button/utils.js +0 -1
  47. package/card/index.d.ts +0 -13
  48. package/card/index.js +0 -133
  49. package/card/types.d.ts +0 -28
  50. package/card/types.js +0 -1
  51. package/card-container/index.d.ts +0 -11
  52. package/card-container/index.js +0 -11
  53. package/card-container/types.d.ts +0 -3
  54. package/card-container/types.js +0 -1
  55. package/chat/index.d.ts +0 -11
  56. package/chat/index.js +0 -11
  57. package/chat/types.d.ts +0 -3
  58. package/chat/types.js +0 -1
  59. package/chat-block/index.d.ts +0 -11
  60. package/chat-block/index.js +0 -86
  61. package/chat-block/types.d.ts +0 -30
  62. package/chat-block/types.js +0 -1
  63. package/chat-bubble/index.d.ts +0 -11
  64. package/chat-bubble/index.js +0 -41
  65. package/chat-bubble/types.d.ts +0 -20
  66. package/chat-bubble/types.js +0 -1
  67. package/chat-bubble/utils.d.ts +0 -3
  68. package/chat-bubble/utils.js +0 -2
  69. package/checkbox/index.d.ts +0 -11
  70. package/checkbox/index.js +0 -126
  71. package/checkbox/types.d.ts +0 -49
  72. package/checkbox/types.js +0 -1
  73. package/chip/index.d.ts +0 -13
  74. package/chip/index.js +0 -144
  75. package/chip/types.d.ts +0 -37
  76. package/chip/types.js +0 -1
  77. package/chip/utils.d.ts +0 -2
  78. package/chip/utils.js +0 -6
  79. package/code-tag/index.d.ts +0 -11
  80. package/code-tag/index.js +0 -31
  81. package/code-tag/types.d.ts +0 -11
  82. package/code-tag/types.js +0 -1
  83. package/color-menu/index.d.ts +0 -11
  84. package/color-menu/index.js +0 -308
  85. package/color-menu/types.d.ts +0 -32
  86. package/color-menu/types.js +0 -1
  87. package/color-menu/utils.d.ts +0 -1
  88. package/color-menu/utils.js +0 -11
  89. package/color-menu-option/index.d.ts +0 -13
  90. package/color-menu-option/index.js +0 -48
  91. package/color-menu-option/types.d.ts +0 -11
  92. package/color-menu-option/types.js +0 -1
  93. package/color-menu-option/utils.d.ts +0 -1
  94. package/color-menu-option/utils.js +0 -11
  95. package/color-swatch/index.d.ts +0 -12
  96. package/color-swatch/index.js +0 -54
  97. package/color-swatch/types.d.ts +0 -11
  98. package/color-swatch/types.js +0 -1
  99. package/color-swatch/utils.d.ts +0 -2
  100. package/color-swatch/utils.js +0 -6
  101. package/date-picker/index.d.ts +0 -14
  102. package/date-picker/index.js +0 -381
  103. package/date-picker/types.d.ts +0 -70
  104. package/date-picker/types.js +0 -1
  105. package/date-picker/utils.d.ts +0 -28
  106. package/date-picker/utils.js +0 -142
  107. package/dialog/index.d.ts +0 -15
  108. package/dialog/index.js +0 -144
  109. package/dialog/types.d.ts +0 -28
  110. package/dialog/types.js +0 -1
  111. package/dialog/utils.d.ts +0 -2
  112. package/dialog/utils.js +0 -18
  113. package/emoji/index.d.ts +0 -11
  114. package/emoji/index.js +0 -46
  115. package/emoji/types.d.ts +0 -11
  116. package/emoji/types.js +0 -1
  117. package/emoji/utils.d.ts +0 -3
  118. package/emoji/utils.js +0 -47
  119. package/emoji-picker/index.d.ts +0 -22
  120. package/emoji-picker/index.js +0 -308
  121. package/emoji-picker/types.d.ts +0 -26
  122. package/emoji-picker/types.js +0 -1
  123. package/field/index.d.ts +0 -11
  124. package/field/index.js +0 -120
  125. package/field/types.d.ts +0 -35
  126. package/field/types.js +0 -1
  127. package/file-drop/index.d.ts +0 -13
  128. package/file-drop/index.js +0 -205
  129. package/file-drop/types.d.ts +0 -50
  130. package/file-drop/types.js +0 -1
  131. package/file-drop/utils.d.ts +0 -2
  132. package/file-drop/utils.js +0 -31
  133. package/file-picker/index.d.ts +0 -11
  134. package/file-picker/index.js +0 -103
  135. package/file-picker/types.d.ts +0 -32
  136. package/file-picker/types.js +0 -1
  137. package/file-picker/utils.d.ts +0 -1
  138. package/file-picker/utils.js +0 -8
  139. package/file-status/index.d.ts +0 -14
  140. package/file-status/index.js +0 -61
  141. package/file-status/types.d.ts +0 -18
  142. package/file-status/types.js +0 -1
  143. package/file-status/utils.d.ts +0 -2
  144. package/file-status/utils.js +0 -1
  145. package/flag/index.d.ts +0 -11
  146. package/flag/index.js +0 -46
  147. package/flag/types.d.ts +0 -11
  148. package/flag/types.js +0 -1
  149. package/flag/utils.d.ts +0 -1
  150. package/flag/utils.js +0 -17
  151. package/grid/index.d.ts +0 -11
  152. package/grid/index.js +0 -11
  153. package/grid/types.d.ts +0 -3
  154. package/grid/types.js +0 -1
  155. package/grid-item/index.d.ts +0 -11
  156. package/grid-item/index.js +0 -35
  157. package/grid-item/types.d.ts +0 -17
  158. package/grid-item/types.js +0 -1
  159. package/help-tooltip/index.d.ts +0 -13
  160. package/help-tooltip/index.js +0 -74
  161. package/help-tooltip/types.d.ts +0 -3
  162. package/help-tooltip/types.js +0 -1
  163. package/horizontal-stepper/index.d.ts +0 -11
  164. package/horizontal-stepper/index.js +0 -61
  165. package/horizontal-stepper/types.d.ts +0 -13
  166. package/horizontal-stepper/types.js +0 -1
  167. package/horizontal-stepper-item/index.d.ts +0 -14
  168. package/horizontal-stepper-item/index.js +0 -61
  169. package/horizontal-stepper-item/types.d.ts +0 -24
  170. package/horizontal-stepper-item/types.js +0 -1
  171. package/horizontal-stepper-item/utils.d.ts +0 -2
  172. package/horizontal-stepper-item/utils.js +0 -1
  173. package/icon/index.d.ts +0 -11
  174. package/icon/index.js +0 -32
  175. package/icon/types.d.ts +0 -11
  176. package/icon/types.js +0 -1
  177. package/icon-button/index.d.ts +0 -12
  178. package/icon-button/index.js +0 -175
  179. package/icon-button/types.d.ts +0 -44
  180. package/icon-button/types.js +0 -1
  181. package/icon-button/utils.d.ts +0 -2
  182. package/icon-button/utils.js +0 -1
  183. package/inline-alert/index.d.ts +0 -15
  184. package/inline-alert/index.js +0 -83
  185. package/inline-alert/types.d.ts +0 -15
  186. package/inline-alert/types.js +0 -1
  187. package/inline-alert/utils.d.ts +0 -2
  188. package/inline-alert/utils.js +0 -1
  189. package/input/index.d.ts +0 -11
  190. package/input/index.js +0 -637
  191. package/input/types.d.ts +0 -86
  192. package/input/types.js +0 -1
  193. package/input/utils.d.ts +0 -26
  194. package/input/utils.js +0 -302
  195. package/link/index.d.ts +0 -12
  196. package/link/index.js +0 -150
  197. package/link/types.d.ts +0 -59
  198. package/link/types.js +0 -1
  199. package/list/index.d.ts +0 -11
  200. package/list/index.js +0 -14
  201. package/list/types.d.ts +0 -3
  202. package/list/types.js +0 -1
  203. package/list-item/index.d.ts +0 -11
  204. package/list-item/index.js +0 -14
  205. package/list-item/types.d.ts +0 -3
  206. package/list-item/types.js +0 -1
  207. package/pagination/index.d.ts +0 -12
  208. package/pagination/index.js +0 -147
  209. package/pagination/types.d.ts +0 -16
  210. package/pagination/types.js +0 -1
  211. package/pop/index.d.ts +0 -11
  212. package/pop/index.js +0 -425
  213. package/pop/types.d.ts +0 -35
  214. package/pop/types.js +0 -1
  215. package/pop/utils.d.ts +0 -4
  216. package/pop/utils.js +0 -16
  217. package/popover/index.d.ts +0 -12
  218. package/popover/index.js +0 -146
  219. package/popover/types.d.ts +0 -40
  220. package/popover/types.js +0 -1
  221. package/popover/utils.d.ts +0 -4
  222. package/popover/utils.js +0 -10
  223. package/progress/index.d.ts +0 -12
  224. package/progress/index.js +0 -58
  225. package/progress/types.d.ts +0 -12
  226. package/progress/types.js +0 -1
  227. package/progress-stepper/index.d.ts +0 -11
  228. package/progress-stepper/index.js +0 -206
  229. package/progress-stepper/types.d.ts +0 -22
  230. package/progress-stepper/types.js +0 -1
  231. package/progress-stepper-item/index.d.ts +0 -12
  232. package/progress-stepper-item/index.js +0 -82
  233. package/progress-stepper-item/types.d.ts +0 -23
  234. package/progress-stepper-item/types.js +0 -1
  235. package/progress-stepper-item/utils.d.ts +0 -11
  236. package/progress-stepper-item/utils.js +0 -13
  237. package/radio/index.d.ts +0 -11
  238. package/radio/index.js +0 -154
  239. package/radio/types.d.ts +0 -14
  240. package/radio/types.js +0 -1
  241. package/radio-option/index.d.ts +0 -11
  242. package/radio-option/index.js +0 -79
  243. package/radio-option/types.d.ts +0 -18
  244. package/radio-option/types.js +0 -1
  245. package/rich-text/index.d.ts +0 -14
  246. package/rich-text/index.js +0 -75
  247. package/rich-text/types.d.ts +0 -12
  248. package/rich-text/types.js +0 -1
  249. package/rich-text/utils.d.ts +0 -7
  250. package/rich-text/utils.js +0 -107
  251. package/rich-textarea/index.d.ts +0 -11
  252. package/rich-textarea/index.js +0 -464
  253. package/rich-textarea/types.d.ts +0 -48
  254. package/rich-textarea/types.js +0 -1
  255. package/rich-textarea/utils.d.ts +0 -39
  256. package/rich-textarea/utils.js +0 -1730
  257. package/segment/index.d.ts +0 -12
  258. package/segment/index.js +0 -109
  259. package/segment/types.d.ts +0 -16
  260. package/segment/types.js +0 -1
  261. package/segment/utils.d.ts +0 -3
  262. package/segment/utils.js +0 -16
  263. package/segment-collapse/index.d.ts +0 -13
  264. package/segment-collapse/index.js +0 -60
  265. package/segment-collapse/types.d.ts +0 -11
  266. package/segment-collapse/types.js +0 -1
  267. package/segmented-control/index.d.ts +0 -11
  268. package/segmented-control/index.js +0 -85
  269. package/segmented-control/types.d.ts +0 -11
  270. package/segmented-control/types.js +0 -1
  271. package/segmented-control-option/index.d.ts +0 -11
  272. package/segmented-control-option/index.js +0 -95
  273. package/segmented-control-option/types.d.ts +0 -19
  274. package/segmented-control-option/types.js +0 -1
  275. package/segmented-icon-control/index.d.ts +0 -11
  276. package/segmented-icon-control/index.js +0 -101
  277. package/segmented-icon-control/types.d.ts +0 -14
  278. package/segmented-icon-control/types.js +0 -1
  279. package/segmented-icon-control-option/index.d.ts +0 -11
  280. package/segmented-icon-control-option/index.js +0 -82
  281. package/segmented-icon-control-option/types.d.ts +0 -16
  282. package/segmented-icon-control-option/types.js +0 -1
  283. package/select-button/index.d.ts +0 -13
  284. package/select-button/index.js +0 -202
  285. package/select-button/types.d.ts +0 -50
  286. package/select-button/types.js +0 -1
  287. package/select-menu/index.d.ts +0 -15
  288. package/select-menu/index.js +0 -332
  289. package/select-menu/types.d.ts +0 -41
  290. package/select-menu/types.js +0 -1
  291. package/select-menu-option/index.d.ts +0 -28
  292. package/select-menu-option/index.js +0 -65
  293. package/select-menu-option/types.d.ts +0 -26
  294. package/select-menu-option/types.js +0 -1
  295. package/skeleton/index.d.ts +0 -11
  296. package/skeleton/index.js +0 -108
  297. package/skeleton/types.d.ts +0 -9
  298. package/skeleton/types.js +0 -1
  299. package/skeleton-item/index.d.ts +0 -11
  300. package/skeleton-item/index.js +0 -11
  301. package/skeleton-item/types.d.ts +0 -13
  302. package/skeleton-item/types.js +0 -1
  303. package/spinner/index.d.ts +0 -11
  304. package/spinner/index.js +0 -58
  305. package/spinner/types.d.ts +0 -12
  306. package/spinner/types.js +0 -1
  307. package/standalone.d.ts +0 -85
  308. package/standalone.js +0 -87
  309. package/stop-events/index.d.ts +0 -1
  310. package/stop-events/index.js +0 -27
  311. package/table/index.d.ts +0 -11
  312. package/table/index.js +0 -14
  313. package/table/types.d.ts +0 -3
  314. package/table/types.js +0 -1
  315. package/table-body/index.d.ts +0 -11
  316. package/table-body/index.js +0 -14
  317. package/table-body/types.d.ts +0 -3
  318. package/table-body/types.js +0 -1
  319. package/table-cell/index.d.ts +0 -11
  320. package/table-cell/index.js +0 -21
  321. package/table-cell/types.d.ts +0 -9
  322. package/table-cell/types.js +0 -1
  323. package/table-cell/utils.d.ts +0 -2
  324. package/table-cell/utils.js +0 -1
  325. package/table-head/index.d.ts +0 -11
  326. package/table-head/index.js +0 -14
  327. package/table-head/types.d.ts +0 -3
  328. package/table-head/types.js +0 -1
  329. package/table-head-cell/index.d.ts +0 -12
  330. package/table-head-cell/index.js +0 -57
  331. package/table-head-cell/types.d.ts +0 -15
  332. package/table-head-cell/types.js +0 -1
  333. package/table-row/index.d.ts +0 -11
  334. package/table-row/index.js +0 -42
  335. package/table-row/types.d.ts +0 -11
  336. package/table-row/types.js +0 -1
  337. package/tabs/index.d.ts +0 -11
  338. package/tabs/index.js +0 -80
  339. package/tabs/types.d.ts +0 -18
  340. package/tabs/types.js +0 -1
  341. package/tabs-icon-option/index.d.ts +0 -11
  342. package/tabs-icon-option/index.js +0 -79
  343. package/tabs-icon-option/types.d.ts +0 -19
  344. package/tabs-icon-option/types.js +0 -1
  345. package/tabs-option/index.d.ts +0 -12
  346. package/tabs-option/index.js +0 -86
  347. package/tabs-option/types.d.ts +0 -25
  348. package/tabs-option/types.js +0 -1
  349. package/tag/index.d.ts +0 -12
  350. package/tag/index.js +0 -84
  351. package/tag/types.d.ts +0 -23
  352. package/tag/types.js +0 -1
  353. package/tag/utils.d.ts +0 -2
  354. package/tag/utils.js +0 -6
  355. package/text/index.d.ts +0 -11
  356. package/text/index.js +0 -64
  357. package/text/types.d.ts +0 -30
  358. package/text/types.js +0 -1
  359. package/text/utils.d.ts +0 -2
  360. package/text/utils.js +0 -1
  361. package/textarea/index.d.ts +0 -11
  362. package/textarea/index.js +0 -322
  363. package/textarea/types.d.ts +0 -60
  364. package/textarea/types.js +0 -1
  365. package/tile-control/index.d.ts +0 -11
  366. package/tile-control/index.js +0 -110
  367. package/tile-control/types.d.ts +0 -37
  368. package/tile-control/types.js +0 -1
  369. package/tile-control-option/index.d.ts +0 -11
  370. package/tile-control-option/index.js +0 -98
  371. package/tile-control-option/types.d.ts +0 -37
  372. package/tile-control-option/types.js +0 -1
  373. package/time-picker/index.d.ts +0 -15
  374. package/time-picker/index.js +0 -337
  375. package/time-picker/types.d.ts +0 -34
  376. package/time-picker/types.js +0 -1
  377. package/time-picker/utils.d.ts +0 -11
  378. package/time-picker/utils.js +0 -75
  379. package/title/index.d.ts +0 -11
  380. package/title/index.js +0 -60
  381. package/title/types.d.ts +0 -31
  382. package/title/types.js +0 -1
  383. package/title/utils.d.ts +0 -3
  384. package/title/utils.js +0 -17
  385. package/toast/index.d.ts +0 -13
  386. package/toast/index.js +0 -86
  387. package/toast/types.d.ts +0 -28
  388. package/toast/types.js +0 -1
  389. package/toast/utils.d.ts +0 -2
  390. package/toast/utils.js +0 -1
  391. package/toast-manager/index.d.ts +0 -13
  392. package/toast-manager/index.js +0 -170
  393. package/toast-manager/types.d.ts +0 -13
  394. package/toast-manager/types.js +0 -1
  395. package/toast-manager/utils.d.ts +0 -2
  396. package/toast-manager/utils.js +0 -1
  397. package/toggle/index.d.ts +0 -11
  398. package/toggle/index.js +0 -141
  399. package/toggle/types.d.ts +0 -23
  400. package/toggle/types.js +0 -1
  401. package/tooltip/index.d.ts +0 -13
  402. package/tooltip/index.js +0 -264
  403. package/tooltip/tooltip-state.d.ts +0 -19
  404. package/tooltip/tooltip-state.js +0 -126
  405. package/tooltip/types.d.ts +0 -35
  406. package/tooltip/types.js +0 -1
  407. package/tooltip/utils.d.ts +0 -5
  408. package/tooltip/utils.js +0 -17
  409. package/utils/context.d.ts +0 -20
  410. package/utils/context.js +0 -84
  411. package/utils/countries.d.ts +0 -6
  412. package/utils/countries.js +0 -2
  413. package/utils/csv.d.ts +0 -5
  414. package/utils/csv.js +0 -22
  415. package/utils/debounce.d.ts +0 -8
  416. package/utils/debounce.js +0 -22
  417. package/utils/dom.d.ts +0 -34
  418. package/utils/dom.js +0 -154
  419. package/utils/element.d.ts +0 -16
  420. package/utils/element.js +0 -48
  421. package/utils/event-target.d.ts +0 -4
  422. package/utils/event-target.js +0 -26
  423. package/utils/get-react-event-handler.d.ts +0 -1
  424. package/utils/get-react-event-handler.js +0 -8
  425. package/utils/index.d.ts +0 -12
  426. package/utils/index.js +0 -12
  427. package/utils/markdown.d.ts +0 -19
  428. package/utils/markdown.js +0 -143
  429. package/utils/rect.d.ts +0 -4
  430. package/utils/rect.js +0 -28
  431. package/utils/size.d.ts +0 -5
  432. package/utils/size.js +0 -3
  433. package/utils/slot.d.ts +0 -4
  434. package/utils/slot.js +0 -38
  435. package/utils/throttle.d.ts +0 -4
  436. package/utils/throttle.js +0 -20
  437. package/utils/uid.d.ts +0 -1
  438. package/utils/uid.js +0 -13
  439. package/vertical-stepper/index.d.ts +0 -11
  440. package/vertical-stepper/index.js +0 -57
  441. package/vertical-stepper/types.d.ts +0 -13
  442. package/vertical-stepper/types.js +0 -1
  443. package/vertical-stepper-item/index.d.ts +0 -14
  444. package/vertical-stepper-item/index.js +0 -61
  445. package/vertical-stepper-item/types.d.ts +0 -24
  446. package/vertical-stepper-item/types.js +0 -1
  447. package/vertical-stepper-item/utils.d.ts +0 -2
  448. package/vertical-stepper-item/utils.js +0 -1
package/icon/index.js DELETED
@@ -1,32 +0,0 @@
1
- import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
2
- const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-comp-icon-font-family);font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);font-feature-settings:var(--sinch-comp-icon-font-feature-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none}</style><span id="icon" role="img"></span>';
3
- const template = document.createElement('template');
4
- template.innerHTML = templateHTML;
5
- defineCustomElement('sinch-icon', class extends NectaryElement {
6
- #$icon;
7
- constructor() {
8
- super();
9
- const shadowRoot = this.attachShadow();
10
- shadowRoot.appendChild(template.content.cloneNode(true));
11
- this.#$icon = shadowRoot.querySelector('#icon');
12
- }
13
- static get observedAttributes() {
14
- return ['name'];
15
- }
16
- attributeChangedCallback(name, _, newVal) {
17
- switch (name) {
18
- case 'name':
19
- {
20
- this.#$icon.textContent = newVal;
21
- updateAttribute(this.#$icon, 'aria-label', newVal);
22
- break;
23
- }
24
- }
25
- }
26
- set name(value) {
27
- updateAttribute(this, 'name', value);
28
- }
29
- get name() {
30
- return getAttribute(this, 'name', '');
31
- }
32
- });
package/icon/types.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import type { TSinchElementReact } from '../types';
2
- export type TSinchIconElement = HTMLElement & {
3
- /** Icon name */
4
- name: string;
5
- /** Icon name */
6
- setAttribute(name: 'name', value: string): void;
7
- };
8
- export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
9
- /** Icon name */
10
- name: string;
11
- };
package/icon/types.js DELETED
@@ -1 +0,0 @@
1
- export {};
@@ -1,12 +0,0 @@
1
- import '../tooltip';
2
- import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
3
- declare global {
4
- namespace JSX {
5
- interface IntrinsicElements {
6
- 'sinch-icon-button': TSinchIconButtonReact;
7
- }
8
- }
9
- interface HTMLElementTagNameMap {
10
- 'sinch-icon-button': TSinchIconButtonElement;
11
- }
12
- }
@@ -1,175 +0,0 @@
1
- import '../tooltip';
2
- import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute, isAttrEqual } from '../utils';
3
- import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
4
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
5
- import { typeValues } from './utils';
6
- const template = document.createElement('template');
7
- template.innerHTML = templateHTML;
8
- defineCustomElement('sinch-icon-button', class extends NectaryElement {
9
- #$button;
10
- #$tooltip;
11
- #controller = null;
12
- #sizeContext;
13
- constructor() {
14
- super();
15
- const shadowRoot = this.attachShadow();
16
- shadowRoot.appendChild(template.content.cloneNode(true));
17
- this.#$button = shadowRoot.querySelector('#button');
18
- this.#$tooltip = shadowRoot.querySelector('#tooltip');
19
- this.#sizeContext = new Context(this.#$button, 'size');
20
- }
21
- connectedCallback() {
22
- super.connectedCallback();
23
- this.#controller = new AbortController();
24
- const options = {
25
- signal: this.#controller.signal
26
- };
27
- this.role = 'button';
28
- this.tabIndex = 0;
29
- this.addEventListener('click', this.#onButtonClick, options);
30
- this.addEventListener('focus', this.#onButtonFocus, options);
31
- this.addEventListener('blur', this.#onButtonBlur, options);
32
- this.addEventListener('keydown', this.#onButtonKeydown, options);
33
- this.addEventListener('-click', this.#onClickReactHandler, options);
34
- this.addEventListener('-focus', this.#onFocusReactHandler, options);
35
- this.addEventListener('-blur', this.#onBlurReactHandler, options);
36
- this.#$tooltip.addEventListener('-show', this.#onTooltipShow, options);
37
- this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
38
- this.addEventListener('-tooltip-show', this.#onTooltipShowReactHandler, options);
39
- this.addEventListener('-tooltip-hide', this.#onTooltipHideReactHandler, options);
40
- subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
41
- this.#sizeContext.listen(this.#controller.signal);
42
- this.#onSizeUpdate();
43
- }
44
- disconnectedCallback() {
45
- super.disconnectedCallback();
46
- this.#controller.abort();
47
- this.#controller = null;
48
- }
49
- static get observedAttributes() {
50
- return ['size', 'disabled', 'aria-label', 'data-size'];
51
- }
52
- attributeChangedCallback(name, oldVal, newVal) {
53
- switch (name) {
54
- case 'disabled':
55
- {
56
- if (isAttrEqual(oldVal, newVal)) {
57
- return;
58
- }
59
- const isDisabled = isAttrTrue(newVal);
60
- this.ariaDisabled = isDisabled.toString();
61
- updateBooleanAttribute(this, 'disabled', isDisabled);
62
- break;
63
- }
64
- case 'aria-label':
65
- {
66
- updateAttribute(this.#$tooltip, 'text', newVal);
67
- break;
68
- }
69
- case 'size':
70
- {
71
- updateAttribute(this, 'data-size', newVal);
72
- break;
73
- }
74
- case 'data-size':
75
- {
76
- this.#onSizeUpdate();
77
- break;
78
- }
79
- }
80
- }
81
- set type(value) {
82
- updateLiteralAttribute(this, typeValues, 'type', value);
83
- }
84
- get type() {
85
- return getLiteralAttribute(this, typeValues, 'type', 'tertiary');
86
- }
87
- set disabled(isDisabled) {
88
- updateBooleanAttribute(this, 'disabled', isDisabled);
89
- }
90
- get disabled() {
91
- return getBooleanAttribute(this, 'disabled');
92
- }
93
- set size(size) {
94
- updateLiteralAttribute(this, sizeExValues, 'size', size);
95
- }
96
- get size() {
97
- return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
98
- }
99
- get tooltipRect() {
100
- return this.#$tooltip.tooltipRect;
101
- }
102
- get focusable() {
103
- return true;
104
- }
105
- #onSizeUpdate() {
106
- if (!this.isDomConnected) {
107
- return;
108
- }
109
- const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
110
- this.#sizeContext.dispatch(size);
111
- }
112
- #onContextSize = e => {
113
- if (this.hasAttribute('size')) {
114
- return;
115
- }
116
- switch (e.detail) {
117
- case 'l':
118
- {
119
- this.setAttribute('data-size', 'm');
120
- break;
121
- }
122
- case 'm':
123
- {
124
- this.setAttribute('data-size', 's');
125
- break;
126
- }
127
- default:
128
- {
129
- this.setAttribute('data-size', 'xs');
130
- }
131
- }
132
- };
133
- #onButtonClick = () => {
134
- if (!this.disabled) {
135
- this.dispatchEvent(new CustomEvent('-click'));
136
- }
137
- };
138
- #onButtonFocus = () => {
139
- this.dispatchEvent(new CustomEvent('-focus'));
140
- };
141
- #onButtonBlur = () => {
142
- this.dispatchEvent(new CustomEvent('-blur'));
143
- };
144
- #onButtonKeydown = e => {
145
- switch (e.code) {
146
- case 'Space':
147
- case 'Enter':
148
- {
149
- e.preventDefault();
150
- this.click();
151
- }
152
- }
153
- };
154
- #onTooltipShow = () => {
155
- this.dispatchEvent(new CustomEvent('-tooltip-show'));
156
- };
157
- #onTooltipHide = () => {
158
- this.dispatchEvent(new CustomEvent('-tooltip-hide'));
159
- };
160
- #onFocusReactHandler = () => {
161
- getReactEventHandler(this, 'on-focus')?.();
162
- };
163
- #onBlurReactHandler = () => {
164
- getReactEventHandler(this, 'on-blur')?.();
165
- };
166
- #onClickReactHandler = e => {
167
- getReactEventHandler(this, 'on-click')?.(e);
168
- };
169
- #onTooltipShowReactHandler = () => {
170
- getReactEventHandler(this, 'on-tooltip-show')?.();
171
- };
172
- #onTooltipHideReactHandler = () => {
173
- getReactEventHandler(this, 'on-tooltip-hide')?.();
174
- };
175
- });
@@ -1,44 +0,0 @@
1
- import type { TRect, TSinchElementReact } from '../types';
2
- import type { TSinchSizeEx } from '../utils/size';
3
- export type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
4
- export type TSinchIconButtonElement = HTMLElement & {
5
- /** Type, `tertiary` by default */
6
- type: TSinchIconButtonType;
7
- /** Size, `m` by default */
8
- size: TSinchSizeEx;
9
- /** Disabled */
10
- disabled: boolean;
11
- readonly tooltipRect: TRect;
12
- /** Click event */
13
- addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
14
- /** Focus event */
15
- addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
16
- /** Blur event */
17
- addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
18
- /** Type, `tertiary` by default */
19
- setAttribute(name: 'type', value: string): void;
20
- /** Size, `m` by default */
21
- setAttribute(name: 'size', value: string): void;
22
- /** Disabled */
23
- setAttribute(name: 'disabled', value: ''): void;
24
- };
25
- export type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
26
- /** Type, `tertiary` by default */
27
- type?: TSinchIconButtonType;
28
- /** Size, `m` by default */
29
- size?: TSinchSizeEx;
30
- /** Disabled */
31
- disabled?: boolean;
32
- /** Label that is used for a11y */
33
- 'aria-label': string;
34
- /** Click event handler */
35
- 'on-click'?: (e: CustomEvent<void>) => void;
36
- /** Focus event handler */
37
- 'on-focus'?: (e: CustomEvent<void>) => void;
38
- /** Blur event handler */
39
- 'on-blur'?: (e: CustomEvent<void>) => void;
40
- /** Tooltip Show Event */
41
- 'on-tooltip-show'?: (e: CustomEvent<void>) => void;
42
- /** Tooltip Hide Event */
43
- 'on-tooltip-hide'?: (e: CustomEvent<void>) => void;
44
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,2 +0,0 @@
1
- import type { TSinchIconButtonType } from './types';
2
- export declare const typeValues: readonly TSinchIconButtonType[];
@@ -1 +0,0 @@
1
- export const typeValues = ['primary', 'secondary', 'tertiary'];
@@ -1,15 +0,0 @@
1
- import '../icon';
2
- import '../rich-text';
3
- import '../text';
4
- import '../title';
5
- import type { TSinchInlineAlertElement, TSinchInlineAlertReact } from './types';
6
- declare global {
7
- namespace JSX {
8
- interface IntrinsicElements {
9
- 'sinch-inline-alert': TSinchInlineAlertReact;
10
- }
11
- }
12
- interface HTMLElementTagNameMap {
13
- 'sinch-inline-alert': TSinchInlineAlertElement;
14
- }
15
- }
@@ -1,83 +0,0 @@
1
- import '../icon';
2
- import '../rich-text';
3
- import '../text';
4
- import '../title';
5
- import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
6
- const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
7
- import { typeValues } from './utils';
8
- const template = document.createElement('template');
9
- template.innerHTML = templateHTML;
10
- defineCustomElement('sinch-inline-alert', class extends NectaryElement {
11
- #$text;
12
- #$caption;
13
- #$closeWrapper;
14
- #$closeSlot;
15
- #$actionWrapper;
16
- #$actionSlot;
17
- constructor() {
18
- super();
19
- const shadowRoot = this.attachShadow();
20
- shadowRoot.appendChild(template.content.cloneNode(true));
21
- this.#$text = shadowRoot.querySelector('#text');
22
- this.#$caption = shadowRoot.querySelector('#caption');
23
- this.#$closeWrapper = shadowRoot.querySelector('#close');
24
- this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
25
- this.#$actionWrapper = shadowRoot.querySelector('#action');
26
- this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
27
- }
28
- connectedCallback() {
29
- super.connectedCallback();
30
- this.setAttribute('aria-atomic', 'true');
31
- this.setAttribute('aria-live', 'polite');
32
- this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
33
- this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
34
- this.#onCloseSlotChange();
35
- this.#onActionSlotChange();
36
- }
37
- disconnectedCallback() {
38
- super.disconnectedCallback();
39
- this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
40
- this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
41
- }
42
- static get observedAttributes() {
43
- return ['text', 'caption'];
44
- }
45
- attributeChangedCallback(name, _, newVal) {
46
- switch (name) {
47
- case 'text':
48
- {
49
- updateAttribute(this.#$text, 'text', newVal);
50
- break;
51
- }
52
- case 'caption':
53
- {
54
- updateAttribute(this.#$caption, 'text', newVal);
55
- break;
56
- }
57
- }
58
- }
59
- get type() {
60
- return getLiteralAttribute(this, typeValues, 'type');
61
- }
62
- set type(value) {
63
- updateLiteralAttribute(this, typeValues, 'type', value);
64
- }
65
- get text() {
66
- return getAttribute(this, 'text', '');
67
- }
68
- set text(value) {
69
- updateAttribute(this, 'text', value);
70
- }
71
- get caption() {
72
- return getAttribute(this, 'caption', '');
73
- }
74
- set caption(value) {
75
- updateAttribute(this, 'caption', value);
76
- }
77
- #onCloseSlotChange = () => {
78
- setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
79
- };
80
- #onActionSlotChange = () => {
81
- setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
82
- };
83
- });
@@ -1,15 +0,0 @@
1
- import type { TSinchElementReact } from '../types';
2
- export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
3
- export type TSinchInlineAlertElement = HTMLElement & {
4
- type: TSinchInlineAlertType;
5
- text: string | null;
6
- caption: string;
7
- setAttribute(name: 'type', value: TSinchInlineAlertType): void;
8
- setAttribute(name: 'text', value: string): void;
9
- setAttribute(name: 'caption', value: string): void;
10
- };
11
- export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
12
- type: TSinchInlineAlertType;
13
- text?: string;
14
- caption: string;
15
- };
@@ -1 +0,0 @@
1
- export {};
@@ -1,2 +0,0 @@
1
- import type { TSinchInlineAlertType } from './types';
2
- export declare const typeValues: readonly TSinchInlineAlertType[];
@@ -1 +0,0 @@
1
- export const typeValues = ['info', 'success', 'warn', 'error'];
package/input/index.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import type { TSinchInputElement, TSinchInputReact } from './types';
2
- declare global {
3
- namespace JSX {
4
- interface IntrinsicElements {
5
- 'sinch-input': TSinchInputReact;
6
- }
7
- }
8
- interface HTMLElementTagNameMap {
9
- 'sinch-input': TSinchInputElement;
10
- }
11
- }