aeico-components 0.1.7 → 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 (349) hide show
  1. package/dist/alert.cjs +637 -4
  2. package/dist/alert.cjs.map +7 -1
  3. package/dist/alert.js +575 -3
  4. package/dist/alert.js.map +7 -1
  5. package/dist/badge.cjs +573 -4
  6. package/dist/badge.cjs.map +7 -1
  7. package/dist/badge.js +510 -3
  8. package/dist/badge.js.map +7 -1
  9. package/dist/breadcrumb.cjs +709 -5
  10. package/dist/breadcrumb.cjs.map +7 -1
  11. package/dist/breadcrumb.js +644 -4
  12. package/dist/breadcrumb.js.map +7 -1
  13. package/dist/button-group.cjs +546 -4
  14. package/dist/button-group.cjs.map +7 -1
  15. package/dist/button-group.js +489 -3
  16. package/dist/button-group.js.map +7 -1
  17. package/dist/button.cjs +834 -4
  18. package/dist/button.cjs.map +7 -1
  19. package/dist/button.js +771 -3
  20. package/dist/button.js.map +7 -1
  21. package/dist/card.cjs +574 -4
  22. package/dist/card.cjs.map +7 -1
  23. package/dist/card.js +516 -3
  24. package/dist/card.js.map +7 -1
  25. package/dist/checkbox.cjs +867 -4
  26. package/dist/checkbox.cjs.map +7 -1
  27. package/dist/checkbox.js +794 -3
  28. package/dist/checkbox.js.map +7 -1
  29. package/dist/copy-button.cjs +1046 -4
  30. package/dist/copy-button.cjs.map +7 -1
  31. package/dist/copy-button.js +969 -3
  32. package/dist/copy-button.js.map +7 -1
  33. package/dist/detail-group.cjs +531 -4
  34. package/dist/detail-group.cjs.map +7 -1
  35. package/dist/detail-group.js +474 -3
  36. package/dist/detail-group.js.map +7 -1
  37. package/dist/detail.cjs +627 -4
  38. package/dist/detail.cjs.map +7 -1
  39. package/dist/detail.js +569 -3
  40. package/dist/detail.js.map +7 -1
  41. package/dist/dialog.cjs +738 -4
  42. package/dist/dialog.cjs.map +7 -1
  43. package/dist/dialog.js +665 -3
  44. package/dist/dialog.js.map +7 -1
  45. package/dist/divider.cjs +558 -4
  46. package/dist/divider.cjs.map +7 -1
  47. package/dist/divider.js +502 -3
  48. package/dist/divider.js.map +7 -1
  49. package/dist/drawer.cjs +818 -4
  50. package/dist/drawer.cjs.map +7 -1
  51. package/dist/drawer.js +749 -3
  52. package/dist/drawer.js.map +7 -1
  53. package/dist/dropdown.cjs +1396 -5
  54. package/dist/dropdown.cjs.map +7 -1
  55. package/dist/dropdown.js +1316 -4
  56. package/dist/dropdown.js.map +7 -1
  57. package/dist/icon-button.cjs +999 -4
  58. package/dist/icon-button.cjs.map +7 -1
  59. package/dist/icon-button.js +930 -3
  60. package/dist/icon-button.js.map +7 -1
  61. package/dist/icon.cjs +613 -4
  62. package/dist/icon.cjs.map +7 -1
  63. package/dist/icon.js +547 -3
  64. package/dist/icon.js.map +7 -1
  65. package/dist/index.cjs +6532 -74
  66. package/dist/index.cjs.map +7 -1
  67. package/dist/index.js +6183 -73
  68. package/dist/index.js.map +7 -1
  69. package/dist/menu.cjs +841 -4
  70. package/dist/menu.cjs.map +7 -1
  71. package/dist/menu.js +785 -3
  72. package/dist/menu.js.map +7 -1
  73. package/dist/navbar.cjs +622 -4
  74. package/dist/navbar.cjs.map +7 -1
  75. package/dist/navbar.js +564 -3
  76. package/dist/navbar.js.map +7 -1
  77. package/dist/number-input.cjs +885 -4
  78. package/dist/number-input.cjs.map +7 -1
  79. package/dist/number-input.js +817 -3
  80. package/dist/number-input.js.map +7 -1
  81. package/dist/pagination.cjs +1099 -4
  82. package/dist/pagination.cjs.map +7 -1
  83. package/dist/pagination.js +1029 -3
  84. package/dist/pagination.js.map +7 -1
  85. package/dist/progress-bar.cjs +581 -4
  86. package/dist/progress-bar.cjs.map +7 -1
  87. package/dist/progress-bar.js +525 -3
  88. package/dist/progress-bar.js.map +7 -1
  89. package/dist/radio-group.cjs +973 -5
  90. package/dist/radio-group.cjs.map +7 -1
  91. package/dist/radio-group.js +899 -4
  92. package/dist/radio-group.js.map +7 -1
  93. package/dist/select.cjs +1242 -45
  94. package/dist/select.cjs.map +7 -1
  95. package/dist/select.js +1159 -44
  96. package/dist/select.js.map +7 -1
  97. package/dist/slider.cjs +1420 -4
  98. package/dist/slider.cjs.map +7 -1
  99. package/dist/slider.js +1351 -3
  100. package/dist/slider.js.map +7 -1
  101. package/dist/spinner.cjs +587 -4
  102. package/dist/spinner.cjs.map +7 -1
  103. package/dist/spinner.js +528 -3
  104. package/dist/spinner.js.map +7 -1
  105. package/dist/styles/layout.cjs +1 -0
  106. package/dist/styles/layout.js +1 -0
  107. package/dist/styles/radius.cjs +1 -0
  108. package/dist/styles/radius.js +1 -0
  109. package/dist/styles/variables.cjs +1 -0
  110. package/dist/styles/variables.js +1 -0
  111. package/dist/switch.cjs +1092 -4
  112. package/dist/switch.cjs.map +7 -1
  113. package/dist/switch.js +1013 -3
  114. package/dist/switch.js.map +7 -1
  115. package/dist/tabs.cjs +660 -6
  116. package/dist/tabs.cjs.map +7 -1
  117. package/dist/tabs.js +591 -5
  118. package/dist/tabs.js.map +7 -1
  119. package/dist/tag.cjs +591 -3
  120. package/dist/tag.cjs.map +7 -1
  121. package/dist/tag.js +532 -2
  122. package/dist/tag.js.map +7 -1
  123. package/dist/text-input.cjs +829 -4
  124. package/dist/text-input.cjs.map +7 -1
  125. package/dist/text-input.js +761 -3
  126. package/dist/text-input.js.map +7 -1
  127. package/dist/textarea.cjs +914 -3
  128. package/dist/textarea.cjs.map +7 -1
  129. package/dist/textarea.js +854 -2
  130. package/dist/textarea.js.map +7 -1
  131. package/dist/tooltip.cjs +764 -4
  132. package/dist/tooltip.cjs.map +7 -1
  133. package/dist/tooltip.js +711 -3
  134. package/dist/tooltip.js.map +7 -1
  135. package/dist/tree.cjs +1059 -4
  136. package/dist/tree.cjs.map +7 -1
  137. package/dist/tree.js +985 -3
  138. package/dist/tree.js.map +7 -1
  139. package/dist/types/dialog/dialog.d.ts +1 -0
  140. package/dist/types/drawer/drawer.d.ts +2 -0
  141. package/dist/types/icon/defines.d.ts +2 -0
  142. package/dist/types/menu/defines.d.ts +1 -0
  143. package/dist/types/menu/menu-item.d.ts +1 -0
  144. package/dist/types/menu/menu.d.ts +1 -0
  145. package/dist/types/styles/layout.d.ts +2 -0
  146. package/dist/types/styles/radius.d.ts +2 -0
  147. package/dist/types/styles/variables.d.ts +2 -0
  148. package/package.json +31 -7
  149. package/src/alert/alert.ts +3 -3
  150. package/src/badge/badge.ts +4 -4
  151. package/src/breadcrumb/breadcrumb-item.ts +2 -2
  152. package/src/breadcrumb/breadcrumb.ts +3 -3
  153. package/src/button/button.ts +4 -4
  154. package/src/button-group/button-group.ts +8 -9
  155. package/src/card/card.ts +3 -3
  156. package/src/checkbox/checkbox.ts +6 -6
  157. package/src/copy-button/copy-button.ts +4 -4
  158. package/src/detail/detail.ts +3 -3
  159. package/src/detail-group/detail-group.ts +2 -2
  160. package/src/dialog/dialog.ts +15 -14
  161. package/src/divider/divider.ts +3 -3
  162. package/src/drawer/drawer.ts +28 -11
  163. package/src/dropdown/dropdown-item.ts +2 -2
  164. package/src/dropdown/dropdown.ts +2 -2
  165. package/src/icon/defines.ts +2 -0
  166. package/src/icon/icon.ts +4 -4
  167. package/src/menu/defines.ts +1 -0
  168. package/src/menu/menu-item.ts +14 -4
  169. package/src/menu/menu.ts +5 -2
  170. package/src/navbar/navbar.ts +3 -3
  171. package/src/number-input/number-input.ts +5 -5
  172. package/src/pagination/pagination.ts +3 -3
  173. package/src/progress-bar/progress-bar.ts +3 -3
  174. package/src/radio-group/radio-group.ts +12 -8
  175. package/src/select/select-option.ts +2 -2
  176. package/src/select/select.ts +5 -5
  177. package/src/slider/slider.ts +6 -6
  178. package/src/spinner/spinner.ts +4 -4
  179. package/src/styles/components/button-group.css +2 -0
  180. package/src/styles/components/card.css +42 -18
  181. package/src/styles/components/checkbox.css +16 -5
  182. package/src/styles/components/dialog.css +1 -1
  183. package/src/styles/components/drawer.css +50 -9
  184. package/src/styles/components/field-label.css +1 -1
  185. package/src/styles/components/menu-item.css +6 -0
  186. package/src/styles/components/navbar.css +7 -28
  187. package/src/styles/components/radio-group.css +19 -0
  188. package/src/styles/components/slider.css +30 -5
  189. package/src/styles/components/switch.css +16 -2
  190. package/src/styles/layout.css +5 -2
  191. package/src/styles/radius.css +15 -0
  192. package/src/switch/switch.ts +6 -6
  193. package/src/tabs/tab-panel.ts +1 -1
  194. package/src/tabs/tab.ts +1 -1
  195. package/src/tabs/tabs.ts +2 -2
  196. package/src/tag/tag.ts +4 -4
  197. package/src/text-input/text-input.ts +5 -5
  198. package/src/textarea/textarea.ts +5 -5
  199. package/src/tooltip/tooltip.ts +2 -2
  200. package/src/tree/tree-item.ts +2 -2
  201. package/src/tree/tree.ts +2 -2
  202. package/dist/chunks/action-button.cjs +0 -296
  203. package/dist/chunks/action-button.cjs.map +0 -1
  204. package/dist/chunks/action-button.js +0 -297
  205. package/dist/chunks/action-button.js.map +0 -1
  206. package/dist/chunks/aeico-component.cjs +0 -17
  207. package/dist/chunks/aeico-component.cjs.map +0 -1
  208. package/dist/chunks/aeico-component.js +0 -18
  209. package/dist/chunks/aeico-component.js.map +0 -1
  210. package/dist/chunks/alert.cjs +0 -164
  211. package/dist/chunks/alert.cjs.map +0 -1
  212. package/dist/chunks/alert.js +0 -165
  213. package/dist/chunks/alert.js.map +0 -1
  214. package/dist/chunks/badge.cjs +0 -85
  215. package/dist/chunks/badge.cjs.map +0 -1
  216. package/dist/chunks/badge.js +0 -86
  217. package/dist/chunks/badge.js.map +0 -1
  218. package/dist/chunks/breadcrumb-item.cjs +0 -261
  219. package/dist/chunks/breadcrumb-item.cjs.map +0 -1
  220. package/dist/chunks/breadcrumb-item.js +0 -262
  221. package/dist/chunks/breadcrumb-item.js.map +0 -1
  222. package/dist/chunks/button-group.cjs +0 -79
  223. package/dist/chunks/button-group.cjs.map +0 -1
  224. package/dist/chunks/button-group.js +0 -80
  225. package/dist/chunks/button-group.js.map +0 -1
  226. package/dist/chunks/button.cjs +0 -337
  227. package/dist/chunks/button.cjs.map +0 -1
  228. package/dist/chunks/button.js +0 -338
  229. package/dist/chunks/button.js.map +0 -1
  230. package/dist/chunks/card.cjs +0 -93
  231. package/dist/chunks/card.cjs.map +0 -1
  232. package/dist/chunks/card.js +0 -94
  233. package/dist/chunks/card.js.map +0 -1
  234. package/dist/chunks/checkbox.cjs +0 -86
  235. package/dist/chunks/checkbox.cjs.map +0 -1
  236. package/dist/chunks/checkbox.js +0 -87
  237. package/dist/chunks/checkbox.js.map +0 -1
  238. package/dist/chunks/color.cjs +0 -4
  239. package/dist/chunks/color.cjs.map +0 -1
  240. package/dist/chunks/color.js +0 -5
  241. package/dist/chunks/color.js.map +0 -1
  242. package/dist/chunks/copy-button.cjs +0 -171
  243. package/dist/chunks/copy-button.cjs.map +0 -1
  244. package/dist/chunks/copy-button.js +0 -172
  245. package/dist/chunks/copy-button.js.map +0 -1
  246. package/dist/chunks/detail-group.cjs +0 -65
  247. package/dist/chunks/detail-group.cjs.map +0 -1
  248. package/dist/chunks/detail-group.js +0 -66
  249. package/dist/chunks/detail-group.js.map +0 -1
  250. package/dist/chunks/detail.cjs +0 -146
  251. package/dist/chunks/detail.cjs.map +0 -1
  252. package/dist/chunks/detail.js +0 -147
  253. package/dist/chunks/detail.js.map +0 -1
  254. package/dist/chunks/dialog.cjs +0 -117
  255. package/dist/chunks/dialog.cjs.map +0 -1
  256. package/dist/chunks/dialog.js +0 -118
  257. package/dist/chunks/dialog.js.map +0 -1
  258. package/dist/chunks/divider.cjs +0 -80
  259. package/dist/chunks/divider.cjs.map +0 -1
  260. package/dist/chunks/divider.js +0 -81
  261. package/dist/chunks/divider.js.map +0 -1
  262. package/dist/chunks/drawer.cjs +0 -180
  263. package/dist/chunks/drawer.cjs.map +0 -1
  264. package/dist/chunks/drawer.js +0 -181
  265. package/dist/chunks/drawer.js.map +0 -1
  266. package/dist/chunks/dropdown-button.cjs +0 -533
  267. package/dist/chunks/dropdown-button.cjs.map +0 -1
  268. package/dist/chunks/dropdown-button.js +0 -534
  269. package/dist/chunks/dropdown-button.js.map +0 -1
  270. package/dist/chunks/icon-button.cjs +0 -35
  271. package/dist/chunks/icon-button.cjs.map +0 -1
  272. package/dist/chunks/icon-button.js +0 -36
  273. package/dist/chunks/icon-button.js.map +0 -1
  274. package/dist/chunks/icon.cjs +0 -124
  275. package/dist/chunks/icon.cjs.map +0 -1
  276. package/dist/chunks/icon.js +0 -125
  277. package/dist/chunks/icon.js.map +0 -1
  278. package/dist/chunks/menu.cjs +0 -396
  279. package/dist/chunks/menu.cjs.map +0 -1
  280. package/dist/chunks/menu.js +0 -397
  281. package/dist/chunks/menu.js.map +0 -1
  282. package/dist/chunks/navbar.cjs +0 -142
  283. package/dist/chunks/navbar.cjs.map +0 -1
  284. package/dist/chunks/navbar.js +0 -143
  285. package/dist/chunks/navbar.js.map +0 -1
  286. package/dist/chunks/number-input.cjs +0 -110
  287. package/dist/chunks/number-input.cjs.map +0 -1
  288. package/dist/chunks/number-input.js +0 -111
  289. package/dist/chunks/number-input.js.map +0 -1
  290. package/dist/chunks/pagination.cjs +0 -475
  291. package/dist/chunks/pagination.cjs.map +0 -1
  292. package/dist/chunks/pagination.js +0 -476
  293. package/dist/chunks/pagination.js.map +0 -1
  294. package/dist/chunks/progress-bar.cjs +0 -101
  295. package/dist/chunks/progress-bar.cjs.map +0 -1
  296. package/dist/chunks/progress-bar.js +0 -102
  297. package/dist/chunks/progress-bar.js.map +0 -1
  298. package/dist/chunks/radio.cjs +0 -185
  299. package/dist/chunks/radio.cjs.map +0 -1
  300. package/dist/chunks/radio.js +0 -186
  301. package/dist/chunks/radio.js.map +0 -1
  302. package/dist/chunks/select.cjs +0 -381
  303. package/dist/chunks/select.cjs.map +0 -1
  304. package/dist/chunks/select.js +0 -382
  305. package/dist/chunks/select.js.map +0 -1
  306. package/dist/chunks/size.cjs +0 -4
  307. package/dist/chunks/size.cjs.map +0 -1
  308. package/dist/chunks/size.js +0 -5
  309. package/dist/chunks/size.js.map +0 -1
  310. package/dist/chunks/slider.cjs +0 -608
  311. package/dist/chunks/slider.cjs.map +0 -1
  312. package/dist/chunks/slider.js +0 -609
  313. package/dist/chunks/slider.js.map +0 -1
  314. package/dist/chunks/spinner.cjs +0 -102
  315. package/dist/chunks/spinner.cjs.map +0 -1
  316. package/dist/chunks/spinner.js +0 -103
  317. package/dist/chunks/spinner.js.map +0 -1
  318. package/dist/chunks/switch.cjs +0 -167
  319. package/dist/chunks/switch.cjs.map +0 -1
  320. package/dist/chunks/switch.js +0 -168
  321. package/dist/chunks/switch.js.map +0 -1
  322. package/dist/chunks/tab-panel.cjs +0 -174
  323. package/dist/chunks/tab-panel.cjs.map +0 -1
  324. package/dist/chunks/tab-panel.js +0 -175
  325. package/dist/chunks/tab-panel.js.map +0 -1
  326. package/dist/chunks/tag.cjs +0 -108
  327. package/dist/chunks/tag.cjs.map +0 -1
  328. package/dist/chunks/tag.js +0 -109
  329. package/dist/chunks/tag.js.map +0 -1
  330. package/dist/chunks/text-input.cjs +0 -54
  331. package/dist/chunks/text-input.cjs.map +0 -1
  332. package/dist/chunks/text-input.js +0 -55
  333. package/dist/chunks/text-input.js.map +0 -1
  334. package/dist/chunks/textarea.cjs +0 -137
  335. package/dist/chunks/textarea.cjs.map +0 -1
  336. package/dist/chunks/textarea.js +0 -138
  337. package/dist/chunks/textarea.js.map +0 -1
  338. package/dist/chunks/tooltip.cjs +0 -292
  339. package/dist/chunks/tooltip.cjs.map +0 -1
  340. package/dist/chunks/tooltip.js +0 -293
  341. package/dist/chunks/tooltip.js.map +0 -1
  342. package/dist/chunks/tree.cjs +0 -468
  343. package/dist/chunks/tree.cjs.map +0 -1
  344. package/dist/chunks/tree.js +0 -469
  345. package/dist/chunks/tree.js.map +0 -1
  346. package/dist/chunks/variables.cjs +0 -396
  347. package/dist/chunks/variables.cjs.map +0 -1
  348. package/dist/chunks/variables.js +0 -397
  349. 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;"}