@progress/kendo-themes-html 5.4.2-dev.4 → 5.5.0
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/dist/drawer/tests/drawer-hierarchical-item-levels.js +242 -0
- package/dist/drawer/tests/drawer-hierarchical-item-levels.js.map +7 -0
- package/dist/slider/tests/slider-tick-absolute-position.js +265 -0
- package/dist/slider/tests/slider-tick-absolute-position.js.map +7 -0
- package/package.json +2 -2
- package/src/drawer/tests/drawer-hierarchical-item-levels.tsx +136 -0
- package/src/slider/tests/slider-tick-absolute-position.tsx +102 -0
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
9
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
10
|
+
}) : x)(function(x) {
|
|
11
|
+
if (typeof require !== "undefined")
|
|
12
|
+
return require.apply(this, arguments);
|
|
13
|
+
throw new Error('Dynamic require of "' + x + '" is not supported');
|
|
14
|
+
});
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
24
|
+
|
|
25
|
+
// src/drawer/tests/drawer-hierarchical-item-levels.tsx
|
|
26
|
+
var import_react = __toESM(__require("react"));
|
|
27
|
+
var import_client = __toESM(__require("react-dom/client"));
|
|
28
|
+
|
|
29
|
+
// src/icon/icon.tsx
|
|
30
|
+
var React = __toESM(__require("react"));
|
|
31
|
+
|
|
32
|
+
// src/utils/classNames.ts
|
|
33
|
+
var classNames = (...args) => {
|
|
34
|
+
const result = {};
|
|
35
|
+
const addLeafKeys = (arg) => {
|
|
36
|
+
typeof arg === "object" ? Object.keys(arg).forEach((key) => {
|
|
37
|
+
result[key] = arg[key];
|
|
38
|
+
}) : result[arg] = true;
|
|
39
|
+
};
|
|
40
|
+
const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map((arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg));
|
|
41
|
+
addKeys(args);
|
|
42
|
+
return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// src/icon/icon.tsx
|
|
46
|
+
var Icon = class extends React.Component {
|
|
47
|
+
render() {
|
|
48
|
+
const {
|
|
49
|
+
className,
|
|
50
|
+
style,
|
|
51
|
+
name
|
|
52
|
+
} = this.props;
|
|
53
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, name && /* @__PURE__ */ React.createElement("span", {
|
|
54
|
+
className: classNames(className, "k-icon", {
|
|
55
|
+
[`k-i-${name}`]: name
|
|
56
|
+
}),
|
|
57
|
+
style
|
|
58
|
+
}));
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
// src/drawer/tests/drawer-hierarchical-item-levels.tsx
|
|
63
|
+
var root = import_client.default.createRoot(document.getElementById("app"));
|
|
64
|
+
root.render(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
65
|
+
id: "test-area",
|
|
66
|
+
className: "k-d-grid k-grid-cols-4"
|
|
67
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", null, "hierarchical items"), /* @__PURE__ */ import_react.default.createElement("span", null, "hierarchical items - RTL"), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
68
|
+
className: "k-drawer-container k-drawer-push k-drawer-expanded"
|
|
69
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
70
|
+
className: "k-widget k-drawer k-drawer-start"
|
|
71
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
72
|
+
className: "k-drawer-wrapper"
|
|
73
|
+
}, /* @__PURE__ */ import_react.default.createElement("ul", {
|
|
74
|
+
className: "k-drawer-items"
|
|
75
|
+
}, /* @__PURE__ */ import_react.default.createElement("li", {
|
|
76
|
+
className: "k-drawer-item k-level-0"
|
|
77
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
78
|
+
name: "information"
|
|
79
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
80
|
+
className: "k-item-text"
|
|
81
|
+
}, "Getting Started"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
82
|
+
className: "k-drawer-toggle"
|
|
83
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
84
|
+
name: "arrow-chevron-down"
|
|
85
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
86
|
+
className: "k-drawer-item k-state-hover k-level-1"
|
|
87
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
88
|
+
name: "question"
|
|
89
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
90
|
+
className: "k-item-text"
|
|
91
|
+
}, "About Kendo UI")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
92
|
+
className: "k-drawer-item k-state-selected k-level-2"
|
|
93
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
94
|
+
name: "palette"
|
|
95
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
96
|
+
className: "k-item-text"
|
|
97
|
+
}, "Supported Themes")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
98
|
+
className: "k-drawer-item k-level-0"
|
|
99
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
100
|
+
name: "zoom"
|
|
101
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
102
|
+
className: "k-item-text"
|
|
103
|
+
}, "Overview"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
104
|
+
className: "k-drawer-toggle"
|
|
105
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
106
|
+
name: "arrow-chevron-up"
|
|
107
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
108
|
+
className: "k-drawer-item k-level-0"
|
|
109
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
110
|
+
name: "star"
|
|
111
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
112
|
+
className: "k-item-text"
|
|
113
|
+
}, "Most Popular Widgets"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
114
|
+
className: "k-drawer-toggle"
|
|
115
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
116
|
+
name: "arrow-chevron-down"
|
|
117
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
118
|
+
className: "k-drawer-item k-level-1"
|
|
119
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
120
|
+
name: "palette"
|
|
121
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
122
|
+
className: "k-item-text"
|
|
123
|
+
}, "Supported Themes")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
124
|
+
className: "k-drawer-item k-level-1"
|
|
125
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
126
|
+
name: "button"
|
|
127
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
128
|
+
className: "k-item-text"
|
|
129
|
+
}, "Button Package")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
130
|
+
className: "k-drawer-item k-level-2"
|
|
131
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
132
|
+
name: "button"
|
|
133
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
134
|
+
className: "k-item-text"
|
|
135
|
+
}, "Split Button")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
136
|
+
className: "k-drawer-item k-level-3"
|
|
137
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
138
|
+
name: "question"
|
|
139
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
140
|
+
className: "k-item-text"
|
|
141
|
+
}, "API")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
142
|
+
className: "k-drawer-item k-level-2"
|
|
143
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
144
|
+
name: "button"
|
|
145
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
146
|
+
className: "k-item-text"
|
|
147
|
+
}, "Chip List")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
148
|
+
className: "k-drawer-item k-level-3"
|
|
149
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
150
|
+
name: "question"
|
|
151
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
152
|
+
className: "k-item-text"
|
|
153
|
+
}, "API"))))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
154
|
+
dir: "rtl",
|
|
155
|
+
className: "k-drawer-container k-drawer-push k-drawer-expanded"
|
|
156
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
157
|
+
className: "k-widget k-drawer k-drawer-start"
|
|
158
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
159
|
+
className: "k-drawer-wrapper"
|
|
160
|
+
}, /* @__PURE__ */ import_react.default.createElement("ul", {
|
|
161
|
+
className: "k-drawer-items"
|
|
162
|
+
}, /* @__PURE__ */ import_react.default.createElement("li", {
|
|
163
|
+
className: "k-drawer-item k-level-0"
|
|
164
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
165
|
+
name: "information"
|
|
166
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
167
|
+
className: "k-item-text"
|
|
168
|
+
}, "Getting Started"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
169
|
+
className: "k-drawer-toggle"
|
|
170
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
171
|
+
name: "arrow-chevron-down"
|
|
172
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
173
|
+
className: "k-drawer-item k-state-hover k-level-1"
|
|
174
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
175
|
+
name: "question"
|
|
176
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
177
|
+
className: "k-item-text"
|
|
178
|
+
}, "About Kendo UI")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
179
|
+
className: "k-drawer-item k-state-selected k-level-2"
|
|
180
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
181
|
+
name: "palette"
|
|
182
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
183
|
+
className: "k-item-text"
|
|
184
|
+
}, "Supported Themes")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
185
|
+
className: "k-drawer-item k-level-0"
|
|
186
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
187
|
+
name: "zoom"
|
|
188
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
189
|
+
className: "k-item-text"
|
|
190
|
+
}, "Overview"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
191
|
+
className: "k-drawer-toggle"
|
|
192
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
193
|
+
name: "arrow-chevron-up"
|
|
194
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
195
|
+
className: "k-drawer-item k-level-0"
|
|
196
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
197
|
+
name: "star"
|
|
198
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
199
|
+
className: "k-item-text"
|
|
200
|
+
}, "Most Popular Widgets"), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
201
|
+
className: "k-drawer-toggle"
|
|
202
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
203
|
+
name: "arrow-chevron-down"
|
|
204
|
+
}))), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
205
|
+
className: "k-drawer-item k-level-1"
|
|
206
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
207
|
+
name: "palette"
|
|
208
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
209
|
+
className: "k-item-text"
|
|
210
|
+
}, "Supported Themes")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
211
|
+
className: "k-drawer-item k-level-1"
|
|
212
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
213
|
+
name: "button"
|
|
214
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
215
|
+
className: "k-item-text"
|
|
216
|
+
}, "Button Package")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
217
|
+
className: "k-drawer-item k-level-2"
|
|
218
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
219
|
+
name: "button"
|
|
220
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
221
|
+
className: "k-item-text"
|
|
222
|
+
}, "Split Button")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
223
|
+
className: "k-drawer-item k-level-3"
|
|
224
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
225
|
+
name: "question"
|
|
226
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
227
|
+
className: "k-item-text"
|
|
228
|
+
}, "API")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
229
|
+
className: "k-drawer-item k-level-2"
|
|
230
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
231
|
+
name: "button"
|
|
232
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
233
|
+
className: "k-item-text"
|
|
234
|
+
}, "Chip List")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
235
|
+
className: "k-drawer-item k-level-3"
|
|
236
|
+
}, /* @__PURE__ */ import_react.default.createElement(Icon, {
|
|
237
|
+
name: "question"
|
|
238
|
+
}), /* @__PURE__ */ import_react.default.createElement("span", {
|
|
239
|
+
className: "k-item-text"
|
|
240
|
+
}, "API"))))))))));
|
|
241
|
+
})();
|
|
242
|
+
//# sourceMappingURL=drawer-hierarchical-item-levels.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/drawer/tests/drawer-hierarchical-item-levels.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nroot.render(\n <>\n <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n <span>hierarchical items</span>\n <span>hierarchical items - RTL</span>\n <span></span>\n <span></span>\n\n <section>\n <div className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n <div className=\"k-widget k-drawer k-drawer-start\">\n <div className=\"k-drawer-wrapper\">\n <ul className=\"k-drawer-items\">\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"information\" />\n <span className=\"k-item-text\">Getting Started</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n </li>\n <li className=\"k-drawer-item k-state-hover k-level-1\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">About Kendo UI</span>\n </li>\n <li className=\"k-drawer-item k-state-selected k-level-2\">\n <Icon name=\"palette\" />\n <span className=\"k-item-text\">Supported Themes</span>\n </li>\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"zoom\" />\n <span className=\"k-item-text\">Overview</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n </li>\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"star\" />\n <span className=\"k-item-text\">Most Popular Widgets</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n </li>\n <li className=\"k-drawer-item k-level-1\">\n <Icon name=\"palette\" />\n <span className=\"k-item-text\">Supported Themes</span>\n </li>\n <li className=\"k-drawer-item k-level-1\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Button Package</span>\n </li>\n <li className=\"k-drawer-item k-level-2\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Split Button</span>\n </li>\n <li className=\"k-drawer-item k-level-3\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">API</span>\n </li>\n <li className=\"k-drawer-item k-level-2\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Chip List</span>\n </li>\n <li className=\"k-drawer-item k-level-3\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">API</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </section>\n\n <section>\n <div dir=\"rtl\" className=\"k-drawer-container k-drawer-push k-drawer-expanded\">\n <div className=\"k-widget k-drawer k-drawer-start\">\n <div className=\"k-drawer-wrapper\">\n <ul className=\"k-drawer-items\">\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"information\" />\n <span className=\"k-item-text\">Getting Started</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n </li>\n <li className=\"k-drawer-item k-state-hover k-level-1\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">About Kendo UI</span>\n </li>\n <li className=\"k-drawer-item k-state-selected k-level-2\">\n <Icon name=\"palette\" />\n <span className=\"k-item-text\">Supported Themes</span>\n </li>\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"zoom\" />\n <span className=\"k-item-text\">Overview</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-up\" /></span>\n </li>\n <li className=\"k-drawer-item k-level-0\">\n <Icon name=\"star\" />\n <span className=\"k-item-text\">Most Popular Widgets</span>\n <span className=\"k-drawer-toggle\"><Icon name=\"arrow-chevron-down\" /></span>\n </li>\n <li className=\"k-drawer-item k-level-1\">\n <Icon name=\"palette\" />\n <span className=\"k-item-text\">Supported Themes</span>\n </li>\n <li className=\"k-drawer-item k-level-1\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Button Package</span>\n </li>\n <li className=\"k-drawer-item k-level-2\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Split Button</span>\n </li>\n <li className=\"k-drawer-item k-level-3\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">API</span>\n </li>\n <li className=\"k-drawer-item k-level-2\">\n <Icon name=\"button\" />\n <span className=\"k-item-text\">Chip List</span>\n </li>\n <li className=\"k-drawer-item k-level-3\">\n <Icon name=\"question\" />\n <span className=\"k-item-text\">API</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </section>\n\n </div>\n </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n className?: string;\n style?: React.CSSProperties;\n name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n render() {\n const {\n className,\n style,\n name\n } = this.props;\n\n return (\n <>\n { name &&\n <span\n className={classNames(\n className,\n 'k-icon',\n {\n [`k-i-${name}`]: name\n }\n )}\n style={style}>\n </span>\n }\n </>\n );\n }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n const result = {};\n\n const addLeafKeys = (arg) => {\n (typeof arg === 'object'\n ? Object.keys(arg).forEach((key) => {\n result[key] = arg[key];\n })\n : (result[arg] = true)\n );\n };\n\n const addKeys = (list) =>\n list\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) =>\n (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n );\n\n addKeys(args);\n\n return Object.keys(result)\n .map((key) => (result[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ');\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
9
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
10
|
+
}) : x)(function(x) {
|
|
11
|
+
if (typeof require !== "undefined")
|
|
12
|
+
return require.apply(this, arguments);
|
|
13
|
+
throw new Error('Dynamic require of "' + x + '" is not supported');
|
|
14
|
+
});
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
24
|
+
|
|
25
|
+
// src/slider/tests/slider-tick-absolute-position.tsx
|
|
26
|
+
var import_react = __toESM(__require("react"));
|
|
27
|
+
var import_client = __toESM(__require("react-dom/client"));
|
|
28
|
+
|
|
29
|
+
// src/button/button.tsx
|
|
30
|
+
var React2 = __toESM(__require("react"));
|
|
31
|
+
|
|
32
|
+
// src/utils/classNames.ts
|
|
33
|
+
var classNames = (...args) => {
|
|
34
|
+
const result = {};
|
|
35
|
+
const addLeafKeys = (arg) => {
|
|
36
|
+
typeof arg === "object" ? Object.keys(arg).forEach((key) => {
|
|
37
|
+
result[key] = arg[key];
|
|
38
|
+
}) : result[arg] = true;
|
|
39
|
+
};
|
|
40
|
+
const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map((arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg));
|
|
41
|
+
addKeys(args);
|
|
42
|
+
return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// src/utils/theme.ts
|
|
46
|
+
var kendoThemeMaps = {
|
|
47
|
+
sizeMap: {
|
|
48
|
+
small: "sm",
|
|
49
|
+
medium: "md",
|
|
50
|
+
large: "lg"
|
|
51
|
+
},
|
|
52
|
+
roundedMap: {
|
|
53
|
+
small: "sm",
|
|
54
|
+
medium: "md",
|
|
55
|
+
large: "lg"
|
|
56
|
+
},
|
|
57
|
+
calloutMap: {
|
|
58
|
+
top: "n",
|
|
59
|
+
bottom: "s",
|
|
60
|
+
left: "w",
|
|
61
|
+
right: "e"
|
|
62
|
+
},
|
|
63
|
+
orientationMap: {
|
|
64
|
+
vertical: "vstack",
|
|
65
|
+
horizontal: "hstack"
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// src/icon/icon.tsx
|
|
70
|
+
var React = __toESM(__require("react"));
|
|
71
|
+
var Icon = class extends React.Component {
|
|
72
|
+
render() {
|
|
73
|
+
const {
|
|
74
|
+
className,
|
|
75
|
+
style: style2,
|
|
76
|
+
name
|
|
77
|
+
} = this.props;
|
|
78
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, name && /* @__PURE__ */ React.createElement("span", {
|
|
79
|
+
className: classNames(className, "k-icon", {
|
|
80
|
+
[`k-i-${name}`]: name
|
|
81
|
+
}),
|
|
82
|
+
style: style2
|
|
83
|
+
}));
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// src/button/button.tsx
|
|
88
|
+
var Button = class extends React2.Component {
|
|
89
|
+
render() {
|
|
90
|
+
const {
|
|
91
|
+
children,
|
|
92
|
+
className,
|
|
93
|
+
iconClassName,
|
|
94
|
+
text,
|
|
95
|
+
icon,
|
|
96
|
+
size,
|
|
97
|
+
rounded,
|
|
98
|
+
fillMode,
|
|
99
|
+
themeColor,
|
|
100
|
+
hover,
|
|
101
|
+
focus,
|
|
102
|
+
active,
|
|
103
|
+
selected,
|
|
104
|
+
disabled,
|
|
105
|
+
...htmlAttributes
|
|
106
|
+
} = this.props;
|
|
107
|
+
const hasIcon = icon !== void 0;
|
|
108
|
+
const hasChildren = children !== void 0;
|
|
109
|
+
return /* @__PURE__ */ React2.createElement("button", {
|
|
110
|
+
style: this.props.style,
|
|
111
|
+
...htmlAttributes,
|
|
112
|
+
dir: this.props.dir,
|
|
113
|
+
className: classNames(className, "k-button", {
|
|
114
|
+
[`k-button-${kendoThemeMaps.sizeMap[size] || size}`]: size,
|
|
115
|
+
[`k-button-${fillMode}`]: fillMode,
|
|
116
|
+
[`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
|
|
117
|
+
[`k-rounded-${kendoThemeMaps.roundedMap[rounded] || rounded}`]: rounded,
|
|
118
|
+
"k-icon-button": !hasChildren && hasIcon,
|
|
119
|
+
"k-hover": hover,
|
|
120
|
+
"k-focus": focus,
|
|
121
|
+
"k-active": active,
|
|
122
|
+
"k-selected": selected,
|
|
123
|
+
"k-disabled": disabled
|
|
124
|
+
})
|
|
125
|
+
}, icon && /* @__PURE__ */ React2.createElement(Icon, {
|
|
126
|
+
className: classNames(iconClassName, "k-button-icon"),
|
|
127
|
+
name: icon
|
|
128
|
+
}), text || hasIcon ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, text && /* @__PURE__ */ React2.createElement("span", {
|
|
129
|
+
className: "k-button-text"
|
|
130
|
+
}, text), children) : children && /* @__PURE__ */ React2.createElement("span", {
|
|
131
|
+
className: "k-button-text"
|
|
132
|
+
}, children));
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
Button.defaultProps = {
|
|
136
|
+
size: "medium",
|
|
137
|
+
rounded: "medium",
|
|
138
|
+
fillMode: "solid",
|
|
139
|
+
themeColor: "base"
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
// src/slider/tests/slider-tick-absolute-position.tsx
|
|
143
|
+
var root = import_client.default.createRoot(document.getElementById("app"));
|
|
144
|
+
var style = `
|
|
145
|
+
.k-slider-horizontal {
|
|
146
|
+
width: 1px;
|
|
147
|
+
width: 100%;
|
|
148
|
+
}
|
|
149
|
+
.k-slider-vertical {
|
|
150
|
+
height: 300px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.k-slider {
|
|
154
|
+
--kendo-slider-start: 0;
|
|
155
|
+
--kendo-slider-end: 60;
|
|
156
|
+
}
|
|
157
|
+
.k-range-slider {
|
|
158
|
+
--kendo-slider-start: 20;
|
|
159
|
+
--kendo-slider-end: 60;
|
|
160
|
+
}
|
|
161
|
+
`;
|
|
162
|
+
root.render(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, style), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
163
|
+
id: "test-area",
|
|
164
|
+
className: "k-d-grid k-grid-cols-4"
|
|
165
|
+
}, /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
166
|
+
className: "k-widget k-slider k-slider-horizontal"
|
|
167
|
+
}, /* @__PURE__ */ import_react.default.createElement(Button, {
|
|
168
|
+
icon: "arrow-w",
|
|
169
|
+
rounded: "full",
|
|
170
|
+
className: "k-button-decrease"
|
|
171
|
+
}), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
172
|
+
className: "k-slider-track-wrap"
|
|
173
|
+
}, /* @__PURE__ */ import_react.default.createElement("ul", {
|
|
174
|
+
className: "k-reset k-slider-items",
|
|
175
|
+
style: { position: "relative" }
|
|
176
|
+
}, /* @__PURE__ */ import_react.default.createElement("li", {
|
|
177
|
+
className: "k-tick k-tick-large k-tick-horizontal",
|
|
178
|
+
style: { zIndex: 1, position: "absolute", left: "0%" }
|
|
179
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
180
|
+
className: "k-label"
|
|
181
|
+
}, "0")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
182
|
+
className: "k-tick k-tick-large k-tick-horizontal",
|
|
183
|
+
style: { zIndex: 1, position: "absolute", left: "33%" }
|
|
184
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
185
|
+
className: "k-label"
|
|
186
|
+
}, "33")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
187
|
+
className: "k-tick k-tick-large k-tick-horizontal",
|
|
188
|
+
style: { zIndex: 1, position: "absolute", left: "50%" }
|
|
189
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
190
|
+
className: "k-label"
|
|
191
|
+
}, "50")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
192
|
+
className: "k-tick k-tick-large k-tick-horizontal",
|
|
193
|
+
style: { zIndex: 1, position: "absolute", left: "75%" }
|
|
194
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
195
|
+
className: "k-label"
|
|
196
|
+
}, "75")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
197
|
+
className: "k-tick k-tick-large k-tick-horizontal",
|
|
198
|
+
style: { zIndex: 1, position: "absolute", left: "100%" }
|
|
199
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
200
|
+
className: "k-label"
|
|
201
|
+
}, "100"))), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
202
|
+
className: "k-slider-track"
|
|
203
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
204
|
+
className: "k-slider-selection",
|
|
205
|
+
style: { width: "33%" }
|
|
206
|
+
}), /* @__PURE__ */ import_react.default.createElement("a", {
|
|
207
|
+
href: "#",
|
|
208
|
+
className: "k-draghandle k-draghandle-end",
|
|
209
|
+
style: { left: "33%", zIndex: 1 }
|
|
210
|
+
}))), /* @__PURE__ */ import_react.default.createElement(Button, {
|
|
211
|
+
icon: "arrow-e",
|
|
212
|
+
rounded: "full",
|
|
213
|
+
className: "k-button-increase"
|
|
214
|
+
}))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
215
|
+
className: "k-widget k-slider k-slider-vertical"
|
|
216
|
+
}, /* @__PURE__ */ import_react.default.createElement(Button, {
|
|
217
|
+
icon: "arrow-s",
|
|
218
|
+
rounded: "full",
|
|
219
|
+
className: "k-button-decrease"
|
|
220
|
+
}), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
221
|
+
className: "k-slider-track-wrap"
|
|
222
|
+
}, /* @__PURE__ */ import_react.default.createElement("ul", {
|
|
223
|
+
className: "k-reset k-slider-items",
|
|
224
|
+
style: { position: "relative" }
|
|
225
|
+
}, /* @__PURE__ */ import_react.default.createElement("li", {
|
|
226
|
+
className: "k-tick k-tick-large k-tick-vertical",
|
|
227
|
+
style: { zIndex: 1, position: "absolute", bottom: "100%" }
|
|
228
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
229
|
+
className: "k-label"
|
|
230
|
+
}, "100")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
231
|
+
className: "k-tick k-tick-large k-tick-vertical",
|
|
232
|
+
style: { zIndex: 1, position: "absolute", bottom: "75%" }
|
|
233
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
234
|
+
className: "k-label"
|
|
235
|
+
}, "75")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
236
|
+
className: "k-tick k-tick-large k-tick-vertical",
|
|
237
|
+
style: { zIndex: 1, position: "absolute", bottom: "50%" }
|
|
238
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
239
|
+
className: "k-label"
|
|
240
|
+
}, "50")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
241
|
+
className: "k-tick k-tick-large k-tick-vertical",
|
|
242
|
+
style: { zIndex: 1, position: "absolute", bottom: "33%" }
|
|
243
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
244
|
+
className: "k-label"
|
|
245
|
+
}, "33")), /* @__PURE__ */ import_react.default.createElement("li", {
|
|
246
|
+
className: "k-tick k-tick-large k-tick-vertical",
|
|
247
|
+
style: { zIndex: 1, position: "absolute", bottom: "0" }
|
|
248
|
+
}, /* @__PURE__ */ import_react.default.createElement("span", {
|
|
249
|
+
className: "k-label"
|
|
250
|
+
}, "0"))), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
251
|
+
className: "k-slider-track"
|
|
252
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
253
|
+
className: "k-slider-selection",
|
|
254
|
+
style: { bottom: "0", height: "33%" }
|
|
255
|
+
}), /* @__PURE__ */ import_react.default.createElement("a", {
|
|
256
|
+
href: "#",
|
|
257
|
+
className: "k-draghandle k-draghandle-end",
|
|
258
|
+
style: { bottom: "33%", zIndex: 1 }
|
|
259
|
+
}))), /* @__PURE__ */ import_react.default.createElement(Button, {
|
|
260
|
+
icon: "arrow-n",
|
|
261
|
+
rounded: "full",
|
|
262
|
+
className: "k-button-increase"
|
|
263
|
+
}))))));
|
|
264
|
+
})();
|
|
265
|
+
//# sourceMappingURL=slider-tick-absolute-position.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/slider/tests/slider-tick-absolute-position.tsx", "../../../src/button/button.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n .k-slider-horizontal {\n width: 1px;\n width: 100%;\n }\n .k-slider-vertical {\n height: 300px;\n }\n\n .k-slider {\n --kendo-slider-start: 0;\n --kendo-slider-end: 60;\n }\n .k-range-slider {\n --kendo-slider-start: 20;\n --kendo-slider-end: 60;\n }\n`;\n\nroot.render(\n <>\n <style>{style}</style>\n <div id=\"test-area\" className=\"k-d-grid k-grid-cols-4\">\n\n <section>\n <div className=\"k-widget k-slider k-slider-horizontal\">\n <Button icon=\"arrow-w\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n <div className=\"k-slider-track-wrap\">\n <ul className=\"k-reset k-slider-items\" style={{ position: 'relative' }}>\n <li className=\"k-tick k-tick-large k-tick-horizontal\" style={{ zIndex: 1, position: 'absolute', left: '0%' }}>\n <span className=\"k-label\">0</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-horizontal\" style={{ zIndex: 1, position: 'absolute', left: '33%' }}>\n <span className=\"k-label\">33</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-horizontal\" style={{ zIndex: 1, position: 'absolute', left: '50%' }}>\n <span className=\"k-label\">50</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-horizontal\" style={{ zIndex: 1, position: 'absolute', left: '75%' }}>\n <span className=\"k-label\">75</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-horizontal\" style={{ zIndex: 1, position: 'absolute', left: '100%' }}>\n <span className=\"k-label\">100</span>\n </li>\n </ul>\n <div className=\"k-slider-track\">\n <div className=\"k-slider-selection\" style={{ width: '33%' }}></div>\n <a href=\"#\" className=\"k-draghandle k-draghandle-end\" style={{ left: '33%', zIndex: 1 }}></a>\n </div>\n </div>\n <Button icon=\"arrow-e\" rounded=\"full\" className=\"k-button-increase\"></Button>\n </div>\n </section>\n\n <section>\n <div className=\"k-widget k-slider k-slider-vertical\">\n <Button icon=\"arrow-s\" rounded=\"full\" className=\"k-button-decrease\"></Button>\n <div className=\"k-slider-track-wrap\">\n <ul className=\"k-reset k-slider-items\" style={{ position: 'relative' }}>\n <li className=\"k-tick k-tick-large k-tick-vertical\" style={{ zIndex: 1, position: 'absolute', bottom: '100%' }}>\n <span className=\"k-label\">100</span>\n </li>\n <li className=\"k-tick k-tick-large k-tick-vertical\" style={{ zIndex: 1, position: 'absolute', bottom: '75%' }}>\n <span className=\"k-label\">75</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-vertical\" style={{ zIndex: 1, position: 'absolute', bottom: '50%' }}>\n <span className=\"k-label\">50</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-vertical\" style={{ zIndex: 1, position: 'absolute', bottom: '33%' }}>\n <span className=\"k-label\">33</span>\n </li>\n\n <li className=\"k-tick k-tick-large k-tick-vertical\" style={{ zIndex: 1, position: 'absolute', bottom: '0' }}>\n <span className=\"k-label\">0</span>\n </li>\n </ul>\n <div className=\"k-slider-track\">\n <div className=\"k-slider-selection\" style={{ bottom: '0', height: '33%' }}></div>\n <a href=\"#\" className=\"k-draghandle k-draghandle-end\" style={{ bottom: '33%', zIndex: 1 }}></a>\n </div>\n </div>\n <Button icon=\"arrow-n\" rounded=\"full\" className=\"k-button-increase\"></Button>\n </div>\n </section>\n\n </div>\n </>\n);\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon/';\n\nexport interface ButtonProps {\n children?: React.ReactNode;\n className?: string;\n dir?: string;\n style?: React.CSSProperties;\n iconClassName?: string;\n text?: string;\n icon?: string;\n size?: null | 'small' | 'medium' | 'large';\n rounded: null | 'small' | 'medium' | 'large' | 'full';\n fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear';\n themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n hover?: boolean;\n focus?: boolean;\n active?: boolean;\n selected?: boolean;\n disabled?: boolean;\n}\n\nexport class Button extends React.Component<ButtonProps> {\n\n static defaultProps = {\n size: 'medium',\n rounded: 'medium',\n fillMode: 'solid',\n themeColor: 'base'\n };\n\n render() {\n const {\n children,\n className,\n iconClassName,\n text,\n icon,\n size,\n rounded,\n fillMode,\n themeColor,\n hover,\n focus,\n active,\n selected,\n disabled,\n ...htmlAttributes\n } = this.props;\n\n const hasIcon = (icon !== undefined);\n const hasChildren = children !== undefined;\n\n return (\n <button\n style={this.props.style}\n {...htmlAttributes}\n dir={this.props.dir}\n className={classNames(\n className,\n 'k-button',\n {\n [`k-button-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n [`k-button-${fillMode}`]: fillMode,\n [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n 'k-icon-button': !hasChildren && hasIcon,\n 'k-hover': hover,\n 'k-focus': focus,\n 'k-active': active,\n 'k-selected': selected,\n 'k-disabled': disabled\n }\n )}>\n {icon && <Icon className={classNames(iconClassName, 'k-button-icon')} name={icon} />}\n\n {text || hasIcon\n ?\n <>\n {text && <span className=\"k-button-text\">{text}</span>}\n {children}\n </>\n : children && <span className=\"k-button-text\">{children}</span>\n }\n </button>\n );\n }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n const result = {};\n\n const addLeafKeys = (arg) => {\n (typeof arg === 'object'\n ? Object.keys(arg).forEach((key) => {\n result[key] = arg[key];\n })\n : (result[arg] = true)\n );\n };\n\n const addKeys = (list) =>\n list\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) =>\n (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n );\n\n addKeys(args);\n\n return Object.keys(result)\n .map((key) => (result[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ');\n};\n", "export interface KendoThemeMaps {\n sizeMap: Record<Exclude<any, null>, string>;\n roundedMap: Record<Exclude<any, null>, string>;\n calloutMap: Record<Exclude<any, null>, string>;\n orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n sizeMap: {\n small: 'sm',\n medium: 'md',\n large: 'lg'\n },\n roundedMap: {\n small: 'sm',\n medium: 'md',\n large: 'lg'\n },\n calloutMap: {\n top: 'n',\n bottom: 's',\n left: 'w',\n right: 'e'\n },\n orientationMap: {\n vertical: 'vstack',\n horizontal: 'hstack',\n },\n};\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n className?: string;\n style?: React.CSSProperties;\n name?: string;\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n render() {\n const {\n className,\n style,\n name\n } = this.props;\n\n return (\n <>\n { name &&\n <span\n className={classNames(\n className,\n 'k-icon',\n {\n [`k-i-${name}`]: name\n }\n )}\n style={style}>\n </span>\n }\n </>\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
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.
|
|
4
|
+
"version": "5.5.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"glob": "^8.0.3",
|
|
47
47
|
"typescript": "^4.7.2"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "a8983b1816145854eea44b64fc9ee9bc3c5105f6"
|
|
50
50
|
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import { Icon } from '../../icon';
|
|
4
|
+
|
|
5
|
+
const root = ReactDOM.createRoot(
|
|
6
|
+
document.getElementById('app') as HTMLElement
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
root.render(
|
|
10
|
+
<>
|
|
11
|
+
<div id="test-area" className="k-d-grid k-grid-cols-4">
|
|
12
|
+
|
|
13
|
+
<span>hierarchical items</span>
|
|
14
|
+
<span>hierarchical items - RTL</span>
|
|
15
|
+
<span></span>
|
|
16
|
+
<span></span>
|
|
17
|
+
|
|
18
|
+
<section>
|
|
19
|
+
<div className="k-drawer-container k-drawer-push k-drawer-expanded">
|
|
20
|
+
<div className="k-widget k-drawer k-drawer-start">
|
|
21
|
+
<div className="k-drawer-wrapper">
|
|
22
|
+
<ul className="k-drawer-items">
|
|
23
|
+
<li className="k-drawer-item k-level-0">
|
|
24
|
+
<Icon name="information" />
|
|
25
|
+
<span className="k-item-text">Getting Started</span>
|
|
26
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
|
|
27
|
+
</li>
|
|
28
|
+
<li className="k-drawer-item k-state-hover k-level-1">
|
|
29
|
+
<Icon name="question" />
|
|
30
|
+
<span className="k-item-text">About Kendo UI</span>
|
|
31
|
+
</li>
|
|
32
|
+
<li className="k-drawer-item k-state-selected k-level-2">
|
|
33
|
+
<Icon name="palette" />
|
|
34
|
+
<span className="k-item-text">Supported Themes</span>
|
|
35
|
+
</li>
|
|
36
|
+
<li className="k-drawer-item k-level-0">
|
|
37
|
+
<Icon name="zoom" />
|
|
38
|
+
<span className="k-item-text">Overview</span>
|
|
39
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-up" /></span>
|
|
40
|
+
</li>
|
|
41
|
+
<li className="k-drawer-item k-level-0">
|
|
42
|
+
<Icon name="star" />
|
|
43
|
+
<span className="k-item-text">Most Popular Widgets</span>
|
|
44
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
|
|
45
|
+
</li>
|
|
46
|
+
<li className="k-drawer-item k-level-1">
|
|
47
|
+
<Icon name="palette" />
|
|
48
|
+
<span className="k-item-text">Supported Themes</span>
|
|
49
|
+
</li>
|
|
50
|
+
<li className="k-drawer-item k-level-1">
|
|
51
|
+
<Icon name="button" />
|
|
52
|
+
<span className="k-item-text">Button Package</span>
|
|
53
|
+
</li>
|
|
54
|
+
<li className="k-drawer-item k-level-2">
|
|
55
|
+
<Icon name="button" />
|
|
56
|
+
<span className="k-item-text">Split Button</span>
|
|
57
|
+
</li>
|
|
58
|
+
<li className="k-drawer-item k-level-3">
|
|
59
|
+
<Icon name="question" />
|
|
60
|
+
<span className="k-item-text">API</span>
|
|
61
|
+
</li>
|
|
62
|
+
<li className="k-drawer-item k-level-2">
|
|
63
|
+
<Icon name="button" />
|
|
64
|
+
<span className="k-item-text">Chip List</span>
|
|
65
|
+
</li>
|
|
66
|
+
<li className="k-drawer-item k-level-3">
|
|
67
|
+
<Icon name="question" />
|
|
68
|
+
<span className="k-item-text">API</span>
|
|
69
|
+
</li>
|
|
70
|
+
</ul>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</section>
|
|
75
|
+
|
|
76
|
+
<section>
|
|
77
|
+
<div dir="rtl" className="k-drawer-container k-drawer-push k-drawer-expanded">
|
|
78
|
+
<div className="k-widget k-drawer k-drawer-start">
|
|
79
|
+
<div className="k-drawer-wrapper">
|
|
80
|
+
<ul className="k-drawer-items">
|
|
81
|
+
<li className="k-drawer-item k-level-0">
|
|
82
|
+
<Icon name="information" />
|
|
83
|
+
<span className="k-item-text">Getting Started</span>
|
|
84
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
|
|
85
|
+
</li>
|
|
86
|
+
<li className="k-drawer-item k-state-hover k-level-1">
|
|
87
|
+
<Icon name="question" />
|
|
88
|
+
<span className="k-item-text">About Kendo UI</span>
|
|
89
|
+
</li>
|
|
90
|
+
<li className="k-drawer-item k-state-selected k-level-2">
|
|
91
|
+
<Icon name="palette" />
|
|
92
|
+
<span className="k-item-text">Supported Themes</span>
|
|
93
|
+
</li>
|
|
94
|
+
<li className="k-drawer-item k-level-0">
|
|
95
|
+
<Icon name="zoom" />
|
|
96
|
+
<span className="k-item-text">Overview</span>
|
|
97
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-up" /></span>
|
|
98
|
+
</li>
|
|
99
|
+
<li className="k-drawer-item k-level-0">
|
|
100
|
+
<Icon name="star" />
|
|
101
|
+
<span className="k-item-text">Most Popular Widgets</span>
|
|
102
|
+
<span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
|
|
103
|
+
</li>
|
|
104
|
+
<li className="k-drawer-item k-level-1">
|
|
105
|
+
<Icon name="palette" />
|
|
106
|
+
<span className="k-item-text">Supported Themes</span>
|
|
107
|
+
</li>
|
|
108
|
+
<li className="k-drawer-item k-level-1">
|
|
109
|
+
<Icon name="button" />
|
|
110
|
+
<span className="k-item-text">Button Package</span>
|
|
111
|
+
</li>
|
|
112
|
+
<li className="k-drawer-item k-level-2">
|
|
113
|
+
<Icon name="button" />
|
|
114
|
+
<span className="k-item-text">Split Button</span>
|
|
115
|
+
</li>
|
|
116
|
+
<li className="k-drawer-item k-level-3">
|
|
117
|
+
<Icon name="question" />
|
|
118
|
+
<span className="k-item-text">API</span>
|
|
119
|
+
</li>
|
|
120
|
+
<li className="k-drawer-item k-level-2">
|
|
121
|
+
<Icon name="button" />
|
|
122
|
+
<span className="k-item-text">Chip List</span>
|
|
123
|
+
</li>
|
|
124
|
+
<li className="k-drawer-item k-level-3">
|
|
125
|
+
<Icon name="question" />
|
|
126
|
+
<span className="k-item-text">API</span>
|
|
127
|
+
</li>
|
|
128
|
+
</ul>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</section>
|
|
133
|
+
|
|
134
|
+
</div>
|
|
135
|
+
</>
|
|
136
|
+
);
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ReactDOM from 'react-dom/client';
|
|
3
|
+
import { Button } from '../../button';
|
|
4
|
+
|
|
5
|
+
const root = ReactDOM.createRoot(
|
|
6
|
+
document.getElementById('app') as HTMLElement
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
const style = `
|
|
10
|
+
.k-slider-horizontal {
|
|
11
|
+
width: 1px;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
.k-slider-vertical {
|
|
15
|
+
height: 300px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.k-slider {
|
|
19
|
+
--kendo-slider-start: 0;
|
|
20
|
+
--kendo-slider-end: 60;
|
|
21
|
+
}
|
|
22
|
+
.k-range-slider {
|
|
23
|
+
--kendo-slider-start: 20;
|
|
24
|
+
--kendo-slider-end: 60;
|
|
25
|
+
}
|
|
26
|
+
`;
|
|
27
|
+
|
|
28
|
+
root.render(
|
|
29
|
+
<>
|
|
30
|
+
<style>{style}</style>
|
|
31
|
+
<div id="test-area" className="k-d-grid k-grid-cols-4">
|
|
32
|
+
|
|
33
|
+
<section>
|
|
34
|
+
<div className="k-widget k-slider k-slider-horizontal">
|
|
35
|
+
<Button icon="arrow-w" rounded="full" className="k-button-decrease"></Button>
|
|
36
|
+
<div className="k-slider-track-wrap">
|
|
37
|
+
<ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
|
|
38
|
+
<li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '0%' }}>
|
|
39
|
+
<span className="k-label">0</span>
|
|
40
|
+
</li>
|
|
41
|
+
|
|
42
|
+
<li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '33%' }}>
|
|
43
|
+
<span className="k-label">33</span>
|
|
44
|
+
</li>
|
|
45
|
+
|
|
46
|
+
<li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '50%' }}>
|
|
47
|
+
<span className="k-label">50</span>
|
|
48
|
+
</li>
|
|
49
|
+
|
|
50
|
+
<li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '75%' }}>
|
|
51
|
+
<span className="k-label">75</span>
|
|
52
|
+
</li>
|
|
53
|
+
|
|
54
|
+
<li className="k-tick k-tick-large k-tick-horizontal" style={{ zIndex: 1, position: 'absolute', left: '100%' }}>
|
|
55
|
+
<span className="k-label">100</span>
|
|
56
|
+
</li>
|
|
57
|
+
</ul>
|
|
58
|
+
<div className="k-slider-track">
|
|
59
|
+
<div className="k-slider-selection" style={{ width: '33%' }}></div>
|
|
60
|
+
<a href="#" className="k-draghandle k-draghandle-end" style={{ left: '33%', zIndex: 1 }}></a>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<Button icon="arrow-e" rounded="full" className="k-button-increase"></Button>
|
|
64
|
+
</div>
|
|
65
|
+
</section>
|
|
66
|
+
|
|
67
|
+
<section>
|
|
68
|
+
<div className="k-widget k-slider k-slider-vertical">
|
|
69
|
+
<Button icon="arrow-s" rounded="full" className="k-button-decrease"></Button>
|
|
70
|
+
<div className="k-slider-track-wrap">
|
|
71
|
+
<ul className="k-reset k-slider-items" style={{ position: 'relative' }}>
|
|
72
|
+
<li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '100%' }}>
|
|
73
|
+
<span className="k-label">100</span>
|
|
74
|
+
</li>
|
|
75
|
+
<li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '75%' }}>
|
|
76
|
+
<span className="k-label">75</span>
|
|
77
|
+
</li>
|
|
78
|
+
|
|
79
|
+
<li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '50%' }}>
|
|
80
|
+
<span className="k-label">50</span>
|
|
81
|
+
</li>
|
|
82
|
+
|
|
83
|
+
<li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '33%' }}>
|
|
84
|
+
<span className="k-label">33</span>
|
|
85
|
+
</li>
|
|
86
|
+
|
|
87
|
+
<li className="k-tick k-tick-large k-tick-vertical" style={{ zIndex: 1, position: 'absolute', bottom: '0' }}>
|
|
88
|
+
<span className="k-label">0</span>
|
|
89
|
+
</li>
|
|
90
|
+
</ul>
|
|
91
|
+
<div className="k-slider-track">
|
|
92
|
+
<div className="k-slider-selection" style={{ bottom: '0', height: '33%' }}></div>
|
|
93
|
+
<a href="#" className="k-draghandle k-draghandle-end" style={{ bottom: '33%', zIndex: 1 }}></a>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
<Button icon="arrow-n" rounded="full" className="k-button-increase"></Button>
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
100
|
+
</div>
|
|
101
|
+
</>
|
|
102
|
+
);
|