aeico-components 0.1.7 → 0.1.9

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 (350) 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 +531 -4
  35. package/dist/detail-group.cjs.map +7 -1
  36. package/dist/detail-group.js +474 -3
  37. package/dist/detail-group.js.map +7 -1
  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 +6532 -74
  67. package/dist/index.cjs.map +7 -1
  68. package/dist/index.js +6183 -73
  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 +885 -4
  79. package/dist/number-input.cjs.map +7 -1
  80. package/dist/number-input.js +817 -3
  81. package/dist/number-input.js.map +7 -1
  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/dialog/dialog.d.ts +1 -0
  141. package/dist/types/drawer/drawer.d.ts +2 -0
  142. package/dist/types/icon/defines.d.ts +2 -0
  143. package/dist/types/menu/defines.d.ts +1 -0
  144. package/dist/types/menu/menu-item.d.ts +1 -0
  145. package/dist/types/menu/menu.d.ts +1 -0
  146. package/dist/types/styles/layout.d.ts +2 -0
  147. package/dist/types/styles/radius.d.ts +2 -0
  148. package/dist/types/styles/variables.d.ts +2 -0
  149. package/package.json +31 -7
  150. package/src/alert/alert.ts +3 -3
  151. package/src/badge/badge.ts +4 -4
  152. package/src/breadcrumb/breadcrumb-item.ts +2 -2
  153. package/src/breadcrumb/breadcrumb.ts +3 -3
  154. package/src/button/button.ts +4 -4
  155. package/src/button-group/button-group.ts +8 -9
  156. package/src/card/card.ts +3 -3
  157. package/src/checkbox/checkbox.ts +6 -6
  158. package/src/copy-button/copy-button.ts +4 -4
  159. package/src/detail/detail.ts +3 -3
  160. package/src/detail-group/detail-group.ts +2 -2
  161. package/src/dialog/dialog.ts +15 -14
  162. package/src/divider/divider.ts +3 -3
  163. package/src/drawer/drawer.ts +28 -11
  164. package/src/dropdown/dropdown-item.ts +2 -2
  165. package/src/dropdown/dropdown.ts +2 -2
  166. package/src/icon/defines.ts +2 -0
  167. package/src/icon/icon.ts +4 -4
  168. package/src/menu/defines.ts +1 -0
  169. package/src/menu/menu-item.ts +14 -4
  170. package/src/menu/menu.ts +5 -2
  171. package/src/navbar/navbar.ts +3 -3
  172. package/src/number-input/number-input.ts +5 -5
  173. package/src/pagination/pagination.ts +3 -3
  174. package/src/progress-bar/progress-bar.ts +3 -3
  175. package/src/radio-group/radio-group.ts +12 -8
  176. package/src/select/select-option.ts +2 -2
  177. package/src/select/select.ts +5 -5
  178. package/src/slider/slider.ts +6 -6
  179. package/src/spinner/spinner.ts +4 -4
  180. package/src/styles/components/button-group.css +2 -0
  181. package/src/styles/components/card.css +42 -18
  182. package/src/styles/components/checkbox.css +16 -5
  183. package/src/styles/components/dialog.css +1 -1
  184. package/src/styles/components/drawer.css +50 -9
  185. package/src/styles/components/field-label.css +1 -1
  186. package/src/styles/components/menu-item.css +6 -0
  187. package/src/styles/components/navbar.css +7 -28
  188. package/src/styles/components/radio-group.css +19 -0
  189. package/src/styles/components/slider.css +30 -5
  190. package/src/styles/components/switch.css +16 -2
  191. package/src/styles/layout.css +5 -2
  192. package/src/styles/radius.css +15 -0
  193. package/src/switch/switch.ts +6 -6
  194. package/src/tabs/tab-panel.ts +1 -1
  195. package/src/tabs/tab.ts +1 -1
  196. package/src/tabs/tabs.ts +2 -2
  197. package/src/tag/tag.ts +4 -4
  198. package/src/text-input/text-input.ts +5 -5
  199. package/src/textarea/textarea.ts +5 -5
  200. package/src/tooltip/tooltip.ts +2 -2
  201. package/src/tree/tree-item.ts +2 -2
  202. package/src/tree/tree.ts +2 -2
  203. package/dist/chunks/action-button.cjs +0 -296
  204. package/dist/chunks/action-button.cjs.map +0 -1
  205. package/dist/chunks/action-button.js +0 -297
  206. package/dist/chunks/action-button.js.map +0 -1
  207. package/dist/chunks/aeico-component.cjs +0 -17
  208. package/dist/chunks/aeico-component.cjs.map +0 -1
  209. package/dist/chunks/aeico-component.js +0 -18
  210. package/dist/chunks/aeico-component.js.map +0 -1
  211. package/dist/chunks/alert.cjs +0 -164
  212. package/dist/chunks/alert.cjs.map +0 -1
  213. package/dist/chunks/alert.js +0 -165
  214. package/dist/chunks/alert.js.map +0 -1
  215. package/dist/chunks/badge.cjs +0 -85
  216. package/dist/chunks/badge.cjs.map +0 -1
  217. package/dist/chunks/badge.js +0 -86
  218. package/dist/chunks/badge.js.map +0 -1
  219. package/dist/chunks/breadcrumb-item.cjs +0 -261
  220. package/dist/chunks/breadcrumb-item.cjs.map +0 -1
  221. package/dist/chunks/breadcrumb-item.js +0 -262
  222. package/dist/chunks/breadcrumb-item.js.map +0 -1
  223. package/dist/chunks/button-group.cjs +0 -79
  224. package/dist/chunks/button-group.cjs.map +0 -1
  225. package/dist/chunks/button-group.js +0 -80
  226. package/dist/chunks/button-group.js.map +0 -1
  227. package/dist/chunks/button.cjs +0 -337
  228. package/dist/chunks/button.cjs.map +0 -1
  229. package/dist/chunks/button.js +0 -338
  230. package/dist/chunks/button.js.map +0 -1
  231. package/dist/chunks/card.cjs +0 -93
  232. package/dist/chunks/card.cjs.map +0 -1
  233. package/dist/chunks/card.js +0 -94
  234. package/dist/chunks/card.js.map +0 -1
  235. package/dist/chunks/checkbox.cjs +0 -86
  236. package/dist/chunks/checkbox.cjs.map +0 -1
  237. package/dist/chunks/checkbox.js +0 -87
  238. package/dist/chunks/checkbox.js.map +0 -1
  239. package/dist/chunks/color.cjs +0 -4
  240. package/dist/chunks/color.cjs.map +0 -1
  241. package/dist/chunks/color.js +0 -5
  242. package/dist/chunks/color.js.map +0 -1
  243. package/dist/chunks/copy-button.cjs +0 -171
  244. package/dist/chunks/copy-button.cjs.map +0 -1
  245. package/dist/chunks/copy-button.js +0 -172
  246. package/dist/chunks/copy-button.js.map +0 -1
  247. package/dist/chunks/detail-group.cjs +0 -65
  248. package/dist/chunks/detail-group.cjs.map +0 -1
  249. package/dist/chunks/detail-group.js +0 -66
  250. package/dist/chunks/detail-group.js.map +0 -1
  251. package/dist/chunks/detail.cjs +0 -146
  252. package/dist/chunks/detail.cjs.map +0 -1
  253. package/dist/chunks/detail.js +0 -147
  254. package/dist/chunks/detail.js.map +0 -1
  255. package/dist/chunks/dialog.cjs +0 -117
  256. package/dist/chunks/dialog.cjs.map +0 -1
  257. package/dist/chunks/dialog.js +0 -118
  258. package/dist/chunks/dialog.js.map +0 -1
  259. package/dist/chunks/divider.cjs +0 -80
  260. package/dist/chunks/divider.cjs.map +0 -1
  261. package/dist/chunks/divider.js +0 -81
  262. package/dist/chunks/divider.js.map +0 -1
  263. package/dist/chunks/drawer.cjs +0 -180
  264. package/dist/chunks/drawer.cjs.map +0 -1
  265. package/dist/chunks/drawer.js +0 -181
  266. package/dist/chunks/drawer.js.map +0 -1
  267. package/dist/chunks/dropdown-button.cjs +0 -533
  268. package/dist/chunks/dropdown-button.cjs.map +0 -1
  269. package/dist/chunks/dropdown-button.js +0 -534
  270. package/dist/chunks/dropdown-button.js.map +0 -1
  271. package/dist/chunks/icon-button.cjs +0 -35
  272. package/dist/chunks/icon-button.cjs.map +0 -1
  273. package/dist/chunks/icon-button.js +0 -36
  274. package/dist/chunks/icon-button.js.map +0 -1
  275. package/dist/chunks/icon.cjs +0 -124
  276. package/dist/chunks/icon.cjs.map +0 -1
  277. package/dist/chunks/icon.js +0 -125
  278. package/dist/chunks/icon.js.map +0 -1
  279. package/dist/chunks/menu.cjs +0 -396
  280. package/dist/chunks/menu.cjs.map +0 -1
  281. package/dist/chunks/menu.js +0 -397
  282. package/dist/chunks/menu.js.map +0 -1
  283. package/dist/chunks/navbar.cjs +0 -142
  284. package/dist/chunks/navbar.cjs.map +0 -1
  285. package/dist/chunks/navbar.js +0 -143
  286. package/dist/chunks/navbar.js.map +0 -1
  287. package/dist/chunks/number-input.cjs +0 -110
  288. package/dist/chunks/number-input.cjs.map +0 -1
  289. package/dist/chunks/number-input.js +0 -111
  290. package/dist/chunks/number-input.js.map +0 -1
  291. package/dist/chunks/pagination.cjs +0 -475
  292. package/dist/chunks/pagination.cjs.map +0 -1
  293. package/dist/chunks/pagination.js +0 -476
  294. package/dist/chunks/pagination.js.map +0 -1
  295. package/dist/chunks/progress-bar.cjs +0 -101
  296. package/dist/chunks/progress-bar.cjs.map +0 -1
  297. package/dist/chunks/progress-bar.js +0 -102
  298. package/dist/chunks/progress-bar.js.map +0 -1
  299. package/dist/chunks/radio.cjs +0 -185
  300. package/dist/chunks/radio.cjs.map +0 -1
  301. package/dist/chunks/radio.js +0 -186
  302. package/dist/chunks/radio.js.map +0 -1
  303. package/dist/chunks/select.cjs +0 -381
  304. package/dist/chunks/select.cjs.map +0 -1
  305. package/dist/chunks/select.js +0 -382
  306. package/dist/chunks/select.js.map +0 -1
  307. package/dist/chunks/size.cjs +0 -4
  308. package/dist/chunks/size.cjs.map +0 -1
  309. package/dist/chunks/size.js +0 -5
  310. package/dist/chunks/size.js.map +0 -1
  311. package/dist/chunks/slider.cjs +0 -608
  312. package/dist/chunks/slider.cjs.map +0 -1
  313. package/dist/chunks/slider.js +0 -609
  314. package/dist/chunks/slider.js.map +0 -1
  315. package/dist/chunks/spinner.cjs +0 -102
  316. package/dist/chunks/spinner.cjs.map +0 -1
  317. package/dist/chunks/spinner.js +0 -103
  318. package/dist/chunks/spinner.js.map +0 -1
  319. package/dist/chunks/switch.cjs +0 -167
  320. package/dist/chunks/switch.cjs.map +0 -1
  321. package/dist/chunks/switch.js +0 -168
  322. package/dist/chunks/switch.js.map +0 -1
  323. package/dist/chunks/tab-panel.cjs +0 -174
  324. package/dist/chunks/tab-panel.cjs.map +0 -1
  325. package/dist/chunks/tab-panel.js +0 -175
  326. package/dist/chunks/tab-panel.js.map +0 -1
  327. package/dist/chunks/tag.cjs +0 -108
  328. package/dist/chunks/tag.cjs.map +0 -1
  329. package/dist/chunks/tag.js +0 -109
  330. package/dist/chunks/tag.js.map +0 -1
  331. package/dist/chunks/text-input.cjs +0 -54
  332. package/dist/chunks/text-input.cjs.map +0 -1
  333. package/dist/chunks/text-input.js +0 -55
  334. package/dist/chunks/text-input.js.map +0 -1
  335. package/dist/chunks/textarea.cjs +0 -137
  336. package/dist/chunks/textarea.cjs.map +0 -1
  337. package/dist/chunks/textarea.js +0 -138
  338. package/dist/chunks/textarea.js.map +0 -1
  339. package/dist/chunks/tooltip.cjs +0 -292
  340. package/dist/chunks/tooltip.cjs.map +0 -1
  341. package/dist/chunks/tooltip.js +0 -293
  342. package/dist/chunks/tooltip.js.map +0 -1
  343. package/dist/chunks/tree.cjs +0 -468
  344. package/dist/chunks/tree.cjs.map +0 -1
  345. package/dist/chunks/tree.js +0 -469
  346. package/dist/chunks/tree.js.map +0 -1
  347. package/dist/chunks/variables.cjs +0 -396
  348. package/dist/chunks/variables.cjs.map +0 -1
  349. package/dist/chunks/variables.js +0 -397
  350. package/dist/chunks/variables.js.map +0 -1
@@ -1,174 +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 border: 1px solid transparent;\n border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n background: transparent;\n}\n\n[part="tab-nav"] {\n display: flex;\n flex-shrink: 0;\n}\n\n[part="panels"] {\n flex: 1;\n overflow: auto;\n}\n\n:host([variant="filled"]) {\n border-color: var(--ae-color-gray);\n background: var(--ae-color-gray);\n}\n\n:host([variant="filled"]) [part="tab-nav"] {\n border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\n}\n\n:host([variant="outlined"]) {\n border-color: var(--ae-border-hover);\n background: transparent;\n}\n\n:host([variant="outlined"]) [part="tab-nav"] {\n border-bottom: 1px solid var(--ae-border-hover);\n}\n\n:host([variant="faint"]) {\n border-color: var(--ae-border-default);\n background: var(--ae-border-subtle);\n}\n\n:host([variant="faint"]) [part="tab-nav"] {\n border-bottom: 1px solid var(--ae-border-default);\n}\n\n:host([variant="subtle"]) {\n border-color: transparent;\n background: var(--ae-border-subtle);\n}\n\n:host([variant="subtle"]) [part="tab-nav"] {\n border-bottom: 1px solid transparent;\n}\n\n:host([variant="text"]) {\n border-color: transparent;\n background: transparent;\n}\n\n:host([variant="text"]) [part="tab-nav"] {\n border-bottom: 1px solid transparent;\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._syncVariant();
71
- this._syncActive();
72
- }
73
- _syncVariant() {
74
- const variant = this.variant ?? "text";
75
- this.setAttribute("variant", variant);
76
- for (const tab of this._tabs) {
77
- tab.setAttribute("variant", variant);
78
- }
79
- }
80
- _syncActive() {
81
- const activeIndex = this.activeIndex ?? 0;
82
- const pairs = this._getPairs();
83
- pairs.forEach(([tab, panel], i) => {
84
- const isActive = i === activeIndex;
85
- if (isActive) {
86
- tab.setAttribute("active", "");
87
- panel == null ? void 0 : panel.setAttribute("active", "");
88
- } else {
89
- tab.removeAttribute("active");
90
- panel == null ? void 0 : panel.removeAttribute("active");
91
- }
92
- });
93
- }
94
- selectTab(index) {
95
- const pairs = this._getPairs();
96
- if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
97
- this.activeIndex = index;
98
- this.emit("change", { detail: { index } });
99
- }
100
- render() {
101
- return aeico.html(({ nav, div, slot }) => {
102
- nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
103
- slot({ name: "tab" });
104
- });
105
- div({ part: "panels" }, () => {
106
- slot();
107
- });
108
- });
109
- }
110
- }
111
- __publicField(Tabs, "props", {
112
- activeIndex: { type: Number },
113
- variant: { type: String }
114
- });
115
- __publicField(Tabs, "styles", [variables.variables, tabsStyle]);
116
- Tabs.register();
117
- const tabStyle = ":host {\n display: inline-flex;\n cursor: pointer;\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(--ae-color-primary));\n}\n\nbutton:focus-visible {\n outline: 2px solid var(--ae-color-primary);\n outline-offset: -2px;\n}\n\n:host([active]) button {\n color: var(--ae-tab-active-color, var(--ae-color-primary));\n border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\n}\n\n:host([disabled]) button {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n";
118
- class Tab extends aeicoComponent.AeicoComponent {
119
- constructor() {
120
- super(...arguments);
121
- __publicField(this, "_handleClick", () => {
122
- if (this.disabled) return;
123
- this.dispatchEvent(
124
- new CustomEvent("_tab-click", {
125
- bubbles: true,
126
- composed: true
127
- })
128
- );
129
- });
130
- }
131
- connectedCallback() {
132
- this.setAttribute("slot", "tab");
133
- super.connectedCallback();
134
- }
135
- render() {
136
- return aeico.html(({ button, slot }) => {
137
- button(
138
- {
139
- part: "tab",
140
- type: "button",
141
- role: "tab",
142
- "aria-selected": this.active,
143
- "aria-disabled": this.disabled,
144
- disabled: this.disabled,
145
- "@click": this._handleClick
146
- },
147
- () => {
148
- slot();
149
- }
150
- );
151
- });
152
- }
153
- }
154
- __publicField(Tab, "props", {
155
- active: { type: Boolean },
156
- disabled: { type: Boolean },
157
- panel: { type: String }
158
- });
159
- __publicField(Tab, "styles", [tabStyle]);
160
- Tab.register();
161
- 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";
162
- class TabPanel extends aeicoComponent.AeicoComponent {
163
- render() {
164
- return aeico.html(({ slot }) => {
165
- slot();
166
- });
167
- }
168
- }
169
- __publicField(TabPanel, "styles", [tabPanelStyle]);
170
- TabPanel.register();
171
- exports.Tab = Tab;
172
- exports.TabPanel = TabPanel;
173
- exports.Tabs = Tabs;
174
- //# 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';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n static props: Props = {\n activeIndex: { type: Number },\n variant: { type: String },\n };\n\n declare activeIndex?: number;\n declare variant?: TabVariant;\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._syncVariant();\n this._syncActive();\n }\n\n private _syncVariant() {\n const variant = this.variant ?? 'text';\n this.setAttribute('variant', variant);\n for (const tab of this._tabs) {\n tab.setAttribute('variant', variant);\n }\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,175 +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 border: 1px solid transparent;\n border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n background: transparent;\n}\n\n[part="tab-nav"] {\n display: flex;\n flex-shrink: 0;\n}\n\n[part="panels"] {\n flex: 1;\n overflow: auto;\n}\n\n:host([variant="filled"]) {\n border-color: var(--ae-color-gray);\n background: var(--ae-color-gray);\n}\n\n:host([variant="filled"]) [part="tab-nav"] {\n border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\n}\n\n:host([variant="outlined"]) {\n border-color: var(--ae-border-hover);\n background: transparent;\n}\n\n:host([variant="outlined"]) [part="tab-nav"] {\n border-bottom: 1px solid var(--ae-border-hover);\n}\n\n:host([variant="faint"]) {\n border-color: var(--ae-border-default);\n background: var(--ae-border-subtle);\n}\n\n:host([variant="faint"]) [part="tab-nav"] {\n border-bottom: 1px solid var(--ae-border-default);\n}\n\n:host([variant="subtle"]) {\n border-color: transparent;\n background: var(--ae-border-subtle);\n}\n\n:host([variant="subtle"]) [part="tab-nav"] {\n border-bottom: 1px solid transparent;\n}\n\n:host([variant="text"]) {\n border-color: transparent;\n background: transparent;\n}\n\n:host([variant="text"]) [part="tab-nav"] {\n border-bottom: 1px solid transparent;\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._syncVariant();
70
- this._syncActive();
71
- }
72
- _syncVariant() {
73
- const variant = this.variant ?? "text";
74
- this.setAttribute("variant", variant);
75
- for (const tab of this._tabs) {
76
- tab.setAttribute("variant", variant);
77
- }
78
- }
79
- _syncActive() {
80
- const activeIndex = this.activeIndex ?? 0;
81
- const pairs = this._getPairs();
82
- pairs.forEach(([tab, panel], i) => {
83
- const isActive = i === activeIndex;
84
- if (isActive) {
85
- tab.setAttribute("active", "");
86
- panel == null ? void 0 : panel.setAttribute("active", "");
87
- } else {
88
- tab.removeAttribute("active");
89
- panel == null ? void 0 : panel.removeAttribute("active");
90
- }
91
- });
92
- }
93
- selectTab(index) {
94
- const pairs = this._getPairs();
95
- if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
96
- this.activeIndex = index;
97
- this.emit("change", { detail: { index } });
98
- }
99
- render() {
100
- return html(({ nav, div, slot }) => {
101
- nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
102
- slot({ name: "tab" });
103
- });
104
- div({ part: "panels" }, () => {
105
- slot();
106
- });
107
- });
108
- }
109
- }
110
- __publicField(Tabs, "props", {
111
- activeIndex: { type: Number },
112
- variant: { type: String }
113
- });
114
- __publicField(Tabs, "styles", [variables, tabsStyle]);
115
- Tabs.register();
116
- const tabStyle = ":host {\n display: inline-flex;\n cursor: pointer;\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(--ae-color-primary));\n}\n\nbutton:focus-visible {\n outline: 2px solid var(--ae-color-primary);\n outline-offset: -2px;\n}\n\n:host([active]) button {\n color: var(--ae-tab-active-color, var(--ae-color-primary));\n border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\n}\n\n:host([disabled]) button {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n";
117
- class Tab extends AeicoComponent {
118
- constructor() {
119
- super(...arguments);
120
- __publicField(this, "_handleClick", () => {
121
- if (this.disabled) return;
122
- this.dispatchEvent(
123
- new CustomEvent("_tab-click", {
124
- bubbles: true,
125
- composed: true
126
- })
127
- );
128
- });
129
- }
130
- connectedCallback() {
131
- this.setAttribute("slot", "tab");
132
- super.connectedCallback();
133
- }
134
- render() {
135
- return html(({ button, slot }) => {
136
- button(
137
- {
138
- part: "tab",
139
- type: "button",
140
- role: "tab",
141
- "aria-selected": this.active,
142
- "aria-disabled": this.disabled,
143
- disabled: this.disabled,
144
- "@click": this._handleClick
145
- },
146
- () => {
147
- slot();
148
- }
149
- );
150
- });
151
- }
152
- }
153
- __publicField(Tab, "props", {
154
- active: { type: Boolean },
155
- disabled: { type: Boolean },
156
- panel: { type: String }
157
- });
158
- __publicField(Tab, "styles", [tabStyle]);
159
- Tab.register();
160
- 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";
161
- class TabPanel extends AeicoComponent {
162
- render() {
163
- return html(({ slot }) => {
164
- slot();
165
- });
166
- }
167
- }
168
- __publicField(TabPanel, "styles", [tabPanelStyle]);
169
- TabPanel.register();
170
- export {
171
- Tab as T,
172
- TabPanel as a,
173
- Tabs as b
174
- };
175
- //# 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';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n static props: Props = {\n activeIndex: { type: Number },\n variant: { type: String },\n };\n\n declare activeIndex?: number;\n declare variant?: TabVariant;\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._syncVariant();\n this._syncActive();\n }\n\n private _syncVariant() {\n const variant = this.variant ?? 'text';\n this.setAttribute('variant', variant);\n for (const tab of this._tabs) {\n tab.setAttribute('variant', variant);\n }\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}\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: var(--ae-border-radius, var(--ae-radius-sm));\n border: 1px solid var(--ae-color-solid);\n background: var(--ae-color-solid);\n color: var(--ae-color-on-solid);\n max-width: 160px;\n min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n background: transparent;\n border-color: var(--ae-color-border);\n color: var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n background: var(--ae-color-bg-subtle);\n border-color: var(--ae-color-border-subtle);\n color: var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n background: var(--ae-color-bg-subtle);\n border-color: transparent;\n color: var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n background: transparent;\n border-color: transparent;\n color: var(--ae-color-accent);\n padding-left: 0;\n padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\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: var(--ae-border-radius, var(--ae-radius-xs));\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}\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: var(--ae-border-radius, var(--ae-radius-sm));\n border: 1px solid var(--ae-color-solid);\n background: var(--ae-color-solid);\n color: var(--ae-color-on-solid);\n max-width: 160px;\n min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n background: transparent;\n border-color: var(--ae-color-border);\n color: var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n background: var(--ae-color-bg-subtle);\n border-color: var(--ae-color-border-subtle);\n color: var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n background: var(--ae-color-bg-subtle);\n border-color: transparent;\n color: var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n background: transparent;\n border-color: transparent;\n color: var(--ae-color-accent);\n padding-left: 0;\n padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\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: var(--ae-border-radius, var(--ae-radius-xs));\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;"}