@gravitee/ui-components 3.24.5 → 3.25.0-fix-gvcode-15ce1d2
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/CHANGELOG.md +1270 -0
- package/LICENSE.txt +202 -0
- package/README.md +195 -0
- package/assets/i18n/en.json +3 -0
- package/assets/i18n/fr.json +3 -0
- package/assets/icons/design.svg +1 -1
- package/package.json +1 -1
- package/src/.eslintrc.js +19 -0
- package/src/atoms/gv-autocomplete.js +156 -132
- package/src/atoms/gv-button.js +248 -73
- package/src/atoms/gv-checkbox.js +103 -45
- package/src/atoms/gv-date-picker-calendar.js +393 -312
- package/src/atoms/gv-date-picker-cell.js +81 -57
- package/src/atoms/gv-date-picker.js +319 -180
- package/src/atoms/gv-file-upload.js +195 -85
- package/src/atoms/gv-icon.js +34 -13
- package/src/atoms/gv-image.js +66 -31
- package/src/atoms/gv-input-message.js +37 -12
- package/src/atoms/gv-input.js +148 -117
- package/src/atoms/gv-link.js +125 -47
- package/src/atoms/gv-message.js +69 -18
- package/src/atoms/gv-metric.js +68 -19
- package/src/atoms/gv-relative-time.js +38 -67
- package/src/atoms/gv-select-native.js +215 -96
- package/src/atoms/gv-select.js +230 -110
- package/src/atoms/gv-spinner.js +26 -5
- package/src/atoms/gv-state.js +66 -25
- package/src/atoms/gv-switch.js +160 -40
- package/src/atoms/gv-tag.js +78 -26
- package/src/atoms/gv-text.js +83 -22
- package/src/charts/gv-chart-bar.js +18 -22
- package/src/charts/gv-chart-gauge.js +31 -28
- package/src/charts/gv-chart-histogram.js +10 -18
- package/src/charts/gv-chart-line.js +59 -70
- package/src/charts/gv-chart-map.js +42 -44
- package/src/charts/gv-chart-pie.js +14 -18
- package/src/index.js +0 -1
- package/src/lib/cron-expression.js +35 -40
- package/src/lib/date.js +1 -10
- package/src/lib/events.js +1 -3
- package/src/lib/http-client-schema-form.js +12 -13
- package/src/lib/http.js +56 -57
- package/src/lib/i18n.js +22 -30
- package/src/lib/item.js +12 -13
- package/src/lib/properties.js +42 -77
- package/src/lib/schema-form.js +5 -4
- package/src/lib/studio.js +60 -13
- package/src/lib/style.js +8 -8
- package/src/lib/text-format.js +7 -14
- package/src/lib/theme.js +5 -8
- package/src/lib/utils.js +18 -17
- package/src/mixins/chart-element.js +54 -31
- package/src/mixins/input-element.js +47 -60
- package/src/mixins/item-resource.js +32 -34
- package/src/mixins/keyboard-element.js +5 -6
- package/src/mixins/update-after-browser.js +1 -4
- package/src/mixins/with-resize-observer.js +13 -23
- package/src/mixins/with-skeleton-attribute.js +48 -54
- package/src/molecules/gv-card-full.js +147 -26
- package/src/molecules/gv-card-list.js +42 -13
- package/src/molecules/gv-card.js +91 -17
- package/src/molecules/gv-category-list.js +17 -6
- package/src/molecules/gv-category.js +103 -23
- package/src/molecules/gv-code.js +143 -81
- package/src/molecules/gv-confirm.js +71 -41
- package/src/molecules/gv-cron-editor.js +389 -143
- package/src/molecules/gv-dropdown-menu.js +46 -14
- package/src/molecules/gv-expandable.js +59 -31
- package/src/molecules/gv-expression-language.js +138 -176
- package/src/molecules/gv-identity-picture.js +65 -42
- package/src/molecules/gv-list.js +134 -42
- package/src/molecules/gv-metrics.js +49 -37
- package/src/molecules/gv-modal.js +95 -28
- package/src/molecules/gv-nav.js +75 -49
- package/src/molecules/gv-option.js +130 -57
- package/src/molecules/gv-plans.js +209 -86
- package/src/molecules/gv-popover.js +177 -57
- package/src/molecules/gv-promote.js +146 -28
- package/src/molecules/gv-rating-list.js +195 -69
- package/src/molecules/gv-rating.js +105 -52
- package/src/molecules/gv-row-expandable.js +11 -5
- package/src/molecules/gv-row.js +147 -21
- package/src/molecules/gv-stats.js +48 -23
- package/src/molecules/gv-stepper.js +187 -43
- package/src/molecules/gv-table.js +309 -199
- package/src/molecules/gv-tree.js +156 -33
- package/src/organisms/gv-documentation.js +128 -45
- package/src/organisms/gv-header.js +195 -37
- package/src/organisms/gv-http-client.js +168 -32
- package/src/organisms/gv-menu.js +158 -37
- package/src/organisms/gv-newsletter-subscription.js +189 -48
- package/src/organisms/gv-pagination.js +77 -49
- package/src/organisms/gv-properties.js +492 -271
- package/src/organisms/gv-resizable-views.js +259 -41
- package/src/organisms/gv-resources.js +275 -168
- package/src/organisms/gv-schema-form-array.js +159 -49
- package/src/organisms/gv-schema-form-control-object.js +73 -59
- package/src/organisms/gv-schema-form-control.js +134 -107
- package/src/organisms/gv-schema-form.js +324 -195
- package/src/organisms/gv-tabs.js +98 -66
- package/src/organisms/gv-user-menu.js +201 -36
- package/src/organisms/gv-vertical-menu.js +61 -20
- package/src/policy-studio/gv-flow-step.js +266 -105
- package/src/policy-studio/gv-flow.js +304 -125
- package/src/policy-studio/gv-policy-studio-menu.js +471 -157
- package/src/policy-studio/gv-policy-studio.js +777 -686
- package/src/styles/empty.js +20 -3
- package/src/styles/input.js +247 -3
- package/src/styles/link.js +16 -3
- package/src/styles/shapes.js +0 -1
- package/src/styles/skeleton.js +37 -3
- package/src/styles/zoom.js +24 -3
- package/src/theme/definition.json +1762 -0
- package/src/theme/gv-theme.js +60 -21
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
import { css, LitElement, html } from 'lit';
|
|
17
|
+
|
|
17
18
|
/**
|
|
18
19
|
* Dropdown menu
|
|
19
20
|
*
|
|
@@ -23,24 +24,51 @@ import { css, LitElement, html } from 'lit';
|
|
|
23
24
|
* @attr {Boolean} open - true, if menu should be open
|
|
24
25
|
* @attr {Boolean} right - true, if actions should at right of container when opened
|
|
25
26
|
*/
|
|
26
|
-
|
|
27
27
|
export class GvDropdownMenu extends LitElement {
|
|
28
28
|
static get properties() {
|
|
29
29
|
return {
|
|
30
|
-
open: {
|
|
31
|
-
|
|
32
|
-
reflect: true
|
|
33
|
-
},
|
|
34
|
-
right: {
|
|
35
|
-
type: Boolean,
|
|
36
|
-
reflect: true
|
|
37
|
-
}
|
|
30
|
+
open: { type: Boolean, reflect: true },
|
|
31
|
+
right: { type: Boolean, reflect: true },
|
|
38
32
|
};
|
|
39
33
|
}
|
|
40
34
|
|
|
41
35
|
static get styles() {
|
|
42
|
-
return [
|
|
43
|
-
|
|
36
|
+
return [
|
|
37
|
+
// language=CSS
|
|
38
|
+
css`
|
|
39
|
+
:host {
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
display: block;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.actions {
|
|
45
|
+
position: absolute;
|
|
46
|
+
background-color: white;
|
|
47
|
+
transition: all 300ms ease-in-out;
|
|
48
|
+
border-style: solid;
|
|
49
|
+
border-color: #bfbfbf;
|
|
50
|
+
border-width: var(--gv-dropdown-menu--bdw, 1px 1px 1px 1px);
|
|
51
|
+
z-index: 201;
|
|
52
|
+
padding: var(--gv-dropdown-menu--p, 0.5rem);
|
|
53
|
+
visibility: hidden;
|
|
54
|
+
opacity: 0;
|
|
55
|
+
display: grid;
|
|
56
|
+
grid-gap: var(--gv-dropdown-menu--gg, 0.2rem);
|
|
57
|
+
bottom: 0;
|
|
58
|
+
top: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
:host([open]) .actions {
|
|
62
|
+
opacity: 1;
|
|
63
|
+
visibility: visible;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([right]) .actions {
|
|
68
|
+
right: 0px;
|
|
69
|
+
}
|
|
70
|
+
`,
|
|
71
|
+
];
|
|
44
72
|
}
|
|
45
73
|
|
|
46
74
|
constructor() {
|
|
@@ -76,9 +104,13 @@ export class GvDropdownMenu extends LitElement {
|
|
|
76
104
|
}
|
|
77
105
|
|
|
78
106
|
render() {
|
|
79
|
-
return html`<div class="box">
|
|
107
|
+
return html`<div class="box">
|
|
108
|
+
<slot @click="${this.toggle}"></slot>
|
|
109
|
+
<div class="actions">
|
|
110
|
+
<slot name="action" class="action"></slot>
|
|
111
|
+
</div>
|
|
112
|
+
</div>`;
|
|
80
113
|
}
|
|
81
|
-
|
|
82
114
|
}
|
|
115
|
+
|
|
83
116
|
window.customElements.define('gv-dropdown-menu', GvDropdownMenu);
|
|
84
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL21vbGVjdWxlcy9ndi1kcm9wZG93bi1tZW51LmpzIl0sIm5hbWVzIjpbImNzcyIsIkxpdEVsZW1lbnQiLCJodG1sIiwiR3ZEcm9wZG93bk1lbnUiLCJwcm9wZXJ0aWVzIiwib3BlbiIsInR5cGUiLCJCb29sZWFuIiwicmVmbGVjdCIsInJpZ2h0Iiwic3R5bGVzIiwiY29uc3RydWN0b3IiLCJfaGFuZGxlRG9jdW1lbnRDbGljayIsIl9vbkRvY3VtZW50Q2xpY2siLCJiaW5kIiwiY29ubmVjdGVkQ2FsbGJhY2siLCJkaXNjb25uZWN0ZWRDYWxsYmFjayIsIndpbmRvdyIsInJlbW92ZUV2ZW50TGlzdGVuZXIiLCJ0b2dnbGUiLCJzZXRUaW1lb3V0IiwiYWRkRXZlbnRMaXN0ZW5lciIsInJlbmRlciIsImN1c3RvbUVsZW1lbnRzIiwiZGVmaW5lIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTQSxHQUFULEVBQWNDLFVBQWQsRUFBMEJDLElBQTFCLFFBQXNDLEtBQXRDO0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUNBLE9BQU8sTUFBTUMsY0FBTixTQUE2QkYsVUFBN0IsQ0FBd0M7QUFDeEIsYUFBVkcsVUFBVSxHQUFHO0FBQ3RCLFdBQU87QUFDTEMsTUFBQUEsSUFBSSxFQUFFO0FBQUVDLFFBQUFBLElBQUksRUFBRUMsT0FBUjtBQUFpQkMsUUFBQUEsT0FBTyxFQUFFO0FBQTFCLE9BREQ7QUFFTEMsTUFBQUEsS0FBSyxFQUFFO0FBQUVILFFBQUFBLElBQUksRUFBRUMsT0FBUjtBQUFpQkMsUUFBQUEsT0FBTyxFQUFFO0FBQTFCO0FBRkYsS0FBUDtBQUlEOztBQUVnQixhQUFORSxNQUFNLEdBQUc7QUFDbEIsV0FBTyxDQUNMO0FBQ0FWLElBQUFBLEdBQUcseWRBRkUsQ0FBUDtBQW9DRDs7QUFFRFcsRUFBQUEsV0FBVyxHQUFHO0FBQ1o7QUFDQSxTQUFLTixJQUFMLEdBQVksS0FBWjtBQUNBLFNBQUtJLEtBQUwsR0FBYSxLQUFiO0FBQ0EsU0FBS0csb0JBQUwsR0FBNEIsS0FBS0MsZ0JBQUwsQ0FBc0JDLElBQXRCLENBQTJCLElBQTNCLENBQTVCO0FBQ0Q7O0FBRURDLEVBQUFBLGlCQUFpQixHQUFHO0FBQ2xCLFVBQU1BLGlCQUFOO0FBQ0Q7O0FBRURDLEVBQUFBLG9CQUFvQixHQUFHO0FBQ3JCQyxJQUFBQSxNQUFNLENBQUNDLG1CQUFQLENBQTJCLE9BQTNCLEVBQW9DLEtBQUtOLG9CQUF6QztBQUNBLFVBQU1JLG9CQUFOO0FBQ0Q7O0FBRURILEVBQUFBLGdCQUFnQixHQUFHO0FBQ2pCLFNBQUtSLElBQUwsR0FBWSxLQUFaO0FBQ0FZLElBQUFBLE1BQU0sQ0FBQ0MsbUJBQVAsQ0FBMkIsT0FBM0IsRUFBb0MsS0FBS04sb0JBQXpDO0FBQ0Q7O0FBRURPLEVBQUFBLE1BQU0sR0FBRztBQUNQLFNBQUtkLElBQUwsR0FBWSxDQUFDLEtBQUtBLElBQWxCO0FBQ0FlLElBQUFBLFVBQVUsQ0FBQyxNQUFNO0FBQ2YsVUFBSSxLQUFLZixJQUFULEVBQWU7QUFDYlksUUFBQUEsTUFBTSxDQUFDSSxnQkFBUCxDQUF3QixPQUF4QixFQUFpQyxLQUFLVCxvQkFBdEM7QUFDRCxPQUZELE1BRU87QUFDTEssUUFBQUEsTUFBTSxDQUFDQyxtQkFBUCxDQUEyQixPQUEzQixFQUFvQyxLQUFLTixvQkFBekM7QUFDRDtBQUNGLEtBTlMsRUFNUCxDQU5PLENBQVY7QUFPRDs7QUFFRFUsRUFBQUEsTUFBTSxHQUFHO0FBQ1AsV0FBT3BCLElBQUksbUNBQ08sS0FBS2lCLE1BRFosMEZBQVg7QUFNRDs7QUF0RjRDO0FBeUYvQ0YsTUFBTSxDQUFDTSxjQUFQLENBQXNCQyxNQUF0QixDQUE2QixrQkFBN0IsRUFBaURyQixjQUFqRCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTUgVGhlIEdyYXZpdGVlIHRlYW0gKGh0dHA6Ly9ncmF2aXRlZS5pbylcbiAqXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG5pbXBvcnQgeyBjc3MsIExpdEVsZW1lbnQsIGh0bWwgfSBmcm9tICdsaXQnO1xuXG4vKipcbiAqIERyb3Bkb3duIG1lbnVcbiAqXG4gKiBAc2xvdCAtIFRoZSBlbGVtZW50IHdoaWNoIG11c3QgYmUgY2xpY2tlZCB0byBvcGVuIHRoZSBhY3Rpb25zXG4gKiBAc2xvdCBhY3Rpb25zIC0gRWxlbWVudCB0aGF0IGNvbnRhaW5zIGFjdGlvbnNcbiAqXG4gKiBAYXR0ciB7Qm9vbGVhbn0gb3BlbiAtIHRydWUsIGlmIG1lbnUgc2hvdWxkIGJlIG9wZW5cbiAqIEBhdHRyIHtCb29sZWFufSByaWdodCAtIHRydWUsIGlmIGFjdGlvbnMgc2hvdWxkIGF0IHJpZ2h0IG9mIGNvbnRhaW5lciB3aGVuIG9wZW5lZFxuICovXG5leHBvcnQgY2xhc3MgR3ZEcm9wZG93bk1lbnUgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIGdldCBwcm9wZXJ0aWVzKCkge1xuICAgIHJldHVybiB7XG4gICAgICBvcGVuOiB7IHR5cGU6IEJvb2xlYW4sIHJlZmxlY3Q6IHRydWUgfSxcbiAgICAgIHJpZ2h0OiB7IHR5cGU6IEJvb2xlYW4sIHJlZmxlY3Q6IHRydWUgfSxcbiAgICB9O1xuICB9XG5cbiAgc3RhdGljIGdldCBzdHlsZXMoKSB7XG4gICAgcmV0dXJuIFtcbiAgICAgIC8vIGxhbmd1YWdlPUNTU1xuICAgICAgY3NzYFxuICAgICAgICA6aG9zdCB7XG4gICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgfVxuXG4gICAgICAgIC5hY3Rpb25zIHtcbiAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgICAgICAgdHJhbnNpdGlvbjogYWxsIDMwMG1zIGVhc2UtaW4tb3V0O1xuICAgICAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgICAgICAgYm9yZGVyLWNvbG9yOiAjYmZiZmJmO1xuICAgICAgICAgIGJvcmRlci13aWR0aDogdmFyKC0tZ3YtZHJvcGRvd24tbWVudS0tYmR3LCAxcHggMXB4IDFweCAxcHgpO1xuICAgICAgICAgIHotaW5kZXg6IDIwMTtcbiAgICAgICAgICBwYWRkaW5nOiB2YXIoLS1ndi1kcm9wZG93bi1tZW51LS1wLCAwLjVyZW0pO1xuICAgICAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgICAgICAgZ3JpZC1nYXA6IHZhcigtLWd2LWRyb3Bkb3duLW1lbnUtLWdnLCAwLjJyZW0pO1xuICAgICAgICAgIGJvdHRvbTogMDtcbiAgICAgICAgICB0b3A6IDA7XG4gICAgICAgIH1cblxuICAgICAgICA6aG9zdChbb3Blbl0pIC5hY3Rpb25zIHtcbiAgICAgICAgICBvcGFjaXR5OiAxO1xuICAgICAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICB9XG5cbiAgICAgICAgOmhvc3QoW3JpZ2h0XSkgLmFjdGlvbnMge1xuICAgICAgICAgIHJpZ2h0OiAwcHg7XG4gICAgICAgIH1cbiAgICAgIGAsXG4gICAgXTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gICAgdGhpcy5yaWdodCA9IGZhbHNlO1xuICAgIHRoaXMuX2hhbmRsZURvY3VtZW50Q2xpY2sgPSB0aGlzLl9vbkRvY3VtZW50Q2xpY2suYmluZCh0aGlzKTtcbiAgfVxuXG4gIGNvbm5lY3RlZENhbGxiYWNrKCkge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gIH1cblxuICBkaXNjb25uZWN0ZWRDYWxsYmFjaygpIHtcbiAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLl9oYW5kbGVEb2N1bWVudENsaWNrKTtcbiAgICBzdXBlci5kaXNjb25uZWN0ZWRDYWxsYmFjaygpO1xuICB9XG5cbiAgX29uRG9jdW1lbnRDbGljaygpIHtcbiAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLl9oYW5kbGVEb2N1bWVudENsaWNrKTtcbiAgfVxuXG4gIHRvZ2dsZSgpIHtcbiAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgaWYgKHRoaXMub3Blbikge1xuICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLl9oYW5kbGVEb2N1bWVudENsaWNrKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMuX2hhbmRsZURvY3VtZW50Q2xpY2spO1xuICAgICAgfVxuICAgIH0sIDApO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYDxkaXYgY2xhc3M9XCJib3hcIj5cbiAgICAgIDxzbG90IEBjbGljaz1cIiR7dGhpcy50b2dnbGV9XCI+PC9zbG90PlxuICAgICAgPGRpdiBjbGFzcz1cImFjdGlvbnNcIj5cbiAgICAgICAgPHNsb3QgbmFtZT1cImFjdGlvblwiIGNsYXNzPVwiYWN0aW9uXCI+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+YDtcbiAgfVxufVxuXG53aW5kb3cuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdndi1kcm9wZG93bi1tZW51JywgR3ZEcm9wZG93bk1lbnUpO1xuIl19
|
|
@@ -17,6 +17,7 @@ import { css, html, LitElement } from 'lit';
|
|
|
17
17
|
import { link } from '../styles/link';
|
|
18
18
|
import { classMap } from 'lit/directives/class-map';
|
|
19
19
|
import { dispatchCustomEvent } from '../lib/events';
|
|
20
|
+
|
|
20
21
|
/**
|
|
21
22
|
* Expandable component
|
|
22
23
|
*
|
|
@@ -29,7 +30,6 @@ import { dispatchCustomEvent } from '../lib/events';
|
|
|
29
30
|
*
|
|
30
31
|
* @cssprop {String} [--gv-expandable--bdb=var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684)] - Border bottom
|
|
31
32
|
*/
|
|
32
|
-
|
|
33
33
|
export class GvExpandable extends LitElement {
|
|
34
34
|
constructor() {
|
|
35
35
|
super();
|
|
@@ -41,54 +41,82 @@ export class GvExpandable extends LitElement {
|
|
|
41
41
|
|
|
42
42
|
static get properties() {
|
|
43
43
|
return {
|
|
44
|
-
open: {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
icon: {
|
|
49
|
-
type: String
|
|
50
|
-
},
|
|
51
|
-
iconOpened: {
|
|
52
|
-
type: String,
|
|
53
|
-
attribute: 'icon-opened'
|
|
54
|
-
},
|
|
55
|
-
clickable: {
|
|
56
|
-
type: Boolean
|
|
57
|
-
}
|
|
44
|
+
open: { type: Boolean, reflect: true },
|
|
45
|
+
icon: { type: String },
|
|
46
|
+
iconOpened: { type: String, attribute: 'icon-opened' },
|
|
47
|
+
clickable: { type: Boolean },
|
|
58
48
|
};
|
|
59
49
|
}
|
|
60
50
|
|
|
61
51
|
static get styles() {
|
|
62
|
-
return [
|
|
63
|
-
|
|
52
|
+
return [
|
|
53
|
+
link,
|
|
54
|
+
// language=CSS
|
|
55
|
+
css`
|
|
56
|
+
:host {
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.box {
|
|
61
|
+
padding: 0.2rem;
|
|
62
|
+
line-height: 23px;
|
|
63
|
+
border-bottom: var(--gv-expandable--bdb, thin solid var(--gv-theme-color, #5a7684));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host([open]) .details {
|
|
67
|
+
visibility: visible;
|
|
68
|
+
opacity: 1;
|
|
69
|
+
height: auto;
|
|
70
|
+
overflow: visible;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.details {
|
|
74
|
+
display: block;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
opacity: 0;
|
|
77
|
+
visibility: hidden;
|
|
78
|
+
transition: all 150ms ease-in-out;
|
|
79
|
+
height: 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.summary {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: row;
|
|
85
|
+
align-content: center;
|
|
86
|
+
justify-content: space-between;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.expand {
|
|
90
|
+
align-self: center;
|
|
91
|
+
margin-left: 5px;
|
|
92
|
+
--gv-icon--s: 16px;
|
|
93
|
+
}
|
|
94
|
+
`,
|
|
95
|
+
];
|
|
64
96
|
}
|
|
65
97
|
|
|
66
98
|
_onClick(event) {
|
|
67
99
|
if (!this.clickable) {
|
|
68
100
|
const summary = this.shadowRoot.querySelector('.summary');
|
|
69
|
-
|
|
70
101
|
if (!summary.contains(event.target) && event.target.slot !== 'summary') {
|
|
71
102
|
return;
|
|
72
103
|
}
|
|
73
104
|
}
|
|
74
|
-
|
|
75
105
|
this.open = !this.open;
|
|
76
|
-
dispatchCustomEvent(this, 'toggle', {
|
|
77
|
-
open: this.open
|
|
78
|
-
});
|
|
106
|
+
dispatchCustomEvent(this, 'toggle', { open: this.open });
|
|
79
107
|
}
|
|
80
108
|
|
|
81
109
|
render() {
|
|
82
110
|
const icon = this.open ? this.iconOpened : this.icon;
|
|
83
|
-
return html`<div class="${classMap({
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
})}" @click="${this._onClick}"> <div class="${classMap({
|
|
87
|
-
summary: true,
|
|
88
|
-
link: !this.clickable
|
|
89
|
-
})}"> <slot name="summary"></slot> <gv-icon shape="${icon}" class="expand"></gv-icon> </div> <slot name="details" class="details"></slot> </div>`;
|
|
90
|
-
}
|
|
111
|
+
return html`<div class="${classMap({ box: true, link: this.clickable })}" @click=${this._onClick}>
|
|
112
|
+
<div class="${classMap({ summary: true, link: !this.clickable })}">
|
|
113
|
+
<slot name="summary"></slot>
|
|
91
114
|
|
|
115
|
+
<gv-icon shape="${icon}" class="expand"></gv-icon>
|
|
116
|
+
</div>
|
|
117
|
+
<slot name="details" class="details"></slot>
|
|
118
|
+
</div>`;
|
|
119
|
+
}
|
|
92
120
|
}
|
|
121
|
+
|
|
93
122
|
window.customElements.define('gv-expandable', GvExpandable);
|
|
94
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4vbm9kZV9tb2R1bGVzL0BncmF2aXRlZS91aS1jb21wb25lbnRzL21vbGVjdWxlcy9ndi1leHBhbmRhYmxlLmpzIl0sIm5hbWVzIjpbImNzcyIsImh0bWwiLCJMaXRFbGVtZW50IiwibGluayIsImNsYXNzTWFwIiwiZGlzcGF0Y2hDdXN0b21FdmVudCIsIkd2RXhwYW5kYWJsZSIsImNvbnN0cnVjdG9yIiwib3BlbiIsImljb24iLCJpY29uT3BlbmVkIiwiY2xpY2thYmxlIiwicHJvcGVydGllcyIsInR5cGUiLCJCb29sZWFuIiwicmVmbGVjdCIsIlN0cmluZyIsImF0dHJpYnV0ZSIsInN0eWxlcyIsIl9vbkNsaWNrIiwiZXZlbnQiLCJzdW1tYXJ5Iiwic2hhZG93Um9vdCIsInF1ZXJ5U2VsZWN0b3IiLCJjb250YWlucyIsInRhcmdldCIsInNsb3QiLCJyZW5kZXIiLCJib3giLCJ3aW5kb3ciLCJjdXN0b21FbGVtZW50cyIsImRlZmluZSJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsU0FBU0EsR0FBVCxFQUFjQyxJQUFkLEVBQW9CQyxVQUFwQixRQUFzQyxLQUF0QztBQUNBLFNBQVNDLElBQVQsUUFBcUIsZ0JBQXJCO0FBQ0EsU0FBU0MsUUFBVCxRQUF5QiwwQkFBekI7QUFDQSxTQUFTQyxtQkFBVCxRQUFvQyxlQUFwQztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFDQSxPQUFPLE1BQU1DLFlBQU4sU0FBMkJKLFVBQTNCLENBQXNDO0FBQzNDSyxFQUFBQSxXQUFXLEdBQUc7QUFDWjtBQUNBLFNBQUtDLElBQUwsR0FBWSxLQUFaO0FBQ0EsU0FBS0MsSUFBTCxHQUFZLHVCQUFaO0FBQ0EsU0FBS0MsVUFBTCxHQUFrQix1QkFBbEI7QUFDQSxTQUFLQyxTQUFMLEdBQWlCLEtBQWpCO0FBQ0Q7O0FBRW9CLGFBQVZDLFVBQVUsR0FBRztBQUN0QixXQUFPO0FBQ0xKLE1BQUFBLElBQUksRUFBRTtBQUFFSyxRQUFBQSxJQUFJLEVBQUVDLE9BQVI7QUFBaUJDLFFBQUFBLE9BQU8sRUFBRTtBQUExQixPQUREO0FBRUxOLE1BQUFBLElBQUksRUFBRTtBQUFFSSxRQUFBQSxJQUFJLEVBQUVHO0FBQVIsT0FGRDtBQUdMTixNQUFBQSxVQUFVLEVBQUU7QUFBRUcsUUFBQUEsSUFBSSxFQUFFRyxNQUFSO0FBQWdCQyxRQUFBQSxTQUFTLEVBQUU7QUFBM0IsT0FIUDtBQUlMTixNQUFBQSxTQUFTLEVBQUU7QUFBRUUsUUFBQUEsSUFBSSxFQUFFQztBQUFSO0FBSk4sS0FBUDtBQU1EOztBQUVnQixhQUFOSSxNQUFNLEdBQUc7QUFDbEIsV0FBTyxDQUNMZixJQURLLEVBRUw7QUFDQUgsSUFBQUEsR0FBRyx5ZUFIRSxDQUFQO0FBNENEOztBQUVEbUIsRUFBQUEsUUFBUSxDQUFDQyxLQUFELEVBQVE7QUFDZCxRQUFJLENBQUMsS0FBS1QsU0FBVixFQUFxQjtBQUNuQixZQUFNVSxPQUFPLEdBQUcsS0FBS0MsVUFBTCxDQUFnQkMsYUFBaEIsQ0FBOEIsVUFBOUIsQ0FBaEI7O0FBQ0EsVUFBSSxDQUFDRixPQUFPLENBQUNHLFFBQVIsQ0FBaUJKLEtBQUssQ0FBQ0ssTUFBdkIsQ0FBRCxJQUFtQ0wsS0FBSyxDQUFDSyxNQUFOLENBQWFDLElBQWIsS0FBc0IsU0FBN0QsRUFBd0U7QUFDdEU7QUFDRDtBQUNGOztBQUNELFNBQUtsQixJQUFMLEdBQVksQ0FBQyxLQUFLQSxJQUFsQjtBQUNBSCxJQUFBQSxtQkFBbUIsQ0FBQyxJQUFELEVBQU8sUUFBUCxFQUFpQjtBQUFFRyxNQUFBQSxJQUFJLEVBQUUsS0FBS0E7QUFBYixLQUFqQixDQUFuQjtBQUNEOztBQUVEbUIsRUFBQUEsTUFBTSxHQUFHO0FBQ1AsVUFBTWxCLElBQUksR0FBRyxLQUFLRCxJQUFMLEdBQVksS0FBS0UsVUFBakIsR0FBOEIsS0FBS0QsSUFBaEQ7QUFDQSxXQUFPUixJQUFJLGVBQWVHLFFBQVEsQ0FBQztBQUFFd0IsTUFBQUEsR0FBRyxFQUFFLElBQVA7QUFBYXpCLE1BQUFBLElBQUksRUFBRSxLQUFLUTtBQUF4QixLQUFELENBQXZCLGFBQXdFLEtBQUtRLFFBQTdFLGtCQUNLZixRQUFRLENBQUM7QUFBRWlCLE1BQUFBLE9BQU8sRUFBRSxJQUFYO0FBQWlCbEIsTUFBQUEsSUFBSSxFQUFFLENBQUMsS0FBS1E7QUFBN0IsS0FBRCxDQURiLG1EQUlXRixJQUpYLHdGQUFYO0FBUUQ7O0FBdEYwQztBQXlGN0NvQixNQUFNLENBQUNDLGNBQVAsQ0FBc0JDLE1BQXRCLENBQTZCLGVBQTdCLEVBQThDekIsWUFBOUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChDKSAyMDE1IFRoZSBHcmF2aXRlZSB0ZWFtIChodHRwOi8vZ3Jhdml0ZWUuaW8pXG4gKlxuICogTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuaW1wb3J0IHsgY3NzLCBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGxpbmsgfSBmcm9tICcuLi9zdHlsZXMvbGluayc7XG5pbXBvcnQgeyBjbGFzc01hcCB9IGZyb20gJ2xpdC9kaXJlY3RpdmVzL2NsYXNzLW1hcCc7XG5pbXBvcnQgeyBkaXNwYXRjaEN1c3RvbUV2ZW50IH0gZnJvbSAnLi4vbGliL2V2ZW50cyc7XG5cbi8qKlxuICogRXhwYW5kYWJsZSBjb21wb25lbnRcbiAqXG4gKiBAZmlyZXMgZ3YtZXhwYW5kYWJsZTp0b2dnbGUgLSBXaGVuIHVzZXIgdG9nZ2xlXG4gKlxuICogQGF0dHIge0Jvb2xlYW59IG9wZW4gLSBXaGVuIHRydWUsIG9wZW5zIGRldGFpbHMgYnkgZGVmYXVsdFxuICogQGF0dHIge1N0cmluZ30gaWNvbiAtIEFuIGljb24gdG8gc2hvdyBvcGVuIGZlYXR1cmVcbiAqIEBhdHRyIHtTdHJpbmd9IGljb24tb3BlbmVkIC0gIEFuIGljb24gdG8gc2hvdyBjbG9zZSBmZWF0dXJlXG4gKiBAYXR0ciB7Qm9vbGVhbn0gY2xpY2thYmxlIC0gV2hlbiB0cnVlLCBkZXRhaWxzIGlzIGNsaWNrYWJsZSBsaWtlIHN1bW1hcnlcbiAqXG4gKiBAY3NzcHJvcCB7U3RyaW5nfSBbLS1ndi1leHBhbmRhYmxlLS1iZGI9dmFyKC0tZ3YtZXhwYW5kYWJsZS0tYmRiLCB0aGluIHNvbGlkIHZhcigtLWd2LXRoZW1lLWNvbG9yLCAjNWE3Njg0KV0gLSBCb3JkZXIgYm90dG9tXG4gKi9cbmV4cG9ydCBjbGFzcyBHdkV4cGFuZGFibGUgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB0aGlzLmljb24gPSAnbmF2aWdhdGlvbjphbmdsZS1sZWZ0JztcbiAgICB0aGlzLmljb25PcGVuZWQgPSAnbmF2aWdhdGlvbjphbmdsZS1kb3duJztcbiAgICB0aGlzLmNsaWNrYWJsZSA9IGZhbHNlO1xuICB9XG5cbiAgc3RhdGljIGdldCBwcm9wZXJ0aWVzKCkge1xuICAgIHJldHVybiB7XG4gICAgICBvcGVuOiB7IHR5cGU6IEJvb2xlYW4sIHJlZmxlY3Q6IHRydWUgfSxcbiAgICAgIGljb246IHsgdHlwZTogU3RyaW5nIH0sXG4gICAgICBpY29uT3BlbmVkOiB7IHR5cGU6IFN0cmluZywgYXR0cmlidXRlOiAnaWNvbi1vcGVuZWQnIH0sXG4gICAgICBjbGlja2FibGU6IHsgdHlwZTogQm9vbGVhbiB9LFxuICAgIH07XG4gIH1cblxuICBzdGF0aWMgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4gW1xuICAgICAgbGluayxcbiAgICAgIC8vIGxhbmd1YWdlPUNTU1xuICAgICAgY3NzYFxuICAgICAgICA6aG9zdCB7XG4gICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgfVxuXG4gICAgICAgIC5ib3gge1xuICAgICAgICAgIHBhZGRpbmc6IDAuMnJlbTtcbiAgICAgICAgICBsaW5lLWhlaWdodDogMjNweDtcbiAgICAgICAgICBib3JkZXItYm90dG9tOiB2YXIoLS1ndi1leHBhbmRhYmxlLS1iZGIsIHRoaW4gc29saWQgdmFyKC0tZ3YtdGhlbWUtY29sb3IsICM1YTc2ODQpKTtcbiAgICAgICAgfVxuXG4gICAgICAgIDpob3N0KFtvcGVuXSkgLmRldGFpbHMge1xuICAgICAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gICAgICAgICAgb3BhY2l0eTogMTtcbiAgICAgICAgICBoZWlnaHQ6IGF1dG87XG4gICAgICAgICAgb3ZlcmZsb3c6IHZpc2libGU7XG4gICAgICAgIH1cblxuICAgICAgICAuZGV0YWlscyB7XG4gICAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICAgIHZpc2liaWxpdHk6IGhpZGRlbjtcbiAgICAgICAgICB0cmFuc2l0aW9uOiBhbGwgMTUwbXMgZWFzZS1pbi1vdXQ7XG4gICAgICAgICAgaGVpZ2h0OiAwO1xuICAgICAgICB9XG5cbiAgICAgICAgLnN1bW1hcnkge1xuICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICAgICAgICBhbGlnbi1jb250ZW50OiBjZW50ZXI7XG4gICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICB9XG5cbiAgICAgICAgLmV4cGFuZCB7XG4gICAgICAgICAgYWxpZ24tc2VsZjogY2VudGVyO1xuICAgICAgICAgIG1hcmdpbi1sZWZ0OiA1cHg7XG4gICAgICAgICAgLS1ndi1pY29uLS1zOiAxNnB4O1xuICAgICAgICB9XG4gICAgICBgLFxuICAgIF07XG4gIH1cblxuICBfb25DbGljayhldmVudCkge1xuICAgIGlmICghdGhpcy5jbGlja2FibGUpIHtcbiAgICAgIGNvbnN0IHN1bW1hcnkgPSB0aGlzLnNoYWRvd1Jvb3QucXVlcnlTZWxlY3RvcignLnN1bW1hcnknKTtcbiAgICAgIGlmICghc3VtbWFyeS5jb250YWlucyhldmVudC50YXJnZXQpICYmIGV2ZW50LnRhcmdldC5zbG90ICE9PSAnc3VtbWFyeScpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuICAgIH1cbiAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgIGRpc3BhdGNoQ3VzdG9tRXZlbnQodGhpcywgJ3RvZ2dsZScsIHsgb3BlbjogdGhpcy5vcGVuIH0pO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IGljb24gPSB0aGlzLm9wZW4gPyB0aGlzLmljb25PcGVuZWQgOiB0aGlzLmljb247XG4gICAgcmV0dXJuIGh0bWxgPGRpdiBjbGFzcz1cIiR7Y2xhc3NNYXAoeyBib3g6IHRydWUsIGxpbms6IHRoaXMuY2xpY2thYmxlIH0pfVwiIEBjbGljaz0ke3RoaXMuX29uQ2xpY2t9PlxuICAgICAgPGRpdiBjbGFzcz1cIiR7Y2xhc3NNYXAoeyBzdW1tYXJ5OiB0cnVlLCBsaW5rOiAhdGhpcy5jbGlja2FibGUgfSl9XCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJzdW1tYXJ5XCI+PC9zbG90PlxuXG4gICAgICAgIDxndi1pY29uIHNoYXBlPVwiJHtpY29ufVwiIGNsYXNzPVwiZXhwYW5kXCI+PC9ndi1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8c2xvdCBuYW1lPVwiZGV0YWlsc1wiIGNsYXNzPVwiZGV0YWlsc1wiPjwvc2xvdD5cbiAgICA8L2Rpdj5gO1xuICB9XG59XG5cbndpbmRvdy5jdXN0b21FbGVtZW50cy5kZWZpbmUoJ2d2LWV4cGFuZGFibGUnLCBHdkV4cGFuZGFibGUpO1xuIl19
|