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.
- package/LICENSE +21 -0
- package/README.md +0 -0
- package/dist/chunks/action-button.cjs +296 -0
- package/dist/chunks/action-button.cjs.map +1 -0
- package/dist/chunks/action-button.js +297 -0
- package/dist/chunks/action-button.js.map +1 -0
- package/dist/chunks/alert.cjs +4 -4
- package/dist/chunks/alert.cjs.map +1 -1
- package/dist/chunks/alert.js +5 -5
- package/dist/chunks/alert.js.map +1 -1
- package/dist/chunks/badge.cjs +1 -1
- package/dist/chunks/badge.cjs.map +1 -1
- package/dist/chunks/badge.js +2 -2
- package/dist/chunks/badge.js.map +1 -1
- package/dist/chunks/breadcrumb-item.cjs +2 -2
- package/dist/chunks/breadcrumb-item.cjs.map +1 -1
- package/dist/chunks/breadcrumb-item.js +3 -3
- package/dist/chunks/breadcrumb-item.js.map +1 -1
- package/dist/chunks/button-group.cjs +1 -1
- package/dist/chunks/button-group.cjs.map +1 -1
- package/dist/chunks/button-group.js +2 -2
- package/dist/chunks/button-group.js.map +1 -1
- package/dist/chunks/button.cjs +1 -1
- package/dist/chunks/button.cjs.map +1 -1
- package/dist/chunks/button.js +2 -2
- package/dist/chunks/button.js.map +1 -1
- package/dist/chunks/card.cjs +1 -1
- package/dist/chunks/card.cjs.map +1 -1
- package/dist/chunks/card.js +2 -2
- package/dist/chunks/card.js.map +1 -1
- package/dist/chunks/checkbox.cjs +18 -5
- package/dist/chunks/checkbox.cjs.map +1 -1
- package/dist/chunks/checkbox.js +18 -5
- package/dist/chunks/checkbox.js.map +1 -1
- package/dist/chunks/copy-button.cjs +168 -0
- package/dist/chunks/copy-button.cjs.map +1 -0
- package/dist/chunks/copy-button.js +169 -0
- package/dist/chunks/copy-button.js.map +1 -0
- package/dist/chunks/detail.cjs +7 -4
- package/dist/chunks/detail.cjs.map +1 -1
- package/dist/chunks/detail.js +8 -5
- package/dist/chunks/detail.js.map +1 -1
- package/dist/chunks/dialog.cjs +1 -1
- package/dist/chunks/dialog.cjs.map +1 -1
- package/dist/chunks/dialog.js +2 -2
- package/dist/chunks/dialog.js.map +1 -1
- package/dist/chunks/divider.cjs +1 -1
- package/dist/chunks/divider.cjs.map +1 -1
- package/dist/chunks/divider.js +2 -2
- package/dist/chunks/divider.js.map +1 -1
- package/dist/chunks/drawer.cjs +180 -0
- package/dist/chunks/drawer.cjs.map +1 -0
- package/dist/chunks/drawer.js +181 -0
- package/dist/chunks/drawer.js.map +1 -0
- package/dist/chunks/dropdown-button.cjs +2 -2
- package/dist/chunks/dropdown-button.cjs.map +1 -1
- package/dist/chunks/dropdown-button.js +3 -3
- package/dist/chunks/dropdown-button.js.map +1 -1
- package/dist/chunks/icon.cjs +31 -1
- package/dist/chunks/icon.cjs.map +1 -1
- package/dist/chunks/icon.js +32 -2
- package/dist/chunks/icon.js.map +1 -1
- package/dist/chunks/menu.cjs +396 -0
- package/dist/chunks/menu.cjs.map +1 -0
- package/dist/chunks/menu.js +397 -0
- package/dist/chunks/menu.js.map +1 -0
- package/dist/chunks/navbar.cjs +1 -1
- package/dist/chunks/navbar.cjs.map +1 -1
- package/dist/chunks/navbar.js +2 -2
- package/dist/chunks/navbar.js.map +1 -1
- package/dist/chunks/pagination.cjs +475 -0
- package/dist/chunks/pagination.cjs.map +1 -0
- package/dist/chunks/pagination.js +476 -0
- package/dist/chunks/pagination.js.map +1 -0
- package/dist/chunks/progress-bar.cjs +101 -0
- package/dist/chunks/progress-bar.cjs.map +1 -0
- package/dist/chunks/progress-bar.js +102 -0
- package/dist/chunks/progress-bar.js.map +1 -0
- package/dist/chunks/radio.cjs +11 -7
- package/dist/chunks/radio.cjs.map +1 -1
- package/dist/chunks/radio.js +11 -7
- package/dist/chunks/radio.js.map +1 -1
- package/dist/chunks/select.cjs +97 -66
- package/dist/chunks/select.cjs.map +1 -1
- package/dist/chunks/select.js +97 -66
- package/dist/chunks/select.js.map +1 -1
- package/dist/chunks/slider.cjs +9 -46
- package/dist/chunks/slider.cjs.map +1 -1
- package/dist/chunks/slider.js +9 -46
- package/dist/chunks/slider.js.map +1 -1
- package/dist/chunks/spinner.cjs +102 -0
- package/dist/chunks/spinner.cjs.map +1 -0
- package/dist/chunks/spinner.js +103 -0
- package/dist/chunks/spinner.js.map +1 -0
- package/dist/chunks/switch.cjs +110 -16
- package/dist/chunks/switch.cjs.map +1 -1
- package/dist/chunks/switch.js +111 -17
- package/dist/chunks/switch.js.map +1 -1
- package/dist/chunks/tab-panel.cjs +3 -3
- package/dist/chunks/tab-panel.cjs.map +1 -1
- package/dist/chunks/tab-panel.js +4 -4
- package/dist/chunks/tab-panel.js.map +1 -1
- package/dist/chunks/tag.cjs +1 -1
- package/dist/chunks/tag.cjs.map +1 -1
- package/dist/chunks/tag.js +2 -2
- package/dist/chunks/tag.js.map +1 -1
- package/dist/chunks/text-input.cjs +11 -16
- package/dist/chunks/text-input.cjs.map +1 -1
- package/dist/chunks/text-input.js +11 -16
- package/dist/chunks/text-input.js.map +1 -1
- package/dist/chunks/textarea.cjs +137 -0
- package/dist/chunks/textarea.cjs.map +1 -0
- package/dist/chunks/textarea.js +138 -0
- package/dist/chunks/textarea.js.map +1 -0
- package/dist/chunks/tooltip.cjs +293 -0
- package/dist/chunks/tooltip.cjs.map +1 -0
- package/dist/chunks/tooltip.js +294 -0
- package/dist/chunks/tooltip.js.map +1 -0
- package/dist/chunks/tree.cjs +468 -0
- package/dist/chunks/tree.cjs.map +1 -0
- package/dist/chunks/tree.js +469 -0
- package/dist/chunks/tree.js.map +1 -0
- package/dist/chunks/variables.cjs +2 -2
- package/dist/chunks/variables.js +2 -2
- package/dist/copy-button.cjs +6 -0
- package/dist/copy-button.cjs.map +1 -0
- package/dist/copy-button.js +6 -0
- package/dist/copy-button.js.map +1 -0
- package/dist/drawer.cjs +6 -0
- package/dist/drawer.cjs.map +1 -0
- package/dist/drawer.js +6 -0
- package/dist/drawer.js.map +1 -0
- package/dist/index.cjs +175 -88
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +186 -99
- package/dist/index.js.map +1 -1
- package/dist/menu.cjs +6 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.js +6 -0
- package/dist/menu.js.map +1 -0
- package/dist/pagination.cjs +6 -0
- package/dist/pagination.cjs.map +1 -0
- package/dist/pagination.js +6 -0
- package/dist/pagination.js.map +1 -0
- package/dist/progress-bar.cjs +6 -0
- package/dist/progress-bar.cjs.map +1 -0
- package/dist/progress-bar.js +6 -0
- package/dist/progress-bar.js.map +1 -0
- package/dist/select.cjs +1 -1
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +2 -2
- package/dist/select.js.map +1 -1
- package/dist/spinner.cjs +6 -0
- package/dist/spinner.cjs.map +1 -0
- package/dist/spinner.js +6 -0
- package/dist/spinner.js.map +1 -0
- package/dist/textarea.cjs +5 -0
- package/dist/textarea.cjs.map +1 -0
- package/dist/textarea.js +5 -0
- package/dist/textarea.js.map +1 -0
- package/dist/tooltip.cjs +6 -0
- package/dist/tooltip.cjs.map +1 -0
- package/dist/tooltip.js +6 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tree.cjs +6 -0
- package/dist/tree.cjs.map +1 -0
- package/dist/tree.js +6 -0
- package/dist/tree.js.map +1 -0
- package/dist/types/aeico-field.d.ts +52 -0
- package/dist/types/alert/alert.d.ts +1 -0
- package/dist/types/copy-button/copy-button.d.ts +32 -0
- package/dist/types/copy-button/defines.d.ts +1 -0
- package/dist/types/copy-button/index.d.ts +3 -0
- package/dist/types/detail/defines.d.ts +1 -0
- package/dist/types/detail/detail.d.ts +3 -1
- package/dist/types/detail/index.d.ts +1 -1
- package/dist/types/detail-group/detail-group.d.ts +39 -0
- package/dist/types/detail-group/index.d.ts +2 -0
- package/dist/types/drawer/defines.d.ts +1 -0
- package/dist/types/drawer/drawer.d.ts +31 -0
- package/dist/types/drawer/index.d.ts +3 -0
- package/dist/types/icon/built-in-icons.d.ts +1 -0
- package/dist/types/icon/icon.d.ts +1 -0
- package/dist/types/icon/registry.d.ts +8 -0
- package/dist/types/index.d.ts +17 -0
- package/dist/types/menu/defines.d.ts +15 -0
- package/dist/types/menu/index.d.ts +5 -0
- package/dist/types/menu/menu-item.d.ts +63 -0
- package/dist/types/menu/menu.d.ts +34 -0
- package/dist/types/number-input/index.d.ts +2 -0
- package/dist/types/number-input/number-input.d.ts +35 -0
- package/dist/types/pagination/defines.d.ts +2 -0
- package/dist/types/pagination/index.d.ts +3 -0
- package/dist/types/pagination/pagination.d.ts +77 -0
- package/dist/types/select/select.d.ts +2 -2
- package/dist/types/spinner/defines.d.ts +3 -0
- package/dist/types/spinner/index.d.ts +3 -0
- package/dist/types/spinner/spinner.d.ts +35 -0
- package/dist/types/switch/defines.d.ts +1 -0
- package/dist/types/switch/switch.d.ts +8 -4
- package/dist/types/text-input/text-input.d.ts +0 -4
- package/dist/types/textarea/index.d.ts +1 -0
- package/dist/types/textarea/textarea.d.ts +26 -0
- package/dist/types/tooltip/defines.d.ts +2 -0
- package/dist/types/tooltip/index.d.ts +4 -0
- package/dist/types/tooltip/tooltip.d.ts +48 -0
- package/dist/types/tree/defines.d.ts +23 -0
- package/dist/types/tree/index.d.ts +5 -0
- package/dist/types/tree/tree-item.d.ts +54 -0
- package/dist/types/tree/tree.d.ts +64 -0
- package/package.json +5 -5
- package/src/aeico-field.ts +142 -7
- package/src/alert/alert.ts +3 -2
- package/src/checkbox/checkbox.ts +17 -2
- package/src/copy-button/copy-button.ts +146 -0
- package/src/copy-button/defines.ts +5 -0
- package/src/copy-button/index.ts +3 -0
- package/src/detail/defines.ts +1 -0
- package/src/detail/detail.ts +5 -1
- package/src/detail/index.ts +1 -1
- package/src/detail-group/detail-group.ts +104 -0
- package/src/detail-group/index.ts +2 -0
- package/src/drawer/defines.ts +1 -0
- package/src/drawer/drawer.ts +157 -0
- package/src/drawer/index.ts +3 -0
- package/src/icon/built-in-icons.ts +21 -0
- package/src/icon/icon.ts +1 -0
- package/src/icon/registry.ts +22 -0
- package/src/index.ts +30 -0
- package/src/menu/defines.ts +17 -0
- package/src/menu/index.ts +5 -0
- package/src/menu/menu-item.ts +315 -0
- package/src/menu/menu.ts +81 -0
- package/src/number-input/index.ts +2 -0
- package/src/number-input/number-input.ts +137 -0
- package/src/pagination/defines.ts +2 -0
- package/src/pagination/index.ts +3 -0
- package/src/pagination/pagination.ts +310 -0
- package/src/radio-group/radio-group.ts +11 -4
- package/src/select/select.ts +111 -70
- package/src/slider/slider.ts +9 -2
- package/src/spinner/defines.ts +12 -0
- package/src/spinner/index.ts +3 -0
- package/src/spinner/spinner.ts +81 -0
- package/src/styles/components/action-button.css +37 -0
- package/src/styles/components/checkbox.css +4 -26
- package/src/styles/components/copy-button.css +119 -0
- package/src/styles/components/detail-group.css +10 -0
- package/src/styles/components/detail.css +10 -1
- package/src/styles/components/drawer.css +161 -0
- package/src/styles/components/field-label.css +120 -0
- package/src/styles/components/menu-item.css +168 -0
- package/src/styles/components/menu.css +17 -0
- package/src/styles/components/number-input.css +167 -0
- package/src/styles/components/pagination.css +205 -0
- package/src/styles/components/radio-group.css +0 -23
- package/src/styles/components/select.css +12 -39
- package/src/styles/components/slider.css +0 -42
- package/src/styles/components/spinner.css +80 -0
- package/src/styles/components/switch.css +68 -19
- package/src/styles/components/tab-panel.css +1 -1
- package/src/styles/components/tabs.css +1 -0
- package/src/styles/components/text-input.css +7 -45
- package/src/styles/components/textarea.css +75 -0
- package/src/styles/components/tooltip.css +103 -0
- package/src/styles/components/tree-item.css +152 -0
- package/src/styles/components/tree.css +10 -0
- package/src/styles/layout.css +457 -25
- package/src/switch/defines.ts +1 -0
- package/src/switch/switch.ts +61 -12
- package/src/text-input/text-input.ts +10 -15
- package/src/textarea/index.ts +1 -0
- package/src/textarea/textarea.ts +107 -0
- package/src/tooltip/defines.ts +11 -0
- package/src/tooltip/index.ts +4 -0
- package/src/tooltip/tooltip.ts +183 -0
- package/src/tree/defines.ts +26 -0
- package/src/tree/index.ts +5 -0
- package/src/tree/tree-item.ts +258 -0
- package/src/tree/tree.ts +237 -0
- package/dist/chunks/aeico-field.cjs +0 -179
- package/dist/chunks/aeico-field.cjs.map +0 -1
- package/dist/chunks/aeico-field.js +0 -180
- 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":"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"}
|
|
@@ -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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"}
|