aeico-components 0.1.2 → 0.1.4
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/dist/alert.cjs +6 -0
- package/dist/alert.cjs.map +1 -0
- package/dist/alert.js +6 -0
- package/dist/alert.js.map +1 -0
- package/dist/badge.cjs +6 -0
- package/dist/badge.cjs.map +1 -0
- package/dist/badge.js +6 -0
- package/dist/badge.js.map +1 -0
- package/dist/breadcrumb.cjs +7 -0
- package/dist/breadcrumb.cjs.map +1 -0
- package/dist/breadcrumb.js +7 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/button-group.cjs +6 -0
- package/dist/button-group.cjs.map +1 -0
- package/dist/button-group.js +6 -0
- package/dist/button-group.js.map +1 -0
- package/dist/button.cjs +6 -0
- package/dist/button.cjs.map +1 -0
- package/dist/button.js +6 -0
- package/dist/button.js.map +1 -0
- package/dist/card.cjs +6 -0
- package/dist/card.cjs.map +1 -0
- package/dist/card.js +6 -0
- package/dist/card.js.map +1 -0
- package/dist/checkbox.cjs +6 -0
- package/dist/checkbox.cjs.map +1 -0
- package/dist/checkbox.js +6 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chunks/aeico-component.cjs +17 -0
- package/dist/chunks/aeico-component.cjs.map +1 -0
- package/dist/chunks/aeico-component.js +18 -0
- package/dist/chunks/aeico-component.js.map +1 -0
- package/dist/chunks/aeico-field.cjs +179 -0
- package/dist/chunks/aeico-field.cjs.map +1 -0
- package/dist/chunks/aeico-field.js +180 -0
- package/dist/chunks/aeico-field.js.map +1 -0
- package/dist/chunks/alert.cjs +170 -0
- package/dist/chunks/alert.cjs.map +1 -0
- package/dist/chunks/alert.js +171 -0
- package/dist/chunks/alert.js.map +1 -0
- package/dist/chunks/badge.cjs +85 -0
- package/dist/chunks/badge.cjs.map +1 -0
- package/dist/chunks/badge.js +86 -0
- package/dist/chunks/badge.js.map +1 -0
- package/dist/chunks/breadcrumb-item.cjs +261 -0
- package/dist/chunks/breadcrumb-item.cjs.map +1 -0
- package/dist/chunks/breadcrumb-item.js +262 -0
- package/dist/chunks/breadcrumb-item.js.map +1 -0
- package/dist/chunks/button-group.cjs +79 -0
- package/dist/chunks/button-group.cjs.map +1 -0
- package/dist/chunks/button-group.js +80 -0
- package/dist/chunks/button-group.js.map +1 -0
- package/dist/chunks/button.cjs +351 -0
- package/dist/chunks/button.cjs.map +1 -0
- package/dist/chunks/button.js +352 -0
- package/dist/chunks/button.js.map +1 -0
- package/dist/chunks/card.cjs +93 -0
- package/dist/chunks/card.cjs.map +1 -0
- package/dist/chunks/card.js +94 -0
- package/dist/chunks/card.js.map +1 -0
- package/dist/chunks/checkbox.cjs +73 -0
- package/dist/chunks/checkbox.cjs.map +1 -0
- package/dist/chunks/checkbox.js +74 -0
- package/dist/chunks/checkbox.js.map +1 -0
- package/dist/chunks/color.cjs +4 -0
- package/dist/chunks/color.cjs.map +1 -0
- package/dist/chunks/color.js +5 -0
- package/dist/chunks/color.js.map +1 -0
- package/dist/chunks/detail.cjs +143 -0
- package/dist/chunks/detail.cjs.map +1 -0
- package/dist/chunks/detail.js +144 -0
- package/dist/chunks/detail.js.map +1 -0
- package/dist/chunks/dialog.cjs +117 -0
- package/dist/chunks/dialog.cjs.map +1 -0
- package/dist/chunks/dialog.js +118 -0
- package/dist/chunks/dialog.js.map +1 -0
- package/dist/chunks/divider.cjs +80 -0
- package/dist/chunks/divider.cjs.map +1 -0
- package/dist/chunks/divider.js +81 -0
- package/dist/chunks/divider.js.map +1 -0
- package/dist/chunks/dropdown-button.cjs +534 -0
- package/dist/chunks/dropdown-button.cjs.map +1 -0
- package/dist/chunks/dropdown-button.js +535 -0
- package/dist/chunks/dropdown-button.js.map +1 -0
- package/dist/chunks/icon-button.cjs +35 -0
- package/dist/chunks/icon-button.cjs.map +1 -0
- package/dist/chunks/icon-button.js +36 -0
- package/dist/chunks/icon-button.js.map +1 -0
- package/dist/chunks/icon.cjs +78 -0
- package/dist/chunks/icon.cjs.map +1 -0
- package/dist/chunks/icon.js +79 -0
- package/dist/chunks/icon.js.map +1 -0
- package/dist/chunks/navbar.cjs +143 -0
- package/dist/chunks/navbar.cjs.map +1 -0
- package/dist/chunks/navbar.js +144 -0
- package/dist/chunks/navbar.js.map +1 -0
- package/dist/chunks/radio.cjs +181 -0
- package/dist/chunks/radio.cjs.map +1 -0
- package/dist/chunks/radio.js +182 -0
- package/dist/chunks/radio.js.map +1 -0
- package/dist/chunks/select.cjs +350 -0
- package/dist/chunks/select.cjs.map +1 -0
- package/dist/chunks/select.js +351 -0
- package/dist/chunks/select.js.map +1 -0
- package/dist/chunks/size.cjs +4 -0
- package/dist/chunks/size.cjs.map +1 -0
- package/dist/chunks/size.js +5 -0
- package/dist/chunks/size.js.map +1 -0
- package/dist/chunks/slider.cjs +648 -0
- package/dist/chunks/slider.cjs.map +1 -0
- package/dist/chunks/slider.js +649 -0
- package/dist/chunks/slider.js.map +1 -0
- package/dist/chunks/switch.cjs +73 -0
- package/dist/chunks/switch.cjs.map +1 -0
- package/dist/chunks/switch.js +74 -0
- package/dist/chunks/switch.js.map +1 -0
- package/dist/chunks/tab-panel.cjs +166 -0
- package/dist/chunks/tab-panel.cjs.map +1 -0
- package/dist/chunks/tab-panel.js +167 -0
- package/dist/chunks/tab-panel.js.map +1 -0
- package/dist/chunks/tag.cjs +108 -0
- package/dist/chunks/tag.cjs.map +1 -0
- package/dist/chunks/tag.js +109 -0
- package/dist/chunks/tag.js.map +1 -0
- package/dist/chunks/text-input.cjs +59 -0
- package/dist/chunks/text-input.cjs.map +1 -0
- package/dist/chunks/text-input.js +60 -0
- package/dist/chunks/text-input.js.map +1 -0
- package/dist/chunks/variables.cjs +372 -0
- package/dist/chunks/variables.cjs.map +1 -0
- package/dist/chunks/variables.js +373 -0
- package/dist/chunks/variables.js.map +1 -0
- package/dist/detail.cjs +6 -0
- package/dist/detail.cjs.map +1 -0
- package/dist/detail.js +6 -0
- package/dist/detail.js.map +1 -0
- package/dist/dialog.cjs +6 -0
- package/dist/dialog.cjs.map +1 -0
- package/dist/dialog.js +6 -0
- package/dist/dialog.js.map +1 -0
- package/dist/divider.cjs +6 -0
- package/dist/divider.cjs.map +1 -0
- package/dist/divider.js +6 -0
- package/dist/divider.js.map +1 -0
- package/dist/dropdown.cjs +7 -0
- package/dist/dropdown.cjs.map +1 -0
- package/dist/dropdown.js +7 -0
- package/dist/dropdown.js.map +1 -0
- package/dist/icon-button.cjs +6 -0
- package/dist/icon-button.cjs.map +1 -0
- package/dist/icon-button.js +6 -0
- package/dist/icon-button.js.map +1 -0
- package/dist/icon.cjs +6 -0
- package/dist/icon.cjs.map +1 -0
- package/dist/icon.js +6 -0
- package/dist/icon.js.map +1 -0
- package/dist/index.cjs +49 -4223
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +49 -4223
- package/dist/index.js.map +1 -1
- package/dist/navbar.cjs +6 -0
- package/dist/navbar.cjs.map +1 -0
- package/dist/navbar.js +6 -0
- package/dist/navbar.js.map +1 -0
- package/dist/radio-group.cjs +7 -0
- package/dist/radio-group.cjs.map +1 -0
- package/dist/radio-group.js +7 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/select.cjs +99 -0
- package/dist/select.cjs.map +1 -0
- package/dist/select.js +99 -0
- package/dist/select.js.map +1 -0
- package/dist/slider.cjs +6 -0
- package/dist/slider.cjs.map +1 -0
- package/dist/slider.js +6 -0
- package/dist/slider.js.map +1 -0
- package/dist/switch.cjs +6 -0
- package/dist/switch.cjs.map +1 -0
- package/dist/switch.js +6 -0
- package/dist/switch.js.map +1 -0
- package/dist/tabs.cjs +8 -0
- package/dist/tabs.cjs.map +1 -0
- package/dist/tabs.js +8 -0
- package/dist/tabs.js.map +1 -0
- package/dist/tag.cjs +5 -0
- package/dist/tag.cjs.map +1 -0
- package/dist/tag.js +5 -0
- package/dist/tag.js.map +1 -0
- package/dist/text-input.cjs +6 -0
- package/dist/text-input.cjs.map +1 -0
- package/dist/text-input.js +6 -0
- package/dist/text-input.js.map +1 -0
- package/package.json +75 -63
- package/src/styles/color.css +117 -117
- package/src/styles/components/alert.css +104 -104
- package/src/styles/components/badge.css +67 -67
- package/src/styles/components/breadcrumb-item.css +59 -59
- package/src/styles/components/breadcrumb.css +19 -19
- package/src/styles/components/button-group.css +25 -25
- package/src/styles/components/button.css +213 -213
- package/src/styles/components/card.css +64 -64
- package/src/styles/components/checkbox.css +78 -78
- package/src/styles/components/detail.css +127 -127
- package/src/styles/components/dialog.css +103 -103
- package/src/styles/components/divider.css +18 -18
- package/src/styles/components/dropdown-item.css +91 -91
- package/src/styles/components/dropdown.css +179 -179
- package/src/styles/components/icon-button.css +116 -116
- package/src/styles/components/icon.css +29 -29
- package/src/styles/components/navbar.css +250 -250
- package/src/styles/components/radio-group.css +360 -360
- package/src/styles/components/select-option.css +43 -43
- package/src/styles/components/select.css +222 -222
- package/src/styles/components/slider.css +326 -326
- package/src/styles/components/switch.css +117 -117
- package/src/styles/components/tab-panel.css +8 -8
- package/src/styles/components/tab.css +44 -44
- package/src/styles/components/tabs.css +16 -16
- package/src/styles/components/tag.css +107 -107
- package/src/styles/components/text-input.css +110 -110
- package/src/styles/layout.css +43 -43
- package/src/styles/size.css +7 -7
- package/src/styles/variables.css +368 -368
- package/src/utils.ts +1 -0
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
import { A as AeicoField } from "./aeico-field.js";
|
|
2
|
+
import { prop, html, tags } from "aeico";
|
|
3
|
+
import { t } from "aeico-localize";
|
|
4
|
+
import { s as styleVariables } from "./variables.js";
|
|
5
|
+
import { s as sizeCSS } from "./size.js";
|
|
6
|
+
const style = ":host {\n display: block;\n flex: 1;\n min-width: 0;\n font-size: var(--size-base);\n\n /* Layout variables */\n --select-field-gap: 2px;\n\n /* Trigger variables */\n --select-font-size: 1em;\n --select-padding: 0.333em 0.583em;\n --select-border-width: 1px;\n --select-border-radius: 2px;\n --select-border-color: var(--border-subtle);\n --select-border-color-hover: var(--border-default);\n --select-border-color-focus: var(--border-focus);\n --select-bg: var(--surface-base);\n --select-bg-hover: var(--surface-raised);\n --select-bg-focus: var(--surface-raised);\n --select-color: var(--color-text-muted);\n --select-transition: border-color 0.12s, background 0.12s;\n\n /* Arrow */\n --select-arrow-color: var(--color-text-muted);\n --select-arrow-size: 0.75em;\n\n /* Dropdown */\n --select-dropdown-bg: var(--surface-overlay);\n --select-dropdown-border: var(--border-default);\n --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n --select-dropdown-border-radius: 2px;\n --select-dropdown-max-height: 240px;\n --select-dropdown-z-index: 1000;\n}\n\n.container {\n display: flex;\n align-items: center;\n gap: var(--select-field-gap);\n width: 100%;\n position: relative;\n}\n\n.trigger {\n flex: 1;\n min-width: 0;\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 0.333em;\n font-size: var(--select-font-size);\n padding: var(--select-padding);\n border: var(--select-border-width) solid var(--select-border-color);\n border-radius: var(--select-border-radius);\n background: var(--select-bg);\n color: var(--select-color);\n cursor: pointer;\n transition: var(--select-transition);\n user-select: none;\n outline: none;\n box-sizing: border-box;\n}\n\n.trigger:hover:not(.disabled) {\n border-color: var(--select-border-color-hover);\n background: var(--select-bg-hover);\n}\n\n.trigger.open {\n border-color: var(--select-border-color-focus);\n background: var(--select-bg-focus);\n}\n\n.trigger.disabled {\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n}\n\n.value {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.placeholder {\n color: var(--color-text-disabled);\n}\n\n.selected-list {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n align-items: center;\n padding: 2px 0;\n}\n\n/* Non-expandable (default): single-row, clip overflow */\n.trigger:has(.selected-list--clipped) {\n flex-wrap: nowrap;\n}\n\n.selected-list--clipped {\n flex-wrap: nowrap;\n overflow: hidden;\n}\n\n.overflow-indicator {\n flex-shrink: 0;\n align-self: center;\n padding: 1px 6px;\n background: color-mix(in srgb, var(--color-primary) 12%, transparent);\n color: var(--color-primary);\n border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);\n border-radius: 3px;\n font-size: 0.82em;\n line-height: 1.6;\n cursor: default;\n user-select: none;\n}\n\n.arrow {\n flex-shrink: 0;\n align-self: center;\n font-size: var(--select-arrow-size);\n color: var(--select-arrow-color);\n transition: transform 0.12s;\n pointer-events: none;\n line-height: 1;\n}\n\n.trigger.open .arrow {\n transform: rotate(180deg);\n}\n\n.dropdown {\n display: none;\n position: absolute;\n z-index: var(--select-dropdown-z-index);\n background: var(--select-dropdown-bg);\n border: 1px solid var(--select-dropdown-border);\n border-radius: var(--select-dropdown-border-radius);\n box-shadow: var(--select-dropdown-shadow);\n max-height: var(--select-dropdown-max-height);\n overflow-y: auto;\n min-width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown.open {\n display: block;\n}\n\n.dropdown.position-bottom {\n top: 100%;\n left: 0;\n margin-top: 2px;\n}\n\n.dropdown.position-top {\n bottom: 100%;\n left: 0;\n margin-bottom: 2px;\n}\n\n.dropdown.position-left {\n right: 100%;\n top: 0;\n margin-right: 2px;\n}\n\n.dropdown.position-right {\n left: 100%;\n top: 0;\n margin-left: 2px;\n}\n\n.clear-btn {\n width: 1.333em;\n height: 1.333em;\n border: none;\n border-radius: var(--clear-btn-border-radius);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--clear-btn-bg);\n color: var(--clear-btn-color);\n transition: var(--clear-btn-transition);\n flex-shrink: 0;\n line-height: 1;\n}\n\n.clear-btn:hover {\n background: var(--clear-btn-bg-hover);\n color: var(--clear-btn-color-hover);\n}\n\n.reset-btn {\n width: 1.333em;\n height: 1.333em;\n border: none;\n border-radius: var(--reset-btn-border-radius);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--reset-btn-bg);\n color: var(--reset-btn-color);\n transition: var(--reset-btn-transition);\n flex-shrink: 0;\n}\n\n.reset-btn:hover {\n background: var(--reset-btn-bg-hover);\n color: var(--reset-btn-color-hover);\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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
16
|
+
var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
|
|
17
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
18
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
19
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
20
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
21
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
22
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
23
|
+
return value;
|
|
24
|
+
};
|
|
25
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
26
|
+
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
|
|
27
|
+
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
|
|
28
|
+
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
|
|
29
|
+
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
|
|
30
|
+
return __privateGet(this, extra);
|
|
31
|
+
}, set [name](x) {
|
|
32
|
+
return __privateSet(this, extra, x);
|
|
33
|
+
} }, name));
|
|
34
|
+
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
|
|
35
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
36
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
37
|
+
if (k) {
|
|
38
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
|
|
39
|
+
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
|
|
40
|
+
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
|
|
41
|
+
}
|
|
42
|
+
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
|
|
43
|
+
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
|
|
44
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
45
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
46
|
+
}
|
|
47
|
+
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
|
|
48
|
+
};
|
|
49
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
50
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
51
|
+
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
|
|
52
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
53
|
+
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);
|
|
54
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
55
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
56
|
+
var _defaultValue_dec, _value_dec, _expandable_dec, _multiple_dec, _placeholder_dec, _position_dec, _options_dec, __expanded_dec, _a, _init, __expanded, _options, _position, _placeholder, _multiple, _expandable;
|
|
57
|
+
class Select extends (_a = AeicoField, __expanded_dec = [prop({ type: Boolean, observe: false, reflect: false })], _options_dec = [prop({ type: Array })], _position_dec = [prop({ type: String })], _placeholder_dec = [prop({ type: String })], _multiple_dec = [prop({ type: Boolean })], _expandable_dec = [prop({ type: Boolean })], _value_dec = [prop({
|
|
58
|
+
type: String,
|
|
59
|
+
parser: (v) => {
|
|
60
|
+
if (v === null || v === void 0) return void 0;
|
|
61
|
+
try {
|
|
62
|
+
return JSON.parse(v);
|
|
63
|
+
} catch {
|
|
64
|
+
return v;
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
formatter: (v) => {
|
|
68
|
+
if (v === null || v === void 0) return "";
|
|
69
|
+
if (Array.isArray(v)) return JSON.stringify(v);
|
|
70
|
+
return String(v);
|
|
71
|
+
}
|
|
72
|
+
})], _defaultValue_dec = [prop({
|
|
73
|
+
type: String,
|
|
74
|
+
parser: (v) => {
|
|
75
|
+
if (v === null || v === void 0) return void 0;
|
|
76
|
+
try {
|
|
77
|
+
return JSON.parse(v);
|
|
78
|
+
} catch {
|
|
79
|
+
return v;
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
formatter: (v) => {
|
|
83
|
+
if (v === null || v === void 0) return "";
|
|
84
|
+
if (Array.isArray(v)) return JSON.stringify(v);
|
|
85
|
+
return String(v);
|
|
86
|
+
}
|
|
87
|
+
})], _a) {
|
|
88
|
+
constructor() {
|
|
89
|
+
super(...arguments);
|
|
90
|
+
__publicField(this, "fieldElement", null);
|
|
91
|
+
__publicField(this, "_isOpen", false);
|
|
92
|
+
__publicField(this, "_triggerEl", null);
|
|
93
|
+
__publicField(this, "_dropdownEl", null);
|
|
94
|
+
__publicField(this, "_slotEl", null);
|
|
95
|
+
__publicField(this, "_slotOptionData", []);
|
|
96
|
+
__publicField(this, "_selectedListEl", null);
|
|
97
|
+
__privateAdd(this, __expanded, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
|
|
98
|
+
__privateAdd(this, _options, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
99
|
+
__privateAdd(this, _position, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
100
|
+
__privateAdd(this, _placeholder, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
|
|
101
|
+
__privateAdd(this, _multiple, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
|
|
102
|
+
__privateAdd(this, _expandable, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
|
|
103
|
+
__publicField(this, "value", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
|
|
104
|
+
__publicField(this, "defaultValue", __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
|
|
105
|
+
__publicField(this, "_handleOutsideClick", (e) => {
|
|
106
|
+
if (!e.composedPath().includes(this)) {
|
|
107
|
+
this._closeDropdown();
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
__publicField(this, "_handleOptionSelect", (e) => {
|
|
111
|
+
const { value, label } = e.detail;
|
|
112
|
+
if (!this._slotOptionData.find((o) => o.value === value)) {
|
|
113
|
+
this._slotOptionData = [
|
|
114
|
+
...this._slotOptionData.filter((o) => o.value !== value),
|
|
115
|
+
{ value, label }
|
|
116
|
+
];
|
|
117
|
+
}
|
|
118
|
+
if (this.multiple) {
|
|
119
|
+
const current = this._getMultiValues();
|
|
120
|
+
const idx = current.findIndex((v) => String(v) === value);
|
|
121
|
+
const next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];
|
|
122
|
+
this.setValue(next, { silent: false, action: "change" });
|
|
123
|
+
} else {
|
|
124
|
+
this.setValue(value, { silent: false, action: "change" });
|
|
125
|
+
this._closeDropdown();
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
writeValue(_value) {
|
|
130
|
+
}
|
|
131
|
+
getValue() {
|
|
132
|
+
if (this.multiple) return this._getMultiValues();
|
|
133
|
+
return this.value || "";
|
|
134
|
+
}
|
|
135
|
+
_getMultiValues() {
|
|
136
|
+
if (Array.isArray(this.value)) return this.value;
|
|
137
|
+
if (this.value != null && this.value !== "") return [this.value];
|
|
138
|
+
return [];
|
|
139
|
+
}
|
|
140
|
+
onDisabledChanged(_newValue) {
|
|
141
|
+
}
|
|
142
|
+
onUpdated(_changedProps) {
|
|
143
|
+
if (!this.multiple || this.expandable) {
|
|
144
|
+
if (this._expanded) this._expanded = false;
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
const list = this._selectedListEl;
|
|
148
|
+
if (!list) return;
|
|
149
|
+
const overflowing = list.scrollWidth > list.clientWidth + 1;
|
|
150
|
+
if (overflowing !== this._expanded) this._expanded = overflowing;
|
|
151
|
+
}
|
|
152
|
+
_findLabel(value) {
|
|
153
|
+
const strVal = String(value);
|
|
154
|
+
if (Array.isArray(this.options)) {
|
|
155
|
+
for (const opt of this.options) {
|
|
156
|
+
if (this._isSelectOption(opt)) {
|
|
157
|
+
if (String(opt.value) === strVal) return t(opt.label, opt.label);
|
|
158
|
+
} else {
|
|
159
|
+
if (String(opt) === strVal) return strVal;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
for (const opt of this._slotOptionData) {
|
|
164
|
+
if (opt.value === strVal) return opt.label;
|
|
165
|
+
}
|
|
166
|
+
return strVal;
|
|
167
|
+
}
|
|
168
|
+
_onSlotChange() {
|
|
169
|
+
var _a2;
|
|
170
|
+
if (!this._slotEl) return;
|
|
171
|
+
const data = [];
|
|
172
|
+
for (const el of this._slotEl.assignedElements({ flatten: true })) {
|
|
173
|
+
if (el.tagName.toLowerCase() !== "ae-select-option") continue;
|
|
174
|
+
const optEl = el;
|
|
175
|
+
data.push({
|
|
176
|
+
value: optEl.value ?? el.getAttribute("value") ?? "",
|
|
177
|
+
label: optEl.label || ((_a2 = el.textContent) == null ? void 0 : _a2.trim()) || ""
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
this._slotOptionData = data;
|
|
181
|
+
this.update();
|
|
182
|
+
}
|
|
183
|
+
_toggleDropdown() {
|
|
184
|
+
if (this._isOpen) {
|
|
185
|
+
this._closeDropdown();
|
|
186
|
+
} else {
|
|
187
|
+
this._openDropdown();
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
_openDropdown() {
|
|
191
|
+
this._isOpen = true;
|
|
192
|
+
this._syncOpenState();
|
|
193
|
+
}
|
|
194
|
+
_closeDropdown() {
|
|
195
|
+
this._isOpen = false;
|
|
196
|
+
this._syncOpenState();
|
|
197
|
+
}
|
|
198
|
+
_syncOpenState() {
|
|
199
|
+
var _a2, _b;
|
|
200
|
+
(_a2 = this._triggerEl) == null ? void 0 : _a2.classList.toggle("open", this._isOpen);
|
|
201
|
+
(_b = this._dropdownEl) == null ? void 0 : _b.classList.toggle("open", this._isOpen);
|
|
202
|
+
}
|
|
203
|
+
connectedCallback() {
|
|
204
|
+
super.connectedCallback();
|
|
205
|
+
document.addEventListener("click", this._handleOutsideClick);
|
|
206
|
+
this.addEventListener("selectoption", this._handleOptionSelect);
|
|
207
|
+
}
|
|
208
|
+
disconnectedCallback() {
|
|
209
|
+
super.disconnectedCallback();
|
|
210
|
+
document.removeEventListener("click", this._handleOutsideClick);
|
|
211
|
+
this.removeEventListener("selectoption", this._handleOptionSelect);
|
|
212
|
+
}
|
|
213
|
+
_syncSlotOptionsSelected() {
|
|
214
|
+
if (!this._slotEl) return;
|
|
215
|
+
const multiValues = this._getMultiValues();
|
|
216
|
+
for (const el of this._slotEl.assignedElements({ flatten: true })) {
|
|
217
|
+
if (el.tagName.toLowerCase() !== "ae-select-option") continue;
|
|
218
|
+
const optEl = el;
|
|
219
|
+
const optVal = optEl.value ?? el.getAttribute("value") ?? "";
|
|
220
|
+
const isSelected = this.multiple ? multiValues.some((v) => String(v) === optVal) : this.value != null && this.value !== "" && String(this.value) === optVal;
|
|
221
|
+
optEl.selected = isSelected ? true : void 0;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
render() {
|
|
225
|
+
const position = this.position || "bottom";
|
|
226
|
+
const multiValues = this.multiple ? this._getMultiValues() : [];
|
|
227
|
+
const hasMultiSelection = this.multiple && multiValues.length > 0;
|
|
228
|
+
const selectedLabel = !this.multiple && this.value != null && this.value !== "" ? this._findLabel(this.value) : "";
|
|
229
|
+
const isDisabled = Boolean(this.disabled);
|
|
230
|
+
this._selectedListEl = null;
|
|
231
|
+
this._syncSlotOptionsSelected();
|
|
232
|
+
return html(({ div, span, slot }) => {
|
|
233
|
+
div({ className: "container" }, () => {
|
|
234
|
+
this._triggerEl = div(
|
|
235
|
+
{
|
|
236
|
+
className: `trigger${this._isOpen ? " open" : ""}${isDisabled ? " disabled" : ""}`,
|
|
237
|
+
"@click": () => {
|
|
238
|
+
if (isDisabled) return;
|
|
239
|
+
this._toggleDropdown();
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
() => {
|
|
243
|
+
if (this.multiple) {
|
|
244
|
+
if (hasMultiSelection) {
|
|
245
|
+
this._selectedListEl = div(
|
|
246
|
+
{
|
|
247
|
+
className: `selected-list${!this.expandable ? " selected-list--clipped" : ""}`
|
|
248
|
+
},
|
|
249
|
+
() => {
|
|
250
|
+
for (const v of multiValues) {
|
|
251
|
+
const lbl = this._findLabel(v);
|
|
252
|
+
tags.aeTag({
|
|
253
|
+
key: `sel-${v}`,
|
|
254
|
+
color: "default",
|
|
255
|
+
variant: "faint",
|
|
256
|
+
dismissible: true,
|
|
257
|
+
disabled: isDisabled,
|
|
258
|
+
textContent: lbl,
|
|
259
|
+
"@dismiss": (e) => {
|
|
260
|
+
e.stopPropagation();
|
|
261
|
+
if (isDisabled) return;
|
|
262
|
+
const next = multiValues.filter((item) => String(item) !== String(v));
|
|
263
|
+
this.setValue(next, { silent: false, action: "change" });
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
);
|
|
269
|
+
if (!this.expandable && this._expanded) {
|
|
270
|
+
span({ className: "overflow-indicator", textContent: "…" });
|
|
271
|
+
}
|
|
272
|
+
} else {
|
|
273
|
+
span({ className: "value placeholder", textContent: this.placeholder || "" });
|
|
274
|
+
}
|
|
275
|
+
} else {
|
|
276
|
+
if (selectedLabel) {
|
|
277
|
+
span({ className: "value", textContent: selectedLabel });
|
|
278
|
+
} else {
|
|
279
|
+
span({ className: "value placeholder", textContent: this.placeholder || "" });
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
span({ className: "arrow", textContent: "▾" });
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
this._dropdownEl = div(
|
|
286
|
+
{
|
|
287
|
+
className: `dropdown position-${position}${this._isOpen ? " open" : ""}`
|
|
288
|
+
},
|
|
289
|
+
() => {
|
|
290
|
+
this._renderProgrammaticOptions();
|
|
291
|
+
this._slotEl = slot({
|
|
292
|
+
"@slotchange": () => this._onSlotChange()
|
|
293
|
+
});
|
|
294
|
+
}
|
|
295
|
+
);
|
|
296
|
+
this.renderActionButtons();
|
|
297
|
+
});
|
|
298
|
+
});
|
|
299
|
+
}
|
|
300
|
+
_renderProgrammaticOptions() {
|
|
301
|
+
if (!Array.isArray(this.options)) return;
|
|
302
|
+
const { aeSelectOption } = tags;
|
|
303
|
+
const multiValues = this.multiple ? this._getMultiValues() : [];
|
|
304
|
+
for (const opt of this.options) {
|
|
305
|
+
if (this._isSelectOption(opt)) {
|
|
306
|
+
const isSelected = this.multiple ? multiValues.some((v) => String(v) === String(opt.value)) : this.value != null && String(opt.value) === String(this.value);
|
|
307
|
+
aeSelectOption({
|
|
308
|
+
key: `opt-${opt.value}`,
|
|
309
|
+
value: String(opt.value),
|
|
310
|
+
label: opt.label,
|
|
311
|
+
textContent: t(opt.label, opt.label),
|
|
312
|
+
selected: isSelected ? true : void 0
|
|
313
|
+
});
|
|
314
|
+
} else {
|
|
315
|
+
const isSelected = this.multiple ? multiValues.some((v) => String(v) === String(opt)) : this.value != null && String(opt) === String(this.value);
|
|
316
|
+
aeSelectOption({
|
|
317
|
+
key: `opt-${opt}`,
|
|
318
|
+
value: String(opt),
|
|
319
|
+
textContent: String(opt),
|
|
320
|
+
selected: isSelected ? true : void 0
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
_isSelectOption(option) {
|
|
326
|
+
return option !== null && typeof option === "object" && typeof option.label === "string" && (typeof option.value === "string" || typeof option.value === "number");
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
_init = __decoratorStart(_a);
|
|
330
|
+
__expanded = /* @__PURE__ */ new WeakMap();
|
|
331
|
+
_options = /* @__PURE__ */ new WeakMap();
|
|
332
|
+
_position = /* @__PURE__ */ new WeakMap();
|
|
333
|
+
_placeholder = /* @__PURE__ */ new WeakMap();
|
|
334
|
+
_multiple = /* @__PURE__ */ new WeakMap();
|
|
335
|
+
_expandable = /* @__PURE__ */ new WeakMap();
|
|
336
|
+
__decorateElement(_init, 4, "_expanded", __expanded_dec, Select, __expanded);
|
|
337
|
+
__decorateElement(_init, 4, "options", _options_dec, Select, _options);
|
|
338
|
+
__decorateElement(_init, 4, "position", _position_dec, Select, _position);
|
|
339
|
+
__decorateElement(_init, 4, "placeholder", _placeholder_dec, Select, _placeholder);
|
|
340
|
+
__decorateElement(_init, 4, "multiple", _multiple_dec, Select, _multiple);
|
|
341
|
+
__decorateElement(_init, 4, "expandable", _expandable_dec, Select, _expandable);
|
|
342
|
+
__decorateElement(_init, 5, "value", _value_dec, Select);
|
|
343
|
+
__decorateElement(_init, 5, "defaultValue", _defaultValue_dec, Select);
|
|
344
|
+
__decoratorMetadata(_init, Select);
|
|
345
|
+
__publicField(Select, "tagName", "select");
|
|
346
|
+
__publicField(Select, "styles", [styleVariables, sizeCSS, style]);
|
|
347
|
+
Select.register();
|
|
348
|
+
export {
|
|
349
|
+
Select as S
|
|
350
|
+
};
|
|
351
|
+
//# sourceMappingURL=select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.js","sources":["../../src/select/select.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport { t } from 'aeico-localize';\nimport type {\n SelectOptionValue,\n SelectOption,\n SelectOptions,\n SelectPosition,\n SelectMultiValue,\n} from './defines';\nimport style from '../styles/components/select.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport SelectOptionElement from './select-option';\nimport '../tag/tag';\nimport { prop } from 'aeico';\n\n/**\n * Select component supporting single and multi-select modes, with options provided via both props and slots.\n * - `options` prop accepts an array of strings or objects with `value` and `label` for programmatic options.\n * - Slot content allows for declarative options using `<ae-select-option>` elements.\n * @example\n * <ae-select placeholder=\"Choose an option\" position=\"bottom\">\n * <ae-select-option value=\"1\" label=\"Option 1\">Option 1</ae-select-option>\n * <ae-select-option value=\"2\" label=\"Option 2\">Option 2</ae-select-option>\n * </ae-select>\n *\n */\nclass Select extends AeicoField<SelectOptionValue | SelectMultiValue> {\n protected fieldElement = null;\n private _isOpen = false;\n private _triggerEl: HTMLElement | null = null;\n private _dropdownEl: HTMLElement | null = null;\n private _slotEl: HTMLSlotElement | null = null;\n private _slotOptionData: Array<{ value: string; label: string }> = [];\n private _selectedListEl: HTMLElement | null = null;\n\n static tagName = 'select';\n\n @prop({ type: Boolean, observe: false, reflect: false })\n accessor _expanded: boolean = false;\n\n @prop({ type: Array })\n accessor options: SelectOptions | undefined;\n\n @prop({ type: String })\n accessor position: SelectPosition | undefined;\n\n @prop({ type: String })\n accessor placeholder: string | undefined;\n\n @prop({ type: Boolean })\n accessor multiple: boolean = false;\n\n @prop({ type: Boolean })\n accessor expandable: boolean = false;\n\n // Override base class value prop to support both string and array (multi-select).\n // Uses field decorator (not accessor) because TypeScript TS2611 disallows overriding\n // a parent class data property (declare value?) with an accessor in a subclass.\n @prop({\n type: String,\n parser: (v) => {\n if (v === null || v === undefined) return undefined;\n try {\n return JSON.parse(v);\n } catch {\n return v;\n }\n },\n formatter: (v) => {\n if (v === null || v === undefined) return '';\n if (Array.isArray(v)) return JSON.stringify(v);\n // eslint-disable-next-line @typescript-eslint/no-base-to-string\n return String(v);\n },\n })\n override value: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n // Override base class defaultValue so arrays are JSON-serialized to the attribute,\n // matching the value prop's parser/formatter. Without this override, setting\n // defaultValue = ['a', 'b'] would be serialized as String(['a','b']) = \"a,b\",\n // and reset() would restore a single string \"a,b\" instead of the array.\n @prop({\n type: String,\n parser: (v) => {\n if (v === null || v === undefined) return undefined;\n try {\n return JSON.parse(v);\n } catch {\n return v;\n }\n },\n formatter: (v) => {\n if (v === null || v === undefined) return '';\n if (Array.isArray(v)) return JSON.stringify(v);\n // eslint-disable-next-line @typescript-eslint/no-base-to-string\n return String(v);\n },\n })\n override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n protected static styles = [variables, sizeCSS, style];\n\n protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {\n // Reactive re-render via this.value prop change handles the display update\n }\n\n protected getValue(): any {\n if (this.multiple) return this._getMultiValues();\n\n return this.value || '';\n }\n\n private _getMultiValues(): SelectMultiValue {\n if (Array.isArray(this.value)) return this.value;\n if (this.value != null && this.value !== '') return [this.value];\n\n return [];\n }\n\n protected onDisabledChanged(_newValue: boolean): void {\n // disabled is a reactive prop — render() already picks it up automatically\n }\n\n protected onUpdated(_changedProps: Map<string, unknown>): void {\n if (!this.multiple || this.expandable) {\n if (this._expanded) this._expanded = false;\n return;\n }\n const list = this._selectedListEl;\n if (!list) return;\n const overflowing = list.scrollWidth > list.clientWidth + 1;\n if (overflowing !== this._expanded) this._expanded = overflowing;\n }\n\n private _findLabel(value: SelectOptionValue): string {\n const strVal = String(value);\n if (Array.isArray(this.options)) {\n for (const opt of this.options) {\n if (this._isSelectOption(opt)) {\n if (String(opt.value) === strVal) return t(opt.label, opt.label);\n } else {\n if (String(opt) === strVal) return strVal;\n }\n }\n }\n\n for (const opt of this._slotOptionData) {\n if (opt.value === strVal) return opt.label;\n }\n\n return strVal;\n }\n\n private _onSlotChange(): void {\n if (!this._slotEl) return;\n const data: Array<{ value: string; label: string }> = [];\n for (const el of this._slotEl.assignedElements({ flatten: true })) {\n if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n const optEl = el as SelectOptionElement;\n data.push({\n value: optEl.value ?? el.getAttribute('value') ?? '',\n label: optEl.label || el.textContent?.trim() || '',\n });\n }\n this._slotOptionData = data;\n this.update();\n }\n\n private _toggleDropdown(): void {\n if (this._isOpen) {\n this._closeDropdown();\n } else {\n this._openDropdown();\n }\n }\n\n private _openDropdown(): void {\n this._isOpen = true;\n this._syncOpenState();\n }\n\n private _closeDropdown(): void {\n this._isOpen = false;\n this._syncOpenState();\n }\n\n private _syncOpenState(): void {\n this._triggerEl?.classList.toggle('open', this._isOpen);\n this._dropdownEl?.classList.toggle('open', this._isOpen);\n }\n\n private readonly _handleOutsideClick = (e: Event): void => {\n if (!e.composedPath().includes(this)) {\n this._closeDropdown();\n }\n };\n\n private readonly _handleOptionSelect = (e: Event): void => {\n const { value, label } = (e as CustomEvent<{ value: string; label: string }>).detail;\n if (!this._slotOptionData.find((o) => o.value === value)) {\n this._slotOptionData = [\n ...this._slotOptionData.filter((o) => o.value !== value),\n { value, label },\n ];\n }\n if (this.multiple) {\n const current = this._getMultiValues();\n const idx = current.findIndex((v) => String(v) === value);\n const next: SelectMultiValue =\n idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];\n\n this.setValue(next, { silent: false, action: 'change' });\n } else {\n this.setValue(value, { silent: false, action: 'change' });\n this._closeDropdown();\n }\n };\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this._handleOutsideClick);\n this.addEventListener('selectoption', this._handleOptionSelect);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleOutsideClick);\n this.removeEventListener('selectoption', this._handleOptionSelect);\n }\n\n private _syncSlotOptionsSelected(): void {\n if (!this._slotEl) return;\n const multiValues = this._getMultiValues();\n for (const el of this._slotEl.assignedElements({ flatten: true })) {\n if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n const optEl = el as SelectOptionElement;\n const optVal = optEl.value ?? el.getAttribute('value') ?? '';\n const isSelected = this.multiple\n ? multiValues.some((v) => String(v) === optVal)\n : this.value != null && this.value !== '' && String(this.value) === optVal;\n // undefined triggers removeAttribute via reactive setter\n // (null would work too but undefined is type-safe for boolean | undefined)\n optEl.selected = isSelected ? true : undefined;\n }\n }\n\n render() {\n const position = this.position || 'bottom';\n const multiValues = this.multiple ? this._getMultiValues() : [];\n const hasMultiSelection = this.multiple && multiValues.length > 0;\n const selectedLabel =\n !this.multiple && this.value != null && this.value !== ''\n ? this._findLabel(this.value as SelectOptionValue)\n : '';\n const isDisabled = Boolean(this.disabled);\n this._selectedListEl = null;\n\n this._syncSlotOptionsSelected();\n\n return html(({ div, span, slot }) => {\n div({ className: 'container' }, () => {\n this._triggerEl = div(\n {\n className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,\n '@click': () => {\n if (isDisabled) return;\n\n this._toggleDropdown();\n },\n },\n () => {\n if (this.multiple) {\n if (hasMultiSelection) {\n this._selectedListEl = div(\n {\n className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,\n },\n () => {\n for (const v of multiValues) {\n const lbl = this._findLabel(v);\n tags.aeTag({\n key: `sel-${v}`,\n color: 'default',\n variant: 'faint',\n dismissible: true,\n disabled: isDisabled,\n textContent: lbl,\n '@dismiss': (e: Event) => {\n e.stopPropagation();\n if (isDisabled) return;\n\n const next = multiValues.filter((item) => String(item) !== String(v));\n this.setValue(next, { silent: false, action: 'change' });\n },\n });\n }\n },\n );\n if (!this.expandable && this._expanded) {\n span({ className: 'overflow-indicator', textContent: '…' });\n }\n } else {\n span({ className: 'value placeholder', textContent: this.placeholder || '' });\n }\n } else {\n if (selectedLabel) {\n span({ className: 'value', textContent: selectedLabel });\n } else {\n span({ className: 'value placeholder', textContent: this.placeholder || '' });\n }\n }\n span({ className: 'arrow', textContent: '▾' });\n },\n );\n\n this._dropdownEl = div(\n {\n className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,\n },\n () => {\n this._renderProgrammaticOptions();\n this._slotEl = slot({\n '@slotchange': () => this._onSlotChange(),\n });\n },\n );\n\n this.renderActionButtons();\n });\n });\n }\n\n private _renderProgrammaticOptions(): void {\n if (!Array.isArray(this.options)) return;\n\n const { aeSelectOption } = tags;\n const multiValues = this.multiple ? this._getMultiValues() : [];\n for (const opt of this.options) {\n if (this._isSelectOption(opt)) {\n const isSelected = this.multiple\n ? multiValues.some((v) => String(v) === String(opt.value))\n : this.value != null && String(opt.value) === String(this.value);\n aeSelectOption({\n key: `opt-${opt.value}`,\n value: String(opt.value),\n label: opt.label,\n textContent: t(opt.label, opt.label),\n selected: isSelected ? true : undefined,\n });\n } else {\n const isSelected = this.multiple\n ? multiValues.some((v) => String(v) === String(opt))\n : this.value != null && String(opt) === String(this.value);\n aeSelectOption({\n key: `opt-${opt}`,\n value: String(opt),\n textContent: String(opt),\n selected: isSelected ? true : undefined,\n });\n }\n }\n }\n\n private _isSelectOption(option: unknown): option is SelectOption {\n return (\n option !== null &&\n typeof option === 'object' &&\n typeof (option as SelectOption).label === 'string' &&\n (typeof (option as SelectOption).value === 'string' ||\n typeof (option as SelectOption).value === 'number')\n );\n }\n}\n\nSelect.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-select': Select;\n }\n}\n\nexport default Select;\nexport type SelectProps = InferProps<typeof Select>;\n"],"names":["_a","variables"],"mappings":"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"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const sizeCSS = ':host([size="xs"]) { font-size: var(--size-xs); }\n:host([size="sm"]) { font-size: var(--size-s); }\n:host([size="md"]) { font-size: var(--size-m); }\n:host([size="lg"]) { font-size: var(--size-l); }\n:host([size="xl"]) { font-size: var(--size-xl); }\n:host([size="3xs"]) { font-size: var(--size-3xs); }\n:host([size="2xs"]) { font-size: var(--size-2xs); }\n';
|
|
3
|
+
exports.sizeCSS = sizeCSS;
|
|
4
|
+
//# sourceMappingURL=size.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"size.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
const sizeCSS = ':host([size="xs"]) { font-size: var(--size-xs); }\n:host([size="sm"]) { font-size: var(--size-s); }\n:host([size="md"]) { font-size: var(--size-m); }\n:host([size="lg"]) { font-size: var(--size-l); }\n:host([size="xl"]) { font-size: var(--size-xl); }\n:host([size="3xs"]) { font-size: var(--size-3xs); }\n:host([size="2xs"]) { font-size: var(--size-2xs); }\n';
|
|
2
|
+
export {
|
|
3
|
+
sizeCSS as s
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=size.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"size.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|