@progress/kendo-themes-html 5.3.2-dev.0 → 5.3.2-dev.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.
@@ -33,6 +33,8 @@ const attrMap = {
33
33
 
34
34
  showcheckbox: 'showCheckbox',
35
35
 
36
+ swapbutton: 'swapButton',
37
+
36
38
  // Switch
37
39
  onlabel: 'onLabel',
38
40
  offlabel: 'offLabel',
@@ -84,6 +86,8 @@ const booleanAttr = new Set([
84
86
 
85
87
  'showCheckbox',
86
88
 
89
+ 'swapButton',
90
+
87
91
  'loading',
88
92
 
89
93
  'virtualization',
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "5.3.2-dev.0",
4
+ "version": "5.3.2-dev.3",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -42,5 +42,5 @@
42
42
  "@rollup/plugin-node-resolve": "^13.1.2",
43
43
  "rollup": "^2.62.0"
44
44
  },
45
- "gitHead": "32946c0dfe2496ff8c6ff8661391c0376b85c7b7"
45
+ "gitHead": "f5a9f36ab8fec6d7ad76ea720d4db85a46aa8860"
46
46
  }
@@ -0,0 +1,215 @@
1
+ [
2
+ {
3
+ "component": "button",
4
+ "version": "5.3.1",
5
+ "selector": [
6
+ ".k-button"
7
+ ],
8
+ "states": [
9
+ {
10
+ "name": "hover",
11
+ "selector": [
12
+ ":hover",
13
+ ".k-hover"
14
+ ]
15
+ },
16
+ {
17
+ "name": "focus",
18
+ "selector": [
19
+ ":focus",
20
+ ".k-focus"
21
+ ]
22
+ },
23
+ {
24
+ "name": "active",
25
+ "selector": [
26
+ ":active",
27
+ ".k-active"
28
+ ]
29
+ },
30
+ {
31
+ "name": "selected",
32
+ "selector": [
33
+ ".k-selected"
34
+ ]
35
+ },
36
+ {
37
+ "name": "disabled",
38
+ "selector": [
39
+ ":disabled",
40
+ "[disabled]",
41
+ ".k-disabled"
42
+ ]
43
+ }
44
+ ],
45
+ "options": [
46
+ {
47
+ "name": "size",
48
+ "values": [
49
+ {
50
+ "name": "small",
51
+ "selector": [
52
+ ".k-button-sm"
53
+ ]
54
+ },
55
+ {
56
+ "name": "medium",
57
+ "selector": [
58
+ ".k-button-md"
59
+ ]
60
+ },
61
+ {
62
+ "name": "large",
63
+ "selector": [
64
+ ".k-button-lg"
65
+ ]
66
+ }
67
+ ]
68
+ },
69
+ {
70
+ "name": "rounded",
71
+ "values": [
72
+ {
73
+ "name": "small",
74
+ "selector": [
75
+ ".k-rounded-sm"
76
+ ]
77
+ },
78
+ {
79
+ "name": "medium",
80
+ "selector": [
81
+ ".k-rounded-md"
82
+ ]
83
+ },
84
+ {
85
+ "name": "large",
86
+ "selector": [
87
+ ".k-rounded-lg"
88
+ ]
89
+ },
90
+ {
91
+ "name": "full",
92
+ "selector": [
93
+ ".k-rounded-full"
94
+ ]
95
+ }
96
+ ]
97
+ },
98
+ {
99
+ "name": "fillMode",
100
+ "values": [
101
+ {
102
+ "name": "solid",
103
+ "selector": [
104
+ ".k-button-solid"
105
+ ]
106
+ },
107
+ {
108
+ "name": "flat",
109
+ "selector": [
110
+ ".k-button-flat"
111
+ ]
112
+ },
113
+ {
114
+ "name": "outline",
115
+ "selector": [
116
+ ".k-button-outline"
117
+ ]
118
+ },
119
+ {
120
+ "name": "link",
121
+ "selector": [
122
+ ".k-button-link"
123
+ ]
124
+ }
125
+ ]
126
+ },
127
+ {
128
+ "name": "themeColor",
129
+ "values": [
130
+ {
131
+ "name": "base",
132
+ "selector": [
133
+ ".k-button-{options.fillMode}-base"
134
+ ]
135
+ },
136
+ {
137
+ "name": "primary",
138
+ "selector": [
139
+ ".k-button-{options.fillMode}-primary"
140
+ ]
141
+ },
142
+ {
143
+ "name": "secondary",
144
+ "selector": [
145
+ ".k-button-{options.fillMode}-secondary"
146
+ ]
147
+ },
148
+ {
149
+ "name": "tertiary",
150
+ "selector": [
151
+ ".k-button-{options.fillMode}-tertiary"
152
+ ]
153
+ },
154
+ {
155
+ "name": "info",
156
+ "selector": [
157
+ ".k-button-{options.fillMode}-info"
158
+ ]
159
+ },
160
+ {
161
+ "name": "success",
162
+ "selector": [
163
+ ".k-button-{options.fillMode}-success"
164
+ ]
165
+ },
166
+ {
167
+ "name": "warning",
168
+ "selector": [
169
+ ".k-button-{options.fillMode}-warning"
170
+ ]
171
+ },
172
+ {
173
+ "name": "error",
174
+ "selector": [
175
+ ".k-button-{options.fillMode}-error"
176
+ ]
177
+ },
178
+ {
179
+ "name": "dark",
180
+ "selector": [
181
+ ".k-button-{options.fillMode}-dark"
182
+ ]
183
+ },
184
+ {
185
+ "name": "light",
186
+ "selector": [
187
+ ".k-button-{options.fillMode}-light"
188
+ ]
189
+ },
190
+ {
191
+ "name": "inverse",
192
+ "selector": [
193
+ ".k-button-{options.fillMode}-inverse"
194
+ ]
195
+ }
196
+ ]
197
+ }
198
+ ],
199
+ "children": [
200
+ {
201
+ "name": "icon",
202
+ "ref": "icon",
203
+ "selector": [
204
+ ".k-button-icon"
205
+ ]
206
+ },
207
+ {
208
+ "name": "text",
209
+ "selector": [
210
+ ".k-button-text"
211
+ ]
212
+ }
213
+ ]
214
+ }
215
+ ]
@@ -1,4 +1,6 @@
1
1
  import { globalDefaultProps, Component } from '../component/index';
2
+ import { ButtonStatic } from '../button/index';
3
+ import { IconStatic } from '../icon/index';
2
4
  import { FloatingLabelStatic } from '../input/index';
3
5
  import { DateInputStatic } from '../dateinput/index';
4
6
 
@@ -17,6 +19,8 @@ function DateRangePickerStatic(props) {
17
19
  rounded,
18
20
  fillMode,
19
21
 
22
+ swapButton,
23
+
20
24
  disabled,
21
25
 
22
26
  aria,
@@ -47,6 +51,11 @@ function DateRangePickerStatic(props) {
47
51
  <FloatingLabelStatic label="Start">
48
52
  <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
49
53
  </FloatingLabelStatic>
54
+ {swapButton &&
55
+ <ButtonStatic className="k-icon-button" rounded={rounded} size={size} fillMode="flat" themeColor="base">
56
+ <IconStatic className="k-button-icon" name="arrows-swap" style="transform: rotate(90deg);"/>
57
+ </ButtonStatic>
58
+ }
50
59
  <FloatingLabelStatic label="End">
51
60
  <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
52
61
  </FloatingLabelStatic>
@@ -69,6 +78,8 @@ DateRangePickerStatic.propTypes = {
69
78
  rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
70
79
  fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
71
80
 
81
+ swapButton: typeof false,
82
+
72
83
  disabled: typeof false,
73
84
 
74
85
  aria: typeof false,