@kyndryl-design-system/shidoka-applications 1.22.2 → 1.23.0

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 (64) hide show
  1. package/README.md +4 -1
  2. package/common/css/gridstack-shidoka.css +1 -0
  3. package/common/css/root.css +1 -0
  4. package/common/helpers/gridstack.d.ts +458 -0
  5. package/common/helpers/gridstack.d.ts.map +1 -0
  6. package/common/helpers/gridstack.js +2 -0
  7. package/common/helpers/gridstack.js.map +1 -0
  8. package/common/scss/scss/global.scss +5 -0
  9. package/common/scss/scss/mixins.scss +9 -0
  10. package/common/scss/scss/root.scss +1 -0
  11. package/common/scss/scss/utility/gridstack-shidoka.scss +20 -0
  12. package/common/scss/scss/variables/index.scss +2 -0
  13. package/common/scss/scss/variables/misc.scss +5 -0
  14. package/common/scss/scss/variables/zindex.scss +5 -0
  15. package/components/reusable/widget/index.d.ts +1 -0
  16. package/components/reusable/widget/index.d.ts.map +1 -1
  17. package/components/reusable/widget/index.js +1 -1
  18. package/components/reusable/widget/sample-layout.d.ts +39 -0
  19. package/components/reusable/widget/sample-layout.d.ts.map +1 -0
  20. package/components/reusable/widget/widget.d.ts +1 -1
  21. package/components/reusable/widget/widget.js +1 -1
  22. package/components/reusable/widget/widget.js.map +1 -1
  23. package/components/reusable/widget/widgetGridstack.d.ts +33 -0
  24. package/components/reusable/widget/widgetGridstack.d.ts.map +1 -0
  25. package/components/reusable/widget/widgetGridstack.js +6 -0
  26. package/components/reusable/widget/widgetGridstack.js.map +1 -0
  27. package/components/reusable/widget/widgetGridstack.scss.js +14 -0
  28. package/components/reusable/widget/widgetGridstack.scss.js.map +1 -0
  29. package/external/gridstack/dist/dd-base-impl.js +2 -0
  30. package/external/gridstack/dist/dd-base-impl.js.map +1 -0
  31. package/external/gridstack/dist/dd-draggable.js +2 -0
  32. package/external/gridstack/dist/dd-draggable.js.map +1 -0
  33. package/external/gridstack/dist/dd-droppable.js +2 -0
  34. package/external/gridstack/dist/dd-droppable.js.map +1 -0
  35. package/external/gridstack/dist/dd-element.js +2 -0
  36. package/external/gridstack/dist/dd-element.js.map +1 -0
  37. package/external/gridstack/dist/dd-gridstack.js +2 -0
  38. package/external/gridstack/dist/dd-gridstack.js.map +1 -0
  39. package/external/gridstack/dist/dd-manager.js +2 -0
  40. package/external/gridstack/dist/dd-manager.js.map +1 -0
  41. package/external/gridstack/dist/dd-resizable-handle.js +2 -0
  42. package/external/gridstack/dist/dd-resizable-handle.js.map +1 -0
  43. package/external/gridstack/dist/dd-resizable.js +2 -0
  44. package/external/gridstack/dist/dd-resizable.js.map +1 -0
  45. package/external/gridstack/dist/dd-touch.js +2 -0
  46. package/external/gridstack/dist/dd-touch.js.map +1 -0
  47. package/external/gridstack/dist/gridstack-engine.js +2 -0
  48. package/external/gridstack/dist/gridstack-engine.js.map +1 -0
  49. package/external/gridstack/dist/gridstack.js +9 -0
  50. package/external/gridstack/dist/gridstack.js.map +1 -0
  51. package/external/gridstack/dist/types.js +2 -0
  52. package/external/gridstack/dist/types.js.map +1 -0
  53. package/external/gridstack/dist/utils.js +2 -0
  54. package/external/gridstack/dist/utils.js.map +1 -0
  55. package/external/query-selector-shadow-dom/src/normalize.js +2 -0
  56. package/external/query-selector-shadow-dom/src/normalize.js.map +1 -0
  57. package/external/query-selector-shadow-dom/src/querySelectorDeep.js +2 -0
  58. package/external/query-selector-shadow-dom/src/querySelectorDeep.js.map +1 -0
  59. package/index.d.ts +1 -1
  60. package/index.d.ts.map +1 -1
  61. package/index.js +1 -1
  62. package/package.json +8 -4
  63. package/components/reusable/widget/gridstack.sample.d.ts +0 -28
  64. package/components/reusable/widget/gridstack.sample.d.ts.map +0 -1
package/README.md CHANGED
@@ -16,7 +16,7 @@ Read the [Contributing Guide](CONTRIBUTING.md) here.
16
16
  npm install @kyndryl-design-system/shidoka-applications @kyndryl-design-system/shidoka-foundation -S
17
17
  ```
18
18
 
19
- ## Import the root stylesheet to your app's global styles
19
+ ## Import the root stylesheets to your app's global styles
20
20
 
21
21
  The method used (SCSS @use, CSS @import, JS import, or <style> tag) will vary based on your framework/bundler. Some examples:
22
22
 
@@ -24,18 +24,21 @@ The method used (SCSS @use, CSS @import, JS import, or <style> tag) will v
24
24
 
25
25
  ```css
26
26
  @use '~@kyndryl-design-system/shidoka-foundation/scss/root.scss';
27
+ @use '~@kyndryl-design-system/shidoka-applications/common/scss/root.scss';
27
28
  ```
28
29
 
29
30
  ### CSS
30
31
 
31
32
  ```css
32
33
  @import '@kyndryl-design-system/shidoka-foundation/css/root.css';
34
+ @import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
33
35
  ```
34
36
 
35
37
  ### JS
36
38
 
37
39
  ```js
38
40
  import '@kyndryl-design-system/shidoka-foundation/css/root.css';
41
+ import '@kyndryl-design-system/shidoka-applications/common/css/root.css';
39
42
  ```
40
43
 
41
44
  ### Use CSS tokens/variables
package/common/css/gridstack-shidoka.css ADDED
@@ -0,0 +1 @@
1
+ .grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0 !important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:translate(0, 10px) rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:translate(0, 10px) rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none !important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0px}.grid-stack>.grid-stack-item[gs-x="0"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x="1"]{left:8.333%}.gs-12>.grid-stack-item[gs-w="2"]{width:16.667%}.gs-12>.grid-stack-item[gs-x="2"]{left:16.667%}.gs-12>.grid-stack-item[gs-w="3"]{width:25%}.gs-12>.grid-stack-item[gs-x="3"]{left:25%}.gs-12>.grid-stack-item[gs-w="4"]{width:33.333%}.gs-12>.grid-stack-item[gs-x="4"]{left:33.333%}.gs-12>.grid-stack-item[gs-w="5"]{width:41.667%}.gs-12>.grid-stack-item[gs-x="5"]{left:41.667%}.gs-12>.grid-stack-item[gs-w="6"]{width:50%}.gs-12>.grid-stack-item[gs-x="6"]{left:50%}.gs-12>.grid-stack-item[gs-w="7"]{width:58.333%}.gs-12>.grid-stack-item[gs-x="7"]{left:58.333%}.gs-12>.grid-stack-item[gs-w="8"]{width:66.667%}.gs-12>.grid-stack-item[gs-x="8"]{left:66.667%}.gs-12>.grid-stack-item[gs-w="9"]{width:75%}.gs-12>.grid-stack-item[gs-x="9"]{left:75%}.gs-12>.grid-stack-item[gs-w="10"]{width:83.333%}.gs-12>.grid-stack-item[gs-x="10"]{left:83.333%}.gs-12>.grid-stack-item[gs-w="11"]{width:91.667%}.gs-12>.grid-stack-item[gs-x="11"]{left:91.667%}.gs-12>.grid-stack-item[gs-w="12"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x="1"]{left:50%}.gs-2>.grid-stack-item[gs-w="2"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x="1"]{left:33.333%}.gs-3>.grid-stack-item[gs-w="2"]{width:66.667%}.gs-3>.grid-stack-item[gs-x="2"]{left:66.667%}.gs-3>.grid-stack-item[gs-w="3"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x="1"]{left:25%}.gs-4>.grid-stack-item[gs-w="2"]{width:50%}.gs-4>.grid-stack-item[gs-x="2"]{left:50%}.gs-4>.grid-stack-item[gs-w="3"]{width:75%}.gs-4>.grid-stack-item[gs-x="3"]{left:75%}.gs-4>.grid-stack-item[gs-w="4"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x="1"]{left:20%}.gs-5>.grid-stack-item[gs-w="2"]{width:40%}.gs-5>.grid-stack-item[gs-x="2"]{left:40%}.gs-5>.grid-stack-item[gs-w="3"]{width:60%}.gs-5>.grid-stack-item[gs-x="3"]{left:60%}.gs-5>.grid-stack-item[gs-w="4"]{width:80%}.gs-5>.grid-stack-item[gs-x="4"]{left:80%}.gs-5>.grid-stack-item[gs-w="5"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x="1"]{left:16.667%}.gs-6>.grid-stack-item[gs-w="2"]{width:33.333%}.gs-6>.grid-stack-item[gs-x="2"]{left:33.333%}.gs-6>.grid-stack-item[gs-w="3"]{width:50%}.gs-6>.grid-stack-item[gs-x="3"]{left:50%}.gs-6>.grid-stack-item[gs-w="4"]{width:66.667%}.gs-6>.grid-stack-item[gs-x="4"]{left:66.667%}.gs-6>.grid-stack-item[gs-w="5"]{width:83.333%}.gs-6>.grid-stack-item[gs-x="5"]{left:83.333%}.gs-6>.grid-stack-item[gs-w="6"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x="1"]{left:14.286%}.gs-7>.grid-stack-item[gs-w="2"]{width:28.571%}.gs-7>.grid-stack-item[gs-x="2"]{left:28.571%}.gs-7>.grid-stack-item[gs-w="3"]{width:42.857%}.gs-7>.grid-stack-item[gs-x="3"]{left:42.857%}.gs-7>.grid-stack-item[gs-w="4"]{width:57.143%}.gs-7>.grid-stack-item[gs-x="4"]{left:57.143%}.gs-7>.grid-stack-item[gs-w="5"]{width:71.429%}.gs-7>.grid-stack-item[gs-x="5"]{left:71.429%}.gs-7>.grid-stack-item[gs-w="6"]{width:85.714%}.gs-7>.grid-stack-item[gs-x="6"]{left:85.714%}.gs-7>.grid-stack-item[gs-w="7"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x="1"]{left:12.5%}.gs-8>.grid-stack-item[gs-w="2"]{width:25%}.gs-8>.grid-stack-item[gs-x="2"]{left:25%}.gs-8>.grid-stack-item[gs-w="3"]{width:37.5%}.gs-8>.grid-stack-item[gs-x="3"]{left:37.5%}.gs-8>.grid-stack-item[gs-w="4"]{width:50%}.gs-8>.grid-stack-item[gs-x="4"]{left:50%}.gs-8>.grid-stack-item[gs-w="5"]{width:62.5%}.gs-8>.grid-stack-item[gs-x="5"]{left:62.5%}.gs-8>.grid-stack-item[gs-w="6"]{width:75%}.gs-8>.grid-stack-item[gs-x="6"]{left:75%}.gs-8>.grid-stack-item[gs-w="7"]{width:87.5%}.gs-8>.grid-stack-item[gs-x="7"]{left:87.5%}.gs-8>.grid-stack-item[gs-w="8"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x="1"]{left:11.111%}.gs-9>.grid-stack-item[gs-w="2"]{width:22.222%}.gs-9>.grid-stack-item[gs-x="2"]{left:22.222%}.gs-9>.grid-stack-item[gs-w="3"]{width:33.333%}.gs-9>.grid-stack-item[gs-x="3"]{left:33.333%}.gs-9>.grid-stack-item[gs-w="4"]{width:44.444%}.gs-9>.grid-stack-item[gs-x="4"]{left:44.444%}.gs-9>.grid-stack-item[gs-w="5"]{width:55.556%}.gs-9>.grid-stack-item[gs-x="5"]{left:55.556%}.gs-9>.grid-stack-item[gs-w="6"]{width:66.667%}.gs-9>.grid-stack-item[gs-x="6"]{left:66.667%}.gs-9>.grid-stack-item[gs-w="7"]{width:77.778%}.gs-9>.grid-stack-item[gs-x="7"]{left:77.778%}.gs-9>.grid-stack-item[gs-w="8"]{width:88.889%}.gs-9>.grid-stack-item[gs-x="8"]{left:88.889%}.gs-9>.grid-stack-item[gs-w="9"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x="1"]{left:10%}.gs-10>.grid-stack-item[gs-w="2"]{width:20%}.gs-10>.grid-stack-item[gs-x="2"]{left:20%}.gs-10>.grid-stack-item[gs-w="3"]{width:30%}.gs-10>.grid-stack-item[gs-x="3"]{left:30%}.gs-10>.grid-stack-item[gs-w="4"]{width:40%}.gs-10>.grid-stack-item[gs-x="4"]{left:40%}.gs-10>.grid-stack-item[gs-w="5"]{width:50%}.gs-10>.grid-stack-item[gs-x="5"]{left:50%}.gs-10>.grid-stack-item[gs-w="6"]{width:60%}.gs-10>.grid-stack-item[gs-x="6"]{left:60%}.gs-10>.grid-stack-item[gs-w="7"]{width:70%}.gs-10>.grid-stack-item[gs-x="7"]{left:70%}.gs-10>.grid-stack-item[gs-w="8"]{width:80%}.gs-10>.grid-stack-item[gs-x="8"]{left:80%}.gs-10>.grid-stack-item[gs-w="9"]{width:90%}.gs-10>.grid-stack-item[gs-x="9"]{left:90%}.gs-10>.grid-stack-item[gs-w="10"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x="1"]{left:9.091%}.gs-11>.grid-stack-item[gs-w="2"]{width:18.182%}.gs-11>.grid-stack-item[gs-x="2"]{left:18.182%}.gs-11>.grid-stack-item[gs-w="3"]{width:27.273%}.gs-11>.grid-stack-item[gs-x="3"]{left:27.273%}.gs-11>.grid-stack-item[gs-w="4"]{width:36.364%}.gs-11>.grid-stack-item[gs-x="4"]{left:36.364%}.gs-11>.grid-stack-item[gs-w="5"]{width:45.455%}.gs-11>.grid-stack-item[gs-x="5"]{left:45.455%}.gs-11>.grid-stack-item[gs-w="6"]{width:54.545%}.gs-11>.grid-stack-item[gs-x="6"]{left:54.545%}.gs-11>.grid-stack-item[gs-w="7"]{width:63.636%}.gs-11>.grid-stack-item[gs-x="7"]{left:63.636%}.gs-11>.grid-stack-item[gs-w="8"]{width:72.727%}.gs-11>.grid-stack-item[gs-x="8"]{left:72.727%}.gs-11>.grid-stack-item[gs-w="9"]{width:81.818%}.gs-11>.grid-stack-item[gs-x="9"]{left:81.818%}.gs-11>.grid-stack-item[gs-w="10"]{width:90.909%}.gs-11>.grid-stack-item[gs-x="10"]{left:90.909%}.gs-11>.grid-stack-item[gs-w="11"]{width:100%}.grid-stack{max-width:1616px}.grid-stack>.grid-stack-item>.grid-stack-item-content{overflow:initial}.grid-stack-item>.ui-resizable-se{transform:none;background-image:url('data:image/svg+xml,<svg viewBox="0 0 16 16" stroke="%236D6D6D" stroke-width="2px" xmlns="http://www.w3.org/2000/svg"><path d="m9.5 14.5 5-5M4 14.5 14.5 4"></path></svg>');background-size:16px}
package/common/css/root.css ADDED
@@ -0,0 +1 @@
1
+ :root{--kd-z-overlay: 100000;--kd-z-header: 10000;--kd-z-local-nav: 9000}:root{--kd-header-height: 56px;--kd-local-nav-width: 56px;--kd-local-nav-width-expanded: 320px}
package/common/helpers/gridstack.d.ts ADDED
@@ -0,0 +1,458 @@
1
+ export declare const Config: {
2
+ handle: string;
3
+ margin: number;
4
+ animate: boolean;
5
+ columnOpts: {
6
+ breakpointForWindow: boolean;
7
+ breakpoints: {
8
+ w: number;
9
+ c: number;
10
+ }[];
11
+ };
12
+ };
13
+ export default Config;
14
+ export declare const WidgetSizes: {
15
+ pill: {
16
+ max: {
17
+ w: number;
18
+ h: number;
19
+ };
20
+ xl: {
21
+ w: number;
22
+ h: number;
23
+ };
24
+ lg: {
25
+ w: number;
26
+ h: number;
27
+ };
28
+ md: {
29
+ w: number;
30
+ h: number;
31
+ };
32
+ sm: {
33
+ w: number;
34
+ h: number;
35
+ };
36
+ };
37
+ standard: {
38
+ max: {
39
+ w: number;
40
+ h: number;
41
+ };
42
+ xl: {
43
+ w: number;
44
+ h: number;
45
+ };
46
+ lg: {
47
+ w: number;
48
+ h: number;
49
+ };
50
+ md: {
51
+ w: number;
52
+ h: number;
53
+ };
54
+ sm: {
55
+ w: number;
56
+ h: number;
57
+ };
58
+ };
59
+ standardShort: {
60
+ max: {
61
+ w: number;
62
+ h: number;
63
+ };
64
+ xl: {
65
+ w: number;
66
+ h: number;
67
+ };
68
+ lg: {
69
+ w: number;
70
+ h: number;
71
+ };
72
+ md: {
73
+ w: number;
74
+ h: number;
75
+ };
76
+ sm: {
77
+ w: number;
78
+ h: number;
79
+ };
80
+ };
81
+ wide: {
82
+ max: {
83
+ w: number;
84
+ h: number;
85
+ };
86
+ xl: {
87
+ w: number;
88
+ h: number;
89
+ };
90
+ lg: {
91
+ w: number;
92
+ h: number;
93
+ };
94
+ md: {
95
+ w: number;
96
+ h: number;
97
+ };
98
+ sm: {
99
+ w: number;
100
+ h: number;
101
+ };
102
+ };
103
+ wideShort: {
104
+ max: {
105
+ w: number;
106
+ h: number;
107
+ };
108
+ xl: {
109
+ w: number;
110
+ h: number;
111
+ };
112
+ lg: {
113
+ w: number;
114
+ h: number;
115
+ };
116
+ md: {
117
+ w: number;
118
+ h: number;
119
+ };
120
+ sm: {
121
+ w: number;
122
+ h: number;
123
+ };
124
+ };
125
+ xlWide: {
126
+ max: {
127
+ w: number;
128
+ h: number;
129
+ };
130
+ xl: {
131
+ w: number;
132
+ h: number;
133
+ };
134
+ lg: {
135
+ w: number;
136
+ h: number;
137
+ };
138
+ md: {
139
+ w: number;
140
+ h: number;
141
+ };
142
+ sm: {
143
+ w: number;
144
+ h: number;
145
+ };
146
+ };
147
+ xlWideShort: {
148
+ max: {
149
+ w: number;
150
+ h: number;
151
+ };
152
+ xl: {
153
+ w: number;
154
+ h: number;
155
+ };
156
+ lg: {
157
+ w: number;
158
+ h: number;
159
+ };
160
+ md: {
161
+ w: number;
162
+ h: number;
163
+ };
164
+ sm: {
165
+ w: number;
166
+ h: number;
167
+ };
168
+ };
169
+ xxlWide: {
170
+ max: {
171
+ w: number;
172
+ h: number;
173
+ };
174
+ xl: {
175
+ w: number;
176
+ h: number;
177
+ };
178
+ lg: {
179
+ w: number;
180
+ h: number;
181
+ };
182
+ md: {
183
+ w: number;
184
+ h: number;
185
+ };
186
+ sm: {
187
+ w: number;
188
+ h: number;
189
+ };
190
+ };
191
+ xxlWideShort: {
192
+ max: {
193
+ w: number;
194
+ h: number;
195
+ };
196
+ xl: {
197
+ w: number;
198
+ h: number;
199
+ };
200
+ lg: {
201
+ w: number;
202
+ h: number;
203
+ };
204
+ md: {
205
+ w: number;
206
+ h: number;
207
+ };
208
+ sm: {
209
+ w: number;
210
+ h: number;
211
+ };
212
+ };
213
+ xxxlWide: {
214
+ max: {
215
+ w: number;
216
+ h: number;
217
+ };
218
+ xl: {
219
+ w: number;
220
+ h: number;
221
+ };
222
+ lg: {
223
+ w: number;
224
+ h: number;
225
+ };
226
+ md: {
227
+ w: number;
228
+ h: number;
229
+ };
230
+ sm: {
231
+ w: number;
232
+ h: number;
233
+ };
234
+ };
235
+ xxxlWideShort: {
236
+ max: {
237
+ w: number;
238
+ h: number;
239
+ };
240
+ xl: {
241
+ w: number;
242
+ h: number;
243
+ };
244
+ lg: {
245
+ w: number;
246
+ h: number;
247
+ };
248
+ md: {
249
+ w: number;
250
+ h: number;
251
+ };
252
+ sm: {
253
+ w: number;
254
+ h: number;
255
+ };
256
+ };
257
+ tower: {
258
+ max: {
259
+ w: number;
260
+ h: number;
261
+ };
262
+ xl: {
263
+ w: number;
264
+ h: number;
265
+ };
266
+ lg: {
267
+ w: number;
268
+ h: number;
269
+ };
270
+ md: {
271
+ w: number;
272
+ h: number;
273
+ };
274
+ sm: {
275
+ w: number;
276
+ h: number;
277
+ };
278
+ };
279
+ };
280
+ export declare const WidgetConstraints: {
281
+ default: {
282
+ max: {
283
+ minW: number;
284
+ minH: number;
285
+ };
286
+ xl: {
287
+ minW: number;
288
+ minH: number;
289
+ };
290
+ lg: {
291
+ minW: number;
292
+ minH: number;
293
+ };
294
+ md: {
295
+ minW: number;
296
+ minH: number;
297
+ };
298
+ sm: {
299
+ minW: number;
300
+ minH: number;
301
+ };
302
+ };
303
+ table: {
304
+ max: {
305
+ minW: number;
306
+ minH: number;
307
+ };
308
+ xl: {
309
+ minW: number;
310
+ minH: number;
311
+ };
312
+ lg: {
313
+ minW: number;
314
+ minH: number;
315
+ };
316
+ md: {
317
+ minW: number;
318
+ minH: number;
319
+ };
320
+ sm: {
321
+ minW: number;
322
+ minH: number;
323
+ };
324
+ };
325
+ chart: {
326
+ max: {
327
+ minW: number;
328
+ minH: number;
329
+ };
330
+ xl: {
331
+ minW: number;
332
+ minH: number;
333
+ };
334
+ lg: {
335
+ minW: number;
336
+ minH: number;
337
+ };
338
+ md: {
339
+ minW: number;
340
+ minH: number;
341
+ };
342
+ sm: {
343
+ minW: number;
344
+ minH: number;
345
+ };
346
+ };
347
+ list: {
348
+ max: {
349
+ minW: number;
350
+ minH: number;
351
+ };
352
+ xl: {
353
+ minW: number;
354
+ minH: number;
355
+ };
356
+ lg: {
357
+ minW: number;
358
+ minH: number;
359
+ };
360
+ md: {
361
+ minW: number;
362
+ minH: number;
363
+ };
364
+ sm: {
365
+ minW: number;
366
+ minH: number;
367
+ };
368
+ };
369
+ content: {
370
+ max: {
371
+ minW: number;
372
+ minH: number;
373
+ };
374
+ xl: {
375
+ minW: number;
376
+ minH: number;
377
+ };
378
+ lg: {
379
+ minW: number;
380
+ minH: number;
381
+ };
382
+ md: {
383
+ minW: number;
384
+ minH: number;
385
+ };
386
+ sm: {
387
+ minW: number;
388
+ minH: number;
389
+ };
390
+ };
391
+ alert: {
392
+ max: {
393
+ minW: number;
394
+ minH: number;
395
+ };
396
+ xl: {
397
+ minW: number;
398
+ minH: number;
399
+ };
400
+ lg: {
401
+ minW: number;
402
+ minH: number;
403
+ };
404
+ md: {
405
+ minW: number;
406
+ minH: number;
407
+ };
408
+ sm: {
409
+ minW: number;
410
+ minH: number;
411
+ };
412
+ };
413
+ cards: {
414
+ max: {
415
+ minW: number;
416
+ minH: number;
417
+ };
418
+ xl: {
419
+ minW: number;
420
+ minH: number;
421
+ };
422
+ lg: {
423
+ minW: number;
424
+ minH: number;
425
+ };
426
+ md: {
427
+ minW: number;
428
+ minH: number;
429
+ };
430
+ sm: {
431
+ minW: number;
432
+ minH: number;
433
+ };
434
+ };
435
+ accordion: {
436
+ max: {
437
+ minW: number;
438
+ minH: number;
439
+ };
440
+ xl: {
441
+ minW: number;
442
+ minH: number;
443
+ };
444
+ lg: {
445
+ minW: number;
446
+ minH: number;
447
+ };
448
+ md: {
449
+ minW: number;
450
+ minH: number;
451
+ };
452
+ sm: {
453
+ minW: number;
454
+ minH: number;
455
+ };
456
+ };
457
+ };
458
+ //# sourceMappingURL=gridstack.d.ts.map
package/common/helpers/gridstack.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"gridstack.d.ts","sourceRoot":"","sources":["../../../src/common/helpers/gridstack.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;CAWlB,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyQvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiL7B,CAAC"}
package/common/helpers/gridstack.js ADDED
@@ -0,0 +1,2 @@
1
+ const a={handle:"kyn-widget-drag-handle",margin:16,animate:!1,columnOpts:{breakpointForWindow:!0,breakpoints:[{w:671,c:4},{w:1183,c:8}]}};export{a as Config,a as default};
2
+ //# sourceMappingURL=gridstack.js.map
package/common/helpers/gridstack.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"gridstack.js","sources":["../../../src/common/helpers/gridstack.ts"],"sourcesContent":["export const Config = {\n handle: 'kyn-widget-drag-handle', // set the drag handle\n margin: 16, // 32px gap\n animate: false, // disable animation until after initial load\n columnOpts: {\n breakpointForWindow: true, // break based on viewport size, not grid size\n breakpoints: [\n { w: 671, c: 4 }, // shidoka-foundation sm breakpoint, 4 column grid\n { w: 1183, c: 8 }, // shidoka-foundation md breakpoint, 8 column grid\n ],\n },\n};\n\nexport default Config;\n\nexport const WidgetSizes = {\n pill: {\n max: {\n w: 2,\n h: 2,\n },\n xl: {\n w: 3,\n h: 3,\n },\n lg: {\n w: 3,\n h: 3,\n },\n md: {\n w: 4,\n h: 4,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n standard: {\n max: {\n w: 4,\n h: 4,\n },\n xl: {\n w: 4,\n h: 4,\n },\n lg: {\n w: 4,\n h: 4,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n standardShort: {\n max: {\n w: 4,\n h: 2,\n },\n xl: {\n w: 4,\n h: 3,\n },\n lg: {\n w: 4,\n h: 4,\n },\n md: {\n w: 8,\n h: 5,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n wide: {\n max: {\n w: 6,\n h: 4,\n },\n xl: {\n w: 6,\n h: 4,\n },\n lg: {\n w: 6,\n h: 4,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n wideShort: {\n max: {\n w: 6,\n h: 3,\n },\n xl: {\n w: 6,\n h: 4,\n },\n lg: {\n w: 6,\n h: 4,\n },\n md: {\n w: 8,\n h: 4,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xlWide: {\n max: {\n w: 8,\n h: 4,\n },\n xl: {\n w: 8,\n h: 4,\n },\n lg: {\n w: 8,\n h: 4,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xlWideShort: {\n max: {\n w: 8,\n h: 3,\n },\n xl: {\n w: 8,\n h: 4,\n },\n lg: {\n w: 8,\n h: 4,\n },\n md: {\n w: 8,\n h: 5,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xxlWide: {\n max: {\n w: 10,\n h: 4,\n },\n xl: {\n w: 10,\n h: 4,\n },\n lg: {\n w: 10,\n h: 4,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xxlWideShort: {\n max: {\n w: 10,\n h: 3,\n },\n xl: {\n w: 10,\n h: 4,\n },\n lg: {\n w: 10,\n h: 4,\n },\n md: {\n w: 8,\n h: 5,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xxxlWide: {\n max: {\n w: 12,\n h: 4,\n },\n xl: {\n w: 12,\n h: 4,\n },\n lg: {\n w: 12,\n h: 4,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n xxxlWideShort: {\n max: {\n w: 12,\n h: 3,\n },\n xl: {\n w: 12,\n h: 3,\n },\n lg: {\n w: 12,\n h: 4,\n },\n md: {\n w: 8,\n h: 5,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n tower: {\n max: {\n w: 12,\n h: 7,\n },\n xl: {\n w: 12,\n h: 7,\n },\n lg: {\n w: 12,\n h: 7,\n },\n md: {\n w: 8,\n h: 8,\n },\n sm: {\n w: 4,\n h: 4,\n },\n },\n};\n\nexport const WidgetConstraints = {\n default: {\n max: {\n minW: WidgetSizes.pill.max.w,\n minH: WidgetSizes.pill.max.h,\n },\n xl: {\n minW: WidgetSizes.pill.xl.w,\n minH: WidgetSizes.pill.xl.h,\n },\n lg: {\n minW: WidgetSizes.pill.lg.w,\n minH: WidgetSizes.pill.lg.h,\n },\n md: {\n minW: WidgetSizes.pill.md.w,\n minH: WidgetSizes.pill.md.h,\n },\n sm: {\n minW: WidgetSizes.pill.sm.w,\n minH: WidgetSizes.pill.sm.h,\n },\n },\n table: {\n max: {\n minW: WidgetSizes.wide.max.w,\n minH: WidgetSizes.wide.max.h,\n },\n xl: {\n minW: WidgetSizes.wide.xl.w,\n minH: WidgetSizes.wide.xl.h,\n },\n lg: {\n minW: WidgetSizes.wide.lg.w,\n minH: WidgetSizes.wide.lg.h,\n },\n md: {\n minW: WidgetSizes.wide.md.w,\n minH: WidgetSizes.wide.md.h,\n },\n sm: {\n minW: WidgetSizes.wide.sm.w,\n minH: WidgetSizes.wide.sm.h,\n },\n },\n chart: {\n max: {\n minW: WidgetSizes.wide.max.w,\n minH: WidgetSizes.wide.max.h,\n },\n xl: {\n minW: WidgetSizes.wide.xl.w,\n minH: WidgetSizes.wide.xl.h,\n },\n lg: {\n minW: WidgetSizes.wide.lg.w,\n minH: WidgetSizes.wide.lg.h,\n },\n md: {\n minW: WidgetSizes.wide.md.w,\n minH: WidgetSizes.wide.md.h,\n },\n sm: {\n minW: WidgetSizes.wide.sm.w,\n minH: WidgetSizes.wide.sm.h,\n },\n },\n list: {\n max: {\n minW: WidgetSizes.standard.max.w,\n minH: WidgetSizes.standard.max.h,\n },\n xl: {\n minW: WidgetSizes.standard.xl.w,\n minH: WidgetSizes.standard.xl.h,\n },\n lg: {\n minW: WidgetSizes.standard.lg.w,\n minH: WidgetSizes.standard.lg.h,\n },\n md: {\n minW: WidgetSizes.standard.md.w,\n minH: WidgetSizes.standard.md.h,\n },\n sm: {\n minW: WidgetSizes.standard.sm.w,\n minH: WidgetSizes.standard.sm.h,\n },\n },\n content: {\n max: {\n minW: WidgetSizes.standard.max.w,\n minH: WidgetSizes.standard.max.h,\n },\n xl: {\n minW: WidgetSizes.standard.xl.w,\n minH: WidgetSizes.standard.xl.h,\n },\n lg: {\n minW: WidgetSizes.standard.lg.w,\n minH: WidgetSizes.standard.lg.h,\n },\n md: {\n minW: WidgetSizes.standard.md.w,\n minH: WidgetSizes.standard.md.h,\n },\n sm: {\n minW: WidgetSizes.standard.sm.w,\n minH: WidgetSizes.standard.sm.h,\n },\n },\n alert: {\n max: {\n minW: WidgetSizes.standard.max.w,\n minH: WidgetSizes.standard.max.h,\n },\n xl: {\n minW: WidgetSizes.standard.xl.w,\n minH: WidgetSizes.standard.xl.h,\n },\n lg: {\n minW: WidgetSizes.standard.lg.w,\n minH: WidgetSizes.standard.lg.h,\n },\n md: {\n minW: WidgetSizes.standard.md.w,\n minH: WidgetSizes.standard.md.h,\n },\n sm: {\n minW: WidgetSizes.standard.sm.w,\n minH: WidgetSizes.standard.sm.h,\n },\n },\n cards: {\n max: {\n minW: WidgetSizes.wide.max.w,\n minH: WidgetSizes.wide.max.h,\n },\n xl: {\n minW: WidgetSizes.wide.xl.w,\n minH: WidgetSizes.wide.xl.h,\n },\n lg: {\n minW: WidgetSizes.wide.lg.w,\n minH: WidgetSizes.wide.lg.h,\n },\n md: {\n minW: WidgetSizes.wide.md.w,\n minH: WidgetSizes.wide.md.h,\n },\n sm: {\n minW: WidgetSizes.wide.sm.w,\n minH: WidgetSizes.wide.sm.h,\n },\n },\n accordion: {\n max: {\n minW: WidgetSizes.standard.max.w,\n minH: WidgetSizes.standard.max.h,\n },\n xl: {\n minW: WidgetSizes.standard.xl.w,\n minH: WidgetSizes.standard.xl.h,\n },\n lg: {\n minW: WidgetSizes.standard.lg.w,\n minH: WidgetSizes.standard.lg.h,\n },\n md: {\n minW: WidgetSizes.standard.md.w,\n minH: WidgetSizes.standard.md.h,\n },\n sm: {\n minW: WidgetSizes.standard.sm.w,\n minH: WidgetSizes.standard.sm.h,\n },\n },\n};\n"],"names":["Config","handle","margin","animate","columnOpts","breakpointForWindow","breakpoints","w","c"],"mappings":"AAAa,MAAAA,EAAS,CACpBC,OAAQ,yBACRC,OAAQ,GACRC,SAAS,EACTC,WAAY,CACVC,qBAAqB,EACrBC,YAAa,CACX,CAAEC,EAAG,IAAKC,EAAG,GACb,CAAED,EAAG,KAAMC,EAAG"}
package/common/scss/scss/global.scss ADDED
@@ -0,0 +1,5 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
package/common/scss/scss/mixins.scss ADDED
@@ -0,0 +1,9 @@
1
+ @mixin visually-hidden {
2
+ clip: rect(0 0 0 0);
3
+ clip-path: inset(50%);
4
+ height: 1px;
5
+ overflow: hidden;
6
+ position: absolute;
7
+ white-space: nowrap;
8
+ width: 1px;
9
+ }
package/common/scss/scss/root.scss ADDED
@@ -0,0 +1 @@
1
+ @use './variables/index.scss';
package/common/scss/scss/utility/gridstack-shidoka.scss ADDED
@@ -0,0 +1,20 @@
1
+ @use '../../../../node_modules/gridstack/dist/src/gridstack.scss';
2
+ @use '../../../../node_modules/gridstack/dist/src/gridstack-extra.scss';
3
+
4
+ /* set a max width on the grid */
5
+ .grid-stack {
6
+ max-width: calc(1584px + 32px);
7
+ // margin: 0 auto; // shidoka grid should be left aligned by default
8
+ }
9
+
10
+ /* remove .grid-stack-item-content overflow */
11
+ .grid-stack > .grid-stack-item > .grid-stack-item-content {
12
+ overflow: initial;
13
+ }
14
+
15
+ /* custom resize handle */
16
+ .grid-stack-item > .ui-resizable-se {
17
+ transform: none;
18
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" stroke="%236D6D6D" stroke-width="2px" xmlns="http://www.w3.org/2000/svg"><path d="m9.5 14.5 5-5M4 14.5 14.5 4"></path></svg>');
19
+ background-size: 16px;
20
+ }
package/common/scss/scss/variables/index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use 'zindex.scss';
2
+ @use 'misc.scss';
package/common/scss/scss/variables/misc.scss ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --kd-header-height: 56px;
3
+ --kd-local-nav-width: 56px;
4
+ --kd-local-nav-width-expanded: 320px;
5
+ }
package/common/scss/scss/variables/zindex.scss ADDED
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --kd-z-overlay: 100000;
3
+ --kd-z-header: 10000;
4
+ --kd-z-local-nav: 9000;
5
+ }
package/components/reusable/widget/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { Widget } from './widget';
2
2
  export { WidgetDragHandle } from './widgetDragHandle';
3
+ export { WidgetGridstack } from './widgetGridstack';
3
4
  //# sourceMappingURL=index.d.ts.map
package/components/reusable/widget/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
package/components/reusable/widget/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{Widget}from"./widget.js";export{WidgetDragHandle}from"./widgetDragHandle.js";
1
+ export{Widget}from"./widget.js";export{WidgetDragHandle}from"./widgetDragHandle.js";export{WidgetGridstack}from"./widgetGridstack.js";
2
2
  //# sourceMappingURL=index.js.map
package/components/reusable/widget/sample-layout.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ declare const _default: {
2
+ max: {
3
+ minW: number;
4
+ minH: number;
5
+ w: number;
6
+ h: number;
7
+ id: string;
8
+ }[];
9
+ xl: {
10
+ minW: number;
11
+ minH: number;
12
+ w: number;
13
+ h: number;
14
+ id: string;
15
+ }[];
16
+ lg: {
17
+ minW: number;
18
+ minH: number;
19
+ w: number;
20
+ h: number;
21
+ id: string;
22
+ }[];
23
+ md: {
24
+ minW: number;
25
+ minH: number;
26
+ w: number;
27
+ h: number;
28
+ id: string;
29
+ }[];
30
+ sm: {
31
+ minW: number;
32
+ minH: number;
33
+ w: number;
34
+ h: number;
35
+ id: string;
36
+ }[];
37
+ };
38
+ export default _default;
39
+ //# sourceMappingURL=sample-layout.d.ts.map
package/components/reusable/widget/sample-layout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sample-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/widget/sample-layout.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAmNE"}
package/components/reusable/widget/widget.d.ts CHANGED
@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
4
4
  * @slot unnamed - Slot for widget content.
5
5
  * @slot action - Slot for action buttons.
6
6
  * @slot tooltip - Slot for tooltip in header.
7
- * @slot draghandle- Slot for drag handle.
7
+ * @slot draghandle - Slot for drag handle.
8
8
  */
9
9
  export declare class Widget extends LitElement {
10
10
  static styles: import("lit").CSSResultGroup;
package/components/reusable/widget/widget.js CHANGED
@@ -17,7 +17,7 @@ import{__decorate as t}from"../../../_virtual/_tslib.js";import'./../../../exter
17
17
  </div>
18
18
  </div>
19
19
 
20
- <div class="widget-content" tabindex="0">
20
+ <div class="widget-content">
21
21
  <slot @slotchange=${this._handleSlotChange}></slot>
22
22
  </div>
23
23
  </div>