aeico-components 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (380) hide show
  1. package/README.md +0 -0
  2. package/dist/alert.cjs +637 -4
  3. package/dist/alert.cjs.map +7 -1
  4. package/dist/alert.js +575 -3
  5. package/dist/alert.js.map +7 -1
  6. package/dist/badge.cjs +573 -4
  7. package/dist/badge.cjs.map +7 -1
  8. package/dist/badge.js +510 -3
  9. package/dist/badge.js.map +7 -1
  10. package/dist/breadcrumb.cjs +709 -5
  11. package/dist/breadcrumb.cjs.map +7 -1
  12. package/dist/breadcrumb.js +644 -4
  13. package/dist/breadcrumb.js.map +7 -1
  14. package/dist/button-group.cjs +546 -4
  15. package/dist/button-group.cjs.map +7 -1
  16. package/dist/button-group.js +489 -3
  17. package/dist/button-group.js.map +7 -1
  18. package/dist/button.cjs +834 -4
  19. package/dist/button.cjs.map +7 -1
  20. package/dist/button.js +771 -3
  21. package/dist/button.js.map +7 -1
  22. package/dist/card.cjs +574 -4
  23. package/dist/card.cjs.map +7 -1
  24. package/dist/card.js +516 -3
  25. package/dist/card.js.map +7 -1
  26. package/dist/checkbox.cjs +867 -4
  27. package/dist/checkbox.cjs.map +7 -1
  28. package/dist/checkbox.js +794 -3
  29. package/dist/checkbox.js.map +7 -1
  30. package/dist/copy-button.cjs +1046 -4
  31. package/dist/copy-button.cjs.map +7 -1
  32. package/dist/copy-button.js +969 -3
  33. package/dist/copy-button.js.map +7 -1
  34. package/dist/detail-group.cjs +533 -0
  35. package/dist/detail-group.cjs.map +7 -0
  36. package/dist/detail-group.js +477 -0
  37. package/dist/detail-group.js.map +7 -0
  38. package/dist/detail.cjs +627 -4
  39. package/dist/detail.cjs.map +7 -1
  40. package/dist/detail.js +569 -3
  41. package/dist/detail.js.map +7 -1
  42. package/dist/dialog.cjs +738 -4
  43. package/dist/dialog.cjs.map +7 -1
  44. package/dist/dialog.js +665 -3
  45. package/dist/dialog.js.map +7 -1
  46. package/dist/divider.cjs +558 -4
  47. package/dist/divider.cjs.map +7 -1
  48. package/dist/divider.js +502 -3
  49. package/dist/divider.js.map +7 -1
  50. package/dist/drawer.cjs +818 -4
  51. package/dist/drawer.cjs.map +7 -1
  52. package/dist/drawer.js +749 -3
  53. package/dist/drawer.js.map +7 -1
  54. package/dist/dropdown.cjs +1396 -5
  55. package/dist/dropdown.cjs.map +7 -1
  56. package/dist/dropdown.js +1316 -4
  57. package/dist/dropdown.js.map +7 -1
  58. package/dist/icon-button.cjs +999 -4
  59. package/dist/icon-button.cjs.map +7 -1
  60. package/dist/icon-button.js +930 -3
  61. package/dist/icon-button.js.map +7 -1
  62. package/dist/icon.cjs +613 -4
  63. package/dist/icon.cjs.map +7 -1
  64. package/dist/icon.js +547 -3
  65. package/dist/icon.js.map +7 -1
  66. package/dist/index.cjs +6484 -188
  67. package/dist/index.cjs.map +7 -1
  68. package/dist/index.js +6095 -147
  69. package/dist/index.js.map +7 -1
  70. package/dist/menu.cjs +841 -4
  71. package/dist/menu.cjs.map +7 -1
  72. package/dist/menu.js +785 -3
  73. package/dist/menu.js.map +7 -1
  74. package/dist/navbar.cjs +622 -4
  75. package/dist/navbar.cjs.map +7 -1
  76. package/dist/navbar.js +564 -3
  77. package/dist/navbar.js.map +7 -1
  78. package/dist/number-input.cjs +887 -0
  79. package/dist/number-input.cjs.map +7 -0
  80. package/dist/number-input.js +820 -0
  81. package/dist/number-input.js.map +7 -0
  82. package/dist/pagination.cjs +1099 -4
  83. package/dist/pagination.cjs.map +7 -1
  84. package/dist/pagination.js +1029 -3
  85. package/dist/pagination.js.map +7 -1
  86. package/dist/progress-bar.cjs +581 -4
  87. package/dist/progress-bar.cjs.map +7 -1
  88. package/dist/progress-bar.js +525 -3
  89. package/dist/progress-bar.js.map +7 -1
  90. package/dist/radio-group.cjs +973 -5
  91. package/dist/radio-group.cjs.map +7 -1
  92. package/dist/radio-group.js +899 -4
  93. package/dist/radio-group.js.map +7 -1
  94. package/dist/select.cjs +1242 -45
  95. package/dist/select.cjs.map +7 -1
  96. package/dist/select.js +1159 -44
  97. package/dist/select.js.map +7 -1
  98. package/dist/slider.cjs +1420 -4
  99. package/dist/slider.cjs.map +7 -1
  100. package/dist/slider.js +1351 -3
  101. package/dist/slider.js.map +7 -1
  102. package/dist/spinner.cjs +587 -4
  103. package/dist/spinner.cjs.map +7 -1
  104. package/dist/spinner.js +528 -3
  105. package/dist/spinner.js.map +7 -1
  106. package/dist/styles/layout.cjs +1 -0
  107. package/dist/styles/layout.js +1 -0
  108. package/dist/styles/radius.cjs +1 -0
  109. package/dist/styles/radius.js +1 -0
  110. package/dist/styles/variables.cjs +1 -0
  111. package/dist/styles/variables.js +1 -0
  112. package/dist/switch.cjs +1092 -4
  113. package/dist/switch.cjs.map +7 -1
  114. package/dist/switch.js +1013 -3
  115. package/dist/switch.js.map +7 -1
  116. package/dist/tabs.cjs +660 -6
  117. package/dist/tabs.cjs.map +7 -1
  118. package/dist/tabs.js +591 -5
  119. package/dist/tabs.js.map +7 -1
  120. package/dist/tag.cjs +591 -3
  121. package/dist/tag.cjs.map +7 -1
  122. package/dist/tag.js +532 -2
  123. package/dist/tag.js.map +7 -1
  124. package/dist/text-input.cjs +829 -4
  125. package/dist/text-input.cjs.map +7 -1
  126. package/dist/text-input.js +761 -3
  127. package/dist/text-input.js.map +7 -1
  128. package/dist/textarea.cjs +914 -3
  129. package/dist/textarea.cjs.map +7 -1
  130. package/dist/textarea.js +854 -2
  131. package/dist/textarea.js.map +7 -1
  132. package/dist/tooltip.cjs +764 -4
  133. package/dist/tooltip.cjs.map +7 -1
  134. package/dist/tooltip.js +711 -3
  135. package/dist/tooltip.js.map +7 -1
  136. package/dist/tree.cjs +1059 -4
  137. package/dist/tree.cjs.map +7 -1
  138. package/dist/tree.js +985 -3
  139. package/dist/tree.js.map +7 -1
  140. package/dist/types/card/defines.d.ts +1 -1
  141. package/dist/types/detail/defines.d.ts +1 -1
  142. package/dist/types/dialog/dialog.d.ts +1 -0
  143. package/dist/types/drawer/drawer.d.ts +2 -0
  144. package/dist/types/icon/defines.d.ts +7 -1
  145. package/dist/types/icon/index.d.ts +1 -1
  146. package/dist/types/menu/defines.d.ts +1 -0
  147. package/dist/types/menu/menu-item.d.ts +1 -0
  148. package/dist/types/menu/menu.d.ts +1 -0
  149. package/dist/types/styles/layout.d.ts +2 -0
  150. package/dist/types/styles/radius.d.ts +2 -0
  151. package/dist/types/styles/variables.d.ts +2 -0
  152. package/dist/types/tabs/defines.d.ts +1 -0
  153. package/dist/types/tabs/tabs.d.ts +3 -0
  154. package/package.json +31 -7
  155. package/src/alert/alert.ts +3 -3
  156. package/src/badge/badge.ts +4 -4
  157. package/src/breadcrumb/breadcrumb-item.ts +2 -2
  158. package/src/breadcrumb/breadcrumb.ts +3 -3
  159. package/src/button/button.ts +4 -4
  160. package/src/button-group/button-group.ts +8 -9
  161. package/src/card/card.ts +3 -3
  162. package/src/card/defines.ts +1 -1
  163. package/src/checkbox/checkbox.ts +6 -6
  164. package/src/copy-button/copy-button.ts +13 -9
  165. package/src/detail/defines.ts +1 -1
  166. package/src/detail/detail.ts +3 -3
  167. package/src/detail-group/detail-group.ts +2 -2
  168. package/src/dialog/dialog.ts +15 -14
  169. package/src/divider/divider.ts +3 -3
  170. package/src/drawer/drawer.ts +28 -11
  171. package/src/dropdown/dropdown-item.ts +2 -2
  172. package/src/dropdown/dropdown.ts +2 -2
  173. package/src/icon/defines.ts +8 -1
  174. package/src/icon/icon.ts +32 -14
  175. package/src/icon/index.ts +1 -1
  176. package/src/icon/registry.ts +2 -2
  177. package/src/menu/defines.ts +1 -0
  178. package/src/menu/menu-item.ts +14 -4
  179. package/src/menu/menu.ts +5 -2
  180. package/src/navbar/navbar.ts +3 -3
  181. package/src/number-input/number-input.ts +5 -5
  182. package/src/pagination/pagination.ts +3 -3
  183. package/src/progress-bar/progress-bar.ts +3 -3
  184. package/src/radio-group/radio-group.ts +12 -8
  185. package/src/select/select-option.ts +2 -2
  186. package/src/select/select.ts +5 -5
  187. package/src/slider/slider.ts +6 -6
  188. package/src/spinner/spinner.ts +4 -4
  189. package/src/styles/color.css +91 -91
  190. package/src/styles/components/action-button.css +12 -12
  191. package/src/styles/components/alert.css +22 -28
  192. package/src/styles/components/badge.css +13 -20
  193. package/src/styles/components/breadcrumb-item.css +7 -7
  194. package/src/styles/components/button-group.css +2 -0
  195. package/src/styles/components/button.css +39 -50
  196. package/src/styles/components/card.css +69 -30
  197. package/src/styles/components/checkbox.css +22 -16
  198. package/src/styles/components/copy-button.css +22 -33
  199. package/src/styles/components/detail.css +51 -39
  200. package/src/styles/components/dialog.css +11 -11
  201. package/src/styles/components/divider.css +3 -3
  202. package/src/styles/components/drawer.css +59 -27
  203. package/src/styles/components/dropdown-item.css +7 -8
  204. package/src/styles/components/dropdown.css +3 -4
  205. package/src/styles/components/field-label.css +13 -13
  206. package/src/styles/components/icon-button.css +25 -36
  207. package/src/styles/components/icon.css +1 -1
  208. package/src/styles/components/menu-item.css +13 -8
  209. package/src/styles/components/navbar.css +23 -44
  210. package/src/styles/components/number-input.css +27 -36
  211. package/src/styles/components/pagination.css +31 -31
  212. package/src/styles/components/progress-bar.css +2 -3
  213. package/src/styles/components/radio-group.css +88 -83
  214. package/src/styles/components/select-option.css +5 -5
  215. package/src/styles/components/select.css +21 -33
  216. package/src/styles/components/slider.css +56 -34
  217. package/src/styles/components/spinner.css +7 -9
  218. package/src/styles/components/switch.css +21 -19
  219. package/src/styles/components/tab.css +4 -5
  220. package/src/styles/components/tabs.css +48 -1
  221. package/src/styles/components/tag.css +14 -21
  222. package/src/styles/components/text-input.css +13 -22
  223. package/src/styles/components/textarea.css +12 -21
  224. package/src/styles/components/tooltip.css +4 -5
  225. package/src/styles/components/tree-item.css +12 -12
  226. package/src/styles/layout.css +5 -2
  227. package/src/styles/radius.css +25 -0
  228. package/src/styles/size.css +7 -7
  229. package/src/styles/variables.css +271 -247
  230. package/src/switch/switch.ts +6 -6
  231. package/src/tabs/defines.ts +1 -0
  232. package/src/tabs/tab-panel.ts +1 -1
  233. package/src/tabs/tab.ts +1 -1
  234. package/src/tabs/tabs.ts +14 -2
  235. package/src/tag/tag.ts +4 -4
  236. package/src/text-input/text-input.ts +5 -5
  237. package/src/textarea/textarea.ts +5 -5
  238. package/src/tooltip/tooltip.ts +2 -2
  239. package/src/tree/tree-item.ts +2 -2
  240. package/src/tree/tree.ts +2 -2
  241. package/dist/chunks/action-button.cjs +0 -296
  242. package/dist/chunks/action-button.cjs.map +0 -1
  243. package/dist/chunks/action-button.js +0 -297
  244. package/dist/chunks/action-button.js.map +0 -1
  245. package/dist/chunks/aeico-component.cjs +0 -17
  246. package/dist/chunks/aeico-component.cjs.map +0 -1
  247. package/dist/chunks/aeico-component.js +0 -18
  248. package/dist/chunks/aeico-component.js.map +0 -1
  249. package/dist/chunks/alert.cjs +0 -170
  250. package/dist/chunks/alert.cjs.map +0 -1
  251. package/dist/chunks/alert.js +0 -171
  252. package/dist/chunks/alert.js.map +0 -1
  253. package/dist/chunks/badge.cjs +0 -85
  254. package/dist/chunks/badge.cjs.map +0 -1
  255. package/dist/chunks/badge.js +0 -86
  256. package/dist/chunks/badge.js.map +0 -1
  257. package/dist/chunks/breadcrumb-item.cjs +0 -261
  258. package/dist/chunks/breadcrumb-item.cjs.map +0 -1
  259. package/dist/chunks/breadcrumb-item.js +0 -262
  260. package/dist/chunks/breadcrumb-item.js.map +0 -1
  261. package/dist/chunks/button-group.cjs +0 -79
  262. package/dist/chunks/button-group.cjs.map +0 -1
  263. package/dist/chunks/button-group.js +0 -80
  264. package/dist/chunks/button-group.js.map +0 -1
  265. package/dist/chunks/button.cjs +0 -348
  266. package/dist/chunks/button.cjs.map +0 -1
  267. package/dist/chunks/button.js +0 -349
  268. package/dist/chunks/button.js.map +0 -1
  269. package/dist/chunks/card.cjs +0 -93
  270. package/dist/chunks/card.cjs.map +0 -1
  271. package/dist/chunks/card.js +0 -94
  272. package/dist/chunks/card.js.map +0 -1
  273. package/dist/chunks/checkbox.cjs +0 -86
  274. package/dist/chunks/checkbox.cjs.map +0 -1
  275. package/dist/chunks/checkbox.js +0 -87
  276. package/dist/chunks/checkbox.js.map +0 -1
  277. package/dist/chunks/color.cjs +0 -4
  278. package/dist/chunks/color.cjs.map +0 -1
  279. package/dist/chunks/color.js +0 -5
  280. package/dist/chunks/color.js.map +0 -1
  281. package/dist/chunks/copy-button.cjs +0 -168
  282. package/dist/chunks/copy-button.cjs.map +0 -1
  283. package/dist/chunks/copy-button.js +0 -169
  284. package/dist/chunks/copy-button.js.map +0 -1
  285. package/dist/chunks/detail.cjs +0 -146
  286. package/dist/chunks/detail.cjs.map +0 -1
  287. package/dist/chunks/detail.js +0 -147
  288. package/dist/chunks/detail.js.map +0 -1
  289. package/dist/chunks/dialog.cjs +0 -117
  290. package/dist/chunks/dialog.cjs.map +0 -1
  291. package/dist/chunks/dialog.js +0 -118
  292. package/dist/chunks/dialog.js.map +0 -1
  293. package/dist/chunks/divider.cjs +0 -80
  294. package/dist/chunks/divider.cjs.map +0 -1
  295. package/dist/chunks/divider.js +0 -81
  296. package/dist/chunks/divider.js.map +0 -1
  297. package/dist/chunks/drawer.cjs +0 -180
  298. package/dist/chunks/drawer.cjs.map +0 -1
  299. package/dist/chunks/drawer.js +0 -181
  300. package/dist/chunks/drawer.js.map +0 -1
  301. package/dist/chunks/dropdown-button.cjs +0 -534
  302. package/dist/chunks/dropdown-button.cjs.map +0 -1
  303. package/dist/chunks/dropdown-button.js +0 -535
  304. package/dist/chunks/dropdown-button.js.map +0 -1
  305. package/dist/chunks/icon-button.cjs +0 -35
  306. package/dist/chunks/icon-button.cjs.map +0 -1
  307. package/dist/chunks/icon-button.js +0 -36
  308. package/dist/chunks/icon-button.js.map +0 -1
  309. package/dist/chunks/icon.cjs +0 -108
  310. package/dist/chunks/icon.cjs.map +0 -1
  311. package/dist/chunks/icon.js +0 -109
  312. package/dist/chunks/icon.js.map +0 -1
  313. package/dist/chunks/menu.cjs +0 -396
  314. package/dist/chunks/menu.cjs.map +0 -1
  315. package/dist/chunks/menu.js +0 -397
  316. package/dist/chunks/menu.js.map +0 -1
  317. package/dist/chunks/navbar.cjs +0 -142
  318. package/dist/chunks/navbar.cjs.map +0 -1
  319. package/dist/chunks/navbar.js +0 -143
  320. package/dist/chunks/navbar.js.map +0 -1
  321. package/dist/chunks/pagination.cjs +0 -475
  322. package/dist/chunks/pagination.cjs.map +0 -1
  323. package/dist/chunks/pagination.js +0 -476
  324. package/dist/chunks/pagination.js.map +0 -1
  325. package/dist/chunks/progress-bar.cjs +0 -101
  326. package/dist/chunks/progress-bar.cjs.map +0 -1
  327. package/dist/chunks/progress-bar.js +0 -102
  328. package/dist/chunks/progress-bar.js.map +0 -1
  329. package/dist/chunks/radio.cjs +0 -185
  330. package/dist/chunks/radio.cjs.map +0 -1
  331. package/dist/chunks/radio.js +0 -186
  332. package/dist/chunks/radio.js.map +0 -1
  333. package/dist/chunks/select.cjs +0 -381
  334. package/dist/chunks/select.cjs.map +0 -1
  335. package/dist/chunks/select.js +0 -382
  336. package/dist/chunks/select.js.map +0 -1
  337. package/dist/chunks/size.cjs +0 -4
  338. package/dist/chunks/size.cjs.map +0 -1
  339. package/dist/chunks/size.js +0 -5
  340. package/dist/chunks/size.js.map +0 -1
  341. package/dist/chunks/slider.cjs +0 -611
  342. package/dist/chunks/slider.cjs.map +0 -1
  343. package/dist/chunks/slider.js +0 -612
  344. package/dist/chunks/slider.js.map +0 -1
  345. package/dist/chunks/spinner.cjs +0 -102
  346. package/dist/chunks/spinner.cjs.map +0 -1
  347. package/dist/chunks/spinner.js +0 -103
  348. package/dist/chunks/spinner.js.map +0 -1
  349. package/dist/chunks/switch.cjs +0 -167
  350. package/dist/chunks/switch.cjs.map +0 -1
  351. package/dist/chunks/switch.js +0 -168
  352. package/dist/chunks/switch.js.map +0 -1
  353. package/dist/chunks/tab-panel.cjs +0 -165
  354. package/dist/chunks/tab-panel.cjs.map +0 -1
  355. package/dist/chunks/tab-panel.js +0 -166
  356. package/dist/chunks/tab-panel.js.map +0 -1
  357. package/dist/chunks/tag.cjs +0 -108
  358. package/dist/chunks/tag.cjs.map +0 -1
  359. package/dist/chunks/tag.js +0 -109
  360. package/dist/chunks/tag.js.map +0 -1
  361. package/dist/chunks/text-input.cjs +0 -54
  362. package/dist/chunks/text-input.cjs.map +0 -1
  363. package/dist/chunks/text-input.js +0 -55
  364. package/dist/chunks/text-input.js.map +0 -1
  365. package/dist/chunks/textarea.cjs +0 -137
  366. package/dist/chunks/textarea.cjs.map +0 -1
  367. package/dist/chunks/textarea.js +0 -138
  368. package/dist/chunks/textarea.js.map +0 -1
  369. package/dist/chunks/tooltip.cjs +0 -293
  370. package/dist/chunks/tooltip.cjs.map +0 -1
  371. package/dist/chunks/tooltip.js +0 -294
  372. package/dist/chunks/tooltip.js.map +0 -1
  373. package/dist/chunks/tree.cjs +0 -468
  374. package/dist/chunks/tree.cjs.map +0 -1
  375. package/dist/chunks/tree.js +0 -469
  376. package/dist/chunks/tree.js.map +0 -1
  377. package/dist/chunks/variables.cjs +0 -372
  378. package/dist/chunks/variables.cjs.map +0 -1
  379. package/dist/chunks/variables.js +0 -373
  380. package/dist/chunks/variables.js.map +0 -1
@@ -1,349 +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 buttonStyle = `:host {
7
- display: inline-block;
8
- --btn-solid-bg: var(--color-solid);
9
- --btn-solid-bg-hover: var(--color-solid-hover);
10
- --btn-solid-bg-active: var(--color-solid-active);
11
- --btn-solid-color: var(--color-on-solid);
12
- --btn-solid-color-hover: var(--color-on-solid-hover);
13
- --btn-border: var(--color-border);
14
- --btn-border-hover: var(--color-border-hover);
15
- --btn-accent: var(--color-accent);
16
- --btn-accent-hover: var(--color-accent-hover);
17
- --btn-subtle-bg: var(--color-subtle);
18
- --btn-subtle-bg-hover: var(--color-subtle-hover);
19
- }
20
-
21
- button {
22
- display: inline-flex;
23
- align-items: center;
24
- justify-content: center;
25
- gap: 6px;
26
- font-family: inherit;
27
- font-weight: 400;
28
- text-align: center;
29
- white-space: nowrap;
30
- vertical-align: middle;
31
- user-select: none;
32
- cursor: pointer;
33
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
34
- outline: none;
35
- position: relative;
36
- padding: 0.429em 1.071em;
37
- font-size: 1em;
38
- line-height: 1.5;
39
- border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
40
- min-width: 4.571em;
41
- height: 2.286em;
42
- width: 100%;
43
-
44
- background: var(--btn-solid-bg);
45
- border: 1px solid var(--btn-solid-bg);
46
- color: var(--btn-solid-color);
47
- }
48
-
49
- button:focus { outline: none; }
50
- button:active { transform: translateY(1px); }
51
-
52
- button:hover:not(:disabled) {
53
- background: var(--btn-solid-bg-hover);
54
- border-color: var(--btn-border-hover);
55
- color: var(--btn-solid-color-hover, var(--btn-solid-color));
56
- }
57
-
58
- button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
59
-
60
- button:disabled {
61
- opacity: 0.5;
62
- cursor: not-allowed;
63
- }
64
-
65
- :host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
66
- :host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
67
-
68
- /* --- Variants --- */
69
-
70
- :host([variant="outlined"]) button {
71
- background: transparent;
72
- border-color: var(--btn-border);
73
- color: var(--btn-accent);
74
- }
75
-
76
- :host([variant="outlined"]) button:hover:not(:disabled) {
77
- background: var(--btn-subtle-bg);
78
- border-color: var(--btn-border-hover);
79
- color: var(--btn-accent-hover);
80
- }
81
-
82
- :host([variant="outlined"]) button:active:not(:disabled) {
83
- background: var(--btn-subtle-bg-hover);
84
- }
85
-
86
- :host([variant="subtle"]) button {
87
- background: var(--btn-subtle-bg);
88
- border-color: transparent;
89
- color: var(--btn-accent);
90
- }
91
-
92
- :host([variant="subtle"]) button:hover:not(:disabled) {
93
- background: var(--btn-subtle-bg-hover);
94
- color: var(--btn-accent-hover);
95
- }
96
-
97
- :host([variant="subtle"]) button:active:not(:disabled) {
98
- background: var(--btn-subtle-bg-hover);
99
- }
100
-
101
- :host([variant="faint"]) button {
102
- background: var(--btn-subtle-bg);
103
- border-color: var(--btn-border);
104
- color: var(--btn-accent);
105
- }
106
-
107
- :host([variant="faint"]) button:hover:not(:disabled) {
108
- background: var(--btn-subtle-bg-hover);
109
- border-color: var(--btn-border-hover);
110
- color: var(--btn-accent-hover);
111
- }
112
-
113
- :host([variant="faint"]) button:active:not(:disabled) {
114
- background: var(--btn-subtle-bg-hover);
115
- }
116
-
117
- :host([variant="text"]) button {
118
- background: transparent;
119
- border-color: transparent;
120
- color: var(--btn-accent);
121
- min-width: auto;
122
- padding-left: 4px;
123
- padding-right: 4px;
124
- }
125
-
126
- :host([variant="text"]) button:hover:not(:disabled) {
127
- background: var(--btn-subtle-bg);
128
- color: var(--btn-accent-hover);
129
- }
130
-
131
- :host([variant="text"]) button:active:not(:disabled) {
132
- background: var(--btn-subtle-bg-hover);
133
- }
134
-
135
- /* Icon-only: single ae-icon child → square compact layout */
136
- :host([icon-only]) {
137
- display: inline-flex;
138
- }
139
-
140
- :host([icon-only]:not([size])) {
141
- font-size: var(--size-m);
142
- }
143
-
144
- :host([icon-only]) button {
145
- padding: 0;
146
- min-width: auto;
147
- width: 2.286em;
148
- height: 2.286em;
149
- line-height: 1;
150
- }
151
-
152
- :host([icon-only]) ::slotted(ae-icon) {
153
- font-size: 1.5em;
154
- }
155
-
156
- :host([active]) button {
157
- background: var(--btn-solid-bg-active);
158
- border-color: var(--btn-border-hover);
159
- color: var(--btn-solid-color-hover, var(--btn-solid-color));
160
- }
161
-
162
- .btn-icon {
163
- padding: 0;
164
- min-width: auto;
165
- width: 2.286em;
166
- height: 2.286em;
167
- display: inline-flex;
168
- align-items: center;
169
- justify-content: center;
170
- border-radius: 4px;
171
- }
172
-
173
- .btn-icon.btn-lg {
174
- width: 2.857em;
175
- height: 2.857em;
176
- }
177
-
178
- .btn-circle {
179
- border-radius: 50%;
180
- }
181
-
182
- :host([block]) {
183
- display: block;
184
- }
185
-
186
- button.btn-loading {
187
- position: relative;
188
- pointer-events: none;
189
- color: transparent;
190
- }
191
-
192
- button.btn-loading::before {
193
- content: '';
194
- position: absolute;
195
- width: 1em;
196
- height: 1em;
197
- border: 2px solid currentColor;
198
- border-top-color: transparent;
199
- border-radius: 50%;
200
- animation: btn-spin 0.6s linear infinite;
201
- color: currentColor;
202
- opacity: 0.8;
203
- }
204
-
205
- @keyframes btn-spin {
206
- to {
207
- transform: rotate(360deg);
208
- }
209
- }
210
-
211
- .btn-icon-left {
212
- margin-right: -2px;
213
- }
214
-
215
- .btn-icon-right {
216
- margin-left: -2px;
217
- }
218
-
219
- `;
220
- var __create = Object.create;
221
- var __defProp = Object.defineProperty;
222
- var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
223
- var __typeError = (msg) => {
224
- throw TypeError(msg);
225
- };
226
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
227
- var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
228
- var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
229
- var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
230
- var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
231
- var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
232
- var __runInitializers = (array, flags, self, value) => {
233
- 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);
234
- return value;
235
- };
236
- var __decorateElement = (array, flags, name, decorators, target, extra) => {
237
- var it, done, ctx, access, k = flags & 7, s = false, p = false;
238
- var j = array.length + 1;
239
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
240
- target = target.prototype, k < 5;
241
- for (var i = decorators.length - 1; i >= 0; i--) {
242
- ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
243
- {
244
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
245
- access.get = (x) => x[name];
246
- access.set = (x, y) => x[name] = y;
247
- }
248
- it = (0, decorators[i])(void 0, ctx), done._ = 1;
249
- __expectFn(it) && initializers.unshift(it);
250
- }
251
- return target;
252
- };
253
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
254
- var _block_dec, _active_dec, _type_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _a, _init;
255
- class Button extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _type_dec = [prop({ type: String })], _active_dec = [prop({ type: Boolean })], _block_dec = [prop({ type: Boolean })], _a) {
256
- constructor() {
257
- super(...arguments);
258
- __publicField(this, "color", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
259
- __publicField(this, "variant", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
260
- __publicField(this, "size", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
261
- __publicField(this, "disabled", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
262
- __publicField(this, "type", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
263
- __publicField(this, "active", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
264
- __publicField(this, "block", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
265
- __publicField(this, "_buttonElement", null);
266
- __publicField(this, "_slotElement", null);
267
- __publicField(this, "_autoAriaLabel", false);
268
- __publicField(this, "_handleSlotChange", () => {
269
- var _a2;
270
- const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes()) ?? [];
271
- const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
272
- const hasText = nodes.some(
273
- (n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
274
- );
275
- const isIconOnly = !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === "ae-icon";
276
- if (isIconOnly) {
277
- this.setAttribute("icon-only", "");
278
- if (!this.hasAttribute("aria-label") || this._autoAriaLabel) {
279
- this.setAttribute("aria-label", elements[0].getAttribute("name") ?? "");
280
- this._autoAriaLabel = true;
281
- }
282
- } else {
283
- this.removeAttribute("icon-only");
284
- if (this._autoAriaLabel) {
285
- this.removeAttribute("aria-label");
286
- this._autoAriaLabel = false;
287
- }
288
- }
289
- });
290
- }
291
- onMounted() {
292
- this._handleSlotChange();
293
- }
294
- render() {
295
- return html(({ button, slot }) => {
296
- this._buttonElement = button(
297
- {
298
- type: this.type || "button",
299
- disabled: this.disabled,
300
- part: "button",
301
- "aria-pressed": this.active,
302
- "aria-disabled": this.disabled
303
- },
304
- () => {
305
- this._slotElement = slot({ "@slotchange": this._handleSlotChange });
306
- }
307
- );
308
- });
309
- }
310
- /**
311
- * Programmatically click the button
312
- */
313
- click() {
314
- if (!this.disabled && this._buttonElement) {
315
- this._buttonElement.click();
316
- }
317
- }
318
- /**
319
- * Focus the button
320
- */
321
- focus() {
322
- if (this._buttonElement) {
323
- this._buttonElement.focus();
324
- }
325
- }
326
- /**
327
- * Blur the button
328
- */
329
- blur() {
330
- if (this._buttonElement) {
331
- this._buttonElement.blur();
332
- }
333
- }
334
- }
335
- _init = __decoratorStart(_a);
336
- __decorateElement(_init, 5, "color", _color_dec, Button);
337
- __decorateElement(_init, 5, "variant", _variant_dec, Button);
338
- __decorateElement(_init, 5, "size", _size_dec, Button);
339
- __decorateElement(_init, 5, "disabled", _disabled_dec, Button);
340
- __decorateElement(_init, 5, "type", _type_dec, Button);
341
- __decorateElement(_init, 5, "active", _active_dec, Button);
342
- __decorateElement(_init, 5, "block", _block_dec, Button);
343
- __decoratorMetadata(_init, Button);
344
- __publicField(Button, "styles", [variables, sizeCSS, colorCSS, buttonStyle]);
345
- Button.register();
346
- export {
347
- Button as B
348
- };
349
- //# sourceMappingURL=button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.js","sources":["../../src/button/button.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 buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n"],"names":["_a","styleVariables"],"mappings":"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"}
@@ -1,93 +0,0 @@
1
- "use strict";
2
- const variables = require("./variables.cjs");
3
- const color = require("./color.cjs");
4
- const aeicoComponent = require("./aeico-component.cjs");
5
- const aeico = require("aeico");
6
- const cardStyle = ':host {\n display: block;\n\n --card-bg: var(--color-bg-subtle);\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border-subtle);\n --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n --card-bg: var(--color-bg-subtle);\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border-subtle);\n --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n --card-border: transparent;\n --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n --card-bg: var(--color-solid);\n --card-color: var(--color-on-solid);\n --card-border: var(--color-solid);\n --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n --card-bg: transparent;\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border);\n --card-divider: var(--color-border-subtle);\n}\n\n.card {\n border: 1px solid var(--card-border);\n border-radius: 8px;\n background: var(--card-bg);\n color: var(--card-color);\n overflow: hidden;\n}\n\n.header,\n.footer {\n display: none;\n padding: 10px 16px;\n font-size: 14px;\n font-weight: 500;\n}\n\n:host([has-header]) .header {\n display: block;\n border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n display: block;\n border-top: 1px solid var(--card-divider);\n}\n\n.body {\n padding: 16px;\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, typeof key !== "symbol" ? key + "" : 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 _variant_dec, _color_dec, _a, _init, _color, _variant;
53
- class Card extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _a) {
54
- constructor() {
55
- super(...arguments);
56
- __privateAdd(this, _color, __runInitializers(_init, 8, this, "default")), __runInitializers(_init, 11, this);
57
- __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
58
- }
59
- render() {
60
- return aeico.html(({ div, header, footer, slot }) => {
61
- div({ className: "card", part: "card" }, () => {
62
- header({ className: "header", part: "header" }, () => {
63
- slot({ name: "header", "@slotchange": (e) => this._onHeaderSlotChange(e) });
64
- });
65
- div({ className: "body", part: "body" }, () => {
66
- slot();
67
- });
68
- footer({ className: "footer", part: "footer" }, () => {
69
- slot({ name: "footer", "@slotchange": (e) => this._onFooterSlotChange(e) });
70
- });
71
- });
72
- });
73
- }
74
- _onHeaderSlotChange(e) {
75
- const slot = e.target;
76
- this.toggleAttribute("has-header", slot.assignedNodes({ flatten: true }).length > 0);
77
- }
78
- _onFooterSlotChange(e) {
79
- const slot = e.target;
80
- this.toggleAttribute("has-footer", slot.assignedNodes({ flatten: true }).length > 0);
81
- }
82
- }
83
- _init = __decoratorStart(_a);
84
- _color = /* @__PURE__ */ new WeakMap();
85
- _variant = /* @__PURE__ */ new WeakMap();
86
- __decorateElement(_init, 4, "color", _color_dec, Card, _color);
87
- __decorateElement(_init, 4, "variant", _variant_dec, Card, _variant);
88
- __decoratorMetadata(_init, Card);
89
- __publicField(Card, "tagName", "card");
90
- __publicField(Card, "styles", [variables.variables, color.colorCSS, cardStyle]);
91
- Card.register();
92
- exports.Card = Card;
93
- //# sourceMappingURL=card.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"card.cjs","sources":["../../src/card/card.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport cardStyle from '../styles/components/card.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { CardVariant, CardColor } from './defines';\nimport { prop } from 'aeico';\n\nclass Card extends AeicoComponent {\n static tagName = 'card';\n\n protected static styles = [styleVariables, colorCSS, cardStyle];\n\n @prop({ type: String })\n accessor color: CardColor = 'default';\n\n @prop({ type: String })\n accessor variant: CardVariant = 'filled';\n\n protected render() {\n return html(({ div, header, footer, slot }) => {\n div({ className: 'card', part: 'card' }, () => {\n header({ className: 'header', part: 'header' }, () => {\n slot({ name: 'header', '@slotchange': (e: Event) => this._onHeaderSlotChange(e) });\n });\n div({ className: 'body', part: 'body' }, () => {\n slot();\n });\n footer({ className: 'footer', part: 'footer' }, () => {\n slot({ name: 'footer', '@slotchange': (e: Event) => this._onFooterSlotChange(e) });\n });\n });\n });\n }\n\n private _onHeaderSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.toggleAttribute('has-header', slot.assignedNodes({ flatten: true }).length > 0);\n }\n\n private _onFooterSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.toggleAttribute('has-footer', slot.assignedNodes({ flatten: true }).length > 0);\n }\n}\n\nCard.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-card': Card;\n }\n}\n\nexport default Card;\nexport type CardProps = InferProps<typeof Card>;\n"],"names":["AeicoComponent","prop","html","styleVariables","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,cAAA,YAAA,IAAA,OAAA,QAAA;AASA,MAAM,cAAa,KAAAA,+BAKjB,aAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,OAAA,CAAQ,IARL,IAAe;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAME,iBAAA,MAAS,QAAmB,kBAA5B,OAAA,GAAA,MAA4B,SAAA,CAAA,GAA5B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAuB,kBAAhC,OAAA,IAAA,MAAgC,QAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,QAAQ,QAAQ,WAAW;AAC7C,UAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AACD,YAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAA;AAAA,QACF,CAAC;AACD,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AACF;AApCA,QAAA,iBAAA,EAAA;AAMW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAHT,kBAAA,OAAA,GAAS,SADT,YALI,MAMK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cARI,MASK,QAAA;AATX,oBAAA,OAAM,IAAA;AACJ,cADI,MACG,WAAU,MAAA;AAEjB,cAHI,MAGa,UAAS,CAACC,UAAAA,WAAgBC,MAAAA,UAAU,SAAS,CAAA;AAmChE,KAAK,SAAA;;"}
@@ -1,94 +0,0 @@
1
- import { v as variables } from "./variables.js";
2
- import { c as colorCSS } from "./color.js";
3
- import { A as AeicoComponent } from "./aeico-component.js";
4
- import { prop, html } from "aeico";
5
- const cardStyle = ':host {\n display: block;\n\n --card-bg: var(--color-bg-subtle);\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border-subtle);\n --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n --card-bg: var(--color-bg-subtle);\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border-subtle);\n --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n --card-border: transparent;\n --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n --card-bg: var(--color-solid);\n --card-color: var(--color-on-solid);\n --card-border: var(--color-solid);\n --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n --card-bg: transparent;\n --card-color: var(--color-text-subtle);\n --card-border: var(--color-border);\n --card-divider: var(--color-border-subtle);\n}\n\n.card {\n border: 1px solid var(--card-border);\n border-radius: 8px;\n background: var(--card-bg);\n color: var(--card-color);\n overflow: hidden;\n}\n\n.header,\n.footer {\n display: none;\n padding: 10px 16px;\n font-size: 14px;\n font-weight: 500;\n}\n\n:host([has-header]) .header {\n display: block;\n border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n display: block;\n border-top: 1px solid var(--card-divider);\n}\n\n.body {\n padding: 16px;\n}\n';
6
- var __create = Object.create;
7
- var __defProp = Object.defineProperty;
8
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
9
- var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
10
- var __typeError = (msg) => {
11
- throw TypeError(msg);
12
- };
13
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
15
- var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
16
- var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
17
- var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
18
- var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
19
- var __runInitializers = (array, flags, self, value) => {
20
- 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);
21
- return value;
22
- };
23
- var __decorateElement = (array, flags, name, decorators, target, extra) => {
24
- var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
25
- var j = array.length + 1, key = __decoratorStrings[k + 5];
26
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
27
- var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
28
- return __privateGet(this, extra);
29
- }, set [name](x) {
30
- return __privateSet(this, extra, x);
31
- } }, name));
32
- for (var i = decorators.length - 1; i >= 0; i--) {
33
- ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
34
- {
35
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
36
- access.get = (x) => x[name];
37
- access.set = (x, y) => x[name] = y;
38
- }
39
- it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
40
- if (it === void 0) __expectFn(it) && (desc[key] = it);
41
- else if (typeof it !== "object" || it === null) __typeError("Object expected");
42
- else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
43
- }
44
- return desc && __defProp(target, name, desc), target;
45
- };
46
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
47
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
48
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
49
- 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);
50
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
51
- var _variant_dec, _color_dec, _a, _init, _color, _variant;
52
- class Card extends (_a = AeicoComponent, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _a) {
53
- constructor() {
54
- super(...arguments);
55
- __privateAdd(this, _color, __runInitializers(_init, 8, this, "default")), __runInitializers(_init, 11, this);
56
- __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
57
- }
58
- render() {
59
- return html(({ div, header, footer, slot }) => {
60
- div({ className: "card", part: "card" }, () => {
61
- header({ className: "header", part: "header" }, () => {
62
- slot({ name: "header", "@slotchange": (e) => this._onHeaderSlotChange(e) });
63
- });
64
- div({ className: "body", part: "body" }, () => {
65
- slot();
66
- });
67
- footer({ className: "footer", part: "footer" }, () => {
68
- slot({ name: "footer", "@slotchange": (e) => this._onFooterSlotChange(e) });
69
- });
70
- });
71
- });
72
- }
73
- _onHeaderSlotChange(e) {
74
- const slot = e.target;
75
- this.toggleAttribute("has-header", slot.assignedNodes({ flatten: true }).length > 0);
76
- }
77
- _onFooterSlotChange(e) {
78
- const slot = e.target;
79
- this.toggleAttribute("has-footer", slot.assignedNodes({ flatten: true }).length > 0);
80
- }
81
- }
82
- _init = __decoratorStart(_a);
83
- _color = /* @__PURE__ */ new WeakMap();
84
- _variant = /* @__PURE__ */ new WeakMap();
85
- __decorateElement(_init, 4, "color", _color_dec, Card, _color);
86
- __decorateElement(_init, 4, "variant", _variant_dec, Card, _variant);
87
- __decoratorMetadata(_init, Card);
88
- __publicField(Card, "tagName", "card");
89
- __publicField(Card, "styles", [variables, colorCSS, cardStyle]);
90
- Card.register();
91
- export {
92
- Card as C
93
- };
94
- //# sourceMappingURL=card.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport cardStyle from '../styles/components/card.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { CardVariant, CardColor } from './defines';\nimport { prop } from 'aeico';\n\nclass Card extends AeicoComponent {\n static tagName = 'card';\n\n protected static styles = [styleVariables, colorCSS, cardStyle];\n\n @prop({ type: String })\n accessor color: CardColor = 'default';\n\n @prop({ type: String })\n accessor variant: CardVariant = 'filled';\n\n protected render() {\n return html(({ div, header, footer, slot }) => {\n div({ className: 'card', part: 'card' }, () => {\n header({ className: 'header', part: 'header' }, () => {\n slot({ name: 'header', '@slotchange': (e: Event) => this._onHeaderSlotChange(e) });\n });\n div({ className: 'body', part: 'body' }, () => {\n slot();\n });\n footer({ className: 'footer', part: 'footer' }, () => {\n slot({ name: 'footer', '@slotchange': (e: Event) => this._onFooterSlotChange(e) });\n });\n });\n });\n }\n\n private _onHeaderSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.toggleAttribute('has-header', slot.assignedNodes({ flatten: true }).length > 0);\n }\n\n private _onFooterSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n this.toggleAttribute('has-footer', slot.assignedNodes({ flatten: true }).length > 0);\n }\n}\n\nCard.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-card': Card;\n }\n}\n\nexport default Card;\nexport type CardProps = InferProps<typeof Card>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,cAAA,YAAA,IAAA,OAAA,QAAA;AASA,MAAM,cAAa,KAAA,gBAKjB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IARL,IAAe;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAME,iBAAA,MAAS,QAAmB,kBAA5B,OAAA,GAAA,MAA4B,SAAA,CAAA,GAA5B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAuB,kBAAhC,OAAA,IAAA,MAAgC,QAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,KAAK,QAAQ,QAAQ,WAAW;AAC7C,UAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AACD,YAAI,EAAE,WAAW,QAAQ,MAAM,OAAA,GAAU,MAAM;AAC7C,eAAA;AAAA,QACF,CAAC;AACD,eAAO,EAAE,WAAW,UAAU,MAAM,SAAA,GAAY,MAAM;AACpD,eAAK,EAAE,MAAM,UAAU,eAAe,CAAC,MAAa,KAAK,oBAAoB,CAAC,GAAG;AAAA,QACnF,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AAAA,EAEQ,oBAAoB,GAAU;AACpC,UAAM,OAAO,EAAE;AACf,SAAK,gBAAgB,cAAc,KAAK,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS,CAAC;AAAA,EACrF;AACF;AApCA,QAAA,iBAAA,EAAA;AAMW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAHT,kBAAA,OAAA,GAAS,SADT,YALI,MAMK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cARI,MASK,QAAA;AATX,oBAAA,OAAM,IAAA;AACJ,cADI,MACG,WAAU,MAAA;AAEjB,cAHI,MAGa,UAAS,CAACA,WAAgB,UAAU,SAAS,CAAA;AAmChE,KAAK,SAAA;"}
@@ -1,86 +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 actionButton = require("./action-button.cjs");
6
- const aeico = require("aeico");
7
- const variables = require("./variables.cjs");
8
- const size = require("./size.cjs");
9
- const color = require("./color.cjs");
10
- const styles = ":host {\n display: block;\n flex: 1;\n min-width: 0;\n font-size: var(--size-base);\n\n /* Layout */\n --checkbox-field-gap: 4px;\n\n /* Checkbox */\n --checkbox-size: 1.167em;\n --checkbox-border-width: 1px;\n --checkbox-border-radius: 2px;\n --checkbox-border-color: var(--border-subtle);\n --checkbox-bg: var(--surface-base);\n --checkbox-accent-color: var(--color-solid);\n\n /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n display: flex;\n align-items: center;\n gap: var(--checkbox-field-gap);\n width: 100%;\n}\n\n.checkbox-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.field-input {\n width: var(--checkbox-size);\n height: var(--checkbox-size);\n cursor: pointer;\n border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n border-radius: var(--checkbox-border-radius);\n background: var(--checkbox-bg);\n accent-color: var(--checkbox-accent-color);\n margin: 0;\n flex-shrink: 0;\n}\n\n.field-input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n outline: 2px solid var(--field-error-color, var(--red));\n outline-offset: 1px;\n}\n";
11
- class Checkbox extends actionButton.AeicoField {
12
- constructor() {
13
- super(...arguments);
14
- __publicField(this, "fieldElement", null);
15
- }
16
- getValue() {
17
- var _a;
18
- return ((_a = this.fieldElement) == null ? void 0 : _a.checked) ?? false;
19
- }
20
- writeValue(checked) {
21
- if (this.fieldElement) {
22
- this.fieldElement.checked = Boolean(checked);
23
- }
24
- }
25
- getEventPayload(checked, oldChecked, action) {
26
- return { checked, oldChecked, action };
27
- }
28
- setValue(checked, options) {
29
- const oldChecked = this.getValue();
30
- this.checked = checked;
31
- this.writeValue(checked);
32
- if ((options == null ? void 0 : options.silent) === false) {
33
- this.emit("change", {
34
- detail: this.getEventPayload(checked, oldChecked, options.action || "change")
35
- });
36
- }
37
- }
38
- reset(checked, options) {
39
- this.setValue(checked !== void 0 ? checked : this.defaultChecked ?? false, {
40
- ...options,
41
- action: "reset"
42
- });
43
- }
44
- clear(options) {
45
- this.setValue(false, { ...options, action: "clear" });
46
- }
47
- render() {
48
- return aeico.html(({ div, input }) => {
49
- const id = this.getFieldId();
50
- this.renderLabel(id);
51
- div({ className: "checkbox-container field-body", variant: this.variant }, () => {
52
- div({ className: "checkbox-wrapper" }, () => {
53
- this.fieldElement = input({
54
- id,
55
- type: "checkbox",
56
- className: "field-input",
57
- checked: Boolean(this.checked),
58
- disabled: Boolean(this.disabled),
59
- required: Boolean(this.required),
60
- "@change": this.boundOnChange
61
- });
62
- });
63
- this.renderActionButtons();
64
- });
65
- this.renderHelperText();
66
- this.renderError();
67
- });
68
- }
69
- }
70
- __publicField(Checkbox, "tagName", "checkbox");
71
- __publicField(Checkbox, "props", {
72
- checked: { type: Boolean },
73
- defaultChecked: { type: Boolean },
74
- variant: { type: String }
75
- });
76
- __publicField(Checkbox, "styles", [
77
- variables.variables,
78
- size.sizeCSS,
79
- color.colorCSS,
80
- actionButton.fieldLabelCSS,
81
- actionButton.actionButtonCSS,
82
- styles
83
- ]);
84
- Checkbox.register();
85
- exports.Checkbox = Checkbox;
86
- //# sourceMappingURL=checkbox.cjs.map