timepicker-ui 2.6.1 → 3.0.1

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.
@@ -1,318 +0,0 @@
1
- declare type OptionTypes = {
2
- /**
3
- * @description Set custom text to AM label
4
- * @default "AM"
5
- */
6
- amLabel?: string;
7
- /**
8
- * @description Turn on/off animations on picker on start/close
9
- * @default true
10
- */
11
- animation?: boolean;
12
- /**
13
- * @description Set default selector to append timepicker inside it. Timepicker default append to `body`
14
- * @default ""
15
- */
16
- appendModalSelector?: string;
17
- /**
18
- * @description Turn on/off backdrop
19
- * @default true
20
- */
21
- backdrop?: boolean;
22
- /**
23
- * @description Set custom text to cancel button
24
- * @default "CANCEL"
25
- */
26
- cancelLabel?: string;
27
- /**
28
- * @description Edit hour/minutes on the web mode.
29
- * @default false
30
- */
31
- editable?: boolean;
32
- /**
33
- * @description Turn on/off scroll if timepicker is open
34
- * @default false
35
- */
36
- enableScrollbar?: boolean;
37
- /**
38
- * @description Turn on/off icon to switch desktop/mobile
39
- * @default false
40
- */
41
- enableSwitchIcon?: boolean;
42
- /**
43
- * @description Set custom text to time label on mobile version
44
- * @default "Enter Time"
45
- */
46
- mobileTimeLabel?: string;
47
- /**
48
- * @description Turn on/off focus to input after close modal
49
- * @default false
50
- */
51
- focusInputAfterCloseModal?: boolean;
52
- /**
53
- * @description Set custom text to hour label on mobile version
54
- * @default "Hour"
55
- */
56
- hourMobileLabel?: string;
57
- /**
58
- * @description Set default template to switch desktop.This options is using by default material design icon
59
- * @default "<i class='material-icons timepicker-ui-keyboard-icon'> keyboard </i>"
60
- */
61
- iconTemplate?: string;
62
- /**
63
- * @description Set default template to switch mobile. This options is using by default material design icon
64
- * @default "<i class='material-icons timepicker-ui-keyboard-icon'> schedule </i>"
65
- */
66
- iconTemplateMobile?: string;
67
- /**
68
- * @description Set increment hour by `1`, `2`, `3` hour
69
- * @default 1
70
- */
71
- incrementHours?: number;
72
- /**
73
- * @description Set increment minutes by `1`, `5`, `10`, `15` minutes
74
- * @default 1
75
- */
76
- incrementMinutes?: number;
77
- /**
78
- * @description set custom text to minute label on mobile version
79
- * @default "Minute"
80
- */
81
- minuteMobileLabel?: string;
82
- /**
83
- * @description Turn on/off mobile version
84
- * @default false
85
- */
86
- mobile?: boolean;
87
- /**
88
- * @description Set custom text to ok label
89
- * @default "OK"
90
- */
91
- okLabel?: string;
92
- /**
93
- * @description Set custom text to pm label
94
- * @default "PM"
95
- */
96
- pmLabel?: string;
97
- /**
98
- * @description Set custom text to time label on desktop version
99
- * @default "Select Time"
100
- */
101
- timeLabel?: string;
102
- /**
103
- * @description Turn on/off switch to minutes by select hour
104
- * @default true
105
- */
106
- switchToMinutesAfterSelectHour?: boolean;
107
- /**
108
- * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
109
-
110
- * The offical version of Material Design 3 is still not avaialbe for the WEB version.Theme `m3` has been added
111
- * based on the design what you can find [here](https://m3.material.io/components/time-pickers/overview).
112
- * If new version M3 will be released this design will get improve.
113
- * @default "basic"
114
- */
115
- theme?: 'basic' | 'crane-straight' | 'crane-radius' | 'm3';
116
- /**
117
- * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
118
- * @default false
119
- */
120
- clockType?: '12h' | '24h';
121
- /**
122
- * @description - The `hours` and `minutes` are arrays which accept strings and numbers to block select hours/minutes.
123
- * - The `interval` key allow only string with interval values i.e., if you have 24h clockType the string can be 03:00 - 15:00, 01:20 - 05:15, 02:03 - 06:55 etc.. On the other hand if you have 12h clockType the string can be i.e 01:30 PM - 6:30 PM, 02:00 AM - 10:00 AM, 02:30 AM - 10:30 PM. It is important to remember that first hour in the interval option should be less that the second value if you want to block values from AM to PM and if you are using interval with 24h clockType.
124
- * - If the interval key is set, the hours/minutes keys are `ignored`.
125
- * @example
126
- disabledTime: {
127
- minutes: [1,2,4,5,55,23,"22","38"],
128
- hours: [1,"3","5", 8],
129
- interval: "10:00 AM - 12:00 PM",
130
- }
131
- * @default undefined
132
- */
133
- disabledTime?: {
134
- minutes?: Array<string | number>;
135
- hours?: Array<string | number>;
136
- interval?: string;
137
- };
138
- /**
139
- * @description Set current time to the input and timepicker.\
140
- * If this options is set to `true` it's gonna update picker with toLocaleTimeString() and input with value based on your location.
141
- * This option also allows to put object with properties.
142
- * @example
143
- currentTime: {
144
- time: new Date(),
145
- updateInput: true,
146
- locales: "en-US",
147
- preventClockType: false
148
- };
149
- * @example currentTime: true
150
- * @default undefined
151
- */
152
- currentTime?: {
153
- /**
154
- * The `time` key allows to put any valid date to update picker.
155
- * @requires
156
- * If the `updateInput` is set to `false/undefined` and the default value from the input not exist, the `time` key value will be displayed in the picker.
157
- *
158
- * If the `updateInput` is set to `false/undefined` but the default value from the input exist, the `time` key will be ignored.
159
- */
160
- time?: Date;
161
- /**
162
- * The `updateInput` key is set to `true` it's going update input value with set time key.
163
- */
164
- updateInput?: boolean;
165
- /**
166
- * The `locales` key can change language from `toLocaleTimeString()`.
167
- */
168
- locales?: string | string[];
169
- /**
170
- * The `preventClockType` key if is set to `true` it's `force` the clockType option to set value "12h" or "24h" based on your location
171
- * with current time and `locales` key value is ignored.
172
- */
173
- preventClockType?: boolean;
174
- } | boolean;
175
- /**
176
- * @description Set focus trap to the modal element to all elements with tabindex in the picker
177
- * @default true
178
- */
179
- focusTrap?: boolean;
180
- /**
181
- * @description Set delay to clickable elements like button "OK", "CANCEL" etc. The value has to be set in milliseconds.
182
- * @default 300
183
- */
184
- delayHandler?: number;
185
- };
186
-
187
- declare type TypeFunction = () => void;
188
- declare class TimepickerUI {
189
- private _degreesHours;
190
- private _degreesMinutes;
191
- private _options;
192
- private _eventsClickMobile;
193
- private _eventsClickMobileHandler;
194
- private _mutliEventsMove;
195
- private _mutliEventsMoveHandler;
196
- private _clickTouchEvents;
197
- private _element;
198
- private _isMobileView;
199
- private _isTouchMouseMove;
200
- private _disabledTime;
201
- private _cloned;
202
- private _inputEvents;
203
- private _isModalRemove?;
204
- constructor(element: HTMLElement, options?: OptionTypes);
205
- private get modalTemplate();
206
- private get modalElement();
207
- private get clockFace();
208
- private get input();
209
- private get clockHand();
210
- private get circle();
211
- private get tipsWrapper();
212
- private get tipsWrapperFor24h();
213
- private get minutes();
214
- private get hour();
215
- private get AM();
216
- private get PM();
217
- private get minutesTips();
218
- private get hourTips();
219
- private get allValueTips();
220
- private get openElementData();
221
- private get openElement();
222
- private get cancelButton();
223
- private get okButton();
224
- private get activeTypeMode();
225
- private get keyboardClockIcon();
226
- private get footer();
227
- private get wrapper();
228
- /**
229
- * @description The create method that init timepicker
230
- */
231
- create: () => void;
232
- /**
233
- * @description The open method opens immediately timepicker after init
234
- * @param callback - The callback function triggered when timepicker is open by this method
235
- */
236
- open: (callback?: (() => void) | undefined) => void;
237
- /**
238
- * @description Closure method closes the timepicker with double parentheses
239
- * @param args - The first parentheses doesn't have any paremeters. The second parentheses accepts parameters and these parameters are optional in this method and order is any. You can set callback function first or boolean,
240
- * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker.
241
- * The callback function start immediately after close, if is invoke. The max parameters length is set to 2
242
- */
243
- close: () => (...args: (boolean | TypeFunction)[]) => void;
244
- /**
245
- * @description The destroy method destroy actual instance of picker by cloning element.
246
- * @param callback - The callback function is started after destroyed method. This parameter is optional.
247
- */
248
- destroy: (callback?: TypeFunction | undefined) => void;
249
- /**
250
- * @description The update method which update timepicker with new options and can create a new instance.
251
- * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current
252
- * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update
253
- * function and is optional. The `create` option is useful if you are using destroy and update methods together.
254
- * @param callback - The `callback` function is started after update method. This parameter is optional.
255
- */
256
- update: (value: {
257
- options: OptionTypes;
258
- create?: boolean;
259
- }, callback?: TypeFunction | undefined) => void;
260
- private _preventClockTypeByCurrentTime;
261
- private _updateInputValueWithCurrentTimeOnStart;
262
- private _checkDisabledValuesOnStart;
263
- private _checkMobileOption;
264
- private _getDisableTime;
265
- private _removeCircleClockClasses24h;
266
- private _setCircleClockClasses24h;
267
- private _setErrorHandler;
268
- private _removeErrorHandler;
269
- private _setOnStartCSSClassesIfClockType24h;
270
- private _setTheme;
271
- private _setInputClassToInputElement;
272
- private _setDataOpenToInputIfDosentExistInWrapper;
273
- private _setClassTopOpenElement;
274
- private _removeBackdrop;
275
- private _setNormalizeClass;
276
- private _setFlexEndToFooterIfNoKeyboardIcon;
277
- private _eventsBundle;
278
- private _handleOpenOnClick;
279
- private _getInputValueOnOpenAndSet;
280
- private _handleCancelButton;
281
- private _handleOkButton;
282
- private _setShowClassToBackdrop;
283
- private _handleBackdropClick;
284
- private _setBgColorToCirleWithHourTips;
285
- private _setBgColorToCircleWithMinutesTips;
286
- private _removeBgColorToCirleWithMinutesTips;
287
- private _setTimepickerClassToElement;
288
- private _setClassActiveToHourOnOpen;
289
- private _setMinutesToClock;
290
- private _setHoursToClock;
291
- private _setTransformToCircleWithSwitchesHour;
292
- private _setTransformToCircleWithSwitchesMinutes;
293
- private _getDestructuringObj;
294
- private _handleAmClick;
295
- private _handlePmClick;
296
- private _handleAnimationClock;
297
- private _handleAnimationSwitchTipsMode;
298
- private _handleClasses24h;
299
- private _handleHourEvents;
300
- private _handleMinutesEvents;
301
- private _handleEventToMoveHand;
302
- private _toggleClassActiveToValueTips;
303
- private _handleMoveHand;
304
- private _setModalTemplate;
305
- private _setScrollbarOrNot;
306
- private _setAnimationToOpen;
307
- private _removeAnimationToClose;
308
- private _handlerViewChange;
309
- private _handleIconChangeView;
310
- private _handlerClickHourMinutes;
311
- private _handleClickOnHourMobile;
312
- private _handleKeyPress;
313
- private _handleEscClick;
314
- private _focusTrapHandler;
315
- private _handleOpenOnEnterFocus;
316
- }
317
-
318
- export { OptionTypes, TimepickerUI };