@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.
- package/README.md +18 -0
- package/dist/components/alert/alert.component.d.ts +3 -2
- package/dist/components/alert/alert.component.js +39 -33
- package/dist/components/button/button.styles.js +3 -3
- package/dist/components/checkbox/checkbox.component.d.ts +6 -5
- package/dist/components/checkbox/checkbox.component.js +77 -76
- package/dist/components/checkbox/checkbox.styles.js +1 -1
- package/dist/components/datepicker/datepicker-calendar.component.d.ts +4 -0
- package/dist/components/datepicker/datepicker-calendar.component.js +134 -127
- package/dist/components/datepicker/datepicker-popup.component.d.ts +4 -0
- package/dist/components/datepicker/datepicker-popup.component.js +100 -88
- package/dist/components/datepicker/datepicker.component.d.ts +4 -2
- package/dist/components/datepicker/datepicker.component.js +150 -140
- package/dist/components/dialog/dialog.component.d.ts +3 -2
- package/dist/components/dialog/dialog.component.js +39 -37
- package/dist/components/divider/divider.component.js +13 -13
- package/dist/components/divider/divider.styles.js +2 -2
- package/dist/components/drawer/drawer.component.d.ts +3 -2
- package/dist/components/drawer/drawer.component.js +37 -35
- package/dist/components/drawer/drawer.styles.js +1 -1
- package/dist/components/header/header.component.d.ts +4 -2
- package/dist/components/header/header.component.js +66 -57
- package/dist/components/header/header.styles.js +2 -2
- package/dist/components/icon/icon.component.js +26 -16
- package/dist/components/icon/icon.styles.js +4 -4
- package/dist/components/input/input.component.d.ts +4 -8
- package/dist/components/input/input.component.js +146 -147
- package/dist/components/input/input.controllers.d.ts +0 -1
- package/dist/components/input/input.controllers.js +12 -12
- package/dist/components/link/link.component.js +19 -12
- package/dist/components/link/link.styles.js +11 -3
- package/dist/components/loader/loader.component.d.ts +0 -2
- package/dist/components/loader/loader.component.js +27 -30
- package/dist/components/loader/loader.styles.js +1 -1
- package/dist/components/menu/menu-item.styles.js +8 -7
- package/dist/components/menu/menu.component.d.ts +4 -1
- package/dist/components/nav/nav.component.d.ts +3 -0
- package/dist/components/nav/nav.component.js +38 -33
- package/dist/components/popover/popover.component.d.ts +6 -3
- package/dist/components/progress/progress.styles.js +3 -3
- package/dist/components/radio/radio.component.d.ts +4 -2
- package/dist/components/radio/radio.component.js +91 -83
- package/dist/components/radio/radio.styles.js +1 -1
- package/dist/components/segmented-button/segmented-button-item.component.js +1 -1
- package/dist/components/segmented-button/segmented-button-item.styles.js +1 -1
- package/dist/components/select/select-option.component.d.ts +2 -2
- package/dist/components/select/select-option.component.js +16 -19
- package/dist/components/select/select.component.d.ts +13 -9
- package/dist/components/select/select.component.js +169 -144
- package/dist/components/stepper/stepper-item.styles.js +4 -4
- package/dist/components/switch/switch.component.d.ts +4 -2
- package/dist/components/switch/switch.component.js +64 -56
- package/dist/components/switch/switch.styles.js +1 -1
- package/dist/components/tabs/tab.styles.js +2 -2
- package/dist/components/tag/tag.component.d.ts +3 -0
- package/dist/components/tag/tag.component.js +50 -41
- package/dist/components/textarea/textarea.component.d.ts +4 -2
- package/dist/components/textarea/textarea.component.js +126 -118
- package/dist/components/tooltip/tooltip.component.d.ts +8 -2
- package/dist/components/tooltip/tooltip.component.js +3 -0
- package/dist/custom-elements.json +734 -372
- package/dist/internal/base-classes/popover/popover.base.d.ts +21 -2
- package/dist/internal/base-classes/popover/popover.base.js +10 -12
- package/dist/internal/components/formBase.d.ts +1 -0
- package/dist/internal/components/formBase.js +11 -19
- package/dist/internal/controllers/popover.controller.d.ts +2 -0
- package/dist/internal/helpers/uuid.d.ts +8 -10
- package/dist/internal/helpers/uuid.js +4 -11
- package/dist/internal/helpers/watch.d.ts +1 -1
- package/dist/internal/templates/asterisk.d.ts +1 -1
- package/dist/internal/templates/asterisk.js +4 -4
- package/dist/styles/global-alt.css +1 -1
- package/dist/styles/global.css +1 -1
- package/dist/translations/en.d.ts +3 -0
- package/dist/translations/en.js +27 -0
- package/dist/translations/es.d.ts +3 -0
- package/dist/translations/es.js +27 -0
- package/dist/translations/index.d.ts +4 -0
- package/dist/translations/pt.d.ts +3 -0
- package/dist/translations/pt.js +27 -0
- package/dist/translations/sv.d.ts +3 -0
- package/dist/translations/sv.js +27 -0
- package/dist/types/jsx/custom-element-jsx.d.ts +1823 -846
- package/dist/types/vue/index.d.ts +59 -47
- package/dist/utilities/localize.d.ts +28 -0
- package/dist/utilities/localize.js +13 -0
- package/dist/vscode.html-custom-data.json +75 -80
- package/dist/web-types.json +205 -169
- package/package.json +27 -34
- package/custom-elements.json +0 -25490
@@ -86,7 +86,7 @@ const e = o`
|
|
86
86
|
}
|
87
87
|
|
88
88
|
&:hover {
|
89
|
-
--_skf-tab-bg-color: var(--skf-color-blue-
|
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-
|
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
|
1
|
+
var k = (e) => {
|
2
2
|
throw TypeError(e);
|
3
3
|
};
|
4
|
-
var
|
5
|
-
var m = (e, o, 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
|
8
|
-
import { stateMap as
|
9
|
-
import { watch as
|
10
|
-
import { componentStyles as
|
11
|
-
import {
|
12
|
-
import {
|
13
|
-
import {
|
14
|
-
import {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
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
|
21
|
+
const _ = {
|
21
22
|
size: ["sm", "md"],
|
22
23
|
color: ["error", "info", "success", "warning"]
|
23
24
|
};
|
24
|
-
var
|
25
|
-
const
|
25
|
+
var c, h, p;
|
26
|
+
const y = class y extends g {
|
26
27
|
constructor() {
|
27
28
|
super(...arguments);
|
28
|
-
d(this,
|
29
|
+
d(this, c);
|
29
30
|
d(this, h);
|
30
|
-
|
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
|
36
|
-
t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (
|
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,
|
58
|
-
super.attributeChangedCallback(t,
|
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,
|
61
|
-
|
62
|
+
_handleStateChange(t, s, i) {
|
63
|
+
w(m(this, p), _[t]).set(i);
|
62
64
|
}
|
63
65
|
render() {
|
64
|
-
return
|
66
|
+
return u`
|
65
67
|
<div id="root">
|
66
|
-
${this.icon ?
|
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 ?
|
69
|
-
<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
|
-
` :
|
78
|
+
` : b}
|
73
79
|
</div>
|
74
80
|
`;
|
75
81
|
}
|
76
82
|
};
|
77
|
-
|
78
|
-
let n =
|
83
|
+
c = new WeakMap(), h = new WeakMap(), p = new WeakMap(), y.styles = [R, P];
|
84
|
+
let n = y;
|
79
85
|
r([
|
80
|
-
|
86
|
+
l({ type: String })
|
81
87
|
], n.prototype, "size", 2);
|
82
88
|
r([
|
83
|
-
|
89
|
+
l({ type: String })
|
84
90
|
], n.prototype, "icon", 2);
|
85
91
|
r([
|
86
|
-
|
92
|
+
l({ type: String })
|
87
93
|
], n.prototype, "color", 2);
|
88
94
|
r([
|
89
|
-
|
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
|
-
|
101
|
+
l({ attribute: !1 })
|
93
102
|
], n.prototype, "onRemove", 1);
|
94
103
|
r([
|
95
|
-
|
104
|
+
l({ type: Boolean })
|
96
105
|
], n.prototype, "removable", 2);
|
97
106
|
r([
|
98
|
-
|
107
|
+
D("button")
|
99
108
|
], n.prototype, "$removeButton", 2);
|
100
109
|
r([
|
101
|
-
|
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
|
7
|
+
import { FormBase as $ } from "../../internal/components/formBase.js";
|
3
8
|
import "../../internal/components/hint/hint.js";
|
4
|
-
import { hintSeverity as
|
5
|
-
import { Asterisk as
|
6
|
-
import { componentStyles as
|
7
|
-
import {
|
8
|
-
import {
|
9
|
-
import {
|
10
|
-
import
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
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)
|
19
|
-
|
20
|
-
|
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(
|
26
|
-
this.customError =
|
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", (
|
35
|
-
this.pristine = !1, this.invalid = !0, this.customErrorDisplay &&
|
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(
|
39
|
-
if (
|
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
|
43
|
-
this.hint =
|
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(
|
48
|
-
if (super.attributeChangedCallback(
|
49
|
-
if (typeof
|
50
|
-
const
|
51
|
-
this.pristine = !1, this._internals.setValidity({ customError: !0 },
|
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
|
59
|
-
if (this.invalid = !1,
|
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 && !
|
63
|
-
let
|
64
|
-
for (
|
65
|
-
const
|
66
|
-
if (
|
67
|
-
`Add custom message on ${this.localName} using attribute: ${
|
68
|
-
),
|
69
|
-
this.validationError =
|
70
|
-
const
|
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(
|
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
|
81
|
-
return
|
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.
|
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=${
|
95
|
-
aria-errormessage=${
|
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=${
|
98
|
-
maxlength=${
|
99
|
-
minlength=${
|
100
|
-
name=${
|
101
|
-
placeholder=${
|
102
|
-
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 &&
|
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=${
|
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
|
-
|
122
|
-
let
|
123
|
-
|
124
|
-
|
125
|
-
],
|
126
|
-
|
127
|
-
|
128
|
-
],
|
129
|
-
|
130
|
-
|
131
|
-
],
|
132
|
-
|
133
|
-
|
134
|
-
],
|
135
|
-
|
136
|
-
|
137
|
-
],
|
138
|
-
|
139
|
-
|
140
|
-
],
|
141
|
-
|
142
|
-
|
143
|
-
],
|
144
|
-
|
145
|
-
|
146
|
-
],
|
147
|
-
|
148
|
-
|
149
|
-
],
|
150
|
-
|
151
|
-
|
152
|
-
],
|
153
|
-
|
154
|
-
|
155
|
-
],
|
156
|
-
|
157
|
-
|
158
|
-
],
|
159
|
-
|
160
|
-
|
161
|
-
],
|
162
|
-
|
163
|
-
|
164
|
-
],
|
165
|
-
|
166
|
-
|
167
|
-
],
|
168
|
-
|
169
|
-
|
170
|
-
],
|
171
|
-
|
172
|
-
|
173
|
-
],
|
174
|
-
|
175
|
-
|
176
|
-
],
|
177
|
-
|
178
|
-
|
179
|
-
],
|
180
|
-
|
181
|
-
|
182
|
-
],
|
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
|
-
|
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
|
-
* @
|
12
|
-
* @
|
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
|
}
|