jsl-ui 9.28.2 → 9.28.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (170) hide show
  1. package/lib/components/IntervalComponent.d.ts +17 -17
  2. package/lib/components/IntervalComponent.js +65 -68
  3. package/lib/components/auto-suggest/AutoSuggestComponent.d.ts +22 -22
  4. package/lib/components/auto-suggest/AutoSuggestComponent.js +47 -49
  5. package/lib/components/button/ButtonComponent.d.ts +18 -18
  6. package/lib/components/button/ButtonComponent.js +29 -46
  7. package/lib/components/checkbox/CheckBoxComponent.d.ts +28 -28
  8. package/lib/components/checkbox/CheckBoxComponent.js +81 -98
  9. package/lib/components/date/DateComponent.d.ts +32 -32
  10. package/lib/components/date/DateComponent.js +89 -106
  11. package/lib/components/date-range/DateRangeComponent.d.ts +35 -35
  12. package/lib/components/date-range/DateRangeComponent.js +123 -136
  13. package/lib/components/date-time/DateTimeComponent.d.ts +15 -15
  14. package/lib/components/date-time/DateTimeComponent.js +39 -53
  15. package/lib/components/dialog/DialogComponent.d.ts +67 -67
  16. package/lib/components/dialog/DialogComponent.js +198 -251
  17. package/lib/components/drop-down/DropDownComponent.d.ts +27 -27
  18. package/lib/components/drop-down/DropDownComponent.js +60 -74
  19. package/lib/components/expander/ExpanderComponent.d.ts +27 -27
  20. package/lib/components/expander/ExpanderComponent.js +89 -90
  21. package/lib/components/form-field/FormComponent.d.ts +12 -12
  22. package/lib/components/form-field/FormComponent.js +23 -26
  23. package/lib/components/form-field/FormFieldComponent.d.ts +39 -39
  24. package/lib/components/form-field/FormFieldComponent.js +138 -140
  25. package/lib/components/grid/GridComponent.d.ts +26 -26
  26. package/lib/components/grid/GridComponent.js +110 -116
  27. package/lib/components/input/InputComponent.d.ts +33 -33
  28. package/lib/components/input/InputComponent.js +126 -147
  29. package/lib/components/loading/LoadingComponent.d.ts +8 -8
  30. package/lib/components/loading/LoadingComponent.js +20 -22
  31. package/lib/components/navigation/NavigationComponent.d.ts +34 -34
  32. package/lib/components/navigation/NavigationComponent.js +45 -70
  33. package/lib/components/notification/Notification.d.ts +19 -19
  34. package/lib/components/notification/Notification.js +65 -69
  35. package/lib/components/number/NumberComponent.d.ts +26 -26
  36. package/lib/components/number/NumberComponent.js +80 -98
  37. package/lib/components/overlay/OverlayComponent.d.ts +27 -27
  38. package/lib/components/overlay/OverlayComponent.js +137 -149
  39. package/lib/components/progress/ProgressComponent.d.ts +18 -18
  40. package/lib/components/progress/ProgressComponent.js +40 -42
  41. package/lib/components/ribbon-menu/RibbonMenuComponent.d.ts +12 -12
  42. package/lib/components/ribbon-menu/RibbonMenuComponent.js +23 -34
  43. package/lib/components/select/SelectComponent.d.ts +79 -79
  44. package/lib/components/select/SelectComponent.js +356 -369
  45. package/lib/components/select/SelectDDAreaComponent.d.ts +32 -32
  46. package/lib/components/select/SelectDDAreaComponent.js +303 -317
  47. package/lib/components/slider/nouislider.d.ts +44 -44
  48. package/lib/components/slider/nouislider.js +2158 -2158
  49. package/lib/components/stack-panel/SplitterComponent.d.ts +21 -21
  50. package/lib/components/stack-panel/SplitterComponent.js +124 -126
  51. package/lib/components/stack-panel/StackPanelComponent.d.ts +20 -20
  52. package/lib/components/stack-panel/StackPanelComponent.js +50 -64
  53. package/lib/components/tabs/TabsComponent.d.ts +40 -40
  54. package/lib/components/tabs/TabsComponent.js +200 -204
  55. package/lib/components/time/TimeComponent.d.ts +29 -29
  56. package/lib/components/time/TimeComponent.js +104 -113
  57. package/lib/components/tree-view/TreeViewComponent.d.ts +23 -23
  58. package/lib/components/tree-view/TreeViewComponent.js +43 -45
  59. package/lib/components/virtual-render/VirtualRenderComponent.d.ts +30 -30
  60. package/lib/components/virtual-render/VirtualRenderComponent.js +92 -104
  61. package/lib/core/culture.d.ts +5 -5
  62. package/lib/core/culture.js +385 -385
  63. package/lib/core/date.d.ts +14 -14
  64. package/lib/core/date.js +346 -350
  65. package/lib/core/helper.d.ts +13 -13
  66. package/lib/core/helper.js +100 -104
  67. package/lib/core/jq.d.ts +37 -37
  68. package/lib/core/jq.js +362 -371
  69. package/lib/core/lang.d.ts +24 -24
  70. package/lib/core/lang.js +24 -28
  71. package/lib/core/numeric.d.ts +7 -7
  72. package/lib/core/numeric.js +139 -143
  73. package/lib/core/polyfills.js +22 -22
  74. package/lib/core.d.ts +6 -6
  75. package/lib/core.js +6 -6
  76. package/lib/grid/filterDialogs/dateRangeFilter.d.ts +7 -7
  77. package/lib/grid/filterDialogs/dateRangeFilter.js +106 -156
  78. package/lib/grid/filterDialogs/excelFilter.d.ts +9 -9
  79. package/lib/grid/filterDialogs/excelFilter.js +250 -316
  80. package/lib/grid/plugins/ext.overlay.d.ts +2 -2
  81. package/lib/grid/plugins/ext.overlay.js +295 -295
  82. package/lib/grid/plugins/slick.cellrangedecorator.d.ts +12 -12
  83. package/lib/grid/plugins/slick.cellrangedecorator.js +68 -68
  84. package/lib/grid/plugins/slick.cellrangeselector.d.ts +1 -1
  85. package/lib/grid/plugins/slick.cellrangeselector.js +144 -144
  86. package/lib/grid/plugins/slick.cellselectionmodel.d.ts +1 -1
  87. package/lib/grid/plugins/slick.cellselectionmodel.js +194 -194
  88. package/lib/grid/plugins/slick.headerbuttons.d.ts +55 -55
  89. package/lib/grid/plugins/slick.headerbuttons.js +156 -156
  90. package/lib/grid/plugins/slick.headermenu.d.ts +74 -74
  91. package/lib/grid/plugins/slick.headermenu.js +260 -260
  92. package/lib/grid/plugins/slick.rowmovemanager.d.ts +18 -18
  93. package/lib/grid/plugins/slick.rowmovemanager.js +249 -249
  94. package/lib/grid/plugins/slick.rowselectionmodel.d.ts +1 -1
  95. package/lib/grid/plugins/slick.rowselectionmodel.js +167 -167
  96. package/lib/grid/slick.core.d.ts +91 -91
  97. package/lib/grid/slick.core.js +574 -574
  98. package/lib/grid/slick.creator.d.ts +81 -81
  99. package/lib/grid/slick.creator.js +726 -726
  100. package/lib/grid/slick.dataview.d.ts +71 -71
  101. package/lib/grid/slick.dataview.js +1069 -1080
  102. package/lib/grid/slick.editors.core.d.ts +4 -4
  103. package/lib/grid/slick.editors.core.js +235 -235
  104. package/lib/grid/slick.editors.date.d.ts +2 -2
  105. package/lib/grid/slick.editors.date.js +125 -125
  106. package/lib/grid/slick.editors.lookup.d.ts +14 -14
  107. package/lib/grid/slick.editors.lookup.js +352 -353
  108. package/lib/grid/slick.editors.nav.d.ts +6 -6
  109. package/lib/grid/slick.editors.nav.js +22 -22
  110. package/lib/grid/slick.formatters.d.ts +17 -17
  111. package/lib/grid/slick.formatters.js +144 -144
  112. package/lib/grid/slick.grid.d.ts +285 -285
  113. package/lib/grid/slick.grid.js +5409 -5412
  114. package/lib/grid/slick.groupitemmetadataprovider.d.ts +39 -39
  115. package/lib/grid/slick.groupitemmetadataprovider.js +165 -165
  116. package/lib/grid/slick.tree.d.ts +33 -33
  117. package/lib/grid/slick.tree.js +208 -220
  118. package/lib/grid.css +1 -705
  119. package/lib/grid.d.ts +13 -13
  120. package/lib/grid.js +13 -13
  121. package/lib/index.css +8 -2195
  122. package/lib/index.css.map +1 -1
  123. package/lib/index.d.ts +56 -55
  124. package/lib/index.js +61 -61
  125. package/lib/index.js.map +1 -1
  126. package/lib/interaction/dataconverter.d.ts +4 -4
  127. package/lib/interaction/dataconverter.js +0 -1
  128. package/lib/interaction/eventhandler.d.ts +13 -13
  129. package/lib/interaction/eventhandler.js +39 -42
  130. package/lib/interaction/moveable.d.ts +39 -39
  131. package/lib/interaction/moveable.js +160 -174
  132. package/lib/interaction/resizable.d.ts +37 -37
  133. package/lib/interaction/resizable.js +109 -123
  134. package/lib/ui/auto.suggest.d.ts +18 -18
  135. package/lib/ui/auto.suggest.js +244 -259
  136. package/lib/ui/date.picker/date-picker-options.d.ts +11 -11
  137. package/lib/ui/date.picker/date-picker-options.js +76 -76
  138. package/lib/ui/date.picker/lib/date-manip.d.ts +74 -74
  139. package/lib/ui/date.picker/lib/date-manip.js +120 -120
  140. package/lib/ui/date.picker/lib/dom.d.ts +23 -23
  141. package/lib/ui/date.picker/lib/dom.js +28 -28
  142. package/lib/ui/date.picker/lib/emitter.d.ts +13 -13
  143. package/lib/ui/date.picker/lib/emitter.js +49 -49
  144. package/lib/ui/date.picker/lib/fns.d.ts +23 -23
  145. package/lib/ui/date.picker/lib/fns.js +39 -43
  146. package/lib/ui/date.picker/mode/base-mode.d.ts +26 -26
  147. package/lib/ui/date.picker/mode/base-mode.js +248 -248
  148. package/lib/ui/date.picker/mode/dropdown-mode.d.ts +28 -28
  149. package/lib/ui/date.picker/mode/dropdown-mode.js +50 -50
  150. package/lib/ui/date.picker/mode/index.d.ts +28 -28
  151. package/lib/ui/date.picker/mode/index.js +18 -18
  152. package/lib/ui/date.picker/mode/modal-mode.d.ts +25 -25
  153. package/lib/ui/date.picker/mode/modal-mode.js +17 -17
  154. package/lib/ui/date.picker/mode/permanent-mode.d.ts +29 -29
  155. package/lib/ui/date.picker/mode/permanent-mode.js +19 -19
  156. package/lib/ui/date.picker/views/day-picker.d.ts +40 -40
  157. package/lib/ui/date.picker/views/day-picker.js +155 -155
  158. package/lib/ui/date.picker/views/month-picker.d.ts +26 -26
  159. package/lib/ui/date.picker/views/month-picker.js +65 -65
  160. package/lib/ui/date.picker/views/year-picker.d.ts +20 -20
  161. package/lib/ui/date.picker/views/year-picker.js +66 -66
  162. package/lib/ui/date.picker.d.ts +66 -66
  163. package/lib/ui/date.picker.js +32 -32
  164. package/lib/ui/dialog.d.ts +22 -22
  165. package/lib/ui/dialog.js +98 -113
  166. package/lib/ui/drop.down.d.ts +52 -52
  167. package/lib/ui/drop.down.js +2112 -2112
  168. package/lib/ui/number.input.d.ts +13 -13
  169. package/lib/ui/number.input.js +56 -67
  170. package/package.json +1 -1
@@ -1,66 +1,66 @@
1
- import './date.picker/css/tiny-date-picker.css';
2
- export interface IDatePickerLangOptions {
3
- days: string[];
4
- months: string[];
5
- today: string;
6
- close: string;
7
- clear: string;
8
- }
9
- export interface IDatePickerOptions {
10
- lang?: IDatePickerLangOptions;
11
- mode?: 'dp-modal' | 'dp-below' | 'dp-permanent';
12
- hilightedDate?: string | Date;
13
- min?: string | Date;
14
- max?: string | Date;
15
- format?: (d: Date) => string;
16
- parse?: (s: string) => Date;
17
- dateClass?: (d: Date) => string;
18
- inRange?: (d: Date) => boolean;
19
- dayOffset?: number;
20
- }
21
- /**
22
- * The state values for the date picker
23
- *
24
- * @typedef {Object} DatePickerState
25
- * @property {string} view - The current view 'day' | 'month' | 'year'
26
- * @property {Date} selectedDate - The date which has been selected by the user
27
- * @property {Date} hilightedDate - The date which is currently hilighted / active
28
- */
29
- /**
30
- * An instance of TinyDatePicker
31
- *
32
- * @typedef {Object} DatePicker
33
- * @property {DatePickerState} state - The values currently displayed.
34
- * @property {function} on - Adds an event handler
35
- * @property {function} off - Removes an event handler
36
- * @property {function} setState - Changes the current state of the date picker
37
- * @property {function} open - Opens the date picker
38
- * @property {function} close - Closes the date picker
39
- * @property {function} destroy - Destroys the date picker (removing all handlers from the input, too)
40
- */
41
- export interface IDatePicker {
42
- on(name: "open" | "close" | "statechange" | "select", handler: (e: any, dp: IDatePicker) => void): any;
43
- off(name?: "open" | "close" | "statechange" | "select", handler?: any): void;
44
- open(): void;
45
- close(): void;
46
- destroy(): void;
47
- setState(state: {
48
- selectedDate?: Date;
49
- view?: string;
50
- hilightedDate?: Date;
51
- }): void;
52
- readonly state: {
53
- selectedDate?: Date;
54
- view?: string;
55
- hilightedDate?: Date;
56
- };
57
- isVisible(): boolean;
58
- }
59
- /**
60
- * TinyDatePicker constructs a new date picker for the specified input
61
- *
62
- * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
63
- * @param {DatePickerOptions} opts The options for initializing the date picker
64
- * @returns {DatePicker}
65
- */
66
- export declare function DatePicker(input: HTMLElement | string, opts?: IDatePickerOptions): IDatePicker;
1
+ import './date.picker/css/tiny-date-picker.css';
2
+ export interface IDatePickerLangOptions {
3
+ days: string[];
4
+ months: string[];
5
+ today: string;
6
+ close: string;
7
+ clear: string;
8
+ }
9
+ export interface IDatePickerOptions {
10
+ lang?: IDatePickerLangOptions;
11
+ mode?: 'dp-modal' | 'dp-below' | 'dp-permanent';
12
+ hilightedDate?: string | Date;
13
+ min?: string | Date;
14
+ max?: string | Date;
15
+ format?: (d: Date) => string;
16
+ parse?: (s: string) => Date;
17
+ dateClass?: (d: Date) => string;
18
+ inRange?: (d: Date) => boolean;
19
+ dayOffset?: number;
20
+ }
21
+ /**
22
+ * The state values for the date picker
23
+ *
24
+ * @typedef {Object} DatePickerState
25
+ * @property {string} view - The current view 'day' | 'month' | 'year'
26
+ * @property {Date} selectedDate - The date which has been selected by the user
27
+ * @property {Date} hilightedDate - The date which is currently hilighted / active
28
+ */
29
+ /**
30
+ * An instance of TinyDatePicker
31
+ *
32
+ * @typedef {Object} DatePicker
33
+ * @property {DatePickerState} state - The values currently displayed.
34
+ * @property {function} on - Adds an event handler
35
+ * @property {function} off - Removes an event handler
36
+ * @property {function} setState - Changes the current state of the date picker
37
+ * @property {function} open - Opens the date picker
38
+ * @property {function} close - Closes the date picker
39
+ * @property {function} destroy - Destroys the date picker (removing all handlers from the input, too)
40
+ */
41
+ export interface IDatePicker {
42
+ on(name: "open" | "close" | "statechange" | "select", handler: (e: any, dp: IDatePicker) => void): any;
43
+ off(name?: "open" | "close" | "statechange" | "select", handler?: any): void;
44
+ open(): void;
45
+ close(): void;
46
+ destroy(): void;
47
+ setState(state: {
48
+ selectedDate?: Date;
49
+ view?: string;
50
+ hilightedDate?: Date;
51
+ }): void;
52
+ readonly state: {
53
+ selectedDate?: Date;
54
+ view?: string;
55
+ hilightedDate?: Date;
56
+ };
57
+ isVisible(): boolean;
58
+ }
59
+ /**
60
+ * TinyDatePicker constructs a new date picker for the specified input
61
+ *
62
+ * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
63
+ * @param {DatePickerOptions} opts The options for initializing the date picker
64
+ * @returns {DatePicker}
65
+ */
66
+ export declare function DatePicker(input: HTMLElement | string, opts?: IDatePickerOptions): IDatePicker;
@@ -1,32 +1,32 @@
1
- import DatePickerOptions from './date.picker/date-picker-options';
2
- import Mode from './date.picker/mode/index';
3
- import Emitter from './date.picker/lib/emitter';
4
- import './date.picker/css/tiny-date-picker.css';
5
- /**
6
- * TinyDatePicker constructs a new date picker for the specified input
7
- *
8
- * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
9
- * @param {DatePickerOptions} opts The options for initializing the date picker
10
- * @returns {DatePicker}
11
- */
12
- export function DatePicker(input, opts) {
13
- var emitter = Emitter();
14
- var options = DatePickerOptions(opts);
15
- var mode = Mode(input, emit, options);
16
- var me = {
17
- get state() {
18
- return mode.state;
19
- },
20
- on: emitter.on,
21
- off: emitter.off,
22
- setState: mode.setState,
23
- open: mode.open,
24
- close: mode.close,
25
- destroy: mode.destroy,
26
- isVisible: mode.isVisible
27
- };
28
- function emit(evt) {
29
- emitter.emit(evt, me);
30
- }
31
- return me;
32
- }
1
+ import DatePickerOptions from './date.picker/date-picker-options';
2
+ import Mode from './date.picker/mode/index';
3
+ import Emitter from './date.picker/lib/emitter';
4
+ import './date.picker/css/tiny-date-picker.css';
5
+ /**
6
+ * TinyDatePicker constructs a new date picker for the specified input
7
+ *
8
+ * @param {HTMLElement | string} input The input or CSS selector associated with the datepicker
9
+ * @param {DatePickerOptions} opts The options for initializing the date picker
10
+ * @returns {DatePicker}
11
+ */
12
+ export function DatePicker(input, opts) {
13
+ var emitter = Emitter();
14
+ var options = DatePickerOptions(opts);
15
+ var mode = Mode(input, emit, options);
16
+ var me = {
17
+ get state() {
18
+ return mode.state;
19
+ },
20
+ on: emitter.on,
21
+ off: emitter.off,
22
+ setState: mode.setState,
23
+ open: mode.open,
24
+ close: mode.close,
25
+ destroy: mode.destroy,
26
+ isVisible: mode.isVisible
27
+ };
28
+ function emit(evt) {
29
+ emitter.emit(evt, me);
30
+ }
31
+ return me;
32
+ }
@@ -1,22 +1,22 @@
1
- import "./dialog.css";
2
- export interface IDialogOptions {
3
- autoOpen?: boolean;
4
- autoFocus?: string;
5
- modal?: boolean;
6
- closeOnEscape?: boolean;
7
- OkOnEnter?: boolean;
8
- closeOnOverlayClick?: boolean;
9
- onClose?: () => void | boolean;
10
- onOpen?: () => void;
11
- }
12
- export declare class JSLDialog {
13
- private options;
14
- private overlay;
15
- private el;
16
- private onKeydownEvent;
17
- constructor(el: HTMLElement, options: IDialogOptions);
18
- open(modal?: boolean): void;
19
- close(): void;
20
- getOverlay(): HTMLElement;
21
- }
22
- export declare function Dialog(input: HTMLElement | string, options?: IDialogOptions): JSLDialog;
1
+ import "./dialog.css";
2
+ export interface IDialogOptions {
3
+ autoOpen?: boolean;
4
+ autoFocus?: string;
5
+ modal?: boolean;
6
+ closeOnEscape?: boolean;
7
+ OkOnEnter?: boolean;
8
+ closeOnOverlayClick?: boolean;
9
+ onClose?: () => void | boolean;
10
+ onOpen?: () => void;
11
+ }
12
+ export declare class JSLDialog {
13
+ private options;
14
+ private overlay;
15
+ private el;
16
+ private onKeydownEvent;
17
+ constructor(el: HTMLElement, options: IDialogOptions);
18
+ open(modal?: boolean): void;
19
+ close(): void;
20
+ getOverlay(): HTMLElement;
21
+ }
22
+ export declare function Dialog(input: HTMLElement | string, options?: IDialogOptions): JSLDialog;
package/lib/ui/dialog.js CHANGED
@@ -1,113 +1,98 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import "./dialog.css";
13
- var defaultOptions = {
14
- autoOpen: false,
15
- autoFocus: "input,button,textarea",
16
- closeOnOverlayClick: true,
17
- modal: true,
18
- closeOnEscape: true
19
- };
20
- var JSLDialog = /** @class */ (function () {
21
- function JSLDialog(el, options) {
22
- var _this = this;
23
- this.options = options;
24
- this.overlay = el;
25
- this.el = el.firstElementChild;
26
- if (this.options.closeOnOverlayClick) {
27
- this.overlay.addEventListener("mousedown", function (evt) {
28
- if (evt.target === _this.overlay) {
29
- _this.close();
30
- }
31
- });
32
- this.overlay.addEventListener("touchstart", function (evt) {
33
- if (evt.target === _this.overlay) {
34
- _this.close();
35
- }
36
- });
37
- }
38
- }
39
- JSLDialog.prototype.open = function (modal) {
40
- var _this = this;
41
- if ((modal !== undefined && !modal) || !this.options.modal) {
42
- this.overlay.style.background = "transparent";
43
- this.overlay.style.pointerEvents = "none";
44
- }
45
- this.overlay.style.display = "block";
46
- var $footer = this.el.querySelector(".dlg-footer");
47
- var $body = this.el.querySelector(".dlg-body");
48
- if ($footer != null && $body != null) {
49
- // TODO ?
50
- }
51
- if (this.options.autoFocus) {
52
- setTimeout(function () {
53
- var firstInput = _this.el.querySelector(_this.options.autoFocus);
54
- if (firstInput != null) {
55
- firstInput.focus();
56
- }
57
- }, 0);
58
- }
59
- if (this.options.closeOnEscape || this.options.OkOnEnter) {
60
- this.onKeydownEvent = function (args) {
61
- var _a;
62
- if (args.keyCode === 27 && _this.options.closeOnEscape) { // escape
63
- _this.close();
64
- }
65
- else if (args.keyCode === 13 && _this.options.OkOnEnter) { // ok
66
- var ok_btn = _this.el.querySelector(".dlg-ok-btn");
67
- if (ok_btn != null) {
68
- (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
69
- ok_btn.click();
70
- }
71
- }
72
- };
73
- document.addEventListener("keydown", this.onKeydownEvent);
74
- }
75
- if (this.options.onOpen) {
76
- this.options.onOpen();
77
- }
78
- };
79
- JSLDialog.prototype.close = function () {
80
- if (this.options.onClose) {
81
- if (this.options.onClose() === false) {
82
- return;
83
- }
84
- }
85
- this.overlay.style.display = "none";
86
- if (this.onKeydownEvent != null) {
87
- document.removeEventListener("keydown", this.onKeydownEvent);
88
- }
89
- };
90
- JSLDialog.prototype.getOverlay = function () {
91
- return this.overlay;
92
- };
93
- return JSLDialog;
94
- }());
95
- export { JSLDialog };
96
- export function Dialog(input, options) {
97
- var o = __assign(__assign({}, defaultOptions), options);
98
- var el;
99
- if (typeof input === "string") {
100
- el = document.querySelector(input);
101
- }
102
- else {
103
- el = input;
104
- }
105
- var result = new JSLDialog(el, o);
106
- if (!o.autoOpen) {
107
- el.style.display = "none";
108
- }
109
- else {
110
- result.open();
111
- }
112
- return result;
113
- }
1
+ import "./dialog.css";
2
+ const defaultOptions = {
3
+ autoOpen: false,
4
+ autoFocus: "input,button,textarea",
5
+ closeOnOverlayClick: true,
6
+ modal: true,
7
+ closeOnEscape: true
8
+ };
9
+ export class JSLDialog {
10
+ constructor(el, options) {
11
+ this.options = options;
12
+ this.overlay = el;
13
+ this.el = el.firstElementChild;
14
+ if (this.options.closeOnOverlayClick) {
15
+ this.overlay.addEventListener("mousedown", (evt) => {
16
+ if (evt.target === this.overlay) {
17
+ this.close();
18
+ }
19
+ });
20
+ this.overlay.addEventListener("touchstart", (evt) => {
21
+ if (evt.target === this.overlay) {
22
+ this.close();
23
+ }
24
+ });
25
+ }
26
+ }
27
+ open(modal) {
28
+ if ((modal !== undefined && !modal) || !this.options.modal) {
29
+ this.overlay.style.background = "transparent";
30
+ this.overlay.style.pointerEvents = "none";
31
+ }
32
+ this.overlay.style.display = "block";
33
+ const $footer = this.el.querySelector(".dlg-footer");
34
+ const $body = this.el.querySelector(".dlg-body");
35
+ if ($footer != null && $body != null) {
36
+ // TODO ?
37
+ }
38
+ if (this.options.autoFocus) {
39
+ setTimeout(() => {
40
+ const firstInput = this.el.querySelector(this.options.autoFocus);
41
+ if (firstInput != null) {
42
+ firstInput.focus();
43
+ }
44
+ }, 0);
45
+ }
46
+ if (this.options.closeOnEscape || this.options.OkOnEnter) {
47
+ this.onKeydownEvent = (args) => {
48
+ var _a;
49
+ if (args.keyCode === 27 && this.options.closeOnEscape) { // escape
50
+ this.close();
51
+ }
52
+ else if (args.keyCode === 13 && this.options.OkOnEnter) { // ok
53
+ const ok_btn = this.el.querySelector(".dlg-ok-btn");
54
+ if (ok_btn != null) {
55
+ (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
56
+ ok_btn.click();
57
+ }
58
+ }
59
+ };
60
+ document.addEventListener("keydown", this.onKeydownEvent);
61
+ }
62
+ if (this.options.onOpen) {
63
+ this.options.onOpen();
64
+ }
65
+ }
66
+ close() {
67
+ if (this.options.onClose) {
68
+ if (this.options.onClose() === false) {
69
+ return;
70
+ }
71
+ }
72
+ this.overlay.style.display = "none";
73
+ if (this.onKeydownEvent != null) {
74
+ document.removeEventListener("keydown", this.onKeydownEvent);
75
+ }
76
+ }
77
+ getOverlay() {
78
+ return this.overlay;
79
+ }
80
+ }
81
+ export function Dialog(input, options) {
82
+ const o = { ...defaultOptions, ...options };
83
+ let el;
84
+ if (typeof input === "string") {
85
+ el = document.querySelector(input);
86
+ }
87
+ else {
88
+ el = input;
89
+ }
90
+ const result = new JSLDialog(el, o);
91
+ if (!o.autoOpen) {
92
+ el.style.display = "none";
93
+ }
94
+ else {
95
+ result.open();
96
+ }
97
+ return result;
98
+ }
@@ -1,52 +1,52 @@
1
- /*!
2
- * Selectr 2.4.12
3
- * http://mobius.ovh/docs/selectr
4
- *
5
- * Released under the MIT license
6
- */
7
- import "./drop.down.css";
8
- export interface IDropDown {
9
- setValue: (value: string | string[]) => void;
10
- getValue: (toObject?: boolean, toJson?: boolean) => string | string[];
11
- add: (data: {
12
- value: string;
13
- text: string;
14
- } | Array<{
15
- value: string;
16
- text: string;
17
- }>, skipDuplicate?: boolean) => void;
18
- remove: (element: number | string | any[]) => void;
19
- removeAll: () => void;
20
- serialize: (toJson?: boolean) => any;
21
- open: () => void;
22
- close: () => void;
23
- toggle: () => void;
24
- clear: () => void;
25
- disable: (submitValue?: boolean) => void;
26
- enable: () => void;
27
- destroy: () => void;
28
- }
29
- export interface IDropDownOptions {
30
- defaultSelected?: boolean;
31
- multiple?: boolean;
32
- data?: any[];
33
- pagination?: number;
34
- sortSelected?: boolean;
35
- searchable?: boolean;
36
- clearable?: boolean;
37
- allowDeselect?: boolean;
38
- width?: number | string;
39
- placeholder?: string;
40
- taggable?: boolean;
41
- maxSelections?: number;
42
- tagSeperators?: string[];
43
- tagPlaceholder?: string;
44
- renderOption?: (option: any) => string;
45
- renderSelection?: (option: any) => string;
46
- closeOnScroll?: boolean;
47
- customClass?: string;
48
- messages?: {
49
- [index: string]: string;
50
- };
51
- }
52
- export declare let DropDown: (input: string | HTMLElement, config?: IDropDownOptions) => IDropDown;
1
+ /*!
2
+ * Selectr 2.4.12
3
+ * http://mobius.ovh/docs/selectr
4
+ *
5
+ * Released under the MIT license
6
+ */
7
+ import "./drop.down.css";
8
+ export interface IDropDown {
9
+ setValue: (value: string | string[]) => void;
10
+ getValue: (toObject?: boolean, toJson?: boolean) => string | string[];
11
+ add: (data: {
12
+ value: string;
13
+ text: string;
14
+ } | Array<{
15
+ value: string;
16
+ text: string;
17
+ }>, skipDuplicate?: boolean) => void;
18
+ remove: (element: number | string | any[]) => void;
19
+ removeAll: () => void;
20
+ serialize: (toJson?: boolean) => any;
21
+ open: () => void;
22
+ close: () => void;
23
+ toggle: () => void;
24
+ clear: () => void;
25
+ disable: (submitValue?: boolean) => void;
26
+ enable: () => void;
27
+ destroy: () => void;
28
+ }
29
+ export interface IDropDownOptions {
30
+ defaultSelected?: boolean;
31
+ multiple?: boolean;
32
+ data?: any[];
33
+ pagination?: number;
34
+ sortSelected?: boolean;
35
+ searchable?: boolean;
36
+ clearable?: boolean;
37
+ allowDeselect?: boolean;
38
+ width?: number | string;
39
+ placeholder?: string;
40
+ taggable?: boolean;
41
+ maxSelections?: number;
42
+ tagSeperators?: string[];
43
+ tagPlaceholder?: string;
44
+ renderOption?: (option: any) => string;
45
+ renderSelection?: (option: any) => string;
46
+ closeOnScroll?: boolean;
47
+ customClass?: string;
48
+ messages?: {
49
+ [index: string]: string;
50
+ };
51
+ }
52
+ export declare let DropDown: (input: string | HTMLElement, config?: IDropDownOptions) => IDropDown;