aeico-components 0.1.5 → 0.1.6

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 (284) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +0 -0
  3. package/dist/chunks/action-button.cjs +296 -0
  4. package/dist/chunks/action-button.cjs.map +1 -0
  5. package/dist/chunks/action-button.js +297 -0
  6. package/dist/chunks/action-button.js.map +1 -0
  7. package/dist/chunks/alert.cjs +4 -4
  8. package/dist/chunks/alert.cjs.map +1 -1
  9. package/dist/chunks/alert.js +5 -5
  10. package/dist/chunks/alert.js.map +1 -1
  11. package/dist/chunks/badge.cjs +1 -1
  12. package/dist/chunks/badge.cjs.map +1 -1
  13. package/dist/chunks/badge.js +2 -2
  14. package/dist/chunks/badge.js.map +1 -1
  15. package/dist/chunks/breadcrumb-item.cjs +2 -2
  16. package/dist/chunks/breadcrumb-item.cjs.map +1 -1
  17. package/dist/chunks/breadcrumb-item.js +3 -3
  18. package/dist/chunks/breadcrumb-item.js.map +1 -1
  19. package/dist/chunks/button-group.cjs +1 -1
  20. package/dist/chunks/button-group.cjs.map +1 -1
  21. package/dist/chunks/button-group.js +2 -2
  22. package/dist/chunks/button-group.js.map +1 -1
  23. package/dist/chunks/button.cjs +1 -1
  24. package/dist/chunks/button.cjs.map +1 -1
  25. package/dist/chunks/button.js +2 -2
  26. package/dist/chunks/button.js.map +1 -1
  27. package/dist/chunks/card.cjs +1 -1
  28. package/dist/chunks/card.cjs.map +1 -1
  29. package/dist/chunks/card.js +2 -2
  30. package/dist/chunks/card.js.map +1 -1
  31. package/dist/chunks/checkbox.cjs +18 -5
  32. package/dist/chunks/checkbox.cjs.map +1 -1
  33. package/dist/chunks/checkbox.js +18 -5
  34. package/dist/chunks/checkbox.js.map +1 -1
  35. package/dist/chunks/copy-button.cjs +168 -0
  36. package/dist/chunks/copy-button.cjs.map +1 -0
  37. package/dist/chunks/copy-button.js +169 -0
  38. package/dist/chunks/copy-button.js.map +1 -0
  39. package/dist/chunks/detail.cjs +7 -4
  40. package/dist/chunks/detail.cjs.map +1 -1
  41. package/dist/chunks/detail.js +8 -5
  42. package/dist/chunks/detail.js.map +1 -1
  43. package/dist/chunks/dialog.cjs +1 -1
  44. package/dist/chunks/dialog.cjs.map +1 -1
  45. package/dist/chunks/dialog.js +2 -2
  46. package/dist/chunks/dialog.js.map +1 -1
  47. package/dist/chunks/divider.cjs +1 -1
  48. package/dist/chunks/divider.cjs.map +1 -1
  49. package/dist/chunks/divider.js +2 -2
  50. package/dist/chunks/divider.js.map +1 -1
  51. package/dist/chunks/drawer.cjs +180 -0
  52. package/dist/chunks/drawer.cjs.map +1 -0
  53. package/dist/chunks/drawer.js +181 -0
  54. package/dist/chunks/drawer.js.map +1 -0
  55. package/dist/chunks/dropdown-button.cjs +2 -2
  56. package/dist/chunks/dropdown-button.cjs.map +1 -1
  57. package/dist/chunks/dropdown-button.js +3 -3
  58. package/dist/chunks/dropdown-button.js.map +1 -1
  59. package/dist/chunks/icon.cjs +31 -1
  60. package/dist/chunks/icon.cjs.map +1 -1
  61. package/dist/chunks/icon.js +32 -2
  62. package/dist/chunks/icon.js.map +1 -1
  63. package/dist/chunks/menu.cjs +396 -0
  64. package/dist/chunks/menu.cjs.map +1 -0
  65. package/dist/chunks/menu.js +397 -0
  66. package/dist/chunks/menu.js.map +1 -0
  67. package/dist/chunks/navbar.cjs +1 -1
  68. package/dist/chunks/navbar.cjs.map +1 -1
  69. package/dist/chunks/navbar.js +2 -2
  70. package/dist/chunks/navbar.js.map +1 -1
  71. package/dist/chunks/pagination.cjs +475 -0
  72. package/dist/chunks/pagination.cjs.map +1 -0
  73. package/dist/chunks/pagination.js +476 -0
  74. package/dist/chunks/pagination.js.map +1 -0
  75. package/dist/chunks/progress-bar.cjs +101 -0
  76. package/dist/chunks/progress-bar.cjs.map +1 -0
  77. package/dist/chunks/progress-bar.js +102 -0
  78. package/dist/chunks/progress-bar.js.map +1 -0
  79. package/dist/chunks/radio.cjs +11 -7
  80. package/dist/chunks/radio.cjs.map +1 -1
  81. package/dist/chunks/radio.js +11 -7
  82. package/dist/chunks/radio.js.map +1 -1
  83. package/dist/chunks/select.cjs +97 -66
  84. package/dist/chunks/select.cjs.map +1 -1
  85. package/dist/chunks/select.js +97 -66
  86. package/dist/chunks/select.js.map +1 -1
  87. package/dist/chunks/slider.cjs +9 -46
  88. package/dist/chunks/slider.cjs.map +1 -1
  89. package/dist/chunks/slider.js +9 -46
  90. package/dist/chunks/slider.js.map +1 -1
  91. package/dist/chunks/spinner.cjs +102 -0
  92. package/dist/chunks/spinner.cjs.map +1 -0
  93. package/dist/chunks/spinner.js +103 -0
  94. package/dist/chunks/spinner.js.map +1 -0
  95. package/dist/chunks/switch.cjs +110 -16
  96. package/dist/chunks/switch.cjs.map +1 -1
  97. package/dist/chunks/switch.js +111 -17
  98. package/dist/chunks/switch.js.map +1 -1
  99. package/dist/chunks/tab-panel.cjs +3 -3
  100. package/dist/chunks/tab-panel.cjs.map +1 -1
  101. package/dist/chunks/tab-panel.js +4 -4
  102. package/dist/chunks/tab-panel.js.map +1 -1
  103. package/dist/chunks/tag.cjs +1 -1
  104. package/dist/chunks/tag.cjs.map +1 -1
  105. package/dist/chunks/tag.js +2 -2
  106. package/dist/chunks/tag.js.map +1 -1
  107. package/dist/chunks/text-input.cjs +11 -16
  108. package/dist/chunks/text-input.cjs.map +1 -1
  109. package/dist/chunks/text-input.js +11 -16
  110. package/dist/chunks/text-input.js.map +1 -1
  111. package/dist/chunks/textarea.cjs +137 -0
  112. package/dist/chunks/textarea.cjs.map +1 -0
  113. package/dist/chunks/textarea.js +138 -0
  114. package/dist/chunks/textarea.js.map +1 -0
  115. package/dist/chunks/tooltip.cjs +293 -0
  116. package/dist/chunks/tooltip.cjs.map +1 -0
  117. package/dist/chunks/tooltip.js +294 -0
  118. package/dist/chunks/tooltip.js.map +1 -0
  119. package/dist/chunks/tree.cjs +468 -0
  120. package/dist/chunks/tree.cjs.map +1 -0
  121. package/dist/chunks/tree.js +469 -0
  122. package/dist/chunks/tree.js.map +1 -0
  123. package/dist/chunks/variables.cjs +2 -2
  124. package/dist/chunks/variables.js +2 -2
  125. package/dist/copy-button.cjs +6 -0
  126. package/dist/copy-button.cjs.map +1 -0
  127. package/dist/copy-button.js +6 -0
  128. package/dist/copy-button.js.map +1 -0
  129. package/dist/drawer.cjs +6 -0
  130. package/dist/drawer.cjs.map +1 -0
  131. package/dist/drawer.js +6 -0
  132. package/dist/drawer.js.map +1 -0
  133. package/dist/index.cjs +175 -88
  134. package/dist/index.cjs.map +1 -1
  135. package/dist/index.js +186 -99
  136. package/dist/index.js.map +1 -1
  137. package/dist/menu.cjs +6 -0
  138. package/dist/menu.cjs.map +1 -0
  139. package/dist/menu.js +6 -0
  140. package/dist/menu.js.map +1 -0
  141. package/dist/pagination.cjs +6 -0
  142. package/dist/pagination.cjs.map +1 -0
  143. package/dist/pagination.js +6 -0
  144. package/dist/pagination.js.map +1 -0
  145. package/dist/progress-bar.cjs +6 -0
  146. package/dist/progress-bar.cjs.map +1 -0
  147. package/dist/progress-bar.js +6 -0
  148. package/dist/progress-bar.js.map +1 -0
  149. package/dist/select.cjs +1 -1
  150. package/dist/select.cjs.map +1 -1
  151. package/dist/select.js +2 -2
  152. package/dist/select.js.map +1 -1
  153. package/dist/spinner.cjs +6 -0
  154. package/dist/spinner.cjs.map +1 -0
  155. package/dist/spinner.js +6 -0
  156. package/dist/spinner.js.map +1 -0
  157. package/dist/textarea.cjs +5 -0
  158. package/dist/textarea.cjs.map +1 -0
  159. package/dist/textarea.js +5 -0
  160. package/dist/textarea.js.map +1 -0
  161. package/dist/tooltip.cjs +6 -0
  162. package/dist/tooltip.cjs.map +1 -0
  163. package/dist/tooltip.js +6 -0
  164. package/dist/tooltip.js.map +1 -0
  165. package/dist/tree.cjs +6 -0
  166. package/dist/tree.cjs.map +1 -0
  167. package/dist/tree.js +6 -0
  168. package/dist/tree.js.map +1 -0
  169. package/dist/types/aeico-field.d.ts +52 -0
  170. package/dist/types/alert/alert.d.ts +1 -0
  171. package/dist/types/copy-button/copy-button.d.ts +32 -0
  172. package/dist/types/copy-button/defines.d.ts +1 -0
  173. package/dist/types/copy-button/index.d.ts +3 -0
  174. package/dist/types/detail/defines.d.ts +1 -0
  175. package/dist/types/detail/detail.d.ts +3 -1
  176. package/dist/types/detail/index.d.ts +1 -1
  177. package/dist/types/detail-group/detail-group.d.ts +39 -0
  178. package/dist/types/detail-group/index.d.ts +2 -0
  179. package/dist/types/drawer/defines.d.ts +1 -0
  180. package/dist/types/drawer/drawer.d.ts +31 -0
  181. package/dist/types/drawer/index.d.ts +3 -0
  182. package/dist/types/icon/built-in-icons.d.ts +1 -0
  183. package/dist/types/icon/icon.d.ts +1 -0
  184. package/dist/types/icon/registry.d.ts +8 -0
  185. package/dist/types/index.d.ts +17 -0
  186. package/dist/types/menu/defines.d.ts +15 -0
  187. package/dist/types/menu/index.d.ts +5 -0
  188. package/dist/types/menu/menu-item.d.ts +63 -0
  189. package/dist/types/menu/menu.d.ts +34 -0
  190. package/dist/types/number-input/index.d.ts +2 -0
  191. package/dist/types/number-input/number-input.d.ts +35 -0
  192. package/dist/types/pagination/defines.d.ts +2 -0
  193. package/dist/types/pagination/index.d.ts +3 -0
  194. package/dist/types/pagination/pagination.d.ts +77 -0
  195. package/dist/types/select/select.d.ts +2 -2
  196. package/dist/types/spinner/defines.d.ts +3 -0
  197. package/dist/types/spinner/index.d.ts +3 -0
  198. package/dist/types/spinner/spinner.d.ts +35 -0
  199. package/dist/types/switch/defines.d.ts +1 -0
  200. package/dist/types/switch/switch.d.ts +8 -4
  201. package/dist/types/text-input/text-input.d.ts +0 -4
  202. package/dist/types/textarea/index.d.ts +1 -0
  203. package/dist/types/textarea/textarea.d.ts +26 -0
  204. package/dist/types/tooltip/defines.d.ts +2 -0
  205. package/dist/types/tooltip/index.d.ts +4 -0
  206. package/dist/types/tooltip/tooltip.d.ts +48 -0
  207. package/dist/types/tree/defines.d.ts +23 -0
  208. package/dist/types/tree/index.d.ts +5 -0
  209. package/dist/types/tree/tree-item.d.ts +54 -0
  210. package/dist/types/tree/tree.d.ts +64 -0
  211. package/package.json +5 -5
  212. package/src/aeico-field.ts +142 -7
  213. package/src/alert/alert.ts +3 -2
  214. package/src/checkbox/checkbox.ts +17 -2
  215. package/src/copy-button/copy-button.ts +146 -0
  216. package/src/copy-button/defines.ts +5 -0
  217. package/src/copy-button/index.ts +3 -0
  218. package/src/detail/defines.ts +1 -0
  219. package/src/detail/detail.ts +5 -1
  220. package/src/detail/index.ts +1 -1
  221. package/src/detail-group/detail-group.ts +104 -0
  222. package/src/detail-group/index.ts +2 -0
  223. package/src/drawer/defines.ts +1 -0
  224. package/src/drawer/drawer.ts +157 -0
  225. package/src/drawer/index.ts +3 -0
  226. package/src/icon/built-in-icons.ts +21 -0
  227. package/src/icon/icon.ts +1 -0
  228. package/src/icon/registry.ts +22 -0
  229. package/src/index.ts +30 -0
  230. package/src/menu/defines.ts +17 -0
  231. package/src/menu/index.ts +5 -0
  232. package/src/menu/menu-item.ts +315 -0
  233. package/src/menu/menu.ts +81 -0
  234. package/src/number-input/index.ts +2 -0
  235. package/src/number-input/number-input.ts +137 -0
  236. package/src/pagination/defines.ts +2 -0
  237. package/src/pagination/index.ts +3 -0
  238. package/src/pagination/pagination.ts +310 -0
  239. package/src/radio-group/radio-group.ts +11 -4
  240. package/src/select/select.ts +111 -70
  241. package/src/slider/slider.ts +9 -2
  242. package/src/spinner/defines.ts +12 -0
  243. package/src/spinner/index.ts +3 -0
  244. package/src/spinner/spinner.ts +81 -0
  245. package/src/styles/components/action-button.css +37 -0
  246. package/src/styles/components/checkbox.css +4 -26
  247. package/src/styles/components/copy-button.css +119 -0
  248. package/src/styles/components/detail-group.css +10 -0
  249. package/src/styles/components/detail.css +10 -1
  250. package/src/styles/components/drawer.css +161 -0
  251. package/src/styles/components/field-label.css +120 -0
  252. package/src/styles/components/menu-item.css +168 -0
  253. package/src/styles/components/menu.css +17 -0
  254. package/src/styles/components/number-input.css +167 -0
  255. package/src/styles/components/pagination.css +205 -0
  256. package/src/styles/components/radio-group.css +0 -23
  257. package/src/styles/components/select.css +12 -39
  258. package/src/styles/components/slider.css +0 -42
  259. package/src/styles/components/spinner.css +80 -0
  260. package/src/styles/components/switch.css +68 -19
  261. package/src/styles/components/tab-panel.css +1 -1
  262. package/src/styles/components/tabs.css +1 -0
  263. package/src/styles/components/text-input.css +7 -45
  264. package/src/styles/components/textarea.css +75 -0
  265. package/src/styles/components/tooltip.css +103 -0
  266. package/src/styles/components/tree-item.css +152 -0
  267. package/src/styles/components/tree.css +10 -0
  268. package/src/styles/layout.css +457 -25
  269. package/src/switch/defines.ts +1 -0
  270. package/src/switch/switch.ts +61 -12
  271. package/src/text-input/text-input.ts +10 -15
  272. package/src/textarea/index.ts +1 -0
  273. package/src/textarea/textarea.ts +107 -0
  274. package/src/tooltip/defines.ts +11 -0
  275. package/src/tooltip/index.ts +4 -0
  276. package/src/tooltip/tooltip.ts +183 -0
  277. package/src/tree/defines.ts +26 -0
  278. package/src/tree/index.ts +5 -0
  279. package/src/tree/tree-item.ts +258 -0
  280. package/src/tree/tree.ts +237 -0
  281. package/dist/chunks/aeico-field.cjs +0 -179
  282. package/dist/chunks/aeico-field.cjs.map +0 -1
  283. package/dist/chunks/aeico-field.js +0 -180
  284. package/dist/chunks/aeico-field.js.map +0 -1
@@ -0,0 +1,138 @@
1
+ import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
2
+ import { prop, html } from "aeico";
3
+ import { v as variables } from "./variables.js";
4
+ import { s as sizeCSS } from "./size.js";
5
+ const style = ":host {\n display: block;\n flex: 1;\n min-width: 0;\n font-size: var(--size-base);\n\n --textarea-font-size: 1em;\n --textarea-padding: 0.333em 0.583em;\n --textarea-border-width: 1px;\n --textarea-border-radius: 2px;\n --textarea-border-color: var(--border-subtle);\n --textarea-border-color-hover: var(--border-default);\n --textarea-border-color-focus: var(--border-focus);\n --textarea-bg: var(--surface-base);\n --textarea-bg-hover: var(--surface-raised);\n --textarea-bg-focus: var(--surface-raised);\n --textarea-color: var(--color-text-muted);\n --textarea-placeholder-color: var(--color-text-disabled);\n --textarea-transition: border-color 0.12s, background 0.12s;\n}\n\n.textarea-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n width: 100%;\n}\n\ntextarea {\n flex: 1;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n font-size: var(--textarea-font-size);\n font-family: inherit;\n line-height: 1.5;\n padding: var(--textarea-padding);\n border: var(--textarea-border-width) solid var(--textarea-border-color);\n border-radius: var(--textarea-border-radius);\n background: var(--textarea-bg);\n color: var(--textarea-color);\n transition: var(--textarea-transition);\n resize: vertical;\n}\n\ntextarea::placeholder {\n color: var(--textarea-placeholder-color);\n}\n\ntextarea:focus {\n outline: none;\n border-color: var(--textarea-border-color-focus);\n background: var(--textarea-bg-focus);\n}\n\ntextarea:hover:not(:focus) {\n border-color: var(--textarea-border-color-hover);\n background: var(--textarea-bg-hover);\n}\n\ntextarea:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n resize: none;\n}\n\n/* Error state */\n:host([error]) textarea {\n border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) textarea:hover:not(:focus),\n:host([error]) textarea:focus {\n border-color: var(--field-error-color, var(--red));\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 _autoResize_dec, _resize_dec, _minlength_dec, _maxlength_dec, _rows_dec, _placeholder_dec, _a, _init, _placeholder, _rows, _maxlength, _minlength, _resize, _autoResize;
52
+ class Textarea extends (_a = AeicoField, _placeholder_dec = [prop({ type: String })], _rows_dec = [prop({ type: Number })], _maxlength_dec = [prop({ type: Number })], _minlength_dec = [prop({ type: Number })], _resize_dec = [prop({ type: String })], _autoResize_dec = [prop({ type: Boolean })], _a) {
53
+ constructor() {
54
+ super(...arguments);
55
+ __publicField(this, "fieldElement", null);
56
+ __privateAdd(this, _placeholder, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
57
+ __privateAdd(this, _rows, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
58
+ __privateAdd(this, _maxlength, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
59
+ __privateAdd(this, _minlength, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
60
+ __privateAdd(this, _resize, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
61
+ __privateAdd(this, _autoResize, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
62
+ __publicField(this, "_boundOnInput", () => {
63
+ if (this.autoResize && this.fieldElement) {
64
+ this._syncAutoResize(this.fieldElement);
65
+ }
66
+ this.setValue(this.getValue(), { silent: false, action: "change" });
67
+ });
68
+ }
69
+ render() {
70
+ return html(({ div, textarea }) => {
71
+ const id = this.getFieldId();
72
+ this.renderLabel(id);
73
+ div({ className: "textarea-container field-body" }, () => {
74
+ this.fieldElement = textarea({
75
+ id,
76
+ placeholder: this.placeholder || "",
77
+ rows: this.rows ?? 3,
78
+ required: Boolean(this.required),
79
+ "@input": this._boundOnInput
80
+ });
81
+ this.renderActionButtons();
82
+ });
83
+ this.renderHelperText();
84
+ this.renderError();
85
+ if (this.fieldElement) {
86
+ if (this.value != null) {
87
+ this.fieldElement.value = String(this.value);
88
+ }
89
+ if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;
90
+ if (this.minlength != null) this.fieldElement.minLength = this.minlength;
91
+ this.fieldElement.style.resize = this.autoResize ? "none" : this.resize ?? "vertical";
92
+ if (this.autoResize) {
93
+ this._syncAutoResize(this.fieldElement);
94
+ }
95
+ this._updateClearButtonVisibility();
96
+ }
97
+ });
98
+ }
99
+ _syncAutoResize(ta) {
100
+ ta.style.height = "auto";
101
+ ta.style.height = `${ta.scrollHeight}px`;
102
+ }
103
+ _updateClearButtonVisibility() {
104
+ if (this.clearBtn && this.fieldElement) {
105
+ this.clearBtn.style.display = this.fieldElement.value.length > 0 ? "" : "none";
106
+ }
107
+ }
108
+ writeValue(value) {
109
+ if (this.fieldElement) {
110
+ this.fieldElement.value = String(value || "");
111
+ if (this.autoResize) {
112
+ this._syncAutoResize(this.fieldElement);
113
+ }
114
+ this._updateClearButtonVisibility();
115
+ }
116
+ }
117
+ }
118
+ _init = __decoratorStart(_a);
119
+ _placeholder = /* @__PURE__ */ new WeakMap();
120
+ _rows = /* @__PURE__ */ new WeakMap();
121
+ _maxlength = /* @__PURE__ */ new WeakMap();
122
+ _minlength = /* @__PURE__ */ new WeakMap();
123
+ _resize = /* @__PURE__ */ new WeakMap();
124
+ _autoResize = /* @__PURE__ */ new WeakMap();
125
+ __decorateElement(_init, 4, "placeholder", _placeholder_dec, Textarea, _placeholder);
126
+ __decorateElement(_init, 4, "rows", _rows_dec, Textarea, _rows);
127
+ __decorateElement(_init, 4, "maxlength", _maxlength_dec, Textarea, _maxlength);
128
+ __decorateElement(_init, 4, "minlength", _minlength_dec, Textarea, _minlength);
129
+ __decorateElement(_init, 4, "resize", _resize_dec, Textarea, _resize);
130
+ __decorateElement(_init, 4, "autoResize", _autoResize_dec, Textarea, _autoResize);
131
+ __decoratorMetadata(_init, Textarea);
132
+ __publicField(Textarea, "tagName", "textarea");
133
+ __publicField(Textarea, "styles", [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style]);
134
+ Textarea.register();
135
+ export {
136
+ Textarea as T
137
+ };
138
+ //# sourceMappingURL=textarea.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textarea.js","sources":["../../src/textarea/textarea.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/textarea.css?inline';\n\nexport type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';\n\nclass Textarea extends AeicoField {\n protected fieldElement: HTMLTextAreaElement | null = null;\n\n static tagName = 'textarea';\n\n @prop({ type: String })\n accessor placeholder: string | undefined;\n\n @prop({ type: Number })\n accessor rows: number | undefined;\n\n @prop({ type: Number })\n accessor maxlength: number | undefined;\n\n @prop({ type: Number })\n accessor minlength: number | undefined;\n\n @prop({ type: String })\n accessor resize: TextareaResize | undefined;\n\n @prop({ type: Boolean })\n accessor autoResize: boolean = false;\n\n protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n private readonly _boundOnInput = () => {\n if (this.autoResize && this.fieldElement) {\n this._syncAutoResize(this.fieldElement);\n }\n this.setValue(this.getValue(), { silent: false, action: 'change' });\n };\n\n render() {\n return html(({ div, textarea }) => {\n const id = this.getFieldId();\n this.renderLabel(id);\n div({ className: 'textarea-container field-body' }, () => {\n this.fieldElement = textarea({\n id,\n placeholder: this.placeholder || '',\n rows: this.rows ?? 3,\n required: Boolean(this.required),\n '@input': this._boundOnInput,\n });\n this.renderActionButtons();\n });\n this.renderHelperText();\n this.renderError();\n\n if (this.fieldElement) {\n if (this.value != null) {\n this.fieldElement.value = String(this.value);\n }\n if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;\n if (this.minlength != null) this.fieldElement.minLength = this.minlength;\n this.fieldElement.style.resize = this.autoResize ? 'none' : (this.resize ?? 'vertical');\n if (this.autoResize) {\n this._syncAutoResize(this.fieldElement);\n }\n this._updateClearButtonVisibility();\n }\n });\n }\n\n private _syncAutoResize(ta: HTMLTextAreaElement): void {\n ta.style.height = 'auto';\n ta.style.height = `${ta.scrollHeight}px`;\n }\n\n private _updateClearButtonVisibility(): void {\n if (this.clearBtn && this.fieldElement) {\n this.clearBtn.style.display = this.fieldElement.value.length > 0 ? '' : 'none';\n }\n }\n\n protected writeValue(value: string): void {\n if (this.fieldElement) {\n this.fieldElement.value = String(value || '');\n if (this.autoResize) {\n this._syncAutoResize(this.fieldElement);\n }\n this._updateClearButtonVisibility();\n }\n }\n}\n\nTextarea.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-textarea': Textarea;\n }\n}\n\nexport default Textarea;\nexport type TextareaProps = InferProps<typeof Textarea>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,aAAA,gBAAA,gBAAA,WAAA,kBAAA,IAAA,OAAA,cAAA,OAAA,YAAA,YAAA,SAAA;AAWA,MAAM,kBAAiB,iBAKrB,mBAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,YAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,kBAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,iBAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,cAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,mBAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IApBF,IAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AACE,kBAAA,MAAU,gBAA2C,IAAA;AAKrD,iBAAA,MAAS,cAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,SAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,aAAsB,kBAA/B,OAAA,IAAA,MAA+B,KAAA,CAAA,GAA/B,kBAAA,OAAA,IAAA,IAAA;AAIA,kBAAA,MAAiB,iBAAgB,MAAM;AACrC,UAAI,KAAK,cAAc,KAAK,cAAc;AACxC,aAAK,gBAAgB,KAAK,YAAY;AAAA,MACxC;AACA,WAAK,SAAS,KAAK,SAAA,GAAY,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,IACpE,CAAA;AAAA,EAAA;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,eAAe;AACjC,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,gCAAA,GAAmC,MAAM;AACxD,aAAK,eAAe,SAAS;AAAA,UAC3B;AAAA,UACA,aAAa,KAAK,eAAe;AAAA,UACjC,MAAM,KAAK,QAAQ;AAAA,UACnB,UAAU,QAAQ,KAAK,QAAQ;AAAA,UAC/B,UAAU,KAAK;AAAA,QAAA,CAChB;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAEL,UAAI,KAAK,cAAc;AACrB,YAAI,KAAK,SAAS,MAAM;AACtB,eAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,QAC7C;AACA,YAAI,KAAK,aAAa,KAAM,MAAK,aAAa,YAAY,KAAK;AAC/D,YAAI,KAAK,aAAa,KAAM,MAAK,aAAa,YAAY,KAAK;AAC/D,aAAK,aAAa,MAAM,SAAS,KAAK,aAAa,SAAU,KAAK,UAAU;AAC5E,YAAI,KAAK,YAAY;AACnB,eAAK,gBAAgB,KAAK,YAAY;AAAA,QACxC;AACA,aAAK,6BAAA;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB,IAA+B;AACrD,OAAG,MAAM,SAAS;AAClB,OAAG,MAAM,SAAS,GAAG,GAAG,YAAY;AAAA,EACtC;AAAA,EAEQ,+BAAqC;AAC3C,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,WAAK,SAAS,MAAM,UAAU,KAAK,aAAa,MAAM,SAAS,IAAI,KAAK;AAAA,IAC1E;AAAA,EACF;AAAA,EAEU,WAAW,OAAqB;AACxC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ,OAAO,SAAS,EAAE;AAC5C,UAAI,KAAK,YAAY;AACnB,aAAK,gBAAgB,KAAK,YAAY;AAAA,MACxC;AACA,WAAK,6BAAA;AAAA,IACP;AAAA,EACF;AACF;AApFA,QAAA,iBAAA,EAAA;AAMW,eAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,UAAA,oBAAA,QAAA;AAGA,cAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,eADT,kBALI,UAMK,YAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WARI,UASK,KAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBAXI,UAYK,UAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBAdI,UAeK,UAAA;AAGT,kBAAA,OAAA,GAAS,UADT,aAjBI,UAkBK,OAAA;AAGT,kBAAA,OAAA,GAAS,cADT,iBApBI,UAqBK,WAAA;AArBX,oBAAA,OAAM,QAAA;AAGJ,cAHI,UAGG,WAAU,UAAA;AAoBjB,cAvBI,UAuBa,UAAS,CAAC,WAAW,SAAS,eAAe,iBAAiB,KAAK,CAAA;AA+DtF,SAAS,SAAA;"}
@@ -0,0 +1,293 @@
1
+ "use strict";
2
+ const variables = require("./variables.cjs");
3
+ const aeicoComponent = require("./aeico-component.cjs");
4
+ const aeico = require("aeico");
5
+ const tooltipStyle = `:host {
6
+ display: inline-flex;
7
+ position: relative;
8
+ vertical-align: middle;
9
+
10
+ --ae-tooltip-z-index: 1000;
11
+ --ae-tooltip-bg: var(--dark, #343a40);
12
+ --ae-tooltip-color: #fff;
13
+ --ae-tooltip-padding: 0.3125rem 0.625rem;
14
+ --ae-tooltip-font-size: 0.8125rem;
15
+ --ae-tooltip-border-radius: 4px;
16
+ --ae-tooltip-arrow-size: 5px;
17
+ --ae-tooltip-gap: 6px;
18
+ --ae-tooltip-max-width: 20rem;
19
+ }
20
+
21
+ :host-context([theme="dark"]) {
22
+ --ae-tooltip-bg: var(--light, #f8f9fa);
23
+ --ae-tooltip-color: var(--dark, #343a40);
24
+ }
25
+
26
+ .tooltip-panel {
27
+ display: none;
28
+ position: fixed;
29
+ z-index: var(--ae-tooltip-z-index);
30
+ background: var(--ae-tooltip-bg);
31
+ color: var(--ae-tooltip-color);
32
+ padding: var(--ae-tooltip-padding);
33
+ font-size: var(--ae-tooltip-font-size);
34
+ font-family: inherit;
35
+ border-radius: var(--ae-tooltip-border-radius);
36
+ line-height: 1.4;
37
+ white-space: nowrap;
38
+ max-width: var(--ae-tooltip-max-width);
39
+ pointer-events: none;
40
+ box-sizing: border-box;
41
+ }
42
+
43
+ :host([open]) .tooltip-panel {
44
+ display: block;
45
+ }
46
+
47
+ /* Arrow */
48
+ .tooltip-panel::after {
49
+ content: '';
50
+ position: absolute;
51
+ border: var(--ae-tooltip-arrow-size) solid transparent;
52
+ pointer-events: none;
53
+ }
54
+
55
+ .placement-top::after,
56
+ .placement-top-start::after,
57
+ .placement-top-end::after {
58
+ top: 100%;
59
+ border-top-color: var(--ae-tooltip-bg);
60
+ }
61
+
62
+ .placement-top::after {
63
+ left: 50%;
64
+ transform: translateX(-50%);
65
+ }
66
+
67
+ .placement-top-start::after {
68
+ left: calc(var(--ae-tooltip-arrow-size) * 2);
69
+ }
70
+
71
+ .placement-top-end::after {
72
+ right: calc(var(--ae-tooltip-arrow-size) * 2);
73
+ }
74
+
75
+ .placement-bottom::after,
76
+ .placement-bottom-start::after,
77
+ .placement-bottom-end::after {
78
+ bottom: 100%;
79
+ border-bottom-color: var(--ae-tooltip-bg);
80
+ }
81
+
82
+ .placement-bottom::after {
83
+ left: 50%;
84
+ transform: translateX(-50%);
85
+ }
86
+
87
+ .placement-bottom-start::after {
88
+ left: calc(var(--ae-tooltip-arrow-size) * 2);
89
+ }
90
+
91
+ .placement-bottom-end::after {
92
+ right: calc(var(--ae-tooltip-arrow-size) * 2);
93
+ }
94
+
95
+ .placement-left::after {
96
+ left: 100%;
97
+ top: 50%;
98
+ transform: translateY(-50%);
99
+ border-left-color: var(--ae-tooltip-bg);
100
+ }
101
+
102
+ .placement-right::after {
103
+ right: 100%;
104
+ top: 50%;
105
+ transform: translateY(-50%);
106
+ border-right-color: var(--ae-tooltip-bg);
107
+ }
108
+ `;
109
+ var __create = Object.create;
110
+ var __defProp = Object.defineProperty;
111
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
112
+ var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
113
+ var __typeError = (msg) => {
114
+ throw TypeError(msg);
115
+ };
116
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
117
+ var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
118
+ var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
119
+ var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
120
+ var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
121
+ var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
122
+ var __runInitializers = (array, flags, self, value) => {
123
+ 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);
124
+ return value;
125
+ };
126
+ var __decorateElement = (array, flags, name, decorators, target, extra) => {
127
+ var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
128
+ var j = array.length + 1, key = __decoratorStrings[k + 5];
129
+ var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
130
+ var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
131
+ return __privateGet(this, extra);
132
+ }, set [name](x) {
133
+ return __privateSet(this, extra, x);
134
+ } }, name));
135
+ for (var i = decorators.length - 1; i >= 0; i--) {
136
+ ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
137
+ {
138
+ ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
139
+ access.get = (x) => x[name];
140
+ access.set = (x, y) => x[name] = y;
141
+ }
142
+ it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
143
+ if (it === void 0) __expectFn(it) && (desc[key] = it);
144
+ else if (typeof it !== "object" || it === null) __typeError("Object expected");
145
+ else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
146
+ }
147
+ return desc && __defProp(target, name, desc), target;
148
+ };
149
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
150
+ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
151
+ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
152
+ 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);
153
+ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
154
+ var _open_dec, _trigger_dec, _disabled_dec, _placement_dec, _content_dec, _a, _init, _content, _placement, _disabled, _trigger, _open;
155
+ class Tooltip extends (_a = aeicoComponent.AeicoComponent, _content_dec = [aeico.prop({ type: String })], _placement_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _trigger_dec = [aeico.prop({ type: String })], _open_dec = [aeico.prop({ type: Boolean })], _a) {
156
+ constructor() {
157
+ super(...arguments);
158
+ __privateAdd(this, _content, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
159
+ __privateAdd(this, _placement, __runInitializers(_init, 12, this, "top")), __runInitializers(_init, 15, this);
160
+ __privateAdd(this, _disabled, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
161
+ __privateAdd(this, _trigger, __runInitializers(_init, 20, this, "hover")), __runInitializers(_init, 23, this);
162
+ __privateAdd(this, _open, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
163
+ __publicField(this, "_outsideClickHandler", null);
164
+ __publicField(this, "_handleMouseEnter", () => {
165
+ if (this.trigger !== "hover") return;
166
+ if (this.disabled) return;
167
+ this.open = true;
168
+ });
169
+ __publicField(this, "_handleMouseLeave", () => {
170
+ if (this.trigger !== "hover") return;
171
+ this.open = false;
172
+ });
173
+ __publicField(this, "_handleFocusin", () => {
174
+ if (this.trigger !== "hover") return;
175
+ if (this.disabled) return;
176
+ this.open = true;
177
+ });
178
+ __publicField(this, "_handleFocusout", () => {
179
+ if (this.trigger !== "hover") return;
180
+ this.open = false;
181
+ });
182
+ __publicField(this, "_handleClick", () => {
183
+ if (this.trigger !== "click") return;
184
+ if (this.disabled) return;
185
+ this.open = !this.open;
186
+ });
187
+ }
188
+ connectedCallback() {
189
+ super.connectedCallback();
190
+ this.listen("mouseenter", this._handleMouseEnter);
191
+ this.listen("mouseleave", this._handleMouseLeave);
192
+ this.listen("focusin", this._handleFocusin);
193
+ this.listen("focusout", this._handleFocusout);
194
+ this.listen("click", this._handleClick);
195
+ this._outsideClickHandler = (e) => {
196
+ if (!this.open) return;
197
+ if (!e.composedPath().includes(this)) this.open = false;
198
+ };
199
+ document.addEventListener("click", this._outsideClickHandler);
200
+ }
201
+ disconnectedCallback() {
202
+ super.disconnectedCallback();
203
+ if (this._outsideClickHandler) {
204
+ document.removeEventListener("click", this._outsideClickHandler);
205
+ this._outsideClickHandler = null;
206
+ }
207
+ }
208
+ _updatePosition() {
209
+ var _a2;
210
+ const panel = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".tooltip-panel");
211
+ if (!panel) return;
212
+ const host = this.getBoundingClientRect();
213
+ const panelRect = panel.getBoundingClientRect();
214
+ const gap = 6;
215
+ const pw = panelRect.width;
216
+ const ph = panelRect.height;
217
+ let top;
218
+ let left;
219
+ switch (this.placement) {
220
+ case "top-start":
221
+ top = host.top - ph - gap;
222
+ left = host.left;
223
+ break;
224
+ case "top-end":
225
+ top = host.top - ph - gap;
226
+ left = host.right - pw;
227
+ break;
228
+ case "bottom":
229
+ top = host.bottom + gap;
230
+ left = host.left + host.width / 2 - pw / 2;
231
+ break;
232
+ case "bottom-start":
233
+ top = host.bottom + gap;
234
+ left = host.left;
235
+ break;
236
+ case "bottom-end":
237
+ top = host.bottom + gap;
238
+ left = host.right - pw;
239
+ break;
240
+ case "left":
241
+ top = host.top + host.height / 2 - ph / 2;
242
+ left = host.left - pw - gap;
243
+ break;
244
+ case "right":
245
+ top = host.top + host.height / 2 - ph / 2;
246
+ left = host.right + gap;
247
+ break;
248
+ default:
249
+ top = host.top - ph - gap;
250
+ left = host.left + host.width / 2 - pw / 2;
251
+ }
252
+ panel.style.top = `${top}px`;
253
+ panel.style.left = `${left}px`;
254
+ }
255
+ onUpdated(changedProps) {
256
+ if (changedProps.has("open") && this.open) {
257
+ this._updatePosition();
258
+ }
259
+ }
260
+ render() {
261
+ return aeico.html(({ div, span, slot }) => {
262
+ slot();
263
+ div(
264
+ {
265
+ className: `tooltip-panel placement-${this.placement ?? "top"}`,
266
+ role: "tooltip",
267
+ "aria-hidden": String(!this.open)
268
+ },
269
+ () => {
270
+ slot({ name: "tooltip" }, () => {
271
+ span({ textContent: this.content ?? "" });
272
+ });
273
+ }
274
+ );
275
+ });
276
+ }
277
+ }
278
+ _init = __decoratorStart(_a);
279
+ _content = /* @__PURE__ */ new WeakMap();
280
+ _placement = /* @__PURE__ */ new WeakMap();
281
+ _disabled = /* @__PURE__ */ new WeakMap();
282
+ _trigger = /* @__PURE__ */ new WeakMap();
283
+ _open = /* @__PURE__ */ new WeakMap();
284
+ __decorateElement(_init, 4, "content", _content_dec, Tooltip, _content);
285
+ __decorateElement(_init, 4, "placement", _placement_dec, Tooltip, _placement);
286
+ __decorateElement(_init, 4, "disabled", _disabled_dec, Tooltip, _disabled);
287
+ __decorateElement(_init, 4, "trigger", _trigger_dec, Tooltip, _trigger);
288
+ __decorateElement(_init, 4, "open", _open_dec, Tooltip, _open);
289
+ __decoratorMetadata(_init, Tooltip);
290
+ __publicField(Tooltip, "styles", [variables.variables, tooltipStyle]);
291
+ Tooltip.register();
292
+ exports.Tooltip = Tooltip;
293
+ //# sourceMappingURL=tooltip.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tooltip.cjs","sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tooltipStyle from '../styles/components/tooltip.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html, prop } from 'aeico';\nimport type { TooltipPlacement, TooltipTrigger } from './defines';\n\n/**\n * Tooltip Component\n *\n * A floating label that appears on hover or focus around its trigger content.\n * Wrap any element in `<ae-tooltip>` and provide content via the `content`\n * attribute (plain text) or the `tooltip` named slot (rich HTML).\n *\n * @example\n * ```html\n * <ae-tooltip content=\"Save file\">\n * <ae-button>Save</ae-button>\n * </ae-tooltip>\n *\n * <ae-tooltip placement=\"bottom-start\">\n * <span slot=\"tooltip\"><strong>Bold</strong> tip</span>\n * <ae-icon-button name=\"info\"></ae-icon-button>\n * </ae-tooltip>\n * ```\n */\nclass Tooltip extends AeicoComponent {\n protected static styles = [styleVariables, tooltipStyle];\n\n @prop({ type: String })\n accessor content: string | undefined;\n\n @prop({ type: String })\n accessor placement: TooltipPlacement = 'top';\n\n @prop({ type: Boolean })\n accessor disabled: boolean = false;\n\n @prop({ type: String })\n accessor trigger: TooltipTrigger = 'hover';\n\n @prop({ type: Boolean })\n accessor open: boolean = false;\n\n private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n this.listen('mouseenter', this._handleMouseEnter);\n this.listen('mouseleave', this._handleMouseLeave);\n this.listen('focusin', this._handleFocusin);\n this.listen('focusout', this._handleFocusout);\n this.listen('click', this._handleClick);\n\n this._outsideClickHandler = (e: MouseEvent) => {\n if (!this.open) return;\n if (!e.composedPath().includes(this)) this.open = false;\n };\n document.addEventListener('click', this._outsideClickHandler);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._outsideClickHandler) {\n document.removeEventListener('click', this._outsideClickHandler);\n this._outsideClickHandler = null;\n }\n }\n\n private _handleMouseEnter = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleMouseLeave = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleFocusin = () => {\n if (this.trigger !== 'hover') return;\n if (this.disabled) return;\n this.open = true;\n };\n\n private _handleFocusout = () => {\n if (this.trigger !== 'hover') return;\n this.open = false;\n };\n\n private _handleClick = () => {\n if (this.trigger !== 'click') return;\n if (this.disabled) return;\n this.open = !this.open;\n };\n\n private _updatePosition() {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel');\n if (!panel) return;\n\n const host = this.getBoundingClientRect();\n const panelRect = panel.getBoundingClientRect();\n const gap = 6; // Match --ae-tooltip-gap: 6px\n const pw = panelRect.width;\n const ph = panelRect.height;\n\n let top: number;\n let left: number;\n\n switch (this.placement) {\n case 'top-start':\n top = host.top - ph - gap;\n left = host.left;\n break;\n case 'top-end':\n top = host.top - ph - gap;\n left = host.right - pw;\n break;\n case 'bottom':\n top = host.bottom + gap;\n left = host.left + host.width / 2 - pw / 2;\n break;\n case 'bottom-start':\n top = host.bottom + gap;\n left = host.left;\n break;\n case 'bottom-end':\n top = host.bottom + gap;\n left = host.right - pw;\n break;\n case 'left':\n top = host.top + host.height / 2 - ph / 2;\n left = host.left - pw - gap;\n break;\n case 'right':\n top = host.top + host.height / 2 - ph / 2;\n left = host.right + gap;\n break;\n default: // 'top'\n top = host.top - ph - gap;\n left = host.left + host.width / 2 - pw / 2;\n }\n\n panel.style.top = `${top}px`;\n panel.style.left = `${left}px`;\n }\n\n protected onUpdated(changedProps: Map<string, unknown>) {\n if (changedProps.has('open') && this.open) {\n this._updatePosition();\n }\n }\n\n protected render() {\n return html(({ div, span, slot }) => {\n slot();\n div(\n {\n className: `tooltip-panel placement-${this.placement ?? 'top'}`,\n role: 'tooltip',\n 'aria-hidden': String(!this.open),\n },\n () => {\n slot({ name: 'tooltip' }, () => {\n span({ textContent: this.content ?? '' });\n });\n },\n );\n });\n }\n}\n\nTooltip.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-tooltip': Tooltip;\n }\n}\n\nexport type TooltipProps = InferProps<typeof Tooltip>;\nexport default Tooltip;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables"],"mappings":"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"}