@gravitee/ui-components 3.25.1 → 3.25.3-typescript-ad6021f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/CHANGELOG.md +1292 -0
  2. package/LICENSE.txt +202 -0
  3. package/README.md +195 -0
  4. package/package.json +17 -4
  5. package/src/.eslintrc.js +19 -0
  6. package/src/atoms/gv-autocomplete.js +156 -132
  7. package/src/atoms/gv-button.js +248 -73
  8. package/src/atoms/gv-checkbox.js +103 -45
  9. package/src/atoms/gv-date-picker-calendar.js +393 -312
  10. package/src/atoms/gv-date-picker-cell.js +81 -57
  11. package/src/atoms/gv-date-picker.js +319 -180
  12. package/src/atoms/gv-file-upload.js +195 -85
  13. package/src/atoms/gv-icon.js +34 -13
  14. package/src/atoms/gv-image.js +66 -31
  15. package/src/atoms/gv-input-message.js +37 -12
  16. package/src/atoms/gv-input.js +148 -117
  17. package/src/atoms/gv-link.js +125 -47
  18. package/src/atoms/gv-message.js +69 -18
  19. package/src/atoms/gv-metric.js +68 -19
  20. package/src/atoms/gv-relative-time.js +38 -67
  21. package/src/atoms/gv-select-native.js +215 -96
  22. package/src/atoms/gv-select.js +230 -110
  23. package/src/atoms/gv-spinner.js +26 -5
  24. package/src/atoms/gv-state.js +66 -25
  25. package/src/atoms/gv-switch.js +160 -40
  26. package/src/atoms/gv-tag.js +78 -26
  27. package/src/atoms/gv-text.js +83 -22
  28. package/src/charts/gv-chart-bar.js +18 -22
  29. package/src/charts/gv-chart-gauge.js +31 -28
  30. package/src/charts/gv-chart-histogram.js +10 -18
  31. package/src/charts/gv-chart-line.js +59 -70
  32. package/src/charts/gv-chart-map.js +42 -44
  33. package/src/charts/gv-chart-pie.js +14 -18
  34. package/src/index.js +0 -1
  35. package/src/lib/cron-expression.js +35 -40
  36. package/src/lib/date.js +1 -10
  37. package/src/lib/events.js +1 -3
  38. package/src/lib/http-client-schema-form.js +12 -13
  39. package/src/lib/http.js +56 -57
  40. package/src/lib/i18n.js +22 -30
  41. package/src/lib/item.js +12 -13
  42. package/src/lib/properties.js +42 -77
  43. package/src/lib/schema-form.js +5 -4
  44. package/src/lib/studio.js +60 -13
  45. package/src/lib/style.js +8 -8
  46. package/src/lib/text-format.js +7 -14
  47. package/src/lib/theme.js +5 -8
  48. package/src/lib/utils.js +18 -17
  49. package/src/mixins/chart-element.js +54 -31
  50. package/src/mixins/input-element.js +47 -60
  51. package/src/mixins/item-resource.js +32 -34
  52. package/src/mixins/keyboard-element.js +5 -6
  53. package/src/mixins/update-after-browser.js +1 -4
  54. package/src/mixins/with-resize-observer.js +13 -23
  55. package/src/mixins/with-skeleton-attribute.js +48 -54
  56. package/src/molecules/gv-card-full.js +147 -26
  57. package/src/molecules/gv-card-list.js +42 -13
  58. package/src/molecules/gv-card.js +91 -17
  59. package/src/molecules/gv-category-list.js +17 -6
  60. package/src/molecules/gv-category.js +103 -23
  61. package/src/molecules/gv-code.js +142 -80
  62. package/src/molecules/gv-confirm.js +71 -41
  63. package/src/molecules/gv-cron-editor.js +389 -143
  64. package/src/molecules/gv-dropdown-menu.js +46 -14
  65. package/src/molecules/gv-expandable.js +59 -31
  66. package/src/molecules/gv-expression-language.js +138 -176
  67. package/src/molecules/gv-identity-picture.js +66 -43
  68. package/src/molecules/gv-list.js +134 -42
  69. package/src/molecules/gv-metrics.js +49 -37
  70. package/src/molecules/gv-modal.js +95 -28
  71. package/src/molecules/gv-nav.js +75 -49
  72. package/src/molecules/gv-option.js +130 -57
  73. package/src/molecules/gv-plans.js +209 -86
  74. package/src/molecules/gv-popover.js +177 -57
  75. package/src/molecules/gv-promote.js +146 -28
  76. package/src/molecules/gv-rating-list.js +195 -69
  77. package/src/molecules/gv-rating.js +105 -52
  78. package/src/molecules/gv-row-expandable.js +11 -5
  79. package/src/molecules/gv-row.js +147 -21
  80. package/src/molecules/gv-stats.js +48 -23
  81. package/src/molecules/gv-stepper.js +187 -43
  82. package/src/molecules/gv-table.js +309 -199
  83. package/src/molecules/gv-tree.js +156 -33
  84. package/src/organisms/gv-documentation.js +127 -44
  85. package/src/organisms/gv-header.js +195 -37
  86. package/src/organisms/gv-http-client.js +168 -32
  87. package/src/organisms/gv-menu.js +158 -37
  88. package/src/organisms/gv-newsletter-subscription.js +189 -48
  89. package/src/organisms/gv-pagination.js +77 -49
  90. package/src/organisms/gv-properties.js +492 -271
  91. package/src/organisms/gv-resizable-views.js +259 -41
  92. package/src/organisms/gv-resources.js +275 -168
  93. package/src/organisms/gv-schema-form-array.js +159 -49
  94. package/src/organisms/gv-schema-form-control-object.js +73 -59
  95. package/src/organisms/gv-schema-form-control.js +134 -107
  96. package/src/organisms/gv-schema-form.js +313 -208
  97. package/src/organisms/gv-tabs.js +98 -66
  98. package/src/organisms/gv-user-menu.js +201 -36
  99. package/src/organisms/gv-vertical-menu.js +61 -20
  100. package/src/policy-studio/gv-flow-step.js +265 -105
  101. package/src/policy-studio/gv-flow.js +304 -125
  102. package/src/policy-studio/gv-policy-studio-menu.js +471 -157
  103. package/src/policy-studio/gv-policy-studio.js +774 -710
  104. package/src/styles/empty.js +20 -3
  105. package/src/styles/input.js +247 -3
  106. package/src/styles/link.js +16 -3
  107. package/src/styles/shapes.js +0 -1
  108. package/src/styles/skeleton.js +37 -3
  109. package/src/styles/zoom.js +24 -3
  110. package/src/theme/definition.json +1762 -0
  111. 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
- type: Boolean,
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 [// language=CSS
43
- css`:host{box-sizing:border-box;display:block}.actions{position:absolute;background-color:#fff;transition:all .3s ease-in-out;border-style:solid;border-color:#bfbfbf;border-width:var(--gv-dropdown-menu--bdw,1px 1px 1px 1px);z-index:201;padding:var(--gv-dropdown-menu--p,.5rem);visibility:hidden;opacity:0;display:grid;grid-gap:var(--gv-dropdown-menu--gg,.2rem);bottom:0;top:0}:host([open]) .actions{opacity:1;visibility:visible;cursor:pointer}:host([right]) .actions{right:0}`];
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"> <slot @click="${this.toggle}"></slot> <div class="actions"> <slot name="action" class="action"></slot> </div> </div>`;
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
- type: Boolean,
46
- reflect: true
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 [link, // language=CSS
63
- css`:host{box-sizing:border-box}.box{padding:.2rem;line-height:23px;border-bottom:var(--gv-expandable--bdb,thin solid var(--gv-theme-color,#5a7684))}:host([open]) .details{visibility:visible;opacity:1;height:auto;overflow:visible}.details{display:block;overflow:hidden;opacity:0;visibility:hidden;transition:all 150ms ease-in-out;height:0}.summary{display:flex;flex-direction:row;align-content:center;justify-content:space-between}.expand{align-self:center;margin-left:5px;--gv-icon--s:16px}`];
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
- box: true,
85
- link: this.clickable
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