@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68
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 +5 -13
- package/src/atoms/gv-autocomplete.js +422 -1
- package/src/atoms/gv-button.js +397 -1
- package/src/atoms/gv-checkbox.js +178 -1
- package/src/atoms/gv-date-picker-calendar.js +812 -1
- package/src/atoms/gv-date-picker-cell.js +174 -1
- package/src/atoms/gv-date-picker.js +638 -1
- package/src/atoms/gv-file-upload.js +348 -1
- package/src/atoms/gv-icon.js +93 -1
- package/src/atoms/gv-image.js +135 -1
- package/src/atoms/gv-input-message.js +78 -1
- package/src/atoms/gv-input.js +508 -1
- package/src/atoms/gv-link.js +204 -1
- package/src/atoms/gv-message.js +133 -1
- package/src/atoms/gv-metric.js +112 -1
- package/src/atoms/gv-relative-time.js +143 -1
- package/src/atoms/gv-select-native.js +363 -1
- package/src/atoms/gv-select.js +413 -1
- package/src/atoms/gv-spinner.js +54 -1
- package/src/atoms/gv-state.js +125 -1
- package/src/atoms/gv-switch.js +235 -1
- package/src/atoms/gv-tag.js +162 -1
- package/src/atoms/gv-text.js +160 -1
- package/src/charts/gv-chart-bar.js +101 -1
- package/src/charts/gv-chart-gauge.js +92 -1
- package/src/charts/gv-chart-histogram.js +78 -1
- package/src/charts/gv-chart-line.js +218 -1
- package/src/charts/gv-chart-map.js +111 -1
- package/src/charts/gv-chart-pie.js +89 -1
- package/src/index.js +77 -1
- package/src/lib/cron-expression.js +176 -1
- package/src/lib/date.js +43 -1
- package/src/lib/events.js +26 -1
- package/src/lib/http-client-schema-form.js +67 -1
- package/src/lib/http.js +237 -1
- package/src/lib/i18n.js +93 -1
- package/src/lib/item.js +110 -1
- package/src/lib/properties.js +171 -1
- package/src/lib/schema-form.js +39 -1
- package/src/lib/studio.js +144 -1
- package/src/lib/style.js +39 -1
- package/src/lib/text-format.js +65 -1
- package/src/lib/theme.js +60 -1
- package/src/lib/utils.js +106 -1
- package/src/mixins/chart-element.js +153 -1
- package/src/mixins/input-element.js +136 -1
- package/src/mixins/item-resource.js +102 -1
- package/src/mixins/keyboard-element.js +62 -1
- package/src/mixins/update-after-browser.js +30 -1
- package/src/mixins/with-resize-observer.js +62 -1
- package/src/mixins/with-skeleton-attribute.js +109 -1
- package/src/molecules/gv-card-full.js +209 -1
- package/src/molecules/gv-card-list.js +101 -1
- package/src/molecules/gv-card.js +130 -1
- package/src/molecules/gv-category-list.js +56 -1
- package/src/molecules/gv-category.js +163 -1
- package/src/molecules/gv-code.js +334 -1
- package/src/molecules/gv-confirm.js +175 -1
- package/src/molecules/gv-cron-editor.js +685 -1
- package/src/molecules/gv-dropdown-menu.js +108 -1
- package/src/molecules/gv-expandable.js +116 -1
- package/src/molecules/gv-expression-language.js +263 -1
- package/src/molecules/gv-identity-picture.js +139 -1
- package/src/molecules/gv-list.js +214 -1
- package/src/molecules/gv-metrics.js +147 -1
- package/src/molecules/gv-modal.js +203 -1
- package/src/molecules/gv-nav.js +180 -1
- package/src/molecules/gv-option.js +230 -1
- package/src/molecules/gv-plans.js +400 -1
- package/src/molecules/gv-popover.js +323 -1
- package/src/molecules/gv-promote.js +203 -1
- package/src/molecules/gv-rating-list.js +341 -1
- package/src/molecules/gv-rating.js +234 -1
- package/src/molecules/gv-row-expandable.js +42 -1
- package/src/molecules/gv-row.js +205 -1
- package/src/molecules/gv-stats.js +110 -1
- package/src/molecules/gv-stepper.js +274 -1
- package/src/molecules/gv-table.js +644 -1
- package/src/molecules/gv-tree.js +238 -1
- package/src/organisms/gv-documentation.js +205 -1
- package/src/organisms/gv-header.js +276 -1
- package/src/organisms/gv-http-client.js +258 -1
- package/src/organisms/gv-menu.js +258 -1
- package/src/organisms/gv-newsletter-subscription.js +258 -1
- package/src/organisms/gv-pagination.js +179 -1
- package/src/organisms/gv-properties.js +860 -1
- package/src/organisms/gv-resizable-views.js +371 -1
- package/src/organisms/gv-resources.js +496 -1
- package/src/organisms/gv-schema-form-array.js +237 -1
- package/src/organisms/gv-schema-form-control-object.js +141 -1
- package/src/organisms/gv-schema-form-control.js +419 -1
- package/src/organisms/gv-schema-form.js +700 -1
- package/src/organisms/gv-tabs.js +201 -1
- package/src/organisms/gv-user-menu.js +298 -1
- package/src/organisms/gv-vertical-menu.js +119 -1
- package/src/policy-studio/gv-flow-step.js +443 -1
- package/src/policy-studio/gv-flow.js +595 -1
- package/src/policy-studio/gv-policy-studio-menu.js +689 -1
- package/src/policy-studio/gv-policy-studio.js +1712 -1
- package/src/styles/empty.js +35 -1
- package/src/styles/input.js +262 -1
- package/src/styles/link.js +31 -1
- package/src/styles/shapes.js +17 -1
- package/src/styles/skeleton.js +52 -1
- package/src/styles/zoom.js +39 -1
- package/src/theme/gv-theme.js +197 -1
- package/wc/gv-autocomplete.js +1 -1
- package/wc/gv-button.js +1 -1
- package/wc/gv-card-full.js +1 -1
- package/wc/gv-card-list.js +1 -1
- package/wc/gv-card.js +1 -1
- package/wc/gv-category-list.js +1 -1
- package/wc/gv-category.js +1 -1
- package/wc/gv-chart-bar.js +1 -1
- package/wc/gv-chart-gauge.js +1 -1
- package/wc/gv-chart-histogram.js +1 -1
- package/wc/gv-chart-line.js +1 -1
- package/wc/gv-chart-map.js +1 -1
- package/wc/gv-chart-pie.js +1 -1
- package/wc/gv-checkbox.js +1 -1
- package/wc/gv-code.js +1 -1
- package/wc/gv-confirm.js +1 -1
- package/wc/gv-cron-editor.js +1 -1
- package/wc/gv-date-picker-calendar.js +1 -1
- package/wc/gv-date-picker-cell.js +1 -1
- package/wc/gv-date-picker.js +1 -1
- package/wc/gv-documentation.js +1 -1
- package/wc/gv-dropdown-menu.js +1 -1
- package/wc/gv-expandable.js +1 -1
- package/wc/gv-expression-language.js +1 -1
- package/wc/gv-file-upload.js +1 -1
- package/wc/gv-flow-step.js +1 -1
- package/wc/gv-flow.js +1 -1
- package/wc/gv-header.js +1 -1
- package/wc/gv-http-client.js +1 -1
- package/wc/gv-icon.js +1 -1
- package/wc/gv-identity-picture.js +1 -1
- package/wc/gv-image.js +1 -1
- package/wc/gv-input-message.js +1 -1
- package/wc/gv-input.js +1 -1
- package/wc/gv-link.js +1 -1
- package/wc/gv-list.js +1 -1
- package/wc/gv-menu.js +1 -1
- package/wc/gv-message.js +1 -1
- package/wc/gv-metric.js +1 -1
- package/wc/gv-metrics.js +1 -1
- package/wc/gv-modal.js +1 -1
- package/wc/gv-nav.js +1 -1
- package/wc/gv-newsletter-subscription.js +1 -1
- package/wc/gv-option.js +1 -1
- package/wc/gv-pagination.js +1 -1
- package/wc/gv-plans.js +1 -1
- package/wc/gv-policy-studio-menu.js +1 -1
- package/wc/gv-policy-studio.js +1 -1
- package/wc/gv-popover.js +1 -1
- package/wc/gv-promote.js +1 -1
- package/wc/gv-properties.js +1 -1
- package/wc/gv-rating-list.js +1 -1
- package/wc/gv-rating.js +1 -1
- package/wc/gv-relative-time.js +1 -1
- package/wc/gv-resizable-views.js +1 -1
- package/wc/gv-resources.js +1 -1
- package/wc/gv-row-expandable.js +1 -1
- package/wc/gv-row.js +1 -1
- package/wc/gv-schema-form-array.js +1 -1
- package/wc/gv-schema-form-control-object.js +1 -1
- package/wc/gv-schema-form-control.js +1 -1
- package/wc/gv-schema-form.js +1 -1
- package/wc/gv-select-native.js +1 -1
- package/wc/gv-select.js +1 -1
- package/wc/gv-spinner.js +1 -1
- package/wc/gv-state.js +1 -1
- package/wc/gv-stats.js +1 -1
- package/wc/gv-stepper.js +1 -1
- package/wc/gv-switch.js +1 -1
- package/wc/gv-table.js +1 -1
- package/wc/gv-tabs.js +1 -1
- package/wc/gv-tag.js +1 -1
- package/wc/gv-text.js +1 -1
- package/wc/gv-theme.js +1 -1
- package/wc/gv-tree.js +1 -1
- package/wc/gv-user-menu.js +1 -1
- package/wc/gv-vertical-menu.js +1 -1
package/src/styles/empty.js
CHANGED
|
@@ -1 +1,35 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
// language=CSS
|
|
18
|
+
export const empty = css `
|
|
19
|
+
.empty,
|
|
20
|
+
.error {
|
|
21
|
+
align-items: center;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
color: var(--gv-theme-font-color-dark);
|
|
24
|
+
font-size: var(--gv-theme-font-size-l, 20px);
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
height: 100%;
|
|
27
|
+
opacity: 0.5;
|
|
28
|
+
padding: 3rem;
|
|
29
|
+
text-align: center;
|
|
30
|
+
width: 100%;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
}
|
|
35
|
+
`;
|
package/src/styles/input.js
CHANGED
|
@@ -1 +1,262 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
// language=CSS
|
|
18
|
+
export const input = css `
|
|
19
|
+
:host {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
display: inline-block;
|
|
22
|
+
margin: 0.2rem;
|
|
23
|
+
vertical-align: middle;
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
--bdw: var(--gv-input--bdw, 1px);
|
|
26
|
+
--2xbdw: calc(var(--gv-input--bdw, 1px) * 2);
|
|
27
|
+
--input-small--p: 4px 4px;
|
|
28
|
+
--input-small--fz: 12px;
|
|
29
|
+
--input-small--lh: 15px;
|
|
30
|
+
--icon-small--w: calc(15px + 4px + 4px);
|
|
31
|
+
--input-small--h: calc(var(--icon-small--w) + var(--2xbdw));
|
|
32
|
+
|
|
33
|
+
--input-medium--p: 10px 5px;
|
|
34
|
+
--input-medium--fz: 14px;
|
|
35
|
+
--input-medium--lh: 17px;
|
|
36
|
+
--icon-medium--w: calc(17px + 10px + 10px);
|
|
37
|
+
--input-medium--h: calc(var(--icon-medium--w) + var(--2xbdw));
|
|
38
|
+
|
|
39
|
+
--input-large--p: 12px 8px;
|
|
40
|
+
--input-large--fz: 16px;
|
|
41
|
+
--input-large--lh: 18px;
|
|
42
|
+
--icon-large--w: calc(18px + 12px + 12px);
|
|
43
|
+
--input-large--h: calc(var(--icon-large--w) + var(--2xbdw));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.box-icon {
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
height: var(--input-medium--h);
|
|
49
|
+
width: calc(var(--input-medium--h) - 4px);
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
position: absolute;
|
|
54
|
+
bottom: 0px;
|
|
55
|
+
right: 0px;
|
|
56
|
+
left: initial;
|
|
57
|
+
border-radius: 0 3px 3px 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.small .box-icon {
|
|
61
|
+
height: var(--input-small--h);
|
|
62
|
+
width: calc(var(--input-small--h) - 4px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.box-icon-left {
|
|
66
|
+
right: initial;
|
|
67
|
+
left: 0px;
|
|
68
|
+
border-radius: 3px 0 0 3px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.box-icon gv-icon {
|
|
72
|
+
--gv-icon--s: 22px;
|
|
73
|
+
--gv-icon--c: var(--gv-theme-font-color-dark);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.small .box-icon gv-icon {
|
|
77
|
+
--gv-icon--s: 16px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.box-icon.box-icon-clear gv-icon,
|
|
81
|
+
:host([large]) .box-icon.box-icon-clear gv-icon {
|
|
82
|
+
width: 16px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.box-icon.box-icon-bgc {
|
|
86
|
+
background-color: var(--gv-input-icon--bgc, var(--gv-theme-neutral-color, #f5f5f5));
|
|
87
|
+
border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:host([large]) .box-icon {
|
|
91
|
+
height: var(--input-large--h);
|
|
92
|
+
width: var(--input-large--h);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:host([large]) .box-icon gv-icon {
|
|
96
|
+
width: 24px;
|
|
97
|
+
--gv-icon--s: 24px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
:host([small]) .box-icon {
|
|
101
|
+
height: var(--input-small--h);
|
|
102
|
+
width: var(--input-small--h);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([small]) .box-icon gv-icon {
|
|
106
|
+
width: 18px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
:host([small]) .box-icon-clear gv-icon {
|
|
110
|
+
width: 14px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.box-input {
|
|
114
|
+
position: relative;
|
|
115
|
+
line-height: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* BASE */
|
|
119
|
+
input,
|
|
120
|
+
::slotted(input),
|
|
121
|
+
::slotted(.input),
|
|
122
|
+
.input {
|
|
123
|
+
border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
|
|
124
|
+
transition: border 10ms ease-in-out;
|
|
125
|
+
box-sizing: border-box;
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
font-style: normal;
|
|
128
|
+
font-weight: normal;
|
|
129
|
+
outline: none;
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
-webkit-appearance: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
input::-webkit-search-decoration,
|
|
136
|
+
::slotted(input::-webkit-search-decoration) {
|
|
137
|
+
-webkit-appearance: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* SIZE */
|
|
141
|
+
.large input,
|
|
142
|
+
.large ::slotted(input),
|
|
143
|
+
.large ::slotted(.input),
|
|
144
|
+
.large .input {
|
|
145
|
+
padding: var(--input-large--p);
|
|
146
|
+
font-size: var(--input-large--fz);
|
|
147
|
+
line-height: var(--input-large--lh);
|
|
148
|
+
height: var(--input-large--h);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.medium input,
|
|
152
|
+
.medium ::slotted(input),
|
|
153
|
+
.medium ::slotted(.input),
|
|
154
|
+
.medium .input {
|
|
155
|
+
padding: var(--input-medium--p);
|
|
156
|
+
font-size: var(--input-medium--fz);
|
|
157
|
+
line-height: var(--input-medium--lh);
|
|
158
|
+
height: var(--input-medium--h);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.small input,
|
|
162
|
+
.small ::slotted(input),
|
|
163
|
+
.small ::slotted(.input),
|
|
164
|
+
.small .input {
|
|
165
|
+
padding: var(--input-small--p);
|
|
166
|
+
font-size: var(--input-small--fz);
|
|
167
|
+
line-height: var(--input-small--lh);
|
|
168
|
+
height: var(--input-small--h);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.large.icon input,
|
|
172
|
+
.large.icon ::slotted(input) {
|
|
173
|
+
padding-right: 45px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.large.clearable input,
|
|
177
|
+
.large.clearable ::slotted(input) {
|
|
178
|
+
padding-right: 50px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.medium.icon input,
|
|
182
|
+
.medium.icon ::slotted(input) {
|
|
183
|
+
padding-right: 36px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.medium.clearable input,
|
|
187
|
+
.medium.clearable ::slotted(input) {
|
|
188
|
+
padding-right: 32px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.small.icon input,
|
|
192
|
+
.small ::slotted(input) {
|
|
193
|
+
padding-right: 26px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.small.clearable inpu,
|
|
197
|
+
.small.clearable ::slotted(input) {
|
|
198
|
+
padding-right: 22px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.large.icon-left input,
|
|
202
|
+
.large.icon-left ::slotted(input) {
|
|
203
|
+
padding-left: 45px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.large.clearable input,
|
|
207
|
+
.large.clearable ::slotted(input) {
|
|
208
|
+
padding-right: 40px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.medium.icon-left input,
|
|
212
|
+
.medium.icon-left ::slotted(input) {
|
|
213
|
+
padding-left: 36px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.small.icon-left input,
|
|
217
|
+
.small.icon-left ::slotted(input) {
|
|
218
|
+
padding-left: 26px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
::-webkit-search-cancel-button {
|
|
222
|
+
-webkit-appearance: none;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* STATES */
|
|
226
|
+
:host([disabled]) {
|
|
227
|
+
--gv-icon--c: var(--gv-theme-neutral-color-darker, #d9d9d9);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
:host([disabled]) .box-icon-bgc {
|
|
231
|
+
background-color: transparent;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
:host([disabled]) input,
|
|
235
|
+
:host([disabled]) .input,
|
|
236
|
+
:host([disabled]) ::slotted(input) {
|
|
237
|
+
cursor: default;
|
|
238
|
+
opacity: 0.5;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
input:required,
|
|
242
|
+
.input:required,
|
|
243
|
+
::slotted(input:required),
|
|
244
|
+
::slotted(.input:required),
|
|
245
|
+
input:invalid,
|
|
246
|
+
.input:invalid,
|
|
247
|
+
::slotted(input:invalid),
|
|
248
|
+
::slotted(.input:invalid) {
|
|
249
|
+
box-shadow: none;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
label {
|
|
253
|
+
display: block;
|
|
254
|
+
line-height: 15px;
|
|
255
|
+
padding: 0 0 0.2rem 0;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.description {
|
|
259
|
+
opacity: 0.6;
|
|
260
|
+
font-size: var(--gv-theme-font-size-s, 12px);
|
|
261
|
+
}
|
|
262
|
+
`;
|
package/src/styles/link.js
CHANGED
|
@@ -1 +1,31 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
// language=CSS
|
|
18
|
+
export const link = css `
|
|
19
|
+
.link,
|
|
20
|
+
.link:visited {
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
transition: opacity 0.15s ease-in;
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.link:hover {
|
|
28
|
+
opacity: 0.7;
|
|
29
|
+
transition: opacity 0.15s ease-in;
|
|
30
|
+
}
|
|
31
|
+
`;
|
package/src/styles/shapes.js
CHANGED
|
@@ -1 +1,17 @@
|
|
|
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
|
+
export const shapeClipboard = 'general:clipboard';
|
|
17
|
+
export const shapeCopied = 'communication:clipboard-check';
|
package/src/styles/skeleton.js
CHANGED
|
@@ -1 +1,52 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
// language=CSS
|
|
18
|
+
export const skeleton = css `
|
|
19
|
+
@keyframes skeleton-pulse {
|
|
20
|
+
from {
|
|
21
|
+
opacity: 0.85;
|
|
22
|
+
}
|
|
23
|
+
to {
|
|
24
|
+
opacity: 0.45;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.skeleton,
|
|
28
|
+
:host([skeleton]) {
|
|
29
|
+
animation-direction: alternate;
|
|
30
|
+
animation-duration: 500ms;
|
|
31
|
+
animation-iteration-count: infinite;
|
|
32
|
+
animation-name: skeleton-pulse;
|
|
33
|
+
color: transparent;
|
|
34
|
+
cursor: progress !important;
|
|
35
|
+
-moz-user-select: none;
|
|
36
|
+
-webkit-user-select: none;
|
|
37
|
+
-ms-user-select: none;
|
|
38
|
+
user-select: none;
|
|
39
|
+
background-color: var(--gv-theme-skeleton-color, #bfbfbf) !important;
|
|
40
|
+
border-color: var(--gv-theme-skeleton-color, #bfbfbf);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.skeleton svg,
|
|
44
|
+
:host([skeleton]) svg,
|
|
45
|
+
:host([skeleton]) gv-icon,
|
|
46
|
+
.skeleton gv-icon,
|
|
47
|
+
.skeleton > *,
|
|
48
|
+
.skeleton ::slotted(*),
|
|
49
|
+
:host([skeleton]) ::slotted(*) {
|
|
50
|
+
visibility: hidden;
|
|
51
|
+
}
|
|
52
|
+
`;
|
package/src/styles/zoom.js
CHANGED
|
@@ -1 +1,39 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
// language=CSS
|
|
18
|
+
export const zoom = css `
|
|
19
|
+
@keyframes zoomIn {
|
|
20
|
+
0% {
|
|
21
|
+
transform: scale(0.8);
|
|
22
|
+
opacity: 0;
|
|
23
|
+
}
|
|
24
|
+
100% {
|
|
25
|
+
transform: scale(1);
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes zoomOut {
|
|
31
|
+
0% {
|
|
32
|
+
transform: scale(1);
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
transform: scale(0.8);
|
|
36
|
+
opacity: 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
`;
|
package/src/theme/gv-theme.js
CHANGED
|
@@ -1 +1,197 @@
|
|
|
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 } from 'lit';
|
|
17
|
+
import { dispatchCustomEvent } from '../lib/events';
|
|
18
|
+
import { applyTheme } from '../lib/theme';
|
|
19
|
+
/**
|
|
20
|
+
* Our components use css variables to expose customizable properties.
|
|
21
|
+
*
|
|
22
|
+
* We did a work of inheritance and factorization of properties in order to define a general theme for our components.
|
|
23
|
+
*
|
|
24
|
+
* So we offer within our portal a customization tool.
|
|
25
|
+
*
|
|
26
|
+
* @cssprop {Color} [--gv-theme-color-darker=#383E3F] - Primary darker color
|
|
27
|
+
* @cssprop {Color} [--gv-theme-color-dark=#28444F] - Primary dark color
|
|
28
|
+
* @cssprop {Color} [--gv-theme-color=#5A7684] - Primary color
|
|
29
|
+
* @cssprop {Color} [--gv-theme-color-light=#86c3d0] - Primary light color
|
|
30
|
+
* @cssprop {Color} [--gv-theme-color-danger=#FF5722] - Primary danger color
|
|
31
|
+
*
|
|
32
|
+
* @cssprop {Color} [--gv-theme-color-error-dark=#d32f2f] - Error dark color
|
|
33
|
+
* @cssprop {Color} [--gv-theme-color-error=#f44336] - Error color
|
|
34
|
+
* @cssprop {Color} [--gv-theme-color-error-light=#e57373] - Error light color
|
|
35
|
+
* @cssprop {Color} [--gv-theme-color-info-dark=#1976d2] - Info dark color
|
|
36
|
+
* @cssprop {Color} [--gv-theme-color-info=#2196f3] - Info color
|
|
37
|
+
* @cssprop {Color} [--gv-theme-color-info-light=#64b5f6] - Info light color
|
|
38
|
+
* @cssprop {Color} [--gv-theme-color-success-dark=#388e3c] - Success dark color
|
|
39
|
+
* @cssprop {Color} [--gv-theme-color-success=#4caf50] - Success color
|
|
40
|
+
* @cssprop {Color} [--gv-theme-color-success-light=#81c784] - Success light color
|
|
41
|
+
* @cssprop {Color} [--gv-theme-color-warning-dark=#f57c00] - Warning dark color
|
|
42
|
+
* @cssprop {Color} [--gv-theme-color-warning=#ff9800] - Warning color
|
|
43
|
+
* @cssprop {Color} [--gv-theme-color-warning-light=#ffb74d] - Warning light color
|
|
44
|
+
*
|
|
45
|
+
* @cssprop {Color} [--gv-theme-neutral-color-darkest=#000000] - Neutral darkest color
|
|
46
|
+
* @cssprop {Color} [--gv-theme-neutral-color-darker=#BFBFBF] - Neutral darker color
|
|
47
|
+
* @cssprop {Color} [--gv-theme-neutral-color-dark=#D9D9D9] - Neutral dark color
|
|
48
|
+
* @cssprop {Color} [--gv-theme-neutral-color=#F5F5F5] - Neutral color
|
|
49
|
+
* @cssprop {Color} [--gv-theme-neutral-color-light=#EFEFEF] - Neutral light color
|
|
50
|
+
* @cssprop {Color} [--gv-theme-neutral-color-lighter=#FAFAFA] - Neutral light color
|
|
51
|
+
* @cssprop {Color} [--gv-theme-neutral-color-lightest=#FFFFFF] - Neutral lightest color
|
|
52
|
+
|
|
53
|
+
* @cssprop {Color} [--gv-theme-font-color-dark=#262626] - Dark font color
|
|
54
|
+
* @cssprop {Color} [--gv-theme-font-color-light=#FFFFFF] - Light Font color
|
|
55
|
+
* @cssprop {String} [--gv-theme-font-family='IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif] - Family
|
|
56
|
+
* @cssprop {Length} [--gv-theme-font-size-xs=10px] - Extra small
|
|
57
|
+
* @cssprop {Length} [--gv-theme-font-size-s=12px] - Small
|
|
58
|
+
* @cssprop {Length} [--gv-theme-font-size-m=14px] - Medium (Default)
|
|
59
|
+
* @cssprop {Length} [--gv-theme-font-size-l=16px] - Large
|
|
60
|
+
* @cssprop {Length} [--gv-theme-font-size-xl=26px] - Extra large
|
|
61
|
+
* @cssprop {Length} [--gv-theme-font-size-xxl=30px] - Extra extra large
|
|
62
|
+
* @cssprop {Length} [--gv-theme-homepage-background-height=400px] - Homepage background height
|
|
63
|
+
*
|
|
64
|
+
* @cssprop {Color} [--gv-theme-skeleton-color=#BFBFBF] - Primary skeleton color
|
|
65
|
+
* @cssprop {Color} [--gv-theme-homepage-background-color=#5A7684] - Homepage background color
|
|
66
|
+
*
|
|
67
|
+
* @cssprop {Image} [--gv-theme-homepage-background-image=none] - Background image
|
|
68
|
+
* @cssprop {Image} [--gv-theme-logo=url('/images/gravitee-logo-cyan.svg')] - Logo
|
|
69
|
+
* @cssprop {Image} [--gv-theme-optional-logo=url('/images/gravitee-logo-white.svg')] - Optional logo
|
|
70
|
+
* @cssprop {Image} [--gv-theme-favicon='/images/gravitee-favicon.png'] - Favicon
|
|
71
|
+
*
|
|
72
|
+
*/
|
|
73
|
+
export class GvTheme extends LitElement {
|
|
74
|
+
static get properties() {
|
|
75
|
+
return {
|
|
76
|
+
_theme: { type: Object, attribute: false },
|
|
77
|
+
_lastDate: { type: Number, attribute: false },
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
static get styles() {
|
|
81
|
+
return [
|
|
82
|
+
// language=CSS
|
|
83
|
+
css `
|
|
84
|
+
:host {
|
|
85
|
+
--gv-theme-color-darker: var(--gv-theme-color-darker, #383e3f);
|
|
86
|
+
--gv-theme-color-dark: var(--gv-theme-color-dark, #28444f);
|
|
87
|
+
--gv-theme-color: var(--gv-theme-color, #5a7684);
|
|
88
|
+
--gv-theme-color-light: var(--gv-theme-color-light, #86c3d0);
|
|
89
|
+
|
|
90
|
+
--gv-theme-color-danger: var(--gv-theme-color-danger, #ff5722);
|
|
91
|
+
|
|
92
|
+
--gv-theme-color-error-dark: var(--gv-theme-color-error-dark, #d32f2f);
|
|
93
|
+
--gv-theme-color-error: var(--gv-theme-color-error, #f44336);
|
|
94
|
+
--gv-theme-color-error-light: var(--gv-theme-color-error-light, #e57373);
|
|
95
|
+
--gv-theme-color-info-dark: var(--gv-theme-color-info-dark, #1976d2);
|
|
96
|
+
--gv-theme-color-info: var(--gv-theme-color-info, #2196f3);
|
|
97
|
+
--gv-theme-color-info-light: var(--gv-theme-color-info-light, #64b5f6);
|
|
98
|
+
--gv-theme-color-success-dark: var(--gv-theme-color-success-dark, #388e3c);
|
|
99
|
+
--gv-theme-color-success: var(--gv-theme-color-success, #4caf50);
|
|
100
|
+
--gv-theme-color-success-light: var(--gv-theme-color-success-light, #81c784);
|
|
101
|
+
--gv-theme-color-warning-dark: var(--gv-theme-color-warning-dark, #f57c00);
|
|
102
|
+
--gv-theme-color-warning: var(--gv-theme-color-warning, #ff9800);
|
|
103
|
+
--gv-theme-color-warning-light: var(--gv-theme-color-warning-light, #ffb74d);
|
|
104
|
+
|
|
105
|
+
--gv-theme-neutral-color-darkest: var(--gv-theme-neutral-color-darkest, #000000);
|
|
106
|
+
--gv-theme-neutral-color-darker: var(--gv-theme-neutral-color-darker, #bfbfbf);
|
|
107
|
+
--gv-theme-neutral-color-dark: var(--gv-theme-neutral-color-dark, #d9d9d9);
|
|
108
|
+
--gv-theme-neutral-color: var(--gv-theme-neutral-color, #f5f5f5);
|
|
109
|
+
--gv-theme-neutral-color-light: var(--gv-theme-neutral-color-light, #efefef);
|
|
110
|
+
--gv-theme-neutral-color-lighter: var(--gv-theme-neutral-color-lighter, #fafafa);
|
|
111
|
+
--gv-theme-neutral-color-lightest: var(--gv-theme-neutral-color-lightest, #ffffff);
|
|
112
|
+
|
|
113
|
+
--gv-theme-font-color-dark: var(--gv-theme-font-color-dark, #262626);
|
|
114
|
+
--gv-theme-font-color-light: var(--gv-theme-font-color-light, #ffffff);
|
|
115
|
+
--gv-theme-font-size-xs: var(--gv-theme-font-size-xs, 10px);
|
|
116
|
+
--gv-theme-font-size-s: var(--gv-theme-font-size-s, 12px);
|
|
117
|
+
--gv-theme-font-size-m: var(--gv-theme-font-size-m, 14px);
|
|
118
|
+
--gv-theme-font-size-l: var(--gv-theme-font-size-l, 16px);
|
|
119
|
+
--gv-theme-font-size-xl: var(--gv-theme-font-size-xl, 26px);
|
|
120
|
+
--gv-theme-font-size-xxl: var(--gv-theme-font-size-xxl, 30px);
|
|
121
|
+
--gv-theme-skeleton-color: var(--gv-theme-skeleton-color, #bfbfbf);
|
|
122
|
+
--gv-theme-font-family: var(--gv-theme-font-family, 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif);
|
|
123
|
+
|
|
124
|
+
--gv-theme-homepage-background-image: var(--gv-theme-homepage-background-image, none);
|
|
125
|
+
--gv-theme-homepage-background-color: var(--gv-theme-homepage-background-color, #5a7684);
|
|
126
|
+
--gv-theme-homepage-background-height: var(--gv-theme-homepage-background-height, 400px);
|
|
127
|
+
--gv-theme-logo: var(--gv-theme-logo, url('/images/gravitee-logo-cyan.svg'));
|
|
128
|
+
--gv-theme-optional-logo: var(--gv-theme-optional-logo, url('/images/gravitee-logo-white.svg'));
|
|
129
|
+
--gv-theme-favicon: var(--gv-theme-favicon, '/images/gravitee-favicon.png');
|
|
130
|
+
}
|
|
131
|
+
`,
|
|
132
|
+
];
|
|
133
|
+
}
|
|
134
|
+
constructor() {
|
|
135
|
+
super();
|
|
136
|
+
this._lastDate = 0;
|
|
137
|
+
}
|
|
138
|
+
handleEvent(event) {
|
|
139
|
+
if (event.data.type === 'gravitee') {
|
|
140
|
+
this.source = event.source;
|
|
141
|
+
this.origin = event.origin;
|
|
142
|
+
this.isDetached = event.data.isDetached;
|
|
143
|
+
this._lastDate = event.data.date;
|
|
144
|
+
if (event.data.requestAnswer) {
|
|
145
|
+
this.sendMessage();
|
|
146
|
+
}
|
|
147
|
+
if (event.data.theme) {
|
|
148
|
+
this._theme = event.data.theme;
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
console.warn('Theme not found', event.data);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
console.warn('Unknown message', event.data);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
getData() {
|
|
159
|
+
return {
|
|
160
|
+
type: 'gravitee',
|
|
161
|
+
href: window.location.href,
|
|
162
|
+
date: Date.now(),
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
sendMessage(data = {}, timeout = 0) {
|
|
166
|
+
if (this.source && this.origin) {
|
|
167
|
+
const sendData = Object.assign({}, this.getData(), data);
|
|
168
|
+
this.source.postMessage(sendData, this.origin);
|
|
169
|
+
}
|
|
170
|
+
else {
|
|
171
|
+
console.warn('Unknown source & origin for send message');
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
render() {
|
|
175
|
+
applyTheme(this._theme);
|
|
176
|
+
}
|
|
177
|
+
firstUpdated() {
|
|
178
|
+
window.addEventListener('message', this.handleEvent.bind(this), false);
|
|
179
|
+
window.addEventListener('unload', (event) => {
|
|
180
|
+
if (this.isDetached) {
|
|
181
|
+
this.sendMessage({ unload: true });
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
this.sendMessage();
|
|
185
|
+
}
|
|
186
|
+
clearInterval(this.intervalID);
|
|
187
|
+
});
|
|
188
|
+
this.intervalID = setInterval(() => {
|
|
189
|
+
if (this._lastDate - Date.now() < -30000) {
|
|
190
|
+
dispatchCustomEvent(this, 'error', {
|
|
191
|
+
message: 'Connection for preview has been lost, please close this tab and refresh your browser.',
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
}, 30000);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
window.customElements.define('gv-theme', GvTheme);
|
package/wc/gv-autocomplete.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import '../src/atoms/gv-autocomplete';
|
package/wc/gv-button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import '../src/atoms/gv-button';
|
package/wc/gv-card-full.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import '../src/molecules/gv-card-full';
|
package/wc/gv-card-list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import '../src/molecules/gv-card-list';
|
package/wc/gv-card.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import '../src/molecules/gv-card';
|