neo.mjs 5.1.1 → 5.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/.github/CODING_GUIDELINES.md +8 -5
  2. package/apps/ServiceWorker.mjs +2 -2
  3. package/apps/website/data/blog.json +13 -0
  4. package/buildScripts/addConfig.mjs +7 -6
  5. package/examples/ServiceWorker.mjs +2 -2
  6. package/examples/toolbar/breadcrumb/view/MainContainer.mjs +31 -2
  7. package/package.json +1 -1
  8. package/resources/scss/src/button/Base.scss +187 -70
  9. package/resources/scss/src/component/Carousel.scss +53 -47
  10. package/resources/scss/src/dialog/Base.scss +1 -1
  11. package/resources/scss/src/form/field/Select.scss +1 -0
  12. package/resources/scss/src/form/field/Text.scss +1 -1
  13. package/resources/scss/src/toolbar/Breadcrumb.scss +17 -0
  14. package/resources/scss/theme-dark/button/Base.scss +170 -70
  15. package/resources/scss/theme-light/button/Base.scss +170 -70
  16. package/src/DefaultConfig.mjs +2 -2
  17. package/src/container/Base.mjs +4 -0
  18. package/src/draggable/DragZone.mjs +2 -2
  19. package/src/form/field/Number.mjs +2 -2
  20. package/src/form/field/Picker.mjs +22 -0
  21. package/src/form/field/Select.mjs +2 -2
  22. package/src/form/field/Text.mjs +23 -17
  23. package/src/main/DomEvents.mjs +13 -4
  24. package/src/toolbar/Breadcrumb.mjs +88 -0
package/resources/scss/theme-dark/button/Base.scss CHANGED
@@ -1,77 +1,177 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'button-active-background-color' : #373a3c,
3
- 'button-active-border-color' : #282828,
4
- 'button-active-color' : #bbb,
5
- 'button-background-color' : #3c3f41,
6
- 'button-background-color-disabled': #3c3f41,
7
- 'button-background-image' : linear-gradient(#434749, #323536),
8
- 'button-background-gradient-end' : #323536,
9
- 'button-background-gradient-start': #434749,
10
- 'button-badge-background-color' : #64b5f6,
11
- 'button-badge-color' : #282828,
12
- 'button-badge-margin-left' : -10px,
13
- 'button-badge-margin-top' : -10px,
14
- 'button-border-color' : #2b2b2b,
15
- 'button-border-color-disabled' : #2b2b2b,
16
- 'button-border-radius' : 0,
17
- 'button-border-width' : 1px,
18
- 'button-glyph-color' : #bbb,
19
- 'button-glyph-color-disabled' : #bbb,
20
- 'button-hover-background-color' : #3a3c3e,
21
- 'button-hover-border-color' : #292929,
22
- 'button-hover-color' : #bbb,
23
- 'button-margin' : 2px,
24
- 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
- 'button-outline-active' : none,
26
- 'button-padding' : 5px 12px 5px 12px,
27
- 'button-pressed-border-color' : #5d83a7,
28
- 'button-ripple-background-color' : darken(#5d83a7, 10%),
29
- 'button-text-color' : #bbb,
30
- 'button-text-color-disabled' : #bbb,
31
- 'button-text-font-family' : #{neo(neo-font-family)},
32
- 'button-text-font-size' : 11px,
33
- 'button-text-font-weight' : 600,
34
- 'button-text-line-height' : 11px,
35
- 'button-text-transform' : none,
36
- 'button-use-gradients' : true
2
+ 'button-background-color' : #3c3f41,
3
+ 'button-background-color-active' : #373a3c,
4
+ 'button-background-color-disabled' : #3c3f41,
5
+ 'button-background-color-hover' : #3a3c3e,
6
+ 'button-background-image' : linear-gradient(#434749, #323536),
7
+ 'button-background-gradient-end' : #323536,
8
+ 'button-background-gradient-start' : #434749,
9
+ 'button-badge-background-color' : #64b5f6,
10
+ 'button-badge-color' : #282828,
11
+ 'button-badge-margin-left' : -10px,
12
+ 'button-badge-margin-top' : -10px,
13
+ 'button-border-color' : #2b2b2b,
14
+ 'button-border-color-active' : #282828,
15
+ 'button-border-color-disabled' : #2b2b2b,
16
+ 'button-border-color-hover' : #292929,
17
+ 'button-border-radius' : 0,
18
+ 'button-border-width' : 1px,
19
+ 'button-glyph-color' : #bbb,
20
+ 'button-glyph-color-active' : #bbb,
21
+ 'button-glyph-color-disabled' : #bbb,
22
+ 'button-glyph-color-hover' : #bbb,
23
+ 'button-height' : inherit,
24
+ 'button-margin' : 2px,
25
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
26
+ 'button-outline-active' : none,
27
+ 'button-padding' : 5px 12px 5px 12px,
28
+ 'button-pressed-border-color' : #5d83a7,
29
+ 'button-ripple-background-color' : darken(#5d83a7, 10%),
30
+ 'button-text-color' : #bbb,
31
+ 'button-text-color-active' : #bbb,
32
+ 'button-text-color-disabled' : #bbb,
33
+ 'button-text-color-hover' : #bbb,
34
+ 'button-text-font-family' : #{neo(neo-font-family)},
35
+ 'button-text-font-size' : 11px,
36
+ 'button-text-font-weight' : 600,
37
+ 'button-text-line-height' : 11px,
38
+ 'button-text-transform' : none,
39
+ 'button-use-gradients' : true,
40
+
41
+ // {module: Button, ui: 'secondary'}
42
+ 'button-secondary-background-color' : var(--button-text-color),
43
+ 'button-secondary-background-color-active' : #373a3c,
44
+ 'button-secondary-background-color-disabled': inherit,
45
+ 'button-secondary-background-color-hover' : var(--button-text-color),
46
+ 'button-secondary-background-image' : none,
47
+ 'button-secondary-badge-background-color' : var(--button-badge-color),
48
+ 'button-secondary-badge-color' : var(--button-badge-background-color),
49
+ 'button-secondary-border-color' : var(--button-background-color),
50
+ 'button-secondary-border-color-active' : #282828,
51
+ 'button-secondary-border-color-disabled' : inherit,
52
+ 'button-secondary-border-color-hover' : #292929,
53
+ 'button-secondary-border-width' : var(--button-border-width),
54
+ 'button-secondary-glyph-color' : var(--button-background-color),
55
+ 'button-secondary-glyph-color-active' : var(--button-background-color),
56
+ 'button-secondary-glyph-color-disabled' : inherit,
57
+ 'button-secondary-glyph-color-hover' : var(--button-background-color),
58
+ 'button-secondary-opacity-disabled' : var(--neo-disabled-opacity),
59
+ 'button-secondary-ripple-background-color' : inherit,
60
+ 'button-secondary-text-color' : var(--button-background-color),
61
+ 'button-secondary-text-color-active' : var(--button-background-color),
62
+ 'button-secondary-text-color-disabled' : inherit,
63
+ 'button-secondary-text-color-hover' : var(--button-background-color),
64
+
65
+ // {module: Button, ui: 'tertiary'}
66
+ 'button-tertiary-background-color' : transparent,
67
+ 'button-tertiary-background-color-active' : #373a3c,
68
+ 'button-tertiary-background-color-disabled' : inherit,
69
+ 'button-tertiary-background-color-hover' : var(--button-background-color-hover),
70
+ 'button-tertiary-background-image' : none,
71
+ 'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
+ 'button-tertiary-badge-color' : var(--button-badge-color),
73
+ 'button-tertiary-border-color' : var(--button-border-color),
74
+ 'button-tertiary-border-color-active' : #282828,
75
+ 'button-tertiary-border-color-disabled' : inherit,
76
+ 'button-tertiary-border-color-hover' : #292929,
77
+ 'button-tertiary-border-width' : 0,
78
+ 'button-tertiary-glyph-color' : var(--button-glyph-color),
79
+ 'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
+ 'button-tertiary-glyph-color-disabled' : inherit,
81
+ 'button-tertiary-glyph-color-hover' : var(--button-glyph-color),
82
+ 'button-tertiary-opacity-disabled' : var(--neo-disabled-opacity),
83
+ 'button-tertiary-ripple-background-color' : inherit,
84
+ 'button-tertiary-text-color' : var(--button-text-color),
85
+ 'button-tertiary-text-color-active' : var(--button-text-color),
86
+ 'button-tertiary-text-color-disabled' : inherit,
87
+ 'button-tertiary-text-color-hover' : var(--button-text-color)
37
88
  ));
38
89
 
39
90
  @if $useCssVars == true {
40
91
  :root .neo-theme-dark { // .neo-button
41
- --button-active-background-color : #{neo(button-active-background-color)};
42
- --button-active-border-color : #{neo(button-active-border-color)};
43
- --button-active-color : #{neo(button-active-color)};
44
- --button-background-color : #{neo(button-background-color)};
45
- --button-background-color-disabled: #{neo(button-background-color-disabled)};
46
- --button-background-image : #{neo(button-background-image)};
47
- --button-background-gradient-end : #{neo(button-background-gradient-end)};
48
- --button-background-gradient-start: #{neo(button-background-gradient-start)};
49
- --button-badge-background-color : #{neo(button-badge-background-color)};
50
- --button-badge-color : #{neo(button-badge-color)};
51
- --button-badge-margin-left : #{neo(button-badge-margin-left)};
52
- --button-badge-margin-top : #{neo(button-badge-margin-top)};
53
- --button-border-color : #{neo(button-border-color)};
54
- --button-border-color-disabled : #{neo(button-border-color-disabled)};
55
- --button-border-radius : #{neo(button-border-radius)};
56
- --button-border-width : #{neo(button-border-width)};
57
- --button-glyph-color : #{neo(button-glyph-color)};
58
- --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
59
- --button-hover-background-color : #{neo(button-hover-background-color)};
60
- --button-hover-border-color : #{neo(button-hover-border-color)};
61
- --button-hover-color : #{neo(button-hover-color)};
62
- --button-margin : #{neo(button-margin)};
63
- --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
- --button-outline-active : #{neo(button-outline-active)};
65
- --button-padding : #{neo(button-padding)};
66
- --button-pressed-border-color : #{neo(button-pressed-border-color)};
67
- --button-ripple-background-color : #{neo(button-ripple-background-color)};
68
- --button-text-color : #{neo(button-text-color)};
69
- --button-text-color-disabled : #{neo(button-text-color-disabled)};
70
- --button-text-font-family : #{neo(button-text-font-family)};
71
- --button-text-font-size : #{neo(button-text-font-size)};
72
- --button-text-font-weight : #{neo(button-text-font-weight)};
73
- --button-text-line-height : #{neo(button-text-line-height)};
74
- --button-text-transform : #{neo(button-text-transform)};
75
- --button-use-gradients : #{neo(button-use-gradients)};
92
+ --button-background-color : #{neo(button-background-color)};
93
+ --button-background-color-active : #{neo(button-background-color-active)};
94
+ --button-background-color-disabled : #{neo(button-background-color-disabled)};
95
+ --button-background-color-hover : #{neo(button-background-color-hover)};
96
+ --button-background-image : #{neo(button-background-image)};
97
+ --button-background-gradient-end : #{neo(button-background-gradient-end)};
98
+ --button-background-gradient-start : #{neo(button-background-gradient-start)};
99
+ --button-badge-background-color : #{neo(button-badge-background-color)};
100
+ --button-badge-color : #{neo(button-badge-color)};
101
+ --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
+ --button-badge-margin-top : #{neo(button-badge-margin-top)};
103
+ --button-border-color : #{neo(button-border-color)};
104
+ --button-border-color-active : #{neo(button-border-color-active)};
105
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
106
+ --button-border-color-hover : #{neo(button-border-color-hover)};
107
+ --button-border-radius : #{neo(button-border-radius)};
108
+ --button-border-width : #{neo(button-border-width)};
109
+ --button-glyph-color : #{neo(button-glyph-color)};
110
+ --button-glyph-color-active : #{neo(button-glyph-color-active)};
111
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
112
+ --button-glyph-color-hover : #{neo(button-glyph-color-hover)};
113
+ --button-height : #{neo(button-height)};
114
+ --button-margin : #{neo(button-margin)};
115
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
116
+ --button-outline-active : #{neo(button-outline-active)};
117
+ --button-padding : #{neo(button-padding)};
118
+ --button-pressed-border-color : #{neo(button-pressed-border-color)};
119
+ --button-ripple-background-color : #{neo(button-ripple-background-color)};
120
+ --button-text-color : #{neo(button-text-color)};
121
+ --button-text-color-active : #{neo(button-text-color-active)};
122
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
123
+ --button-text-color-hover : #{neo(button-text-color-hover)};
124
+ --button-text-font-family : #{neo(button-text-font-family)};
125
+ --button-text-font-size : #{neo(button-text-font-size)};
126
+ --button-text-font-weight : #{neo(button-text-font-weight)};
127
+ --button-text-line-height : #{neo(button-text-line-height)};
128
+ --button-text-transform : #{neo(button-text-transform)};
129
+ --button-use-gradients : #{neo(button-use-gradients)};
130
+
131
+ --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
+ --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
+ --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
134
+ --button-secondary-background-color-hover : #{neo(button-secondary-background-color-hover)};
135
+ --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
+ --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
+ --button-secondary-badge-color : #{neo(button-secondary-badge-color)};
138
+ --button-secondary-border-color : #{neo(button-secondary-border-color)};
139
+ --button-secondary-border-color-active : #{neo(button-secondary-border-color-active)};
140
+ --button-secondary-border-color-disabled : #{neo(button-secondary-border-color-disabled)};
141
+ --button-secondary-border-color-hover : #{neo(button-secondary-border-color-hover)};
142
+ --button-secondary-border-width : #{neo(button-secondary-border-width)};
143
+ --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
+ --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
+ --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
146
+ --button-secondary-glyph-color-hover : #{neo(button-secondary-glyph-color-hover)};
147
+ --button-secondary-opacity-disabled : #{neo(button-secondary-opacity-disabled)};
148
+ --button-secondary-ripple-background-color : #{neo(button-secondary-ripple-background-color)};
149
+ --button-secondary-text-color : #{neo(button-secondary-text-color)};
150
+ --button-secondary-text-color-active : #{neo(button-secondary-text-color-active)};
151
+ --button-secondary-text-color-disabled : #{neo(button-secondary-text-color-disabled)};
152
+ --button-secondary-text-color-hover : #{neo(button-secondary-text-color-hover)};
153
+
154
+ --button-tertiary-background-color : #{neo(button-tertiary-background-color)};
155
+ --button-tertiary-background-color-active : #{neo(button-tertiary-background-color-active)};
156
+ --button-tertiary-background-color-disabled : #{neo(button-tertiary-background-color-hover)};
157
+ --button-tertiary-background-color-hover : #{neo(button-tertiary-background-color-hover)};
158
+ --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
+ --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
+ --button-tertiary-badge-color : #{neo(button-tertiary-badge-color)};
161
+ --button-tertiary-border-color : #{neo(button-tertiary-border-color)};
162
+ --button-tertiary-border-color-active : #{neo(button-tertiary-border-color-active)};
163
+ --button-tertiary-border-color-disabled : #{neo(button-tertiary-border-color-disabled)};
164
+ --button-tertiary-border-color-hover : #{neo(button-tertiary-border-color-hover)};
165
+ --button-tertiary-border-width : #{neo(button-tertiary-border-width)};
166
+ --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
+ --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
+ --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
169
+ --button-tertiary-glyph-color-hover : #{neo(button-tertiary-glyph-color-hover)};
170
+ --button-tertiary-opacity-disabled : #{neo(button-tertiary-opacity-disabled)};
171
+ --button-tertiary-ripple-background-color : #{neo(button-tertiary-ripple-background-color)};
172
+ --button-tertiary-text-color : #{neo(button-tertiary-text-color)};
173
+ --button-tertiary-text-color-active : #{neo(button-tertiary-text-color-active)};
174
+ --button-tertiary-text-color-disabled : #{neo(button-tertiary-text-color-disabled)};
175
+ --button-tertiary-text-color-hover : #{neo(button-tertiary-text-color-hover)};
76
176
  }
77
177
  }
package/resources/scss/theme-light/button/Base.scss CHANGED
@@ -1,77 +1,177 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'button-active-background-color' : #ddd,
3
- 'button-active-border-color' : #1c60a0,
4
- 'button-active-color' : #1c60a0,
5
- 'button-background-color' : #fff,
6
- 'button-background-color-disabled': #fff,
7
- 'button-background-image' : none,
8
- 'button-background-gradient-end' : #323536,
9
- 'button-background-gradient-start': #434749,
10
- 'button-badge-background-color' : #1c60a0,
11
- 'button-badge-color' : #fff,
12
- 'button-badge-margin-left' : -10px,
13
- 'button-badge-margin-top' : -10px,
14
- 'button-border-color' : #ddd,
15
- 'button-border-color-disabled' : #ddd,
16
- 'button-border-radius' : 3px,
17
- 'button-border-width' : 1px,
18
- 'button-glyph-color' : #1c60a0,
19
- 'button-glyph-color-disabled' : #1c60a0,
20
- 'button-hover-background-color' : #fff,
21
- 'button-hover-border-color' : #1c60a0,
22
- 'button-hover-color' : #bbb,
23
- 'button-margin' : 2px,
24
- 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
- 'button-outline-active' : none,
26
- 'button-padding' : 5px 12px 5px 12px,
27
- 'button-pressed-border-color' : #1c60a0,
28
- 'button-ripple-background-color' : lighten(#1c60a0, 50%),
29
- 'button-text-color' : #1c60a0,
30
- 'button-text-color-disabled' : #1c60a0,
31
- 'button-text-font-family' : #{neo(neo-font-family)},
32
- 'button-text-font-size' : 11px,
33
- 'button-text-font-weight' : 600,
34
- 'button-text-line-height' : 11px,
35
- 'button-text-transform' : uppercase,
36
- 'button-use-gradients' : false
2
+ 'button-background-color' : #fff,
3
+ 'button-background-color-active' : #ddd,
4
+ 'button-background-color-disabled' : #fff,
5
+ 'button-background-color-hover' : #fff,
6
+ 'button-background-image' : none,
7
+ 'button-background-gradient-end' : #323536,
8
+ 'button-background-gradient-start' : #434749,
9
+ 'button-badge-background-color' : #1c60a0,
10
+ 'button-badge-color' : #fff,
11
+ 'button-badge-margin-left' : -10px,
12
+ 'button-badge-margin-top' : -10px,
13
+ 'button-border-color' : #ddd,
14
+ 'button-border-color-active' : #1c60a0,
15
+ 'button-border-color-disabled' : #ddd,
16
+ 'button-border-color-hover' : #1c60a0,
17
+ 'button-border-radius' : 3px,
18
+ 'button-border-width' : 1px,
19
+ 'button-glyph-color' : #1c60a0,
20
+ 'button-glyph-color-active' : #1c60a0,
21
+ 'button-glyph-color-disabled' : #1c60a0,
22
+ 'button-glyph-color-hover' : #1c60a0,
23
+ 'button-height' : inherit,
24
+ 'button-margin' : 2px,
25
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
26
+ 'button-outline-active' : none,
27
+ 'button-padding' : 5px 12px 5px 12px,
28
+ 'button-pressed-border-color' : #1c60a0,
29
+ 'button-ripple-background-color' : lighten(#1c60a0, 50%),
30
+ 'button-text-color' : #1c60a0,
31
+ 'button-text-color-active' : #1c60a0,
32
+ 'button-text-color-disabled' : #1c60a0,
33
+ 'button-text-color-hover' : #bbb,
34
+ 'button-text-font-family' : #{neo(neo-font-family)},
35
+ 'button-text-font-size' : 11px,
36
+ 'button-text-font-weight' : 600,
37
+ 'button-text-line-height' : 11px,
38
+ 'button-text-transform' : uppercase,
39
+ 'button-use-gradients' : false,
40
+
41
+ // {module: Button, ui: 'secondary'}
42
+ 'button-secondary-background-color' : var(--button-text-color),
43
+ 'button-secondary-background-color-active' : #ddd,
44
+ 'button-secondary-background-color-disabled': inherit,
45
+ 'button-secondary-background-color-hover' : var(--button-text-color),
46
+ 'button-secondary-background-image' : none,
47
+ 'button-secondary-badge-background-color' : var(--button-badge-color),
48
+ 'button-secondary-badge-color' : var(--button-badge-background-color),
49
+ 'button-secondary-border-color' : var(--button-background-color),
50
+ 'button-secondary-border-color-active' : #ddd,
51
+ 'button-secondary-border-color-disabled' : inherit,
52
+ 'button-secondary-border-color-hover' : #1c60a0,
53
+ 'button-secondary-border-width' : var(--button-border-width),
54
+ 'button-secondary-glyph-color' : var(--button-background-color),
55
+ 'button-secondary-glyph-color-active' : var(--button-background-color),
56
+ 'button-secondary-glyph-color-disabled' : inherit,
57
+ 'button-secondary-glyph-color-hover' : var(--button-background-color),
58
+ 'button-secondary-opacity-disabled' : var(--neo-disabled-opacity),
59
+ 'button-secondary-ripple-background-color' : inherit,
60
+ 'button-secondary-text-color' : var(--button-background-color),
61
+ 'button-secondary-text-color-active' : var(--button-background-color),
62
+ 'button-secondary-text-color-disabled' : inherit,
63
+ 'button-secondary-text-color-hover' : var(--button-background-color),
64
+
65
+ // {module: Button, ui: 'tertiary'}
66
+ 'button-tertiary-background-color' : transparent,
67
+ 'button-tertiary-background-color-active' : #ddd,
68
+ 'button-tertiary-background-color-disabled' : inherit,
69
+ 'button-tertiary-background-color-hover' : var(--button-background-color-hover),
70
+ 'button-tertiary-background-image' : none,
71
+ 'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
+ 'button-tertiary-badge-color' : var(--button-badge-color),
73
+ 'button-tertiary-border-color' : var(--button-border-color),
74
+ 'button-tertiary-border-color-active' : #ddd,
75
+ 'button-tertiary-border-color-disabled' : inherit,
76
+ 'button-tertiary-border-color-hover' : #1c60a0,
77
+ 'button-tertiary-border-width' : 0,
78
+ 'button-tertiary-glyph-color' : var(--button-glyph-color),
79
+ 'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
+ 'button-tertiary-glyph-color-disabled' : inherit,
81
+ 'button-tertiary-glyph-color-hover' : var(--button-glyph-color),
82
+ 'button-tertiary-opacity-disabled' : var(--neo-disabled-opacity),
83
+ 'button-tertiary-ripple-background-color' : inherit,
84
+ 'button-tertiary-text-color' : var(--button-text-color),
85
+ 'button-tertiary-text-color-active' : var(--button-text-color),
86
+ 'button-tertiary-text-color-disabled' : inherit,
87
+ 'button-tertiary-text-color-hover' : var(--button-text-color)
37
88
  ));
38
89
 
39
90
  @if $useCssVars == true {
40
91
  :root .neo-theme-light { // .neo-button
41
- --button-active-background-color : #{neo(button-active-background-color)};
42
- --button-active-border-color : #{neo(button-active-border-color)};
43
- --button-active-color : #{neo(button-active-color)};
44
- --button-background-color : #{neo(button-background-color)};
45
- --button-background-color-disabled: #{neo(button-background-color-disabled)};
46
- --button-background-image : #{neo(button-background-image)};
47
- --button-background-gradient-end : #{neo(button-background-gradient-end)};
48
- --button-background-gradient-start: #{neo(button-background-gradient-start)};
49
- --button-badge-background-color : #{neo(button-badge-background-color)};
50
- --button-badge-color : #{neo(button-badge-color)};
51
- --button-badge-margin-left : #{neo(button-badge-margin-left)};
52
- --button-badge-margin-top : #{neo(button-badge-margin-top)};
53
- --button-border-color : #{neo(button-border-color)};
54
- --button-border-color-disabled : #{neo(button-border-color-disabled)};
55
- --button-border-radius : #{neo(button-border-radius)};
56
- --button-border-width : #{neo(button-border-width)};
57
- --button-glyph-color : #{neo(button-glyph-color)};
58
- --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
59
- --button-hover-background-color : #{neo(button-hover-background-color)};
60
- --button-hover-border-color : #{neo(button-hover-border-color)};
61
- --button-hover-color : #{neo(button-hover-color)};
62
- --button-margin : #{neo(button-margin)};
63
- --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
- --button-outline-active : #{neo(button-outline-active)};
65
- --button-padding : #{neo(button-padding)};
66
- --button-pressed-border-color : #{neo(button-pressed-border-color)};
67
- --button-ripple-background-color : #{neo(button-ripple-background-color)};
68
- --button-text-color : #{neo(button-text-color)};
69
- --button-text-color-disabled : #{neo(button-text-color-disabled)};
70
- --button-text-font-family : #{neo(button-text-font-family)};
71
- --button-text-font-size : #{neo(button-text-font-size)};
72
- --button-text-font-weight : #{neo(button-text-font-weight)};
73
- --button-text-line-height : #{neo(button-text-line-height)};
74
- --button-text-transform : #{neo(button-text-transform)};
75
- --button-use-gradients : #{neo(button-use-gradients)};
92
+ --button-background-color : #{neo(button-background-color)};
93
+ --button-background-color-active : #{neo(button-background-color-active)};
94
+ --button-background-color-disabled : #{neo(button-background-color-disabled)};
95
+ --button-background-color-hover : #{neo(button-background-color-hover)};
96
+ --button-background-image : #{neo(button-background-image)};
97
+ --button-background-gradient-end : #{neo(button-background-gradient-end)};
98
+ --button-background-gradient-start : #{neo(button-background-gradient-start)};
99
+ --button-badge-background-color : #{neo(button-badge-background-color)};
100
+ --button-badge-color : #{neo(button-badge-color)};
101
+ --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
+ --button-badge-margin-top : #{neo(button-badge-margin-top)};
103
+ --button-border-color : #{neo(button-border-color)};
104
+ --button-border-color-active : #{neo(button-border-color-active)};
105
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
106
+ --button-border-color-hover : #{neo(button-border-color-hover)};
107
+ --button-border-radius : #{neo(button-border-radius)};
108
+ --button-border-width : #{neo(button-border-width)};
109
+ --button-glyph-color : #{neo(button-glyph-color)};
110
+ --button-glyph-color-active : #{neo(button-glyph-color-active)};
111
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
112
+ --button-glyph-color-hover : #{neo(button-glyph-color-hover)};
113
+ --button-height : #{neo(button-height)};
114
+ --button-margin : #{neo(button-margin)};
115
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
116
+ --button-outline-active : #{neo(button-outline-active)};
117
+ --button-padding : #{neo(button-padding)};
118
+ --button-pressed-border-color : #{neo(button-pressed-border-color)};
119
+ --button-ripple-background-color : #{neo(button-ripple-background-color)};
120
+ --button-text-color : #{neo(button-text-color)};
121
+ --button-text-color-active : #{neo(button-text-color-active)};
122
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
123
+ --button-text-color-hover : #{neo(button-text-color-hover)};
124
+ --button-text-font-family : #{neo(button-text-font-family)};
125
+ --button-text-font-size : #{neo(button-text-font-size)};
126
+ --button-text-font-weight : #{neo(button-text-font-weight)};
127
+ --button-text-line-height : #{neo(button-text-line-height)};
128
+ --button-text-transform : #{neo(button-text-transform)};
129
+ --button-use-gradients : #{neo(button-use-gradients)};
130
+
131
+ --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
+ --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
+ --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
134
+ --button-secondary-background-color-hover : #{neo(button-secondary-background-color-hover)};
135
+ --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
+ --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
+ --button-secondary-badge-color : #{neo(button-secondary-badge-color)};
138
+ --button-secondary-border-color : #{neo(button-secondary-border-color)};
139
+ --button-secondary-border-color-active : #{neo(button-secondary-border-color-active)};
140
+ --button-secondary-border-color-disabled : #{neo(button-secondary-border-color-disabled)};
141
+ --button-secondary-border-color-hover : #{neo(button-secondary-border-color-hover)};
142
+ --button-secondary-border-width : #{neo(button-secondary-border-width)};
143
+ --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
+ --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
+ --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
146
+ --button-secondary-glyph-color-hover : #{neo(button-secondary-glyph-color-hover)};
147
+ --button-secondary-opacity-disabled : #{neo(button-secondary-opacity-disabled)};
148
+ --button-secondary-ripple-background-color : #{neo(button-secondary-ripple-background-color)};
149
+ --button-secondary-text-color : #{neo(button-secondary-text-color)};
150
+ --button-secondary-text-color-active : #{neo(button-secondary-text-color-active)};
151
+ --button-secondary-text-color-disabled : #{neo(button-secondary-text-color-disabled)};
152
+ --button-secondary-text-color-hover : #{neo(button-secondary-text-color-hover)};
153
+
154
+ --button-tertiary-background-color : #{neo(button-tertiary-background-color)};
155
+ --button-tertiary-background-color-active : #{neo(button-tertiary-background-color-active)};
156
+ --button-tertiary-background-color-disabled : #{neo(button-tertiary-background-color-hover)};
157
+ --button-tertiary-background-color-hover : #{neo(button-tertiary-background-color-hover)};
158
+ --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
+ --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
+ --button-tertiary-badge-color : #{neo(button-tertiary-badge-color)};
161
+ --button-tertiary-border-color : #{neo(button-tertiary-border-color)};
162
+ --button-tertiary-border-color-active : #{neo(button-tertiary-border-color-active)};
163
+ --button-tertiary-border-color-disabled : #{neo(button-tertiary-border-color-disabled)};
164
+ --button-tertiary-border-color-hover : #{neo(button-tertiary-border-color-hover)};
165
+ --button-tertiary-border-width : #{neo(button-tertiary-border-width)};
166
+ --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
+ --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
+ --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
169
+ --button-tertiary-glyph-color-hover : #{neo(button-tertiary-glyph-color-hover)};
170
+ --button-tertiary-opacity-disabled : #{neo(button-tertiary-opacity-disabled)};
171
+ --button-tertiary-ripple-background-color : #{neo(button-tertiary-ripple-background-color)};
172
+ --button-tertiary-text-color : #{neo(button-tertiary-text-color)};
173
+ --button-tertiary-text-color-active : #{neo(button-tertiary-text-color-active)};
174
+ --button-tertiary-text-color-disabled : #{neo(button-tertiary-text-color-disabled)};
175
+ --button-tertiary-text-color-hover : #{neo(button-tertiary-text-color-hover)};
76
176
  }
77
177
  }
package/src/DefaultConfig.mjs CHANGED
@@ -237,12 +237,12 @@ const DefaultConfig = {
237
237
  useVdomWorker: true,
238
238
  /**
239
239
  * buildScripts/injectPackageVersion.mjs will update this value
240
- * @default '5.1.1'
240
+ * @default '5.1.3'
241
241
  * @memberOf! module:Neo
242
242
  * @name config.version
243
243
  * @type String
244
244
  */
245
- version: '5.1.1'
245
+ version: '5.1.3'
246
246
  };
247
247
 
248
248
  Object.assign(DefaultConfig, {
package/src/container/Base.mjs CHANGED
@@ -215,7 +215,11 @@ class Base extends Component {
215
215
 
216
216
  case 'NeoInstance': {
217
217
  item.set(config);
218
+
219
+ // In case an item got created outside a VC or VM based hierarchy, there might be bindings or string
220
+ // based listeners which still need to get resolved.
218
221
  item.getController()?.parseConfig(item);
222
+ item.getModel() ?.parseConfig(item);
219
223
  break;
220
224
  }
221
225
 
package/src/draggable/DragZone.mjs CHANGED
@@ -189,9 +189,9 @@ class DragZone extends Base {
189
189
  component = Neo.getComponent(me.getDragElementRoot().id) || me.owner,
190
190
  rect = me.dragElementRect,
191
191
  vdom = me.dragProxyConfig?.vdom,
192
- clone = VDomUtil.clone(vdom ? vdom : me.dragElement);
192
+ clone = VDomUtil.clone(vdom ? vdom : me.dragElement),
193
193
 
194
- const config = {
194
+ config = {
195
195
  module : DragProxyComponent,
196
196
  appName : me.appName,
197
197
  moveInMainThread: me.moveInMainThread,
package/src/form/field/Number.mjs CHANGED
@@ -242,7 +242,7 @@ class Number extends Text {
242
242
  value = (oldValue - stepSize) < me.minValue ? me.maxValue : (oldValue - stepSize);
243
243
 
244
244
  if (me.excludedValues) {
245
- while(me.excludedValues.includes(value)) {
245
+ while (me.excludedValues.includes(value)) {
246
246
  value = Math.max(me.minValue, value - stepSize);
247
247
  }
248
248
  }
@@ -262,7 +262,7 @@ class Number extends Text {
262
262
  value = (oldValue + stepSize) > me.maxValue ? me.minValue : (oldValue + stepSize);
263
263
 
264
264
  if (me.excludedValues) {
265
- while(me.excludedValues.includes(value)) {
265
+ while (me.excludedValues.includes(value)) {
266
266
  value = Math.min(me.maxValue, value + stepSize);
267
267
  }
268
268
  }
package/src/form/field/Picker.mjs CHANGED
@@ -115,6 +115,20 @@ class Picker extends Text {
115
115
  this.cls = cls;
116
116
  }
117
117
 
118
+ /**
119
+ * Triggered after the mounted config got changed
120
+ * @param {Boolean} value
121
+ * @param {Boolean} oldValue
122
+ * @protected
123
+ */
124
+ afterSetMounted(value, oldValue) {
125
+ if (value === false && oldValue && this.pickerIsMounted) {
126
+ this.picker.hide();
127
+ }
128
+
129
+ super.afterSetMounted(value, oldValue);
130
+ }
131
+
118
132
  /**
119
133
  * @param {Boolean} silent
120
134
  */
@@ -186,6 +200,14 @@ class Picker extends Text {
186
200
  return null;
187
201
  }
188
202
 
203
+ /**
204
+ * @param args
205
+ */
206
+ destroy(...args) {
207
+ this.picker?.destroy();
208
+ super.destroy(...args);
209
+ }
210
+
189
211
  /**
190
212
  * @param {Function} [callback]
191
213
  * @param {Object} [callbackScope]