@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca
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/package.json +3 -4
- package/src/atoms/gv-autocomplete.d.ts +104 -0
- package/src/atoms/gv-autocomplete.js +1 -461
- package/src/atoms/gv-button.d.ts +109 -0
- package/src/atoms/gv-button.js +1 -410
- package/src/atoms/gv-checkbox.d.ts +114 -0
- package/src/atoms/gv-checkbox.js +1 -187
- package/src/atoms/gv-date-picker-calendar.d.ts +190 -0
- package/src/atoms/gv-date-picker-calendar.js +1 -894
- package/src/atoms/gv-date-picker-cell.d.ts +80 -0
- package/src/atoms/gv-date-picker-cell.js +1 -190
- package/src/atoms/gv-date-picker.d.ts +194 -0
- package/src/atoms/gv-date-picker.js +1 -671
- package/src/atoms/gv-file-upload.d.ts +64 -0
- package/src/atoms/gv-file-upload.js +1 -367
- package/src/atoms/gv-icon.d.ts +26 -0
- package/src/atoms/gv-icon.js +1 -103
- package/src/atoms/gv-image.d.ts +45 -0
- package/src/atoms/gv-image.js +1 -144
- package/src/atoms/gv-input-message.d.ts +20 -0
- package/src/atoms/gv-input-message.js +1 -84
- package/src/atoms/gv-input.d.ts +246 -0
- package/src/atoms/gv-input.js +1 -561
- package/src/atoms/gv-link.d.ts +67 -0
- package/src/atoms/gv-link.js +1 -210
- package/src/atoms/gv-message.d.ts +23 -0
- package/src/atoms/gv-message.js +1 -128
- package/src/atoms/gv-metric.d.ts +32 -0
- package/src/atoms/gv-metric.js +1 -117
- package/src/atoms/gv-relative-time.d.ts +45 -0
- package/src/atoms/gv-relative-time.js +1 -156
- package/src/atoms/gv-select-native.d.ts +174 -0
- package/src/atoms/gv-select-native.js +1 -388
- package/src/atoms/gv-select.d.ts +71 -0
- package/src/atoms/gv-select.js +1 -437
- package/src/atoms/gv-spinner.d.ts +10 -0
- package/src/atoms/gv-spinner.js +1 -57
- package/src/atoms/gv-state.d.ts +50 -0
- package/src/atoms/gv-state.js +1 -130
- package/src/atoms/gv-switch.d.ts +60 -0
- package/src/atoms/gv-switch.js +1 -243
- package/src/atoms/gv-tag.d.ts +69 -0
- package/src/atoms/gv-tag.js +1 -168
- package/src/atoms/gv-text.d.ts +110 -0
- package/src/atoms/gv-text.js +1 -168
- package/src/charts/gv-chart-bar.d.ts +50 -0
- package/src/charts/gv-chart-bar.js +1 -103
- package/src/charts/gv-chart-gauge.d.ts +58 -0
- package/src/charts/gv-chart-gauge.js +1 -100
- package/src/charts/gv-chart-histogram.d.ts +48 -0
- package/src/charts/gv-chart-histogram.js +1 -83
- package/src/charts/gv-chart-line.d.ts +52 -0
- package/src/charts/gv-chart-line.js +1 -224
- package/src/charts/gv-chart-map.d.ts +50 -0
- package/src/charts/gv-chart-map.js +1 -112
- package/src/charts/gv-chart-pie.d.ts +50 -0
- package/src/charts/gv-chart-pie.js +1 -91
- package/src/index.d.ts +77 -0
- package/src/index.js +1 -77
- package/src/lib/cron-expression.d.ts +1 -0
- package/src/lib/cron-expression.js +1 -205
- package/src/lib/date.d.ts +1 -0
- package/src/lib/date.js +1 -44
- package/src/lib/events.d.ts +1 -0
- package/src/lib/events.js +1 -26
- package/src/lib/http-client-schema-form.d.ts +68 -0
- package/src/lib/http-client-schema-form.js +1 -67
- package/src/lib/http.d.ts +222 -0
- package/src/lib/http.js +1 -237
- package/src/lib/i18n.d.ts +30 -0
- package/src/lib/i18n.js +1 -103
- package/src/lib/item.d.ts +12 -0
- package/src/lib/item.js +1 -118
- package/src/lib/properties.d.ts +42 -0
- package/src/lib/properties.js +1 -189
- package/src/lib/schema-form.d.ts +5 -0
- package/src/lib/schema-form.js +1 -44
- package/src/lib/studio.d.ts +2 -0
- package/src/lib/studio.js +1 -141
- package/src/lib/style.d.ts +6 -0
- package/src/lib/style.js +1 -41
- package/src/lib/text-format.d.ts +6 -0
- package/src/lib/text-format.js +1 -69
- package/src/lib/theme.d.ts +4 -0
- package/src/lib/theme.js +1 -63
- package/src/lib/utils.d.ts +9 -0
- package/src/lib/utils.js +1 -111
- package/src/mixins/chart-element.d.ts +39 -0
- package/src/mixins/chart-element.js +1 -165
- package/src/mixins/input-element.d.ts +64 -0
- package/src/mixins/input-element.js +1 -144
- package/src/mixins/item-resource.d.ts +56 -0
- package/src/mixins/item-resource.js +1 -120
- package/src/mixins/keyboard-element.d.ts +25 -0
- package/src/mixins/keyboard-element.js +1 -69
- package/src/mixins/update-after-browser.d.ts +11 -0
- package/src/mixins/update-after-browser.js +1 -30
- package/src/mixins/with-resize-observer.d.ts +12 -0
- package/src/mixins/with-resize-observer.js +1 -68
- package/src/mixins/with-skeleton-attribute.d.ts +35 -0
- package/src/mixins/with-skeleton-attribute.js +1 -112
- package/src/molecules/gv-card-full.d.ts +78 -0
- package/src/molecules/gv-card-full.js +1 -218
- package/src/molecules/gv-card-list.d.ts +33 -0
- package/src/molecules/gv-card-list.js +1 -113
- package/src/molecules/gv-card.d.ts +65 -0
- package/src/molecules/gv-card.js +1 -133
- package/src/molecules/gv-category-list.d.ts +17 -0
- package/src/molecules/gv-category-list.js +1 -60
- package/src/molecules/gv-category.d.ts +64 -0
- package/src/molecules/gv-category.js +1 -170
- package/src/molecules/gv-code.d.ts +192 -0
- package/src/molecules/gv-code.js +1 -359
- package/src/molecules/gv-confirm.d.ts +60 -0
- package/src/molecules/gv-confirm.js +1 -188
- package/src/molecules/gv-cron-editor.d.ts +115 -0
- package/src/molecules/gv-cron-editor.js +1 -710
- package/src/molecules/gv-dropdown-menu.d.ts +28 -0
- package/src/molecules/gv-dropdown-menu.js +1 -116
- package/src/molecules/gv-expandable.d.ts +37 -0
- package/src/molecules/gv-expandable.js +1 -122
- package/src/molecules/gv-expression-language.d.ts +150 -0
- package/src/molecules/gv-expression-language.js +1 -270
- package/src/molecules/gv-identity-picture.d.ts +44 -0
- package/src/molecules/gv-identity-picture.js +1 -148
- package/src/molecules/gv-list.d.ts +123 -0
- package/src/molecules/gv-list.js +1 -227
- package/src/molecules/gv-metrics.d.ts +65 -0
- package/src/molecules/gv-metrics.js +1 -162
- package/src/molecules/gv-modal.d.ts +64 -0
- package/src/molecules/gv-modal.js +1 -213
- package/src/molecules/gv-nav.d.ts +41 -0
- package/src/molecules/gv-nav.js +1 -196
- package/src/molecules/gv-option.d.ts +65 -0
- package/src/molecules/gv-option.js +1 -242
- package/src/molecules/gv-plans.d.ts +73 -0
- package/src/molecules/gv-plans.js +1 -429
- package/src/molecules/gv-popover.d.ts +91 -0
- package/src/molecules/gv-popover.js +1 -351
- package/src/molecules/gv-promote.d.ts +108 -0
- package/src/molecules/gv-promote.js +1 -209
- package/src/molecules/gv-rating-list.d.ts +77 -0
- package/src/molecules/gv-rating-list.js +1 -365
- package/src/molecules/gv-rating.d.ts +55 -0
- package/src/molecules/gv-rating.js +1 -253
- package/src/molecules/gv-row-expandable.d.ts +8 -0
- package/src/molecules/gv-row-expandable.js +1 -45
- package/src/molecules/gv-row.d.ts +37 -0
- package/src/molecules/gv-row.js +1 -210
- package/src/molecules/gv-stats.d.ts +53 -0
- package/src/molecules/gv-stats.js +1 -121
- package/src/molecules/gv-stepper.d.ts +46 -0
- package/src/molecules/gv-stepper.js +1 -288
- package/src/molecules/gv-table.d.ts +159 -0
- package/src/molecules/gv-table.js +1 -685
- package/src/molecules/gv-tree.d.ts +44 -0
- package/src/molecules/gv-tree.js +1 -250
- package/src/organisms/gv-documentation.d.ts +52 -0
- package/src/organisms/gv-documentation.js +1 -215
- package/src/organisms/gv-header.d.ts +60 -0
- package/src/organisms/gv-header.js +1 -288
- package/src/organisms/gv-http-client.d.ts +57 -0
- package/src/organisms/gv-http-client.js +1 -275
- package/src/organisms/gv-menu.d.ts +74 -0
- package/src/organisms/gv-menu.js +1 -263
- package/src/organisms/gv-newsletter-subscription.d.ts +82 -0
- package/src/organisms/gv-newsletter-subscription.js +1 -271
- package/src/organisms/gv-pagination.d.ts +63 -0
- package/src/organisms/gv-pagination.js +1 -198
- package/src/organisms/gv-properties.d.ts +229 -0
- package/src/organisms/gv-properties.js +1 -920
- package/src/organisms/gv-resizable-views.d.ts +33 -0
- package/src/organisms/gv-resizable-views.js +1 -396
- package/src/organisms/gv-resources.d.ts +125 -0
- package/src/organisms/gv-resources.js +1 -535
- package/src/organisms/gv-schema-form-array.d.ts +55 -0
- package/src/organisms/gv-schema-form-array.js +1 -250
- package/src/organisms/gv-schema-form-control-object.d.ts +64 -0
- package/src/organisms/gv-schema-form-control-object.js +1 -154
- package/src/organisms/gv-schema-form-control.d.ts +90 -0
- package/src/organisms/gv-schema-form-control.js +1 -443
- package/src/organisms/gv-schema-form.d.ts +156 -0
- package/src/organisms/gv-schema-form.js +1 -751
- package/src/organisms/gv-tabs.d.ts +56 -0
- package/src/organisms/gv-tabs.js +1 -210
- package/src/organisms/gv-user-menu.d.ts +56 -0
- package/src/organisms/gv-user-menu.js +1 -314
- package/src/organisms/gv-vertical-menu.d.ts +28 -0
- package/src/organisms/gv-vertical-menu.js +1 -123
- package/src/policy-studio/gv-flow-step.d.ts +142 -0
- package/src/policy-studio/gv-flow-step.js +1 -464
- package/src/policy-studio/gv-flow.d.ts +89 -0
- package/src/policy-studio/gv-flow.js +1 -621
- package/src/policy-studio/gv-policy-studio-menu.d.ts +94 -0
- package/src/policy-studio/gv-policy-studio-menu.js +1 -750
- package/src/policy-studio/gv-policy-studio.d.ts +464 -0
- package/src/policy-studio/gv-policy-studio.js +1 -1842
- package/src/styles/empty.d.ts +1 -0
- package/src/styles/empty.js +1 -36
- package/src/styles/input.d.ts +1 -0
- package/src/styles/input.js +1 -263
- package/src/styles/link.d.ts +1 -0
- package/src/styles/link.js +1 -32
- package/src/styles/shapes.d.ts +2 -0
- package/src/styles/shapes.js +1 -17
- package/src/styles/skeleton.d.ts +1 -0
- package/src/styles/skeleton.js +1 -53
- package/src/styles/zoom.d.ts +1 -0
- package/src/styles/zoom.js +1 -40
- package/src/theme/gv-theme.d.ts +81 -0
- package/src/theme/gv-theme.js +1 -203
- package/wc/gv-autocomplete.d.ts +1 -0
- package/wc/gv-autocomplete.js +1 -1
- package/wc/gv-button.d.ts +1 -0
- package/wc/gv-button.js +1 -1
- package/wc/gv-card-full.d.ts +1 -0
- package/wc/gv-card-full.js +1 -1
- package/wc/gv-card-list.d.ts +1 -0
- package/wc/gv-card-list.js +1 -1
- package/wc/gv-card.d.ts +1 -0
- package/wc/gv-card.js +1 -1
- package/wc/gv-category-list.d.ts +1 -0
- package/wc/gv-category-list.js +1 -1
- package/wc/gv-category.d.ts +1 -0
- package/wc/gv-category.js +1 -1
- package/wc/gv-chart-bar.d.ts +1 -0
- package/wc/gv-chart-bar.js +1 -1
- package/wc/gv-chart-gauge.d.ts +1 -0
- package/wc/gv-chart-gauge.js +1 -1
- package/wc/gv-chart-histogram.d.ts +1 -0
- package/wc/gv-chart-histogram.js +1 -1
- package/wc/gv-chart-line.d.ts +1 -0
- package/wc/gv-chart-line.js +1 -1
- package/wc/gv-chart-map.d.ts +1 -0
- package/wc/gv-chart-map.js +1 -1
- package/wc/gv-chart-pie.d.ts +1 -0
- package/wc/gv-chart-pie.js +1 -1
- package/wc/gv-checkbox.d.ts +1 -0
- package/wc/gv-checkbox.js +1 -1
- package/wc/gv-code.d.ts +1 -0
- package/wc/gv-code.js +1 -1
- package/wc/gv-confirm.d.ts +1 -0
- package/wc/gv-confirm.js +1 -1
- package/wc/gv-cron-editor.d.ts +1 -0
- package/wc/gv-cron-editor.js +1 -1
- package/wc/gv-date-picker-calendar.d.ts +1 -0
- package/wc/gv-date-picker-calendar.js +1 -1
- package/wc/gv-date-picker-cell.d.ts +1 -0
- package/wc/gv-date-picker-cell.js +1 -1
- package/wc/gv-date-picker.d.ts +1 -0
- package/wc/gv-date-picker.js +1 -1
- package/wc/gv-documentation.d.ts +1 -0
- package/wc/gv-documentation.js +1 -1
- package/wc/gv-dropdown-menu.d.ts +1 -0
- package/wc/gv-dropdown-menu.js +1 -1
- package/wc/gv-expandable.d.ts +1 -0
- package/wc/gv-expandable.js +1 -1
- package/wc/gv-expression-language.d.ts +1 -0
- package/wc/gv-expression-language.js +1 -1
- package/wc/gv-file-upload.d.ts +1 -0
- package/wc/gv-file-upload.js +1 -1
- package/wc/gv-flow-step.d.ts +1 -0
- package/wc/gv-flow-step.js +1 -1
- package/wc/gv-flow.d.ts +1 -0
- package/wc/gv-flow.js +1 -1
- package/wc/gv-header.d.ts +1 -0
- package/wc/gv-header.js +1 -1
- package/wc/gv-http-client.d.ts +1 -0
- package/wc/gv-http-client.js +1 -1
- package/wc/gv-icon.d.ts +1 -0
- package/wc/gv-icon.js +1 -1
- package/wc/gv-identity-picture.d.ts +1 -0
- package/wc/gv-identity-picture.js +1 -1
- package/wc/gv-image.d.ts +1 -0
- package/wc/gv-image.js +1 -1
- package/wc/gv-input-message.d.ts +1 -0
- package/wc/gv-input-message.js +1 -1
- package/wc/gv-input.d.ts +1 -0
- package/wc/gv-input.js +1 -1
- package/wc/gv-link.d.ts +1 -0
- package/wc/gv-link.js +1 -1
- package/wc/gv-list.d.ts +1 -0
- package/wc/gv-list.js +1 -1
- package/wc/gv-menu.d.ts +1 -0
- package/wc/gv-menu.js +1 -1
- package/wc/gv-message.d.ts +1 -0
- package/wc/gv-message.js +1 -1
- package/wc/gv-metric.d.ts +1 -0
- package/wc/gv-metric.js +1 -1
- package/wc/gv-metrics.d.ts +1 -0
- package/wc/gv-metrics.js +1 -1
- package/wc/gv-modal.d.ts +1 -0
- package/wc/gv-modal.js +1 -1
- package/wc/gv-nav.d.ts +1 -0
- package/wc/gv-nav.js +1 -1
- package/wc/gv-newsletter-subscription.d.ts +1 -0
- package/wc/gv-newsletter-subscription.js +1 -1
- package/wc/gv-option.d.ts +1 -0
- package/wc/gv-option.js +1 -1
- package/wc/gv-pagination.d.ts +1 -0
- package/wc/gv-pagination.js +1 -1
- package/wc/gv-plans.d.ts +1 -0
- package/wc/gv-plans.js +1 -1
- package/wc/gv-policy-studio-menu.d.ts +1 -0
- package/wc/gv-policy-studio-menu.js +1 -1
- package/wc/gv-policy-studio.d.ts +1 -0
- package/wc/gv-policy-studio.js +1 -1
- package/wc/gv-popover.d.ts +1 -0
- package/wc/gv-popover.js +1 -1
- package/wc/gv-promote.d.ts +1 -0
- package/wc/gv-promote.js +1 -1
- package/wc/gv-properties.d.ts +1 -0
- package/wc/gv-properties.js +1 -1
- package/wc/gv-rating-list.d.ts +1 -0
- package/wc/gv-rating-list.js +1 -1
- package/wc/gv-rating.d.ts +1 -0
- package/wc/gv-rating.js +1 -1
- package/wc/gv-relative-time.d.ts +1 -0
- package/wc/gv-relative-time.js +1 -1
- package/wc/gv-resizable-views.d.ts +1 -0
- package/wc/gv-resizable-views.js +1 -1
- package/wc/gv-resources.d.ts +1 -0
- package/wc/gv-resources.js +1 -1
- package/wc/gv-row-expandable.d.ts +1 -0
- package/wc/gv-row-expandable.js +1 -1
- package/wc/gv-row.d.ts +1 -0
- package/wc/gv-row.js +1 -1
- package/wc/gv-schema-form-array.d.ts +1 -0
- package/wc/gv-schema-form-array.js +1 -1
- package/wc/gv-schema-form-control-object.d.ts +1 -0
- package/wc/gv-schema-form-control-object.js +1 -1
- package/wc/gv-schema-form-control.d.ts +1 -0
- package/wc/gv-schema-form-control.js +1 -1
- package/wc/gv-schema-form.d.ts +1 -0
- package/wc/gv-schema-form.js +1 -1
- package/wc/gv-select-native.d.ts +1 -0
- package/wc/gv-select-native.js +1 -1
- package/wc/gv-select.d.ts +1 -0
- package/wc/gv-select.js +1 -1
- package/wc/gv-spinner.d.ts +1 -0
- package/wc/gv-spinner.js +1 -1
- package/wc/gv-state.d.ts +1 -0
- package/wc/gv-state.js +1 -1
- package/wc/gv-stats.d.ts +1 -0
- package/wc/gv-stats.js +1 -1
- package/wc/gv-stepper.d.ts +1 -0
- package/wc/gv-stepper.js +1 -1
- package/wc/gv-switch.d.ts +1 -0
- package/wc/gv-switch.js +1 -1
- package/wc/gv-table.d.ts +1 -0
- package/wc/gv-table.js +1 -1
- package/wc/gv-tabs.d.ts +1 -0
- package/wc/gv-tabs.js +1 -1
- package/wc/gv-tag.d.ts +1 -0
- package/wc/gv-tag.js +1 -1
- package/wc/gv-text.d.ts +1 -0
- package/wc/gv-text.js +1 -1
- package/wc/gv-theme.d.ts +1 -0
- package/wc/gv-theme.js +1 -1
- package/wc/gv-tree.d.ts +1 -0
- package/wc/gv-tree.js +1 -1
- package/wc/gv-user-menu.d.ts +1 -0
- package/wc/gv-user-menu.js +1 -1
- package/wc/gv-vertical-menu.d.ts +1 -0
- package/wc/gv-vertical-menu.js +1 -1
- package/CHANGELOG.md +0 -1292
- package/LICENSE.txt +0 -202
- package/README.md +0 -195
- package/src/.eslintrc.js +0 -19
- package/src/theme/definition.json +0 -1762
|
@@ -1,443 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Copyright (C) 2015 The Gravitee team (http://gravitee.io)
|
|
3
|
-
*
|
|
4
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
-
* you may not use this file except in compliance with the License.
|
|
6
|
-
* You may obtain a copy of the License at
|
|
7
|
-
*
|
|
8
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
-
* See the License for the specific language governing permissions and
|
|
14
|
-
* limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
import { css, LitElement, html } from 'lit';
|
|
17
|
-
import { dispatchCustomEvent } from '../lib/events';
|
|
18
|
-
import '../atoms/gv-input';
|
|
19
|
-
import '../atoms/gv-input-message';
|
|
20
|
-
import '../atoms/gv-text';
|
|
21
|
-
import '../atoms/gv-select';
|
|
22
|
-
import '../atoms/gv-select-native';
|
|
23
|
-
import '../atoms/gv-switch';
|
|
24
|
-
import '../molecules/gv-code';
|
|
25
|
-
import '../molecules/gv-expression-language';
|
|
26
|
-
import '../molecules/gv-cron-editor';
|
|
27
|
-
import '../atoms/gv-autocomplete';
|
|
28
|
-
import '../organisms/gv-schema-form-array';
|
|
29
|
-
import '../organisms/gv-schema-form-control-object';
|
|
30
|
-
import { isCodemirror, isObject, isComplexArray } from '../lib/schema-form';
|
|
31
|
-
import { UpdateAfterBrowser } from '../mixins/update-after-browser';
|
|
32
|
-
|
|
33
|
-
export class GvSchemaFormControl extends UpdateAfterBrowser(LitElement) {
|
|
34
|
-
static get properties() {
|
|
35
|
-
return {
|
|
36
|
-
type: { type: String },
|
|
37
|
-
id: { type: String, reflect: true },
|
|
38
|
-
name: { type: String, reflect: true },
|
|
39
|
-
required: { type: Boolean, reflect: true },
|
|
40
|
-
disabled: { type: Boolean, reflect: true },
|
|
41
|
-
readonly: { type: Boolean, reflect: true },
|
|
42
|
-
title: { type: String, reflect: true },
|
|
43
|
-
pattern: { type: String },
|
|
44
|
-
control: { type: Object },
|
|
45
|
-
errors: { type: Array },
|
|
46
|
-
value: { type: Object, reflect: true },
|
|
47
|
-
skeleton: { type: Boolean, reflect: true },
|
|
48
|
-
hidden: { type: Boolean, reflect: true },
|
|
49
|
-
writeOnly: { type: Boolean, reflect: true },
|
|
50
|
-
compact: { type: Boolean },
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
constructor() {
|
|
55
|
-
super();
|
|
56
|
-
// When form has errors, the control is not update to conserve the error state.
|
|
57
|
-
// This list is used to force the update of properties even in error case.
|
|
58
|
-
this._observedProperties = ['disabled', 'readonly', 'required'];
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
isExpressionLanguage() {
|
|
62
|
-
return this.control['x-schema-form'] && this.control['x-schema-form']['expression-language'] != null;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
isCronExpression() {
|
|
66
|
-
return this.control['x-schema-form'] && this.control['x-schema-form']['cron-expression'] === true;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
isPassword() {
|
|
70
|
-
return (
|
|
71
|
-
this.control.writeOnly === true ||
|
|
72
|
-
(this.control['x-schema-form'] && this.control['x-schema-form'].type != null && this.control['x-schema-form'].type === 'password')
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
getPlaceholder() {
|
|
77
|
-
return this.control['x-schema-form'] && this.control['x-schema-form'].placeholder ? this.control['x-schema-form'].placeholder : null;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
isCodemirror() {
|
|
81
|
-
return isCodemirror(this.control);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
isObject() {
|
|
85
|
-
return isObject(this.control);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
isAutocomplete() {
|
|
89
|
-
return this.control['x-schema-form'] && this.control['x-schema-form'].event != null && this.control.type === 'string';
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
isText() {
|
|
93
|
-
return this.control['x-schema-form'] && this.control['x-schema-form'].type === 'text' && this.control.type === 'string';
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
getElementName() {
|
|
97
|
-
if (this.isObject()) {
|
|
98
|
-
return 'gv-schema-form-control-object';
|
|
99
|
-
}
|
|
100
|
-
if ((this.control.enum || (this.control.items && this.control.items.enum)) && !this.isAutocomplete()) {
|
|
101
|
-
if (this.control.type === 'array') {
|
|
102
|
-
return 'gv-select';
|
|
103
|
-
}
|
|
104
|
-
return 'gv-select-native';
|
|
105
|
-
} else if (isComplexArray(this.control)) {
|
|
106
|
-
return 'gv-schema-form-array';
|
|
107
|
-
} else if (this.control.type === 'array') {
|
|
108
|
-
return 'gv-button';
|
|
109
|
-
} else if (this.control.type === 'boolean') {
|
|
110
|
-
return 'gv-switch';
|
|
111
|
-
} else if (this.isExpressionLanguage()) {
|
|
112
|
-
return 'gv-expression-language';
|
|
113
|
-
} else if (this.isCodemirror()) {
|
|
114
|
-
return 'gv-code';
|
|
115
|
-
} else if (this.isCronExpression()) {
|
|
116
|
-
return 'gv-cron-editor';
|
|
117
|
-
} else if (this.isText()) {
|
|
118
|
-
return 'gv-text';
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
return 'gv-input';
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
_updateProperties(element) {
|
|
125
|
-
if (element != null) {
|
|
126
|
-
this._observedProperties.forEach((property) => {
|
|
127
|
-
if (this[property] != null) {
|
|
128
|
-
element[property] = this[property];
|
|
129
|
-
}
|
|
130
|
-
});
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
_renderControl() {
|
|
135
|
-
const elementName = this.getElementName();
|
|
136
|
-
const element = document.createElement(elementName);
|
|
137
|
-
element.id = this.id;
|
|
138
|
-
element.name = this.id;
|
|
139
|
-
element.skeleton = this.skeleton;
|
|
140
|
-
element.classList.add('form__control');
|
|
141
|
-
if (this.value == null && this.control.default != null) {
|
|
142
|
-
this.value = this.control.default;
|
|
143
|
-
dispatchCustomEvent(this, 'default-value', { value: this.value, currentTarget: element, control: this.control });
|
|
144
|
-
}
|
|
145
|
-
if (this.value != null) {
|
|
146
|
-
this._setValue(element);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
if (this.control.type === 'object') {
|
|
150
|
-
element.schema = this.control;
|
|
151
|
-
} else if (isComplexArray(this.control)) {
|
|
152
|
-
element.schema = this.control.items;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
this._updateProperties(element);
|
|
156
|
-
|
|
157
|
-
if (this.control.title) {
|
|
158
|
-
element.label = this.control.title;
|
|
159
|
-
element.title = this.control.title;
|
|
160
|
-
} else {
|
|
161
|
-
const tmp = this.id.split('.');
|
|
162
|
-
const title = tmp[tmp.length - 1];
|
|
163
|
-
if (isNaN(parseInt(title, 10))) {
|
|
164
|
-
element.label = title;
|
|
165
|
-
element.title = title;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
if (this.control.pattern) {
|
|
170
|
-
element.pattern = this.control.pattern;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
if (this.control.type === 'integer') {
|
|
174
|
-
element.type = 'number';
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
if (this.isText()) {
|
|
178
|
-
element.rows = 3;
|
|
179
|
-
element.autosize = true;
|
|
180
|
-
element.placeholder = this.control.description;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
const placeholder = this.getPlaceholder();
|
|
184
|
-
|
|
185
|
-
if (this.control.enum || (this.control.items && this.control.items.enum)) {
|
|
186
|
-
const options = this.control.enum || this.control.items.enum;
|
|
187
|
-
if (this.control['x-schema-form'] && this.control['x-schema-form'].titleMap) {
|
|
188
|
-
element.options = options.map((value) => ({
|
|
189
|
-
value,
|
|
190
|
-
label: this.control['x-schema-form'].titleMap[value] || value,
|
|
191
|
-
}));
|
|
192
|
-
} else {
|
|
193
|
-
element.options = options;
|
|
194
|
-
}
|
|
195
|
-
if (this.control.type === 'array') {
|
|
196
|
-
element.multiple = true;
|
|
197
|
-
}
|
|
198
|
-
} else if (this.isCodemirror()) {
|
|
199
|
-
element.options = this.control['x-schema-form'].codemirrorOptions;
|
|
200
|
-
if (this.control.default != null && element.options.value == null) {
|
|
201
|
-
element.options.value = this.control.default;
|
|
202
|
-
}
|
|
203
|
-
} else if (this.isExpressionLanguage()) {
|
|
204
|
-
element.options = {};
|
|
205
|
-
element.rows = 1;
|
|
206
|
-
} else if (this.isPassword()) {
|
|
207
|
-
element.type = 'password';
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
if (this.control.description) {
|
|
211
|
-
element.description = this.control.description;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
if (this.compact) {
|
|
215
|
-
element.placeholder = element.description || element.label;
|
|
216
|
-
element.label = null;
|
|
217
|
-
element.description = null;
|
|
218
|
-
element.compact = this.compact;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
if (placeholder != null) {
|
|
222
|
-
if (this.isExpressionLanguage() || this.isCodemirror()) {
|
|
223
|
-
element.options.placeholder = placeholder;
|
|
224
|
-
} else {
|
|
225
|
-
element.placeholder = placeholder;
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
element.addEventListener(`${elementName}:input`, this._onInput.bind(this));
|
|
230
|
-
|
|
231
|
-
let currentTarget;
|
|
232
|
-
if (this.isAutocomplete()) {
|
|
233
|
-
const autocomplete = document.createElement('gv-autocomplete');
|
|
234
|
-
autocomplete.minChars = 0;
|
|
235
|
-
autocomplete.filter = true;
|
|
236
|
-
element.clearable = true;
|
|
237
|
-
autocomplete.id = this.id;
|
|
238
|
-
autocomplete.appendChild(element);
|
|
239
|
-
autocomplete.addEventListener(`gv-autocomplete:select`, this._onInput.bind(this));
|
|
240
|
-
element.addEventListener(`gv-input:clear`, this._onInput.bind(this));
|
|
241
|
-
currentTarget = autocomplete;
|
|
242
|
-
} else {
|
|
243
|
-
currentTarget = element;
|
|
244
|
-
}
|
|
245
|
-
if (this.control['x-schema-form'] != null) {
|
|
246
|
-
dispatchCustomEvent(this, 'control-ready', {
|
|
247
|
-
currentTarget,
|
|
248
|
-
control: this,
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
return currentTarget;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
_onInput(e) {
|
|
255
|
-
e.preventDefault();
|
|
256
|
-
e.stopPropagation();
|
|
257
|
-
let value = null;
|
|
258
|
-
if (e.target.tagName === 'GV-AUTOCOMPLETE') {
|
|
259
|
-
value = e.detail.value;
|
|
260
|
-
} else {
|
|
261
|
-
value = e.detail;
|
|
262
|
-
}
|
|
263
|
-
dispatchCustomEvent(this, 'change', { value, currentTarget: e.target, control: this.control });
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
getControls() {
|
|
267
|
-
return [
|
|
268
|
-
...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control')),
|
|
269
|
-
...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-array')),
|
|
270
|
-
...Array.from(this.shadowRoot.querySelectorAll('gv-schema-form-control-object')),
|
|
271
|
-
];
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
getControl(id) {
|
|
275
|
-
if (id == null) {
|
|
276
|
-
id = this.id;
|
|
277
|
-
}
|
|
278
|
-
return this.shadowRoot.querySelector(`[id="${id}"]`);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
_setValue(controlElement) {
|
|
282
|
-
if (this.value != null && controlElement != null) {
|
|
283
|
-
if (this.control.type === 'boolean' || this.control.type === 'array' || this.control.type === 'object') {
|
|
284
|
-
controlElement.value = this.value;
|
|
285
|
-
} else {
|
|
286
|
-
controlElement.value = this.value.toString ? this.value.toString() : this.value;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
return controlElement;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
async updated(changedProperties) {
|
|
293
|
-
if (changedProperties.has('value')) {
|
|
294
|
-
Promise.all(this.getControls().map((control) => control.updateComplete)).then(() => {
|
|
295
|
-
this._setValue(this.getControl());
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
async getUpdateComplete() {
|
|
301
|
-
await super.getUpdateComplete();
|
|
302
|
-
await Promise.all(this.getControls().map((e) => e.updateComplete));
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
formatErrorMessage(error) {
|
|
306
|
-
let title;
|
|
307
|
-
if (this.control.properties != null && this.control.properties[error.argument] != null) {
|
|
308
|
-
title = this.control.properties[error.argument].title;
|
|
309
|
-
} else {
|
|
310
|
-
title = this.control.title;
|
|
311
|
-
}
|
|
312
|
-
if (title) {
|
|
313
|
-
return `<span>${error.message.replace(error.argument, title)}</span>`;
|
|
314
|
-
}
|
|
315
|
-
return `<span>${error.message}</span>`;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
shouldUpdate(changedProperties) {
|
|
319
|
-
if (this._observedProperties.find((property) => changedProperties.has(property)) != null) {
|
|
320
|
-
this._updateProperties(this.getControl());
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
if (changedProperties.has('errors') && this.errors != null) {
|
|
324
|
-
// Set errors to complex controls
|
|
325
|
-
this.getControls().forEach((control) => {
|
|
326
|
-
control.errors = this.errors;
|
|
327
|
-
});
|
|
328
|
-
|
|
329
|
-
// Find simple controls and append error message
|
|
330
|
-
const errorContainer = this.shadowRoot.querySelectorAll('.form__control-error');
|
|
331
|
-
errorContainer.forEach((container) => (container.innerHTML = ''));
|
|
332
|
-
this.errors.forEach((error) => {
|
|
333
|
-
const key = error.property === 'instance' ? error.argument : error.property.replace('instance.', '');
|
|
334
|
-
const errorContainer = this.shadowRoot.querySelector(`[id="${key}-error"]`);
|
|
335
|
-
if (errorContainer) {
|
|
336
|
-
const message = document.createElement('gv-input-message');
|
|
337
|
-
message.innerHTML = this.formatErrorMessage(error);
|
|
338
|
-
message.level = 'warn';
|
|
339
|
-
errorContainer.appendChild(message);
|
|
340
|
-
}
|
|
341
|
-
});
|
|
342
|
-
return false;
|
|
343
|
-
}
|
|
344
|
-
return super.shouldUpdate(changedProperties);
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
render() {
|
|
348
|
-
return html`
|
|
349
|
-
${this._renderControl()}
|
|
350
|
-
<div class="form__control-error" id="${this.id + '-error'}"></div>
|
|
351
|
-
`;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
static get styles() {
|
|
355
|
-
return [
|
|
356
|
-
// language=CSS
|
|
357
|
-
css`
|
|
358
|
-
:host {
|
|
359
|
-
box-sizing: border-box;
|
|
360
|
-
margin: var(--gv-schema-form-control--m, 0.4rem);
|
|
361
|
-
display: block;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
:host([hidden]) {
|
|
365
|
-
visibility: hidden;
|
|
366
|
-
height: 0;
|
|
367
|
-
margin: 0;
|
|
368
|
-
padding: 0;
|
|
369
|
-
overflow: hidden;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
.form__control-description,
|
|
373
|
-
.form__control-error {
|
|
374
|
-
font-size: 12px;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.form__control-description {
|
|
378
|
-
opacity: 0.8;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
.form__control-label {
|
|
382
|
-
display: flex;
|
|
383
|
-
flex-direction: row;
|
|
384
|
-
border-bottom: 1px solid #d9d9d9;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
label {
|
|
388
|
-
margin: 0.2rem;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
.form__control-label label {
|
|
392
|
-
flex: 1;
|
|
393
|
-
text-transform: capitalize;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.form__control-array,
|
|
397
|
-
.form__control-object {
|
|
398
|
-
display: flex;
|
|
399
|
-
flex-direction: column;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
.form__control-enum {
|
|
403
|
-
display: flex;
|
|
404
|
-
/*align-items: flex-end;*/
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.form__control-array gv-button {
|
|
408
|
-
align-self: flex-end;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
.form__control {
|
|
412
|
-
position: relative;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
gv-select,
|
|
416
|
-
gv-select-native,
|
|
417
|
-
gv-input,
|
|
418
|
-
gv-code,
|
|
419
|
-
gv-switch,
|
|
420
|
-
gv-expression-language {
|
|
421
|
-
width: 100%;
|
|
422
|
-
margin: 0.2rem 0;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
gv-select:hover,
|
|
426
|
-
gv-select-native:hover,
|
|
427
|
-
gv-autocomplete:hover {
|
|
428
|
-
z-index: 70;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
.error {
|
|
432
|
-
color: var(--gv-theme-color-error, #f44336);
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.warning {
|
|
436
|
-
color: var(--gv-theme-color-warning, #ff9800);
|
|
437
|
-
}
|
|
438
|
-
`,
|
|
439
|
-
];
|
|
440
|
-
}
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
window.customElements.define('gv-schema-form-control', GvSchemaFormControl);
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvSchemaFormControl=void 0;const e=require("lit"),t=require("../lib/events");require("../atoms/gv-input"),require("../atoms/gv-input-message"),require("../atoms/gv-text"),require("../atoms/gv-select"),require("../atoms/gv-select-native"),require("../atoms/gv-switch"),require("../molecules/gv-code"),require("../molecules/gv-expression-language"),require("../molecules/gv-cron-editor"),require("../atoms/gv-autocomplete"),require("../organisms/gv-schema-form-array"),require("../organisms/gv-schema-form-control-object");const r=require("../lib/schema-form"),o=require("../mixins/update-after-browser");class s extends((0,o.UpdateAfterBrowser)(e.LitElement)){static get properties(){return{type:{type:String},id:{type:String,reflect:!0},name:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},title:{type:String,reflect:!0},pattern:{type:String},control:{type:Object},errors:{type:Array},value:{type:Object,reflect:!0},skeleton:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},writeOnly:{type:Boolean,reflect:!0},compact:{type:Boolean}}}constructor(){super(),this._observedProperties=["disabled","readonly","required"]}isExpressionLanguage(){return this.control["x-schema-form"]&&null!=this.control["x-schema-form"]["expression-language"]}isCronExpression(){return this.control["x-schema-form"]&&!0===this.control["x-schema-form"]["cron-expression"]}isPassword(){return!0===this.control.writeOnly||this.control["x-schema-form"]&&null!=this.control["x-schema-form"].type&&"password"===this.control["x-schema-form"].type}getPlaceholder(){return this.control["x-schema-form"]&&this.control["x-schema-form"].placeholder?this.control["x-schema-form"].placeholder:null}isCodemirror(){return(0,r.isCodemirror)(this.control)}isObject(){return(0,r.isObject)(this.control)}isAutocomplete(){return this.control["x-schema-form"]&&null!=this.control["x-schema-form"].event&&"string"===this.control.type}isText(){return this.control["x-schema-form"]&&"text"===this.control["x-schema-form"].type&&"string"===this.control.type}getElementName(){return this.isObject()?"gv-schema-form-control-object":(this.control.enum||this.control.items&&this.control.items.enum)&&!this.isAutocomplete()?"array"===this.control.type?"gv-select":"gv-select-native":(0,r.isComplexArray)(this.control)?"gv-schema-form-array":"array"===this.control.type?"gv-button":"boolean"===this.control.type?"gv-switch":this.isExpressionLanguage()?"gv-expression-language":this.isCodemirror()?"gv-code":this.isCronExpression()?"gv-cron-editor":this.isText()?"gv-text":"gv-input"}_updateProperties(e){null!=e&&this._observedProperties.forEach((t=>{null!=this[t]&&(e[t]=this[t])}))}_renderControl(){const e=this.getElementName(),o=document.createElement(e);if(o.id=this.id,o.name=this.id,o.skeleton=this.skeleton,o.classList.add("form__control"),null==this.value&&null!=this.control.default&&(this.value=this.control.default,(0,t.dispatchCustomEvent)(this,"default-value",{value:this.value,currentTarget:o,control:this.control})),null!=this.value&&this._setValue(o),"object"===this.control.type?o.schema=this.control:(0,r.isComplexArray)(this.control)&&(o.schema=this.control.items),this._updateProperties(o),this.control.title)o.label=this.control.title,o.title=this.control.title;else{const e=this.id.split("."),t=e[e.length-1];isNaN(parseInt(t,10))&&(o.label=t,o.title=t)}this.control.pattern&&(o.pattern=this.control.pattern),"integer"===this.control.type&&(o.type="number"),this.isText()&&(o.rows=3,o.autosize=!0,o.placeholder=this.control.description);const s=this.getPlaceholder();if(this.control.enum||this.control.items&&this.control.items.enum){const e=this.control.enum||this.control.items.enum;this.control["x-schema-form"]&&this.control["x-schema-form"].titleMap?o.options=e.map((e=>({value:e,label:this.control["x-schema-form"].titleMap[e]||e}))):o.options=e,"array"===this.control.type&&(o.multiple=!0)}else this.isCodemirror()?(o.options=this.control["x-schema-form"].codemirrorOptions,null!=this.control.default&&null==o.options.value&&(o.options.value=this.control.default)):this.isExpressionLanguage()?(o.options={},o.rows=1):this.isPassword()&&(o.type="password");let i;if(this.control.description&&(o.description=this.control.description),this.compact&&(o.placeholder=o.description||o.label,o.label=null,o.description=null,o.compact=this.compact),null!=s&&(this.isExpressionLanguage()||this.isCodemirror()?o.options.placeholder=s:o.placeholder=s),o.addEventListener(`${e}:input`,this._onInput.bind(this)),this.isAutocomplete()){const e=document.createElement("gv-autocomplete");e.minChars=0,e.filter=!0,o.clearable=!0,e.id=this.id,e.appendChild(o),e.addEventListener("gv-autocomplete:select",this._onInput.bind(this)),o.addEventListener("gv-input:clear",this._onInput.bind(this)),i=e}else i=o;return null!=this.control["x-schema-form"]&&(0,t.dispatchCustomEvent)(this,"control-ready",{currentTarget:i,control:this}),i}_onInput(e){e.preventDefault(),e.stopPropagation();let r=null;r="GV-AUTOCOMPLETE"===e.target.tagName?e.detail.value:e.detail,(0,t.dispatchCustomEvent)(this,"change",{value:r,currentTarget:e.target,control:this.control})}getControls(){return[...Array.from(this.shadowRoot.querySelectorAll("gv-schema-form-control")),...Array.from(this.shadowRoot.querySelectorAll("gv-schema-form-control-array")),...Array.from(this.shadowRoot.querySelectorAll("gv-schema-form-control-object"))]}getControl(e){return null==e&&(e=this.id),this.shadowRoot.querySelector(`[id="${e}"]`)}_setValue(e){return null!=this.value&&null!=e&&("boolean"===this.control.type||"array"===this.control.type||"object"===this.control.type?e.value=this.value:e.value=this.value.toString?this.value.toString():this.value),e}async updated(e){e.has("value")&&Promise.all(this.getControls().map((e=>e.updateComplete))).then((()=>{this._setValue(this.getControl())}))}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getControls().map((e=>e.updateComplete)))}formatErrorMessage(e){let t;return t=null!=this.control.properties&&null!=this.control.properties[e.argument]?this.control.properties[e.argument].title:this.control.title,t?`<span>${e.message.replace(e.argument,t)}</span>`:`<span>${e.message}</span>`}shouldUpdate(e){if(null!=this._observedProperties.find((t=>e.has(t)))&&this._updateProperties(this.getControl()),e.has("errors")&&null!=this.errors){this.getControls().forEach((e=>{e.errors=this.errors}));return this.shadowRoot.querySelectorAll(".form__control-error").forEach((e=>e.innerHTML="")),this.errors.forEach((e=>{const t="instance"===e.property?e.argument:e.property.replace("instance.",""),r=this.shadowRoot.querySelector(`[id="${t}-error"]`);if(r){const t=document.createElement("gv-input-message");t.innerHTML=this.formatErrorMessage(e),t.level="warn",r.appendChild(t)}})),!1}return super.shouldUpdate(e)}render(){return e.html`${this._renderControl()}<div class="form__control-error" id="${this.id+"-error"}"></div>`}static get styles(){return[e.css`:host{box-sizing:border-box;margin:var(--gv-schema-form-control--m,.4rem);display:block}:host([hidden]){visibility:hidden;height:0;margin:0;padding:0;overflow:hidden}.form__control-description,.form__control-error{font-size:12px}.form__control-description{opacity:.8}.form__control-label{display:flex;flex-direction:row;border-bottom:1px solid #d9d9d9}label{margin:.2rem}.form__control-label label{flex:1;text-transform:capitalize}.form__control-array,.form__control-object{display:flex;flex-direction:column}.form__control-enum{display:flex}.form__control-array gv-button{align-self:flex-end}.form__control{position:relative}gv-code,gv-expression-language,gv-input,gv-select,gv-select-native,gv-switch{width:100%;margin:.2rem 0}gv-autocomplete:hover,gv-select-native:hover,gv-select:hover{z-index:70}.error{color:var(--gv-theme-color-error,#f44336)}.warning{color:var(--gv-theme-color-warning,#ff9800)}`]}}exports.GvSchemaFormControl=s,window.customElements.define("gv-schema-form-control",s);
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Schema form component
|
|
3
|
+
*
|
|
4
|
+
* @fires gv-schema-form:submit - event when user submit valid form
|
|
5
|
+
* @fires gv-schema-form:error - event when user submit invalid form
|
|
6
|
+
* @fires gv-schema-form:change - event when when form change
|
|
7
|
+
* @fires gv-schema-form:cancel - event when user cancel form
|
|
8
|
+
*
|
|
9
|
+
* @attr {Object} schema - the schema form configuration
|
|
10
|
+
* @attr {Object} values - the values of fields
|
|
11
|
+
* @attr {Object} errors - the map of errors by input key
|
|
12
|
+
* @attr {Boolean} validate - to force validation on first render
|
|
13
|
+
* @attr {Boolean} readonly - true if readonly
|
|
14
|
+
* @attr {Boolean} scrollable - useful for making content scrollable with fixed headers / footers
|
|
15
|
+
*
|
|
16
|
+
* @cssprop {Color} [--gv-schema-form--bgc=#ffffff] - Background color
|
|
17
|
+
* @cssprop {Length} [--gv-schema-form-control--m=0.4rem] - Control margin
|
|
18
|
+
*/
|
|
19
|
+
export class GvSchemaForm extends LitElement {
|
|
20
|
+
static get properties(): {
|
|
21
|
+
schema: {
|
|
22
|
+
type: ObjectConstructor;
|
|
23
|
+
};
|
|
24
|
+
errors: {
|
|
25
|
+
type: ObjectConstructor;
|
|
26
|
+
};
|
|
27
|
+
values: {
|
|
28
|
+
type: ObjectConstructor;
|
|
29
|
+
};
|
|
30
|
+
submitLabel: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
};
|
|
33
|
+
hasFooter: {
|
|
34
|
+
type: BooleanConstructor;
|
|
35
|
+
attribute: string;
|
|
36
|
+
};
|
|
37
|
+
hasHeader: {
|
|
38
|
+
type: BooleanConstructor;
|
|
39
|
+
attribute: string;
|
|
40
|
+
};
|
|
41
|
+
_confirm: {
|
|
42
|
+
type: ObjectConstructor;
|
|
43
|
+
};
|
|
44
|
+
_values: {
|
|
45
|
+
type: ObjectConstructor;
|
|
46
|
+
attribute: boolean;
|
|
47
|
+
};
|
|
48
|
+
dirty: {
|
|
49
|
+
type: BooleanConstructor;
|
|
50
|
+
reflect: boolean;
|
|
51
|
+
};
|
|
52
|
+
hideDeprecated: {
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
attribute: string;
|
|
55
|
+
};
|
|
56
|
+
validateOnRender: {
|
|
57
|
+
type: BooleanConstructor;
|
|
58
|
+
attribute: string;
|
|
59
|
+
};
|
|
60
|
+
_validatorResults: {
|
|
61
|
+
type: ObjectConstructor;
|
|
62
|
+
};
|
|
63
|
+
skeleton: {
|
|
64
|
+
type: BooleanConstructor;
|
|
65
|
+
reflect: boolean;
|
|
66
|
+
};
|
|
67
|
+
_touch: {
|
|
68
|
+
type: BooleanConstructor;
|
|
69
|
+
};
|
|
70
|
+
readonly: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
reflect: boolean;
|
|
73
|
+
};
|
|
74
|
+
scrollable: {
|
|
75
|
+
type: BooleanConstructor;
|
|
76
|
+
reflect: boolean;
|
|
77
|
+
};
|
|
78
|
+
groups: {
|
|
79
|
+
type: ArrayConstructor;
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
static get styles(): import("lit").CSSResult[];
|
|
83
|
+
hideDeprecated: boolean;
|
|
84
|
+
_values: {};
|
|
85
|
+
submitLabel: string;
|
|
86
|
+
hasHeader: boolean;
|
|
87
|
+
hasFooter: boolean;
|
|
88
|
+
_touch: boolean;
|
|
89
|
+
_validator: Validator;
|
|
90
|
+
_validatorResults: {};
|
|
91
|
+
_ignoreProperties: any[];
|
|
92
|
+
_dynamicControls: any[];
|
|
93
|
+
_dynamicAttributes: string[];
|
|
94
|
+
groups: any;
|
|
95
|
+
set values(arg: {});
|
|
96
|
+
get values(): {};
|
|
97
|
+
_initialValues: any;
|
|
98
|
+
reset(values?: null): void;
|
|
99
|
+
_onReset(): void;
|
|
100
|
+
requestValidation(): void;
|
|
101
|
+
_validateTimeout: NodeJS.Timeout | undefined;
|
|
102
|
+
submit(): void;
|
|
103
|
+
_onSubmit(): void;
|
|
104
|
+
dirty: boolean | undefined;
|
|
105
|
+
_setDirty(dirty?: boolean): void;
|
|
106
|
+
_setTouch(touch?: boolean): void;
|
|
107
|
+
confirm(): any;
|
|
108
|
+
_confirm: {
|
|
109
|
+
resolve: (value: any) => void;
|
|
110
|
+
reject: (reason?: any) => void;
|
|
111
|
+
} | null | undefined;
|
|
112
|
+
_onConfirmReset(): void;
|
|
113
|
+
_onConfirmEdit(): void;
|
|
114
|
+
_getSubmitBtn(): Element | null;
|
|
115
|
+
_getResetBtn(): Element | null;
|
|
116
|
+
_dispatchChange(): void;
|
|
117
|
+
_changeTimeout: NodeJS.Timeout | undefined;
|
|
118
|
+
_onDefaultValue({ detail: { currentTarget, value, control } }: {
|
|
119
|
+
detail: {
|
|
120
|
+
currentTarget: any;
|
|
121
|
+
value: any;
|
|
122
|
+
control: any;
|
|
123
|
+
};
|
|
124
|
+
}): void;
|
|
125
|
+
_onChange({ detail: { currentTarget, value, control } }: {
|
|
126
|
+
detail: {
|
|
127
|
+
currentTarget: any;
|
|
128
|
+
value: any;
|
|
129
|
+
control: any;
|
|
130
|
+
};
|
|
131
|
+
}): void;
|
|
132
|
+
_onControlReady(e: any): void;
|
|
133
|
+
_updateDynamicControls(): void;
|
|
134
|
+
_updateDynamicControl(controlElement: any): null;
|
|
135
|
+
_renderControl(key: any): import("lit-html").TemplateResult<1>;
|
|
136
|
+
_hasCondition(control: any): boolean;
|
|
137
|
+
_evaluateCondition(control: any, conditionKey: any): boolean;
|
|
138
|
+
_evaluateNotEqualsCondition(control: any, condition: any): boolean;
|
|
139
|
+
_evaluateEqualsCondition(control: any, condition: any): boolean;
|
|
140
|
+
_evaluateNotDefCondition(control: any, condition: any): boolean;
|
|
141
|
+
_evaluateDefCondition(control: any, condition: any): boolean;
|
|
142
|
+
_renderPart(): unknown;
|
|
143
|
+
getControls(): Element[];
|
|
144
|
+
getControl(id: any): Element | null;
|
|
145
|
+
_getErrors(): any;
|
|
146
|
+
validate(): {};
|
|
147
|
+
errors: any;
|
|
148
|
+
isValid(): boolean;
|
|
149
|
+
isTouch(): any;
|
|
150
|
+
canSubmit(): any;
|
|
151
|
+
_updateActions(): void;
|
|
152
|
+
_updateChildren(withValidation: any): void;
|
|
153
|
+
_updateActionsTimeout: NodeJS.Timeout | undefined;
|
|
154
|
+
}
|
|
155
|
+
import { LitElement } from "lit-element/lit-element";
|
|
156
|
+
import { Validator } from "jsonschema";
|