aeico-components 0.1.6 → 0.1.8

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 (380) hide show
  1. package/README.md +0 -0
  2. package/dist/alert.cjs +637 -4
  3. package/dist/alert.cjs.map +7 -1
  4. package/dist/alert.js +575 -3
  5. package/dist/alert.js.map +7 -1
  6. package/dist/badge.cjs +573 -4
  7. package/dist/badge.cjs.map +7 -1
  8. package/dist/badge.js +510 -3
  9. package/dist/badge.js.map +7 -1
  10. package/dist/breadcrumb.cjs +709 -5
  11. package/dist/breadcrumb.cjs.map +7 -1
  12. package/dist/breadcrumb.js +644 -4
  13. package/dist/breadcrumb.js.map +7 -1
  14. package/dist/button-group.cjs +546 -4
  15. package/dist/button-group.cjs.map +7 -1
  16. package/dist/button-group.js +489 -3
  17. package/dist/button-group.js.map +7 -1
  18. package/dist/button.cjs +834 -4
  19. package/dist/button.cjs.map +7 -1
  20. package/dist/button.js +771 -3
  21. package/dist/button.js.map +7 -1
  22. package/dist/card.cjs +574 -4
  23. package/dist/card.cjs.map +7 -1
  24. package/dist/card.js +516 -3
  25. package/dist/card.js.map +7 -1
  26. package/dist/checkbox.cjs +867 -4
  27. package/dist/checkbox.cjs.map +7 -1
  28. package/dist/checkbox.js +794 -3
  29. package/dist/checkbox.js.map +7 -1
  30. package/dist/copy-button.cjs +1046 -4
  31. package/dist/copy-button.cjs.map +7 -1
  32. package/dist/copy-button.js +969 -3
  33. package/dist/copy-button.js.map +7 -1
  34. package/dist/detail-group.cjs +533 -0
  35. package/dist/detail-group.cjs.map +7 -0
  36. package/dist/detail-group.js +477 -0
  37. package/dist/detail-group.js.map +7 -0
  38. package/dist/detail.cjs +627 -4
  39. package/dist/detail.cjs.map +7 -1
  40. package/dist/detail.js +569 -3
  41. package/dist/detail.js.map +7 -1
  42. package/dist/dialog.cjs +738 -4
  43. package/dist/dialog.cjs.map +7 -1
  44. package/dist/dialog.js +665 -3
  45. package/dist/dialog.js.map +7 -1
  46. package/dist/divider.cjs +558 -4
  47. package/dist/divider.cjs.map +7 -1
  48. package/dist/divider.js +502 -3
  49. package/dist/divider.js.map +7 -1
  50. package/dist/drawer.cjs +818 -4
  51. package/dist/drawer.cjs.map +7 -1
  52. package/dist/drawer.js +749 -3
  53. package/dist/drawer.js.map +7 -1
  54. package/dist/dropdown.cjs +1396 -5
  55. package/dist/dropdown.cjs.map +7 -1
  56. package/dist/dropdown.js +1316 -4
  57. package/dist/dropdown.js.map +7 -1
  58. package/dist/icon-button.cjs +999 -4
  59. package/dist/icon-button.cjs.map +7 -1
  60. package/dist/icon-button.js +930 -3
  61. package/dist/icon-button.js.map +7 -1
  62. package/dist/icon.cjs +613 -4
  63. package/dist/icon.cjs.map +7 -1
  64. package/dist/icon.js +547 -3
  65. package/dist/icon.js.map +7 -1
  66. package/dist/index.cjs +6484 -188
  67. package/dist/index.cjs.map +7 -1
  68. package/dist/index.js +6095 -147
  69. package/dist/index.js.map +7 -1
  70. package/dist/menu.cjs +841 -4
  71. package/dist/menu.cjs.map +7 -1
  72. package/dist/menu.js +785 -3
  73. package/dist/menu.js.map +7 -1
  74. package/dist/navbar.cjs +622 -4
  75. package/dist/navbar.cjs.map +7 -1
  76. package/dist/navbar.js +564 -3
  77. package/dist/navbar.js.map +7 -1
  78. package/dist/number-input.cjs +887 -0
  79. package/dist/number-input.cjs.map +7 -0
  80. package/dist/number-input.js +820 -0
  81. package/dist/number-input.js.map +7 -0
  82. package/dist/pagination.cjs +1099 -4
  83. package/dist/pagination.cjs.map +7 -1
  84. package/dist/pagination.js +1029 -3
  85. package/dist/pagination.js.map +7 -1
  86. package/dist/progress-bar.cjs +581 -4
  87. package/dist/progress-bar.cjs.map +7 -1
  88. package/dist/progress-bar.js +525 -3
  89. package/dist/progress-bar.js.map +7 -1
  90. package/dist/radio-group.cjs +973 -5
  91. package/dist/radio-group.cjs.map +7 -1
  92. package/dist/radio-group.js +899 -4
  93. package/dist/radio-group.js.map +7 -1
  94. package/dist/select.cjs +1242 -45
  95. package/dist/select.cjs.map +7 -1
  96. package/dist/select.js +1159 -44
  97. package/dist/select.js.map +7 -1
  98. package/dist/slider.cjs +1420 -4
  99. package/dist/slider.cjs.map +7 -1
  100. package/dist/slider.js +1351 -3
  101. package/dist/slider.js.map +7 -1
  102. package/dist/spinner.cjs +587 -4
  103. package/dist/spinner.cjs.map +7 -1
  104. package/dist/spinner.js +528 -3
  105. package/dist/spinner.js.map +7 -1
  106. package/dist/styles/layout.cjs +1 -0
  107. package/dist/styles/layout.js +1 -0
  108. package/dist/styles/radius.cjs +1 -0
  109. package/dist/styles/radius.js +1 -0
  110. package/dist/styles/variables.cjs +1 -0
  111. package/dist/styles/variables.js +1 -0
  112. package/dist/switch.cjs +1092 -4
  113. package/dist/switch.cjs.map +7 -1
  114. package/dist/switch.js +1013 -3
  115. package/dist/switch.js.map +7 -1
  116. package/dist/tabs.cjs +660 -6
  117. package/dist/tabs.cjs.map +7 -1
  118. package/dist/tabs.js +591 -5
  119. package/dist/tabs.js.map +7 -1
  120. package/dist/tag.cjs +591 -3
  121. package/dist/tag.cjs.map +7 -1
  122. package/dist/tag.js +532 -2
  123. package/dist/tag.js.map +7 -1
  124. package/dist/text-input.cjs +829 -4
  125. package/dist/text-input.cjs.map +7 -1
  126. package/dist/text-input.js +761 -3
  127. package/dist/text-input.js.map +7 -1
  128. package/dist/textarea.cjs +914 -3
  129. package/dist/textarea.cjs.map +7 -1
  130. package/dist/textarea.js +854 -2
  131. package/dist/textarea.js.map +7 -1
  132. package/dist/tooltip.cjs +764 -4
  133. package/dist/tooltip.cjs.map +7 -1
  134. package/dist/tooltip.js +711 -3
  135. package/dist/tooltip.js.map +7 -1
  136. package/dist/tree.cjs +1059 -4
  137. package/dist/tree.cjs.map +7 -1
  138. package/dist/tree.js +985 -3
  139. package/dist/tree.js.map +7 -1
  140. package/dist/types/card/defines.d.ts +1 -1
  141. package/dist/types/detail/defines.d.ts +1 -1
  142. package/dist/types/dialog/dialog.d.ts +1 -0
  143. package/dist/types/drawer/drawer.d.ts +2 -0
  144. package/dist/types/icon/defines.d.ts +7 -1
  145. package/dist/types/icon/index.d.ts +1 -1
  146. package/dist/types/menu/defines.d.ts +1 -0
  147. package/dist/types/menu/menu-item.d.ts +1 -0
  148. package/dist/types/menu/menu.d.ts +1 -0
  149. package/dist/types/styles/layout.d.ts +2 -0
  150. package/dist/types/styles/radius.d.ts +2 -0
  151. package/dist/types/styles/variables.d.ts +2 -0
  152. package/dist/types/tabs/defines.d.ts +1 -0
  153. package/dist/types/tabs/tabs.d.ts +3 -0
  154. package/package.json +31 -7
  155. package/src/alert/alert.ts +3 -3
  156. package/src/badge/badge.ts +4 -4
  157. package/src/breadcrumb/breadcrumb-item.ts +2 -2
  158. package/src/breadcrumb/breadcrumb.ts +3 -3
  159. package/src/button/button.ts +4 -4
  160. package/src/button-group/button-group.ts +8 -9
  161. package/src/card/card.ts +3 -3
  162. package/src/card/defines.ts +1 -1
  163. package/src/checkbox/checkbox.ts +6 -6
  164. package/src/copy-button/copy-button.ts +13 -9
  165. package/src/detail/defines.ts +1 -1
  166. package/src/detail/detail.ts +3 -3
  167. package/src/detail-group/detail-group.ts +2 -2
  168. package/src/dialog/dialog.ts +15 -14
  169. package/src/divider/divider.ts +3 -3
  170. package/src/drawer/drawer.ts +28 -11
  171. package/src/dropdown/dropdown-item.ts +2 -2
  172. package/src/dropdown/dropdown.ts +2 -2
  173. package/src/icon/defines.ts +8 -1
  174. package/src/icon/icon.ts +32 -14
  175. package/src/icon/index.ts +1 -1
  176. package/src/icon/registry.ts +2 -2
  177. package/src/menu/defines.ts +1 -0
  178. package/src/menu/menu-item.ts +14 -4
  179. package/src/menu/menu.ts +5 -2
  180. package/src/navbar/navbar.ts +3 -3
  181. package/src/number-input/number-input.ts +5 -5
  182. package/src/pagination/pagination.ts +3 -3
  183. package/src/progress-bar/progress-bar.ts +3 -3
  184. package/src/radio-group/radio-group.ts +12 -8
  185. package/src/select/select-option.ts +2 -2
  186. package/src/select/select.ts +5 -5
  187. package/src/slider/slider.ts +6 -6
  188. package/src/spinner/spinner.ts +4 -4
  189. package/src/styles/color.css +91 -91
  190. package/src/styles/components/action-button.css +12 -12
  191. package/src/styles/components/alert.css +22 -28
  192. package/src/styles/components/badge.css +13 -20
  193. package/src/styles/components/breadcrumb-item.css +7 -7
  194. package/src/styles/components/button-group.css +2 -0
  195. package/src/styles/components/button.css +39 -50
  196. package/src/styles/components/card.css +69 -30
  197. package/src/styles/components/checkbox.css +22 -16
  198. package/src/styles/components/copy-button.css +22 -33
  199. package/src/styles/components/detail.css +51 -39
  200. package/src/styles/components/dialog.css +11 -11
  201. package/src/styles/components/divider.css +3 -3
  202. package/src/styles/components/drawer.css +59 -27
  203. package/src/styles/components/dropdown-item.css +7 -8
  204. package/src/styles/components/dropdown.css +3 -4
  205. package/src/styles/components/field-label.css +13 -13
  206. package/src/styles/components/icon-button.css +25 -36
  207. package/src/styles/components/icon.css +1 -1
  208. package/src/styles/components/menu-item.css +13 -8
  209. package/src/styles/components/navbar.css +23 -44
  210. package/src/styles/components/number-input.css +27 -36
  211. package/src/styles/components/pagination.css +31 -31
  212. package/src/styles/components/progress-bar.css +2 -3
  213. package/src/styles/components/radio-group.css +88 -83
  214. package/src/styles/components/select-option.css +5 -5
  215. package/src/styles/components/select.css +21 -33
  216. package/src/styles/components/slider.css +56 -34
  217. package/src/styles/components/spinner.css +7 -9
  218. package/src/styles/components/switch.css +21 -19
  219. package/src/styles/components/tab.css +4 -5
  220. package/src/styles/components/tabs.css +48 -1
  221. package/src/styles/components/tag.css +14 -21
  222. package/src/styles/components/text-input.css +13 -22
  223. package/src/styles/components/textarea.css +12 -21
  224. package/src/styles/components/tooltip.css +4 -5
  225. package/src/styles/components/tree-item.css +12 -12
  226. package/src/styles/layout.css +5 -2
  227. package/src/styles/radius.css +25 -0
  228. package/src/styles/size.css +7 -7
  229. package/src/styles/variables.css +271 -247
  230. package/src/switch/switch.ts +6 -6
  231. package/src/tabs/defines.ts +1 -0
  232. package/src/tabs/tab-panel.ts +1 -1
  233. package/src/tabs/tab.ts +1 -1
  234. package/src/tabs/tabs.ts +14 -2
  235. package/src/tag/tag.ts +4 -4
  236. package/src/text-input/text-input.ts +5 -5
  237. package/src/textarea/textarea.ts +5 -5
  238. package/src/tooltip/tooltip.ts +2 -2
  239. package/src/tree/tree-item.ts +2 -2
  240. package/src/tree/tree.ts +2 -2
  241. package/dist/chunks/action-button.cjs +0 -296
  242. package/dist/chunks/action-button.cjs.map +0 -1
  243. package/dist/chunks/action-button.js +0 -297
  244. package/dist/chunks/action-button.js.map +0 -1
  245. package/dist/chunks/aeico-component.cjs +0 -17
  246. package/dist/chunks/aeico-component.cjs.map +0 -1
  247. package/dist/chunks/aeico-component.js +0 -18
  248. package/dist/chunks/aeico-component.js.map +0 -1
  249. package/dist/chunks/alert.cjs +0 -170
  250. package/dist/chunks/alert.cjs.map +0 -1
  251. package/dist/chunks/alert.js +0 -171
  252. package/dist/chunks/alert.js.map +0 -1
  253. package/dist/chunks/badge.cjs +0 -85
  254. package/dist/chunks/badge.cjs.map +0 -1
  255. package/dist/chunks/badge.js +0 -86
  256. package/dist/chunks/badge.js.map +0 -1
  257. package/dist/chunks/breadcrumb-item.cjs +0 -261
  258. package/dist/chunks/breadcrumb-item.cjs.map +0 -1
  259. package/dist/chunks/breadcrumb-item.js +0 -262
  260. package/dist/chunks/breadcrumb-item.js.map +0 -1
  261. package/dist/chunks/button-group.cjs +0 -79
  262. package/dist/chunks/button-group.cjs.map +0 -1
  263. package/dist/chunks/button-group.js +0 -80
  264. package/dist/chunks/button-group.js.map +0 -1
  265. package/dist/chunks/button.cjs +0 -348
  266. package/dist/chunks/button.cjs.map +0 -1
  267. package/dist/chunks/button.js +0 -349
  268. package/dist/chunks/button.js.map +0 -1
  269. package/dist/chunks/card.cjs +0 -93
  270. package/dist/chunks/card.cjs.map +0 -1
  271. package/dist/chunks/card.js +0 -94
  272. package/dist/chunks/card.js.map +0 -1
  273. package/dist/chunks/checkbox.cjs +0 -86
  274. package/dist/chunks/checkbox.cjs.map +0 -1
  275. package/dist/chunks/checkbox.js +0 -87
  276. package/dist/chunks/checkbox.js.map +0 -1
  277. package/dist/chunks/color.cjs +0 -4
  278. package/dist/chunks/color.cjs.map +0 -1
  279. package/dist/chunks/color.js +0 -5
  280. package/dist/chunks/color.js.map +0 -1
  281. package/dist/chunks/copy-button.cjs +0 -168
  282. package/dist/chunks/copy-button.cjs.map +0 -1
  283. package/dist/chunks/copy-button.js +0 -169
  284. package/dist/chunks/copy-button.js.map +0 -1
  285. package/dist/chunks/detail.cjs +0 -146
  286. package/dist/chunks/detail.cjs.map +0 -1
  287. package/dist/chunks/detail.js +0 -147
  288. package/dist/chunks/detail.js.map +0 -1
  289. package/dist/chunks/dialog.cjs +0 -117
  290. package/dist/chunks/dialog.cjs.map +0 -1
  291. package/dist/chunks/dialog.js +0 -118
  292. package/dist/chunks/dialog.js.map +0 -1
  293. package/dist/chunks/divider.cjs +0 -80
  294. package/dist/chunks/divider.cjs.map +0 -1
  295. package/dist/chunks/divider.js +0 -81
  296. package/dist/chunks/divider.js.map +0 -1
  297. package/dist/chunks/drawer.cjs +0 -180
  298. package/dist/chunks/drawer.cjs.map +0 -1
  299. package/dist/chunks/drawer.js +0 -181
  300. package/dist/chunks/drawer.js.map +0 -1
  301. package/dist/chunks/dropdown-button.cjs +0 -534
  302. package/dist/chunks/dropdown-button.cjs.map +0 -1
  303. package/dist/chunks/dropdown-button.js +0 -535
  304. package/dist/chunks/dropdown-button.js.map +0 -1
  305. package/dist/chunks/icon-button.cjs +0 -35
  306. package/dist/chunks/icon-button.cjs.map +0 -1
  307. package/dist/chunks/icon-button.js +0 -36
  308. package/dist/chunks/icon-button.js.map +0 -1
  309. package/dist/chunks/icon.cjs +0 -108
  310. package/dist/chunks/icon.cjs.map +0 -1
  311. package/dist/chunks/icon.js +0 -109
  312. package/dist/chunks/icon.js.map +0 -1
  313. package/dist/chunks/menu.cjs +0 -396
  314. package/dist/chunks/menu.cjs.map +0 -1
  315. package/dist/chunks/menu.js +0 -397
  316. package/dist/chunks/menu.js.map +0 -1
  317. package/dist/chunks/navbar.cjs +0 -142
  318. package/dist/chunks/navbar.cjs.map +0 -1
  319. package/dist/chunks/navbar.js +0 -143
  320. package/dist/chunks/navbar.js.map +0 -1
  321. package/dist/chunks/pagination.cjs +0 -475
  322. package/dist/chunks/pagination.cjs.map +0 -1
  323. package/dist/chunks/pagination.js +0 -476
  324. package/dist/chunks/pagination.js.map +0 -1
  325. package/dist/chunks/progress-bar.cjs +0 -101
  326. package/dist/chunks/progress-bar.cjs.map +0 -1
  327. package/dist/chunks/progress-bar.js +0 -102
  328. package/dist/chunks/progress-bar.js.map +0 -1
  329. package/dist/chunks/radio.cjs +0 -185
  330. package/dist/chunks/radio.cjs.map +0 -1
  331. package/dist/chunks/radio.js +0 -186
  332. package/dist/chunks/radio.js.map +0 -1
  333. package/dist/chunks/select.cjs +0 -381
  334. package/dist/chunks/select.cjs.map +0 -1
  335. package/dist/chunks/select.js +0 -382
  336. package/dist/chunks/select.js.map +0 -1
  337. package/dist/chunks/size.cjs +0 -4
  338. package/dist/chunks/size.cjs.map +0 -1
  339. package/dist/chunks/size.js +0 -5
  340. package/dist/chunks/size.js.map +0 -1
  341. package/dist/chunks/slider.cjs +0 -611
  342. package/dist/chunks/slider.cjs.map +0 -1
  343. package/dist/chunks/slider.js +0 -612
  344. package/dist/chunks/slider.js.map +0 -1
  345. package/dist/chunks/spinner.cjs +0 -102
  346. package/dist/chunks/spinner.cjs.map +0 -1
  347. package/dist/chunks/spinner.js +0 -103
  348. package/dist/chunks/spinner.js.map +0 -1
  349. package/dist/chunks/switch.cjs +0 -167
  350. package/dist/chunks/switch.cjs.map +0 -1
  351. package/dist/chunks/switch.js +0 -168
  352. package/dist/chunks/switch.js.map +0 -1
  353. package/dist/chunks/tab-panel.cjs +0 -165
  354. package/dist/chunks/tab-panel.cjs.map +0 -1
  355. package/dist/chunks/tab-panel.js +0 -166
  356. package/dist/chunks/tab-panel.js.map +0 -1
  357. package/dist/chunks/tag.cjs +0 -108
  358. package/dist/chunks/tag.cjs.map +0 -1
  359. package/dist/chunks/tag.js +0 -109
  360. package/dist/chunks/tag.js.map +0 -1
  361. package/dist/chunks/text-input.cjs +0 -54
  362. package/dist/chunks/text-input.cjs.map +0 -1
  363. package/dist/chunks/text-input.js +0 -55
  364. package/dist/chunks/text-input.js.map +0 -1
  365. package/dist/chunks/textarea.cjs +0 -137
  366. package/dist/chunks/textarea.cjs.map +0 -1
  367. package/dist/chunks/textarea.js +0 -138
  368. package/dist/chunks/textarea.js.map +0 -1
  369. package/dist/chunks/tooltip.cjs +0 -293
  370. package/dist/chunks/tooltip.cjs.map +0 -1
  371. package/dist/chunks/tooltip.js +0 -294
  372. package/dist/chunks/tooltip.js.map +0 -1
  373. package/dist/chunks/tree.cjs +0 -468
  374. package/dist/chunks/tree.cjs.map +0 -1
  375. package/dist/chunks/tree.js +0 -469
  376. package/dist/chunks/tree.js.map +0 -1
  377. package/dist/chunks/variables.cjs +0 -372
  378. package/dist/chunks/variables.cjs.map +0 -1
  379. package/dist/chunks/variables.js +0 -373
  380. package/dist/chunks/variables.js.map +0 -1
@@ -1,165 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- const variables = require("./variables.cjs");
6
- const aeicoComponent = require("./aeico-component.cjs");
7
- const aeico = require("aeico");
8
- const tabsStyle = ':host {\n display: flex;\n flex-direction: column;\n gap: var(--ae-tabs-gap, 0);\n overflow: hidden;\n}\n\n[part="tab-nav"] {\n display: flex;\n flex-shrink: 0;\n border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n flex: 1;\n overflow: auto;\n}\n';
9
- class Tabs extends aeicoComponent.AeicoComponent {
10
- constructor() {
11
- super(...arguments);
12
- __publicField(this, "_observer", null);
13
- __publicField(this, "_handleTabClick", (e) => {
14
- const pairs = this._getPairs();
15
- const target = e.target;
16
- const index = pairs.findIndex(([tab]) => tab === target);
17
- if (index !== -1) this.selectTab(index);
18
- });
19
- }
20
- get _tabs() {
21
- return [...this.children].filter(
22
- (el) => el.tagName.toLowerCase() === "ae-tab"
23
- );
24
- }
25
- get _panels() {
26
- return [...this.children].filter(
27
- (el) => el.tagName.toLowerCase() === "ae-tab-panel"
28
- );
29
- }
30
- _getPairs() {
31
- const tabs = this._tabs;
32
- const panels = this._panels;
33
- const idMap = /* @__PURE__ */ new Map();
34
- for (const panel of panels) {
35
- const id = panel.id;
36
- if (id) idMap.set(id, panel);
37
- }
38
- const usedPanels = /* @__PURE__ */ new Set();
39
- const pairs = [];
40
- for (const tab of tabs) {
41
- const panelId = tab.panel;
42
- if (panelId) {
43
- const panel = idMap.get(panelId) ?? null;
44
- if (panel) usedPanels.add(panel);
45
- pairs.push([tab, panel]);
46
- }
47
- }
48
- const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));
49
- let posIndex = 0;
50
- for (const tab of tabs) {
51
- if (!tab.panel) {
52
- pairs.push([tab, unmatchedPanels[posIndex] ?? null]);
53
- posIndex++;
54
- }
55
- }
56
- return pairs;
57
- }
58
- connectedCallback() {
59
- super.connectedCallback();
60
- this._observer = new MutationObserver(() => this.update());
61
- this._observer.observe(this, { childList: true });
62
- }
63
- disconnectedCallback() {
64
- var _a;
65
- super.disconnectedCallback();
66
- (_a = this._observer) == null ? void 0 : _a.disconnect();
67
- this._observer = null;
68
- }
69
- onUpdated() {
70
- this._syncActive();
71
- }
72
- _syncActive() {
73
- const activeIndex = this.activeIndex ?? 0;
74
- const pairs = this._getPairs();
75
- pairs.forEach(([tab, panel], i) => {
76
- const isActive = i === activeIndex;
77
- if (isActive) {
78
- tab.setAttribute("active", "");
79
- panel == null ? void 0 : panel.setAttribute("active", "");
80
- } else {
81
- tab.removeAttribute("active");
82
- panel == null ? void 0 : panel.removeAttribute("active");
83
- }
84
- });
85
- }
86
- selectTab(index) {
87
- const pairs = this._getPairs();
88
- if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
89
- this.activeIndex = index;
90
- this.emit("change", { detail: { index } });
91
- }
92
- render() {
93
- return aeico.html(({ nav, div, slot }) => {
94
- nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
95
- slot({ name: "tab" });
96
- });
97
- div({ part: "panels" }, () => {
98
- slot();
99
- });
100
- });
101
- }
102
- }
103
- __publicField(Tabs, "props", {
104
- activeIndex: { type: Number }
105
- });
106
- __publicField(Tabs, "styles", [variables.variables, tabsStyle]);
107
- Tabs.register();
108
- const tabStyle = ":host {\n display: inline-flex;\n cursor: pointer;\n margin-bottom: -1px;\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n color: var(--ae-tab-color, #909090);\n font-size: var(--ae-tab-font-size, inherit);\n transition: color 0.15s, border-color 0.15s;\n outline: none;\n white-space: nowrap;\n user-select: none;\n}\n\nbutton:hover {\n color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n:host([active]) button {\n color: var(--ae-tab-active-color, var(--color-primary));\n border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n";
109
- class Tab extends aeicoComponent.AeicoComponent {
110
- constructor() {
111
- super(...arguments);
112
- __publicField(this, "_handleClick", () => {
113
- if (this.disabled) return;
114
- this.dispatchEvent(
115
- new CustomEvent("_tab-click", {
116
- bubbles: true,
117
- composed: true
118
- })
119
- );
120
- });
121
- }
122
- connectedCallback() {
123
- this.setAttribute("slot", "tab");
124
- super.connectedCallback();
125
- }
126
- render() {
127
- return aeico.html(({ button, slot }) => {
128
- button(
129
- {
130
- part: "tab",
131
- type: "button",
132
- role: "tab",
133
- "aria-selected": this.active,
134
- "aria-disabled": this.disabled,
135
- disabled: this.disabled,
136
- "@click": this._handleClick
137
- },
138
- () => {
139
- slot();
140
- }
141
- );
142
- });
143
- }
144
- }
145
- __publicField(Tab, "props", {
146
- active: { type: Boolean },
147
- disabled: { type: Boolean },
148
- panel: { type: String }
149
- });
150
- __publicField(Tab, "styles", [tabStyle]);
151
- Tab.register();
152
- const tabPanelStyle = ":host {\n display: none;\n padding: var(--ae-tab-panel-padding, 16px 0);\n}\n\n:host([active]) {\n display: block;\n}\n";
153
- class TabPanel extends aeicoComponent.AeicoComponent {
154
- render() {
155
- return aeico.html(({ slot }) => {
156
- slot();
157
- });
158
- }
159
- }
160
- __publicField(TabPanel, "styles", [tabPanelStyle]);
161
- TabPanel.register();
162
- exports.Tab = Tab;
163
- exports.TabPanel = TabPanel;
164
- exports.Tabs = Tabs;
165
- //# sourceMappingURL=tab-panel.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tab-panel.cjs","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n static props: Props = {\n activeIndex: { type: Number },\n };\n\n declare activeIndex?: number;\n\n protected static styles = [styleVariables, tabsStyle];\n\n private _observer: MutationObserver | null = null;\n\n private get _tabs(): Tab[] {\n return [...this.children].filter(\n (el) => el.tagName.toLowerCase() === 'ae-tab',\n ) as unknown as Tab[];\n }\n\n private get _panels(): HTMLElement[] {\n return [...this.children].filter(\n (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n ) as HTMLElement[];\n }\n\n private _getPairs(): [Tab, HTMLElement | null][] {\n const tabs = this._tabs;\n const panels = this._panels;\n\n const idMap = new Map<string, HTMLElement>();\n for (const panel of panels) {\n const id = panel.id;\n if (id) idMap.set(id, panel);\n }\n\n const usedPanels = new Set<HTMLElement>();\n const pairs: [Tab, HTMLElement | null][] = [];\n\n // First pass: ID-matched tabs\n for (const tab of tabs) {\n const panelId = tab.panel;\n if (panelId) {\n const panel = idMap.get(panelId) ?? null;\n if (panel) usedPanels.add(panel);\n pairs.push([tab, panel]);\n }\n }\n\n // Second pass: position-matched tabs (no panel attr)\n const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n let posIndex = 0;\n for (const tab of tabs) {\n if (!tab.panel) {\n pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n posIndex++;\n }\n }\n\n return pairs;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._observer = new MutationObserver(() => this.update());\n this._observer.observe(this, { childList: true });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._observer?.disconnect();\n this._observer = null;\n }\n\n protected onUpdated() {\n this._syncActive();\n }\n\n private _handleTabClick = (e: Event) => {\n const pairs = this._getPairs();\n const target = e.target as Element;\n const index = pairs.findIndex(([tab]) => tab === target);\n if (index !== -1) this.selectTab(index);\n };\n\n private _syncActive() {\n const activeIndex = this.activeIndex ?? 0;\n const pairs = this._getPairs();\n\n pairs.forEach(([tab, panel], i) => {\n const isActive = i === activeIndex;\n if (isActive) {\n tab.setAttribute('active', '');\n panel?.setAttribute('active', '');\n } else {\n tab.removeAttribute('active');\n panel?.removeAttribute('active');\n }\n });\n }\n\n selectTab(index: number): void {\n const pairs = this._getPairs();\n if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n this.activeIndex = index;\n this.emit('change', { detail: { index } });\n }\n\n protected render() {\n return html(({ nav, div, slot }) => {\n nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n slot({ name: 'tab' });\n });\n div({ part: 'panels' }, () => {\n slot();\n });\n });\n }\n}\n\nTabs.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tabs': Tabs;\n }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n static props: Props = {\n active: { type: Boolean },\n disabled: { type: Boolean },\n panel: { type: String },\n };\n\n declare active?: boolean;\n declare disabled?: boolean;\n declare panel?: string;\n\n protected static styles = [tabStyle];\n\n connectedCallback() {\n this.setAttribute('slot', 'tab');\n super.connectedCallback();\n }\n\n private _handleClick = () => {\n if (this.disabled) return;\n this.dispatchEvent(\n new CustomEvent('_tab-click', {\n bubbles: true,\n composed: true,\n }),\n );\n };\n\n protected render() {\n return html(({ button, slot }) => {\n button(\n {\n part: 'tab',\n type: 'button',\n role: 'tab',\n 'aria-selected': this.active,\n 'aria-disabled': this.disabled,\n disabled: this.disabled,\n '@click': this._handleClick,\n },\n () => {\n slot();\n },\n );\n });\n }\n}\n\nTab.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tab': Tab;\n }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n protected static styles = [tabPanelStyle];\n\n protected render() {\n return html(({ slot }) => {\n slot();\n });\n }\n}\n\nTabPanel.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tab-panel': TabPanel;\n }\n}\n\nexport default TabPanel;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}
@@ -1,166 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- import { v as variables } from "./variables.js";
5
- import { A as AeicoComponent } from "./aeico-component.js";
6
- import { html } from "aeico";
7
- const tabsStyle = ':host {\n display: flex;\n flex-direction: column;\n gap: var(--ae-tabs-gap, 0);\n overflow: hidden;\n}\n\n[part="tab-nav"] {\n display: flex;\n flex-shrink: 0;\n border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n flex: 1;\n overflow: auto;\n}\n';
8
- class Tabs extends AeicoComponent {
9
- constructor() {
10
- super(...arguments);
11
- __publicField(this, "_observer", null);
12
- __publicField(this, "_handleTabClick", (e) => {
13
- const pairs = this._getPairs();
14
- const target = e.target;
15
- const index = pairs.findIndex(([tab]) => tab === target);
16
- if (index !== -1) this.selectTab(index);
17
- });
18
- }
19
- get _tabs() {
20
- return [...this.children].filter(
21
- (el) => el.tagName.toLowerCase() === "ae-tab"
22
- );
23
- }
24
- get _panels() {
25
- return [...this.children].filter(
26
- (el) => el.tagName.toLowerCase() === "ae-tab-panel"
27
- );
28
- }
29
- _getPairs() {
30
- const tabs = this._tabs;
31
- const panels = this._panels;
32
- const idMap = /* @__PURE__ */ new Map();
33
- for (const panel of panels) {
34
- const id = panel.id;
35
- if (id) idMap.set(id, panel);
36
- }
37
- const usedPanels = /* @__PURE__ */ new Set();
38
- const pairs = [];
39
- for (const tab of tabs) {
40
- const panelId = tab.panel;
41
- if (panelId) {
42
- const panel = idMap.get(panelId) ?? null;
43
- if (panel) usedPanels.add(panel);
44
- pairs.push([tab, panel]);
45
- }
46
- }
47
- const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));
48
- let posIndex = 0;
49
- for (const tab of tabs) {
50
- if (!tab.panel) {
51
- pairs.push([tab, unmatchedPanels[posIndex] ?? null]);
52
- posIndex++;
53
- }
54
- }
55
- return pairs;
56
- }
57
- connectedCallback() {
58
- super.connectedCallback();
59
- this._observer = new MutationObserver(() => this.update());
60
- this._observer.observe(this, { childList: true });
61
- }
62
- disconnectedCallback() {
63
- var _a;
64
- super.disconnectedCallback();
65
- (_a = this._observer) == null ? void 0 : _a.disconnect();
66
- this._observer = null;
67
- }
68
- onUpdated() {
69
- this._syncActive();
70
- }
71
- _syncActive() {
72
- const activeIndex = this.activeIndex ?? 0;
73
- const pairs = this._getPairs();
74
- pairs.forEach(([tab, panel], i) => {
75
- const isActive = i === activeIndex;
76
- if (isActive) {
77
- tab.setAttribute("active", "");
78
- panel == null ? void 0 : panel.setAttribute("active", "");
79
- } else {
80
- tab.removeAttribute("active");
81
- panel == null ? void 0 : panel.removeAttribute("active");
82
- }
83
- });
84
- }
85
- selectTab(index) {
86
- const pairs = this._getPairs();
87
- if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
88
- this.activeIndex = index;
89
- this.emit("change", { detail: { index } });
90
- }
91
- render() {
92
- return html(({ nav, div, slot }) => {
93
- nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
94
- slot({ name: "tab" });
95
- });
96
- div({ part: "panels" }, () => {
97
- slot();
98
- });
99
- });
100
- }
101
- }
102
- __publicField(Tabs, "props", {
103
- activeIndex: { type: Number }
104
- });
105
- __publicField(Tabs, "styles", [variables, tabsStyle]);
106
- Tabs.register();
107
- const tabStyle = ":host {\n display: inline-flex;\n cursor: pointer;\n margin-bottom: -1px;\n}\n\nbutton {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n color: var(--ae-tab-color, #909090);\n font-size: var(--ae-tab-font-size, inherit);\n transition: color 0.15s, border-color 0.15s;\n outline: none;\n white-space: nowrap;\n user-select: none;\n}\n\nbutton:hover {\n color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: -2px;\n}\n\n:host([active]) button {\n color: var(--ae-tab-active-color, var(--color-primary));\n border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n";
108
- class Tab extends AeicoComponent {
109
- constructor() {
110
- super(...arguments);
111
- __publicField(this, "_handleClick", () => {
112
- if (this.disabled) return;
113
- this.dispatchEvent(
114
- new CustomEvent("_tab-click", {
115
- bubbles: true,
116
- composed: true
117
- })
118
- );
119
- });
120
- }
121
- connectedCallback() {
122
- this.setAttribute("slot", "tab");
123
- super.connectedCallback();
124
- }
125
- render() {
126
- return html(({ button, slot }) => {
127
- button(
128
- {
129
- part: "tab",
130
- type: "button",
131
- role: "tab",
132
- "aria-selected": this.active,
133
- "aria-disabled": this.disabled,
134
- disabled: this.disabled,
135
- "@click": this._handleClick
136
- },
137
- () => {
138
- slot();
139
- }
140
- );
141
- });
142
- }
143
- }
144
- __publicField(Tab, "props", {
145
- active: { type: Boolean },
146
- disabled: { type: Boolean },
147
- panel: { type: String }
148
- });
149
- __publicField(Tab, "styles", [tabStyle]);
150
- Tab.register();
151
- const tabPanelStyle = ":host {\n display: none;\n padding: var(--ae-tab-panel-padding, 16px 0);\n}\n\n:host([active]) {\n display: block;\n}\n";
152
- class TabPanel extends AeicoComponent {
153
- render() {
154
- return html(({ slot }) => {
155
- slot();
156
- });
157
- }
158
- }
159
- __publicField(TabPanel, "styles", [tabPanelStyle]);
160
- TabPanel.register();
161
- export {
162
- Tab as T,
163
- TabPanel as a,
164
- Tabs as b
165
- };
166
- //# sourceMappingURL=tab-panel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n static props: Props = {\n activeIndex: { type: Number },\n };\n\n declare activeIndex?: number;\n\n protected static styles = [styleVariables, tabsStyle];\n\n private _observer: MutationObserver | null = null;\n\n private get _tabs(): Tab[] {\n return [...this.children].filter(\n (el) => el.tagName.toLowerCase() === 'ae-tab',\n ) as unknown as Tab[];\n }\n\n private get _panels(): HTMLElement[] {\n return [...this.children].filter(\n (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n ) as HTMLElement[];\n }\n\n private _getPairs(): [Tab, HTMLElement | null][] {\n const tabs = this._tabs;\n const panels = this._panels;\n\n const idMap = new Map<string, HTMLElement>();\n for (const panel of panels) {\n const id = panel.id;\n if (id) idMap.set(id, panel);\n }\n\n const usedPanels = new Set<HTMLElement>();\n const pairs: [Tab, HTMLElement | null][] = [];\n\n // First pass: ID-matched tabs\n for (const tab of tabs) {\n const panelId = tab.panel;\n if (panelId) {\n const panel = idMap.get(panelId) ?? null;\n if (panel) usedPanels.add(panel);\n pairs.push([tab, panel]);\n }\n }\n\n // Second pass: position-matched tabs (no panel attr)\n const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n let posIndex = 0;\n for (const tab of tabs) {\n if (!tab.panel) {\n pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n posIndex++;\n }\n }\n\n return pairs;\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._observer = new MutationObserver(() => this.update());\n this._observer.observe(this, { childList: true });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._observer?.disconnect();\n this._observer = null;\n }\n\n protected onUpdated() {\n this._syncActive();\n }\n\n private _handleTabClick = (e: Event) => {\n const pairs = this._getPairs();\n const target = e.target as Element;\n const index = pairs.findIndex(([tab]) => tab === target);\n if (index !== -1) this.selectTab(index);\n };\n\n private _syncActive() {\n const activeIndex = this.activeIndex ?? 0;\n const pairs = this._getPairs();\n\n pairs.forEach(([tab, panel], i) => {\n const isActive = i === activeIndex;\n if (isActive) {\n tab.setAttribute('active', '');\n panel?.setAttribute('active', '');\n } else {\n tab.removeAttribute('active');\n panel?.removeAttribute('active');\n }\n });\n }\n\n selectTab(index: number): void {\n const pairs = this._getPairs();\n if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n this.activeIndex = index;\n this.emit('change', { detail: { index } });\n }\n\n protected render() {\n return html(({ nav, div, slot }) => {\n nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n slot({ name: 'tab' });\n });\n div({ part: 'panels' }, () => {\n slot();\n });\n });\n }\n}\n\nTabs.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tabs': Tabs;\n }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n static props: Props = {\n active: { type: Boolean },\n disabled: { type: Boolean },\n panel: { type: String },\n };\n\n declare active?: boolean;\n declare disabled?: boolean;\n declare panel?: string;\n\n protected static styles = [tabStyle];\n\n connectedCallback() {\n this.setAttribute('slot', 'tab');\n super.connectedCallback();\n }\n\n private _handleClick = () => {\n if (this.disabled) return;\n this.dispatchEvent(\n new CustomEvent('_tab-click', {\n bubbles: true,\n composed: true,\n }),\n );\n };\n\n protected render() {\n return html(({ button, slot }) => {\n button(\n {\n part: 'tab',\n type: 'button',\n role: 'tab',\n 'aria-selected': this.active,\n 'aria-disabled': this.disabled,\n disabled: this.disabled,\n '@click': this._handleClick,\n },\n () => {\n slot();\n },\n );\n });\n }\n}\n\nTab.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tab': Tab;\n }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n protected static styles = [tabPanelStyle];\n\n protected render() {\n return html(({ slot }) => {\n slot();\n });\n }\n}\n\nTabPanel.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tab-panel': TabPanel;\n }\n}\n\nexport default TabPanel;\n"],"names":["styleVariables"],"mappings":"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"}
@@ -1,108 +0,0 @@
1
- "use strict";
2
- const variables = require("./variables.cjs");
3
- const size = require("./size.cjs");
4
- const color = require("./color.cjs");
5
- const aeicoComponent = require("./aeico-component.cjs");
6
- const aeico = require("aeico");
7
- const tagStyle = ':host {\n display: inline-flex;\n align-items: center;\n --tag-solid-bg: var(--color-solid);\n --tag-solid-color: var(--color-on-solid);\n --tag-border: var(--color-border);\n --tag-accent: var(--color-accent);\n --tag-subtle-bg: var(--color-bg-subtle);\n --tag-subtle-color: var(--color-text-subtle);\n --tag-subtle-border: var(--color-border-subtle);\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-weight: 500;\n white-space: nowrap;\n vertical-align: middle;\n line-height: 1.2;\n font-size: 1em;\n padding: 0.15em 0.5em 0.15em 0.6em;\n border-radius: 4px;\n border: 1px solid var(--tag-solid-bg);\n background: var(--tag-solid-bg);\n color: var(--tag-solid-color);\n max-width: 160px;\n min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n background: transparent;\n border-color: var(--tag-border);\n color: var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n background: var(--tag-subtle-bg);\n border-color: var(--tag-subtle-border);\n color: var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n background: var(--tag-subtle-bg);\n border-color: transparent;\n color: var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n background: transparent;\n border-color: transparent;\n color: var(--tag-accent);\n padding-left: 0;\n padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0.55;\n line-height: 1;\n font-size: 1em;\n padding: 0 1px;\n border-radius: 2px;\n background: transparent;\n border: none;\n color: inherit;\n font-family: inherit;\n transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n display: inline-flex;\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n opacity: 0.4;\n pointer-events: none;\n cursor: default;\n}\n\n:host([disabled]) .tag {\n opacity: 0.6;\n}\n';
8
- var __create = Object.create;
9
- var __defProp = Object.defineProperty;
10
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
11
- var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
12
- var __typeError = (msg) => {
13
- throw TypeError(msg);
14
- };
15
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
16
- var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
17
- var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
18
- var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
19
- var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
20
- var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
21
- var __runInitializers = (array, flags, self, value) => {
22
- for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
23
- return value;
24
- };
25
- var __decorateElement = (array, flags, name, decorators, target, extra) => {
26
- var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
27
- var j = array.length + 1, key = __decoratorStrings[k + 5];
28
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
29
- var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
30
- return __privateGet(this, extra);
31
- }, set [name](x) {
32
- return __privateSet(this, extra, x);
33
- } }, name));
34
- for (var i = decorators.length - 1; i >= 0; i--) {
35
- ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
36
- {
37
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
38
- access.get = (x) => x[name];
39
- access.set = (x, y) => x[name] = y;
40
- }
41
- it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
42
- if (it === void 0) __expectFn(it) && (desc[key] = it);
43
- else if (typeof it !== "object" || it === null) __typeError("Object expected");
44
- else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
45
- }
46
- return desc && __defProp(target, name, desc), target;
47
- };
48
- var __publicField = (obj, key, value) => __defNormalProp(obj, key + "", value);
49
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
50
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
51
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
52
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
53
- var _pill_dec, _disabled_dec, _dismissible_dec, _size_dec, _variant_dec, _color_dec, _a, _init, _color, _variant, _size, _dismissible, _disabled, _pill;
54
- class Tag extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _dismissible_dec = [aeico.prop({ type: Boolean })], _disabled_dec = [aeico.prop({ type: Boolean })], _pill_dec = [aeico.prop({ type: Boolean })], _a) {
55
- constructor() {
56
- super(...arguments);
57
- __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
58
- __privateAdd(this, _variant, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
59
- __privateAdd(this, _size, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
60
- __privateAdd(this, _dismissible, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
61
- __privateAdd(this, _disabled, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
62
- __privateAdd(this, _pill, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
63
- }
64
- render() {
65
- return aeico.html(({ span, button, slot }) => {
66
- span({ part: "tag", className: "tag" }, () => {
67
- slot({ name: "start" });
68
- span({ className: "tag-content" }, () => {
69
- slot();
70
- });
71
- slot({ name: "end" });
72
- button(
73
- {
74
- type: "button",
75
- className: "tag-dismiss",
76
- "aria-label": "dismiss",
77
- "@click": (e) => {
78
- e.stopPropagation();
79
- if (this.disabled) return;
80
- this.emit("dismiss");
81
- }
82
- },
83
- () => {
84
- span({ textContent: "×" });
85
- }
86
- );
87
- });
88
- });
89
- }
90
- }
91
- _init = __decoratorStart(_a);
92
- _color = /* @__PURE__ */ new WeakMap();
93
- _variant = /* @__PURE__ */ new WeakMap();
94
- _size = /* @__PURE__ */ new WeakMap();
95
- _dismissible = /* @__PURE__ */ new WeakMap();
96
- _disabled = /* @__PURE__ */ new WeakMap();
97
- _pill = /* @__PURE__ */ new WeakMap();
98
- __decorateElement(_init, 4, "color", _color_dec, Tag, _color);
99
- __decorateElement(_init, 4, "variant", _variant_dec, Tag, _variant);
100
- __decorateElement(_init, 4, "size", _size_dec, Tag, _size);
101
- __decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
102
- __decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
103
- __decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
104
- __decoratorMetadata(_init, Tag);
105
- __publicField(Tag, "styles", [variables.variables, size.sizeCSS, color.colorCSS, tagStyle]);
106
- Tag.register();
107
- exports.Tag = Tag;
108
- //# sourceMappingURL=tag.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tag.cjs","sources":["../../src/tag/tag.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n * <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n * Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n @prop({ type: String })\n accessor color: TagColor | undefined;\n\n @prop({ type: String })\n accessor variant: TagVariant | undefined;\n\n @prop({ type: String })\n accessor size: TagSize | undefined;\n\n @prop({ type: Boolean })\n accessor dismissible: boolean = false;\n\n @prop({ type: Boolean })\n accessor disabled: boolean = false;\n\n @prop({ type: Boolean })\n accessor pill: boolean = false;\n\n protected render() {\n return html(({ span, button, slot }) => {\n span({ part: 'tag', className: 'tag' }, () => {\n slot({ name: 'start' });\n span({ className: 'tag-content' }, () => {\n slot();\n });\n slot({ name: 'end' });\n button(\n {\n type: 'button',\n className: 'tag-dismiss',\n 'aria-label': 'dismiss',\n '@click': (e: Event) => {\n e.stopPropagation();\n if (this.disabled) return;\n this.emit('dismiss');\n },\n },\n () => {\n span({ textContent: '\\u00d7' });\n },\n );\n });\n });\n }\n}\n\nTag.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tag': Tag;\n }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["prop","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,oCAGhB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,WAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACC,UAAAA,WAAgBC,KAAAA,SAASC,MAAAA,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;;"}
@@ -1,109 +0,0 @@
1
- import { v as variables } from "./variables.js";
2
- import { s as sizeCSS } from "./size.js";
3
- import { c as colorCSS } from "./color.js";
4
- import { A as AeicoComponent } from "./aeico-component.js";
5
- import { prop, html } from "aeico";
6
- const tagStyle = ':host {\n display: inline-flex;\n align-items: center;\n --tag-solid-bg: var(--color-solid);\n --tag-solid-color: var(--color-on-solid);\n --tag-border: var(--color-border);\n --tag-accent: var(--color-accent);\n --tag-subtle-bg: var(--color-bg-subtle);\n --tag-subtle-color: var(--color-text-subtle);\n --tag-subtle-border: var(--color-border-subtle);\n}\n\n.tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-weight: 500;\n white-space: nowrap;\n vertical-align: middle;\n line-height: 1.2;\n font-size: 1em;\n padding: 0.15em 0.5em 0.15em 0.6em;\n border-radius: 4px;\n border: 1px solid var(--tag-solid-bg);\n background: var(--tag-solid-bg);\n color: var(--tag-solid-color);\n max-width: 160px;\n min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n background: transparent;\n border-color: var(--tag-border);\n color: var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n background: var(--tag-subtle-bg);\n border-color: var(--tag-subtle-border);\n color: var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n background: var(--tag-subtle-bg);\n border-color: transparent;\n color: var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n background: transparent;\n border-color: transparent;\n color: var(--tag-accent);\n padding-left: 0;\n padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n display: none;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0.55;\n line-height: 1;\n font-size: 1em;\n padding: 0 1px;\n border-radius: 2px;\n background: transparent;\n border: none;\n color: inherit;\n font-family: inherit;\n transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n display: inline-flex;\n}\n\n.tag-dismiss:hover {\n opacity: 1;\n background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n opacity: 0.4;\n pointer-events: none;\n cursor: default;\n}\n\n:host([disabled]) .tag {\n opacity: 0.6;\n}\n';
7
- var __create = Object.create;
8
- var __defProp = Object.defineProperty;
9
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
- var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
11
- var __typeError = (msg) => {
12
- throw TypeError(msg);
13
- };
14
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
15
- var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
16
- var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
17
- var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
18
- var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
19
- var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
20
- var __runInitializers = (array, flags, self, value) => {
21
- for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
22
- return value;
23
- };
24
- var __decorateElement = (array, flags, name, decorators, target, extra) => {
25
- var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
26
- var j = array.length + 1, key = __decoratorStrings[k + 5];
27
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
28
- var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
29
- return __privateGet(this, extra);
30
- }, set [name](x) {
31
- return __privateSet(this, extra, x);
32
- } }, name));
33
- for (var i = decorators.length - 1; i >= 0; i--) {
34
- ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
35
- {
36
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
37
- access.get = (x) => x[name];
38
- access.set = (x, y) => x[name] = y;
39
- }
40
- it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
41
- if (it === void 0) __expectFn(it) && (desc[key] = it);
42
- else if (typeof it !== "object" || it === null) __typeError("Object expected");
43
- else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
44
- }
45
- return desc && __defProp(target, name, desc), target;
46
- };
47
- var __publicField = (obj, key, value) => __defNormalProp(obj, key + "", value);
48
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
49
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
50
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
51
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
52
- var _pill_dec, _disabled_dec, _dismissible_dec, _size_dec, _variant_dec, _color_dec, _a, _init, _color, _variant, _size, _dismissible, _disabled, _pill;
53
- class Tag extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _dismissible_dec = [prop({ type: Boolean })], _disabled_dec = [prop({ type: Boolean })], _pill_dec = [prop({ type: Boolean })], _a) {
54
- constructor() {
55
- super(...arguments);
56
- __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
57
- __privateAdd(this, _variant, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
58
- __privateAdd(this, _size, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
59
- __privateAdd(this, _dismissible, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
60
- __privateAdd(this, _disabled, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
61
- __privateAdd(this, _pill, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
62
- }
63
- render() {
64
- return html(({ span, button, slot }) => {
65
- span({ part: "tag", className: "tag" }, () => {
66
- slot({ name: "start" });
67
- span({ className: "tag-content" }, () => {
68
- slot();
69
- });
70
- slot({ name: "end" });
71
- button(
72
- {
73
- type: "button",
74
- className: "tag-dismiss",
75
- "aria-label": "dismiss",
76
- "@click": (e) => {
77
- e.stopPropagation();
78
- if (this.disabled) return;
79
- this.emit("dismiss");
80
- }
81
- },
82
- () => {
83
- span({ textContent: "×" });
84
- }
85
- );
86
- });
87
- });
88
- }
89
- }
90
- _init = __decoratorStart(_a);
91
- _color = /* @__PURE__ */ new WeakMap();
92
- _variant = /* @__PURE__ */ new WeakMap();
93
- _size = /* @__PURE__ */ new WeakMap();
94
- _dismissible = /* @__PURE__ */ new WeakMap();
95
- _disabled = /* @__PURE__ */ new WeakMap();
96
- _pill = /* @__PURE__ */ new WeakMap();
97
- __decorateElement(_init, 4, "color", _color_dec, Tag, _color);
98
- __decorateElement(_init, 4, "variant", _variant_dec, Tag, _variant);
99
- __decorateElement(_init, 4, "size", _size_dec, Tag, _size);
100
- __decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
101
- __decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
102
- __decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
103
- __decoratorMetadata(_init, Tag);
104
- __publicField(Tag, "styles", [variables, sizeCSS, colorCSS, tagStyle]);
105
- Tag.register();
106
- export {
107
- Tag as T
108
- };
109
- //# sourceMappingURL=tag.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tag.js","sources":["../../src/tag/tag.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n * <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n * Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n @prop({ type: String })\n accessor color: TagColor | undefined;\n\n @prop({ type: String })\n accessor variant: TagVariant | undefined;\n\n @prop({ type: String })\n accessor size: TagSize | undefined;\n\n @prop({ type: Boolean })\n accessor dismissible: boolean = false;\n\n @prop({ type: Boolean })\n accessor disabled: boolean = false;\n\n @prop({ type: Boolean })\n accessor pill: boolean = false;\n\n protected render() {\n return html(({ span, button, slot }) => {\n span({ part: 'tag', className: 'tag' }, () => {\n slot({ name: 'start' });\n span({ className: 'tag-content' }, () => {\n slot();\n });\n slot({ name: 'end' });\n button(\n {\n type: 'button',\n className: 'tag-dismiss',\n 'aria-label': 'dismiss',\n '@click': (e: Event) => {\n e.stopPropagation();\n if (this.disabled) return;\n this.emit('dismiss');\n },\n },\n () => {\n span({ textContent: '\\u00d7' });\n },\n );\n });\n });\n }\n}\n\nTag.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tag': Tag;\n }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,qBAGhB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACA,WAAgB,SAAS,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;"}