@skf-design-system/ui-components 1.0.2-beta.30 → 1.0.2-beta.32

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-calendar.component.js +47 -50
  6. package/dist/components/select/select-option.component.js +1 -1
  7. package/dist/components/switch/switch.component.d.ts +2 -0
  8. package/dist/components/switch/switch.component.js +44 -37
  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-calendar.component.js CHANGED
@@ -1,29 +1,29 @@
1
- var _ = (s) => {
1
+ var w = (s) => {
2
2
  throw TypeError(s);
3
3
  };
4
- var w = (s, r, t) => r.has(s) || _("Cannot " + t);
5
- var f = (s, r, t) => (w(s, r, "read from private field"), t ? t.call(s) : r.get(s)), S = (s, r, t) => r.has(s) ? _("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, t), $ = (s, r, t, e) => (w(s, r, "write to private field"), e ? e.call(s, t) : r.set(s, t), t);
6
- import { SkfElement as L } from "../../internal/components/skf-element.js";
7
- import { watch as O } from "../../internal/helpers/watch.js";
4
+ var S = (s, r, t) => r.has(s) || w("Cannot " + t);
5
+ var f = (s, r, t) => (S(s, r, "read from private field"), t ? t.call(s) : r.get(s)), $ = (s, r, t) => r.has(s) ? w("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, t), E = (s, r, t, e) => (S(s, r, "write to private field"), e ? e.call(s, t) : r.set(s, t), t);
6
+ import { SkfElement as O } from "../../internal/components/skf-element.js";
7
+ import { watch as C } from "../../internal/helpers/watch.js";
8
8
  import { Temporal as h } from "@js-temporal/polyfill";
9
9
  import { componentStyles as x } from "../../styles/component.styles.js";
10
10
  import { LocalizeController as R } from "../../utilities/localize.js";
11
- import { html as g } from "lit";
12
- import { property as c, state as M } from "lit/decorators.js";
11
+ import { isServer as b, html as g } from "lit";
12
+ import { property as c, state as L } from "lit/decorators.js";
13
13
  import { repeat as y } from "lit/directives/repeat.js";
14
- import { styles as C } from "./datepicker-calendar.styles.js";
15
- import { compareDates as E } from "./datepicker-popup.helpers.js";
14
+ import { styles as F } from "./datepicker-calendar.styles.js";
15
+ import { compareDates as M } from "./datepicker-popup.helpers.js";
16
16
  import { dateFormatter as D } from "./datepicker.helpers.js";
17
- var F = Object.defineProperty, A = Object.getOwnPropertyDescriptor, l = (s, r, t, e) => {
18
- for (var a = e > 1 ? void 0 : e ? A(r, t) : r, n = s.length - 1, i; n >= 0; n--)
17
+ var A = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (s, r, t, e) => {
18
+ for (var a = e > 1 ? void 0 : e ? k(r, t) : r, n = s.length - 1, i; n >= 0; n--)
19
19
  (i = s[n]) && (a = (e ? i(r, t, a) : i(a)) || a);
20
- return e && a && F(r, t, a), a;
20
+ return e && a && A(r, t, a), a;
21
21
  }, u;
22
- const b = class b extends L {
22
+ const v = class v extends O {
23
23
  constructor() {
24
24
  super(...arguments);
25
- S(this, u);
26
- $(this, u, new R(this)), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
25
+ $(this, u);
26
+ E(this, u, new R(this)), this._secondCalendarOffset = 0, this.date = /* @__PURE__ */ new Date(), this.firstDayOfWeek = 0, this.locale = "en-CA", this.range = !1, this.selectedDate = void 0, this.selectedDateRange = {
27
27
  start: null,
28
28
  end: null
29
29
  }, this._numberOfDays = 0, this._numberOfDaysLastMonth = 0, this._listenToKeyboard = () => ({
@@ -36,20 +36,20 @@ const b = class b extends L {
36
36
  }), this._handleKeyDown = (t) => {
37
37
  const { key: e } = t;
38
38
  if ((e === "ArrowRight" || e === "ArrowLeft" || e === "ArrowDown" || e === "ArrowUp") && t.preventDefault(), e === "ArrowRight" && this.shadowRoot?.activeElement?.parentElement?.nextElementSibling?.firstElementChild?.focus(), e === "ArrowLeft" && this.shadowRoot?.activeElement?.parentElement?.previousElementSibling?.firstElementChild?.focus(), e === "ArrowDown") {
39
- const d = this.shadowRoot?.activeElement?.parentElement, m = a(d);
40
- d?.parentElement?.children[m + 7]?.firstElementChild?.focus();
39
+ const l = this.shadowRoot?.activeElement?.parentElement, m = a(l);
40
+ l?.parentElement?.children[m + 7]?.firstElementChild?.focus();
41
41
  }
42
42
  if (e === "ArrowUp") {
43
- const d = this.shadowRoot?.activeElement?.parentElement;
44
- if (!d) return;
45
- const m = Array.from(d.parentElement?.children ?? []).indexOf(d);
46
- d.parentElement?.children[m - 7]?.firstElementChild?.focus();
43
+ const l = this.shadowRoot?.activeElement?.parentElement;
44
+ if (!l) return;
45
+ const m = Array.from(l.parentElement?.children ?? []).indexOf(l);
46
+ l.parentElement?.children[m - 7]?.firstElementChild?.focus();
47
47
  }
48
48
  function a(n) {
49
49
  return n ? Array.from(n.parentElement?.children ?? []).indexOf(n) : 0;
50
50
  }
51
51
  }, this.dateSelectable = (t) => {
52
- const e = this.invalidDates?.split(",").includes(t), a = !this.selectableTo || E(t, this.selectableTo) < 0, n = !this.selectableFrom || E(t, this.selectableFrom) > 0;
52
+ const e = this.invalidDates?.split(",").some((l) => l.trim() === t), a = !this.selectableTo || M(t, this.selectableTo) <= 0, n = !this.selectableFrom || M(t, this.selectableFrom) >= 0;
53
53
  return { matchesInvalidDates: e, dateWithinRange: !(a && n) };
54
54
  };
55
55
  }
@@ -74,7 +74,7 @@ const b = class b extends L {
74
74
  e = 0, t++;
75
75
  break;
76
76
  }
77
- if (n)
77
+ if (n && !b)
78
78
  try {
79
79
  return h.PlainDate.from({
80
80
  year: t,
@@ -171,10 +171,10 @@ const b = class b extends L {
171
171
  this._plainDate(this.selectedDateRange.start) ?? void 0,
172
172
  this._plainDate(this.selectedDateRange.end) ?? void 0
173
173
  ) && e.push("in-range"), this.range && this.selectedDateRange.start && (this.selectedDateRange.start.getFullYear() === this.date.getFullYear() && this.selectedDateRange.start.getMonth() === this.date.getMonth() && this.selectedDateRange.start.getDate() === a && e.push("selected selected-start"), this.selectedDateRange.end?.getFullYear() === this.date.getFullYear() && this.selectedDateRange.end.getMonth() === this.date.getMonth() && this.selectedDateRange.end.getDate() === a && e.push("selected selected-end"));
174
- const { matchesInvalidDates: d, dateWithinRange: m } = this.dateSelectable(
174
+ const { matchesInvalidDates: l, dateWithinRange: m } = this.dateSelectable(
175
175
  this._createDate({ day: t }, !0).toString()
176
176
  );
177
- (d || m) && e.push("invalid");
177
+ (l || m) && e.push("invalid");
178
178
  const p = this.selectedDate?.getDate() === a;
179
179
  return !this.range && p && n && i && (console.log("is single date selected", this.selectedDate), e.push("selected")), this._createDate({ day: t }, !0).equals(String(this._plainDate(/* @__PURE__ */ new Date()))) && e.push("today"), e.join(" ");
180
180
  }
@@ -291,10 +291,9 @@ const b = class b extends L {
291
291
  }
292
292
  /** @internal */
293
293
  getCalendarHead() {
294
+ const t = !b && this.classList.contains("start"), e = !b && this.classList.contains("end");
294
295
  return g` <div class="calendar-head">
295
- <div
296
- class="calendar-head-controls${this.range && this.classList.contains("end") ? " hide" : ""}"
297
- >
296
+ <div class="calendar-head-controls${this.range && e ? " hide" : ""}">
298
297
  <button
299
298
  title=${f(this, u).term("previousYear")}
300
299
  @click="${() => {
@@ -318,11 +317,9 @@ const b = class b extends L {
318
317
  </div>
319
318
  <h4>
320
319
  ${this.date.toLocaleString(this.lang, { month: "short" })}
321
- ${this.range && this.classList.contains("start") ? g` -&nbsp;` : this.date.getFullYear()}
320
+ ${this.range && t ? g` -&nbsp;` : this.date.getFullYear()}
322
321
  </h4>
323
- <div
324
- class="calendar-head-controls${this.range && this.classList.contains("start") ? " hide" : ""}"
325
- >
322
+ <div class="calendar-head-controls${this.range && t ? " hide" : ""}">
326
323
  <button
327
324
  title=${f(this, u).term("nextMonth")}
328
325
  @click="${() => {
@@ -347,9 +344,9 @@ const b = class b extends L {
347
344
  </div>`;
348
345
  }
349
346
  };
350
- u = new WeakMap(), b.styles = [x, C];
351
- let o = b;
352
- l([
347
+ u = new WeakMap(), v.styles = [x, F];
348
+ let o = v;
349
+ d([
353
350
  c({
354
351
  converter: {
355
352
  fromAttribute(s) {
@@ -361,45 +358,45 @@ l([
361
358
  }
362
359
  })
363
360
  ], o.prototype, "date", 2);
364
- l([
361
+ d([
365
362
  c()
366
363
  ], o.prototype, "eventid", 2);
367
- l([
364
+ d([
368
365
  c({ type: Number })
369
366
  ], o.prototype, "firstDayOfWeek", 2);
370
- l([
367
+ d([
371
368
  c({ reflect: !0, attribute: "invalid-dates" })
372
369
  ], o.prototype, "invalidDates", 2);
373
- l([
370
+ d([
374
371
  c({ reflect: !0 })
375
372
  ], o.prototype, "locale", 2);
376
- l([
373
+ d([
377
374
  c({ type: Boolean })
378
375
  ], o.prototype, "range", 2);
379
- l([
376
+ d([
380
377
  c({ attribute: "selectable-from" })
381
378
  ], o.prototype, "selectableFrom", 2);
382
- l([
379
+ d([
383
380
  c({ attribute: "selectable-to" })
384
381
  ], o.prototype, "selectableTo", 2);
385
- l([
382
+ d([
386
383
  c({
387
384
  attribute: "selected-date",
388
385
  converter: { fromAttribute: (s) => new Date(s) },
389
386
  reflect: !0
390
387
  })
391
388
  ], o.prototype, "selectedDate", 2);
392
- l([
389
+ d([
393
390
  c({ type: Object })
394
391
  ], o.prototype, "selectedDateRange", 2);
395
- l([
396
- M()
392
+ d([
393
+ L()
397
394
  ], o.prototype, "_numberOfDays", 2);
398
- l([
399
- M()
395
+ d([
396
+ L()
400
397
  ], o.prototype, "_numberOfDaysLastMonth", 2);
401
- l([
402
- O("date")
398
+ d([
399
+ C("date")
403
400
  ], o.prototype, "handleDateChange", 1);
404
401
  export {
405
402
  o as SkfDatepickerCalendar
package/dist/components/select/select-option.component.js CHANGED
@@ -30,7 +30,7 @@ const c = class c extends C {
30
30
  this.textContent = t.trim();
31
31
  }
32
32
  get text() {
33
- return this.textContent.trim();
33
+ return this.textContent?.trim() ?? "";
34
34
  }
35
35
  set value(t) {
36
36
  this._value = t.trim();
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/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.30",
38
+ "version": "1.0.2-beta.32",
39
39
  "dependencies": {
40
40
  "@floating-ui/dom": "^1.7.4",
41
41
  "@js-temporal/polyfill": "^0.5.1",