@synergy-design-system/components 0.1.0 → 1.0.0-main.1
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/package.json +29 -10
- package/dist/chunks/chunk.2A3352EO.js +0 -10
- package/dist/chunks/chunk.2CFEYJLE.js +0 -29
- package/dist/chunks/chunk.2DA7CIOQ.js +0 -44
- package/dist/chunks/chunk.4NMNW5OM.js +0 -22
- package/dist/chunks/chunk.7XI5LKCC.js +0 -14
- package/dist/chunks/chunk.HQUF2ZAX.js +0 -62
- package/dist/chunks/chunk.HSF5YXAS.js +0 -294
- package/dist/chunks/chunk.KHU4AFPL.js +0 -11
- package/dist/chunks/chunk.MAS2SHYD.js +0 -41
- package/dist/chunks/chunk.NBKDLFEY.js +0 -201
- package/dist/chunks/chunk.O3LUPMYG.js +0 -372
- package/dist/chunks/chunk.PM7NIY3M.js +0 -35
- package/dist/chunks/chunk.Q5SD5LHE.js +0 -607
- package/dist/chunks/chunk.QPNUJNT5.js +0 -70
- package/dist/chunks/chunk.SVIWEI6P.js +0 -27
- package/dist/chunks/chunk.VRTJZYIC.js +0 -127
- package/dist/chunks/chunk.XVEDHRRP.js +0 -500
- package/dist/chunks/chunk.Y5USHY74.js +0 -31
- package/dist/chunks/chunk.Z6AW3P62.js +0 -317
- package/dist/components/button/button.component.d.ts +0 -132
- package/dist/components/button/button.component.js +0 -21
- package/dist/components/button/button.d.ts +0 -8
- package/dist/components/button/button.js +0 -25
- package/dist/components/button/button.styles.d.ts +0 -2
- package/dist/components/button/button.styles.js +0 -8
- package/dist/components/icon/icon.component.d.ts +0 -42
- package/dist/components/icon/icon.component.js +0 -14
- package/dist/components/icon/icon.d.ts +0 -8
- package/dist/components/icon/icon.js +0 -18
- package/dist/components/icon/icon.styles.d.ts +0 -2
- package/dist/components/icon/icon.styles.js +0 -8
- package/dist/components/icon/library.d.ts +0 -19
- package/dist/components/icon/library.default.d.ts +0 -3
- package/dist/components/icon/library.default.js +0 -8
- package/dist/components/icon/library.js +0 -18
- package/dist/components/icon/library.system.d.ts +0 -3
- package/dist/components/icon/library.system.js +0 -7
- package/dist/components/input/input.component.d.ts +0 -179
- package/dist/components/input/input.component.js +0 -19
- package/dist/components/input/input.d.ts +0 -8
- package/dist/components/input/input.js +0 -20
- package/dist/components/input/input.styles.d.ts +0 -2
- package/dist/components/input/input.styles.js +0 -8
- package/dist/components/spinner/spinner.component.d.ts +0 -20
- package/dist/components/spinner/spinner.component.js +0 -12
- package/dist/components/spinner/spinner.styles.d.ts +0 -2
- package/dist/components/spinner/spinner.styles.js +0 -8
- package/dist/custom-elements.json +0 -1967
- package/dist/events/events.d.ts +0 -8
- package/dist/events/syn-blur.d.ts +0 -6
- package/dist/events/syn-change.d.ts +0 -6
- package/dist/events/syn-clear.d.ts +0 -6
- package/dist/events/syn-error.d.ts +0 -8
- package/dist/events/syn-focus.d.ts +0 -6
- package/dist/events/syn-input.d.ts +0 -6
- package/dist/events/syn-invalid.d.ts +0 -6
- package/dist/events/syn-load.d.ts +0 -6
- package/dist/internal/default-value.d.ts +0 -2
- package/dist/internal/form.d.ts +0 -73
- package/dist/internal/slot.d.ts +0 -23
- package/dist/internal/synergy-element.d.ts +0 -47
- package/dist/internal/test/form-control-base-tests.d.ts +0 -7
- package/dist/internal/watch.d.ts +0 -26
- package/dist/styles/component.styles.d.ts +0 -2
- package/dist/styles/form-control.styles.d.ts +0 -2
- package/dist/synergy-autoloader.d.ts +0 -4
- package/dist/synergy-autoloader.js +0 -40
- package/dist/synergy.d.ts +0 -2
- package/dist/synergy.js +0 -20
- package/dist/translations/de.d.ts +0 -3
- package/dist/translations/de.js +0 -45
- package/dist/translations/en.d.ts +0 -3
- package/dist/translations/en.js +0 -7
- package/dist/utilities/base-path.d.ts +0 -18
- package/dist/utilities/base-path.js +0 -9
- package/dist/utilities/localize.d.ts +0 -33
- package/dist/utilities/localize.js +0 -10
- package/dist/vscode.html-custom-data.json +0 -400
- package/dist/web-types.json +0 -790
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
// src/components/icon/library.system.ts
|
|
2
|
-
var icons = {
|
|
3
|
-
caret: `
|
|
4
|
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
5
|
-
<polyline points="6 9 12 15 18 9"></polyline>
|
|
6
|
-
</svg>
|
|
7
|
-
`,
|
|
8
|
-
check: `
|
|
9
|
-
<svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
|
|
10
|
-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
11
|
-
<g stroke="currentColor">
|
|
12
|
-
<g transform="translate(3.428571, 3.428571)">
|
|
13
|
-
<path d="M0,5.71428571 L3.42857143,9.14285714"></path>
|
|
14
|
-
<path d="M9.14285714,0 L3.42857143,9.14285714"></path>
|
|
15
|
-
</g>
|
|
16
|
-
</g>
|
|
17
|
-
</g>
|
|
18
|
-
</svg>
|
|
19
|
-
`,
|
|
20
|
-
"chevron-down": `
|
|
21
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
|
|
22
|
-
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
|
|
23
|
-
</svg>
|
|
24
|
-
`,
|
|
25
|
-
"chevron-left": `
|
|
26
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
|
|
27
|
-
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
|
28
|
-
</svg>
|
|
29
|
-
`,
|
|
30
|
-
"chevron-right": `
|
|
31
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
|
|
32
|
-
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
|
33
|
-
</svg>
|
|
34
|
-
`,
|
|
35
|
-
copy: `
|
|
36
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
|
|
37
|
-
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
|
|
38
|
-
</svg>
|
|
39
|
-
`,
|
|
40
|
-
eye: `
|
|
41
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
|
|
42
|
-
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
|
43
|
-
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
|
44
|
-
</svg>
|
|
45
|
-
`,
|
|
46
|
-
"eye-slash": `
|
|
47
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
|
|
48
|
-
<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
|
|
49
|
-
<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
|
|
50
|
-
<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
|
|
51
|
-
</svg>
|
|
52
|
-
`,
|
|
53
|
-
eyedropper: `
|
|
54
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
|
|
55
|
-
<path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
|
|
56
|
-
</svg>
|
|
57
|
-
`,
|
|
58
|
-
"grip-vertical": `
|
|
59
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
|
|
60
|
-
<path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
|
|
61
|
-
</svg>
|
|
62
|
-
`,
|
|
63
|
-
indeterminate: `
|
|
64
|
-
<svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16">
|
|
65
|
-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
|
66
|
-
<g stroke="currentColor" stroke-width="2">
|
|
67
|
-
<g transform="translate(2.285714, 6.857143)">
|
|
68
|
-
<path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
|
|
69
|
-
</g>
|
|
70
|
-
</g>
|
|
71
|
-
</g>
|
|
72
|
-
</svg>
|
|
73
|
-
`,
|
|
74
|
-
"person-fill": `
|
|
75
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
|
|
76
|
-
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
|
77
|
-
</svg>
|
|
78
|
-
`,
|
|
79
|
-
"play-fill": `
|
|
80
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
|
|
81
|
-
<path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
|
|
82
|
-
</svg>
|
|
83
|
-
`,
|
|
84
|
-
"pause-fill": `
|
|
85
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
|
|
86
|
-
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path>
|
|
87
|
-
</svg>
|
|
88
|
-
`,
|
|
89
|
-
radio: `
|
|
90
|
-
<svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
|
|
91
|
-
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
92
|
-
<g fill="currentColor">
|
|
93
|
-
<circle cx="8" cy="8" r="3.42857143"></circle>
|
|
94
|
-
</g>
|
|
95
|
-
</g>
|
|
96
|
-
</svg>
|
|
97
|
-
`,
|
|
98
|
-
"star-fill": `
|
|
99
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
|
|
100
|
-
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
|
|
101
|
-
</svg>
|
|
102
|
-
`,
|
|
103
|
-
"x-lg": `
|
|
104
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
|
|
105
|
-
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
|
|
106
|
-
</svg>
|
|
107
|
-
`,
|
|
108
|
-
"x-circle-fill": `
|
|
109
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
|
|
110
|
-
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
|
|
111
|
-
</svg>
|
|
112
|
-
`
|
|
113
|
-
};
|
|
114
|
-
var systemLibrary = {
|
|
115
|
-
name: "system",
|
|
116
|
-
resolver: (name) => {
|
|
117
|
-
if (name in icons) {
|
|
118
|
-
return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
|
|
119
|
-
}
|
|
120
|
-
return "";
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
var library_system_default = systemLibrary;
|
|
124
|
-
|
|
125
|
-
export {
|
|
126
|
-
library_system_default
|
|
127
|
-
};
|
|
@@ -1,500 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
input_styles_default
|
|
3
|
-
} from "./chunk.O3LUPMYG.js";
|
|
4
|
-
import {
|
|
5
|
-
FormControlController,
|
|
6
|
-
HasSlotController
|
|
7
|
-
} from "./chunk.Z6AW3P62.js";
|
|
8
|
-
import {
|
|
9
|
-
SynIcon,
|
|
10
|
-
watch
|
|
11
|
-
} from "./chunk.NBKDLFEY.js";
|
|
12
|
-
import {
|
|
13
|
-
LocalizeController
|
|
14
|
-
} from "./chunk.2A3352EO.js";
|
|
15
|
-
import {
|
|
16
|
-
SynergyElement
|
|
17
|
-
} from "./chunk.HQUF2ZAX.js";
|
|
18
|
-
import {
|
|
19
|
-
__decorateClass
|
|
20
|
-
} from "./chunk.PM7NIY3M.js";
|
|
21
|
-
|
|
22
|
-
// src/components/input/input.component.ts
|
|
23
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
24
|
-
|
|
25
|
-
// src/internal/default-value.ts
|
|
26
|
-
import { defaultConverter } from "lit";
|
|
27
|
-
var defaultValue = (propertyName = "value") => (proto, key) => {
|
|
28
|
-
const ctor = proto.constructor;
|
|
29
|
-
const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
|
|
30
|
-
ctor.prototype.attributeChangedCallback = function(name, old, value) {
|
|
31
|
-
var _a;
|
|
32
|
-
const options = ctor.getPropertyOptions(propertyName);
|
|
33
|
-
const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
|
|
34
|
-
if (name === attributeName) {
|
|
35
|
-
const converter = options.converter || defaultConverter;
|
|
36
|
-
const fromAttribute = typeof converter === "function" ? converter : (_a = converter == null ? void 0 : converter.fromAttribute) != null ? _a : defaultConverter.fromAttribute;
|
|
37
|
-
const newValue = fromAttribute(value, options.type);
|
|
38
|
-
if (this[propertyName] !== newValue) {
|
|
39
|
-
this[key] = newValue;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
attributeChangedCallback.call(this, name, old, value);
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
// src/components/input/input.component.ts
|
|
47
|
-
import { html } from "lit";
|
|
48
|
-
import { ifDefined } from "lit/directives/if-defined.js";
|
|
49
|
-
import { live } from "lit/directives/live.js";
|
|
50
|
-
import { property, query, state } from "lit/decorators.js";
|
|
51
|
-
var SynInput = class extends SynergyElement {
|
|
52
|
-
constructor() {
|
|
53
|
-
super(...arguments);
|
|
54
|
-
this.formControlController = new FormControlController(this, {
|
|
55
|
-
assumeInteractionOn: ["syn-blur", "syn-input"]
|
|
56
|
-
});
|
|
57
|
-
this.hasSlotController = new HasSlotController(this, "help-text", "label");
|
|
58
|
-
this.localize = new LocalizeController(this);
|
|
59
|
-
this.hasFocus = false;
|
|
60
|
-
this.title = "";
|
|
61
|
-
// make reactive to pass through
|
|
62
|
-
this.__numberInput = Object.assign(document.createElement("input"), { type: "number" });
|
|
63
|
-
this.__dateInput = Object.assign(document.createElement("input"), { type: "date" });
|
|
64
|
-
this.type = "text";
|
|
65
|
-
this.name = "";
|
|
66
|
-
this.value = "";
|
|
67
|
-
this.defaultValue = "";
|
|
68
|
-
this.size = "medium";
|
|
69
|
-
this.filled = false;
|
|
70
|
-
this.pill = false;
|
|
71
|
-
this.label = "";
|
|
72
|
-
this.helpText = "";
|
|
73
|
-
this.clearable = false;
|
|
74
|
-
this.disabled = false;
|
|
75
|
-
this.placeholder = "";
|
|
76
|
-
this.readonly = false;
|
|
77
|
-
this.passwordToggle = false;
|
|
78
|
-
this.passwordVisible = false;
|
|
79
|
-
this.noSpinButtons = false;
|
|
80
|
-
this.form = "";
|
|
81
|
-
this.required = false;
|
|
82
|
-
this.spellcheck = true;
|
|
83
|
-
}
|
|
84
|
-
//
|
|
85
|
-
// NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
|
|
86
|
-
// can be set before the component is rendered.
|
|
87
|
-
//
|
|
88
|
-
/**
|
|
89
|
-
* Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
|
|
90
|
-
*/
|
|
91
|
-
get valueAsDate() {
|
|
92
|
-
var _a;
|
|
93
|
-
this.__dateInput.type = this.type;
|
|
94
|
-
this.__dateInput.value = this.value;
|
|
95
|
-
return ((_a = this.input) == null ? void 0 : _a.valueAsDate) || this.__dateInput.valueAsDate;
|
|
96
|
-
}
|
|
97
|
-
set valueAsDate(newValue) {
|
|
98
|
-
this.__dateInput.type = this.type;
|
|
99
|
-
this.__dateInput.valueAsDate = newValue;
|
|
100
|
-
this.value = this.__dateInput.value;
|
|
101
|
-
}
|
|
102
|
-
/** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
|
|
103
|
-
get valueAsNumber() {
|
|
104
|
-
var _a;
|
|
105
|
-
this.__numberInput.value = this.value;
|
|
106
|
-
return ((_a = this.input) == null ? void 0 : _a.valueAsNumber) || this.__numberInput.valueAsNumber;
|
|
107
|
-
}
|
|
108
|
-
set valueAsNumber(newValue) {
|
|
109
|
-
this.__numberInput.valueAsNumber = newValue;
|
|
110
|
-
this.value = this.__numberInput.value;
|
|
111
|
-
}
|
|
112
|
-
/** Gets the validity state object */
|
|
113
|
-
get validity() {
|
|
114
|
-
return this.input.validity;
|
|
115
|
-
}
|
|
116
|
-
/** Gets the validation message */
|
|
117
|
-
get validationMessage() {
|
|
118
|
-
return this.input.validationMessage;
|
|
119
|
-
}
|
|
120
|
-
firstUpdated() {
|
|
121
|
-
this.formControlController.updateValidity();
|
|
122
|
-
}
|
|
123
|
-
handleBlur() {
|
|
124
|
-
this.hasFocus = false;
|
|
125
|
-
this.emit("syn-blur");
|
|
126
|
-
}
|
|
127
|
-
handleChange() {
|
|
128
|
-
this.value = this.input.value;
|
|
129
|
-
this.emit("syn-change");
|
|
130
|
-
}
|
|
131
|
-
handleClearClick(event) {
|
|
132
|
-
this.value = "";
|
|
133
|
-
this.emit("syn-clear");
|
|
134
|
-
this.emit("syn-input");
|
|
135
|
-
this.emit("syn-change");
|
|
136
|
-
this.input.focus();
|
|
137
|
-
event.stopPropagation();
|
|
138
|
-
}
|
|
139
|
-
handleFocus() {
|
|
140
|
-
this.hasFocus = true;
|
|
141
|
-
this.emit("syn-focus");
|
|
142
|
-
}
|
|
143
|
-
handleInput() {
|
|
144
|
-
this.value = this.input.value;
|
|
145
|
-
this.formControlController.updateValidity();
|
|
146
|
-
this.emit("syn-input");
|
|
147
|
-
}
|
|
148
|
-
handleInvalid(event) {
|
|
149
|
-
this.formControlController.setValidity(false);
|
|
150
|
-
this.formControlController.emitInvalidEvent(event);
|
|
151
|
-
}
|
|
152
|
-
handleKeyDown(event) {
|
|
153
|
-
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
|
|
154
|
-
if (event.key === "Enter" && !hasModifier) {
|
|
155
|
-
setTimeout(() => {
|
|
156
|
-
if (!event.defaultPrevented && !event.isComposing) {
|
|
157
|
-
this.formControlController.submit();
|
|
158
|
-
}
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
handlePasswordToggle() {
|
|
163
|
-
this.passwordVisible = !this.passwordVisible;
|
|
164
|
-
}
|
|
165
|
-
handleDisabledChange() {
|
|
166
|
-
this.formControlController.setValidity(this.disabled);
|
|
167
|
-
}
|
|
168
|
-
handleStepChange() {
|
|
169
|
-
this.input.step = String(this.step);
|
|
170
|
-
this.formControlController.updateValidity();
|
|
171
|
-
}
|
|
172
|
-
async handleValueChange() {
|
|
173
|
-
await this.updateComplete;
|
|
174
|
-
this.formControlController.updateValidity();
|
|
175
|
-
}
|
|
176
|
-
/** Sets focus on the input. */
|
|
177
|
-
focus(options) {
|
|
178
|
-
this.input.focus(options);
|
|
179
|
-
}
|
|
180
|
-
/** Removes focus from the input. */
|
|
181
|
-
blur() {
|
|
182
|
-
this.input.blur();
|
|
183
|
-
}
|
|
184
|
-
/** Selects all the text in the input. */
|
|
185
|
-
select() {
|
|
186
|
-
this.input.select();
|
|
187
|
-
}
|
|
188
|
-
/** Sets the start and end positions of the text selection (0-based). */
|
|
189
|
-
setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
|
|
190
|
-
this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
|
|
191
|
-
}
|
|
192
|
-
/** Replaces a range of text with a new string. */
|
|
193
|
-
setRangeText(replacement, start, end, selectMode) {
|
|
194
|
-
this.input.setRangeText(replacement, start, end, selectMode);
|
|
195
|
-
if (this.value !== this.input.value) {
|
|
196
|
-
this.value = this.input.value;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
/** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
|
|
200
|
-
showPicker() {
|
|
201
|
-
if ("showPicker" in HTMLInputElement.prototype) {
|
|
202
|
-
this.input.showPicker();
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
/** Increments the value of a numeric input type by the value of the step attribute. */
|
|
206
|
-
stepUp() {
|
|
207
|
-
this.input.stepUp();
|
|
208
|
-
if (this.value !== this.input.value) {
|
|
209
|
-
this.value = this.input.value;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
/** Decrements the value of a numeric input type by the value of the step attribute. */
|
|
213
|
-
stepDown() {
|
|
214
|
-
this.input.stepDown();
|
|
215
|
-
if (this.value !== this.input.value) {
|
|
216
|
-
this.value = this.input.value;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
220
|
-
checkValidity() {
|
|
221
|
-
return this.input.checkValidity();
|
|
222
|
-
}
|
|
223
|
-
/** Gets the associated form, if one exists. */
|
|
224
|
-
getForm() {
|
|
225
|
-
return this.formControlController.getForm();
|
|
226
|
-
}
|
|
227
|
-
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
228
|
-
reportValidity() {
|
|
229
|
-
return this.input.reportValidity();
|
|
230
|
-
}
|
|
231
|
-
/** Sets a custom validation message. Pass an empty string to restore validity. */
|
|
232
|
-
setCustomValidity(message) {
|
|
233
|
-
this.input.setCustomValidity(message);
|
|
234
|
-
this.formControlController.updateValidity();
|
|
235
|
-
}
|
|
236
|
-
render() {
|
|
237
|
-
const hasLabelSlot = this.hasSlotController.test("label");
|
|
238
|
-
const hasHelpTextSlot = this.hasSlotController.test("help-text");
|
|
239
|
-
const hasLabel = this.label ? true : !!hasLabelSlot;
|
|
240
|
-
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
|
|
241
|
-
const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
|
|
242
|
-
const isClearIconVisible = hasClearIcon && (typeof this.value === "number" || this.value.length > 0);
|
|
243
|
-
return html`
|
|
244
|
-
<div
|
|
245
|
-
part="form-control"
|
|
246
|
-
class=${classMap({
|
|
247
|
-
"form-control": true,
|
|
248
|
-
"form-control--small": this.size === "small",
|
|
249
|
-
"form-control--medium": this.size === "medium",
|
|
250
|
-
"form-control--large": this.size === "large",
|
|
251
|
-
"form-control--has-label": hasLabel,
|
|
252
|
-
"form-control--has-help-text": hasHelpText
|
|
253
|
-
})}
|
|
254
|
-
>
|
|
255
|
-
<label
|
|
256
|
-
part="form-control-label"
|
|
257
|
-
class="form-control__label"
|
|
258
|
-
for="input"
|
|
259
|
-
aria-hidden=${hasLabel ? "false" : "true"}
|
|
260
|
-
>
|
|
261
|
-
<slot name="label">${this.label}</slot>
|
|
262
|
-
</label>
|
|
263
|
-
|
|
264
|
-
<div part="form-control-input" class="form-control-input">
|
|
265
|
-
<div
|
|
266
|
-
part="base"
|
|
267
|
-
class=${classMap({
|
|
268
|
-
input: true,
|
|
269
|
-
// Sizes
|
|
270
|
-
"input--small": this.size === "small",
|
|
271
|
-
"input--medium": this.size === "medium",
|
|
272
|
-
"input--large": this.size === "large",
|
|
273
|
-
// States
|
|
274
|
-
"input--pill": this.pill,
|
|
275
|
-
"input--standard": !this.filled,
|
|
276
|
-
"input--filled": this.filled,
|
|
277
|
-
"input--disabled": this.disabled,
|
|
278
|
-
"input--focused": this.hasFocus,
|
|
279
|
-
"input--empty": !this.value,
|
|
280
|
-
"input--no-spin-buttons": this.noSpinButtons
|
|
281
|
-
})}
|
|
282
|
-
>
|
|
283
|
-
<span part="prefix" class="input__prefix">
|
|
284
|
-
<slot name="prefix"></slot>
|
|
285
|
-
</span>
|
|
286
|
-
|
|
287
|
-
<input
|
|
288
|
-
part="input"
|
|
289
|
-
id="input"
|
|
290
|
-
class="input__control"
|
|
291
|
-
type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
|
|
292
|
-
title=${this.title}
|
|
293
|
-
name=${ifDefined(this.name)}
|
|
294
|
-
?disabled=${this.disabled}
|
|
295
|
-
?readonly=${this.readonly}
|
|
296
|
-
?required=${this.required}
|
|
297
|
-
placeholder=${ifDefined(this.placeholder)}
|
|
298
|
-
minlength=${ifDefined(this.minlength)}
|
|
299
|
-
maxlength=${ifDefined(this.maxlength)}
|
|
300
|
-
min=${ifDefined(this.min)}
|
|
301
|
-
max=${ifDefined(this.max)}
|
|
302
|
-
step=${ifDefined(this.step)}
|
|
303
|
-
.value=${live(this.value)}
|
|
304
|
-
autocapitalize=${ifDefined(this.autocapitalize)}
|
|
305
|
-
autocomplete=${ifDefined(this.autocomplete)}
|
|
306
|
-
autocorrect=${ifDefined(this.autocorrect)}
|
|
307
|
-
?autofocus=${this.autofocus}
|
|
308
|
-
spellcheck=${this.spellcheck}
|
|
309
|
-
pattern=${ifDefined(this.pattern)}
|
|
310
|
-
enterkeyhint=${ifDefined(this.enterkeyhint)}
|
|
311
|
-
inputmode=${ifDefined(this.inputmode)}
|
|
312
|
-
aria-describedby="help-text"
|
|
313
|
-
@change=${this.handleChange}
|
|
314
|
-
@input=${this.handleInput}
|
|
315
|
-
@invalid=${this.handleInvalid}
|
|
316
|
-
@keydown=${this.handleKeyDown}
|
|
317
|
-
@focus=${this.handleFocus}
|
|
318
|
-
@blur=${this.handleBlur}
|
|
319
|
-
/>
|
|
320
|
-
|
|
321
|
-
${hasClearIcon ? html`
|
|
322
|
-
<button
|
|
323
|
-
part="clear-button"
|
|
324
|
-
class=${classMap({
|
|
325
|
-
input__clear: true,
|
|
326
|
-
"input__clear--visible": isClearIconVisible
|
|
327
|
-
})}
|
|
328
|
-
type="button"
|
|
329
|
-
aria-label=${this.localize.term("clearEntry")}
|
|
330
|
-
@click=${this.handleClearClick}
|
|
331
|
-
tabindex="-1"
|
|
332
|
-
>
|
|
333
|
-
<slot name="clear-icon">
|
|
334
|
-
<syn-icon name="x-circle-fill" library="system"></syn-icon>
|
|
335
|
-
</slot>
|
|
336
|
-
</button>
|
|
337
|
-
` : ""}
|
|
338
|
-
${this.passwordToggle && !this.disabled ? html`
|
|
339
|
-
<button
|
|
340
|
-
part="password-toggle-button"
|
|
341
|
-
class="input__password-toggle"
|
|
342
|
-
type="button"
|
|
343
|
-
aria-label=${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}
|
|
344
|
-
@click=${this.handlePasswordToggle}
|
|
345
|
-
tabindex="-1"
|
|
346
|
-
>
|
|
347
|
-
${this.passwordVisible ? html`
|
|
348
|
-
<slot name="show-password-icon">
|
|
349
|
-
<syn-icon name="eye-slash" library="system"></syn-icon>
|
|
350
|
-
</slot>
|
|
351
|
-
` : html`
|
|
352
|
-
<slot name="hide-password-icon">
|
|
353
|
-
<syn-icon name="eye" library="system"></syn-icon>
|
|
354
|
-
</slot>
|
|
355
|
-
`}
|
|
356
|
-
</button>
|
|
357
|
-
` : ""}
|
|
358
|
-
|
|
359
|
-
<span part="suffix" class="input__suffix">
|
|
360
|
-
<slot name="suffix"></slot>
|
|
361
|
-
</span>
|
|
362
|
-
</div>
|
|
363
|
-
</div>
|
|
364
|
-
|
|
365
|
-
<div
|
|
366
|
-
part="form-control-help-text"
|
|
367
|
-
id="help-text"
|
|
368
|
-
class="form-control__help-text"
|
|
369
|
-
aria-hidden=${hasHelpText ? "false" : "true"}
|
|
370
|
-
>
|
|
371
|
-
<slot name="help-text">${this.helpText}</slot>
|
|
372
|
-
</div>
|
|
373
|
-
</div>
|
|
374
|
-
`;
|
|
375
|
-
}
|
|
376
|
-
};
|
|
377
|
-
SynInput.styles = input_styles_default;
|
|
378
|
-
SynInput.dependencies = { "syn-icon": SynIcon };
|
|
379
|
-
__decorateClass([
|
|
380
|
-
query(".input__control")
|
|
381
|
-
], SynInput.prototype, "input", 2);
|
|
382
|
-
__decorateClass([
|
|
383
|
-
state()
|
|
384
|
-
], SynInput.prototype, "hasFocus", 2);
|
|
385
|
-
__decorateClass([
|
|
386
|
-
property()
|
|
387
|
-
], SynInput.prototype, "title", 2);
|
|
388
|
-
__decorateClass([
|
|
389
|
-
property({ reflect: true })
|
|
390
|
-
], SynInput.prototype, "type", 2);
|
|
391
|
-
__decorateClass([
|
|
392
|
-
property()
|
|
393
|
-
], SynInput.prototype, "name", 2);
|
|
394
|
-
__decorateClass([
|
|
395
|
-
property()
|
|
396
|
-
], SynInput.prototype, "value", 2);
|
|
397
|
-
__decorateClass([
|
|
398
|
-
defaultValue()
|
|
399
|
-
], SynInput.prototype, "defaultValue", 2);
|
|
400
|
-
__decorateClass([
|
|
401
|
-
property({ reflect: true })
|
|
402
|
-
], SynInput.prototype, "size", 2);
|
|
403
|
-
__decorateClass([
|
|
404
|
-
property({ type: Boolean, reflect: true })
|
|
405
|
-
], SynInput.prototype, "filled", 2);
|
|
406
|
-
__decorateClass([
|
|
407
|
-
property({ type: Boolean, reflect: true })
|
|
408
|
-
], SynInput.prototype, "pill", 2);
|
|
409
|
-
__decorateClass([
|
|
410
|
-
property()
|
|
411
|
-
], SynInput.prototype, "label", 2);
|
|
412
|
-
__decorateClass([
|
|
413
|
-
property({ attribute: "help-text" })
|
|
414
|
-
], SynInput.prototype, "helpText", 2);
|
|
415
|
-
__decorateClass([
|
|
416
|
-
property({ type: Boolean })
|
|
417
|
-
], SynInput.prototype, "clearable", 2);
|
|
418
|
-
__decorateClass([
|
|
419
|
-
property({ type: Boolean, reflect: true })
|
|
420
|
-
], SynInput.prototype, "disabled", 2);
|
|
421
|
-
__decorateClass([
|
|
422
|
-
property()
|
|
423
|
-
], SynInput.prototype, "placeholder", 2);
|
|
424
|
-
__decorateClass([
|
|
425
|
-
property({ type: Boolean, reflect: true })
|
|
426
|
-
], SynInput.prototype, "readonly", 2);
|
|
427
|
-
__decorateClass([
|
|
428
|
-
property({ attribute: "password-toggle", type: Boolean })
|
|
429
|
-
], SynInput.prototype, "passwordToggle", 2);
|
|
430
|
-
__decorateClass([
|
|
431
|
-
property({ attribute: "password-visible", type: Boolean })
|
|
432
|
-
], SynInput.prototype, "passwordVisible", 2);
|
|
433
|
-
__decorateClass([
|
|
434
|
-
property({ attribute: "no-spin-buttons", type: Boolean })
|
|
435
|
-
], SynInput.prototype, "noSpinButtons", 2);
|
|
436
|
-
__decorateClass([
|
|
437
|
-
property({ reflect: true })
|
|
438
|
-
], SynInput.prototype, "form", 2);
|
|
439
|
-
__decorateClass([
|
|
440
|
-
property({ type: Boolean, reflect: true })
|
|
441
|
-
], SynInput.prototype, "required", 2);
|
|
442
|
-
__decorateClass([
|
|
443
|
-
property()
|
|
444
|
-
], SynInput.prototype, "pattern", 2);
|
|
445
|
-
__decorateClass([
|
|
446
|
-
property({ type: Number })
|
|
447
|
-
], SynInput.prototype, "minlength", 2);
|
|
448
|
-
__decorateClass([
|
|
449
|
-
property({ type: Number })
|
|
450
|
-
], SynInput.prototype, "maxlength", 2);
|
|
451
|
-
__decorateClass([
|
|
452
|
-
property()
|
|
453
|
-
], SynInput.prototype, "min", 2);
|
|
454
|
-
__decorateClass([
|
|
455
|
-
property()
|
|
456
|
-
], SynInput.prototype, "max", 2);
|
|
457
|
-
__decorateClass([
|
|
458
|
-
property()
|
|
459
|
-
], SynInput.prototype, "step", 2);
|
|
460
|
-
__decorateClass([
|
|
461
|
-
property()
|
|
462
|
-
], SynInput.prototype, "autocapitalize", 2);
|
|
463
|
-
__decorateClass([
|
|
464
|
-
property()
|
|
465
|
-
], SynInput.prototype, "autocorrect", 2);
|
|
466
|
-
__decorateClass([
|
|
467
|
-
property()
|
|
468
|
-
], SynInput.prototype, "autocomplete", 2);
|
|
469
|
-
__decorateClass([
|
|
470
|
-
property({ type: Boolean })
|
|
471
|
-
], SynInput.prototype, "autofocus", 2);
|
|
472
|
-
__decorateClass([
|
|
473
|
-
property()
|
|
474
|
-
], SynInput.prototype, "enterkeyhint", 2);
|
|
475
|
-
__decorateClass([
|
|
476
|
-
property({
|
|
477
|
-
type: Boolean,
|
|
478
|
-
converter: {
|
|
479
|
-
// Allow "true|false" attribute values but keep the property boolean
|
|
480
|
-
fromAttribute: (value) => !value || value === "false" ? false : true,
|
|
481
|
-
toAttribute: (value) => value ? "true" : "false"
|
|
482
|
-
}
|
|
483
|
-
})
|
|
484
|
-
], SynInput.prototype, "spellcheck", 2);
|
|
485
|
-
__decorateClass([
|
|
486
|
-
property()
|
|
487
|
-
], SynInput.prototype, "inputmode", 2);
|
|
488
|
-
__decorateClass([
|
|
489
|
-
watch("disabled", { waitUntilFirstUpdate: true })
|
|
490
|
-
], SynInput.prototype, "handleDisabledChange", 1);
|
|
491
|
-
__decorateClass([
|
|
492
|
-
watch("step", { waitUntilFirstUpdate: true })
|
|
493
|
-
], SynInput.prototype, "handleStepChange", 1);
|
|
494
|
-
__decorateClass([
|
|
495
|
-
watch("value", { waitUntilFirstUpdate: true })
|
|
496
|
-
], SynInput.prototype, "handleValueChange", 1);
|
|
497
|
-
|
|
498
|
-
export {
|
|
499
|
-
SynInput
|
|
500
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
spinner_styles_default
|
|
3
|
-
} from "./chunk.QPNUJNT5.js";
|
|
4
|
-
import {
|
|
5
|
-
LocalizeController
|
|
6
|
-
} from "./chunk.2A3352EO.js";
|
|
7
|
-
import {
|
|
8
|
-
SynergyElement
|
|
9
|
-
} from "./chunk.HQUF2ZAX.js";
|
|
10
|
-
|
|
11
|
-
// src/components/spinner/spinner.component.ts
|
|
12
|
-
import { html } from "lit";
|
|
13
|
-
var SynSpinner = class extends SynergyElement {
|
|
14
|
-
constructor() {
|
|
15
|
-
super(...arguments);
|
|
16
|
-
this.localize = new LocalizeController(this);
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return html`
|
|
20
|
-
<svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
|
|
21
|
-
<circle class="spinner__track"></circle>
|
|
22
|
-
<circle class="spinner__indicator"></circle>
|
|
23
|
-
</svg>
|
|
24
|
-
`;
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
SynSpinner.styles = spinner_styles_default;
|
|
28
|
-
|
|
29
|
-
export {
|
|
30
|
-
SynSpinner
|
|
31
|
-
};
|