@skf-design-system/ui-components 1.0.2-beta.6 → 1.0.2-beta.9

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 (90) hide show
  1. package/README.md +18 -0
  2. package/dist/components/alert/alert.component.d.ts +3 -2
  3. package/dist/components/alert/alert.component.js +39 -33
  4. package/dist/components/button/button.styles.js +3 -3
  5. package/dist/components/checkbox/checkbox.component.d.ts +6 -5
  6. package/dist/components/checkbox/checkbox.component.js +77 -76
  7. package/dist/components/checkbox/checkbox.styles.js +1 -1
  8. package/dist/components/datepicker/datepicker-calendar.component.d.ts +4 -0
  9. package/dist/components/datepicker/datepicker-calendar.component.js +134 -127
  10. package/dist/components/datepicker/datepicker-popup.component.d.ts +4 -0
  11. package/dist/components/datepicker/datepicker-popup.component.js +100 -88
  12. package/dist/components/datepicker/datepicker.component.d.ts +4 -2
  13. package/dist/components/datepicker/datepicker.component.js +150 -140
  14. package/dist/components/dialog/dialog.component.d.ts +3 -2
  15. package/dist/components/dialog/dialog.component.js +39 -37
  16. package/dist/components/divider/divider.component.js +13 -13
  17. package/dist/components/divider/divider.styles.js +2 -2
  18. package/dist/components/drawer/drawer.component.d.ts +3 -2
  19. package/dist/components/drawer/drawer.component.js +37 -35
  20. package/dist/components/drawer/drawer.styles.js +1 -1
  21. package/dist/components/header/header.component.d.ts +4 -2
  22. package/dist/components/header/header.component.js +66 -57
  23. package/dist/components/header/header.styles.js +2 -2
  24. package/dist/components/icon/icon.component.js +26 -16
  25. package/dist/components/icon/icon.styles.js +4 -4
  26. package/dist/components/input/input.component.d.ts +4 -8
  27. package/dist/components/input/input.component.js +146 -147
  28. package/dist/components/input/input.controllers.d.ts +0 -1
  29. package/dist/components/input/input.controllers.js +12 -12
  30. package/dist/components/link/link.component.js +19 -12
  31. package/dist/components/link/link.styles.js +11 -3
  32. package/dist/components/loader/loader.component.d.ts +0 -2
  33. package/dist/components/loader/loader.component.js +27 -30
  34. package/dist/components/loader/loader.styles.js +1 -1
  35. package/dist/components/menu/menu-item.styles.js +8 -7
  36. package/dist/components/menu/menu.component.d.ts +4 -1
  37. package/dist/components/nav/nav.component.d.ts +3 -0
  38. package/dist/components/nav/nav.component.js +38 -33
  39. package/dist/components/popover/popover.component.d.ts +6 -3
  40. package/dist/components/progress/progress.styles.js +3 -3
  41. package/dist/components/radio/radio.component.d.ts +4 -2
  42. package/dist/components/radio/radio.component.js +91 -83
  43. package/dist/components/radio/radio.styles.js +1 -1
  44. package/dist/components/segmented-button/segmented-button-item.component.js +1 -1
  45. package/dist/components/segmented-button/segmented-button-item.styles.js +1 -1
  46. package/dist/components/select/select-option.component.d.ts +2 -2
  47. package/dist/components/select/select-option.component.js +16 -19
  48. package/dist/components/select/select.component.d.ts +13 -9
  49. package/dist/components/select/select.component.js +169 -144
  50. package/dist/components/stepper/stepper-item.styles.js +4 -4
  51. package/dist/components/switch/switch.component.d.ts +4 -2
  52. package/dist/components/switch/switch.component.js +64 -56
  53. package/dist/components/switch/switch.styles.js +1 -1
  54. package/dist/components/tabs/tab.styles.js +2 -2
  55. package/dist/components/tag/tag.component.d.ts +3 -0
  56. package/dist/components/tag/tag.component.js +50 -41
  57. package/dist/components/textarea/textarea.component.d.ts +4 -2
  58. package/dist/components/textarea/textarea.component.js +126 -118
  59. package/dist/components/tooltip/tooltip.component.d.ts +8 -2
  60. package/dist/components/tooltip/tooltip.component.js +3 -0
  61. package/dist/custom-elements.json +734 -372
  62. package/dist/internal/base-classes/popover/popover.base.d.ts +21 -2
  63. package/dist/internal/base-classes/popover/popover.base.js +10 -12
  64. package/dist/internal/components/formBase.d.ts +1 -0
  65. package/dist/internal/components/formBase.js +11 -19
  66. package/dist/internal/controllers/popover.controller.d.ts +2 -0
  67. package/dist/internal/helpers/uuid.d.ts +8 -10
  68. package/dist/internal/helpers/uuid.js +4 -11
  69. package/dist/internal/helpers/watch.d.ts +1 -1
  70. package/dist/internal/templates/asterisk.d.ts +1 -1
  71. package/dist/internal/templates/asterisk.js +4 -4
  72. package/dist/styles/global-alt.css +1 -1
  73. package/dist/styles/global.css +1 -1
  74. package/dist/translations/en.d.ts +3 -0
  75. package/dist/translations/en.js +27 -0
  76. package/dist/translations/es.d.ts +3 -0
  77. package/dist/translations/es.js +27 -0
  78. package/dist/translations/index.d.ts +4 -0
  79. package/dist/translations/pt.d.ts +3 -0
  80. package/dist/translations/pt.js +27 -0
  81. package/dist/translations/sv.d.ts +3 -0
  82. package/dist/translations/sv.js +27 -0
  83. package/dist/types/jsx/custom-element-jsx.d.ts +1823 -846
  84. package/dist/types/vue/index.d.ts +59 -47
  85. package/dist/utilities/localize.d.ts +28 -0
  86. package/dist/utilities/localize.js +13 -0
  87. package/dist/vscode.html-custom-data.json +75 -80
  88. package/dist/web-types.json +205 -169
  89. package/package.json +27 -34
  90. package/custom-elements.json +0 -25490
@@ -60,7 +60,7 @@ const o = [
60
60
  }
61
61
 
62
62
  &:checked {
63
- --_skf-switch-bg-color: var(--skf-bg-color-emphasised);
63
+ --_skf-switch-bg-color: var(--skf-bg-color-emphasized);
64
64
 
65
65
  &::after {
66
66
  transform: translateX(calc(var(--_skf-switch-width) - var(--_skf-switch-height)));
@@ -86,7 +86,7 @@ const e = o`
86
86
  }
87
87
 
88
88
  &:hover {
89
- --_skf-tab-bg-color: var(--skf-color-blue-lighest);
89
+ --_skf-tab-bg-color: var(--skf-color-blue-lightest);
90
90
  }
91
91
 
92
92
  :host(:focus-visible) & {
@@ -97,7 +97,7 @@ const e = o`
97
97
  .tab--expanded.tab--selected {
98
98
  --_skf-tab-bg-color: var(--skf-bg-color-neutral-1);
99
99
  --_skf-tab-border-bottom-color: transparent;
100
- --_skf-tab-color: var(--skf-text-color-emphasised);
100
+ --_skf-tab-color: var(--skf-text-color-emphasized);
101
101
 
102
102
  font-weight: var(--skf-font-weight-bold);
103
103
 
@@ -1,6 +1,7 @@
1
1
  import '../icon/icon.js';
2
2
  import { SkfElement } from '../../internal/components/skf-element';
3
3
  import type { Icon, Severity } from '../../internal/types.js';
4
+ import { type Language } from '../../utilities/localize.js';
4
5
  import { type CSSResultGroup } from 'lit';
5
6
  type Size = 'sm' | 'md';
6
7
  /**
@@ -25,6 +26,8 @@ export declare class SkfTag extends SkfElement {
25
26
  icon?: Icon;
26
27
  /** If defined, gives the supplied appearance */
27
28
  color?: Severity;
29
+ /** Sets the internal language of the component */
30
+ lang: Language;
28
31
  /** If defined, accepts a function that runs on click */
29
32
  set onClick(onClickFn: ((event: Event) => void) | undefined);
30
33
  get onClick(): ((event: Event) => void) | undefined;
@@ -1,39 +1,41 @@
1
- var y = (e) => {
1
+ var k = (e) => {
2
2
  throw TypeError(e);
3
3
  };
4
- var k = (e, o, t) => o.has(e) || y("Cannot " + t);
5
- var m = (e, o, t) => (k(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), v = (e, o, t, i) => (k(e, o, "write to private field"), i ? i.call(e, t) : o.set(e, t), t);
4
+ var C = (e, o, t) => o.has(e) || k("Cannot " + t);
5
+ var m = (e, o, t) => (C(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), f = (e, o, t, s) => (C(e, o, "write to private field"), s ? s.call(e, t) : o.set(e, t), t);
6
6
  import "../icon/icon.js";
7
- import { SkfElement as _ } from "../../internal/components/skf-element.js";
8
- import { stateMap as g } from "../../internal/helpers/stateMap.js";
9
- import { watch as w } from "../../internal/helpers/watch.js";
10
- import { componentStyles as $ } from "../../styles/component.styles.js";
11
- import { nothing as C, html as f } from "lit";
12
- import { property as c, query as R } from "lit/decorators.js";
13
- import { ifDefined as D } from "lit/directives/if-defined.js";
14
- import { styles as E } from "./tag.styles.js";
15
- var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, t, i) => {
16
- for (var s = i > 1 ? void 0 : i ? z(o, t) : o, l = e.length - 1, p; l >= 0; l--)
17
- (p = e[l]) && (s = (i ? p(o, t, s) : p(s)) || s);
18
- return i && s && P(o, t, s), s;
7
+ import { SkfElement as g } from "../../internal/components/skf-element.js";
8
+ import { stateMap as w } from "../../internal/helpers/stateMap.js";
9
+ import { watch as $ } from "../../internal/helpers/watch.js";
10
+ import { componentStyles as R } from "../../styles/component.styles.js";
11
+ import { LocalizeController as z } from "../../utilities/localize.js";
12
+ import { nothing as b, html as u } from "lit";
13
+ import { property as l, query as D } from "lit/decorators.js";
14
+ import { ifDefined as E } from "lit/directives/if-defined.js";
15
+ import { styles as P } from "./tag.styles.js";
16
+ var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, s) => {
17
+ for (var i = s > 1 ? void 0 : s ? B(o, t) : o, a = e.length - 1, v; a >= 0; a--)
18
+ (v = e[a]) && (i = (s ? v(o, t, i) : v(i)) || i);
19
+ return s && i && S(o, t, i), i;
19
20
  };
20
- const b = {
21
+ const _ = {
21
22
  size: ["sm", "md"],
22
23
  color: ["error", "info", "success", "warning"]
23
24
  };
24
- var a, h;
25
- const u = class u extends _ {
25
+ var c, h, p;
26
+ const y = class y extends g {
26
27
  constructor() {
27
28
  super(...arguments);
28
- d(this, a);
29
+ d(this, c);
29
30
  d(this, h);
30
- v(this, a, this.attachInternals()), v(this, h, m(this, a).states), this.size = "md", this.removable = !1, this._handleKeyDown = (t) => {
31
+ d(this, p);
32
+ f(this, c, new z(this)), f(this, h, this.attachInternals()), f(this, p, m(this, h).states), this.size = "md", this.lang = "en", this.removable = !1, this._handleKeyDown = (t) => {
31
33
  (t.key === "Enter" || t.key === " ") && this.$removeButton.click();
32
34
  }, this._handleRemove = (t) => {
33
35
  this._onRemove && this._onRemove(t);
34
36
  }, this._handleClick = (t) => {
35
- var l;
36
- t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (l = this.onClick) == null || l.call(this, t);
37
+ var a;
38
+ t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (a = this.onClick) == null || a.call(this, t);
37
39
  };
38
40
  }
39
41
  set onClick(t) {
@@ -54,51 +56,58 @@ const u = class u extends _ {
54
56
  disconnectedCallback() {
55
57
  super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
56
58
  }
57
- attributeChangedCallback(t, i, s) {
58
- super.attributeChangedCallback(t, i, s), t === "removable" && s !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
59
+ attributeChangedCallback(t, s, i) {
60
+ super.attributeChangedCallback(t, s, i), t === "removable" && i !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
59
61
  }
60
- _handleStateChange(t, i, s) {
61
- g(m(this, h), b[t]).set(s);
62
+ _handleStateChange(t, s, i) {
63
+ w(m(this, p), _[t]).set(i);
62
64
  }
63
65
  render() {
64
- return f`
66
+ return u`
65
67
  <div id="root">
66
- ${this.icon ? f`<skf-icon color=${D(this.color)} name=${this.icon} size="sm"></skf-icon>` : C}
68
+ ${this.icon ? u`<skf-icon color=${E(this.color)} name=${this.icon} size="sm"></skf-icon>` : b}
67
69
  <slot></slot>
68
- ${this.removable ? f`
69
- <button @click=${this._handleRemove} type="button">
70
+ ${this.removable ? u`
71
+ <button
72
+ @click=${this._handleRemove}
73
+ aria-label=${m(this, c).term("close")}
74
+ type="button"
75
+ >
70
76
  <skf-icon name="close" size="xs"></skf-icon>
71
77
  </button>
72
- ` : C}
78
+ ` : b}
73
79
  </div>
74
80
  `;
75
81
  }
76
82
  };
77
- a = new WeakMap(), h = new WeakMap(), u.styles = [$, E];
78
- let n = u;
83
+ c = new WeakMap(), h = new WeakMap(), p = new WeakMap(), y.styles = [R, P];
84
+ let n = y;
79
85
  r([
80
- c({ type: String })
86
+ l({ type: String })
81
87
  ], n.prototype, "size", 2);
82
88
  r([
83
- c({ type: String })
89
+ l({ type: String })
84
90
  ], n.prototype, "icon", 2);
85
91
  r([
86
- c({ type: String })
92
+ l({ type: String })
87
93
  ], n.prototype, "color", 2);
88
94
  r([
89
- c({ attribute: !1 })
95
+ l({ type: String })
96
+ ], n.prototype, "lang", 2);
97
+ r([
98
+ l({ attribute: !1 })
90
99
  ], n.prototype, "onClick", 1);
91
100
  r([
92
- c({ attribute: !1 })
101
+ l({ attribute: !1 })
93
102
  ], n.prototype, "onRemove", 1);
94
103
  r([
95
- c({ type: Boolean })
104
+ l({ type: Boolean })
96
105
  ], n.prototype, "removable", 2);
97
106
  r([
98
- R("button")
107
+ D("button")
99
108
  ], n.prototype, "$removeButton", 2);
100
109
  r([
101
- w(Object.keys(b))
110
+ $(Object.keys(_))
102
111
  ], n.prototype, "_handleStateChange", 1);
103
112
  export {
104
113
  n as SkfTag
@@ -3,6 +3,7 @@ import { FormBase } from '../../internal/components/formBase.js';
3
3
  import '../../internal/components/hint/hint.js';
4
4
  import type { FormFieldSeverity } from '../../internal/types.js';
5
5
  import type { FormFieldBaseProps } from '../../internal/types/formField.js';
6
+ import { type Language } from '../../utilities/localize.js';
6
7
  import { type CSSResultGroup } from 'lit';
7
8
  interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
8
9
  cols?: number;
@@ -26,6 +27,7 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
26
27
  * @tagname skf-textarea
27
28
  */
28
29
  export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
30
+ #private;
29
31
  static styles: CSSResultGroup;
30
32
  /** @internal */
31
33
  private customError;
@@ -42,6 +44,8 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
42
44
  hint?: string;
43
45
  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
44
46
  label?: string;
47
+ /** Sets the internal language of the component */
48
+ lang: Language;
45
49
  /** If defined, adds name to the input-element */
46
50
  name?: string;
47
51
  /** If defined, sets the maximum character length to accept for this input */
@@ -52,8 +56,6 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
52
56
  placeholder?: string;
53
57
  /** If true, makes the element not mutable, meaning the user can not edit the control */
54
58
  readonly: boolean;
55
- /** If defined, renders an alternative A11y text for the asterisk */
56
- requiredLabel?: string;
57
59
  /** If defined, sets the rows of the textarea */
58
60
  rows?: number;
59
61
  /** If defined, displays provided severity state */
@@ -1,29 +1,37 @@
1
+ var m = (r) => {
2
+ throw TypeError(r);
3
+ };
4
+ var c = (r, a, t) => a.has(r) || m("Cannot " + t);
5
+ var y = (r, a, t) => (c(r, a, "read from private field"), t ? t.call(r) : a.get(r)), f = (r, a, t) => a.has(r) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), b = (r, a, t, i) => (c(r, a, "write to private field"), i ? i.call(r, t) : a.set(r, t), t);
1
6
  import "../icon/icon.js";
2
- import { FormBase as m } from "../../internal/components/formBase.js";
7
+ import { FormBase as $ } from "../../internal/components/formBase.js";
3
8
  import "../../internal/components/hint/hint.js";
4
- import { hintSeverity as c } from "../../internal/helpers/hintSeverity.js";
5
- import { Asterisk as y } from "../../internal/templates/asterisk.js";
6
- import { componentStyles as b } from "../../styles/component.styles.js";
7
- import { nothing as u, html as v } from "lit";
8
- import { property as r, state as f, query as g } from "lit/decorators.js";
9
- import { ifDefined as o } from "lit/directives/if-defined.js";
10
- import $ from "./textarea.styles.js";
11
- var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (p, i, s, a) => {
12
- for (var l = a > 1 ? void 0 : a ? _(i, s) : i, n = p.length - 1, h; n >= 0; n--)
13
- (h = p[n]) && (l = (a ? h(i, s, l) : h(l)) || l);
14
- return a && l && E(i, s, l), l;
15
- };
16
- const d = class d extends m {
9
+ import { hintSeverity as E } from "../../internal/helpers/hintSeverity.js";
10
+ import { Asterisk as _ } from "../../internal/templates/asterisk.js";
11
+ import { componentStyles as V } from "../../styles/component.styles.js";
12
+ import { LocalizeController as w } from "../../utilities/localize.js";
13
+ import { nothing as u, html as g } from "lit";
14
+ import { property as o, state as x, query as I } from "lit/decorators.js";
15
+ import { ifDefined as h } from "lit/directives/if-defined.js";
16
+ import L from "./textarea.styles.js";
17
+ var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, s = (r, a, t, i) => {
18
+ for (var l = i > 1 ? void 0 : i ? O(a, t) : a, n = r.length - 1, d; n >= 0; n--)
19
+ (d = r[n]) && (l = (i ? d(a, t, l) : d(l)) || l);
20
+ return i && l && A(a, t, l), l;
21
+ }, p;
22
+ const v = class v extends $ {
17
23
  constructor() {
18
- super(...arguments), this.debug = !1, this.hideLabel = !1, this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (i) => {
19
- var s;
20
- i.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
24
+ super(...arguments);
25
+ f(this, p);
26
+ b(this, p, new w(this)), this.debug = !1, this.hideLabel = !1, this.lang = "en", this.readonly = !1, this.showValid = !1, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (t) => {
27
+ var i;
28
+ t.stopPropagation(), this.value = ((i = this.getAttribute("value")) == null ? void 0 : i.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
21
29
  }, this._handleInput = () => {
22
30
  this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
23
31
  };
24
32
  }
25
- set customInvalid(i) {
26
- this.customError = i ?? "";
33
+ set customInvalid(t) {
34
+ this.customError = t ?? "";
27
35
  }
28
36
  get customInvalid() {
29
37
  return this.customError;
@@ -31,58 +39,58 @@ const d = class d extends m {
31
39
  firstUpdated() {
32
40
  this.$input.addEventListener("change", () => {
33
41
  this.validateOn === "change" && (this.validateOn = "input", this.pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
34
- }), this.addEventListener("invalid", (i) => {
35
- this.pristine = !1, this.invalid = !0, this.customErrorDisplay && i.preventDefault();
42
+ }), this.addEventListener("invalid", (t) => {
43
+ this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
36
44
  }), this.addEventListener("reset", this._resetValue), this.validateInput();
37
45
  }
38
- willUpdate(i) {
39
- if (i.has("invalid"))
46
+ willUpdate(t) {
47
+ if (t.has("invalid"))
40
48
  if (this.invalid) {
41
49
  this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
42
- const s = this._internals.validationMessage;
43
- this.hint = s !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
50
+ const i = this._internals.validationMessage;
51
+ this.hint = i !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
44
52
  } else
45
53
  this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
46
54
  }
47
- attributeChangedCallback(i, s, a) {
48
- if (super.attributeChangedCallback(i, s, a), i === "value" && this._internals.setFormValue(a), i === "custom-invalid")
49
- if (typeof a == "string") {
50
- const n = this.withFallback(a);
51
- this.pristine = !1, this._internals.setValidity({ customError: !0 }, n), this.invalid = !0, this.hint = n, this.checkValidity();
55
+ attributeChangedCallback(t, i, l) {
56
+ if (super.attributeChangedCallback(t, i, l), t === "value" && this._internals.setFormValue(l), t === "custom-invalid")
57
+ if (typeof l == "string") {
58
+ const d = this.withFallback(l);
59
+ this.pristine = !1, this._internals.setValidity({ customError: !0 }, d), this.invalid = !0, this.hint = d, this.checkValidity();
52
60
  } else
53
61
  this._internals.setValidity({}), this.validateInput();
54
62
  }
55
63
  /** @internal */
56
64
  validateInput() {
57
65
  if (this._internals.validity.customError) return;
58
- const s = this.$input.validity;
59
- if (this.invalid = !1, s.valid)
66
+ const i = this.$input.validity;
67
+ if (this.invalid = !1, i.valid)
60
68
  this._internals.setValidity({ customError: this._internals.validity.customError });
61
69
  else {
62
- this.invalid = !this.pristine && !s.valid;
63
- let a;
64
- for (a in s) {
65
- const l = `data-${a.toString()}`;
66
- if (s[a] && !this.hasAttribute(l) && this.debug && console.log(
67
- `Add custom message on ${this.localName} using attribute: ${l.toUpperCase()}="Your custom message"`
68
- ), s[a]) {
69
- this.validationError = a.toString();
70
- const n = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
70
+ this.invalid = !this.pristine && !i.valid;
71
+ let l;
72
+ for (l in i) {
73
+ const n = `data-${l.toString()}`;
74
+ if (i[l] && !this.hasAttribute(n) && this.debug && console.log(
75
+ `Add custom message on ${this.localName} using attribute: ${n.toUpperCase()}="Your custom message"`
76
+ ), i[l]) {
77
+ this.validationError = l.toString();
78
+ const d = this.hasAttribute(n) ? this.getAttribute(n) : this.$input.validationMessage;
71
79
  this._internals.setValidity(
72
80
  { [this.validationError]: !0, customError: this._internals.validity.customError },
73
- this.withFallback(n)
81
+ this.withFallback(d)
74
82
  ), this.invalid && this.customErrorDisplay && this.checkValidity();
75
83
  }
76
84
  }
77
85
  }
78
86
  }
79
87
  render() {
80
- var i, s;
81
- return v`
88
+ var t, i;
89
+ return g`
82
90
  <div id="root">
83
91
  <label>
84
92
  <div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
85
- <slot>${this.label}</slot> ${this.required ? y(this.requiredLabel) : null}
93
+ <slot>${this.label}</slot> ${this.required ? _(y(this, p).term("required")) : u}
86
94
  </div>
87
95
  <div id="input">
88
96
  <textarea
@@ -91,25 +99,25 @@ const d = class d extends m {
91
99
  ?required=${this.required}
92
100
  .value=${this.value}
93
101
  @input=${this._handleInput}
94
- aria-describedby=${o((i = this.hint) != null && i.trim() ? "hint" : u)}
95
- aria-errormessage=${o((s = this.hint) != null && s.trim() ? "hint" : u)}
102
+ aria-describedby=${h((t = this.hint) != null && t.trim() ? "hint" : u)}
103
+ aria-errormessage=${h((i = this.hint) != null && i.trim() ? "hint" : u)}
96
104
  aria-invalid=${!!this.invalid}
97
- cols=${o(this.cols)}
98
- maxlength=${o(this.maxLength)}
99
- minlength=${o(this.minLength)}
100
- name=${o(this.name)}
101
- placeholder=${o(this.placeholder)}
102
- rows=${o(this.rows)}
105
+ cols=${h(this.cols)}
106
+ maxlength=${h(this.maxLength)}
107
+ minlength=${h(this.minLength)}
108
+ name=${h(this.name)}
109
+ placeholder=${h(this.placeholder)}
110
+ rows=${h(this.rows)}
103
111
  >
104
112
  </textarea>
105
113
  </div>
106
114
  </label>
107
- ${this.hint && v`
115
+ ${this.hint && g`
108
116
  <skf-hint
109
117
  ?disabled=${this.disabled}
110
118
  aria-live=${this.invalid ? "assertive" : "polite"}
111
119
  id="hint"
112
- severity=${o(c(this.invalid, this.severity))}
120
+ severity=${h(E(this.invalid, this.severity))}
113
121
  >
114
122
  ${this.customInvalid ?? this.hint}
115
123
  </skf-hint>
@@ -118,68 +126,68 @@ const d = class d extends m {
118
126
  `;
119
127
  }
120
128
  };
121
- d.styles = [b, $];
122
- let t = d;
123
- e([
124
- r({ type: Number })
125
- ], t.prototype, "cols", 2);
126
- e([
127
- r({ attribute: "custom-invalid", reflect: !0 })
128
- ], t.prototype, "customInvalid", 1);
129
- e([
130
- r({ type: Boolean })
131
- ], t.prototype, "debug", 2);
132
- e([
133
- r({ type: Boolean, attribute: "hide-label" })
134
- ], t.prototype, "hideLabel", 2);
135
- e([
136
- r()
137
- ], t.prototype, "hint", 2);
138
- e([
139
- r()
140
- ], t.prototype, "label", 2);
141
- e([
142
- r()
143
- ], t.prototype, "name", 2);
144
- e([
145
- r({ type: Number, attribute: "maxlength" })
146
- ], t.prototype, "maxLength", 2);
147
- e([
148
- r({ type: Number, attribute: "minlength" })
149
- ], t.prototype, "minLength", 2);
150
- e([
151
- r()
152
- ], t.prototype, "placeholder", 2);
153
- e([
154
- r({ type: Boolean })
155
- ], t.prototype, "readonly", 2);
156
- e([
157
- r({ attribute: "required-label" })
158
- ], t.prototype, "requiredLabel", 2);
159
- e([
160
- r({ type: Number })
161
- ], t.prototype, "rows", 2);
162
- e([
163
- r()
164
- ], t.prototype, "severity", 2);
165
- e([
166
- r({ type: Boolean, attribute: "show-valid" })
167
- ], t.prototype, "showValid", 2);
168
- e([
169
- r({ reflect: !0 })
170
- ], t.prototype, "size", 2);
171
- e([
172
- r({ attribute: "validate-on" })
173
- ], t.prototype, "validateOn", 2);
174
- e([
175
- r()
176
- ], t.prototype, "value", 2);
177
- e([
178
- f()
179
- ], t.prototype, "invalid", 2);
180
- e([
181
- g("textarea")
182
- ], t.prototype, "$input", 2);
129
+ p = new WeakMap(), v.styles = [V, L];
130
+ let e = v;
131
+ s([
132
+ o({ type: Number })
133
+ ], e.prototype, "cols", 2);
134
+ s([
135
+ o({ attribute: "custom-invalid", reflect: !0 })
136
+ ], e.prototype, "customInvalid", 1);
137
+ s([
138
+ o({ type: Boolean })
139
+ ], e.prototype, "debug", 2);
140
+ s([
141
+ o({ type: Boolean, attribute: "hide-label" })
142
+ ], e.prototype, "hideLabel", 2);
143
+ s([
144
+ o()
145
+ ], e.prototype, "hint", 2);
146
+ s([
147
+ o()
148
+ ], e.prototype, "label", 2);
149
+ s([
150
+ o({ type: String })
151
+ ], e.prototype, "lang", 2);
152
+ s([
153
+ o()
154
+ ], e.prototype, "name", 2);
155
+ s([
156
+ o({ type: Number, attribute: "maxlength" })
157
+ ], e.prototype, "maxLength", 2);
158
+ s([
159
+ o({ type: Number, attribute: "minlength" })
160
+ ], e.prototype, "minLength", 2);
161
+ s([
162
+ o()
163
+ ], e.prototype, "placeholder", 2);
164
+ s([
165
+ o({ type: Boolean })
166
+ ], e.prototype, "readonly", 2);
167
+ s([
168
+ o({ type: Number })
169
+ ], e.prototype, "rows", 2);
170
+ s([
171
+ o()
172
+ ], e.prototype, "severity", 2);
173
+ s([
174
+ o({ type: Boolean, attribute: "show-valid" })
175
+ ], e.prototype, "showValid", 2);
176
+ s([
177
+ o({ reflect: !0 })
178
+ ], e.prototype, "size", 2);
179
+ s([
180
+ o({ attribute: "validate-on" })
181
+ ], e.prototype, "validateOn", 2);
182
+ s([
183
+ o()
184
+ ], e.prototype, "value", 2);
185
+ s([
186
+ x()
187
+ ], e.prototype, "invalid", 2);
188
+ s([
189
+ I("textarea")
190
+ ], e.prototype, "$input", 2);
183
191
  export {
184
- t as SkfTextArea
192
+ e as SkfTextArea
185
193
  };
@@ -8,8 +8,11 @@ import type { CSSResultGroup } from 'lit';
8
8
  * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the dropdown
9
9
  * @attribute {string} [anchor] - The id of the element the dropdown will be anchored to
10
10
  *
11
- * @event skf-opened - Fired when the dropdown is opened
12
- * @event skf-closed - Fired when the dropdown is closed
11
+ * @property {(void) => void} open() - Method that opens the tooltip
12
+ * @property {(void) => void} close() - Method that closes the tooltip
13
+ *
14
+ * @event {CustomEvent} skf-opened - Fired when the tooltip is opened
15
+ * @event {CustomEvent} skf-closed - Fired when the tooltip is closed
13
16
  *
14
17
  * @slot - The tooltip popover content
15
18
  *
@@ -19,7 +22,10 @@ export declare class SkfTooltip extends SkfPopoverBase {
19
22
  static styles: CSSResultGroup;
20
23
  constructor();
21
24
  connectedCallback(): void;
25
+ /** @internal */
22
26
  openExtended(): void;
27
+ /** @internal */
23
28
  closeExtended(): void;
29
+ /** @internal */
24
30
  addEventListeners($element: HTMLElement | Element): void;
25
31
  }
@@ -7,14 +7,17 @@ const e = class e extends t {
7
7
  connectedCallback() {
8
8
  super.connectedCallback(), this.role = "tooltip";
9
9
  }
10
+ /** @internal */
10
11
  openExtended() {
11
12
  var s;
12
13
  (s = this.$anchor) == null || s.setAttribute("aria-describedby", this.id);
13
14
  }
15
+ /** @internal */
14
16
  closeExtended() {
15
17
  var s;
16
18
  (s = this.$anchor) == null || s.removeAttribute("aria-describedby");
17
19
  }
20
+ /** @internal */
18
21
  addEventListeners(s) {
19
22
  s.addEventListener("blur", this.close, { signal: this.signal }), s.addEventListener("focus", this.open, { signal: this.signal }), s.addEventListener("mouseenter", this.open, { signal: this.signal }), s.addEventListener("mouseleave", this.close, { signal: this.signal });
20
23
  }