@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.
@@ -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("blur");
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("mouseleave");
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: (reason?: string) => void;
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, r = (g, t, s, o) => {
12
- for (var e = o > 1 ? void 0 : o ? F(t, s) : t, n = g.length - 1, a; n >= 0; n--)
13
- (a = g[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
14
- return o && e && x(t, s, e), e;
15
- }, h;
16
- const i = (h = class extends C {
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 s = t.newState === "open";
22
- this.isOpen = s, this.emit(s ? "skf-opened" : "skf-closed");
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: s, y: o, middlewareData: e } = await _(this.$anchor, this.$popover, {
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(s)}px`,
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, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", w = {
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 = (t = "") => {
63
- console.log("Popover closing", t), this._toggleOpen(!1), this._abortCtrl.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
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("anchor focus out");
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("popover focusout");
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("outside click") : (this._skipClosingThisTick = !0, setTimeout(() => {
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, ...h.classMap })} id="root">
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((l) => l.shadowRoot).filter((l) => l !== null);
133
- for (const l of d)
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(l, a)
133
+ ...e(h, a)
136
134
  );
137
135
  return p;
138
136
  }
139
137
  }
140
- }, h.styles = [k, L], h.classMap = {}, h);
141
- r([
138
+ }, l.styles = [k, L], l.classMap = {}, l);
139
+ i([
142
140
  u()
143
- ], i.prototype, "placement", 2);
144
- r([
141
+ ], s.prototype, "placement", 2);
142
+ i([
145
143
  u()
146
- ], i.prototype, "variant", 2);
147
- r([
144
+ ], s.prototype, "variant", 2);
145
+ i([
148
146
  u()
149
- ], i.prototype, "anchor", 2);
150
- r([
147
+ ], s.prototype, "anchor", 2);
148
+ i([
151
149
  c()
152
- ], i.prototype, "isOpen", 2);
153
- r([
150
+ ], s.prototype, "isOpen", 2);
151
+ i([
154
152
  c()
155
- ], i.prototype, "offset", 2);
156
- r([
153
+ ], s.prototype, "offset", 2);
154
+ i([
157
155
  c()
158
- ], i.prototype, "$anchor", 2);
159
- r([
156
+ ], s.prototype, "$anchor", 2);
157
+ i([
160
158
  c()
161
- ], i.prototype, "arrow", 2);
162
- r([
159
+ ], s.prototype, "arrow", 2);
160
+ i([
163
161
  c()
164
- ], i.prototype, "triggerEvent", 2);
165
- r([
162
+ ], s.prototype, "triggerEvent", 2);
163
+ i([
166
164
  S("#arrow")
167
- ], i.prototype, "$arrow", 2);
168
- r([
165
+ ], s.prototype, "$arrow", 2);
166
+ i([
169
167
  f("isOpen", { afterUpdate: !0 })
170
- ], i.prototype, "handleToggleOpen", 2);
171
- r([
168
+ ], s.prototype, "handleToggleOpen", 2);
169
+ i([
172
170
  f("$anchor")
173
- ], i.prototype, "handleAnchorEl", 1);
174
- r([
171
+ ], s.prototype, "handleAnchorEl", 1);
172
+ i([
175
173
  f("anchor")
176
- ], i.prototype, "handleAnchorChange", 2);
177
- let z = i;
174
+ ], s.prototype, "handleAnchorChange", 2);
175
+ let W = s;
178
176
  export {
179
- z as SkfPopoverBase
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
@@ -35,7 +35,7 @@
35
35
  "sideEffects": true,
36
36
  "type": "module",
37
37
  "types": "./dist/index.d.ts",
38
- "version": "1.0.2-beta.26",
38
+ "version": "1.0.2-beta.27",
39
39
  "dependencies": {
40
40
  "@floating-ui/dom": "^1.7.4",
41
41
  "@js-temporal/polyfill": "^0.5.1",