vanjs-jsf 0.0.11 → 0.0.13

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 (8) hide show
  1. package/README.md +10 -0
  2. package/dist/VanJsfField.d.ts +4 -0
  3. package/dist/VanJsfField.js +104 -7
  4. package/dist/VanJsfForm.js +13 -7
  5. package/dist/index.css +424 -0
  6. package/dist/index.css.map +7 -0
  7. package/dist/index.js.map +4 -4
  8. package/package.json +9 -1
package/README.md CHANGED
@@ -15,6 +15,16 @@ This library aims to provide a robust and flexible solution for dynamically gene
15
15
  - [ ] **Validation Support**: Easily integrate JSON Schema-based validation for seamless user input handling.
16
16
  - [ ] **Extensible Architecture**: Add custom widgets, field types, and behaviours as needed.
17
17
 
18
+ ### Available components
19
+ The currently supported form element types are:
20
+ - text = "text",
21
+ - number = "number",
22
+ - textarea = "textarea",
23
+ - select = "select",
24
+ - radio = "radio",
25
+ - date = "date",
26
+ - fieldset = "fieldset"
27
+
18
28
  ### Use Cases
19
29
 
20
30
  - Quickly generate forms for dashboards, admin panels, and dynamic web applications.
package/dist/VanJsfField.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { State } from "vanjs-core";
2
2
  import { VanJSComponent } from "./VanJSComponent";
3
+ import "van-ui-extended/dist/index.css";
3
4
  export interface Option {
4
5
  label: string;
5
6
  value: string;
@@ -18,7 +19,10 @@ export declare class VanJsfField extends VanJSComponent {
18
19
  get inputType(): string;
19
20
  get label(): string;
20
21
  get class(): string;
22
+ get errorClass(): string;
23
+ get codemirrorExtension(): Array<any>;
21
24
  get containerClass(): string;
25
+ get containerId(): string;
22
26
  get titleClass(): string;
23
27
  get descriptionClass(): string;
24
28
  get description(): string;
package/dist/VanJsfField.js CHANGED
@@ -1,10 +1,20 @@
1
1
  import van from "vanjs-core";
2
2
  import { VanJSComponent } from "./VanJSComponent";
3
3
  import pikaday from "pikaday";
4
+ import { basicSetup, EditorView } from "codemirror";
5
+ import { javascript, esLint } from "@codemirror/lang-javascript";
6
+ import { json, jsonParseLinter } from "@codemirror/lang-json";
7
+ import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
8
+ import * as eslint from "eslint-linter-browserify";
9
+ import { CronComponent } from "van-ui-extended";
10
+ import "van-ui-extended/dist/index.css";
4
11
  const { div, p, input, label, textarea, legend, link, fieldset, span, select, option } = van.tags;
12
+ import globals from "globals";
5
13
  var FieldType;
6
14
  (function (FieldType) {
7
15
  FieldType["text"] = "text";
16
+ FieldType["code"] = "code";
17
+ FieldType["cron"] = "cron";
8
18
  FieldType["number"] = "number";
9
19
  FieldType["textarea"] = "textarea";
10
20
  FieldType["select"] = "select";
@@ -12,6 +22,21 @@ var FieldType;
12
22
  FieldType["date"] = "date";
13
23
  FieldType["fieldset"] = "fieldset";
14
24
  })(FieldType || (FieldType = {}));
25
+ const eslintConfig = {
26
+ // eslint configuration
27
+ languageOptions: {
28
+ globals: {
29
+ ...globals.node,
30
+ },
31
+ parserOptions: {
32
+ ecmaVersion: 2022,
33
+ sourceType: "module",
34
+ },
35
+ },
36
+ rules: {
37
+ semi: ["error", "never"],
38
+ },
39
+ };
15
40
  export class VanJsfField extends VanJSComponent {
16
41
  name;
17
42
  field;
@@ -38,9 +63,58 @@ export class VanJsfField extends VanJSComponent {
38
63
  get class() {
39
64
  return this.field.class;
40
65
  }
66
+ get errorClass() {
67
+ return this.field.errorClass;
68
+ }
69
+ get codemirrorExtension() {
70
+ const theme = EditorView.theme({
71
+ '.cm-content, .cm-gutter': {
72
+ "min-height": "150px",
73
+ },
74
+ '.cm-content': {
75
+ "min-height": "150px",
76
+ },
77
+ '.cm-gutters': {
78
+ margin: '1px',
79
+ },
80
+ '.cm-scroller': {
81
+ overflow: 'auto',
82
+ },
83
+ '.cm-wrap': {
84
+ border: '1px solid silver',
85
+ },
86
+ });
87
+ const extensions = [theme, EditorView.updateListener.of((e) => {
88
+ this.field.error = null;
89
+ forEachDiagnostic(e.state, (diag) => {
90
+ if (diag.severity === "error") {
91
+ this.field.error = diag.message;
92
+ }
93
+ });
94
+ this.handleChange(this, e.state.doc.toString());
95
+ }), basicSetup, lintGutter()];
96
+ switch (this.field.codemirrorType) {
97
+ case "json":
98
+ extensions.push(json(), linter(jsonParseLinter()));
99
+ break;
100
+ case "javascript":
101
+ extensions.push(javascript(), linter(esLint(new eslint.Linter(), eslintConfig)));
102
+ break;
103
+ case "typescript":
104
+ extensions.push(javascript({ typescript: true }), linter(esLint(new eslint.Linter(), eslintConfig)));
105
+ break;
106
+ default:
107
+ extensions.push(javascript(), linter(esLint(new eslint.Linter(), eslintConfig)));
108
+ break;
109
+ }
110
+ return extensions;
111
+ }
41
112
  get containerClass() {
42
113
  return this.field.containerClass;
43
114
  }
115
+ get containerId() {
116
+ return this.field.containerId;
117
+ }
44
118
  get titleClass() {
45
119
  return this.field.titleClass;
46
120
  }
@@ -80,7 +154,7 @@ export class VanJsfField extends VanJSComponent {
80
154
  class: this.class ? this.class : '',
81
155
  value: this.iniVal,
82
156
  oninput: (e) => this.handleChange(this, e.target.value),
83
- }), p(() => this.error));
157
+ }), p({ class: this.errorClass }, () => this.error));
84
158
  break;
85
159
  case FieldType.textarea:
86
160
  el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
@@ -91,9 +165,17 @@ export class VanJsfField extends VanJSComponent {
91
165
  rows: this.field.rows,
92
166
  cols: this.field.columns,
93
167
  oninput: (e) => this.handleChange(this, e.target.value),
94
- }));
168
+ }), p({ class: this.errorClass }, () => this.error));
169
+ break;
170
+ case FieldType.code:
171
+ el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
172
+ div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description));
173
+ new EditorView({
174
+ doc: new String(this.iniVal).toString(),
175
+ parent: el,
176
+ extensions: this.codemirrorExtension
177
+ });
95
178
  break;
96
- //TODO: Add select component
97
179
  case FieldType.select:
98
180
  el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
99
181
  div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), select({
@@ -101,7 +183,7 @@ export class VanJsfField extends VanJSComponent {
101
183
  name: this.name,
102
184
  class: this.class ? this.class : null,
103
185
  oninput: (e) => this.handleChange(this, e.target.value),
104
- }, this.options?.map((opt) => option({ class: this.class ? this.class : null, value: opt.value }, opt.label, opt.description))));
186
+ }, this.options?.map((opt) => option({ class: this.class ? this.class : null, value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
105
187
  break;
106
188
  case FieldType.date:
107
189
  const calendarInput = input({
@@ -113,10 +195,11 @@ export class VanJsfField extends VanJSComponent {
113
195
  });
114
196
  el =
115
197
  div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
116
- div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), calendarInput, link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
198
+ div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), calendarInput, p({ class: this.errorClass }, () => this.error), link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
117
199
  new pikaday({
118
200
  field: calendarInput,
119
201
  format: 'YYYY/MM/DD',
202
+ container: el,
120
203
  firstDay: 1,
121
204
  toString(date) {
122
205
  // you should do formatting based on the passed format,
@@ -136,6 +219,20 @@ export class VanJsfField extends VanJSComponent {
136
219
  }
137
220
  });
138
221
  break;
222
+ case FieldType.cron:
223
+ el =
224
+ div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
225
+ div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), p({ class: this.errorClass }, () => this.error), () => {
226
+ let ele;
227
+ if (CronComponent) {
228
+ ele = new CronComponent() || null;
229
+ ele.setAttribute("color", "d58512");
230
+ ele.setAttribute("value", this.iniVal.toString());
231
+ ele.oninput = (e) => this.handleChange(this, e.detail.value);
232
+ }
233
+ return ele;
234
+ });
235
+ break;
139
236
  case FieldType.number:
140
237
  el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass ? this.titleClass : '' }, this.label), this.description &&
141
238
  div({ id: `${this.name}-description`, class: this.descriptionClass ? this.descriptionClass : '' }, this.description), input({
@@ -144,7 +241,7 @@ export class VanJsfField extends VanJSComponent {
144
241
  class: this.class ? this.class : null,
145
242
  value: this.iniVal,
146
243
  oninput: (e) => this.handleChange(this, e.target.value),
147
- }));
244
+ }), p({ class: this.errorClass }, () => this.error));
148
245
  break;
149
246
  case FieldType.fieldset:
150
247
  console.log(this.field);
@@ -159,7 +256,7 @@ export class VanJsfField extends VanJSComponent {
159
256
  value: opt.value,
160
257
  checked: this.iniVal === opt.value,
161
258
  onchange: (e) => this.handleChange(this, e.target.value),
162
- }), opt.label, opt.description))));
259
+ }), opt.label, opt.description), p({ class: this.errorClass }, () => this.error))));
163
260
  break;
164
261
  default:
165
262
  el = div({ style: "border: 1px dashed gray; padding: 8px;" }, `Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`);
package/dist/VanJsfForm.js CHANGED
@@ -18,7 +18,9 @@ class VanJsfForm {
18
18
  this.config = config;
19
19
  this.isValid = isValid || undefined;
20
20
  // Working with parameters
21
+ const initialValues = { ...config?.initialValues };
21
22
  this.headlessForm = createHeadlessForm(jsonSchema, config);
23
+ this.config.initialValues = initialValues;
22
24
  // Read documentation about `getFieldsAndValuedFromJsf` method below
23
25
  const { vanJsfFields, formValues } = this.getFieldsAndValuesFromJsf(this.headlessForm, this.config.initialValues);
24
26
  this.formFields = vanJsfFields;
@@ -52,24 +54,30 @@ class VanJsfForm {
52
54
  */
53
55
  getFieldsAndValuesFromJsf(headlessForm, initialValues) {
54
56
  const fields = headlessForm.fields;
55
- console.log(fields);
56
57
  const formValues = {};
58
+ const values = { ...initialValues };
59
+ console.log(values);
57
60
  const vanJsfFields = this.processFields(fields, initialValues, formValues);
58
61
  return { vanJsfFields, formValues };
59
62
  }
60
63
  handleFieldChange(field, value) {
61
- console.log(`Field ${field.name} changed to ${value}`);
64
+ console.log(value);
65
+ console.log(field.name);
62
66
  this.formValues[field.name] = value;
63
67
  const { formErrors } = this.headlessForm.handleValidation(this.formValues);
68
+ let extraError = false;
64
69
  console.log("formErrors", formErrors);
65
70
  this.formFields.forEach((f) => {
66
71
  f.isVisible = f.field.isVisible;
67
72
  f.error = formErrors?.[f.name] ?? "";
73
+ console.log(f.field.error);
74
+ if (f.field.error) {
75
+ extraError = true;
76
+ }
68
77
  });
69
78
  if (this.isValid) {
70
- if (formErrors) {
71
- if (this.isValid)
72
- this.isValid.val = false;
79
+ if (formErrors || extraError) {
80
+ this.isValid.val = false;
73
81
  }
74
82
  else {
75
83
  this.isValid.val = true;
@@ -84,8 +92,6 @@ class VanJsfForm {
84
92
  const initVal = initialValues[fieldPath] || field.default || "";
85
93
  // Store the initial value in the form values map
86
94
  formValues[fieldPath] = initVal;
87
- console.log(formValues);
88
- console.log(initialValues);
89
95
  // Check if the field has nested fields and process them recursively
90
96
  if (field.fields && field.fields.length > 0) {
91
97
  field.fields = this.processFields(field.fields, initialValues, formValues, fieldPath);
package/dist/index.css ADDED
@@ -0,0 +1,424 @@
1
+ /* node_modules/van-ui-extended/dist/index.css */
2
+ cron-expression-input * {
3
+ font-size: 16px !important;
4
+ line-height: 21px !important;
5
+ font-family:
6
+ "Helvetica Neue",
7
+ Helvetica,
8
+ Arial,
9
+ sans-serif !important;
10
+ }
11
+ cron-expression-input .cronInput {
12
+ height: 34px !important;
13
+ position: relative !important;
14
+ }
15
+ cron-expression-input .cronInput input[type=text] {
16
+ width: 98% !important;
17
+ box-shadow: none !important;
18
+ color: white !important;
19
+ padding-left: 10px !important;
20
+ padding-top: 0px !important;
21
+ padding-bottom: 0px !important;
22
+ border: 1px #ccc solid !important;
23
+ }
24
+ cron-expression-input .cronInput button {
25
+ position: absolute !important;
26
+ right: 0 !important;
27
+ border-top-left-radius: 0 !important;
28
+ border-bottom-left-radius: 0 !important;
29
+ z-index: 2 !important;
30
+ }
31
+ cron-expression-input .cronInput input {
32
+ line-height: normal !important;
33
+ }
34
+ cron-expression-input * {
35
+ -webkit-box-sizing: border-box !important;
36
+ -moz-box-sizing: border-box !important;
37
+ box-sizing: border-box !important;
38
+ }
39
+ cron-expression-input button,
40
+ cron-expression-input input,
41
+ cron-expression-input select {
42
+ font-family: inherit !important;
43
+ font-size: inherit !important;
44
+ line-height: inherit !important;
45
+ }
46
+ cron-expression-input label {
47
+ display: inline-block !important;
48
+ max-width: 100% !important;
49
+ margin-bottom: 5px !important;
50
+ }
51
+ cron-expression-input input[type=checkbox],
52
+ cron-expression-input input[type=radio] {
53
+ margin: 4px 0 0 !important;
54
+ line-height: normal !important;
55
+ }
56
+ cron-expression-input input[type=checkbox]:focus,
57
+ cron-expression-input input[type=radio]:focus {
58
+ outline: 5px auto -webkit-focus-ring-color !important;
59
+ outline-offset: -2px !important;
60
+ }
61
+ cron-expression-input .form-control {
62
+ display: block !important;
63
+ width: 100% !important;
64
+ height: 34px !important;
65
+ padding: 6px 12px !important;
66
+ font-size: 14px !important;
67
+ line-height: 1.42857143 !important;
68
+ color: white !important;
69
+ background-color: #1c1917 !important;
70
+ background-image: none !important;
71
+ border: 1px solid #ccc !important;
72
+ border-radius: 4px !important;
73
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
74
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
75
+ -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s !important;
76
+ -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
77
+ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s !important;
78
+ }
79
+ cron-expression-input .form-control:focus {
80
+ border-color: #66afe9 !important;
81
+ outline: 0 !important;
82
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
83
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
84
+ }
85
+ cron-expression-input .form-group {
86
+ margin-bottom: 15px !important;
87
+ }
88
+ cron-expression-input .btn {
89
+ display: inline-block !important;
90
+ padding: 6px 12px !important;
91
+ margin-bottom: 0 !important;
92
+ font-size: 14px !important;
93
+ font-weight: 400 !important;
94
+ line-height: 1.42857143 !important;
95
+ text-align: center !important;
96
+ white-space: nowrap !important;
97
+ vertical-align: middle !important;
98
+ -ms-touch-action: manipulation !important;
99
+ touch-action: manipulation !important;
100
+ cursor: pointer !important;
101
+ -webkit-user-select: none !important;
102
+ -moz-user-select: none !important;
103
+ -ms-user-select: none !important;
104
+ user-select: none !important;
105
+ background-image: none !important;
106
+ border: 1px solid #ccc !important;
107
+ border-radius: 4px !important;
108
+ height: 100% !important;
109
+ }
110
+ cron-expression-input .btn:focus,
111
+ cron-expression-input .btn:hover {
112
+ color: black !important;
113
+ text-decoration: none !important;
114
+ }
115
+ cron-expression-input .btn:active {
116
+ background-image: none !important;
117
+ outline: 0 !important;
118
+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
119
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
120
+ }
121
+ cron-expression-input .btn-custom {
122
+ color: #fff !important;
123
+ border: 1px #ccc solid !important;
124
+ background-color: #d58512 !important;
125
+ border-color: #d99129 !important;
126
+ }
127
+ cron-expression-input .btn-custom:focus {
128
+ color: #fff !important;
129
+ background-color: #d99129 !important;
130
+ border: 1px #ccc solid !important;
131
+ outline: 0 !important;
132
+ }
133
+ cron-expression-input .btn-custom:hover {
134
+ color: black !important;
135
+ background-color: #d99129 !important;
136
+ border-color: #d99129 !important;
137
+ }
138
+ cron-expression-input .btn-custom:active {
139
+ color: #fff !important;
140
+ border: 1px #ccc solid !important;
141
+ background-color: #d99129 !important;
142
+ border-color: #d99129 !important;
143
+ outline: 0 !important;
144
+ }
145
+ cron-expression-input .btn-custom:active:focus,
146
+ cron-expression-input .btn-custom:active:hover {
147
+ color: black !important;
148
+ background-color: #d99129 !important;
149
+ border-color: #ccc !important;
150
+ }
151
+ cron-expression-input .btn-custom:active {
152
+ background-image: none !important;
153
+ }
154
+ cron-expression-input .fade {
155
+ opacity: 0 !important;
156
+ -webkit-transition: opacity 0.15s linear !important;
157
+ -o-transition: opacity 0.15s linear !important;
158
+ transition: opacity 0.15s linear !important;
159
+ }
160
+ cron-expression-input .nav {
161
+ padding-left: 0 !important;
162
+ margin-bottom: 0 !important;
163
+ list-style: none !important;
164
+ }
165
+ cron-expression-input .nav > li {
166
+ position: relative !important;
167
+ display: block !important;
168
+ }
169
+ cron-expression-input .nav > li > a {
170
+ position: relative !important;
171
+ display: block !important;
172
+ padding: 10px 15px !important;
173
+ }
174
+ cron-expression-input .nav > li > a:focus,
175
+ cron-expression-input .nav > li > a:hover {
176
+ background-color: #eee !important;
177
+ color: black;
178
+ }
179
+ cron-expression-input .nav-tabs {
180
+ border-bottom: 1px solid #020617 !important;
181
+ }
182
+ cron-expression-input .nav-tabs > li {
183
+ float: left !important;
184
+ margin-bottom: -1px !important;
185
+ }
186
+ cron-expression-input .nav-tabs > li > a {
187
+ margin-right: 2px !important;
188
+ line-height: 1.42857143 !important;
189
+ border: 1px solid transparent !important;
190
+ border-radius: 4px 4px 0 0 !important;
191
+ }
192
+ cron-expression-input .nav-tabs > li > a:hover {
193
+ border-color: #eee #eee #020617 !important;
194
+ }
195
+ cron-expression-input .nav-tabs > li.active > a,
196
+ cron-expression-input .nav-tabs > li.active > a:focus,
197
+ cron-expression-input .nav-tabs > li.active > a:hover {
198
+ color: white !important;
199
+ cursor: default !important;
200
+ background-color: #78716c !important;
201
+ border: 1px solid #020617 !important;
202
+ border-bottom-color: transparent !important;
203
+ }
204
+ cron-expression-input .tab-content > .tab-pane {
205
+ display: none !important;
206
+ }
207
+ cron-expression-input .tab-content > .active {
208
+ display: block !important;
209
+ }
210
+ cron-expression-input .panel {
211
+ margin-bottom: 20px !important;
212
+ background-color: #1c1917 !important;
213
+ border: 1px solid transparent !important;
214
+ border-radius: 4px !important;
215
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
216
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
217
+ }
218
+ cron-expression-input .panel-body {
219
+ padding: 15px !important;
220
+ }
221
+ cron-expression-input .panel-heading {
222
+ padding: 10px 15px !important;
223
+ border-bottom: 1px solid transparent !important;
224
+ border-top-left-radius: 3px !important;
225
+ border-top-right-radius: 3px !important;
226
+ }
227
+ cron-expression-input .panel-default {
228
+ border-color: #020617 !important;
229
+ }
230
+ cron-expression-input .panel-default > .panel-heading {
231
+ color: white !important;
232
+ background-color: #1c1917 !important;
233
+ border-color: #020617 !important;
234
+ }
235
+ cron-expression-input .close2 {
236
+ float: right !important;
237
+ font-size: 21px !important;
238
+ font-weight: 700 !important;
239
+ line-height: 1 !important;
240
+ }
241
+ cron-expression-input .close2:focus,
242
+ cron-expression-input .close2:hover {
243
+ color: white !important;
244
+ text-decoration: none !important;
245
+ cursor: pointer !important;
246
+ opacity: 0.5 !important;
247
+ }
248
+ cron-expression-input .modal {
249
+ position: fixed !important;
250
+ top: 0 !important;
251
+ right: 0 !important;
252
+ bottom: 0 !important;
253
+ left: 0 !important;
254
+ z-index: 1050 !important;
255
+ display: none !important;
256
+ overflow: hidden !important;
257
+ -webkit-overflow-scrolling: touch !important;
258
+ outline: 0 !important;
259
+ }
260
+ cron-expression-input .modal-dialog {
261
+ position: relative !important;
262
+ background-color: #1c1917 !important;
263
+ color: white;
264
+ width: auto !important;
265
+ margin: 10px !important;
266
+ }
267
+ cron-expression-input .modal-content {
268
+ position: relative !important;
269
+ -webkit-background-clip: padding-box !important;
270
+ background-clip: padding-box !important;
271
+ border: 1px solid #999 !important;
272
+ border: 1px solid rgba(0, 0, 0, 0.2) !important;
273
+ border-radius: 6px !important;
274
+ outline: 0 !important;
275
+ -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5) !important;
276
+ box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5) !important;
277
+ }
278
+ cron-expression-input .modal-header {
279
+ padding: 15px !important;
280
+ }
281
+ cron-expression-input .modal-header .close2 {
282
+ margin-top: -2px !important;
283
+ }
284
+ cron-expression-input .modal-body {
285
+ position: relative !important;
286
+ top: -15px !important;
287
+ padding: 15px !important;
288
+ padding-bottom: 0px !important;
289
+ }
290
+ cron-expression-input .modal-dialog {
291
+ width: 600px !important;
292
+ margin: 30px auto !important;
293
+ }
294
+ cron-expression-input .modal-header:after,
295
+ cron-expression-input .modal-header:before,
296
+ cron-expression-input .nav:after,
297
+ cron-expression-input .nav:before,
298
+ cron-expression-input .panel-body:after,
299
+ cron-expression-input .panel-body:before {
300
+ display: table !important;
301
+ content: " " !important;
302
+ }
303
+ cron-expression-input .modal-header:after,
304
+ cron-expression-input .nav:after,
305
+ cron-expression-input .panel-body:after {
306
+ clear: both !important;
307
+ }
308
+ cron-expression-input .show {
309
+ display: block !important;
310
+ }
311
+ cron-expression-input input[type=radio] {
312
+ position: relative !important;
313
+ top: -2.52px !important;
314
+ }
315
+ cron-expression-input input[type=radio] {
316
+ appearance: none !important;
317
+ display: block !important;
318
+ width: 1em !important;
319
+ height: 1em !important;
320
+ border-radius: 50% !important;
321
+ border: 0.1em solid #d99129 !important;
322
+ }
323
+ cron-expression-input input[type=radio]:after {
324
+ appearance: radio !important;
325
+ display: block !important;
326
+ width: 10px !important;
327
+ height: 10px !important;
328
+ border-radius: 10px !important;
329
+ top: -2px !important;
330
+ left: -1px !important;
331
+ position: relative !important;
332
+ background-color: #d1d3d1 !important;
333
+ display: inline-block !important;
334
+ visibility: visible !important;
335
+ border: 2px solid white !important;
336
+ position: absolute !important;
337
+ top: 2px !important;
338
+ left: 1.8px !important;
339
+ }
340
+ cron-expression-input input[type=radio]:checked:after {
341
+ appearance: radio !important;
342
+ border: 2px solid white !important;
343
+ display: block !important;
344
+ width: 11px !important;
345
+ height: 11px !important;
346
+ border-radius: 10px !important;
347
+ top: -3px !important;
348
+ left: 2px !important;
349
+ position: relative !important;
350
+ background-color: #d99129 !important;
351
+ content: "" !important;
352
+ display: inline-block !important;
353
+ visibility: visible !important;
354
+ border: none !important;
355
+ position: absolute !important;
356
+ top: 1px !important;
357
+ left: 1px !important;
358
+ }
359
+ cron-expression-input input[type=checkbox]:focus,
360
+ cron-expression-input input[type=radio]:focus,
361
+ cron-expression-input .cronInsideInput:focus,
362
+ cron-expression-input .btn-custom:active {
363
+ outline: none !important;
364
+ }
365
+ cron-expression-input span {
366
+ position: relative !important;
367
+ z-index: 2 !important;
368
+ }
369
+ cron-expression-input .container {
370
+ display: block !important;
371
+ position: relative !important;
372
+ padding-left: 21px !important;
373
+ margin-bottom: 12px !important;
374
+ cursor: pointer !important;
375
+ -webkit-user-select: none !important;
376
+ -moz-user-select: none !important;
377
+ -ms-user-select: none !important;
378
+ user-select: none !important;
379
+ }
380
+ cron-expression-input .container input {
381
+ position: absolute !important;
382
+ opacity: 0 !important;
383
+ cursor: pointer !important;
384
+ height: 0 !important;
385
+ width: 0 !important;
386
+ }
387
+ cron-expression-input .checkmark {
388
+ position: absolute !important;
389
+ top: 0 !important;
390
+ left: 0 !important;
391
+ height: 14.5px !important;
392
+ width: 14.5px !important;
393
+ background-color: #eee !important;
394
+ }
395
+ cron-expression-input .container:hover input ~ .checkmark {
396
+ background-color: #ccc !important;
397
+ }
398
+ cron-expression-input .container input:checked ~ .checkmark {
399
+ background-color: #d99129 !important;
400
+ }
401
+ cron-expression-input .checkmark:after {
402
+ content: "" !important;
403
+ position: absolute !important;
404
+ display: none !important;
405
+ }
406
+ cron-expression-input .container .numberValue {
407
+ position: relative !important;
408
+ top: -2px !important;
409
+ }
410
+ cron-expression-input .container input:checked ~ .checkmark:after {
411
+ display: block !important;
412
+ }
413
+ cron-expression-input .container .checkmark:after {
414
+ left: 3px !important;
415
+ top: 6px !important;
416
+ width: 6px !important;
417
+ height: 0px !important;
418
+ border: solid white !important;
419
+ border-width: 0 3px 3px 0 !important;
420
+ -webkit-transform: rotate(45deg) !important;
421
+ -ms-transform: rotate(45deg) !important;
422
+ transform: rotate(45deg) !important;
423
+ }
424
+ /*# sourceMappingURL=index.css.map */