@skf-design-system/ui-components 1.0.2-beta.26 → 1.0.2-beta.27
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/components/textarea/textarea.component.d.ts +3 -0
- package/dist/components/tooltip/tooltip.component.js +2 -2
- package/dist/custom-elements.json +0 -21
- package/dist/internal/base-classes/popover/popover.base.d.ts +1 -1
- package/dist/internal/base-classes/popover/popover.base.js +48 -50
- package/dist/types/jsx/custom-element-jsx.d.ts +0 -8
- package/package.json +1 -1
|
@@ -74,8 +74,11 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
|
|
|
74
74
|
private $input?;
|
|
75
75
|
firstUpdated(): void;
|
|
76
76
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
77
|
+
/** @internal */
|
|
77
78
|
_invalidChanged(): void;
|
|
79
|
+
/** @internal */
|
|
78
80
|
_hintChanged(): void;
|
|
81
|
+
/** @internal */
|
|
79
82
|
_valueChanged(): void;
|
|
80
83
|
/** @internal */
|
|
81
84
|
_resetValue: (event: Event) => void;
|
|
@@ -12,13 +12,13 @@ const e = class e extends t {
|
|
|
12
12
|
s.addEventListener(
|
|
13
13
|
"blur",
|
|
14
14
|
() => {
|
|
15
|
-
this.close(
|
|
15
|
+
this.close();
|
|
16
16
|
},
|
|
17
17
|
{ signal: this._signal }
|
|
18
18
|
), s.addEventListener("focus", this.open, { signal: this._signal }), s.addEventListener("mouseenter", this.open, { signal: this._signal }), s.addEventListener(
|
|
19
19
|
"mouseleave",
|
|
20
20
|
() => {
|
|
21
|
-
this.close(
|
|
21
|
+
this.close();
|
|
22
22
|
},
|
|
23
23
|
{ signal: this._signal }
|
|
24
24
|
);
|
|
@@ -7627,27 +7627,6 @@
|
|
|
7627
7627
|
"default": "''",
|
|
7628
7628
|
"description": "The current value of the text area",
|
|
7629
7629
|
"attribute": "value"
|
|
7630
|
-
},
|
|
7631
|
-
{
|
|
7632
|
-
"kind": "method",
|
|
7633
|
-
"name": "_invalidChanged",
|
|
7634
|
-
"type": {
|
|
7635
|
-
"text": "_invalidChanged() => void"
|
|
7636
|
-
}
|
|
7637
|
-
},
|
|
7638
|
-
{
|
|
7639
|
-
"kind": "method",
|
|
7640
|
-
"name": "_hintChanged",
|
|
7641
|
-
"type": {
|
|
7642
|
-
"text": "_hintChanged() => void"
|
|
7643
|
-
}
|
|
7644
|
-
},
|
|
7645
|
-
{
|
|
7646
|
-
"kind": "method",
|
|
7647
|
-
"name": "_valueChanged",
|
|
7648
|
-
"type": {
|
|
7649
|
-
"text": "_valueChanged() => void"
|
|
7650
|
-
}
|
|
7651
7630
|
}
|
|
7652
7631
|
],
|
|
7653
7632
|
"events": [
|
|
@@ -53,7 +53,7 @@ export declare class SkfPopoverBase extends SkfElement {
|
|
|
53
53
|
reposition: () => Promise<void>;
|
|
54
54
|
handleEscapeKey: (e: KeyboardEvent) => void;
|
|
55
55
|
open: (e: Event) => void;
|
|
56
|
-
close: (
|
|
56
|
+
close: () => void;
|
|
57
57
|
/** @internal eventlisteners here should implement abort signal */
|
|
58
58
|
addEventListeners($element: HTMLElement | Element): void;
|
|
59
59
|
/** @internal */
|
|
@@ -8,18 +8,18 @@ import { nothing as P, html as m } from "lit";
|
|
|
8
8
|
import { property as u, state as c, query as S } from "lit/decorators.js";
|
|
9
9
|
import { classMap as A } from "lit/directives/class-map.js";
|
|
10
10
|
import { styles as L } from "./popover.styles.js";
|
|
11
|
-
var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor,
|
|
12
|
-
for (var e = o > 1 ? void 0 : o ? F(t,
|
|
13
|
-
(a = g[n]) && (e = (o ? a(t,
|
|
14
|
-
return o && e && x(t,
|
|
15
|
-
},
|
|
16
|
-
const
|
|
11
|
+
var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (g, t, r, o) => {
|
|
12
|
+
for (var e = o > 1 ? void 0 : o ? F(t, r) : t, n = g.length - 1, a; n >= 0; n--)
|
|
13
|
+
(a = g[n]) && (e = (o ? a(t, r, e) : a(e)) || e);
|
|
14
|
+
return o && e && x(t, r, e), e;
|
|
15
|
+
}, l;
|
|
16
|
+
const s = (l = class extends C {
|
|
17
17
|
constructor() {
|
|
18
18
|
super(...arguments), this._skipClosingThisTick = !1, this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.popoverController = new E(this), this._toggleOpen = (t) => {
|
|
19
19
|
this.isOpen = t ?? !this.isOpen;
|
|
20
20
|
}, this._handleToggle = (t) => {
|
|
21
|
-
const
|
|
22
|
-
this.isOpen =
|
|
21
|
+
const r = t.newState === "open";
|
|
22
|
+
this.isOpen = r, this.emit(r ? "skf-opened" : "skf-closed");
|
|
23
23
|
}, this.handleToggleOpen = async () => {
|
|
24
24
|
this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
|
|
25
25
|
}, this.handleAnchorChange = async () => {
|
|
@@ -31,16 +31,16 @@ const i = (h = class extends C {
|
|
|
31
31
|
if (!this.$anchor) return;
|
|
32
32
|
const t = [y(), $(this.offset)];
|
|
33
33
|
this.arrow && t.push(O({ element: this.$arrow }));
|
|
34
|
-
const { x:
|
|
34
|
+
const { x: r, y: o, middlewareData: e } = await _(this.$anchor, this.$popover, {
|
|
35
35
|
placement: this.placement,
|
|
36
36
|
middleware: t,
|
|
37
37
|
strategy: "fixed"
|
|
38
38
|
});
|
|
39
39
|
if (Object.assign(this.$popover.style, {
|
|
40
|
-
left: `${String(
|
|
40
|
+
left: `${String(r)}px`,
|
|
41
41
|
top: `${String(o)}px`
|
|
42
42
|
}), this.arrow) {
|
|
43
|
-
const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x,
|
|
43
|
+
const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, h = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof h == "number" ? `${String(h)}px` : "", w = {
|
|
44
44
|
bottom: 45,
|
|
45
45
|
right: 135,
|
|
46
46
|
top: 225,
|
|
@@ -59,8 +59,8 @@ const i = (h = class extends C {
|
|
|
59
59
|
t.stopPropagation(), this.tagName === "SKF-TOOLTIP" && this.isOpen && this.close();
|
|
60
60
|
const o = this.tagName === "SKF-MENU" ? void 0 : !0;
|
|
61
61
|
this._toggleOpen(o), this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this._signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
|
|
62
|
-
}, this.close = (
|
|
63
|
-
|
|
62
|
+
}, this.close = () => {
|
|
63
|
+
this._toggleOpen(!1), this._abortCtrl.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
|
|
64
64
|
};
|
|
65
65
|
}
|
|
66
66
|
connectedCallback() {
|
|
@@ -78,25 +78,23 @@ const i = (h = class extends C {
|
|
|
78
78
|
"focusout",
|
|
79
79
|
(o) => {
|
|
80
80
|
const e = this.contains(o.relatedTarget);
|
|
81
|
-
t && e || this._skipClosingThisTick || this.close(
|
|
81
|
+
t && e || this._skipClosingThisTick || this.close();
|
|
82
82
|
},
|
|
83
83
|
{ signal: this._signal }
|
|
84
84
|
), this.addEventListener(
|
|
85
85
|
"focusout",
|
|
86
86
|
(o) => {
|
|
87
87
|
const e = this.contains(o.relatedTarget);
|
|
88
|
-
t && e || this.close(
|
|
88
|
+
t && e || this.close();
|
|
89
89
|
},
|
|
90
90
|
{ signal: this._signal }
|
|
91
91
|
), this._skfPopoverOutsideClickListener ??= (o) => {
|
|
92
|
-
this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close(
|
|
92
|
+
this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close() : (this._skipClosingThisTick = !0, setTimeout(() => {
|
|
93
93
|
this._skipClosingThisTick = !1;
|
|
94
94
|
}, 0));
|
|
95
95
|
}, document.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
|
|
96
96
|
signal: this._signal
|
|
97
|
-
})
|
|
98
|
-
const s = window.top && window.self !== window.top;
|
|
99
|
-
console.log("contains frames", s), s && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
|
|
97
|
+
}), window.top && window.self !== window.top && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
|
|
100
98
|
signal: this._signal
|
|
101
99
|
}), this.$popover.id = await T(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this._signal });
|
|
102
100
|
}
|
|
@@ -110,7 +108,7 @@ const i = (h = class extends C {
|
|
|
110
108
|
}
|
|
111
109
|
render() {
|
|
112
110
|
return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), m`
|
|
113
|
-
<div class=${A({ popover: !0, ...
|
|
111
|
+
<div class=${A({ popover: !0, ...l.classMap })} id="root">
|
|
114
112
|
<slot></slot>
|
|
115
113
|
${this.arrow ? m`<div id="arrow"></div>` : P}
|
|
116
114
|
</div>
|
|
@@ -129,52 +127,52 @@ const i = (h = class extends C {
|
|
|
129
127
|
function e(n, a) {
|
|
130
128
|
const p = Array.from(
|
|
131
129
|
n.querySelectorAll(a.join(", "))
|
|
132
|
-
), d = Array.from(n.querySelectorAll("*")).map((
|
|
133
|
-
for (const
|
|
130
|
+
), d = Array.from(n.querySelectorAll("*")).map((h) => h.shadowRoot).filter((h) => h !== null);
|
|
131
|
+
for (const h of d)
|
|
134
132
|
p.push(
|
|
135
|
-
...e(
|
|
133
|
+
...e(h, a)
|
|
136
134
|
);
|
|
137
135
|
return p;
|
|
138
136
|
}
|
|
139
137
|
}
|
|
140
|
-
},
|
|
141
|
-
|
|
138
|
+
}, l.styles = [k, L], l.classMap = {}, l);
|
|
139
|
+
i([
|
|
142
140
|
u()
|
|
143
|
-
],
|
|
144
|
-
|
|
141
|
+
], s.prototype, "placement", 2);
|
|
142
|
+
i([
|
|
145
143
|
u()
|
|
146
|
-
],
|
|
147
|
-
|
|
144
|
+
], s.prototype, "variant", 2);
|
|
145
|
+
i([
|
|
148
146
|
u()
|
|
149
|
-
],
|
|
150
|
-
|
|
147
|
+
], s.prototype, "anchor", 2);
|
|
148
|
+
i([
|
|
151
149
|
c()
|
|
152
|
-
],
|
|
153
|
-
|
|
150
|
+
], s.prototype, "isOpen", 2);
|
|
151
|
+
i([
|
|
154
152
|
c()
|
|
155
|
-
],
|
|
156
|
-
|
|
153
|
+
], s.prototype, "offset", 2);
|
|
154
|
+
i([
|
|
157
155
|
c()
|
|
158
|
-
],
|
|
159
|
-
|
|
156
|
+
], s.prototype, "$anchor", 2);
|
|
157
|
+
i([
|
|
160
158
|
c()
|
|
161
|
-
],
|
|
162
|
-
|
|
159
|
+
], s.prototype, "arrow", 2);
|
|
160
|
+
i([
|
|
163
161
|
c()
|
|
164
|
-
],
|
|
165
|
-
|
|
162
|
+
], s.prototype, "triggerEvent", 2);
|
|
163
|
+
i([
|
|
166
164
|
S("#arrow")
|
|
167
|
-
],
|
|
168
|
-
|
|
165
|
+
], s.prototype, "$arrow", 2);
|
|
166
|
+
i([
|
|
169
167
|
f("isOpen", { afterUpdate: !0 })
|
|
170
|
-
],
|
|
171
|
-
|
|
168
|
+
], s.prototype, "handleToggleOpen", 2);
|
|
169
|
+
i([
|
|
172
170
|
f("$anchor")
|
|
173
|
-
],
|
|
174
|
-
|
|
171
|
+
], s.prototype, "handleAnchorEl", 1);
|
|
172
|
+
i([
|
|
175
173
|
f("anchor")
|
|
176
|
-
],
|
|
177
|
-
let
|
|
174
|
+
], s.prototype, "handleAnchorChange", 2);
|
|
175
|
+
let W = s;
|
|
178
176
|
export {
|
|
179
|
-
|
|
177
|
+
W as SkfPopoverBase
|
|
180
178
|
};
|
|
@@ -2491,14 +2491,6 @@ export type SkfTooltipProps = {
|
|
|
2491
2491
|
* Areas where markup can be added to the component.
|
|
2492
2492
|
*
|
|
2493
2493
|
* - `(default)`: The textareas label. Alternatively, you can use the `label` attribute.
|
|
2494
|
-
*
|
|
2495
|
-
* ## Methods
|
|
2496
|
-
*
|
|
2497
|
-
* Methods that can be called to access component functionality.
|
|
2498
|
-
*
|
|
2499
|
-
* - `_invalidChanged() => void`: undefined
|
|
2500
|
-
* - `_hintChanged() => void`: undefined
|
|
2501
|
-
* - `_valueChanged() => void`: undefined
|
|
2502
2494
|
*/
|
|
2503
2495
|
"skf-textarea": Partial<SkfTextAreaProps & BaseProps<SkfTextArea> & BaseEvents>;
|
|
2504
2496
|
|
package/package.json
CHANGED