@skf-design-system/ui-components 1.0.0-alpha.41 → 1.0.0-alpha.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +1 -1
  2. package/dist/components/button/button.component.js +70 -66
  3. package/dist/components/button/button.styles.d.ts +1 -1
  4. package/dist/components/button/button.styles.js +117 -113
  5. package/dist/components/datepicker/datepicker-popup.component.js +13 -11
  6. package/dist/components/switch/switch.component.d.ts +2 -0
  7. package/dist/components/switch/switch.component.js +44 -37
  8. package/dist/internal/base-classes/popover/popover.base.js +4 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -22,7 +22,7 @@
22
22
  <a href="https://teams.microsoft.com/l/team/19%3A15d8521717e14c419998b0fed71289a5%40thread.tacv2/conversations?groupId=286b39ed-ed94-43da-8a3f-383319f6c9dc&tenantId=41875f2b-33e8-4670-92a8-f643afbb243a">
23
23
  <img alt="MS Teams" src="https://img.shields.io/badge/MS Teams-4E5FBF?style=for-the-badge&logo=windows&logoColor=white">
24
24
  </a>
25
- <a href="https://beta--641c13cdbf6bbfbd6da88a83.chromatic.com">
25
+ <a href="https://v1--661e8ae0ef9b24dadeea9b18.chromatic.com/?path=/docs/introduction-welcome--overview">
26
26
  <img alt="Storybook - Stable" src="https://img.shields.io/badge/Stable-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
27
27
  </a>
28
28
  <a href="https://zeroheight.com/853e936c9/p/07d378-component-overview">
package/dist/components/button/button.component.js CHANGED
@@ -1,38 +1,38 @@
1
- var f = (i) => {
1
+ var m = (i) => {
2
2
  throw TypeError(i);
3
3
  };
4
- var u = (i, e, t) => e.has(i) || f("Cannot " + t);
5
- var h = (i, e, t) => (u(i, e, "read from private field"), t ? t.call(i) : e.get(i)), _ = (i, e, t) => e.has(i) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), v = (i, e, t, a) => (u(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
4
+ var f = (i, e, t) => e.has(i) || m("Cannot " + t);
5
+ var d = (i, e, t) => (f(i, e, "read from private field"), t ? t.call(i) : e.get(i)), u = (i, e, t) => e.has(i) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), _ = (i, e, t, a) => (f(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
6
6
  import "../icon/icon.js";
7
7
  import "../loader/loader.js";
8
- import { SkfElement as g } from "../../internal/components/skf-element.js";
9
- import { watch as O } from "../../internal/helpers/watch.js";
10
- import { componentStyles as V } from "../../styles/component.styles.js";
11
- import { html as p, LitElement as w, nothing as b } from "lit";
12
- import { property as r, state as z, query as m } from "lit/decorators.js";
13
- import { classMap as P } from "lit/directives/class-map.js";
14
- import { ifDefined as $ } from "lit/directives/if-defined.js";
15
- import { styles as L } from "./button.styles.js";
16
- var C = Object.defineProperty, F = Object.getOwnPropertyDescriptor, s = (i, e, t, a) => {
17
- for (var n = a > 1 ? void 0 : a ? F(e, t) : e, c = i.length - 1, y; c >= 0; c--)
18
- (y = i[c]) && (n = (a ? y(e, t, n) : y(n)) || n);
19
- return a && n && C(e, t, n), n;
8
+ import { SkfElement as O } from "../../internal/components/skf-element.js";
9
+ import { watch as V } from "../../internal/helpers/watch.js";
10
+ import { componentStyles as w } from "../../styles/component.styles.js";
11
+ import { html as y, LitElement as z, nothing as v } from "lit";
12
+ import { property as r, state as P, query as b } from "lit/decorators.js";
13
+ import { classMap as $ } from "lit/directives/class-map.js";
14
+ import { ifDefined as g } from "lit/directives/if-defined.js";
15
+ import { styles as C } from "./button.styles.js";
16
+ var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (i, e, t, a) => {
17
+ for (var n = a > 1 ? void 0 : a ? F(e, t) : e, p = i.length - 1, c; p >= 0; p--)
18
+ (c = i[p]) && (n = (a ? c(e, t, n) : c(n)) || n);
19
+ return a && n && L(e, t, n), n;
20
20
  }, l;
21
- const d = class d extends g {
21
+ const h = class h extends O {
22
22
  constructor() {
23
23
  super();
24
- _(this, l);
24
+ u(this, l);
25
25
  this._transitionOptions = {
26
26
  duration: 200,
27
27
  fill: "forwards"
28
28
  }, this.destructive = !1, this.disabled = !1, this.iconOnly = !1, this.iconPosition = "left", this.loading = !1, this.noValidate = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._handleClick = (t) => {
29
29
  t.preventDefault(), t.stopPropagation(), !(this.disabled || this.loading) && (this.dispatchEvent(new CustomEvent("click", { bubbles: !0, composed: !0, detail: t })), this.type === "submit" && this._submitForm(), this.type === "reset" && this._resetForm());
30
30
  }, this._submitForm = () => {
31
- const t = !h(this, l).form?.reportValidity(), a = !this.noValidate, n = !h(this, l).form?.hasAttribute("no-validate");
32
- (a || n) && t || h(this, l).form?.requestSubmit();
31
+ const t = !d(this, l).form?.reportValidity(), a = !this.noValidate, n = !d(this, l).form?.hasAttribute("no-validate");
32
+ (a || n) && t || d(this, l).form?.requestSubmit();
33
33
  }, this._resetForm = () => {
34
- h(this, l).form?.reset();
35
- }, this._renderIcon = () => p`<skf-icon data-color="custom" name=${$(this.icon)}></skf-icon>`, v(this, l, this.attachInternals());
34
+ d(this, l).form?.reset();
35
+ }, this._renderIcon = () => y`<skf-icon data-color="custom" name=${g(this.icon)}></skf-icon>`, _(this, l, this.attachInternals());
36
36
  }
37
37
  firstUpdated(t) {
38
38
  if (t.has("loading") && this.loading) {
@@ -56,12 +56,16 @@ const d = class d extends g {
56
56
  !this.$body || !this.$loader || (await this.$loader.animate({ opacity: 0 }, this._transitionOptions).finished, this._loaderVisible = !1, this.$body.animate({ opacity: 1 }, this._transitionOptions));
57
57
  }
58
58
  render() {
59
- return p`
59
+ const t = {
60
+ btn__label: !0,
61
+ "visually-hidden": this.iconOnly
62
+ };
63
+ return y`
60
64
  <button
61
65
  ?disabled=${this.disabled || this.loading}
62
66
  @click=${this._handleClick}
63
67
  aria-busy=${this.loading}
64
- class=${P({
68
+ class=${$({
65
69
  btn: !0,
66
70
  "btn--destructive": this.destructive,
67
71
  "btn--icon-only": this.iconOnly,
@@ -72,67 +76,67 @@ const d = class d extends g {
72
76
  "btn--variant-secondary": this.variant === "secondary",
73
77
  "btn--variant-tertiary": this.variant === "tertiary"
74
78
  })}
75
- type=${$(this.type)}
79
+ type=${g(this.type)}
76
80
  title=${/* An empty title prevents browser validation tooltips from appearing on hover */
77
81
  this.title}
78
82
  >
79
- ${this.variant === "primary" && this._loaderVisible ? p`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
83
+ ${this.variant === "primary" && this._loaderVisible ? y`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
80
84
  <div class="btn__body" id="body">
81
- ${this.icon && this.iconPosition === "left" ? this._renderIcon() : b}
82
- ${this.iconOnly ? b : p`<slot class="btn__label"></slot>`}
83
- ${this.icon && this.iconPosition === "right" ? this._renderIcon() : b}
85
+ ${this.icon && this.iconPosition === "left" ? this._renderIcon() : v}
86
+ <slot class=${$(t)}></slot>
87
+ ${this.icon && this.iconPosition === "right" ? this._renderIcon() : v}
84
88
  </div>
85
89
  </button>
86
90
  `;
87
91
  }
88
92
  };
89
- l = new WeakMap(), d.styles = [V, L], d.formAssociated = !0, d.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 };
90
- let o = d;
91
- s([
93
+ l = new WeakMap(), h.styles = [w, C], h.formAssociated = !0, h.shadowRootOptions = { ...z.shadowRootOptions, delegatesFocus: !0 };
94
+ let s = h;
95
+ o([
92
96
  r({ type: Boolean })
93
- ], o.prototype, "destructive", 2);
94
- s([
97
+ ], s.prototype, "destructive", 2);
98
+ o([
95
99
  r({ type: Boolean })
96
- ], o.prototype, "disabled", 2);
97
- s([
100
+ ], s.prototype, "disabled", 2);
101
+ o([
98
102
  r()
99
- ], o.prototype, "icon", 2);
100
- s([
103
+ ], s.prototype, "icon", 2);
104
+ o([
101
105
  r({ type: Boolean, attribute: "icon-only" })
102
- ], o.prototype, "iconOnly", 2);
103
- s([
106
+ ], s.prototype, "iconOnly", 2);
107
+ o([
104
108
  r({ attribute: "icon-position" })
105
- ], o.prototype, "iconPosition", 2);
106
- s([
109
+ ], s.prototype, "iconPosition", 2);
110
+ o([
107
111
  r({ type: Boolean, reflect: !0 })
108
- ], o.prototype, "loading", 2);
109
- s([
112
+ ], s.prototype, "loading", 2);
113
+ o([
110
114
  r({ type: Boolean, attribute: "no-validate" })
111
- ], o.prototype, "noValidate", 2);
112
- s([
115
+ ], s.prototype, "noValidate", 2);
116
+ o([
113
117
  r({ reflect: !0 })
114
- ], o.prototype, "size", 2);
115
- s([
118
+ ], s.prototype, "size", 2);
119
+ o([
116
120
  r()
117
- ], o.prototype, "type", 2);
118
- s([
121
+ ], s.prototype, "type", 2);
122
+ o([
119
123
  r({ reflect: !0 })
120
- ], o.prototype, "variant", 2);
121
- s([
122
- z()
123
- ], o.prototype, "_loaderVisible", 2);
124
- s([
125
- m("skf-loader")
126
- ], o.prototype, "$loader", 2);
127
- s([
128
- m("#body")
129
- ], o.prototype, "$body", 2);
130
- s([
131
- m("button")
132
- ], o.prototype, "$button", 2);
133
- s([
134
- O("loading", { afterUpdate: !0 })
135
- ], o.prototype, "_handleLoadingChange", 1);
124
+ ], s.prototype, "variant", 2);
125
+ o([
126
+ P()
127
+ ], s.prototype, "_loaderVisible", 2);
128
+ o([
129
+ b("skf-loader")
130
+ ], s.prototype, "$loader", 2);
131
+ o([
132
+ b("#body")
133
+ ], s.prototype, "$body", 2);
134
+ o([
135
+ b("button")
136
+ ], s.prototype, "$button", 2);
137
+ o([
138
+ V("loading", { afterUpdate: !0 })
139
+ ], s.prototype, "_handleLoadingChange", 1);
136
140
  export {
137
- o as SkfButton
141
+ s as SkfButton
138
142
  };
package/dist/components/button/button.styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const styles: import("lit").CSSResult;
1
+ export declare const styles: import("lit").CSSResult[];
package/dist/components/button/button.styles.js CHANGED
@@ -1,138 +1,142 @@
1
- import { css as o } from "lit";
2
- const r = o`
3
- /* stylelint-disable selector-class-pattern */
4
- @layer components {
5
- :host {
6
- contain: paint style;
7
- display: inline-block;
8
- }
9
-
10
- :host(:not([icon-only])) {
11
- max-inline-size: min(100%, 23ch);
12
- min-inline-size: 64px;
13
- }
1
+ import { visuallyHidden as o } from "../../styles/util.styles.js";
2
+ import { css as t } from "lit";
3
+ const s = [
4
+ o,
5
+ t`
6
+ /* stylelint-disable selector-class-pattern */
7
+ @layer components {
8
+ :host {
9
+ contain: initial;
10
+ display: inline-block;
11
+ }
14
12
 
15
- .btn {
16
- background-color: var(--_skf-button-state-bg-color, var(--_skf-button-bg-color));
17
- block-size: var(--_skf-button-block-size);
18
- border: var(--skf-border-width-sm) solid
19
- var(--_skf-button-state-border-color, var(--_skf-button-border-color));
20
- border-radius: var(--skf-border-radius-sm);
21
- color: var(--_skf-button-state-color, var(--_skf-button-color));
22
- display: inline-flex;
23
- font-size: var(--_skf-button-font-size, var(--skf-font-size-100));
24
- font-weight: var(--skf-font-weight-bold);
25
- position: relative;
26
-
27
- &:not(.btn--icon-only) {
28
- inline-size: 100%;
29
- padding-inline: var(--skf-spacing-100);
13
+ :host(:not([icon-only])) {
14
+ max-inline-size: min(100%, 23ch);
15
+ min-inline-size: 64px;
30
16
  }
31
17
 
32
- /**
18
+ .btn {
19
+ background-color: var(--_skf-button-state-bg-color, var(--_skf-button-bg-color));
20
+ block-size: var(--_skf-button-block-size);
21
+ border: var(--skf-border-width-sm) solid
22
+ var(--_skf-button-state-border-color, var(--_skf-button-border-color));
23
+ border-radius: var(--skf-border-radius-sm);
24
+ color: var(--_skf-button-state-color, var(--_skf-button-color));
25
+ display: inline-flex;
26
+ font-size: var(--_skf-button-font-size, var(--skf-font-size-100));
27
+ font-weight: var(--skf-font-weight-bold);
28
+ position: relative;
29
+
30
+ &:not(.btn--icon-only) {
31
+ inline-size: 100%;
32
+ padding-inline: var(--skf-spacing-100);
33
+ }
34
+
35
+ /**
33
36
  * State
34
37
  */
35
- &:focus-visible {
36
- outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
37
- outline-offset: var(--skf-size-2);
38
+ &:focus-visible {
39
+ outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
40
+ outline-offset: var(--skf-size-2);
41
+ }
42
+
43
+ &:disabled:not([aria-busy='true']) {
44
+ --_skf-button-state-bg-color: var(--_skf-button-bg-color-disabled);
45
+ --_skf-button-state-border-color: var(--_skf-button-border-color-disabled);
46
+ --_skf-button-state-color: var(--_skf-button-color-disabled);
47
+ }
48
+
49
+ &:hover:not(:disabled) {
50
+ --_skf-button-state-bg-color: var(--_skf-button-bg-color-hover);
51
+ }
52
+
53
+ &:active:not(:disabled) {
54
+ --_skf-button-state-bg-color: var(--_skf-button-bg-color-active);
55
+ }
38
56
  }
39
57
 
40
- &:disabled:not([aria-busy='true']) {
41
- --_skf-button-state-bg-color: var(--_skf-button-bg-color-disabled);
42
- --_skf-button-state-border-color: var(--_skf-button-border-color-disabled);
43
- --_skf-button-state-color: var(--_skf-button-color-disabled);
58
+ .btn--icon-only {
59
+ aspect-ratio: 1;
60
+ place-content: center;
44
61
  }
45
62
 
46
- &:hover:not(:disabled) {
47
- --_skf-button-state-bg-color: var(--_skf-button-bg-color-hover);
48
- }
49
-
50
- &:active:not(:disabled) {
51
- --_skf-button-state-bg-color: var(--_skf-button-bg-color-active);
52
- }
53
- }
54
-
55
- .btn--icon-only {
56
- aspect-ratio: 1;
57
- place-content: center;
58
- }
59
-
60
- /**
63
+ /**
61
64
  * Size
62
65
  */
63
- .btn--size-sm {
64
- --_skf-button-block-size: var(--skf-size-32);
65
- --_skf-button-font-size: var(--skf-font-size-75);
66
- }
66
+ .btn--size-sm {
67
+ --_skf-button-block-size: var(--skf-size-32);
68
+ --_skf-button-font-size: var(--skf-font-size-75);
69
+ }
67
70
 
68
- .btn--size-md {
69
- --_skf-button-block-size: var(--skf-size-44);
70
- }
71
+ .btn--size-md {
72
+ --_skf-button-block-size: var(--skf-size-44);
73
+ }
71
74
 
72
- .btn--size-lg {
73
- --_skf-button-block-size: var(--skf-size-56);
74
- }
75
+ .btn--size-lg {
76
+ --_skf-button-block-size: var(--skf-size-56);
77
+ }
75
78
 
76
- /**
79
+ /**
77
80
  * Variants
78
81
  */
79
- .btn--variant-primary {
80
- --_skf-button-bg-color: var(--skf-interactive-bg-color-primary);
81
- --_skf-button-bg-color-disabled: var(--skf-interactive-bg-color-disabled);
82
- --_skf-button-bg-color-active: var(--skf-interactive-bg-color-primary-active);
83
- --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-primary-hover);
84
- --_skf-button-border-color: transparent;
85
- --_skf-button-color: var(--skf-text-color-inverse);
86
- --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
87
- }
82
+ .btn--variant-primary {
83
+ --_skf-button-bg-color: var(--skf-interactive-bg-color-primary);
84
+ --_skf-button-bg-color-disabled: var(--skf-interactive-bg-color-disabled);
85
+ --_skf-button-bg-color-active: var(--skf-interactive-bg-color-primary-active);
86
+ --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-primary-hover);
87
+ --_skf-button-border-color: transparent;
88
+ --_skf-button-color: var(--skf-text-color-inverse);
89
+ --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
90
+ }
88
91
 
89
- .btn--variant-secondary {
90
- --_skf-button-bg-color: var(--skf-interactive-bg-color-secondary);
91
- --_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
92
- --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
93
- --_skf-button-border-color: var(--skf-border-color-emphasized);
94
- --_skf-button-border-color-disabled: var(--skf-interactive-border-color-disabled);
95
- --_skf-button-color: var(--skf-text-color-emphasized);
96
- --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
97
- }
92
+ .btn--variant-secondary {
93
+ --_skf-button-bg-color: var(--skf-interactive-bg-color-secondary);
94
+ --_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
95
+ --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
96
+ --_skf-button-border-color: var(--skf-border-color-emphasized);
97
+ --_skf-button-border-color-disabled: var(--skf-interactive-border-color-disabled);
98
+ --_skf-button-color: var(--skf-text-color-emphasized);
99
+ --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
100
+ }
98
101
 
99
- .btn--variant-tertiary {
100
- --_skf-button-bg-color: transparent;
101
- --_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
102
- --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
103
- --_skf-button-border-color: transparent;
104
- --_skf-button-color: var(--skf-text-color-emphasized);
105
- --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
106
- }
102
+ .btn--variant-tertiary {
103
+ --_skf-button-bg-color: transparent;
104
+ --_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
105
+ --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
106
+ --_skf-button-border-color: transparent;
107
+ --_skf-button-color: var(--skf-text-color-emphasized);
108
+ --_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
109
+ }
107
110
 
108
- .btn--destructive:not(.btn--variant-secondary, .btn--variant-tertiary) {
109
- --_skf-button-bg-color: var(--skf-interactive-bg-color-destructive);
110
- --_skf-button-bg-color-active: var(--skf-interactive-bg-color-destructive-active);
111
- --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-destructive-hover);
112
- }
111
+ .btn--destructive:not(.btn--variant-secondary, .btn--variant-tertiary) {
112
+ --_skf-button-bg-color: var(--skf-interactive-bg-color-destructive);
113
+ --_skf-button-bg-color-active: var(--skf-interactive-bg-color-destructive-active);
114
+ --_skf-button-bg-color-hover: var(--skf-interactive-bg-color-destructive-hover);
115
+ }
113
116
 
114
- .btn__loader {
115
- inset: 50% auto auto 50%;
116
- opacity: 0;
117
- position: absolute;
118
- transform: translate(-50%, -50%);
119
- }
117
+ .btn__loader {
118
+ inset: 50% auto auto 50%;
119
+ opacity: 0;
120
+ position: absolute;
121
+ transform: translate(-50%, -50%);
122
+ }
120
123
 
121
- .btn__body {
122
- align-items: center;
123
- display: flex;
124
- gap: var(--skf-spacing-50);
125
- min-inline-size: 0;
126
- }
124
+ .btn__body {
125
+ align-items: center;
126
+ display: flex;
127
+ gap: var(--skf-spacing-50);
128
+ min-inline-size: 0;
129
+ }
127
130
 
128
- .btn__label {
129
- display: block;
130
- overflow: hidden;
131
- text-overflow: ellipsis;
132
- white-space: nowrap;
131
+ .btn__label {
132
+ display: block;
133
+ overflow: hidden;
134
+ text-overflow: ellipsis;
135
+ white-space: nowrap;
136
+ }
133
137
  }
134
- }
135
- `;
138
+ `
139
+ ];
136
140
  export {
137
- r as styles
141
+ s as styles
138
142
  };
package/dist/components/datepicker/datepicker-popup.component.js CHANGED
@@ -11,7 +11,7 @@ import { LocalizeController as M } from "../../utilities/localize.js";
11
11
  import { html as m } from "lit";
12
12
  import { property as o, state as u } from "lit/decorators.js";
13
13
  import "./datepicker-calendar.js";
14
- import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as D, doAnimate as C } from "./datepicker-popup.helpers.js";
14
+ import { getDateParts as f, assertISODate as O, earliestDate as V, latestDate as P, compareDates as D, doAnimate as T } from "./datepicker-popup.helpers.js";
15
15
  import { styles as L } from "./datepicker-popup.styles.js";
16
16
  import { dateFormatter as d, is as Y } from "./datepicker.helpers.js";
17
17
  var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, i, e, a) => {
@@ -94,12 +94,14 @@ const _ = class _ extends E {
94
94
  const e = Math.abs(
95
95
  this.selectedDateRange.end.getTime() - this.selectedDateRange.start.getTime()
96
96
  ), a = Math.ceil(e / (1e3 * 60 * 60 * 24)) + 1;
97
- this.emit("skf-datepicker-selected-date-range-changed", {
98
- detail: {
99
- ...this.selectedDateRange,
100
- days: a,
101
- id: this.id
102
- }
97
+ setTimeout(() => {
98
+ this.emit("skf-datepicker-selected-date-range-changed", {
99
+ detail: {
100
+ ...this.selectedDateRange,
101
+ days: a,
102
+ id: this.id
103
+ }
104
+ });
103
105
  });
104
106
  }
105
107
  _handleRangeChange() {
@@ -176,8 +178,8 @@ const _ = class _ extends E {
176
178
  return m``;
177
179
  if (this.selectableFrom && D(this.selectableFrom, d(/* @__PURE__ */ new Date())) === 1)
178
180
  return m``;
179
- const { month: a, year: t } = f(), { month: r, year: h } = f(this.date), c = this.selectedDate ?? this.selectedDateRange.start, p = a === r && t === h, T = c && D(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
180
- return (p && !c || T && p) && (e = !0), m`
181
+ const { month: a, year: t } = f(), { month: r, year: h } = f(this.date), c = this.selectedDate ?? this.selectedDateRange.start, p = a === r && t === h, C = c && D(d(/* @__PURE__ */ new Date()), d(c), "months") === 0;
182
+ return (p && !c || C && p) && (e = !0), m`
181
183
  <div class="today">
182
184
  <skf-button
183
185
  @click=${this._handleTodayClick}
@@ -207,11 +209,11 @@ const _ = class _ extends E {
207
209
  async _animateView(e, a) {
208
210
  if (!this.shadowRoot) return;
209
211
  const t = [...this.shadowRoot.querySelectorAll("skf-datepicker-calendar")];
210
- return t.length ? (await C(
212
+ return t.length ? (await T(
211
213
  t,
212
214
  [{ opacity: 0, transform: `translateX(calc(16px * ${e.toString()}))` }],
213
215
  { duration: 100, easing: "ease-in", fill: "backwards" }
214
- ), a(), await C(
216
+ ), a(), await T(
215
217
  t,
216
218
  [
217
219
  { opacity: 0, transform: `translateX(${(-16 * e).toString()}px)` },
package/dist/components/switch/switch.component.d.ts CHANGED
@@ -50,6 +50,8 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
50
50
  /** @internal */
51
51
  private _handleChange;
52
52
  /** @internal */
53
+ _handleCheckedChange(): void;
54
+ /** @internal */
53
55
  private _handleInvalid;
54
56
  /** @internal */
55
57
  private _resetValue;
package/dist/components/switch/switch.component.js CHANGED
@@ -1,27 +1,28 @@
1
- var p = (t) => {
1
+ var u = (t) => {
2
2
  throw TypeError(t);
3
3
  };
4
- var c = (t, i, e) => i.has(t) || p("Cannot " + e);
5
- var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, n) => (c(t, i, "write to private field"), n ? n.call(t, e) : i.set(t, e), e);
4
+ var c = (t, i, e) => i.has(t) || u("Cannot " + e);
5
+ var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? u("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, h) => (c(t, i, "write to private field"), h ? h.call(t, e) : i.set(t, e), e);
6
6
  import { FormBase as _ } from "../../internal/components/formBase.js";
7
- import { Asterisk as y } from "../../internal/templates/asterisk.js";
8
- import { componentStyles as b } from "../../styles/component.styles.js";
9
- import { LocalizeController as g } from "../../utilities/localize.js";
10
- import { nothing as k, html as $ } from "lit";
11
- import { property as l, state as C, query as V } from "lit/decorators.js";
12
- import { classMap as w } from "lit/directives/class-map.js";
13
- import { ifDefined as q } from "lit/directives/if-defined.js";
14
- import { styles as z } from "./switch.styles.js";
15
- var A = Object.defineProperty, a = (t, i, e, n) => {
16
- for (var h = void 0, d = t.length - 1, u; d >= 0; d--)
17
- (u = t[d]) && (h = u(i, e, h) || h);
18
- return h && A(i, e, h), h;
19
- }, r;
20
- const o = class o extends _ {
7
+ import { watch as y } from "../../internal/helpers/watch.js";
8
+ import { Asterisk as b } from "../../internal/templates/asterisk.js";
9
+ import { componentStyles as g } from "../../styles/component.styles.js";
10
+ import { LocalizeController as k } from "../../utilities/localize.js";
11
+ import { nothing as $, html as C } from "lit";
12
+ import { property as l, state as w, query as V } from "lit/decorators.js";
13
+ import { classMap as q } from "lit/directives/class-map.js";
14
+ import { ifDefined as I } from "lit/directives/if-defined.js";
15
+ import { styles as O } from "./switch.styles.js";
16
+ var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (t, i, e, h) => {
17
+ for (var r = h > 1 ? void 0 : h ? z(i, e) : i, d = t.length - 1, o; d >= 0; d--)
18
+ (o = t[d]) && (r = (h ? o(i, e, r) : o(r)) || r);
19
+ return h && r && P(i, e, r), r;
20
+ }, n;
21
+ const p = class p extends _ {
21
22
  constructor() {
22
23
  super(...arguments);
23
- f(this, r);
24
- m(this, r, new g(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
24
+ f(this, n);
25
+ m(this, n, new k(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
25
26
  e.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emit("change");
26
27
  }, this._handleInvalid = (e) => {
27
28
  this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
@@ -56,10 +57,13 @@ const o = class o extends _ {
56
57
  } else
57
58
  this.setValidity({});
58
59
  }
60
+ _handleCheckedChange() {
61
+ this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = this.checked);
62
+ }
59
63
  render() {
60
- return $`
64
+ return C`
61
65
  <label
62
- class=${w({
66
+ class=${q({
63
67
  switch: !0,
64
68
  "switch--small": this.size === "sm"
65
69
  })}
@@ -73,50 +77,53 @@ const o = class o extends _ {
73
77
  @reset=${this._resetValue}
74
78
  aria-invalid=${!!this._invalid}
75
79
  class="switch__input"
76
- name=${q(this.name)}
80
+ name=${I(this.name)}
77
81
  type="checkbox"
78
82
  value=${this.value}
79
83
  />
80
- <div class="switch__label ${this.hideLabel ? "visually-hidden" : k}">
84
+ <div class="switch__label ${this.hideLabel ? "visually-hidden" : $}">
81
85
  <slot>${this.label}</slot>
82
- ${this.required ? y(v(this, r).term("required"), "switch__asterisk") : null}
86
+ ${this.required ? b(v(this, n).term("required"), "switch__asterisk") : null}
83
87
  </div>
84
88
  </label>
85
89
  `;
86
90
  }
87
91
  };
88
- r = new WeakMap(), o.styles = [b, z];
89
- let s = o;
92
+ n = new WeakMap(), p.styles = [g, O];
93
+ let s = p;
90
94
  a([
91
95
  l({ type: Boolean })
92
- ], s.prototype, "debug");
96
+ ], s.prototype, "debug", 2);
93
97
  a([
94
98
  l({ type: Boolean, reflect: !0 })
95
- ], s.prototype, "checked");
99
+ ], s.prototype, "checked", 2);
96
100
  a([
97
101
  l({ type: Boolean, attribute: "hide-label", reflect: !0 })
98
- ], s.prototype, "hideLabel");
102
+ ], s.prototype, "hideLabel", 2);
99
103
  a([
100
104
  l()
101
- ], s.prototype, "label");
105
+ ], s.prototype, "label", 2);
102
106
  a([
103
107
  l({ type: String })
104
- ], s.prototype, "lang");
108
+ ], s.prototype, "lang", 2);
105
109
  a([
106
110
  l()
107
- ], s.prototype, "name");
111
+ ], s.prototype, "name", 2);
108
112
  a([
109
113
  l({ reflect: !0 })
110
- ], s.prototype, "size");
114
+ ], s.prototype, "size", 2);
111
115
  a([
112
116
  l()
113
- ], s.prototype, "value");
117
+ ], s.prototype, "value", 2);
114
118
  a([
115
- C()
116
- ], s.prototype, "_invalid");
119
+ w()
120
+ ], s.prototype, "_invalid", 2);
117
121
  a([
118
122
  V("input")
119
- ], s.prototype, "$input");
123
+ ], s.prototype, "$input", 2);
124
+ a([
125
+ y("checked")
126
+ ], s.prototype, "_handleCheckedChange", 1);
120
127
  export {
121
128
  s as SkfSwitch
122
129
  };
package/dist/internal/base-classes/popover/popover.base.js CHANGED
@@ -21,7 +21,10 @@ const s = (l = class extends C {
21
21
  const r = t.newState === "open";
22
22
  this.isOpen = r, this.emit(r ? "skf-opened" : "skf-closed");
23
23
  }, this.handleToggleOpen = async () => {
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)));
24
+ this.$anchor && this.$popover.isConnected && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], {
25
+ duration: 250,
26
+ fill: "forwards"
27
+ })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
25
28
  }, this.handleAnchorChange = async () => {
26
29
  if (!this.anchor) return;
27
30
  await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
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.0-alpha.41",
38
+ "version": "1.0.0-alpha.42",
39
39
  "dependencies": {
40
40
  "@floating-ui/dom": "^1.7.4",
41
41
  "@js-temporal/polyfill": "^0.5.1",