@operato/input 1.0.0-alpha.23 → 1.0.0-alpha.24

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 (13) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/demo/index-crontab.html +36 -0
  3. package/demo/index.html +1 -0
  4. package/dist/src/index.d.ts +1 -0
  5. package/dist/src/index.js +1 -0
  6. package/dist/src/index.js.map +1 -1
  7. package/dist/src/ox-input-crontab.d.ts +23 -0
  8. package/dist/src/ox-input-crontab.js +560 -0
  9. package/dist/src/ox-input-crontab.js.map +1 -0
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/package.json +8 -7
  12. package/src/index.ts +1 -0
  13. package/src/ox-input-crontab.ts +560 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.23...v1.0.0-alpha.24) (2022-03-17)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * refactoring grist-editor, property-editor and input ([ea7431a](https://github.com/hatiolab/operato/commit/ea7431a5e2dfd96ef392c1905e9622df7c2ef88c))
12
+
13
+
14
+
6
15
  ## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
7
16
 
8
17
  **Note:** Version bump only for package @operato/input
package/demo/index-crontab.html ADDED
@@ -0,0 +1,36 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <style>
6
+ body {
7
+ background: #fafafa;
8
+ }
9
+ </style>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <form id="demo"></form>
14
+
15
+ <script type="module">
16
+ import { html, render } from 'lit'
17
+ import '../dist/src/ox-input-crontab.js'
18
+
19
+ const form = document.querySelector('#demo')
20
+
21
+ render(
22
+ html`
23
+ <ox-input-crontab
24
+ value="* * * * * *"
25
+ name="crontab"
26
+ @change=${e => {
27
+ console.log(e.target.value)
28
+ console.log('form value', new FormData(form).get('crontab'))
29
+ }}
30
+ ></ox-input-crontab>
31
+ `,
32
+ form
33
+ )
34
+ </script>
35
+ </body>
36
+ </html>
package/demo/index.html CHANGED
@@ -32,5 +32,6 @@
32
32
  <a href="./index-stack.html">stack</a>
33
33
  <a href="./index-value-map.html">value-map</a>
34
34
  <a href="./index-value-ranges.html">value-ranges</a>
35
+ <a href="./index-crontab.html">crontab</a>
35
36
  </body>
36
37
  </html>
package/dist/src/index.d.ts CHANGED
@@ -17,3 +17,4 @@ export * from './ox-input-value-ranges.js';
17
17
  export * from './ox-input-value-map.js';
18
18
  export * from './ox-input-table.js';
19
19
  export * from './ox-input-scene-component-id.js';
20
+ export * from './ox-input-crontab';
package/dist/src/index.js CHANGED
@@ -17,4 +17,5 @@ export * from './ox-input-value-ranges.js';
17
17
  export * from './ox-input-value-map.js';
18
18
  export * from './ox-input-table.js';
19
19
  export * from './ox-input-scene-component-id.js';
20
+ export * from './ox-input-crontab';
20
21
  //# sourceMappingURL=index.js.map
package/dist/src/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab'\n"]}
package/dist/src/ox-input-crontab.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import '@material/mwc-button';
2
+ import { PropertyValues } from 'lit';
3
+ import { OxFormField } from './ox-form-field';
4
+ export declare class OxInputCrontab extends OxFormField {
5
+ static styles: import("lit").CSSResult;
6
+ value?: string;
7
+ second?: string;
8
+ minute?: string;
9
+ hour?: string;
10
+ dayOfMonth?: string;
11
+ month?: string;
12
+ dayOfWeek?: string;
13
+ tooltip: {
14
+ value: string;
15
+ description: string;
16
+ }[];
17
+ render(): import("lit-html").TemplateResult<1>;
18
+ get focusableElements(): HTMLElement[];
19
+ firstUpdated(): void;
20
+ updated(changes: PropertyValues<this>): void;
21
+ showTooltip(type: 'second' | 'minute' | 'hour' | 'dayOfMonth' | 'month' | 'dayOfWeek'): void;
22
+ onChange(): void;
23
+ }
package/dist/src/ox-input-crontab.js ADDED
@@ -0,0 +1,560 @@
1
+ import { __decorate } from "tslib";
2
+ import '@material/mwc-button';
3
+ import { css, html } from 'lit';
4
+ import { customElement, property, state } from 'lit/decorators.js';
5
+ import { OxFormField } from './ox-form-field';
6
+ import { i18next } from '@operato/i18n';
7
+ function createCronRegex(type) {
8
+ // https://gist.github.com/dkandalov/a2aed17cfdeb65243022
9
+ var regexByField = {};
10
+ regexByField['sec'] = '[0-5]?\\d';
11
+ regexByField['min'] = '[0-5]?\\d';
12
+ regexByField['hour'] = '[01]?\\d|2[0-3]';
13
+ regexByField['day'] = '0?[1-9]|[12]\\d|3[01]';
14
+ regexByField['month'] = '[1-9]|1[012]';
15
+ regexByField['dayOfWeek'] = '[0-7]';
16
+ var crontabFields = [type];
17
+ if (!type)
18
+ crontabFields = ['sec', 'min', 'hour', 'day', 'month', 'dayOfWeek'];
19
+ crontabFields.forEach(field => {
20
+ var number = regexByField[field];
21
+ var range = '(?:' +
22
+ number +
23
+ ')' +
24
+ '(?:' +
25
+ '(?:-|/|,' +
26
+ ('dayOfWeek' === field ? '|#' : '') +
27
+ ')' +
28
+ '(?:' +
29
+ number +
30
+ ')' +
31
+ ')?';
32
+ if (field === 'dayOfWeek')
33
+ range += '(?:L)?';
34
+ if (field === 'month')
35
+ range += '(?:L|W)?';
36
+ regexByField[field] = '\\?|\\*|' + range + '(?:,' + range + ')*';
37
+ });
38
+ var monthValues = 'JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC';
39
+ var monthRange = '(?:' + monthValues + ')(?:(?:-)(?:' + monthValues + '))?';
40
+ regexByField['month'] += '|\\?|\\*|' + monthRange + '(?:,' + monthRange + ')*';
41
+ var dayOfWeekValues = 'MON|TUE|WED|THU|FRI|SAT|SUN';
42
+ var dayOfWeekRange = '(?:' + dayOfWeekValues + ')(?:(?:-)(?:' + dayOfWeekValues + '))?';
43
+ regexByField['dayOfWeek'] += '|\\?|\\*|' + dayOfWeekRange + '(?:,' + dayOfWeekRange + ')*';
44
+ if (!type)
45
+ return ('^\\s*($' +
46
+ '|#' +
47
+ '|\\w+\\s*=' +
48
+ '|' +
49
+ '(' +
50
+ regexByField['sec'] +
51
+ ')\\s+' +
52
+ '(' +
53
+ regexByField['min'] +
54
+ ')\\s+' +
55
+ '(' +
56
+ regexByField['hour'] +
57
+ ')\\s+' +
58
+ '(' +
59
+ regexByField['day'] +
60
+ ')\\s+' +
61
+ '(' +
62
+ regexByField['month'] +
63
+ ')\\s+' +
64
+ '(' +
65
+ regexByField['dayOfWeek'] +
66
+ ')(|\\s)+' +
67
+ ')$');
68
+ else
69
+ return `^${regexByField[type]}$`;
70
+ }
71
+ let OxInputCrontab = class OxInputCrontab extends OxFormField {
72
+ constructor() {
73
+ super(...arguments);
74
+ this.tooltip = [];
75
+ }
76
+ static { this.styles = css `
77
+ :host {
78
+ display: block;
79
+ width: 100%;
80
+ height: 100%;
81
+ border: 0;
82
+ background-color: var(--main-section-background-color);
83
+ }
84
+
85
+ :host * {
86
+ box-sizing: border-box;
87
+ }
88
+ :host *:focus {
89
+ outline: none;
90
+ }
91
+
92
+ form {
93
+ display: grid;
94
+ width: 100%;
95
+ height: 100%;
96
+ padding: 1rem;
97
+ grid-template: auto auto 1fr auto / repeat(6, 1fr);
98
+ grid-gap: 0.5rem;
99
+ justify-content: center;
100
+ align-items: center;
101
+ overflow: auto;
102
+ }
103
+
104
+ label[for='example'] {
105
+ text-align: right;
106
+ grid-column: 3;
107
+ font: normal 1em var(--theme-font);
108
+ color: var(--secondary-color);
109
+ text-transform: capitalize;
110
+ }
111
+
112
+ #example {
113
+ grid-column: 4 / span 3;
114
+ width: 100%;
115
+ height: 100%;
116
+ font: normal 0.9em var(--theme-font);
117
+ text-transform: capitalize;
118
+ border-radius: var(--border-radius);
119
+ border: var(--border-dark-color);
120
+ }
121
+
122
+ input {
123
+ width: 100%;
124
+ margin-top: var(--margin-default);
125
+ padding: 5px;
126
+ border-radius: var(--border-radius);
127
+ border: var(--border-dark-color);
128
+ font: normal 1em var(--theme-font);
129
+ }
130
+ input:focus {
131
+ border: 1px solid var(--primary-color);
132
+ }
133
+
134
+ input:invalid {
135
+ border: 1px solid var(--status-danger-color);
136
+ color: var(--status-danger-color);
137
+ }
138
+
139
+ label {
140
+ width: 100%;
141
+ height: 100%;
142
+ font: normal 0.8em var(--theme-font);
143
+ color: var(--primary-color);
144
+ }
145
+
146
+ label:not([for='example']) {
147
+ text-align: center;
148
+ }
149
+
150
+ #input-wrapper {
151
+ grid-column: span 6;
152
+ display: flex;
153
+ flex-wrap: wrap;
154
+ margin: 0 -0.25rem;
155
+ }
156
+
157
+ #input-wrapper > div {
158
+ flex: 1;
159
+ display: grid;
160
+ grid-template-rows: 1fr auto;
161
+ grid-gap: 0.5rem;
162
+ min-width: 60px;
163
+ max-width: 33%;
164
+ margin: 0.25rem;
165
+ }
166
+
167
+ #tooltip {
168
+ grid-column: span 6;
169
+ display: grid;
170
+ grid-template-columns: auto 1fr;
171
+ grid-gap: 0;
172
+ margin: auto;
173
+ grid-auto-rows: min-content;
174
+ align-self: center;
175
+ align-items: center;
176
+ }
177
+
178
+ #tooltip > div {
179
+ padding: 0.25rem 0.5rem;
180
+ border-bottom: #ccc 1px dashed;
181
+ font: normal 0.9em var(--theme-font);
182
+ }
183
+
184
+ #tooltip > .crontab-value {
185
+ text-align: right;
186
+ color: var(--secondary-color);
187
+ }
188
+
189
+ #tooltip > .crontab-description {
190
+ text-align: left;
191
+ color: #585858;
192
+ }
193
+
194
+ #button-wrapper {
195
+ grid-column: 1 / span 6;
196
+ display: flex;
197
+ flex-wrap: wrap-reverse;
198
+ flex-direction: row-reverse;
199
+ margin: -0.25rem;
200
+ }
201
+
202
+ mwc-button {
203
+ background-color: var(--secondary-color);
204
+ border-radius: var(--button-border-radius);
205
+ --mdc-theme-primary: #fff;
206
+ margin: 0.25rem;
207
+ }
208
+ mwc-button:hover,
209
+ mwc-button:active {
210
+ background-color: var(--primary-color);
211
+ }
212
+ `; }
213
+ render() {
214
+ return html `
215
+ <form>
216
+ <label for="example">${i18next.t('label.examples')}</label>
217
+ <select
218
+ id="example"
219
+ @change=${(e) => (this.value = e.currentTarget.value)}
220
+ .value=${this.value}
221
+ >
222
+ <optgroup label="${i18next.t('label.second by second')}">
223
+ <option value="* * * * * *">${i18next.t('text.every second')}</option>
224
+ <option value="0/2 * * * * *">${i18next.t('text.every 2 seconds')}</option>
225
+ <option value="0/15 * * * * *">${i18next.t('text.every 15 seconds')}</option>
226
+ <option value="0/30 * * * * *">${i18next.t('text.every 30 seconds')}</option>
227
+ </optgroup>
228
+ <optgroup label="${i18next.t('label.minute by minute')}">
229
+ <option value="0 * * * * *">${i18next.t('text.every minute')}</option>
230
+ <option value="0 0/2 * * * *">${i18next.t('text.every 2 minutes')}</option>
231
+ <option value="0 0/15 * * * *">${i18next.t('text.every 15 minutes')}</option>
232
+ <option value="0 0/30 * * * *">${i18next.t('text.every half hour')}</option>
233
+ </optgroup>
234
+ <optgroup label="${i18next.t('label.hourly')}">
235
+ <option value="0 0 * * * *">${i18next.t('text.every hour')}</option>
236
+ <option value="0 0 0/2 * * *">${i18next.t('text.every 2 hours')}</option>
237
+ <option value="0 0 0/12 * * *">${i18next.t('text.every 12 hours')}</option>
238
+ <option value="0 0 10-19 * * *">${i18next.t('text.every hour during working time')}</option>
239
+ </optgroup>
240
+ <optgroup label="${i18next.t('label.daily')}">
241
+ <option value="0 0 0 * * *">${i18next.t('text.every day')}</option>
242
+ </optgroup>
243
+ <optgroup label="${i18next.t('label.weekly')}">
244
+ <option value="0 0 0 * * SUN">${i18next.t('text.every sunday')}</option>
245
+ <option value="0 0 0 * * 0">${i18next.t('text.every sunday(2)')}</option>
246
+ <option value="0 0 0 * * 1-5">${i18next.t('text.every weekday')}</option>
247
+ </optgroup>
248
+ <optgroup label="${i18next.t('label.monthly')}">
249
+ <option value="0 0 0 1 * *">${i18next.t('text.the first day of every month')}</option>
250
+ <option value="0 0 10 21 * *">${i18next.t('text.10 am on every payday')}</option>
251
+ </optgroup>
252
+ <optgroup label="${i18next.t('label.yearly')}">
253
+ <option value="0 0 0 1 1 *">${i18next.t('text.the first day of every year')}</option>
254
+ <option value="0 0 0 25 12 *">${i18next.t('text.every christmas')}</option>
255
+ </optgroup>
256
+ </select>
257
+ <div id="input-wrapper">
258
+ <div>
259
+ <input
260
+ id="second-input"
261
+ class="second"
262
+ type="text"
263
+ .value=${this.second || ''}
264
+ @input=${(e) => (this.second = e.currentTarget.value)}
265
+ @focus=${(e) => {
266
+ this.showTooltip('second');
267
+ }}
268
+ pattern=${createCronRegex('sec')}
269
+ required
270
+ />
271
+ <label for="second-input" class="second">${i18next.t('label.second')}</label>
272
+ </div>
273
+ <div>
274
+ <input
275
+ id="minute-input"
276
+ class="minute"
277
+ type="text"
278
+ .value=${this.minute || ''}
279
+ @input=${(e) => (this.minute = e.currentTarget.value)}
280
+ @focus=${(e) => {
281
+ this.showTooltip('minute');
282
+ }}
283
+ pattern=${createCronRegex('min')}
284
+ required
285
+ />
286
+ <label for="minute-input" class="minute">${i18next.t('label.minute')}</label>
287
+ </div>
288
+ <div>
289
+ <input
290
+ id="hour-input"
291
+ class="hour"
292
+ type="text"
293
+ .value=${this.hour || ''}
294
+ @input=${(e) => (this.hour = e.currentTarget.value)}
295
+ @focus=${(e) => {
296
+ this.showTooltip('hour');
297
+ }}
298
+ pattern=${createCronRegex('hour')}
299
+ required
300
+ />
301
+ <label for="hour-input" class="hour">${i18next.t('label.hour')}</label>
302
+ </div>
303
+ <div>
304
+ <input
305
+ id="day-of-month-input"
306
+ class="day-of-month"
307
+ type="text"
308
+ .value=${this.dayOfMonth || ''}
309
+ @input=${(e) => (this.dayOfMonth = e.currentTarget.value)}
310
+ @focus=${(e) => {
311
+ this.showTooltip('dayOfMonth');
312
+ }}
313
+ pattern=${createCronRegex('day')}
314
+ required
315
+ />
316
+ <label for="day-of-month-input" class="day-of-month">${i18next.t('label.day-of-month')}</label>
317
+ </div>
318
+ <div>
319
+ <input
320
+ id="month-input"
321
+ class="month"
322
+ type="text"
323
+ .value=${this.month || ''}
324
+ @input=${(e) => (this.month = e.currentTarget.value)}
325
+ @focus=${(e) => {
326
+ this.showTooltip('month');
327
+ }}
328
+ pattern=${createCronRegex('month')}
329
+ required
330
+ />
331
+ <label for="month-input" class="month">${i18next.t('label.month')}</label>
332
+ </div>
333
+ <div>
334
+ <input
335
+ id="day-of-week-input"
336
+ class="day-of-week"
337
+ type="text"
338
+ .value=${this.dayOfWeek || ''}
339
+ @input=${(e) => (this.dayOfWeek = e.currentTarget.value)}
340
+ @focus=${(e) => {
341
+ this.showTooltip('dayOfWeek');
342
+ }}
343
+ pattern=${createCronRegex('dayOfWeek')}
344
+ required
345
+ />
346
+ <label for="day-of-week-input" class="day-of-week">${i18next.t('label.day-of-week')}</label>
347
+ </div>
348
+ </div>
349
+ <div id="tooltip">
350
+ ${this.tooltip.map(tip => html `
351
+ <div class="crontab-value">${tip.value}</div>
352
+ <div class="crontab-description">${i18next.t(`text.${tip.description}`)}</div>
353
+ `)}
354
+ </div>
355
+ </form>
356
+ `;
357
+ }
358
+ get focusableElements() {
359
+ return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'));
360
+ }
361
+ firstUpdated() {
362
+ ;
363
+ this.renderRoot.querySelector('input').focus();
364
+ this.renderRoot.addEventListener('change', this.onChange.bind(this));
365
+ }
366
+ updated(changes) {
367
+ if (changes.has('value')) {
368
+ var values = (this.value || '').split(' ');
369
+ if (values.length == 1)
370
+ values = ['*', '*', '*', '*', '*', '*'];
371
+ else if (values.length == 5)
372
+ values = ['0'].concat(values);
373
+ this.second = values[0];
374
+ this.minute = values[1];
375
+ this.hour = values[2];
376
+ this.dayOfMonth = values[3];
377
+ this.month = values[4];
378
+ this.dayOfWeek = values[5];
379
+ }
380
+ }
381
+ showTooltip(type) {
382
+ switch (type) {
383
+ case 'second':
384
+ case 'minute':
385
+ this.tooltip = [
386
+ {
387
+ value: '*',
388
+ description: 'any value'
389
+ },
390
+ {
391
+ value: ',',
392
+ description: 'value list separator'
393
+ },
394
+ {
395
+ value: '-',
396
+ description: 'range of values'
397
+ },
398
+ {
399
+ value: '/',
400
+ description: 'step values'
401
+ },
402
+ {
403
+ value: '0-59',
404
+ description: 'allowed values'
405
+ }
406
+ ];
407
+ break;
408
+ case 'hour':
409
+ this.tooltip = [
410
+ {
411
+ value: '*',
412
+ description: 'any value'
413
+ },
414
+ {
415
+ value: ',',
416
+ description: 'value list separator'
417
+ },
418
+ {
419
+ value: '-',
420
+ description: 'range of values'
421
+ },
422
+ {
423
+ value: '/',
424
+ description: 'step values'
425
+ },
426
+ {
427
+ value: '0-23',
428
+ description: 'allowed values'
429
+ }
430
+ ];
431
+ break;
432
+ case 'dayOfMonth':
433
+ this.tooltip = [
434
+ {
435
+ value: '*',
436
+ description: 'any value'
437
+ },
438
+ {
439
+ value: ',',
440
+ description: 'value list separator'
441
+ },
442
+ {
443
+ value: '-',
444
+ description: 'range of values'
445
+ },
446
+ {
447
+ value: '/',
448
+ description: 'step values'
449
+ },
450
+ {
451
+ value: '1-31',
452
+ description: 'allowed values'
453
+ }
454
+ ];
455
+ break;
456
+ case 'month':
457
+ this.tooltip = [
458
+ {
459
+ value: '*',
460
+ description: 'any value'
461
+ },
462
+ {
463
+ value: ',',
464
+ description: 'value list separator'
465
+ },
466
+ {
467
+ value: '-',
468
+ description: 'range of values'
469
+ },
470
+ {
471
+ value: '/',
472
+ description: 'step values'
473
+ },
474
+ {
475
+ value: '1-12',
476
+ description: 'allowed values'
477
+ },
478
+ {
479
+ value: 'JAN-DEC',
480
+ description: 'alternative single values'
481
+ }
482
+ ];
483
+ break;
484
+ case 'dayOfWeek':
485
+ this.tooltip = [
486
+ {
487
+ value: '*',
488
+ description: 'any value'
489
+ },
490
+ {
491
+ value: ',',
492
+ description: 'value list separator'
493
+ },
494
+ {
495
+ value: '-',
496
+ description: 'range of values'
497
+ },
498
+ {
499
+ value: '/',
500
+ description: 'step values'
501
+ },
502
+ {
503
+ value: '0-6',
504
+ description: 'allowed values'
505
+ },
506
+ {
507
+ value: 'SUN-SAT',
508
+ description: 'alternative single values'
509
+ }
510
+ ];
511
+ break;
512
+ default:
513
+ this.tooltip = [];
514
+ break;
515
+ }
516
+ }
517
+ onChange() {
518
+ var form = this.renderRoot.querySelector('form');
519
+ var valid = form.checkValidity();
520
+ if (!valid) {
521
+ form.reportValidity();
522
+ return;
523
+ }
524
+ this.value = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
525
+ this.dispatchEvent(new CustomEvent('change', {
526
+ bubbles: true,
527
+ composed: true,
528
+ detail: this.value
529
+ }));
530
+ }
531
+ };
532
+ __decorate([
533
+ property({ type: String })
534
+ ], OxInputCrontab.prototype, "value", void 0);
535
+ __decorate([
536
+ property({ type: String })
537
+ ], OxInputCrontab.prototype, "second", void 0);
538
+ __decorate([
539
+ property({ type: String })
540
+ ], OxInputCrontab.prototype, "minute", void 0);
541
+ __decorate([
542
+ property({ type: String })
543
+ ], OxInputCrontab.prototype, "hour", void 0);
544
+ __decorate([
545
+ property({ type: String })
546
+ ], OxInputCrontab.prototype, "dayOfMonth", void 0);
547
+ __decorate([
548
+ property({ type: String })
549
+ ], OxInputCrontab.prototype, "month", void 0);
550
+ __decorate([
551
+ property({ type: String })
552
+ ], OxInputCrontab.prototype, "dayOfWeek", void 0);
553
+ __decorate([
554
+ state()
555
+ ], OxInputCrontab.prototype, "tooltip", void 0);
556
+ OxInputCrontab = __decorate([
557
+ customElement('ox-input-crontab')
558
+ ], OxInputCrontab);
559
+ export { OxInputCrontab };
560
+ //# sourceMappingURL=ox-input-crontab.js.map