aeico-components 0.1.5 → 0.1.7
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/LICENSE +21 -0
- package/README.md +0 -0
- package/dist/chunks/action-button.cjs +296 -0
- package/dist/chunks/action-button.cjs.map +1 -0
- package/dist/chunks/action-button.js +297 -0
- package/dist/chunks/action-button.js.map +1 -0
- package/dist/chunks/alert.cjs +26 -32
- package/dist/chunks/alert.cjs.map +1 -1
- package/dist/chunks/alert.js +27 -33
- package/dist/chunks/alert.js.map +1 -1
- package/dist/chunks/badge.cjs +2 -2
- package/dist/chunks/badge.cjs.map +1 -1
- package/dist/chunks/badge.js +3 -3
- package/dist/chunks/badge.js.map +1 -1
- package/dist/chunks/breadcrumb-item.cjs +9 -9
- package/dist/chunks/breadcrumb-item.cjs.map +1 -1
- package/dist/chunks/breadcrumb-item.js +10 -10
- package/dist/chunks/breadcrumb-item.js.map +1 -1
- package/dist/chunks/button-group.cjs +1 -1
- package/dist/chunks/button-group.cjs.map +1 -1
- package/dist/chunks/button-group.js +2 -2
- package/dist/chunks/button-group.js.map +1 -1
- package/dist/chunks/button.cjs +40 -51
- package/dist/chunks/button.cjs.map +1 -1
- package/dist/chunks/button.js +41 -52
- package/dist/chunks/button.js.map +1 -1
- package/dist/chunks/card.cjs +2 -2
- package/dist/chunks/card.cjs.map +1 -1
- package/dist/chunks/card.js +3 -3
- package/dist/chunks/card.js.map +1 -1
- package/dist/chunks/checkbox.cjs +18 -5
- package/dist/chunks/checkbox.cjs.map +1 -1
- package/dist/chunks/checkbox.js +18 -5
- package/dist/chunks/checkbox.js.map +1 -1
- package/dist/chunks/color.cjs +1 -1
- package/dist/chunks/color.js +1 -1
- package/dist/chunks/copy-button.cjs +171 -0
- package/dist/chunks/copy-button.cjs.map +1 -0
- package/dist/chunks/copy-button.js +172 -0
- package/dist/chunks/copy-button.js.map +1 -0
- package/dist/chunks/detail-group.cjs +65 -0
- package/dist/chunks/detail-group.cjs.map +1 -0
- package/dist/chunks/detail-group.js +66 -0
- package/dist/chunks/detail-group.js.map +1 -0
- package/dist/chunks/detail.cjs +7 -4
- package/dist/chunks/detail.cjs.map +1 -1
- package/dist/chunks/detail.js +8 -5
- package/dist/chunks/detail.js.map +1 -1
- package/dist/chunks/dialog.cjs +2 -2
- package/dist/chunks/dialog.cjs.map +1 -1
- package/dist/chunks/dialog.js +3 -3
- package/dist/chunks/dialog.js.map +1 -1
- package/dist/chunks/divider.cjs +2 -2
- package/dist/chunks/divider.cjs.map +1 -1
- package/dist/chunks/divider.js +3 -3
- package/dist/chunks/divider.js.map +1 -1
- package/dist/chunks/drawer.cjs +180 -0
- package/dist/chunks/drawer.cjs.map +1 -0
- package/dist/chunks/drawer.js +181 -0
- package/dist/chunks/drawer.js.map +1 -0
- package/dist/chunks/dropdown-button.cjs +10 -11
- package/dist/chunks/dropdown-button.cjs.map +1 -1
- package/dist/chunks/dropdown-button.js +14 -15
- package/dist/chunks/dropdown-button.js.map +1 -1
- package/dist/chunks/icon.cjs +57 -11
- package/dist/chunks/icon.cjs.map +1 -1
- package/dist/chunks/icon.js +58 -12
- package/dist/chunks/icon.js.map +1 -1
- package/dist/chunks/menu.cjs +396 -0
- package/dist/chunks/menu.cjs.map +1 -0
- package/dist/chunks/menu.js +397 -0
- package/dist/chunks/menu.js.map +1 -0
- package/dist/chunks/navbar.cjs +2 -2
- package/dist/chunks/navbar.cjs.map +1 -1
- package/dist/chunks/navbar.js +3 -3
- package/dist/chunks/navbar.js.map +1 -1
- package/dist/chunks/number-input.cjs +110 -0
- package/dist/chunks/number-input.cjs.map +1 -0
- package/dist/chunks/number-input.js +111 -0
- package/dist/chunks/number-input.js.map +1 -0
- package/dist/chunks/pagination.cjs +475 -0
- package/dist/chunks/pagination.cjs.map +1 -0
- package/dist/chunks/pagination.js +476 -0
- package/dist/chunks/pagination.js.map +1 -0
- package/dist/chunks/progress-bar.cjs +101 -0
- package/dist/chunks/progress-bar.cjs.map +1 -0
- package/dist/chunks/progress-bar.js +102 -0
- package/dist/chunks/progress-bar.js.map +1 -0
- package/dist/chunks/radio.cjs +11 -7
- package/dist/chunks/radio.cjs.map +1 -1
- package/dist/chunks/radio.js +11 -7
- package/dist/chunks/radio.js.map +1 -1
- package/dist/chunks/select.cjs +97 -66
- package/dist/chunks/select.cjs.map +1 -1
- package/dist/chunks/select.js +97 -66
- package/dist/chunks/select.js.map +1 -1
- package/dist/chunks/size.cjs +1 -1
- package/dist/chunks/size.js +1 -1
- package/dist/chunks/slider.cjs +35 -75
- package/dist/chunks/slider.cjs.map +1 -1
- package/dist/chunks/slider.js +35 -75
- package/dist/chunks/slider.js.map +1 -1
- package/dist/chunks/spinner.cjs +102 -0
- package/dist/chunks/spinner.cjs.map +1 -0
- package/dist/chunks/spinner.js +103 -0
- package/dist/chunks/spinner.js.map +1 -0
- package/dist/chunks/switch.cjs +110 -16
- package/dist/chunks/switch.cjs.map +1 -1
- package/dist/chunks/switch.js +111 -17
- package/dist/chunks/switch.js.map +1 -1
- package/dist/chunks/tab-panel.cjs +14 -5
- package/dist/chunks/tab-panel.cjs.map +1 -1
- package/dist/chunks/tab-panel.js +15 -6
- package/dist/chunks/tab-panel.js.map +1 -1
- package/dist/chunks/tag.cjs +2 -2
- package/dist/chunks/tag.cjs.map +1 -1
- package/dist/chunks/tag.js +3 -3
- package/dist/chunks/tag.js.map +1 -1
- package/dist/chunks/text-input.cjs +11 -16
- package/dist/chunks/text-input.cjs.map +1 -1
- package/dist/chunks/text-input.js +11 -16
- package/dist/chunks/text-input.js.map +1 -1
- package/dist/chunks/textarea.cjs +137 -0
- package/dist/chunks/textarea.cjs.map +1 -0
- package/dist/chunks/textarea.js +138 -0
- package/dist/chunks/textarea.js.map +1 -0
- package/dist/chunks/tooltip.cjs +292 -0
- package/dist/chunks/tooltip.cjs.map +1 -0
- package/dist/chunks/tooltip.js +293 -0
- package/dist/chunks/tooltip.js.map +1 -0
- package/dist/chunks/tree.cjs +468 -0
- package/dist/chunks/tree.cjs.map +1 -0
- package/dist/chunks/tree.js +469 -0
- package/dist/chunks/tree.js.map +1 -0
- package/dist/chunks/variables.cjs +273 -249
- package/dist/chunks/variables.cjs.map +1 -1
- package/dist/chunks/variables.js +273 -249
- package/dist/chunks/variables.js.map +1 -1
- package/dist/copy-button.cjs +6 -0
- package/dist/copy-button.cjs.map +1 -0
- package/dist/copy-button.js +6 -0
- package/dist/copy-button.js.map +1 -0
- package/dist/detail-group.cjs +6 -0
- package/dist/detail-group.cjs.map +1 -0
- package/dist/detail-group.js +6 -0
- package/dist/detail-group.js.map +1 -0
- package/dist/drawer.cjs +6 -0
- package/dist/drawer.cjs.map +1 -0
- package/dist/drawer.js +6 -0
- package/dist/drawer.js.map +1 -0
- package/dist/dropdown.js +4 -4
- package/dist/index.cjs +24 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +41 -116
- package/dist/index.js.map +1 -1
- package/dist/menu.cjs +6 -0
- package/dist/menu.cjs.map +1 -0
- package/dist/menu.js +6 -0
- package/dist/menu.js.map +1 -0
- package/dist/number-input.cjs +6 -0
- package/dist/number-input.cjs.map +1 -0
- package/dist/number-input.js +6 -0
- package/dist/number-input.js.map +1 -0
- package/dist/pagination.cjs +6 -0
- package/dist/pagination.cjs.map +1 -0
- package/dist/pagination.js +6 -0
- package/dist/pagination.js.map +1 -0
- package/dist/progress-bar.cjs +6 -0
- package/dist/progress-bar.cjs.map +1 -0
- package/dist/progress-bar.js +6 -0
- package/dist/progress-bar.js.map +1 -0
- package/dist/select.cjs +2 -2
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +3 -3
- package/dist/select.js.map +1 -1
- package/dist/spinner.cjs +6 -0
- package/dist/spinner.cjs.map +1 -0
- package/dist/spinner.js +6 -0
- package/dist/spinner.js.map +1 -0
- package/dist/textarea.cjs +5 -0
- package/dist/textarea.cjs.map +1 -0
- package/dist/textarea.js +5 -0
- package/dist/textarea.js.map +1 -0
- package/dist/tooltip.cjs +6 -0
- package/dist/tooltip.cjs.map +1 -0
- package/dist/tooltip.js +6 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tree.cjs +6 -0
- package/dist/tree.cjs.map +1 -0
- package/dist/tree.js +6 -0
- package/dist/tree.js.map +1 -0
- package/dist/types/aeico-field.d.ts +52 -0
- package/dist/types/alert/alert.d.ts +1 -0
- package/dist/types/card/defines.d.ts +1 -1
- package/dist/types/copy-button/copy-button.d.ts +32 -0
- package/dist/types/copy-button/defines.d.ts +1 -0
- package/dist/types/copy-button/index.d.ts +3 -0
- package/dist/types/detail/defines.d.ts +2 -1
- package/dist/types/detail/detail.d.ts +3 -1
- package/dist/types/detail/index.d.ts +1 -1
- package/dist/types/detail-group/detail-group.d.ts +39 -0
- package/dist/types/detail-group/index.d.ts +2 -0
- package/dist/types/drawer/defines.d.ts +1 -0
- package/dist/types/drawer/drawer.d.ts +31 -0
- package/dist/types/drawer/index.d.ts +3 -0
- package/dist/types/icon/built-in-icons.d.ts +1 -0
- package/dist/types/icon/defines.d.ts +5 -1
- package/dist/types/icon/icon.d.ts +1 -0
- package/dist/types/icon/index.d.ts +1 -1
- package/dist/types/icon/registry.d.ts +8 -0
- package/dist/types/index.d.ts +17 -0
- package/dist/types/menu/defines.d.ts +15 -0
- package/dist/types/menu/index.d.ts +5 -0
- package/dist/types/menu/menu-item.d.ts +63 -0
- package/dist/types/menu/menu.d.ts +34 -0
- package/dist/types/number-input/index.d.ts +2 -0
- package/dist/types/number-input/number-input.d.ts +35 -0
- package/dist/types/pagination/defines.d.ts +2 -0
- package/dist/types/pagination/index.d.ts +3 -0
- package/dist/types/pagination/pagination.d.ts +77 -0
- package/dist/types/select/select.d.ts +2 -2
- package/dist/types/spinner/defines.d.ts +3 -0
- package/dist/types/spinner/index.d.ts +3 -0
- package/dist/types/spinner/spinner.d.ts +35 -0
- package/dist/types/switch/defines.d.ts +1 -0
- package/dist/types/switch/switch.d.ts +8 -4
- package/dist/types/tabs/defines.d.ts +1 -0
- package/dist/types/tabs/tabs.d.ts +3 -0
- package/dist/types/text-input/text-input.d.ts +0 -4
- package/dist/types/textarea/index.d.ts +1 -0
- package/dist/types/textarea/textarea.d.ts +26 -0
- package/dist/types/tooltip/defines.d.ts +2 -0
- package/dist/types/tooltip/index.d.ts +4 -0
- package/dist/types/tooltip/tooltip.d.ts +48 -0
- package/dist/types/tree/defines.d.ts +23 -0
- package/dist/types/tree/index.d.ts +5 -0
- package/dist/types/tree/tree-item.d.ts +54 -0
- package/dist/types/tree/tree.d.ts +64 -0
- package/package.json +5 -5
- package/src/aeico-field.ts +142 -7
- package/src/alert/alert.ts +3 -2
- package/src/card/defines.ts +1 -1
- package/src/checkbox/checkbox.ts +17 -2
- package/src/copy-button/copy-button.ts +150 -0
- package/src/copy-button/defines.ts +5 -0
- package/src/copy-button/index.ts +3 -0
- package/src/detail/defines.ts +2 -1
- package/src/detail/detail.ts +5 -1
- package/src/detail/index.ts +1 -1
- package/src/detail-group/detail-group.ts +104 -0
- package/src/detail-group/index.ts +2 -0
- package/src/drawer/defines.ts +1 -0
- package/src/drawer/drawer.ts +157 -0
- package/src/drawer/index.ts +3 -0
- package/src/icon/built-in-icons.ts +21 -0
- package/src/icon/defines.ts +6 -1
- package/src/icon/icon.ts +29 -10
- package/src/icon/index.ts +1 -1
- package/src/icon/registry.ts +23 -1
- package/src/index.ts +30 -0
- package/src/menu/defines.ts +17 -0
- package/src/menu/index.ts +5 -0
- package/src/menu/menu-item.ts +315 -0
- package/src/menu/menu.ts +81 -0
- package/src/number-input/index.ts +2 -0
- package/src/number-input/number-input.ts +137 -0
- package/src/pagination/defines.ts +2 -0
- package/src/pagination/index.ts +3 -0
- package/src/pagination/pagination.ts +310 -0
- package/src/radio-group/radio-group.ts +11 -4
- package/src/select/select.ts +111 -70
- package/src/slider/slider.ts +9 -2
- package/src/spinner/defines.ts +12 -0
- package/src/spinner/index.ts +3 -0
- package/src/spinner/spinner.ts +81 -0
- package/src/styles/color.css +91 -91
- package/src/styles/components/action-button.css +37 -0
- package/src/styles/components/alert.css +22 -28
- package/src/styles/components/badge.css +13 -20
- package/src/styles/components/breadcrumb-item.css +7 -7
- package/src/styles/components/button.css +39 -50
- package/src/styles/components/card.css +45 -30
- package/src/styles/components/checkbox.css +9 -36
- package/src/styles/components/copy-button.css +108 -0
- package/src/styles/components/detail-group.css +10 -0
- package/src/styles/components/detail.css +56 -35
- package/src/styles/components/dialog.css +11 -11
- package/src/styles/components/divider.css +3 -3
- package/src/styles/components/drawer.css +152 -0
- package/src/styles/components/dropdown-item.css +7 -8
- package/src/styles/components/dropdown.css +3 -4
- package/src/styles/components/field-label.css +120 -0
- package/src/styles/components/icon-button.css +25 -36
- package/src/styles/components/icon.css +1 -1
- package/src/styles/components/menu-item.css +167 -0
- package/src/styles/components/menu.css +17 -0
- package/src/styles/components/navbar.css +16 -16
- package/src/styles/components/number-input.css +158 -0
- package/src/styles/components/pagination.css +205 -0
- package/src/styles/components/progress-bar.css +2 -3
- package/src/styles/components/radio-group.css +69 -106
- package/src/styles/components/select-option.css +5 -5
- package/src/styles/components/select.css +30 -69
- package/src/styles/components/slider.css +26 -71
- package/src/styles/components/spinner.css +78 -0
- package/src/styles/components/switch.css +64 -27
- package/src/styles/components/tab-panel.css +1 -1
- package/src/styles/components/tab.css +4 -5
- package/src/styles/components/tabs.css +49 -1
- package/src/styles/components/tag.css +14 -21
- package/src/styles/components/text-input.css +17 -64
- package/src/styles/components/textarea.css +66 -0
- package/src/styles/components/tooltip.css +102 -0
- package/src/styles/components/tree-item.css +152 -0
- package/src/styles/components/tree.css +10 -0
- package/src/styles/layout.css +457 -25
- package/src/styles/radius.css +10 -0
- package/src/styles/size.css +7 -7
- package/src/styles/variables.css +271 -247
- package/src/switch/defines.ts +1 -0
- package/src/switch/switch.ts +61 -12
- package/src/tabs/defines.ts +1 -0
- package/src/tabs/tabs.ts +12 -0
- package/src/text-input/text-input.ts +10 -15
- package/src/textarea/index.ts +1 -0
- package/src/textarea/textarea.ts +107 -0
- package/src/tooltip/defines.ts +11 -0
- package/src/tooltip/index.ts +4 -0
- package/src/tooltip/tooltip.ts +183 -0
- package/src/tree/defines.ts +26 -0
- package/src/tree/index.ts +5 -0
- package/src/tree/tree-item.ts +258 -0
- package/src/tree/tree.ts +237 -0
- package/dist/chunks/aeico-field.cjs +0 -179
- package/dist/chunks/aeico-field.cjs.map +0 -1
- package/dist/chunks/aeico-field.js +0 -180
- package/dist/chunks/aeico-field.js.map +0 -1
package/dist/chunks/slider.js
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import { A as AeicoField } from "./
|
|
1
|
+
import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
|
|
2
2
|
import { prop, html, tags } from "aeico";
|
|
3
|
-
import {
|
|
3
|
+
import { v as variables } from "./variables.js";
|
|
4
4
|
import { s as sizeCSS } from "./size.js";
|
|
5
5
|
import { c as colorCSS } from "./color.js";
|
|
6
6
|
const style = `:host {
|
|
7
7
|
display: block;
|
|
8
8
|
flex: 1;
|
|
9
9
|
min-width: 0;
|
|
10
|
-
font-size: var(--size-base);
|
|
11
|
-
|
|
12
|
-
/* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
|
|
13
|
-
--color-solid: var(--color-primary);
|
|
10
|
+
font-size: var(--ae-size-base);
|
|
14
11
|
}
|
|
15
12
|
|
|
16
13
|
.range-container {
|
|
@@ -33,8 +30,8 @@ input[type="range"] {
|
|
|
33
30
|
appearance: none;
|
|
34
31
|
width: 100%;
|
|
35
32
|
height: 0.333em;
|
|
36
|
-
border-radius:
|
|
37
|
-
background: var(--border-subtle);
|
|
33
|
+
border-radius: var(--ae-radius-xs);
|
|
34
|
+
background: var(--ae-border-subtle);
|
|
38
35
|
outline: none;
|
|
39
36
|
cursor: pointer;
|
|
40
37
|
margin: 0;
|
|
@@ -51,8 +48,8 @@ input[type="range"]::-webkit-slider-thumb {
|
|
|
51
48
|
appearance: none;
|
|
52
49
|
width: 1.167em;
|
|
53
50
|
height: 1.167em;
|
|
54
|
-
border-radius:
|
|
55
|
-
background: var(--color-solid);
|
|
51
|
+
border-radius: var(--ae-radius-circle);
|
|
52
|
+
background: var(--ae-color-solid);
|
|
56
53
|
cursor: pointer;
|
|
57
54
|
transition: background 0.12s, transform 0.12s;
|
|
58
55
|
}
|
|
@@ -60,21 +57,21 @@ input[type="range"]::-webkit-slider-thumb {
|
|
|
60
57
|
.input-range::-webkit-slider-thumb:hover,
|
|
61
58
|
.slider-input::-webkit-slider-thumb:hover,
|
|
62
59
|
input[type="range"]:hover::-webkit-slider-thumb {
|
|
63
|
-
background: var(--color-solid-hover);
|
|
60
|
+
background: var(--ae-color-solid-hover);
|
|
64
61
|
transform: scale(1.1);
|
|
65
62
|
}
|
|
66
63
|
|
|
67
64
|
.input-range::-webkit-slider-thumb:active,
|
|
68
65
|
.slider-input::-webkit-slider-thumb:active,
|
|
69
66
|
input[type="range"]:active::-webkit-slider-thumb {
|
|
70
|
-
background: var(--color-solid-hover);
|
|
67
|
+
background: var(--ae-color-solid-hover);
|
|
71
68
|
transform: scale(1.2);
|
|
72
69
|
}
|
|
73
70
|
|
|
74
71
|
.input-range:focus::-webkit-slider-thumb,
|
|
75
72
|
.slider-input:focus::-webkit-slider-thumb,
|
|
76
73
|
input[type="range"]:focus::-webkit-slider-thumb {
|
|
77
|
-
background: var(--color-solid);
|
|
74
|
+
background: var(--ae-color-solid);
|
|
78
75
|
outline: none;
|
|
79
76
|
box-shadow: none;
|
|
80
77
|
}
|
|
@@ -82,7 +79,7 @@ input[type="range"]:focus::-webkit-slider-thumb {
|
|
|
82
79
|
.input-range:focus:hover::-webkit-slider-thumb,
|
|
83
80
|
.slider-input:focus:hover::-webkit-slider-thumb,
|
|
84
81
|
input[type="range"]:focus:hover::-webkit-slider-thumb {
|
|
85
|
-
background: var(--color-solid-hover);
|
|
82
|
+
background: var(--ae-color-solid-hover);
|
|
86
83
|
outline: none;
|
|
87
84
|
box-shadow: none;
|
|
88
85
|
}
|
|
@@ -90,7 +87,7 @@ input[type="range"]:focus:hover::-webkit-slider-thumb {
|
|
|
90
87
|
.input-range:focus:active::-webkit-slider-thumb,
|
|
91
88
|
.slider-input:focus:active::-webkit-slider-thumb,
|
|
92
89
|
input[type="range"]:focus:active::-webkit-slider-thumb {
|
|
93
|
-
background: var(--color-solid-hover);
|
|
90
|
+
background: var(--ae-color-solid-hover);
|
|
94
91
|
outline: none;
|
|
95
92
|
box-shadow: none;
|
|
96
93
|
}
|
|
@@ -101,8 +98,8 @@ input[type="range"]::-moz-range-thumb {
|
|
|
101
98
|
width: 1.167em;
|
|
102
99
|
height: 1.167em;
|
|
103
100
|
border: none;
|
|
104
|
-
border-radius:
|
|
105
|
-
background: var(--color-solid);
|
|
101
|
+
border-radius: var(--ae-radius-circle);
|
|
102
|
+
background: var(--ae-color-solid);
|
|
106
103
|
cursor: pointer;
|
|
107
104
|
transition: background 0.12s, transform 0.12s;
|
|
108
105
|
}
|
|
@@ -110,21 +107,21 @@ input[type="range"]::-moz-range-thumb {
|
|
|
110
107
|
.input-range::-moz-range-thumb:hover,
|
|
111
108
|
.slider-input::-moz-range-thumb:hover,
|
|
112
109
|
input[type="range"]:hover::-moz-range-thumb {
|
|
113
|
-
background: var(--color-solid-hover);
|
|
110
|
+
background: var(--ae-color-solid-hover);
|
|
114
111
|
transform: scale(1.1);
|
|
115
112
|
}
|
|
116
113
|
|
|
117
114
|
.input-range::-moz-range-thumb:active,
|
|
118
115
|
.slider-input::-moz-range-thumb:active,
|
|
119
116
|
input[type="range"]:active::-moz-range-thumb {
|
|
120
|
-
background: var(--color-solid-hover);
|
|
117
|
+
background: var(--ae-color-solid-hover);
|
|
121
118
|
transform: scale(1.2);
|
|
122
119
|
}
|
|
123
120
|
|
|
124
121
|
.input-range:focus::-moz-range-thumb,
|
|
125
122
|
.slider-input:focus::-moz-range-thumb,
|
|
126
123
|
input[type="range"]:focus::-moz-range-thumb {
|
|
127
|
-
background: var(--color-solid);
|
|
124
|
+
background: var(--ae-color-solid);
|
|
128
125
|
outline: none;
|
|
129
126
|
box-shadow: none;
|
|
130
127
|
}
|
|
@@ -132,7 +129,7 @@ input[type="range"]:focus::-moz-range-thumb {
|
|
|
132
129
|
.input-range:focus:hover::-moz-range-thumb,
|
|
133
130
|
.slider-input:focus:hover::-moz-range-thumb,
|
|
134
131
|
input[type="range"]:focus:hover::-moz-range-thumb {
|
|
135
|
-
background: var(--color-solid-hover);
|
|
132
|
+
background: var(--ae-color-solid-hover);
|
|
136
133
|
outline: none;
|
|
137
134
|
box-shadow: none;
|
|
138
135
|
}
|
|
@@ -140,7 +137,7 @@ input[type="range"]:focus:hover::-moz-range-thumb {
|
|
|
140
137
|
.input-range:focus:active::-moz-range-thumb,
|
|
141
138
|
.slider-input:focus:active::-moz-range-thumb,
|
|
142
139
|
input[type="range"]:focus:active::-moz-range-thumb {
|
|
143
|
-
background: var(--color-solid-hover);
|
|
140
|
+
background: var(--ae-color-solid-hover);
|
|
144
141
|
outline: none;
|
|
145
142
|
box-shadow: none;
|
|
146
143
|
}
|
|
@@ -168,55 +165,13 @@ input[type="range"]:disabled::-moz-range-thumb {
|
|
|
168
165
|
min-width: 14px;
|
|
169
166
|
text-align: center;
|
|
170
167
|
font-size: 12px;
|
|
171
|
-
color: var(--color-text-muted);
|
|
168
|
+
color: var(--ae-color-text-muted);
|
|
172
169
|
font-weight: 500;
|
|
173
170
|
font-variant-numeric: tabular-nums;
|
|
174
171
|
pointer-events: none;
|
|
175
172
|
user-select: none;
|
|
176
173
|
}
|
|
177
174
|
|
|
178
|
-
.reset-btn {
|
|
179
|
-
width: 1.333em;
|
|
180
|
-
height: 1.333em;
|
|
181
|
-
border: none;
|
|
182
|
-
border-radius: var(--reset-btn-border-radius);
|
|
183
|
-
cursor: pointer;
|
|
184
|
-
display: flex;
|
|
185
|
-
align-items: center;
|
|
186
|
-
justify-content: center;
|
|
187
|
-
background: var(--reset-btn-bg);
|
|
188
|
-
color: var(--reset-btn-color);
|
|
189
|
-
transition: var(--reset-btn-transition);
|
|
190
|
-
flex-shrink: 0;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
.reset-btn:hover {
|
|
194
|
-
background: var(--reset-btn-bg-hover);
|
|
195
|
-
color: var(--reset-btn-color-hover);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.clear-btn {
|
|
199
|
-
width: 1.333em;
|
|
200
|
-
height: 1.333em;
|
|
201
|
-
border: none;
|
|
202
|
-
border-radius: var(--clear-btn-border-radius);
|
|
203
|
-
cursor: pointer;
|
|
204
|
-
display: flex;
|
|
205
|
-
align-items: center;
|
|
206
|
-
justify-content: center;
|
|
207
|
-
background: var(--clear-btn-bg);
|
|
208
|
-
color: var(--clear-btn-color);
|
|
209
|
-
transition: var(--clear-btn-transition);
|
|
210
|
-
flex-shrink: 0;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.clear-btn:hover {
|
|
214
|
-
background: var(--clear-btn-bg-hover);
|
|
215
|
-
color: var(--clear-btn-color-hover);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
175
|
.input-range,
|
|
221
176
|
.slider-input,
|
|
222
177
|
input[type="range"] {
|
|
@@ -245,10 +200,10 @@ input[type="range"]::-moz-range-thumb {
|
|
|
245
200
|
width: 56px;
|
|
246
201
|
padding: 0 4px;
|
|
247
202
|
height: 22px;
|
|
248
|
-
border: 1px solid var(--border-subtle);
|
|
249
|
-
border-radius:
|
|
203
|
+
border: 1px solid var(--ae-border-subtle);
|
|
204
|
+
border-radius: var(--ae-radius-sm);
|
|
250
205
|
background: transparent;
|
|
251
|
-
color: var(--color-text);
|
|
206
|
+
color: var(--ae-color-text);
|
|
252
207
|
font-size: 12px;
|
|
253
208
|
text-align: center;
|
|
254
209
|
outline: none;
|
|
@@ -256,7 +211,7 @@ input[type="range"]::-moz-range-thumb {
|
|
|
256
211
|
}
|
|
257
212
|
|
|
258
213
|
.value-input:focus {
|
|
259
|
-
border-color: var(--color-solid);
|
|
214
|
+
border-color: var(--ae-color-solid);
|
|
260
215
|
}
|
|
261
216
|
|
|
262
217
|
.value-input:disabled {
|
|
@@ -269,8 +224,8 @@ input[type="range"]::-moz-range-thumb {
|
|
|
269
224
|
:host([tracked]) input[type="range"] {
|
|
270
225
|
background: linear-gradient(
|
|
271
226
|
to right,
|
|
272
|
-
var(--color-solid) var(--fill-pct, 0%),
|
|
273
|
-
var(--border-subtle) var(--fill-pct, 0%)
|
|
227
|
+
var(--ae-color-solid) var(--fill-pct, 0%),
|
|
228
|
+
var(--ae-border-subtle) var(--fill-pct, 0%)
|
|
274
229
|
);
|
|
275
230
|
}
|
|
276
231
|
|
|
@@ -314,13 +269,13 @@ input[type="range"]::-moz-range-thumb {
|
|
|
314
269
|
display: block;
|
|
315
270
|
width: 1px;
|
|
316
271
|
height: 4px;
|
|
317
|
-
background: var(--border-default, var(--border-subtle));
|
|
272
|
+
background: var(--ae-border-default, var(--ae-border-subtle));
|
|
318
273
|
border-radius: 1px;
|
|
319
274
|
}
|
|
320
275
|
|
|
321
276
|
.mark-label {
|
|
322
277
|
font-size: 10px;
|
|
323
|
-
color: var(--color-text-muted);
|
|
278
|
+
color: var(--ae-color-text-muted);
|
|
324
279
|
white-space: nowrap;
|
|
325
280
|
}
|
|
326
281
|
|
|
@@ -535,10 +490,13 @@ class Slider extends (_a = AeicoField, _options_dec = [prop({ type: Array })], _
|
|
|
535
490
|
const normalized = this._normalizeOptions();
|
|
536
491
|
const attrs = this._getRangeAttrs(normalized);
|
|
537
492
|
return html(({ div, input, span }) => {
|
|
538
|
-
|
|
493
|
+
const id = this.getFieldId();
|
|
494
|
+
this.renderLabel(id);
|
|
495
|
+
div({ className: "range-container field-body" }, () => {
|
|
539
496
|
div({ key: "range-wrapper", className: "range-wrapper" }, () => {
|
|
540
497
|
this.fieldElement = input({
|
|
541
498
|
key: "range",
|
|
499
|
+
id,
|
|
542
500
|
type: "range",
|
|
543
501
|
min: attrs.min,
|
|
544
502
|
max: attrs.max,
|
|
@@ -588,6 +546,8 @@ class Slider extends (_a = AeicoField, _options_dec = [prop({ type: Array })], _
|
|
|
588
546
|
}
|
|
589
547
|
});
|
|
590
548
|
if (this.value != null) this.writeValue(this.value);
|
|
549
|
+
this.renderHelperText();
|
|
550
|
+
this.renderError();
|
|
591
551
|
});
|
|
592
552
|
}
|
|
593
553
|
_onRangeInput() {
|
|
@@ -641,7 +601,7 @@ __decorateElement(_init, 4, "tracked", _tracked_dec, Slider, _tracked);
|
|
|
641
601
|
__decorateElement(_init, 4, "marks", _marks_dec, Slider, _marks);
|
|
642
602
|
__decoratorMetadata(_init, Slider);
|
|
643
603
|
__publicField(Slider, "tagName", "slider");
|
|
644
|
-
__publicField(Slider, "styles", [
|
|
604
|
+
__publicField(Slider, "styles", [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style]);
|
|
645
605
|
Slider.register();
|
|
646
606
|
export {
|
|
647
607
|
Slider as S
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.js","sources":["../../src/slider/slider.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { NormalizedOption, SliderMarks, SliderOption, SliderOptions } from './defines';\nimport style from '../styles/components/slider.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport { prop } from 'aeico';\n\nclass Slider extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n private _valueLabel: HTMLSpanElement | null = null;\n private _numberInput: HTMLInputElement | null = null;\n\n private _boundOnRangeInput: () => void;\n private _boundOnNumberInput: () => void;\n\n static tagName = 'slider';\n\n @prop({ type: Array })\n accessor options: SliderOptions = [];\n\n @prop({ type: Boolean })\n accessor percentage = false;\n\n @prop({ type: Number })\n accessor min = 0;\n\n @prop({ type: Number })\n accessor max = 100;\n\n @prop({ type: Number })\n accessor step = 1;\n\n @prop({ type: Boolean })\n accessor editable = false;\n\n @prop({ type: Boolean })\n accessor tracked = false;\n\n @prop({\n type: Array,\n // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]\n parser: (value: string | null) => {\n if (value === null) return undefined;\n if (value === '' || value === 'true') return true;\n if (value === 'false') return false;\n try {\n return JSON.parse(value);\n } catch {\n return true;\n }\n },\n })\n accessor marks: SliderMarks | undefined;\n\n protected static styles = [variables, sizeCSS, colorCSS, style];\n\n constructor() {\n super();\n this._boundOnRangeInput = this._onRangeInput.bind(this);\n this._boundOnNumberInput = this._onNumberInput.bind(this);\n }\n\n private _normalizeOptions(): NormalizedOption[] | null {\n if (!Array.isArray(this.options) || this.options.length === 0) return null;\n\n const opts = this.options.map((opt) =>\n this._isSliderOption(opt)\n ? { label: opt.label, value: String(opt.value) }\n : { label: String(opt), value: String(opt) },\n );\n\n // Sort by numeric value if all values are numeric; otherwise keep original order\n const allNumeric = opts.every((o) => o.value !== '' && !isNaN(Number(o.value)));\n\n if (allNumeric) {\n return [...opts]\n .sort((a, b) => Number(a.value) - Number(b.value))\n .map((o) => ({ ...o, rangeValue: Number(o.value) }));\n } else {\n return opts.map((o, i) => ({ ...o, rangeValue: i }));\n }\n }\n\n private _getRangeAttrs(normalized: NormalizedOption[] | null): {\n min: string;\n max: string;\n step: string;\n inOptionsMode: boolean;\n } {\n if (normalized && normalized.length >= 1) {\n const vals = normalized.map((o) => o.rangeValue);\n const min = Math.min(...vals);\n const max = Math.max(...vals);\n\n // Compute step from minimum gap between adjacent sorted values\n const sorted = [...vals].sort((a, b) => a - b);\n let minGap = Infinity;\n for (let i = 1; i < sorted.length; i++) {\n const d = sorted[i] - sorted[i - 1];\n if (d > 0 && d < minGap) minGap = d;\n }\n\n return {\n min: String(min),\n max: String(max),\n step: minGap === Infinity ? '1' : String(minGap),\n inOptionsMode: true,\n };\n }\n\n return {\n min: String(this.min),\n max: String(this.max),\n step: String(this.step),\n inOptionsMode: false,\n };\n }\n\n private _toRangeValue(value: string | undefined, normalized: NormalizedOption[] | null): string {\n if (value == null || value === '') return '';\n if (normalized) {\n const found = normalized.find((o) => o.value === value);\n\n return found !== undefined ? String(found.rangeValue) : '';\n }\n\n return value;\n }\n\n private _fromRangeValue(rv: string, normalized: NormalizedOption[] | null): string {\n if (normalized) {\n const n = Number(rv);\n\n return normalized.find((o) => o.rangeValue === n)?.value ?? normalized[0]?.value ?? rv;\n }\n return rv;\n }\n\n private _displayLabel(value: string | undefined, normalized: NormalizedOption[] | null): string {\n if (value == null || value === '') return '';\n const label = normalized ? (normalized.find((o) => o.value === value)?.label ?? value) : value;\n\n return this.percentage ? `${label}%` : label;\n }\n\n private _maxValueLabelWidth(\n normalized: NormalizedOption[] | null,\n attrs: { min: string; max: string },\n ): string {\n const candidates = normalized\n ? normalized.map((o) => this._displayLabel(o.value, normalized))\n : [this._displayLabel(attrs.min, null), this._displayLabel(attrs.max, null)];\n const maxLen = Math.max(...candidates.map((l) => l.length), 1);\n\n return `${maxLen}ch`;\n }\n\n private _updateTrackFill(): void {\n if (!this.tracked || !this.fieldElement) return;\n const min = Number(this.fieldElement.min);\n const max = Number(this.fieldElement.max);\n const val = Number(this.fieldElement.value);\n const range = max - min || 1;\n const pct = Math.max(0, Math.min(100, ((val - min) / range) * 100));\n this.style.setProperty('--fill-pct', `${pct}%`);\n }\n\n private _getMarksData(\n normalized: NormalizedOption[] | null,\n attrs: { min: string; max: string; inOptionsMode: boolean },\n ): Array<{ value: string; label: string; pct: number }> {\n const minVal = Number(attrs.min);\n const maxVal = Number(attrs.max);\n const range = maxVal - minVal || 1;\n\n const marks = this.marks;\n\n // Custom marks array — purely visual, no snapping effect\n if (Array.isArray(marks)) {\n const result: Array<{ value: string; label: string; pct: number }> = [];\n for (const m of marks) {\n const isObj = m !== null && typeof m === 'object';\n const numVal = isObj ? (m as { value: number }).value : m;\n if (numVal < minVal || numVal > maxVal) continue;\n const rawLabel = isObj ? (m.label ?? String(numVal)) : String(numVal);\n result.push({\n value: String(numVal),\n label: this.percentage ? `${rawLabel}%` : rawLabel,\n pct: ((numVal - minVal) / range) * 100,\n });\n }\n\n return result;\n }\n\n // marks === true — auto-generate from options or free-mode endpoints\n if (normalized) {\n return normalized.map((o) => ({\n value: o.value,\n label: this.percentage ? `${o.label}%` : o.label,\n pct: ((o.rangeValue - minVal) / range) * 100,\n }));\n }\n\n // Free mode — show min and max endpoints only\n return [\n { value: attrs.min, label: this.percentage ? `${minVal}%` : String(minVal), pct: 0 },\n { value: attrs.max, label: this.percentage ? `${maxVal}%` : String(maxVal), pct: 100 },\n ];\n }\n\n protected writeValue(value: string): void {\n const normalized = this._normalizeOptions();\n const rv = this._toRangeValue(value, normalized);\n\n if (this.fieldElement && rv !== '' && this.fieldElement.value !== rv) {\n this.fieldElement.value = rv;\n }\n\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(value, normalized);\n }\n\n // Sync number input only in free mode (options mode disables it)\n if (this._numberInput && !normalized && this._numberInput.value !== rv) {\n this._numberInput.value = rv;\n }\n\n this._updateTrackFill();\n }\n\n protected getValue(): string {\n if (!this.fieldElement) return '';\n\n return this._fromRangeValue(this.fieldElement.value, this._normalizeOptions());\n }\n\n render() {\n const normalized = this._normalizeOptions();\n const attrs = this._getRangeAttrs(normalized);\n\n return html(({ div, input, span }) => {\n div({ className: 'range-container' }, () => {\n // Wrap range + optional marks in a column so marks don't push siblings\n div({ key: 'range-wrapper', className: 'range-wrapper' }, () => {\n this.fieldElement = input({\n key: 'range',\n type: 'range',\n min: attrs.min,\n max: attrs.max,\n step: attrs.step,\n '@input': this._boundOnRangeInput,\n '@change': this.boundOnChange,\n });\n\n if (this.marks) {\n const marksData = this._getMarksData(normalized, attrs);\n div({ key: 'marks', className: 'marks-container' }, () => {\n for (const m of marksData) {\n tags.span(\n {\n key: `mark-${m.value}`,\n className: 'mark',\n style: { left: `${m.pct}%` },\n },\n () => {\n tags.span({ className: 'mark-label', textContent: m.label });\n },\n );\n }\n });\n }\n });\n\n this._valueLabel = span({\n key: 'label',\n className: 'value-label',\n style: { minWidth: this._maxValueLabelWidth(normalized, attrs) },\n textContent: this._displayLabel(this.value, normalized),\n });\n\n // Action buttons first so the number input can be toggled without disrupting button reuse\n this.renderActionButtons();\n\n if (this.editable) {\n this._numberInput = input({\n key: 'number',\n type: 'number',\n className: 'value-input',\n min: attrs.min,\n max: attrs.max,\n step: attrs.step,\n // Disabled in options mode: valid values are discrete, free text makes no sense\n disabled: attrs.inOptionsMode,\n '@input': this._boundOnNumberInput,\n });\n } else {\n this._numberInput = null;\n }\n });\n\n if (this.value != null) this.writeValue(this.value);\n });\n }\n\n private _onRangeInput(): void {\n if (!this.fieldElement) return;\n\n const normalized = this._normalizeOptions();\n const actualValue = this._fromRangeValue(this.fieldElement.value, normalized);\n\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(actualValue, normalized);\n }\n // Keep number input in sync during drag\n if (this._numberInput && !normalized) {\n this._numberInput.value = this.fieldElement.value;\n }\n\n this._updateTrackFill();\n }\n\n private _onNumberInput(): void {\n if (!this._numberInput || !this.fieldElement) return;\n const v = this._numberInput.value;\n\n if (this.fieldElement.value === v) return;\n\n this.fieldElement.value = v;\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(v, null);\n }\n }\n\n public clear(options?: { silent?: boolean }): void {\n const normalized = this._normalizeOptions();\n const attrs = this._getRangeAttrs(normalized);\n // Reset to the option whose rangeValue === min, or to attrs.min in free mode\n const clearTo = normalized\n ? (normalized.find((o) => String(o.rangeValue) === attrs.min)?.value ??\n normalized[0]?.value ??\n attrs.min)\n : attrs.min;\n this.setValue(clearTo, { ...options, action: 'clear' });\n }\n\n private _isSliderOption(opt: unknown): opt is SliderOption {\n return opt !== null && typeof opt === 'object' && 'label' in opt && 'value' in opt;\n }\n}\n\nSlider.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-slider': Slider;\n }\n}\n\nexport default Slider;\nexport type SliderProps = InferProps<typeof Slider>;\n"],"names":["_a","variables"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"slider.js","sources":["../../src/slider/slider.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { NormalizedOption, SliderMarks, SliderOption, SliderOptions } from './defines';\nimport style from '../styles/components/slider.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport { prop } from 'aeico';\n\nclass Slider extends AeicoField {\n protected fieldElement: HTMLInputElement | null = null;\n private _valueLabel: HTMLSpanElement | null = null;\n private _numberInput: HTMLInputElement | null = null;\n\n private _boundOnRangeInput: () => void;\n private _boundOnNumberInput: () => void;\n\n static tagName = 'slider';\n\n @prop({ type: Array })\n accessor options: SliderOptions = [];\n\n @prop({ type: Boolean })\n accessor percentage = false;\n\n @prop({ type: Number })\n accessor min = 0;\n\n @prop({ type: Number })\n accessor max = 100;\n\n @prop({ type: Number })\n accessor step = 1;\n\n @prop({ type: Boolean })\n accessor editable = false;\n\n @prop({ type: Boolean })\n accessor tracked = false;\n\n @prop({\n type: Array,\n // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]\n parser: (value: string | null) => {\n if (value === null) return undefined;\n if (value === '' || value === 'true') return true;\n if (value === 'false') return false;\n try {\n return JSON.parse(value);\n } catch {\n return true;\n }\n },\n })\n accessor marks: SliderMarks | undefined;\n\n protected static styles = [variables, sizeCSS, colorCSS, fieldLabelCSS, actionButtonCSS, style];\n\n constructor() {\n super();\n this._boundOnRangeInput = this._onRangeInput.bind(this);\n this._boundOnNumberInput = this._onNumberInput.bind(this);\n }\n\n private _normalizeOptions(): NormalizedOption[] | null {\n if (!Array.isArray(this.options) || this.options.length === 0) return null;\n\n const opts = this.options.map((opt) =>\n this._isSliderOption(opt)\n ? { label: opt.label, value: String(opt.value) }\n : { label: String(opt), value: String(opt) },\n );\n\n // Sort by numeric value if all values are numeric; otherwise keep original order\n const allNumeric = opts.every((o) => o.value !== '' && !isNaN(Number(o.value)));\n\n if (allNumeric) {\n return [...opts]\n .sort((a, b) => Number(a.value) - Number(b.value))\n .map((o) => ({ ...o, rangeValue: Number(o.value) }));\n } else {\n return opts.map((o, i) => ({ ...o, rangeValue: i }));\n }\n }\n\n private _getRangeAttrs(normalized: NormalizedOption[] | null): {\n min: string;\n max: string;\n step: string;\n inOptionsMode: boolean;\n } {\n if (normalized && normalized.length >= 1) {\n const vals = normalized.map((o) => o.rangeValue);\n const min = Math.min(...vals);\n const max = Math.max(...vals);\n\n // Compute step from minimum gap between adjacent sorted values\n const sorted = [...vals].sort((a, b) => a - b);\n let minGap = Infinity;\n for (let i = 1; i < sorted.length; i++) {\n const d = sorted[i] - sorted[i - 1];\n if (d > 0 && d < minGap) minGap = d;\n }\n\n return {\n min: String(min),\n max: String(max),\n step: minGap === Infinity ? '1' : String(minGap),\n inOptionsMode: true,\n };\n }\n\n return {\n min: String(this.min),\n max: String(this.max),\n step: String(this.step),\n inOptionsMode: false,\n };\n }\n\n private _toRangeValue(value: string | undefined, normalized: NormalizedOption[] | null): string {\n if (value == null || value === '') return '';\n if (normalized) {\n const found = normalized.find((o) => o.value === value);\n\n return found !== undefined ? String(found.rangeValue) : '';\n }\n\n return value;\n }\n\n private _fromRangeValue(rv: string, normalized: NormalizedOption[] | null): string {\n if (normalized) {\n const n = Number(rv);\n\n return normalized.find((o) => o.rangeValue === n)?.value ?? normalized[0]?.value ?? rv;\n }\n return rv;\n }\n\n private _displayLabel(value: string | undefined, normalized: NormalizedOption[] | null): string {\n if (value == null || value === '') return '';\n const label = normalized ? (normalized.find((o) => o.value === value)?.label ?? value) : value;\n\n return this.percentage ? `${label}%` : label;\n }\n\n private _maxValueLabelWidth(\n normalized: NormalizedOption[] | null,\n attrs: { min: string; max: string },\n ): string {\n const candidates = normalized\n ? normalized.map((o) => this._displayLabel(o.value, normalized))\n : [this._displayLabel(attrs.min, null), this._displayLabel(attrs.max, null)];\n const maxLen = Math.max(...candidates.map((l) => l.length), 1);\n\n return `${maxLen}ch`;\n }\n\n private _updateTrackFill(): void {\n if (!this.tracked || !this.fieldElement) return;\n const min = Number(this.fieldElement.min);\n const max = Number(this.fieldElement.max);\n const val = Number(this.fieldElement.value);\n const range = max - min || 1;\n const pct = Math.max(0, Math.min(100, ((val - min) / range) * 100));\n this.style.setProperty('--fill-pct', `${pct}%`);\n }\n\n private _getMarksData(\n normalized: NormalizedOption[] | null,\n attrs: { min: string; max: string; inOptionsMode: boolean },\n ): Array<{ value: string; label: string; pct: number }> {\n const minVal = Number(attrs.min);\n const maxVal = Number(attrs.max);\n const range = maxVal - minVal || 1;\n\n const marks = this.marks;\n\n // Custom marks array — purely visual, no snapping effect\n if (Array.isArray(marks)) {\n const result: Array<{ value: string; label: string; pct: number }> = [];\n for (const m of marks) {\n const isObj = m !== null && typeof m === 'object';\n const numVal = isObj ? (m as { value: number }).value : m;\n if (numVal < minVal || numVal > maxVal) continue;\n const rawLabel = isObj ? (m.label ?? String(numVal)) : String(numVal);\n result.push({\n value: String(numVal),\n label: this.percentage ? `${rawLabel}%` : rawLabel,\n pct: ((numVal - minVal) / range) * 100,\n });\n }\n\n return result;\n }\n\n // marks === true — auto-generate from options or free-mode endpoints\n if (normalized) {\n return normalized.map((o) => ({\n value: o.value,\n label: this.percentage ? `${o.label}%` : o.label,\n pct: ((o.rangeValue - minVal) / range) * 100,\n }));\n }\n\n // Free mode — show min and max endpoints only\n return [\n { value: attrs.min, label: this.percentage ? `${minVal}%` : String(minVal), pct: 0 },\n { value: attrs.max, label: this.percentage ? `${maxVal}%` : String(maxVal), pct: 100 },\n ];\n }\n\n protected writeValue(value: string): void {\n const normalized = this._normalizeOptions();\n const rv = this._toRangeValue(value, normalized);\n\n if (this.fieldElement && rv !== '' && this.fieldElement.value !== rv) {\n this.fieldElement.value = rv;\n }\n\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(value, normalized);\n }\n\n // Sync number input only in free mode (options mode disables it)\n if (this._numberInput && !normalized && this._numberInput.value !== rv) {\n this._numberInput.value = rv;\n }\n\n this._updateTrackFill();\n }\n\n protected getValue(): string {\n if (!this.fieldElement) return '';\n\n return this._fromRangeValue(this.fieldElement.value, this._normalizeOptions());\n }\n\n render() {\n const normalized = this._normalizeOptions();\n const attrs = this._getRangeAttrs(normalized);\n\n return html(({ div, input, span }) => {\n const id = this.getFieldId();\n this.renderLabel(id);\n div({ className: 'range-container field-body' }, () => {\n // Wrap range + optional marks in a column so marks don't push siblings\n div({ key: 'range-wrapper', className: 'range-wrapper' }, () => {\n this.fieldElement = input({\n key: 'range',\n id,\n type: 'range',\n min: attrs.min,\n max: attrs.max,\n step: attrs.step,\n '@input': this._boundOnRangeInput,\n '@change': this.boundOnChange,\n });\n\n if (this.marks) {\n const marksData = this._getMarksData(normalized, attrs);\n div({ key: 'marks', className: 'marks-container' }, () => {\n for (const m of marksData) {\n tags.span(\n {\n key: `mark-${m.value}`,\n className: 'mark',\n style: { left: `${m.pct}%` },\n },\n () => {\n tags.span({ className: 'mark-label', textContent: m.label });\n },\n );\n }\n });\n }\n });\n\n this._valueLabel = span({\n key: 'label',\n className: 'value-label',\n style: { minWidth: this._maxValueLabelWidth(normalized, attrs) },\n textContent: this._displayLabel(this.value, normalized),\n });\n\n // Action buttons first so the number input can be toggled without disrupting button reuse\n this.renderActionButtons();\n\n if (this.editable) {\n this._numberInput = input({\n key: 'number',\n type: 'number',\n className: 'value-input',\n min: attrs.min,\n max: attrs.max,\n step: attrs.step,\n // Disabled in options mode: valid values are discrete, free text makes no sense\n disabled: attrs.inOptionsMode,\n '@input': this._boundOnNumberInput,\n });\n } else {\n this._numberInput = null;\n }\n });\n\n if (this.value != null) this.writeValue(this.value);\n this.renderHelperText();\n this.renderError();\n });\n }\n\n private _onRangeInput(): void {\n if (!this.fieldElement) return;\n\n const normalized = this._normalizeOptions();\n const actualValue = this._fromRangeValue(this.fieldElement.value, normalized);\n\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(actualValue, normalized);\n }\n // Keep number input in sync during drag\n if (this._numberInput && !normalized) {\n this._numberInput.value = this.fieldElement.value;\n }\n\n this._updateTrackFill();\n }\n\n private _onNumberInput(): void {\n if (!this._numberInput || !this.fieldElement) return;\n const v = this._numberInput.value;\n\n if (this.fieldElement.value === v) return;\n\n this.fieldElement.value = v;\n if (this._valueLabel) {\n this._valueLabel.textContent = this._displayLabel(v, null);\n }\n }\n\n public clear(options?: { silent?: boolean }): void {\n const normalized = this._normalizeOptions();\n const attrs = this._getRangeAttrs(normalized);\n // Reset to the option whose rangeValue === min, or to attrs.min in free mode\n const clearTo = normalized\n ? (normalized.find((o) => String(o.rangeValue) === attrs.min)?.value ??\n normalized[0]?.value ??\n attrs.min)\n : attrs.min;\n this.setValue(clearTo, { ...options, action: 'clear' });\n }\n\n private _isSliderOption(opt: unknown): opt is SliderOption {\n return opt !== null && typeof opt === 'object' && 'label' in opt && 'value' in opt;\n }\n}\n\nSlider.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-slider': Slider;\n }\n}\n\nexport default Slider;\nexport type SliderProps = InferProps<typeof Slider>;\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const aeicoComponent = require("./aeico-component.cjs");
|
|
3
|
+
const aeico = require("aeico");
|
|
4
|
+
const variables = require("./variables.cjs");
|
|
5
|
+
const size = require("./size.cjs");
|
|
6
|
+
const color = require("./color.cjs");
|
|
7
|
+
const style = ':host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n vertical-align: middle;\n --spinner-size: 1.75em;\n --spinner-thickness: 0.15em;\n --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n display: inline-block;\n width: var(--spinner-size);\n height: var(--spinner-size);\n border-radius: var(--ae-radius-circle);\n border: var(--spinner-thickness) solid var(--ae-color-bg-subtle, rgba(0, 0, 0, 0.08));\n border-top-color: var(--ae-color-solid);\n animation: ae-spin var(--spinner-speed) linear infinite;\n box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: calc(var(--spinner-size) * 0.2);\n width: auto;\n height: var(--spinner-size);\n border: none;\n border-radius: var(--ae-radius-square);\n animation: none;\n background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n display: inline-block;\n width: calc(var(--spinner-size) * 0.28);\n height: calc(var(--spinner-size) * 0.28);\n border-radius: var(--ae-radius-circle);\n background: var(--ae-color-solid);\n animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n 40% { transform: scale(1); opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .track {\n animation: none;\n border-top-color: var(--ae-color-solid);\n opacity: 0.6;\n }\n\n :host([variant="dots"]) .dot {\n animation: none;\n opacity: 0.6;\n }\n}\n';
|
|
8
|
+
var __create = Object.create;
|
|
9
|
+
var __defProp = Object.defineProperty;
|
|
10
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
11
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
12
|
+
var __typeError = (msg) => {
|
|
13
|
+
throw TypeError(msg);
|
|
14
|
+
};
|
|
15
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
16
|
+
var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
|
|
17
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
18
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
19
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
20
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
21
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
22
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
23
|
+
return value;
|
|
24
|
+
};
|
|
25
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
26
|
+
var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
|
|
27
|
+
var j = array.length + 1, key = __decoratorStrings[k + 5];
|
|
28
|
+
var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
|
|
29
|
+
var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
|
|
30
|
+
return __privateGet(this, extra);
|
|
31
|
+
}, set [name](x) {
|
|
32
|
+
return __privateSet(this, extra, x);
|
|
33
|
+
} }, name));
|
|
34
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
35
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
36
|
+
{
|
|
37
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
|
|
38
|
+
access.get = (x) => x[name];
|
|
39
|
+
access.set = (x, y) => x[name] = y;
|
|
40
|
+
}
|
|
41
|
+
it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
|
|
42
|
+
if (it === void 0) __expectFn(it) && (desc[key] = it);
|
|
43
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
44
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
45
|
+
}
|
|
46
|
+
return desc && __defProp(target, name, desc), target;
|
|
47
|
+
};
|
|
48
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
49
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
50
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
|
|
51
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
52
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
53
|
+
var _speed_dec, _label_dec, _color_dec, _size_dec, _variant_dec, _a, _init, _variant, _size, _color, _label, _speed;
|
|
54
|
+
class Spinner extends (_a = aeicoComponent.AeicoComponent, _variant_dec = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _label_dec = [aeico.prop({ type: String })], _speed_dec = [aeico.prop({ type: String })], _a) {
|
|
55
|
+
constructor() {
|
|
56
|
+
super(...arguments);
|
|
57
|
+
__privateAdd(this, _variant, __runInitializers(_init, 8, this, "border")), __runInitializers(_init, 11, this);
|
|
58
|
+
__privateAdd(this, _size, __runInitializers(_init, 12, this, "md")), __runInitializers(_init, 15, this);
|
|
59
|
+
__privateAdd(this, _color, __runInitializers(_init, 16, this, "default")), __runInitializers(_init, 19, this);
|
|
60
|
+
__privateAdd(this, _label, __runInitializers(_init, 20, this, "Loading…")), __runInitializers(_init, 23, this);
|
|
61
|
+
__privateAdd(this, _speed, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
62
|
+
}
|
|
63
|
+
connectedCallback() {
|
|
64
|
+
super.connectedCallback();
|
|
65
|
+
this.setAttribute("role", "status");
|
|
66
|
+
}
|
|
67
|
+
render() {
|
|
68
|
+
this.setAttribute("aria-label", this.label);
|
|
69
|
+
if (this.speed) {
|
|
70
|
+
this.style.setProperty("--spinner-speed", this.speed);
|
|
71
|
+
} else {
|
|
72
|
+
this.style.removeProperty("--spinner-speed");
|
|
73
|
+
}
|
|
74
|
+
const isDots = this.variant === "dots";
|
|
75
|
+
return aeico.html(({ span }) => {
|
|
76
|
+
span({ part: "track", className: "track", "aria-hidden": "true" }, () => {
|
|
77
|
+
if (isDots) {
|
|
78
|
+
span({ className: "dot" });
|
|
79
|
+
span({ className: "dot" });
|
|
80
|
+
span({ className: "dot" });
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
_init = __decoratorStart(_a);
|
|
87
|
+
_variant = /* @__PURE__ */ new WeakMap();
|
|
88
|
+
_size = /* @__PURE__ */ new WeakMap();
|
|
89
|
+
_color = /* @__PURE__ */ new WeakMap();
|
|
90
|
+
_label = /* @__PURE__ */ new WeakMap();
|
|
91
|
+
_speed = /* @__PURE__ */ new WeakMap();
|
|
92
|
+
__decorateElement(_init, 4, "variant", _variant_dec, Spinner, _variant);
|
|
93
|
+
__decorateElement(_init, 4, "size", _size_dec, Spinner, _size);
|
|
94
|
+
__decorateElement(_init, 4, "color", _color_dec, Spinner, _color);
|
|
95
|
+
__decorateElement(_init, 4, "label", _label_dec, Spinner, _label);
|
|
96
|
+
__decorateElement(_init, 4, "speed", _speed_dec, Spinner, _speed);
|
|
97
|
+
__decoratorMetadata(_init, Spinner);
|
|
98
|
+
__publicField(Spinner, "tagName", "spinner");
|
|
99
|
+
__publicField(Spinner, "styles", [variables.variables, size.sizeCSS, color.colorCSS, style]);
|
|
100
|
+
Spinner.register();
|
|
101
|
+
exports.Spinner = Spinner;
|
|
102
|
+
//# sourceMappingURL=spinner.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.cjs","sources":["../../src/spinner/spinner.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/spinner.css?inline';\nimport type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';\n\n/**\n * Spinner — animated loading indicator.\n *\n * Supports two visual variants: a rotating ring (`border`, default) and\n * three bouncing dots (`dots`). Size and colour are driven by the shared\n * design-token system.\n *\n * @example\n * ```html\n * <ae-spinner></ae-spinner>\n * <ae-spinner variant=\"dots\" color=\"primary\" size=\"lg\"></ae-spinner>\n * <ae-spinner color=\"success\" speed=\"0.5s\" label=\"Saving…\"></ae-spinner>\n * ```\n */\nclass Spinner extends AeicoComponent {\n static tagName = 'spinner';\n\n @prop({ type: String })\n accessor variant: SpinnerVariant = 'border';\n\n @prop({ type: String })\n accessor size: SpinnerSize = 'md';\n\n @prop({ type: String })\n accessor color: SpinnerColor = 'default';\n\n @prop({ type: String })\n accessor label: string = 'Loading…';\n\n @prop({ type: String })\n accessor speed: string | undefined;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'status');\n }\n\n protected render() {\n this.setAttribute('aria-label', this.label);\n\n if (this.speed) {\n this.style.setProperty('--spinner-speed', this.speed);\n } else {\n this.style.removeProperty('--spinner-speed');\n }\n\n const isDots = this.variant === 'dots';\n\n return html(({ span }) => {\n span({ part: 'track', className: 'track', 'aria-hidden': 'true' }, () => {\n if (isDots) {\n span({ className: 'dot' });\n span({ className: 'dot' });\n span({ className: 'dot' });\n }\n });\n });\n }\n}\n\nSpinner.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-spinner': Spinner;\n }\n}\n\nexport default Spinner;\nexport type SpinnerProps = InferProps<typeof Spinner>;\n"],"names":["AeicoComponent","prop","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,YAAA,YAAA,WAAA,cAAA,IAAA,OAAA,UAAA,OAAA,QAAA,QAAA;AAuBA,MAAM,iBAAgB,KAAAA,+BAGpB,eAAA,CAACC,WAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,YAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAQ,IAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,cAACA,WAAK,EAAE,MAAM,OAAA,CAAQ,IAfF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,UAA0B,kBAAnC,OAAA,GAAA,MAAmC,QAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAoB,kBAA7B,OAAA,IAAA,MAA6B,IAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAsB,kBAA/B,OAAA,IAAA,MAA+B,SAAA,CAAA,GAA/B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,UAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,QAAQ;AAAA,EACpC;AAAA,EAEU,SAAS;AACjB,SAAK,aAAa,cAAc,KAAK,KAAK;AAE1C,QAAI,KAAK,OAAO;AACd,WAAK,MAAM,YAAY,mBAAmB,KAAK,KAAK;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,iBAAiB;AAAA,IAC7C;AAEA,UAAM,SAAS,KAAK,YAAY;AAEhC,WAAOC,MAAAA,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,EAAE,MAAM,SAAS,WAAW,SAAS,eAAe,OAAA,GAAU,MAAM;AACvE,YAAI,QAAQ;AACV,eAAK,EAAE,WAAW,OAAO;AACzB,eAAK,EAAE,WAAW,OAAO;AACzB,eAAK,EAAE,WAAW,OAAO;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA9CA,QAAA,iBAAA,EAAA;AAIW,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAZT,kBAAA,OAAA,GAAS,WADT,cAHI,SAIK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WANI,SAOK,KAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAZI,SAaK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAfI,SAgBK,MAAA;AAhBX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAiBjB,cAlBI,SAkBa,UAAS,CAACC,UAAAA,WAAgBC,KAAAA,SAASC,MAAAA,UAAU,KAAK,CAAA;AA8BrE,QAAQ,SAAA;;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { A as AeicoComponent } from "./aeico-component.js";
|
|
2
|
+
import { prop, html } from "aeico";
|
|
3
|
+
import { v as variables } from "./variables.js";
|
|
4
|
+
import { s as sizeCSS } from "./size.js";
|
|
5
|
+
import { c as colorCSS } from "./color.js";
|
|
6
|
+
const style = ':host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n vertical-align: middle;\n --spinner-size: 1.75em;\n --spinner-thickness: 0.15em;\n --spinner-speed: 0.75s;\n}\n\n:host([size="xs"]) { font-size: 0.75rem; }\n:host([size="sm"]) { font-size: 0.875rem; }\n:host([size="md"]) { font-size: 1rem; }\n:host([size="lg"]) { font-size: 1.5rem; }\n\n.track {\n display: inline-block;\n width: var(--spinner-size);\n height: var(--spinner-size);\n border-radius: var(--ae-radius-circle);\n border: var(--spinner-thickness) solid var(--ae-color-bg-subtle, rgba(0, 0, 0, 0.08));\n border-top-color: var(--ae-color-solid);\n animation: ae-spin var(--spinner-speed) linear infinite;\n box-sizing: border-box;\n}\n\n:host([variant="dots"]) .track {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: calc(var(--spinner-size) * 0.2);\n width: auto;\n height: var(--spinner-size);\n border: none;\n border-radius: var(--ae-radius-square);\n animation: none;\n background: transparent;\n}\n\n:host([variant="dots"]) .dot {\n display: inline-block;\n width: calc(var(--spinner-size) * 0.28);\n height: calc(var(--spinner-size) * 0.28);\n border-radius: var(--ae-radius-circle);\n background: var(--ae-color-solid);\n animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\n}\n\n:host([variant="dots"]) .dot:nth-child(2) {\n animation-delay: calc(var(--spinner-speed) / 6);\n}\n\n:host([variant="dots"]) .dot:nth-child(3) {\n animation-delay: calc(var(--spinner-speed) / 3);\n}\n\n@keyframes ae-spin {\n to { transform: rotate(360deg); }\n}\n\n@keyframes ae-bounce {\n 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\n 40% { transform: scale(1); opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .track {\n animation: none;\n border-top-color: var(--ae-color-solid);\n opacity: 0.6;\n }\n\n :host([variant="dots"]) .dot {\n animation: none;\n opacity: 0.6;\n }\n}\n';
|
|
7
|
+
var __create = Object.create;
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
11
|
+
var __typeError = (msg) => {
|
|
12
|
+
throw TypeError(msg);
|
|
13
|
+
};
|
|
14
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
+
var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
|
|
16
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
17
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
18
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
19
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
20
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
21
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
22
|
+
return value;
|
|
23
|
+
};
|
|
24
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
25
|
+
var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
|
|
26
|
+
var j = array.length + 1, key = __decoratorStrings[k + 5];
|
|
27
|
+
var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
|
|
28
|
+
var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
|
|
29
|
+
return __privateGet(this, extra);
|
|
30
|
+
}, set [name](x) {
|
|
31
|
+
return __privateSet(this, extra, x);
|
|
32
|
+
} }, name));
|
|
33
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
34
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
35
|
+
{
|
|
36
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
|
|
37
|
+
access.get = (x) => x[name];
|
|
38
|
+
access.set = (x, y) => x[name] = y;
|
|
39
|
+
}
|
|
40
|
+
it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
|
|
41
|
+
if (it === void 0) __expectFn(it) && (desc[key] = it);
|
|
42
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
43
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
44
|
+
}
|
|
45
|
+
return desc && __defProp(target, name, desc), target;
|
|
46
|
+
};
|
|
47
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
48
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
49
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
|
|
50
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
51
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
52
|
+
var _speed_dec, _label_dec, _color_dec, _size_dec, _variant_dec, _a, _init, _variant, _size, _color, _label, _speed;
|
|
53
|
+
class Spinner extends (_a = AeicoComponent, _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _label_dec = [prop({ type: String })], _speed_dec = [prop({ type: String })], _a) {
|
|
54
|
+
constructor() {
|
|
55
|
+
super(...arguments);
|
|
56
|
+
__privateAdd(this, _variant, __runInitializers(_init, 8, this, "border")), __runInitializers(_init, 11, this);
|
|
57
|
+
__privateAdd(this, _size, __runInitializers(_init, 12, this, "md")), __runInitializers(_init, 15, this);
|
|
58
|
+
__privateAdd(this, _color, __runInitializers(_init, 16, this, "default")), __runInitializers(_init, 19, this);
|
|
59
|
+
__privateAdd(this, _label, __runInitializers(_init, 20, this, "Loading…")), __runInitializers(_init, 23, this);
|
|
60
|
+
__privateAdd(this, _speed, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
61
|
+
}
|
|
62
|
+
connectedCallback() {
|
|
63
|
+
super.connectedCallback();
|
|
64
|
+
this.setAttribute("role", "status");
|
|
65
|
+
}
|
|
66
|
+
render() {
|
|
67
|
+
this.setAttribute("aria-label", this.label);
|
|
68
|
+
if (this.speed) {
|
|
69
|
+
this.style.setProperty("--spinner-speed", this.speed);
|
|
70
|
+
} else {
|
|
71
|
+
this.style.removeProperty("--spinner-speed");
|
|
72
|
+
}
|
|
73
|
+
const isDots = this.variant === "dots";
|
|
74
|
+
return html(({ span }) => {
|
|
75
|
+
span({ part: "track", className: "track", "aria-hidden": "true" }, () => {
|
|
76
|
+
if (isDots) {
|
|
77
|
+
span({ className: "dot" });
|
|
78
|
+
span({ className: "dot" });
|
|
79
|
+
span({ className: "dot" });
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
_init = __decoratorStart(_a);
|
|
86
|
+
_variant = /* @__PURE__ */ new WeakMap();
|
|
87
|
+
_size = /* @__PURE__ */ new WeakMap();
|
|
88
|
+
_color = /* @__PURE__ */ new WeakMap();
|
|
89
|
+
_label = /* @__PURE__ */ new WeakMap();
|
|
90
|
+
_speed = /* @__PURE__ */ new WeakMap();
|
|
91
|
+
__decorateElement(_init, 4, "variant", _variant_dec, Spinner, _variant);
|
|
92
|
+
__decorateElement(_init, 4, "size", _size_dec, Spinner, _size);
|
|
93
|
+
__decorateElement(_init, 4, "color", _color_dec, Spinner, _color);
|
|
94
|
+
__decorateElement(_init, 4, "label", _label_dec, Spinner, _label);
|
|
95
|
+
__decorateElement(_init, 4, "speed", _speed_dec, Spinner, _speed);
|
|
96
|
+
__decoratorMetadata(_init, Spinner);
|
|
97
|
+
__publicField(Spinner, "tagName", "spinner");
|
|
98
|
+
__publicField(Spinner, "styles", [variables, sizeCSS, colorCSS, style]);
|
|
99
|
+
Spinner.register();
|
|
100
|
+
export {
|
|
101
|
+
Spinner as S
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.js","sources":["../../src/spinner/spinner.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/spinner.css?inline';\nimport type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';\n\n/**\n * Spinner — animated loading indicator.\n *\n * Supports two visual variants: a rotating ring (`border`, default) and\n * three bouncing dots (`dots`). Size and colour are driven by the shared\n * design-token system.\n *\n * @example\n * ```html\n * <ae-spinner></ae-spinner>\n * <ae-spinner variant=\"dots\" color=\"primary\" size=\"lg\"></ae-spinner>\n * <ae-spinner color=\"success\" speed=\"0.5s\" label=\"Saving…\"></ae-spinner>\n * ```\n */\nclass Spinner extends AeicoComponent {\n static tagName = 'spinner';\n\n @prop({ type: String })\n accessor variant: SpinnerVariant = 'border';\n\n @prop({ type: String })\n accessor size: SpinnerSize = 'md';\n\n @prop({ type: String })\n accessor color: SpinnerColor = 'default';\n\n @prop({ type: String })\n accessor label: string = 'Loading…';\n\n @prop({ type: String })\n accessor speed: string | undefined;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'status');\n }\n\n protected render() {\n this.setAttribute('aria-label', this.label);\n\n if (this.speed) {\n this.style.setProperty('--spinner-speed', this.speed);\n } else {\n this.style.removeProperty('--spinner-speed');\n }\n\n const isDots = this.variant === 'dots';\n\n return html(({ span }) => {\n span({ part: 'track', className: 'track', 'aria-hidden': 'true' }, () => {\n if (isDots) {\n span({ className: 'dot' });\n span({ className: 'dot' });\n span({ className: 'dot' });\n }\n });\n });\n }\n}\n\nSpinner.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-spinner': Spinner;\n }\n}\n\nexport default Spinner;\nexport type SpinnerProps = InferProps<typeof Spinner>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,YAAA,YAAA,WAAA,cAAA,IAAA,OAAA,UAAA,OAAA,QAAA,QAAA;AAuBA,MAAM,iBAAgB,KAAA,gBAGpB,eAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,YAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,IAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,cAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAfF,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,UAA0B,kBAAnC,OAAA,GAAA,MAAmC,QAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAoB,kBAA7B,OAAA,IAAA,MAA6B,IAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAsB,kBAA/B,OAAA,IAAA,MAA+B,SAAA,CAAA,GAA/B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAgB,kBAAzB,OAAA,IAAA,MAAyB,UAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAIA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,QAAQ;AAAA,EACpC;AAAA,EAEU,SAAS;AACjB,SAAK,aAAa,cAAc,KAAK,KAAK;AAE1C,QAAI,KAAK,OAAO;AACd,WAAK,MAAM,YAAY,mBAAmB,KAAK,KAAK;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,iBAAiB;AAAA,IAC7C;AAEA,UAAM,SAAS,KAAK,YAAY;AAEhC,WAAO,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,EAAE,MAAM,SAAS,WAAW,SAAS,eAAe,OAAA,GAAU,MAAM;AACvE,YAAI,QAAQ;AACV,eAAK,EAAE,WAAW,OAAO;AACzB,eAAK,EAAE,WAAW,OAAO;AACzB,eAAK,EAAE,WAAW,OAAO;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA9CA,QAAA,iBAAA,EAAA;AAIW,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAZT,kBAAA,OAAA,GAAS,WADT,cAHI,SAIK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WANI,SAOK,KAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YATI,SAUK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAZI,SAaK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YAfI,SAgBK,MAAA;AAhBX,oBAAA,OAAM,OAAA;AACJ,cADI,SACG,WAAU,SAAA;AAiBjB,cAlBI,SAkBa,UAAS,CAACA,WAAgB,SAAS,UAAU,KAAK,CAAA;AA8BrE,QAAQ,SAAA;"}
|