@operato/property-panel 9.0.0-beta.14

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 (156) hide show
  1. package/.editorconfig +29 -0
  2. package/.storybook/main.js +5 -0
  3. package/.storybook/preview.js +52 -0
  4. package/.storybook/server.mjs +8 -0
  5. package/CHANGELOG.md +11 -0
  6. package/LICENSE +21 -0
  7. package/README.md +76 -0
  8. package/demo/index.html +30 -0
  9. package/dist/src/graphql/board.d.ts +6 -0
  10. package/dist/src/graphql/board.js +130 -0
  11. package/dist/src/graphql/board.js.map +1 -0
  12. package/dist/src/graphql/data-subscription.d.ts +5 -0
  13. package/dist/src/graphql/data-subscription.js +24 -0
  14. package/dist/src/graphql/data-subscription.js.map +1 -0
  15. package/dist/src/graphql/favorite-board.d.ts +1 -0
  16. package/dist/src/graphql/favorite-board.js +23 -0
  17. package/dist/src/graphql/favorite-board.js.map +1 -0
  18. package/dist/src/graphql/group.d.ts +7 -0
  19. package/dist/src/graphql/group.js +125 -0
  20. package/dist/src/graphql/group.js.map +1 -0
  21. package/dist/src/graphql/index.d.ts +4 -0
  22. package/dist/src/graphql/index.js +5 -0
  23. package/dist/src/graphql/index.js.map +1 -0
  24. package/dist/src/graphql/play-group.d.ts +13 -0
  25. package/dist/src/graphql/play-group.js +205 -0
  26. package/dist/src/graphql/play-group.js.map +1 -0
  27. package/dist/src/graphql/scenario.d.ts +6 -0
  28. package/dist/src/graphql/scenario.js +69 -0
  29. package/dist/src/graphql/scenario.js.map +1 -0
  30. package/dist/src/index.d.ts +7 -0
  31. package/dist/src/index.js +8 -0
  32. package/dist/src/index.js.map +1 -0
  33. package/dist/src/ox-property-panel.d.ts +46 -0
  34. package/dist/src/ox-property-panel.js +346 -0
  35. package/dist/src/ox-property-panel.js.map +1 -0
  36. package/dist/src/property-panel/abstract-property.d.ts +10 -0
  37. package/dist/src/property-panel/abstract-property.js +53 -0
  38. package/dist/src/property-panel/abstract-property.js.map +1 -0
  39. package/dist/src/property-panel/data-binding/data-binding-mapper.d.ts +58 -0
  40. package/dist/src/property-panel/data-binding/data-binding-mapper.js +380 -0
  41. package/dist/src/property-panel/data-binding/data-binding-mapper.js.map +1 -0
  42. package/dist/src/property-panel/data-binding/data-binding-value-map.d.ts +6 -0
  43. package/dist/src/property-panel/data-binding/data-binding-value-map.js +20 -0
  44. package/dist/src/property-panel/data-binding/data-binding-value-map.js.map +1 -0
  45. package/dist/src/property-panel/data-binding/data-binding-value-range.d.ts +6 -0
  46. package/dist/src/property-panel/data-binding/data-binding-value-range.js +20 -0
  47. package/dist/src/property-panel/data-binding/data-binding-value-range.js.map +1 -0
  48. package/dist/src/property-panel/data-binding/data-binding.d.ts +44 -0
  49. package/dist/src/property-panel/data-binding/data-binding.js +442 -0
  50. package/dist/src/property-panel/data-binding/data-binding.js.map +1 -0
  51. package/dist/src/property-panel/effects/effects.d.ts +24 -0
  52. package/dist/src/property-panel/effects/effects.js +72 -0
  53. package/dist/src/property-panel/effects/effects.js.map +1 -0
  54. package/dist/src/property-panel/effects/property-animation.d.ts +23 -0
  55. package/dist/src/property-panel/effects/property-animation.js +147 -0
  56. package/dist/src/property-panel/effects/property-animation.js.map +1 -0
  57. package/dist/src/property-panel/effects/property-animations.d.ts +22 -0
  58. package/dist/src/property-panel/effects/property-animations.js +70 -0
  59. package/dist/src/property-panel/effects/property-animations.js.map +1 -0
  60. package/dist/src/property-panel/effects/property-event-hover.d.ts +21 -0
  61. package/dist/src/property-panel/effects/property-event-hover.js +193 -0
  62. package/dist/src/property-panel/effects/property-event-hover.js.map +1 -0
  63. package/dist/src/property-panel/effects/property-event-tap.d.ts +36 -0
  64. package/dist/src/property-panel/effects/property-event-tap.js +262 -0
  65. package/dist/src/property-panel/effects/property-event-tap.js.map +1 -0
  66. package/dist/src/property-panel/effects/property-event.d.ts +22 -0
  67. package/dist/src/property-panel/effects/property-event.js +64 -0
  68. package/dist/src/property-panel/effects/property-event.js.map +1 -0
  69. package/dist/src/property-panel/effects/property-shadow.d.ts +23 -0
  70. package/dist/src/property-panel/effects/property-shadow.js +66 -0
  71. package/dist/src/property-panel/effects/property-shadow.js.map +1 -0
  72. package/dist/src/property-panel/effects/value-converter.d.ts +1 -0
  73. package/dist/src/property-panel/effects/value-converter.js +17 -0
  74. package/dist/src/property-panel/effects/value-converter.js.map +1 -0
  75. package/dist/src/property-panel/inspector/inspector.d.ts +27 -0
  76. package/dist/src/property-panel/inspector/inspector.js +357 -0
  77. package/dist/src/property-panel/inspector/inspector.js.map +1 -0
  78. package/dist/src/property-panel/shapes/shapes.d.ts +26 -0
  79. package/dist/src/property-panel/shapes/shapes.js +312 -0
  80. package/dist/src/property-panel/shapes/shapes.js.map +1 -0
  81. package/dist/src/property-panel/specifics/specific-properties-builder.d.ts +16 -0
  82. package/dist/src/property-panel/specifics/specific-properties-builder.js +138 -0
  83. package/dist/src/property-panel/specifics/specific-properties-builder.js.map +1 -0
  84. package/dist/src/property-panel/specifics/specifics.d.ts +25 -0
  85. package/dist/src/property-panel/specifics/specifics.js +84 -0
  86. package/dist/src/property-panel/specifics/specifics.js.map +1 -0
  87. package/dist/src/property-panel/styles/styles.d.ts +23 -0
  88. package/dist/src/property-panel/styles/styles.js +269 -0
  89. package/dist/src/property-panel/styles/styles.js.map +1 -0
  90. package/dist/src/types.d.ts +43 -0
  91. package/dist/src/types.js +2 -0
  92. package/dist/src/types.js.map +1 -0
  93. package/dist/stories/index.stories.d.ts +22 -0
  94. package/dist/stories/index.stories.js +121 -0
  95. package/dist/stories/index.stories.js.map +1 -0
  96. package/dist/stories/input-table-property.stories.d.ts +21 -0
  97. package/dist/stories/input-table-property.stories.js +84 -0
  98. package/dist/stories/input-table-property.stories.js.map +1 -0
  99. package/dist/test/ox-property-panel.test.d.ts +1 -0
  100. package/dist/test/ox-property-panel.test.js +24 -0
  101. package/dist/test/ox-property-panel.test.js.map +1 -0
  102. package/dist/tsconfig.tsbuildinfo +1 -0
  103. package/package.json +108 -0
  104. package/src/graphql/board.ts +144 -0
  105. package/src/graphql/data-subscription.ts +30 -0
  106. package/src/graphql/favorite-board.ts +25 -0
  107. package/src/graphql/group.ts +138 -0
  108. package/src/graphql/index.ts +4 -0
  109. package/src/graphql/play-group.ts +225 -0
  110. package/src/graphql/scenario.ts +79 -0
  111. package/src/index.ts +8 -0
  112. package/src/ox-property-panel.ts +347 -0
  113. package/src/property-panel/abstract-property.ts +67 -0
  114. package/src/property-panel/data-binding/data-binding-mapper.ts +412 -0
  115. package/src/property-panel/data-binding/data-binding-value-map.ts +19 -0
  116. package/src/property-panel/data-binding/data-binding-value-range.ts +19 -0
  117. package/src/property-panel/data-binding/data-binding.ts +464 -0
  118. package/src/property-panel/effects/effects.ts +77 -0
  119. package/src/property-panel/effects/property-animation.ts +155 -0
  120. package/src/property-panel/effects/property-animations.ts +74 -0
  121. package/src/property-panel/effects/property-event-hover.ts +212 -0
  122. package/src/property-panel/effects/property-event-tap.ts +269 -0
  123. package/src/property-panel/effects/property-event.ts +73 -0
  124. package/src/property-panel/effects/property-shadow.ts +77 -0
  125. package/src/property-panel/effects/value-converter.ts +17 -0
  126. package/src/property-panel/inspector/inspector.ts +407 -0
  127. package/src/property-panel/shapes/shapes.ts +321 -0
  128. package/src/property-panel/specifics/specific-properties-builder.ts +152 -0
  129. package/src/property-panel/specifics/specifics.ts +81 -0
  130. package/src/property-panel/styles/styles.ts +287 -0
  131. package/src/types.ts +63 -0
  132. package/stories/index.stories.ts +134 -0
  133. package/stories/input-table-property.stories.ts +96 -0
  134. package/test/ox-property-panel.test.ts +32 -0
  135. package/themes/app-theme.css +138 -0
  136. package/themes/calendar-theme.css +61 -0
  137. package/themes/dark.css +51 -0
  138. package/themes/grist-theme.css +175 -0
  139. package/themes/help-theme.css +57 -0
  140. package/themes/layout-theme.css +94 -0
  141. package/themes/light.css +51 -0
  142. package/themes/material-theme.css +23 -0
  143. package/themes/md-typescale-styles.css +100 -0
  144. package/themes/oops-theme.css +22 -0
  145. package/themes/report-theme.css +47 -0
  146. package/themes/spacing.css +23 -0
  147. package/themes/state-color.css +6 -0
  148. package/themes/tooltip-theme.css +11 -0
  149. package/translations/en.json +723 -0
  150. package/translations/ja.json +727 -0
  151. package/translations/ko.json +727 -0
  152. package/translations/ms.json +609 -0
  153. package/translations/zh.json +726 -0
  154. package/tsconfig.json +25 -0
  155. package/web-dev-server.config.mjs +27 -0
  156. package/web-test-runner.config.mjs +41 -0
@@ -0,0 +1,100 @@
1
+ @layer {
2
+ .md-typescale-display-small,
3
+ .md-typescale-display-small-prominent {
4
+ font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
5
+ var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem)
6
+ var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, 'Roboto'));
7
+ }
8
+ .md-typescale-display-medium,
9
+ .md-typescale-display-medium-prominent {
10
+ font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
11
+ var(--md-sys-typescale-display-medium-size, 2.8125rem) /
12
+ var(--md-sys-typescale-display-medium-line-height, 3.25rem)
13
+ var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
14
+ }
15
+ .md-typescale-display-large,
16
+ .md-typescale-display-large-prominent {
17
+ font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
18
+ var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem)
19
+ var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, 'Roboto'));
20
+ }
21
+ .md-typescale-headline-small,
22
+ .md-typescale-headline-small-prominent {
23
+ font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
24
+ var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem)
25
+ var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, 'Roboto'));
26
+ }
27
+ .md-typescale-headline-medium,
28
+ .md-typescale-headline-medium-prominent {
29
+ font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
30
+ var(--md-sys-typescale-headline-medium-size, 1.75rem) /
31
+ var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
32
+ var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
33
+ }
34
+ .md-typescale-headline-large,
35
+ .md-typescale-headline-large-prominent {
36
+ font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
37
+ var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem)
38
+ var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, 'Roboto'));
39
+ }
40
+ .md-typescale-title-small,
41
+ .md-typescale-title-small-prominent {
42
+ font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
43
+ var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem)
44
+ var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, 'Roboto'));
45
+ }
46
+ .md-typescale-title-medium,
47
+ .md-typescale-title-medium-prominent {
48
+ font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
49
+ var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem)
50
+ var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
51
+ }
52
+ .md-typescale-title-large,
53
+ .md-typescale-title-large-prominent {
54
+ font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
55
+ var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem)
56
+ var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, 'Roboto'));
57
+ }
58
+ .md-typescale-body-small,
59
+ .md-typescale-body-small-prominent {
60
+ font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
61
+ var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem)
62
+ var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, 'Roboto'));
63
+ }
64
+ .md-typescale-body-medium,
65
+ .md-typescale-body-medium-prominent {
66
+ font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
67
+ var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem)
68
+ var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
69
+ }
70
+ .md-typescale-body-large,
71
+ .md-typescale-body-large-prominent {
72
+ font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
73
+ var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem)
74
+ var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, 'Roboto'));
75
+ }
76
+ .md-typescale-label-small,
77
+ .md-typescale-label-small-prominent {
78
+ font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
79
+ var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem)
80
+ var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, 'Roboto'));
81
+ }
82
+ .md-typescale-label-medium,
83
+ .md-typescale-label-medium-prominent {
84
+ font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
85
+ var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem)
86
+ var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
87
+ }
88
+ .md-typescale-label-medium-prominent {
89
+ font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
90
+ }
91
+ .md-typescale-label-large,
92
+ .md-typescale-label-large-prominent {
93
+ font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
94
+ var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem)
95
+ var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, 'Roboto'));
96
+ }
97
+ .md-typescale-label-large-prominent {
98
+ font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
99
+ }
100
+ } /*# sourceMappingURL=md-typescale-styles.css.map */
@@ -0,0 +1,22 @@
1
+ body {
2
+ /* oops note style */
3
+ --oops-note-icon-font: normal 24px var(--md-icon-font, 'Material Symbols Outlined');
4
+ --oops-note-icon-color: var(--md-sys-color-on-surface);
5
+ --oops-note-icon-border: 2px solid var(--md-sys-color-outline);
6
+ --oops-note-icon-border-radius: 50px;
7
+ --oops-note-icon-padding: var(--padding-default);
8
+ --oops-note-title-margin: 7px 0 2px 0;
9
+ --oops-note-title-font: bold 14px var(--theme-font);
10
+ --oops-note-title-color: var(--md-sys-color-secondary);
11
+ --oops-note-description-font: normal 12px var(--theme-font);
12
+ --oops-note-description-color: var(--md-sys-color-primary);
13
+ }
14
+ @media only screen and (max-width: 460px) {
15
+ body {
16
+ --oops-note-icon-padding: var(--padding-narrow);
17
+ --oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
18
+ --oops-note-title-font: bold 13px var(--theme-font);
19
+ --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
20
+ --oops-note-description-font: normal 0px var(--theme-font);
21
+ }
22
+ }
@@ -0,0 +1,47 @@
1
+ body {
2
+ --report-background-color: var(--md-sys-color-background);
3
+ --report-padding: 15px;
4
+ --report-title-margin: 0 0 0 10px;
5
+ --report-title-border: none;
6
+ --report-title-color: var(--md-sys-color-secondary);
7
+ --report-title-icon-color: var(--md-sys-color-primary);
8
+ --report-title-icon-margin: 0 3px 2px 0;
9
+ --report-title-icon-size: 14px;
10
+ --report-title-with-grid-padding: 0;
11
+ --report-component-border-radius: var(--border-radius);
12
+
13
+ --report-header-background-color: var(--md-sys-color-surface);
14
+ --report-header-border: 1px solid var(--report-header-border-color);
15
+ --report-header-border-color: var(--md-sys-color-outline);
16
+ --report-header-padding: 5px 0 5px 5px;
17
+ --report-header-color: var(--secondary-text-color);
18
+ --report-header-font: normal 1em/1.5 var(--theme-font);
19
+ --report-header-fontsize: 13px;
20
+
21
+ --report-record-background-color: #fff;
22
+ --report-record-odd-background-color: #f6f6f6;
23
+ --report-record-field-padding: 7px 10px;
24
+ --report-record-field-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
25
+ --report-record-wide-fontsize: 13px;
26
+ --report-record-focused-background-color: #ffde3b47;
27
+ --report-record-focused-border: 1px dashed rgba(0, 0, 0, 0.5);
28
+
29
+ --report-totalized-background-color: #efefef;
30
+ --report-totalized-border: 1px solid rgba(0, 0, 0, 0.1);
31
+ --report-totalized-color: var(--secondary-text-color);
32
+
33
+ --report-grouped-background-color: #607d8bbf;
34
+ --report-grouped-border: 1px solid rgba(0, 0, 0, 0.2);
35
+ --report-grouped-color: #fff;
36
+ }
37
+
38
+ @media print {
39
+ body {
40
+ --report-header-padding: 5px;
41
+ --report-record-field-padding: 5px;
42
+ --report-record-wide-fontsize: 10px;
43
+ --report-grouped-background-color: #d7d7d7;
44
+ --report-grouped-color: #000;
45
+ --report-totalized-color: #000;
46
+ }
47
+ }
@@ -0,0 +1,23 @@
1
+ :root {
2
+ /* spacing */
3
+ --spacing-none: 0px;
4
+ --spacing-tiny: 2px;
5
+ --spacing-small: 4px;
6
+ --spacing-medium: 8px;
7
+ --spacing-large: 12px;
8
+ --spacing-huge: 24px;
9
+
10
+ /* icon size */
11
+ --icon-size-tiny: 14px;
12
+ --icon-size-small: 18px;
13
+ --icon-size-medium: 24px;
14
+ --icon-size-large: 32px;
15
+ --icon-size-huge: 48px;
16
+
17
+ /* form element height */
18
+ --form-element-height-tiny: 18px;
19
+ --form-element-height-small: 24px;
20
+ --form-element-height-medium: 30px;
21
+ --form-element-height-large: 40px;
22
+ --form-element-height-huge: 55px;
23
+ }
@@ -0,0 +1,6 @@
1
+ :root {
2
+ --status-danger-color: var(--md-sys-color-error, #d14946);
3
+ --status-warning-color: #ee8d03;
4
+ --status-info-color: #398ace;
5
+ --status-success-color: #35a24a;
6
+ }
@@ -0,0 +1,11 @@
1
+ body {
2
+ --tooltip-padding: 4px 4px 4px 4px;
3
+ --tooltip-background-color: rgba(0, 0, 0, 0.7);
4
+ --tooltip-font: bold 11px var(--theme-font);
5
+ /*
6
+ --tooltip-left-positon-left: auto;
7
+ --tooltip-left-position-top: 7px;
8
+ --tooltip-left-position-right: 110%;
9
+ --tooltip-left-position-animation: tooltip-left 0.3s ease-out 0s 1 normal;
10
+ */
11
+ }