@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170
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/context-menu/tests/context-menu-in-window.js +1 -4
- package/dist/context-menu/tests/context-menu-in-window.js.map +2 -2
- package/dist/datetime-selector/datetime-selector.spec.js +2 -2
- package/dist/datetime-selector/datetime-selector.spec.js.map +2 -2
- package/dist/datetime-selector/tests/datetime-selector.js +2 -2
- package/dist/datetime-selector/tests/datetime-selector.js.map +2 -2
- package/dist/datetimepicker/datetimepicker.spec.js +2 -2
- package/dist/datetimepicker/datetimepicker.spec.js.map +2 -2
- package/dist/datetimepicker/tests/datetimepicker-opened.js +2 -2
- package/dist/datetimepicker/tests/datetimepicker-opened.js.map +2 -2
- package/dist/datetimepicker/tests/datetimepicker.js +2 -2
- package/dist/datetimepicker/tests/datetimepicker.js.map +2 -2
- package/dist/dialog/dialog.spec.js +1 -4
- package/dist/dialog/dialog.spec.js.map +2 -2
- package/dist/dialog/tests/dialog-action-buttons.js +82 -73
- package/dist/dialog/tests/dialog-action-buttons.js.map +3 -3
- package/dist/dialog/tests/dialog-in-window.js +2 -8
- package/dist/dialog/tests/dialog-in-window.js.map +2 -2
- package/dist/dialog/tests/dialog-modal.js +70 -70
- package/dist/dialog/tests/dialog-modal.js.map +3 -3
- package/dist/dialog/tests/dialog-theme-colors.js +82 -73
- package/dist/dialog/tests/dialog-theme-colors.js.map +3 -3
- package/dist/dialog/tests/dialog.js +86 -74
- package/dist/dialog/tests/dialog.js.map +3 -3
- package/dist/editor/tests/editor-find-replace.js +1 -4
- package/dist/editor/tests/editor-find-replace.js.map +2 -2
- package/dist/editor/tests/editor-image-editor.js +276 -276
- package/dist/editor/tests/editor-image-editor.js.map +4 -4
- package/dist/editor/tests/editor-table-wizard-accessibility.js +5 -5
- package/dist/editor/tests/editor-table-wizard-accessibility.js.map +2 -2
- package/dist/editor/tests/editor-view-source.js +5 -5
- package/dist/editor/tests/editor-view-source.js.map +2 -2
- package/dist/filemanager/tests/filemanager-dialogs.js +79 -73
- package/dist/filemanager/tests/filemanager-dialogs.js.map +3 -3
- package/dist/form/tests/form-field-dateinputs.js +4 -4
- package/dist/form/tests/form-field-dateinputs.js.map +2 -2
- package/dist/gantt/tests/gantt-editing-popup-general.js +2300 -0
- package/dist/gantt/tests/gantt-editing-popup-general.js.map +7 -0
- package/dist/gantt/tests/gantt-editing-popup-other.js +2035 -0
- package/dist/gantt/tests/gantt-editing-popup-other.js.map +7 -0
- package/dist/gantt/tests/gantt-editing-popup-predecessors.js +1895 -0
- package/dist/gantt/tests/gantt-editing-popup-predecessors.js.map +7 -0
- package/dist/gantt/tests/gantt-editing-popup-resources.js +2195 -0
- package/dist/gantt/tests/gantt-editing-popup-resources.js.map +7 -0
- package/dist/gantt/tests/gantt-editing-popup-successors.js +1895 -0
- package/dist/gantt/tests/gantt-editing-popup-successors.js.map +7 -0
- package/dist/grid/tests/grid-column-menu-rtl.js +8 -8
- package/dist/grid/tests/grid-column-menu-rtl.js.map +2 -2
- package/dist/grid/tests/grid-column-menu-tabbed.js +1331 -0
- package/dist/grid/tests/grid-column-menu-tabbed.js.map +7 -0
- package/dist/grid/tests/grid-column-menu.js +8 -8
- package/dist/grid/tests/grid-column-menu.js.map +2 -2
- package/dist/grid/tests/grid-editing-custom-editor.js +4 -4
- package/dist/grid/tests/grid-editing-custom-editor.js.map +2 -2
- package/dist/grid/tests/grid-editing-popup.js +724 -338
- package/dist/grid/tests/grid-editing-popup.js.map +4 -4
- package/dist/grid/tests/grid-filter-menu-multi-checkbox.js +8 -8
- package/dist/grid/tests/grid-filter-menu-multi-checkbox.js.map +2 -2
- package/dist/grid/tests/grid-filter-menu.js +2 -2
- package/dist/grid/tests/grid-filter-menu.js.map +2 -2
- package/dist/grid/tests/grid-filter-row.js +4 -4
- package/dist/grid/tests/grid-filter-row.js.map +2 -2
- package/dist/grid/tests/grid-rows-resizing.js +2 -2
- package/dist/grid/tests/grid-rows-resizing.js.map +2 -2
- package/dist/grid/tests/grid-selection-aggregates.js +1348 -0
- package/dist/grid/tests/grid-selection-aggregates.js.map +7 -0
- package/dist/imageeditor/tests/imageeditor-crop-pane.js +48 -32
- package/dist/imageeditor/tests/imageeditor-crop-pane.js.map +2 -2
- package/dist/imageeditor/tests/imageeditor-resize-pane.js +45 -22
- package/dist/imageeditor/tests/imageeditor-resize-pane.js.map +2 -2
- package/dist/index.js +6 -12
- package/dist/index.js.map +2 -2
- package/dist/scheduler/tests/scheduler-edit-dialog.js +1394 -882
- package/dist/scheduler/tests/scheduler-edit-dialog.js.map +4 -4
- package/dist/scheduler/tests/scheduler-editing-weekly.js +2964 -0
- package/dist/scheduler/tests/scheduler-editing-weekly.js.map +7 -0
- package/dist/spreadsheet/tests/spreadsheet-dialog.js +10 -7
- package/dist/spreadsheet/tests/spreadsheet-dialog.js.map +2 -2
- package/dist/timepicker/tests/timepicker-flat.js +2 -2
- package/dist/timepicker/tests/timepicker-flat.js.map +2 -2
- package/dist/timepicker/tests/timepicker-opened.js +2 -2
- package/dist/timepicker/tests/timepicker-opened.js.map +2 -2
- package/dist/timepicker/tests/timepicker-outline.js +2 -2
- package/dist/timepicker/tests/timepicker-outline.js.map +2 -2
- package/dist/timepicker/tests/timepicker.js +2 -2
- package/dist/timepicker/tests/timepicker.js.map +2 -2
- package/dist/timepicker/timepicker.spec.js +2 -2
- package/dist/timepicker/timepicker.spec.js.map +2 -2
- package/dist/treelist/tests/treelist-editing-popup.js +1939 -0
- package/dist/treelist/tests/treelist-editing-popup.js.map +7 -0
- package/dist/window/tests/window-action-buttons.js +82 -73
- package/dist/window/tests/window-action-buttons.js.map +3 -3
- package/dist/window/tests/window-rtl.js +1 -4
- package/dist/window/tests/window-rtl.js.map +2 -2
- package/dist/window/tests/window-theme-colors.js +1 -4
- package/dist/window/tests/window-theme-colors.js.map +2 -2
- package/dist/window/tests/window.js +1 -4
- package/dist/window/tests/window.js.map +2 -2
- package/dist/window/window.spec.js +1 -4
- package/dist/window/window.spec.js.map +2 -2
- package/package.json +2 -2
- package/src/datetime-selector/datetime-selector.spec.tsx +1 -1
- package/src/dialog/dialog.spec.tsx +2 -3
- package/src/dialog/tests/dialog-action-buttons.tsx +25 -4
- package/src/dialog/tests/dialog-modal.tsx +7 -1
- package/src/dialog/tests/dialog-theme-colors.tsx +25 -4
- package/src/dialog/tests/dialog.tsx +31 -5
- package/src/editor/tests/editor-image-editor.tsx +8 -2
- package/src/editor/tests/editor-table-wizard-accessibility.tsx +7 -1
- package/src/editor/tests/editor-view-source.tsx +7 -1
- package/src/filemanager/tests/filemanager-dialogs.tsx +19 -3
- package/src/gantt/tests/gantt-editing-popup-general.tsx +97 -0
- package/src/gantt/tests/gantt-editing-popup-other.tsx +92 -0
- package/src/gantt/tests/gantt-editing-popup-predecessors.tsx +113 -0
- package/src/gantt/tests/gantt-editing-popup-resources.tsx +180 -0
- package/src/gantt/tests/gantt-editing-popup-successors.tsx +113 -0
- package/src/grid/tests/grid-column-menu-rtl.tsx +4 -4
- package/src/grid/tests/grid-column-menu-tabbed.tsx +337 -0
- package/src/grid/tests/grid-column-menu.tsx +4 -4
- package/src/grid/tests/grid-editing-popup.tsx +18 -30
- package/src/grid/tests/grid-filter-menu-multi-checkbox.tsx +4 -4
- package/src/grid/tests/grid-filter-menu.tsx +1 -1
- package/src/grid/tests/grid-rows-resizing.tsx +6 -3
- package/src/grid/tests/grid-selection-aggregates.tsx +192 -0
- package/src/imageeditor/tests/imageeditor-crop-pane.tsx +35 -20
- package/src/imageeditor/tests/imageeditor-resize-pane.tsx +31 -16
- package/src/scheduler/tests/scheduler-edit-dialog.tsx +32 -34
- package/src/scheduler/tests/scheduler-editing-weekly.tsx +137 -0
- package/src/spreadsheet/tests/spreadsheet-dialog.tsx +15 -4
- package/src/timepicker/timepicker.spec.tsx +1 -1
- package/src/treelist/tests/treelist-editing-popup.tsx +66 -0
- package/src/window/tests/window-action-buttons.tsx +25 -4
- package/src/window/window.spec.tsx +2 -3
|
@@ -168,48 +168,11 @@
|
|
|
168
168
|
"readonly": "readonly"
|
|
169
169
|
};
|
|
170
170
|
|
|
171
|
-
// src/action-buttons/action-buttons.spec.tsx
|
|
172
|
-
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
173
|
-
var ACTIONBUTTONS_CLASSNAME = `k-actions`;
|
|
174
|
-
var states = [];
|
|
175
|
-
var options = {};
|
|
176
|
-
var defaultProps = {
|
|
177
|
-
alignment: "start",
|
|
178
|
-
orientation: "horizontal"
|
|
179
|
-
};
|
|
180
|
-
var ActionButtons = (props) => {
|
|
181
|
-
const _a = props, {
|
|
182
|
-
alignment = defaultProps.alignment,
|
|
183
|
-
orientation = defaultProps.orientation
|
|
184
|
-
} = _a, other = __objRest(_a, [
|
|
185
|
-
"alignment",
|
|
186
|
-
"orientation"
|
|
187
|
-
]);
|
|
188
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
189
|
-
"div",
|
|
190
|
-
__spreadProps(__spreadValues({}, other), {
|
|
191
|
-
className: classNames(
|
|
192
|
-
ACTIONBUTTONS_CLASSNAME,
|
|
193
|
-
{
|
|
194
|
-
[`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
|
|
195
|
-
[`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
|
|
196
|
-
},
|
|
197
|
-
props.className
|
|
198
|
-
),
|
|
199
|
-
children: props.children
|
|
200
|
-
})
|
|
201
|
-
);
|
|
202
|
-
};
|
|
203
|
-
ActionButtons.states = states;
|
|
204
|
-
ActionButtons.options = options;
|
|
205
|
-
ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
|
|
206
|
-
ActionButtons.defaultProps = defaultProps;
|
|
207
|
-
|
|
208
171
|
// src/icon/icon.spec.tsx
|
|
209
|
-
var
|
|
172
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
210
173
|
var ICON_CLASSNAME = `k-icon`;
|
|
211
|
-
var
|
|
212
|
-
var
|
|
174
|
+
var states = [];
|
|
175
|
+
var options = {
|
|
213
176
|
size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
|
|
214
177
|
themeColor: [
|
|
215
178
|
ThemeColor.base,
|
|
@@ -224,7 +187,7 @@
|
|
|
224
187
|
ThemeColor.dark
|
|
225
188
|
]
|
|
226
189
|
};
|
|
227
|
-
var
|
|
190
|
+
var defaultProps = {};
|
|
228
191
|
var Icon = (props) => {
|
|
229
192
|
const _a = props, {
|
|
230
193
|
size,
|
|
@@ -240,9 +203,9 @@
|
|
|
240
203
|
"flip"
|
|
241
204
|
]);
|
|
242
205
|
if (!name) {
|
|
243
|
-
return /* @__PURE__ */ (0,
|
|
206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
|
|
244
207
|
}
|
|
245
|
-
return /* @__PURE__ */ (0,
|
|
208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
246
209
|
"span",
|
|
247
210
|
__spreadProps(__spreadValues({}, other), {
|
|
248
211
|
className: classNames(
|
|
@@ -261,22 +224,22 @@
|
|
|
261
224
|
})
|
|
262
225
|
);
|
|
263
226
|
};
|
|
264
|
-
Icon.states =
|
|
265
|
-
Icon.options =
|
|
227
|
+
Icon.states = states;
|
|
228
|
+
Icon.options = options;
|
|
266
229
|
Icon.className = ICON_CLASSNAME;
|
|
267
|
-
Icon.defaultProps =
|
|
230
|
+
Icon.defaultProps = defaultProps;
|
|
268
231
|
|
|
269
232
|
// src/button/button.spec.tsx
|
|
270
|
-
var
|
|
233
|
+
var import_jsx_runtime2 = __require("react/jsx-runtime");
|
|
271
234
|
var BUTTON_CLASSNAME = `k-button`;
|
|
272
|
-
var
|
|
235
|
+
var states2 = [
|
|
273
236
|
States.hover,
|
|
274
237
|
States.focus,
|
|
275
238
|
States.active,
|
|
276
239
|
States.selected,
|
|
277
240
|
States.disabled
|
|
278
241
|
];
|
|
279
|
-
var
|
|
242
|
+
var options2 = {
|
|
280
243
|
size: [Size.small, Size.medium, Size.large],
|
|
281
244
|
rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
|
|
282
245
|
fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
|
|
@@ -294,7 +257,7 @@
|
|
|
294
257
|
ThemeColor.inverse
|
|
295
258
|
]
|
|
296
259
|
};
|
|
297
|
-
var
|
|
260
|
+
var defaultProps2 = {
|
|
298
261
|
size: Size.medium,
|
|
299
262
|
rounded: Roundness.medium,
|
|
300
263
|
fillMode: FillMode.solid,
|
|
@@ -304,10 +267,10 @@
|
|
|
304
267
|
};
|
|
305
268
|
var Button = (props) => {
|
|
306
269
|
const _a = props, {
|
|
307
|
-
size =
|
|
308
|
-
rounded =
|
|
309
|
-
fillMode =
|
|
310
|
-
themeColor =
|
|
270
|
+
size = defaultProps2.size,
|
|
271
|
+
rounded = defaultProps2.rounded,
|
|
272
|
+
fillMode = defaultProps2.fillMode,
|
|
273
|
+
themeColor = defaultProps2.themeColor,
|
|
311
274
|
hover,
|
|
312
275
|
focus,
|
|
313
276
|
active,
|
|
@@ -316,8 +279,8 @@
|
|
|
316
279
|
icon,
|
|
317
280
|
text,
|
|
318
281
|
iconClassName,
|
|
319
|
-
showArrow =
|
|
320
|
-
arrowIconName =
|
|
282
|
+
showArrow = defaultProps2.showArrow,
|
|
283
|
+
arrowIconName = defaultProps2.arrowIconName
|
|
321
284
|
} = _a, other = __objRest(_a, [
|
|
322
285
|
"size",
|
|
323
286
|
"rounded",
|
|
@@ -336,7 +299,7 @@
|
|
|
336
299
|
]);
|
|
337
300
|
const hasIcon = icon !== void 0;
|
|
338
301
|
const hasChildren = props.children !== void 0;
|
|
339
|
-
return /* @__PURE__ */ (0,
|
|
302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
340
303
|
"button",
|
|
341
304
|
__spreadProps(__spreadValues({}, other), {
|
|
342
305
|
className: classNames(
|
|
@@ -360,26 +323,63 @@
|
|
|
360
323
|
}
|
|
361
324
|
),
|
|
362
325
|
children: [
|
|
363
|
-
icon && /* @__PURE__ */ (0,
|
|
326
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
364
327
|
Icon,
|
|
365
328
|
{
|
|
366
329
|
className: classNames(iconClassName, "k-button-icon"),
|
|
367
330
|
name: icon
|
|
368
331
|
}
|
|
369
332
|
),
|
|
370
|
-
text ? /* @__PURE__ */ (0,
|
|
371
|
-
text && /* @__PURE__ */ (0,
|
|
333
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
334
|
+
text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: text }),
|
|
372
335
|
props.children
|
|
373
|
-
] }) : props.children && /* @__PURE__ */ (0,
|
|
374
|
-
showArrow && /* @__PURE__ */ (0,
|
|
336
|
+
] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: props.children }),
|
|
337
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: arrowIconName }) })
|
|
375
338
|
]
|
|
376
339
|
})
|
|
377
340
|
);
|
|
378
341
|
};
|
|
379
|
-
Button.states =
|
|
380
|
-
Button.options =
|
|
342
|
+
Button.states = states2;
|
|
343
|
+
Button.options = options2;
|
|
381
344
|
Button.className = BUTTON_CLASSNAME;
|
|
382
|
-
Button.defaultProps =
|
|
345
|
+
Button.defaultProps = defaultProps2;
|
|
346
|
+
|
|
347
|
+
// src/action-buttons/action-buttons.spec.tsx
|
|
348
|
+
var import_jsx_runtime3 = __require("react/jsx-runtime");
|
|
349
|
+
var ACTIONBUTTONS_CLASSNAME = `k-actions`;
|
|
350
|
+
var states3 = [];
|
|
351
|
+
var options3 = {};
|
|
352
|
+
var defaultProps3 = {
|
|
353
|
+
alignment: "start",
|
|
354
|
+
orientation: "horizontal"
|
|
355
|
+
};
|
|
356
|
+
var ActionButtons = (props) => {
|
|
357
|
+
const _a = props, {
|
|
358
|
+
alignment = defaultProps3.alignment,
|
|
359
|
+
orientation = defaultProps3.orientation
|
|
360
|
+
} = _a, other = __objRest(_a, [
|
|
361
|
+
"alignment",
|
|
362
|
+
"orientation"
|
|
363
|
+
]);
|
|
364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
365
|
+
"div",
|
|
366
|
+
__spreadProps(__spreadValues({}, other), {
|
|
367
|
+
className: classNames(
|
|
368
|
+
ACTIONBUTTONS_CLASSNAME,
|
|
369
|
+
{
|
|
370
|
+
[`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
|
|
371
|
+
[`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
|
|
372
|
+
},
|
|
373
|
+
props.className
|
|
374
|
+
),
|
|
375
|
+
children: props.children
|
|
376
|
+
})
|
|
377
|
+
);
|
|
378
|
+
};
|
|
379
|
+
ActionButtons.states = states3;
|
|
380
|
+
ActionButtons.options = options3;
|
|
381
|
+
ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
|
|
382
|
+
ActionButtons.defaultProps = defaultProps3;
|
|
383
383
|
|
|
384
384
|
// src/dialog/dialog.spec.tsx
|
|
385
385
|
var import_jsx_runtime4 = __require("react/jsx-runtime");
|
|
@@ -424,10 +424,7 @@
|
|
|
424
424
|
) }) })
|
|
425
425
|
] }),
|
|
426
426
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-window-content k-dialog-content", children: props.children }),
|
|
427
|
-
actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.
|
|
428
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { children: "Action" }),
|
|
429
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
430
|
-
] })
|
|
427
|
+
actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions k-dialog-actions", children: actionButtons })
|
|
431
428
|
]
|
|
432
429
|
})
|
|
433
430
|
);
|
|
@@ -451,10 +448,22 @@
|
|
|
451
448
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
452
449
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: styles }),
|
|
453
450
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
|
|
454
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "Title", actions: ["close"],
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "Title", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
453
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
454
|
+
] }), children: "Dialog with default theme color" }),
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { themeColor: "primary", title: "Title", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
456
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
458
|
+
] }), children: "Dialog with primary theme color" }),
|
|
459
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { themeColor: "dark", title: "Title", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
460
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
462
|
+
] }), children: "Dialog with dark theme color" }),
|
|
463
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { themeColor: "light", title: "Title", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
466
|
+
] }), children: "Dialog with light theme color" })
|
|
458
467
|
] })
|
|
459
468
|
] })
|
|
460
469
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/dialog/tests/dialog-theme-colors.tsx", "../../../src/utils/class-names.ts", "../../../src/utils/component-class-names.ts", "../../../src/utils/theme.ts", "../../../src/
|
|
4
|
-
"sourcesContent": ["import ReactDOM from 'react-dom/client';\nimport { Dialog } from '..';\n\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n .k-dialog {\n position: relative;\n }\n`;\n\nroot.render(\n <>\n <style>{styles}</style>\n <div id=\"test-area\" className=\"k-d-grid k-grid-cols-3\">\n\n <Dialog title=\"Title\" actions={[ 'close' ]} actionButtons actionButtonsAlign=\"end\">\n Dialog with default theme color\n </Dialog>\n\n <Dialog themeColor=\"primary\" title=\"Title\" actions={[ 'close' ]} actionButtons actionButtonsAlign=\"end\">\n Dialog with primary theme color\n </Dialog>\n\n <Dialog themeColor=\"dark\" title=\"Title\" actions={[ 'close' ]} actionButtons actionButtonsAlign=\"end\">\n Dialog with dark theme color\n </Dialog>\n\n <Dialog themeColor=\"light\" title=\"Title\" actions={[ 'close' ]} actionButtons actionButtonsAlign=\"end\">\n Dialog with light theme color\n </Dialog>\n </div>\n </>\n);\n", "/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n return args\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) => {\n // eslint-disable-next-line no-nested-ternary\n return Array.isArray(arg)\n ? classNames(...arg)\n : typeof arg === 'object'\n ? Object.keys(arg)\n .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ')\n : arg;\n })\n .filter((arg) => Boolean(arg))\n .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n return classNames(\n {\n [`${componentClassName}-xs`]: props.size === \"xsmall\",\n [`${componentClassName}-sm`]: props.size === \"small\",\n [`${componentClassName}-md`]: props.size === \"medium\",\n [`${componentClassName}-lg`]: props.size === \"large\",\n [`${componentClassName}-xl`]: props.size === \"xlarge\",\n [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n },\n {\n [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n },\n {\n [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n props.fillMode && props.themeColor,\n },\n {\n [`${componentClassName}-${props.themeColor}`]:\n props.themeColor && props.fillMode === undefined,\n },\n {\n 'k-rounded-sm': props.rounded === \"small\",\n 'k-rounded-md': props.rounded === \"medium\",\n 'k-rounded-lg': props.rounded === \"large\",\n 'k-rounded-full': props.rounded === \"full\",\n }\n );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n return classNames({\n 'k-valid': props.valid,\n 'k-invalid': props.invalid,\n 'k-hover': props.hover,\n 'k-focus': props.focus,\n 'k-checked': props.checked,\n 'k-active': props.active,\n 'k-selected': props.selected,\n 'k-disabled': props.disabled,\n 'k-indeterminate': props.indeterminate && !props.checked,\n 'k-loading': props.loading,\n 'k-empty': props.empty,\n 'k-readonly': props.readonly,\n });\n};\n", "export const Size = {\n 'xsmall': 'xsmall',\n 'small': 'small',\n 'medium': 'medium',\n 'large': 'large',\n 'xlarge': 'xlarge',\n 'xxlarge': 'xxlarge',\n 'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n 'small': 'small',\n 'medium': 'medium',\n 'large': 'large',\n 'full': 'full',\n} as const;\n\nexport const FillMode = {\n 'solid': 'solid',\n 'flat': 'flat',\n 'outline': 'outline',\n 'clear': 'clear',\n 'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n 'inherit': 'inherit',\n 'base': 'base',\n 'primary': 'primary',\n 'secondary': 'secondary',\n 'tertiary': 'tertiary',\n 'info': 'info',\n 'success': 'success',\n 'warning': 'warning',\n 'error': 'error',\n 'dark': 'dark',\n 'light': 'light',\n 'inverse': 'inverse',\n} as const;\n\nexport const States = {\n 'open': 'open',\n 'hover': 'hover',\n 'focus': 'focus',\n 'active': 'active',\n 'selected': 'selected',\n 'disabled': 'disabled',\n 'valid': 'valid',\n 'invalid': 'invalid',\n 'loading': 'loading',\n 'required': 'required',\n 'empty': 'empty',\n 'indeterminate': 'indeterminate',\n 'checked': 'checked',\n 'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\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} as const;\n", "import { classNames } from '../utils';\n\nexport const ACTIONBUTTONS_CLASSNAME = `k-actions`;\n\nconst states = [];\n\nconst options = {};\n\nexport type KendoActionButtonsProps = {\n alignment?: 'start' | 'center' | 'end' | 'stretched';\n orientation?: 'horizontal' | 'vertical';\n};\n\nconst defaultProps = {\n alignment: 'start',\n orientation: 'horizontal'\n};\n\nexport const ActionButtons = (\n props: KendoActionButtonsProps &\n React.HTMLAttributes<HTMLDivElement>\n) => {\n const {\n alignment = defaultProps.alignment,\n orientation = defaultProps.orientation,\n ...other\n } = props;\n\n return (\n <div\n {...other}\n className={classNames(\n ACTIONBUTTONS_CLASSNAME,\n {\n [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,\n [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation\n },\n props.className\n )}>\n {props.children}\n </div>\n );\n};\n\nActionButtons.states = states;\nActionButtons.options = options;\nActionButtons.className = ACTIONBUTTONS_CLASSNAME;\nActionButtons.defaultProps = defaultProps;\n\nexport default ActionButtons;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n themeColor: [\n ThemeColor.base,\n ThemeColor.primary,\n ThemeColor.secondary,\n ThemeColor.tertiary,\n ThemeColor.success,\n ThemeColor.warning,\n ThemeColor.error,\n ThemeColor.info,\n ThemeColor.light,\n ThemeColor.dark,\n ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n size?: (typeof options.size)[number];\n themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n name?: string;\n rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n const {\n size,\n themeColor,\n name,\n rotate,\n flip,\n ...other\n } = props;\n\n if (!name) {\n return <></>;\n }\n\n return (\n <span\n {...other}\n className={classNames(\n props.className,\n ICON_CLASSNAME,\n optionClassNames(ICON_CLASSNAME, {\n size,\n themeColor,\n }),\n {\n [`k-i-${name}`]: name,\n [`k-rotate-${rotate}`]: rotate,\n [`k-flip-${flip}`]: flip,\n }\n )}\n />\n );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n States.hover,\n States.focus,\n States.active,\n States.selected,\n States.disabled\n];\n\nconst options = {\n size: [ Size.small, Size.medium, Size.large ],\n rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n themeColor: [\n ThemeColor.base,\n ThemeColor.primary,\n ThemeColor.secondary,\n ThemeColor.tertiary,\n ThemeColor.success,\n ThemeColor.warning,\n ThemeColor.error,\n ThemeColor.info,\n ThemeColor.light,\n ThemeColor.dark,\n ThemeColor.inverse\n ],\n};\n\nexport type KendoButtonOptions = {\n size?: (typeof options.size)[number] | null;\n rounded?: (typeof options.rounded)[number] | null;\n fillMode?: (typeof options.fillMode)[number] | null;\n themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n icon?: string;\n text?: string;\n iconClassName?: string;\n showArrow?: boolean;\n arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n size: Size.medium,\n rounded: Roundness.medium,\n fillMode: FillMode.solid,\n themeColor: ThemeColor.base,\n showArrow: false,\n arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n props: KendoButtonProps &\n KendoButtonState &\n React.HTMLAttributes<HTMLButtonElement>\n) => {\n const {\n size = defaultProps.size,\n rounded = defaultProps.rounded,\n fillMode = defaultProps.fillMode,\n themeColor = defaultProps.themeColor,\n hover,\n focus,\n active,\n selected,\n disabled,\n icon,\n text,\n iconClassName,\n showArrow = defaultProps.showArrow,\n arrowIconName = defaultProps.arrowIconName,\n ...other\n } = props;\n\n const hasIcon = (icon !== undefined);\n const hasChildren = props.children !== undefined;\n\n return (\n <button\n {...other}\n className={classNames(\n props.className,\n BUTTON_CLASSNAME,\n optionClassNames(BUTTON_CLASSNAME, {\n size,\n rounded,\n fillMode,\n themeColor,\n }),\n stateClassNames(BUTTON_CLASSNAME, {\n hover,\n focus,\n active,\n disabled,\n selected,\n }),\n {\n ['k-icon-button']: !text && !hasChildren && hasIcon,\n }\n )}\n >\n {icon && (\n <Icon\n className={classNames(iconClassName, 'k-button-icon')}\n name= {icon}\n />\n )}\n\n {text\n ?\n <>\n {text && <span className=\"k-button-text\">{text}</span>}\n {props.children}\n </>\n : props.children && <span className=\"k-button-text\">{props.children}</span>\n }\n\n {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n </button>\n );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n", "import { ActionButtons } from '../action-buttons';\nimport { Button } from '../button';\nimport { classNames, optionClassNames, ThemeColor } from '../utils';\n\nexport const DIALOG_CLASSNAME = `k-dialog`;\n\nconst states = [];\n\nconst options = {\n themeColor: [\n ThemeColor.primary,\n ThemeColor.light,\n ThemeColor.dark,\n ],\n};\n\nconst defaultProps = {};\n\nexport type KendoDialogOptions = {\n themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoDialogProps = KendoDialogOptions & {\n title?: string;\n actions?: string[];\n actionButtons?: boolean;\n actionButtonsAlign?: \"start\" | \"end\" | \"center\" | \"stretched\"\n};\n\nexport const Dialog = (\n props: KendoDialogProps &\n React.HTMLAttributes<HTMLDivElement>\n) => {\n const {\n title,\n actions,\n themeColor,\n actionButtons,\n actionButtonsAlign,\n ...other\n } = props;\n\n return (\n <div\n {...other}\n className={classNames(\n props.className,\n DIALOG_CLASSNAME,\n \"k-window\",\n optionClassNames(DIALOG_CLASSNAME, { themeColor })\n )}>\n\n {(title !== undefined || actions) &&\n <div className=\"k-window-titlebar k-dialog-titlebar\">\n {title !== undefined && <span className=\"k-window-title k-dialog-title\">{title}</span>}\n {actions && <>\n <div className=\"k-window-titlebar-actions k-dialog-titlebar-actions\">\n {actions.map(actionName =>\n <Button key={actionName} icon={actionName} fillMode=\"flat\" className=\"k-window-titlebar-action k-dialog-titlebar-action\"></Button>\n )}\n </div>\n </>}\n </div>\n }\n <div className=\"k-window-content k-dialog-content\">\n {props.children}\n </div>\n {actionButtons &&\n <ActionButtons alignment={actionButtonsAlign} className=\"k-window-actions k-dialog-actions\">\n <Button>Action</Button>\n <Button themeColor=\"primary\">Primary</Button>\n </ActionButtons>\n }\n </div>\n );\n};\n\nDialog.states = states;\nDialog.options = options;\nDialog.className = DIALOG_CLASSNAME;\nDialog.defaultProps = defaultProps;\n\nexport default Dialog;\n"],
|
|
5
|
-
"mappings": "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
|
|
3
|
+
"sources": ["../../../src/dialog/tests/dialog-theme-colors.tsx", "../../../src/utils/class-names.ts", "../../../src/utils/component-class-names.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.spec.tsx", "../../../src/button/button.spec.tsx", "../../../src/action-buttons/action-buttons.spec.tsx", "../../../src/dialog/dialog.spec.tsx"],
|
|
4
|
+
"sourcesContent": ["import ReactDOM from 'react-dom/client';\nimport { Button } from '../../button';\nimport { Dialog } from '..';\n\n\nconst root = ReactDOM.createRoot(\n document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n .k-dialog {\n position: relative;\n }\n`;\n\nroot.render(\n <>\n <style>{styles}</style>\n <div id=\"test-area\" className=\"k-d-grid k-grid-cols-3\">\n\n <Dialog title=\"Title\" actions={[ 'close' ]} actionButtonsAlign=\"end\" actionButtons={\n <>\n <Button>Action</Button>\n <Button themeColor=\"primary\">Primary</Button>\n </>\n }>\n Dialog with default theme color\n </Dialog>\n\n <Dialog themeColor=\"primary\" title=\"Title\" actions={[ 'close' ]} actionButtonsAlign=\"end\" actionButtons={\n <>\n <Button>Action</Button>\n <Button themeColor=\"primary\">Primary</Button>\n </>\n }>\n Dialog with primary theme color\n </Dialog>\n\n <Dialog themeColor=\"dark\" title=\"Title\" actions={[ 'close' ]} actionButtonsAlign=\"end\" actionButtons={\n <>\n <Button>Action</Button>\n <Button themeColor=\"primary\">Primary</Button>\n </>\n }>\n Dialog with dark theme color\n </Dialog>\n\n <Dialog themeColor=\"light\" title=\"Title\" actions={[ 'close' ]} actionButtonsAlign=\"end\" actionButtons={\n <>\n <Button>Action</Button>\n <Button themeColor=\"primary\">Primary</Button>\n </>\n }>\n Dialog with light theme color\n </Dialog>\n </div>\n </>\n);\n", "/* eslint-disable arrow-body-style */\nexport const classNames = (...args: any[]): string => {\n return args\n .filter((arg) => arg !== true && Boolean(arg))\n .map((arg: any) => {\n // eslint-disable-next-line no-nested-ternary\n return Array.isArray(arg)\n ? classNames(...arg)\n : typeof arg === 'object'\n ? Object.keys(arg)\n .map((key, idx) => arg[idx] || (arg[key] && key) || null)\n .filter((el) => el !== null)\n .join(' ')\n : arg;\n })\n .filter((arg) => Boolean(arg))\n .join(' ');\n};\n", "/* eslint-disable arrow-body-style */\nimport { classNames } from './class-names';\n\nexport const optionClassNames = (componentClassName: string, props: any) => {\n return classNames(\n {\n [`${componentClassName}-xs`]: props.size === \"xsmall\",\n [`${componentClassName}-sm`]: props.size === \"small\",\n [`${componentClassName}-md`]: props.size === \"medium\",\n [`${componentClassName}-lg`]: props.size === \"large\",\n [`${componentClassName}-xl`]: props.size === \"xlarge\",\n [`${componentClassName}-xxl`]: props.size === \"xxlarge\",\n [`${componentClassName}-xxxl`]: props.size === \"xxxlarge\"\n },\n {\n [`${componentClassName}-${props.fillMode}`]: props.fillMode,\n },\n {\n [`${componentClassName}-${props.fillMode}-${props.themeColor}`]:\n props.fillMode && props.themeColor,\n },\n {\n [`${componentClassName}-${props.themeColor}`]:\n props.themeColor && props.fillMode === undefined,\n },\n {\n 'k-rounded-sm': props.rounded === \"small\",\n 'k-rounded-md': props.rounded === \"medium\",\n 'k-rounded-lg': props.rounded === \"large\",\n 'k-rounded-full': props.rounded === \"full\",\n }\n );\n};\n\nexport const stateClassNames = (_componentClassName: string | undefined, props: any) => {\n return classNames({\n 'k-valid': props.valid,\n 'k-invalid': props.invalid,\n 'k-hover': props.hover,\n 'k-focus': props.focus,\n 'k-checked': props.checked,\n 'k-active': props.active,\n 'k-selected': props.selected,\n 'k-disabled': props.disabled,\n 'k-indeterminate': props.indeterminate && !props.checked,\n 'k-loading': props.loading,\n 'k-empty': props.empty,\n 'k-readonly': props.readonly,\n });\n};\n", "export const Size = {\n 'xsmall': 'xsmall',\n 'small': 'small',\n 'medium': 'medium',\n 'large': 'large',\n 'xlarge': 'xlarge',\n 'xxlarge': 'xxlarge',\n 'xxxlarge': 'xxxlarge',\n} as const;\n\nexport const Roundness = {\n 'small': 'small',\n 'medium': 'medium',\n 'large': 'large',\n 'full': 'full',\n} as const;\n\nexport const FillMode = {\n 'solid': 'solid',\n 'flat': 'flat',\n 'outline': 'outline',\n 'clear': 'clear',\n 'link': 'link',\n} as const;\n\nexport const ThemeColor = {\n 'inherit': 'inherit',\n 'base': 'base',\n 'primary': 'primary',\n 'secondary': 'secondary',\n 'tertiary': 'tertiary',\n 'info': 'info',\n 'success': 'success',\n 'warning': 'warning',\n 'error': 'error',\n 'dark': 'dark',\n 'light': 'light',\n 'inverse': 'inverse',\n} as const;\n\nexport const States = {\n 'open': 'open',\n 'hover': 'hover',\n 'focus': 'focus',\n 'active': 'active',\n 'selected': 'selected',\n 'disabled': 'disabled',\n 'valid': 'valid',\n 'invalid': 'invalid',\n 'loading': 'loading',\n 'required': 'required',\n 'empty': 'empty',\n 'indeterminate': 'indeterminate',\n 'checked': 'checked',\n 'readonly': 'readonly',\n} as const;\n\nexport const kendoThemeMaps = {\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} as const;\n", "import { classNames, optionClassNames, Size, ThemeColor } from '../utils';\n\nexport const ICON_CLASSNAME = `k-icon`;\n\nconst states = [];\n\nconst options = {\n size: [ Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge ],\n themeColor: [\n ThemeColor.base,\n ThemeColor.primary,\n ThemeColor.secondary,\n ThemeColor.tertiary,\n ThemeColor.success,\n ThemeColor.warning,\n ThemeColor.error,\n ThemeColor.info,\n ThemeColor.light,\n ThemeColor.dark,\n ],\n};\n\nconst defaultProps = {};\n\nexport type IconState = { [K in (typeof states)[number]]?: boolean };\n\nexport type IconOptions = {\n size?: (typeof options.size)[number];\n themeColor?: (typeof options.themeColor)[number];\n};\n\nexport type IconProps = IconOptions & {\n name?: string;\n rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n flip?: null | 'v' | 'h';\n}\n\nexport const Icon = (\n props: IconProps & React.HTMLAttributes<HTMLSpanElement>\n) => {\n const {\n size,\n themeColor,\n name,\n rotate,\n flip,\n ...other\n } = props;\n\n if (!name) {\n return <></>;\n }\n\n return (\n <span\n {...other}\n className={classNames(\n props.className,\n ICON_CLASSNAME,\n optionClassNames(ICON_CLASSNAME, {\n size,\n themeColor,\n }),\n {\n [`k-i-${name}`]: name,\n [`k-rotate-${rotate}`]: rotate,\n [`k-flip-${flip}`]: flip,\n }\n )}\n />\n );\n};\n\nIcon.states = states;\nIcon.options = options;\nIcon.className = ICON_CLASSNAME;\nIcon.defaultProps = defaultProps;\n\nexport default Icon;\n", "import { Icon } from '../icon';\nimport { classNames, optionClassNames, stateClassNames, States, Size, Roundness, FillMode, ThemeColor } from '../utils';\n\nexport const BUTTON_CLASSNAME = `k-button`;\n\nconst states = [\n States.hover,\n States.focus,\n States.active,\n States.selected,\n States.disabled\n];\n\nconst options = {\n size: [ Size.small, Size.medium, Size.large ],\n rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],\n fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link ],\n themeColor: [\n ThemeColor.base,\n ThemeColor.primary,\n ThemeColor.secondary,\n ThemeColor.tertiary,\n ThemeColor.success,\n ThemeColor.warning,\n ThemeColor.error,\n ThemeColor.info,\n ThemeColor.light,\n ThemeColor.dark,\n ThemeColor.inverse\n ],\n};\n\nexport type KendoButtonOptions = {\n size?: (typeof options.size)[number] | null;\n rounded?: (typeof options.rounded)[number] | null;\n fillMode?: (typeof options.fillMode)[number] | null;\n themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoButtonProps = KendoButtonOptions & {\n icon?: string;\n text?: string;\n iconClassName?: string;\n showArrow?: boolean;\n arrowIconName?: string;\n};\n\nexport type KendoButtonState = { [K in (typeof states)[number]]?: boolean };\n\nconst defaultProps = {\n size: Size.medium,\n rounded: Roundness.medium,\n fillMode: FillMode.solid,\n themeColor: ThemeColor.base,\n showArrow: false,\n arrowIconName: \"arrow-s\"\n};\n\nexport const Button = (\n props: KendoButtonProps &\n KendoButtonState &\n React.HTMLAttributes<HTMLButtonElement>\n) => {\n const {\n size = defaultProps.size,\n rounded = defaultProps.rounded,\n fillMode = defaultProps.fillMode,\n themeColor = defaultProps.themeColor,\n hover,\n focus,\n active,\n selected,\n disabled,\n icon,\n text,\n iconClassName,\n showArrow = defaultProps.showArrow,\n arrowIconName = defaultProps.arrowIconName,\n ...other\n } = props;\n\n const hasIcon = (icon !== undefined);\n const hasChildren = props.children !== undefined;\n\n return (\n <button\n {...other}\n className={classNames(\n props.className,\n BUTTON_CLASSNAME,\n optionClassNames(BUTTON_CLASSNAME, {\n size,\n rounded,\n fillMode,\n themeColor,\n }),\n stateClassNames(BUTTON_CLASSNAME, {\n hover,\n focus,\n active,\n disabled,\n selected,\n }),\n {\n ['k-icon-button']: !text && !hasChildren && hasIcon,\n }\n )}\n >\n {icon && (\n <Icon\n className={classNames(iconClassName, 'k-button-icon')}\n name= {icon}\n />\n )}\n\n {text\n ?\n <>\n {text && <span className=\"k-button-text\">{text}</span>}\n {props.children}\n </>\n : props.children && <span className=\"k-button-text\">{props.children}</span>\n }\n\n {showArrow && (<span className=\"k-menu-button-arrow k-button-arrow\"><Icon name= {arrowIconName} /></span>)}\n\n </button>\n );\n};\n\nButton.states = states;\nButton.options = options;\nButton.className = BUTTON_CLASSNAME;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n", "import { classNames } from '../utils';\n\nexport const ACTIONBUTTONS_CLASSNAME = `k-actions`;\n\nconst states = [];\n\nconst options = {};\n\nexport type KendoActionButtonsProps = {\n alignment?: 'start' | 'center' | 'end' | 'stretched';\n orientation?: 'horizontal' | 'vertical';\n};\n\nconst defaultProps = {\n alignment: 'start',\n orientation: 'horizontal'\n};\n\nexport const ActionButtons = (\n props: KendoActionButtonsProps &\n React.HTMLAttributes<HTMLDivElement>\n) => {\n const {\n alignment = defaultProps.alignment,\n orientation = defaultProps.orientation,\n ...other\n } = props;\n\n return (\n <div\n {...other}\n className={classNames(\n ACTIONBUTTONS_CLASSNAME,\n {\n [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,\n [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation\n },\n props.className\n )}>\n {props.children}\n </div>\n );\n};\n\nActionButtons.states = states;\nActionButtons.options = options;\nActionButtons.className = ACTIONBUTTONS_CLASSNAME;\nActionButtons.defaultProps = defaultProps;\n\nexport default ActionButtons;\n", "import { ActionButtons } from '../action-buttons';\nimport { Button } from '../button';\nimport { classNames, optionClassNames, ThemeColor } from '../utils';\n\nexport const DIALOG_CLASSNAME = `k-dialog`;\n\nconst states = [];\n\nconst options = {\n themeColor: [\n ThemeColor.primary,\n ThemeColor.light,\n ThemeColor.dark,\n ],\n};\n\nconst defaultProps = {};\n\nexport type KendoDialogOptions = {\n themeColor?: (typeof options.themeColor)[number] | null;\n};\n\nexport type KendoDialogProps = KendoDialogOptions & {\n title?: string;\n actions?: string[];\n actionButtons?: JSX.Element;\n actionButtonsAlign?: \"start\" | \"end\" | \"center\" | \"stretched\"\n};\n\nexport const Dialog = (\n props: KendoDialogProps &\n React.HTMLAttributes<HTMLDivElement>\n) => {\n const {\n title,\n actions,\n themeColor,\n actionButtons,\n actionButtonsAlign,\n ...other\n } = props;\n\n return (\n <div\n {...other}\n className={classNames(\n props.className,\n DIALOG_CLASSNAME,\n \"k-window\",\n optionClassNames(DIALOG_CLASSNAME, { themeColor })\n )}>\n\n {(title !== undefined || actions) &&\n <div className=\"k-window-titlebar k-dialog-titlebar\">\n {title !== undefined && <span className=\"k-window-title k-dialog-title\">{title}</span>}\n {actions && <>\n <div className=\"k-window-titlebar-actions k-dialog-titlebar-actions\">\n {actions.map(actionName =>\n <Button key={actionName} icon={actionName} fillMode=\"flat\" className=\"k-window-titlebar-action k-dialog-titlebar-action\"></Button>\n )}\n </div>\n </>}\n </div>\n }\n <div className=\"k-window-content k-dialog-content\">\n {props.children}\n </div>\n {actionButtons &&\n <ActionButtons alignment={actionButtonsAlign} className=\"k-window-actions k-dialog-actions\">\n {actionButtons}\n </ActionButtons>\n }\n </div>\n );\n};\n\nDialog.states = states;\nDialog.options = options;\nDialog.className = DIALOG_CLASSNAME;\nDialog.defaultProps = defaultProps;\n\nexport default Dialog;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sBAAqB;;;ACCd,MAAM,aAAa,IAAI,SAAwB;AAClD,WAAO,KACF,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C,IAAI,CAAC,QAAa;AAEf,aAAO,MAAM,QAAQ,GAAG,IAClB,WAAW,GAAG,GAAG,IACjB,OAAO,QAAQ,WACX,OAAO,KAAK,GAAG,EACZ,IAAI,CAAC,KAAK,QAAQ,IAAI,GAAG,KAAM,IAAI,GAAG,KAAK,OAAQ,IAAI,EACvD,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG,IACX;AAAA,IACd,CAAC,EACA,OAAO,CAAC,QAAQ,QAAQ,GAAG,CAAC,EAC5B,KAAK,GAAG;AAAA,EACjB;;;ACdO,MAAM,mBAAmB,CAAC,oBAA4B,UAAe;AACxE,WAAO;AAAA,MACH;AAAA,QACI,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,uBAAuB,GAAG,MAAM,SAAS;AAAA,QAC7C,CAAC,GAAG,wBAAwB,GAAG,MAAM,SAAS;AAAA,QAC9C,CAAC,GAAG,yBAAyB,GAAG,MAAM,SAAS;AAAA,MACnD;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,UAAU,GAAG,MAAM;AAAA,MACvD;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,YAAY,MAAM,YAAY,GAC9D,MAAM,YAAY,MAAM;AAAA,MAC5B;AAAA,MACA;AAAA,QACI,CAAC,GAAG,sBAAsB,MAAM,YAAY,GAC5C,MAAM,cAAc,MAAM,aAAa;AAAA,MAC3C;AAAA,MACA;AAAA,QACI,gBAAgB,MAAM,YAAY;AAAA,QAClC,gBAAgB,MAAM,YAAY;AAAA,QAClC,gBAAgB,MAAM,YAAY;AAAA,QAClC,kBAAkB,MAAM,YAAY;AAAA,MACxC;AAAA,IACJ;AAAA,EACJ;AAEO,MAAM,kBAAkB,CAAC,qBAAyC,UAAe;AACpF,WAAO,WAAW;AAAA,MACd,WAAW,MAAM;AAAA,MACjB,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA,MACjB,WAAW,MAAM;AAAA,MACjB,aAAa,MAAM;AAAA,MACnB,YAAY,MAAM;AAAA,MAClB,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,MACpB,mBAAmB,MAAM,iBAAiB,CAAC,MAAM;AAAA,MACjD,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA,MACjB,cAAc,MAAM;AAAA,IACxB,CAAC;AAAA,EACL;;;ACjDO,MAAM,OAAO;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;AAEO,MAAM,YAAY;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,EACZ;AAEO,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,EACZ;AAEO,MAAM,aAAa;AAAA,IACtB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACf;AAEO,MAAM,SAAS;AAAA,IAClB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,EAChB;;;ACLe;AAhDR,MAAM,iBAAiB;AAE9B,MAAM,SAAS,CAAC;AAEhB,MAAM,UAAU;AAAA,IACZ,MAAM,CAAE,KAAK,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK,OAAO,KAAK,QAAQ,KAAK,SAAS,KAAK,QAAS;AAAA,IACnG,YAAY;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACf;AAAA,EACJ;AAEA,MAAM,eAAe,CAAC;AAef,MAAM,OAAO,CAChB,UACC;AACD,UAOI,YANA;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA7CR,IA+CQ,IADG,kBACH,IADG;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIJ,QAAI,CAAC,MAAM;AACP,aAAO,2EAAE;AAAA,IACb;AAEA,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP,MAAM;AAAA,UACN;AAAA,UACA,iBAAiB,gBAAgB;AAAA,YAC7B;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD;AAAA,YACI,CAAC,OAAO,MAAM,GAAG;AAAA,YACjB,CAAC,YAAY,QAAQ,GAAG;AAAA,YACxB,CAAC,UAAU,MAAM,GAAG;AAAA,UACxB;AAAA,QACJ;AAAA;AAAA,IACJ;AAAA,EAER;AAEA,OAAK,SAAS;AACd,OAAK,UAAU;AACf,OAAK,YAAY;AACjB,OAAK,eAAe;;;ACiCJ,MAAAA,sBAAA;AA1GT,MAAM,mBAAmB;AAEhC,MAAMC,UAAS;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EACX;AAEA,MAAMC,WAAU;AAAA,IACZ,MAAM,CAAE,KAAK,OAAO,KAAK,QAAQ,KAAK,KAAM;AAAA,IAC5C,SAAS,CAAE,UAAU,OAAO,UAAU,QAAQ,UAAU,OAAO,UAAU,IAAK;AAAA,IAC9E,UAAU,CAAE,SAAS,OAAO,SAAS,MAAM,SAAS,SAAS,SAAS,OAAO,SAAS,IAAK;AAAA,IAC3F,YAAY;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACf;AAAA,EACJ;AAmBA,MAAMC,gBAAe;AAAA,IACjB,MAAM,KAAK;AAAA,IACX,SAAS,UAAU;AAAA,IACnB,UAAU,SAAS;AAAA,IACnB,YAAY,WAAW;AAAA,IACvB,WAAW;AAAA,IACX,eAAe;AAAA,EACnB;AAEO,MAAM,SAAS,CAClB,UAGC;AACD,UAgBI,YAfA;AAAA,aAAOA,cAAa;AAAA,MACpB,UAAUA,cAAa;AAAA,MACvB,WAAWA,cAAa;AAAA,MACxB,aAAaA,cAAa;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAYA,cAAa;AAAA,MACzB,gBAAgBA,cAAa;AAAA,IA7ErC,IA+EQ,IADG,kBACH,IADG;AAAA,MAdH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIJ,UAAM,UAAW,SAAS;AAC1B,UAAM,cAAc,MAAM,aAAa;AAEvC,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP,MAAM;AAAA,UACN;AAAA,UACA,iBAAiB,kBAAkB;AAAA,YAC/B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD,gBAAgB,kBAAkB;AAAA,YAC9B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACJ,CAAC;AAAA,UACD;AAAA,YACI,CAAC,eAAe,GAAG,CAAC,QAAQ,CAAC,eAAe;AAAA,UAChD;AAAA,QACJ;AAAA,QAEC;AAAA,kBACG;AAAA,YAAC;AAAA;AAAA,cACG,WAAW,WAAW,eAAe,eAAe;AAAA,cACpD,MAAO;AAAA;AAAA,UACX;AAAA,UAGH,OAEG,8EACK;AAAA,oBAAQ,6CAAC,UAAK,WAAU,iBAAiB,gBAAK;AAAA,YAC9C,MAAM;AAAA,aACX,IACE,MAAM,YAAY,6CAAC,UAAK,WAAU,iBAAiB,gBAAM,UAAS;AAAA,UAGvE,aAAc,6CAAC,UAAK,WAAU,sCAAqC,uDAAC,QAAK,MAAO,eAAe,GAAE;AAAA;AAAA;AAAA,IAEtG;AAAA,EAER;AAEA,SAAO,SAASF;AAChB,SAAO,UAAUC;AACjB,SAAO,YAAY;AACnB,SAAO,eAAeC;;;ACxGd,MAAAC,sBAAA;AA3BD,MAAM,0BAA0B;AAEvC,MAAMC,UAAS,CAAC;AAEhB,MAAMC,WAAU,CAAC;AAOjB,MAAMC,gBAAe;AAAA,IACjB,WAAW;AAAA,IACX,aAAa;AAAA,EACjB;AAEO,MAAM,gBAAgB,CACzB,UAEC;AACD,UAII,YAHA;AAAA,kBAAYA,cAAa;AAAA,MACzB,cAAcA,cAAa;AAAA,IAxBnC,IA0BQ,IADG,kBACH,IADG;AAAA,MAFH;AAAA,MACA;AAAA;AAIJ,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,CAAC,GAAG,2BAA2B,WAAW,GAAG;AAAA,YAC7C,CAAC,GAAG,2BAA2B,aAAa,GAAG;AAAA,UACnD;AAAA,UACA,MAAM;AAAA,QACV;AAAA,QACC,gBAAM;AAAA;AAAA,IACX;AAAA,EAER;AAEA,gBAAc,SAASF;AACvB,gBAAc,UAAUC;AACxB,gBAAc,YAAY;AAC1B,gBAAc,eAAeC;;;ACMb,MAAAC,sBAAA;AAjDT,MAAM,mBAAmB;AAEhC,MAAMC,UAAS,CAAC;AAEhB,MAAMC,WAAU;AAAA,IACZ,YAAY;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACf;AAAA,EACJ;AAEA,MAAMC,gBAAe,CAAC;AAaf,MAAM,SAAS,CAClB,UAEC;AACD,UAOI,YANA;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAtCR,IAwCQ,IADG,kBACH,IADG;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIJ,WACI;AAAA,MAAC;AAAA,uCACO,QADP;AAAA,QAEG,WAAW;AAAA,UACP,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,iBAAiB,kBAAkB,EAAE,WAAW,CAAC;AAAA,QACrD;AAAA,QAEE;AAAA,qBAAU,UAAa,YACrB,8CAAC,SAAI,WAAU,uCACV;AAAA,sBAAU,UAAa,6CAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,YAC9E,WAAW,6EACR,uDAAC,SAAI,WAAU,uDACV,kBAAQ;AAAA,cAAI,gBACT,6CAAC,UAAwB,MAAM,YAAY,UAAS,QAAO,WAAU,uDAAxD,UAA4G;AAAA,YAC7H,GACJ,GACJ;AAAA,aACJ;AAAA,UAEJ,6CAAC,SAAI,WAAU,qCACV,gBAAM,UACX;AAAA,UACC,iBACG,6CAAC,iBAAc,WAAW,oBAAoB,WAAU,qCACnD,yBACL;AAAA;AAAA;AAAA,IAER;AAAA,EAER;AAEA,SAAO,SAASF;AAChB,SAAO,UAAUC;AACjB,SAAO,YAAY;AACnB,SAAO,eAAeC;;;AP9Dd,MAAAC,sBAAA;AAZR,MAAM,OAAO,cAAAC,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAMf,OAAK;AAAA,IACD,8EACI;AAAA,mDAAC,WAAO,kBAAO;AAAA,MACf,8CAAC,SAAI,IAAG,aAAY,WAAU,0BAE1B;AAAA,qDAAC,UAAO,OAAM,SAAQ,SAAS,CAAE,OAAQ,GAAG,oBAAmB,OAAM,eACjE,8EACI;AAAA,uDAAC,UAAO,oBAAM;AAAA,UACd,6CAAC,UAAO,YAAW,WAAU,qBAAO;AAAA,WACxC,GACF,6CAEF;AAAA,QAEA,6CAAC,UAAO,YAAW,WAAU,OAAM,SAAQ,SAAS,CAAE,OAAQ,GAAG,oBAAmB,OAAM,eACtF,8EACI;AAAA,uDAAC,UAAO,oBAAM;AAAA,UACd,6CAAC,UAAO,YAAW,WAAU,qBAAO;AAAA,WACxC,GACF,6CAEF;AAAA,QAEA,6CAAC,UAAO,YAAW,QAAO,OAAM,SAAQ,SAAS,CAAE,OAAQ,GAAG,oBAAmB,OAAM,eACnF,8EACI;AAAA,uDAAC,UAAO,oBAAM;AAAA,UACd,6CAAC,UAAO,YAAW,WAAU,qBAAO;AAAA,WACxC,GACF,0CAEF;AAAA,QAEA,6CAAC,UAAO,YAAW,SAAQ,OAAM,SAAQ,SAAS,CAAE,OAAQ,GAAG,oBAAmB,OAAM,eACpF,8EACI;AAAA,uDAAC,UAAO,oBAAM;AAAA,UACd,6CAAC,UAAO,YAAW,WAAU,qBAAO;AAAA,WACxC,GACF,2CAEF;AAAA,SACJ;AAAA,OACJ;AAAA,EACJ;",
|
|
6
6
|
"names": ["import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "states", "options", "defaultProps", "import_jsx_runtime", "ReactDOM"]
|
|
7
7
|
}
|
|
@@ -168,48 +168,11 @@
|
|
|
168
168
|
"readonly": "readonly"
|
|
169
169
|
};
|
|
170
170
|
|
|
171
|
-
// src/action-buttons/action-buttons.spec.tsx
|
|
172
|
-
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
173
|
-
var ACTIONBUTTONS_CLASSNAME = `k-actions`;
|
|
174
|
-
var states = [];
|
|
175
|
-
var options = {};
|
|
176
|
-
var defaultProps = {
|
|
177
|
-
alignment: "start",
|
|
178
|
-
orientation: "horizontal"
|
|
179
|
-
};
|
|
180
|
-
var ActionButtons = (props) => {
|
|
181
|
-
const _a = props, {
|
|
182
|
-
alignment = defaultProps.alignment,
|
|
183
|
-
orientation = defaultProps.orientation
|
|
184
|
-
} = _a, other = __objRest(_a, [
|
|
185
|
-
"alignment",
|
|
186
|
-
"orientation"
|
|
187
|
-
]);
|
|
188
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
189
|
-
"div",
|
|
190
|
-
__spreadProps(__spreadValues({}, other), {
|
|
191
|
-
className: classNames(
|
|
192
|
-
ACTIONBUTTONS_CLASSNAME,
|
|
193
|
-
{
|
|
194
|
-
[`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
|
|
195
|
-
[`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
|
|
196
|
-
},
|
|
197
|
-
props.className
|
|
198
|
-
),
|
|
199
|
-
children: props.children
|
|
200
|
-
})
|
|
201
|
-
);
|
|
202
|
-
};
|
|
203
|
-
ActionButtons.states = states;
|
|
204
|
-
ActionButtons.options = options;
|
|
205
|
-
ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
|
|
206
|
-
ActionButtons.defaultProps = defaultProps;
|
|
207
|
-
|
|
208
171
|
// src/icon/icon.spec.tsx
|
|
209
|
-
var
|
|
172
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
210
173
|
var ICON_CLASSNAME = `k-icon`;
|
|
211
|
-
var
|
|
212
|
-
var
|
|
174
|
+
var states = [];
|
|
175
|
+
var options = {
|
|
213
176
|
size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
|
|
214
177
|
themeColor: [
|
|
215
178
|
ThemeColor.base,
|
|
@@ -224,7 +187,7 @@
|
|
|
224
187
|
ThemeColor.dark
|
|
225
188
|
]
|
|
226
189
|
};
|
|
227
|
-
var
|
|
190
|
+
var defaultProps = {};
|
|
228
191
|
var Icon = (props) => {
|
|
229
192
|
const _a = props, {
|
|
230
193
|
size,
|
|
@@ -240,9 +203,9 @@
|
|
|
240
203
|
"flip"
|
|
241
204
|
]);
|
|
242
205
|
if (!name) {
|
|
243
|
-
return /* @__PURE__ */ (0,
|
|
206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
|
|
244
207
|
}
|
|
245
|
-
return /* @__PURE__ */ (0,
|
|
208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
246
209
|
"span",
|
|
247
210
|
__spreadProps(__spreadValues({}, other), {
|
|
248
211
|
className: classNames(
|
|
@@ -261,22 +224,22 @@
|
|
|
261
224
|
})
|
|
262
225
|
);
|
|
263
226
|
};
|
|
264
|
-
Icon.states =
|
|
265
|
-
Icon.options =
|
|
227
|
+
Icon.states = states;
|
|
228
|
+
Icon.options = options;
|
|
266
229
|
Icon.className = ICON_CLASSNAME;
|
|
267
|
-
Icon.defaultProps =
|
|
230
|
+
Icon.defaultProps = defaultProps;
|
|
268
231
|
|
|
269
232
|
// src/button/button.spec.tsx
|
|
270
|
-
var
|
|
233
|
+
var import_jsx_runtime2 = __require("react/jsx-runtime");
|
|
271
234
|
var BUTTON_CLASSNAME = `k-button`;
|
|
272
|
-
var
|
|
235
|
+
var states2 = [
|
|
273
236
|
States.hover,
|
|
274
237
|
States.focus,
|
|
275
238
|
States.active,
|
|
276
239
|
States.selected,
|
|
277
240
|
States.disabled
|
|
278
241
|
];
|
|
279
|
-
var
|
|
242
|
+
var options2 = {
|
|
280
243
|
size: [Size.small, Size.medium, Size.large],
|
|
281
244
|
rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
|
|
282
245
|
fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
|
|
@@ -294,7 +257,7 @@
|
|
|
294
257
|
ThemeColor.inverse
|
|
295
258
|
]
|
|
296
259
|
};
|
|
297
|
-
var
|
|
260
|
+
var defaultProps2 = {
|
|
298
261
|
size: Size.medium,
|
|
299
262
|
rounded: Roundness.medium,
|
|
300
263
|
fillMode: FillMode.solid,
|
|
@@ -304,10 +267,10 @@
|
|
|
304
267
|
};
|
|
305
268
|
var Button = (props) => {
|
|
306
269
|
const _a = props, {
|
|
307
|
-
size =
|
|
308
|
-
rounded =
|
|
309
|
-
fillMode =
|
|
310
|
-
themeColor =
|
|
270
|
+
size = defaultProps2.size,
|
|
271
|
+
rounded = defaultProps2.rounded,
|
|
272
|
+
fillMode = defaultProps2.fillMode,
|
|
273
|
+
themeColor = defaultProps2.themeColor,
|
|
311
274
|
hover,
|
|
312
275
|
focus,
|
|
313
276
|
active,
|
|
@@ -316,8 +279,8 @@
|
|
|
316
279
|
icon,
|
|
317
280
|
text,
|
|
318
281
|
iconClassName,
|
|
319
|
-
showArrow =
|
|
320
|
-
arrowIconName =
|
|
282
|
+
showArrow = defaultProps2.showArrow,
|
|
283
|
+
arrowIconName = defaultProps2.arrowIconName
|
|
321
284
|
} = _a, other = __objRest(_a, [
|
|
322
285
|
"size",
|
|
323
286
|
"rounded",
|
|
@@ -336,7 +299,7 @@
|
|
|
336
299
|
]);
|
|
337
300
|
const hasIcon = icon !== void 0;
|
|
338
301
|
const hasChildren = props.children !== void 0;
|
|
339
|
-
return /* @__PURE__ */ (0,
|
|
302
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
340
303
|
"button",
|
|
341
304
|
__spreadProps(__spreadValues({}, other), {
|
|
342
305
|
className: classNames(
|
|
@@ -360,26 +323,63 @@
|
|
|
360
323
|
}
|
|
361
324
|
),
|
|
362
325
|
children: [
|
|
363
|
-
icon && /* @__PURE__ */ (0,
|
|
326
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
364
327
|
Icon,
|
|
365
328
|
{
|
|
366
329
|
className: classNames(iconClassName, "k-button-icon"),
|
|
367
330
|
name: icon
|
|
368
331
|
}
|
|
369
332
|
),
|
|
370
|
-
text ? /* @__PURE__ */ (0,
|
|
371
|
-
text && /* @__PURE__ */ (0,
|
|
333
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
334
|
+
text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: text }),
|
|
372
335
|
props.children
|
|
373
|
-
] }) : props.children && /* @__PURE__ */ (0,
|
|
374
|
-
showArrow && /* @__PURE__ */ (0,
|
|
336
|
+
] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: props.children }),
|
|
337
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: arrowIconName }) })
|
|
375
338
|
]
|
|
376
339
|
})
|
|
377
340
|
);
|
|
378
341
|
};
|
|
379
|
-
Button.states =
|
|
380
|
-
Button.options =
|
|
342
|
+
Button.states = states2;
|
|
343
|
+
Button.options = options2;
|
|
381
344
|
Button.className = BUTTON_CLASSNAME;
|
|
382
|
-
Button.defaultProps =
|
|
345
|
+
Button.defaultProps = defaultProps2;
|
|
346
|
+
|
|
347
|
+
// src/action-buttons/action-buttons.spec.tsx
|
|
348
|
+
var import_jsx_runtime3 = __require("react/jsx-runtime");
|
|
349
|
+
var ACTIONBUTTONS_CLASSNAME = `k-actions`;
|
|
350
|
+
var states3 = [];
|
|
351
|
+
var options3 = {};
|
|
352
|
+
var defaultProps3 = {
|
|
353
|
+
alignment: "start",
|
|
354
|
+
orientation: "horizontal"
|
|
355
|
+
};
|
|
356
|
+
var ActionButtons = (props) => {
|
|
357
|
+
const _a = props, {
|
|
358
|
+
alignment = defaultProps3.alignment,
|
|
359
|
+
orientation = defaultProps3.orientation
|
|
360
|
+
} = _a, other = __objRest(_a, [
|
|
361
|
+
"alignment",
|
|
362
|
+
"orientation"
|
|
363
|
+
]);
|
|
364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
365
|
+
"div",
|
|
366
|
+
__spreadProps(__spreadValues({}, other), {
|
|
367
|
+
className: classNames(
|
|
368
|
+
ACTIONBUTTONS_CLASSNAME,
|
|
369
|
+
{
|
|
370
|
+
[`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
|
|
371
|
+
[`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
|
|
372
|
+
},
|
|
373
|
+
props.className
|
|
374
|
+
),
|
|
375
|
+
children: props.children
|
|
376
|
+
})
|
|
377
|
+
);
|
|
378
|
+
};
|
|
379
|
+
ActionButtons.states = states3;
|
|
380
|
+
ActionButtons.options = options3;
|
|
381
|
+
ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
|
|
382
|
+
ActionButtons.defaultProps = defaultProps3;
|
|
383
383
|
|
|
384
384
|
// src/dialog/dialog.spec.tsx
|
|
385
385
|
var import_jsx_runtime4 = __require("react/jsx-runtime");
|
|
@@ -424,10 +424,7 @@
|
|
|
424
424
|
) }) })
|
|
425
425
|
] }),
|
|
426
426
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-window-content k-dialog-content", children: props.children }),
|
|
427
|
-
actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.
|
|
428
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { children: "Action" }),
|
|
429
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
430
|
-
] })
|
|
427
|
+
actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions k-dialog-actions", children: actionButtons })
|
|
431
428
|
]
|
|
432
429
|
})
|
|
433
430
|
);
|
|
@@ -451,12 +448,27 @@
|
|
|
451
448
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
452
449
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: styles }),
|
|
453
450
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
|
|
454
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "Title\n g y p\n t d l", actions: ["close"],
|
|
455
|
-
|
|
456
|
-
|
|
451
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "Title\n g y p\n t d l", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
452
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
453
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
454
|
+
] }), children: "Dialog content template" }),
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "Cursive\n g y p\n t d l", actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
456
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
457
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
458
|
+
] }), children: "Dialog without titlebar actions" }),
|
|
459
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "", actions: ["close"], actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
460
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
462
|
+
] }), children: "Dialog with empty title and actions" }),
|
|
457
463
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { title: "", children: "Dialog with empty title and no actions" }),
|
|
458
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, {
|
|
459
|
-
|
|
464
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { actionButtonsAlign: "end", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
465
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
467
|
+
] }), children: "Dialog without title" }),
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Dialog, { title: "Scrolling", actions: ["close"], actionButtonsAlign: "end", style: { height: "170px" }, actionButtons: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
469
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { children: "Action" }),
|
|
470
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { themeColor: "primary", children: "Primary" })
|
|
471
|
+
] }), children: [
|
|
460
472
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Dialog content template with long text and vertical scrolling." }),
|
|
461
473
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Dialog content template with long text and vertical scrolling." }),
|
|
462
474
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Dialog content template with long text and vertical scrolling." })
|