@genesislcap/foundation-layout 14.121.0 → 14.122.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -8
- package/dist/custom-elements.json +118 -118
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -183,7 +183,7 @@ Use this function over `.layoutRequiredRegistrations(layout: SerialisedLayout)`
|
|
|
183
183
|
|
|
184
184
|
### Serialising layout
|
|
185
185
|
|
|
186
|
-
The JavaScript API can be used to manually save and load layout states. This only describes the state of the dynamic layout itself. It is the responsibility of
|
|
186
|
+
The JavaScript API can be used to manually save and load layout states. This only describes the state of the dynamic layout itself. It is the responsibility of each component within the layout to serialise its own state, if required.
|
|
187
187
|
To enable autosaving the layout see [here](#autosaving-layout).
|
|
188
188
|
|
|
189
189
|
#### [Get Layout](./docs/api/foundation-layout.foundationlayout.getlayout.md)
|
|
@@ -274,7 +274,7 @@ This section concerns the behaviour of elements inside the layout. If you are us
|
|
|
274
274
|
|
|
275
275
|
### Element lifecycle (gating)
|
|
276
276
|
|
|
277
|
-
Some actions that the user can perform with items in the layout
|
|
277
|
+
Some actions that the user can perform with items in the layout will run the component lifecycle functions (`connectedCallback` and `disconnectedCallback`) when you don't want them to run:
|
|
278
278
|
- when an item is dragged around the layout
|
|
279
279
|
- potentially, when another item is removed from the layout
|
|
280
280
|
- potentially, when new items are added to the layout
|
|
@@ -304,14 +304,14 @@ Throughout Foundation UI, there is no need to de-register a component that is re
|
|
|
304
304
|
|
|
305
305
|
### Managing the state
|
|
306
306
|
|
|
307
|
-
Items inside the layout can save and restore state using various methods, but it can become difficult to manage the state if you're adding the same item to the layout multiple times (multiple instances of the same web component).
|
|
307
|
+
Items inside the layout can save and restore the state using various methods, but it can become difficult to manage the state if you're adding the same item to the layout multiple times (multiple instances of the same web component).
|
|
308
308
|
|
|
309
|
-
You can implement the [LayoutComponentWithState](./docs/api/foundation-layout.layoutcomponentwithstate.md) interface which enables you to save and load the state *per instance* of your components. See the linked interface and the associated functions API documentation for examples and explanations of usage.
|
|
309
|
+
You can implement the [LayoutComponentWithState](./docs/api/foundation-layout.layoutcomponentwithstate.md) interface, which enables you to save and load the state *per instance* of your components. See the linked interface and the associated functions API documentation for examples and explanations of usage.
|
|
310
310
|
|
|
311
|
-
Usage of this interface is optional
|
|
311
|
+
Usage of this interface is optional; if you do not need to manage the state for your components in this way, then simply do not implement the interface.
|
|
312
312
|
|
|
313
313
|
:::warning
|
|
314
|
-
The layout system is only interacting with the immediately contained items - so if you have components that contain other components,
|
|
314
|
+
The layout system is only interacting with the immediately contained items - so if you have components that contain other components, each top-level component must interact with the contained components to manage their states.
|
|
315
315
|
:::
|
|
316
316
|
|
|
317
317
|
:::danger
|
|
@@ -328,8 +328,8 @@ There are certain limitations to this function, especially when using custom ele
|
|
|
328
328
|
As a general rule, if you need to have elements with FAST bindings inside the layout, wrap them in custom elements.
|
|
329
329
|
:::
|
|
330
330
|
|
|
331
|
-
If you are writing your own custom element
|
|
332
|
-
In the `@genesislcap/foundation-utils` package, there is a mix-in class `LifecycleMixin
|
|
331
|
+
If you are writing your own custom element that needs to work inside the layout, follow these steps.
|
|
332
|
+
In the `@genesislcap/foundation-utils` package, there is a mix-in class `LifecycleMixin`, which overrides the `cloneNode` API.
|
|
333
333
|
|
|
334
334
|
```typescript
|
|
335
335
|
// Make a call to `deepClone` and manually clone children
|
|
@@ -143,124 +143,6 @@
|
|
|
143
143
|
}
|
|
144
144
|
]
|
|
145
145
|
},
|
|
146
|
-
{
|
|
147
|
-
"kind": "javascript-module",
|
|
148
|
-
"path": "src/styles/constants.ts",
|
|
149
|
-
"declarations": [
|
|
150
|
-
{
|
|
151
|
-
"kind": "variable",
|
|
152
|
-
"name": "glVisualConfig",
|
|
153
|
-
"type": {
|
|
154
|
-
"text": "Omit<LayoutConfig, 'root'>"
|
|
155
|
-
},
|
|
156
|
-
"default": "{\n dimensions: {\n headerHeight: 38,\n borderWidth: 12,\n },\n header: {\n maximise: 'maximise',\n minimise: 'minimise',\n popout: false,\n },\n}"
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"kind": "variable",
|
|
160
|
-
"name": "LAYOUT_ICONS",
|
|
161
|
-
"type": {
|
|
162
|
-
"text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
|
|
163
|
-
},
|
|
164
|
-
"default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
|
|
165
|
-
"description": "A collection of SVG icons in base64 format.",
|
|
166
|
-
"privacy": "public"
|
|
167
|
-
}
|
|
168
|
-
],
|
|
169
|
-
"exports": [
|
|
170
|
-
{
|
|
171
|
-
"kind": "js",
|
|
172
|
-
"name": "glVisualConfig",
|
|
173
|
-
"declaration": {
|
|
174
|
-
"name": "glVisualConfig",
|
|
175
|
-
"module": "src/styles/constants.ts"
|
|
176
|
-
}
|
|
177
|
-
},
|
|
178
|
-
{
|
|
179
|
-
"kind": "js",
|
|
180
|
-
"name": "LAYOUT_ICONS",
|
|
181
|
-
"declaration": {
|
|
182
|
-
"name": "LAYOUT_ICONS",
|
|
183
|
-
"module": "src/styles/constants.ts"
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
]
|
|
187
|
-
},
|
|
188
|
-
{
|
|
189
|
-
"kind": "javascript-module",
|
|
190
|
-
"path": "src/styles/dragging.styles.ts",
|
|
191
|
-
"declarations": [
|
|
192
|
-
{
|
|
193
|
-
"kind": "variable",
|
|
194
|
-
"name": "globalDraggingStyles",
|
|
195
|
-
"default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\n box-shadow: inset 0 0 30px #000000;\n outline: 1px dashed #cccccc;\n transition: all 200ms ease;\n }\n .lm_dropTargetIndicator .lm_inner {\n background: var(${neutralFillStealthRest.cssCustomProperty});\n opacity: 0.2;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n`",
|
|
196
|
-
"description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
|
|
197
|
-
}
|
|
198
|
-
],
|
|
199
|
-
"exports": [
|
|
200
|
-
{
|
|
201
|
-
"kind": "js",
|
|
202
|
-
"name": "globalDraggingStyles",
|
|
203
|
-
"declaration": {
|
|
204
|
-
"name": "globalDraggingStyles",
|
|
205
|
-
"module": "src/styles/dragging.styles.ts"
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
]
|
|
209
|
-
},
|
|
210
|
-
{
|
|
211
|
-
"kind": "javascript-module",
|
|
212
|
-
"path": "src/styles/index.ts",
|
|
213
|
-
"declarations": [],
|
|
214
|
-
"exports": [
|
|
215
|
-
{
|
|
216
|
-
"kind": "js",
|
|
217
|
-
"name": "*",
|
|
218
|
-
"declaration": {
|
|
219
|
-
"name": "*",
|
|
220
|
-
"package": "./constants"
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"kind": "js",
|
|
225
|
-
"name": "*",
|
|
226
|
-
"declaration": {
|
|
227
|
-
"name": "*",
|
|
228
|
-
"package": "./dragging.styles"
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
{
|
|
232
|
-
"kind": "js",
|
|
233
|
-
"name": "*",
|
|
234
|
-
"declaration": {
|
|
235
|
-
"name": "*",
|
|
236
|
-
"package": "./layout.styles"
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
]
|
|
240
|
-
},
|
|
241
|
-
{
|
|
242
|
-
"kind": "javascript-module",
|
|
243
|
-
"path": "src/styles/layout.styles.ts",
|
|
244
|
-
"declarations": [
|
|
245
|
-
{
|
|
246
|
-
"kind": "variable",
|
|
247
|
-
"name": "layoutStyles",
|
|
248
|
-
"default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n .lm_goldenlayout {\n padding: 1px;\n background: ${neutralLayer1};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n .lm_maximised .lm_header {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: ${neutralLayer3};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n border: 1px solid;\n border-color: #2e3339;\n box-sizing: border-box;\n }\n\n .lm-header {\n z-index: 1;\n }\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n z-index: 2;\n box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.35);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: ${neutralLayer3};\n }\n .lm_header .lm_tab.lm_active {\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-bottom: 0;\n color: ${accentFillRest};\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: ${neutralLayer4};\n border: 1px solid;\n border-bottom-color: #2e3339;\n border-bottom: 0px solid;\n border-color: rgba(0, 0, 0, 0.35);\n border-radius: calc(${controlCornerRadius} * 1.5px) calc(${controlCornerRadius} * 1.5px) 0 0;\n box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.35);\n color: rgba(255, 255, 255, 0.3);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 700;\n height: 30px;\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: rgba(255, 255, 255, 0.1);\n color: #f1f1f1;\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: 30px;\n height: 30px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 16px;\n background-color: rgba(255, 255, 255, 0.03);\n border-radius: calc(${controlCornerRadius} * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: rgba(255, 255, 255, 0.1);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: 10px;\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: ${accentFillRest};\n opacity: 0.7;\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n .lm_header .lm_tabdropdown_list {\n top: 38px;\n right: 108px;\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-radius: calc(${controlCornerRadius} * 1.5px);\n box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n }\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: #c9c9c9;\n height: 36px;\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n .lm_row > .lm_item {\n float: left;\n }\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n .lm_maximise_placeholder {\n display: none;\n }\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: ${accentFillRest};\n border-radius: calc(${controlCornerRadius} * 4px);\n }\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize;\n }\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n z-index: 1;\n }\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n .lm_header .lm_tabs {\n position: absolute;\n }\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: 14px;\n height: 14px;\n position: absolute;\n top: 11px;\n right: 0;\n text-align: center;\n }\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
|
|
249
|
-
"description": "`ElementStyles` which defines the css for FoundationLayout.",
|
|
250
|
-
"privacy": "public"
|
|
251
|
-
}
|
|
252
|
-
],
|
|
253
|
-
"exports": [
|
|
254
|
-
{
|
|
255
|
-
"kind": "js",
|
|
256
|
-
"name": "layoutStyles",
|
|
257
|
-
"declaration": {
|
|
258
|
-
"name": "layoutStyles",
|
|
259
|
-
"module": "src/styles/layout.styles.ts"
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
]
|
|
263
|
-
},
|
|
264
146
|
{
|
|
265
147
|
"kind": "javascript-module",
|
|
266
148
|
"path": "src/main/index.ts",
|
|
@@ -1235,6 +1117,124 @@
|
|
|
1235
1117
|
}
|
|
1236
1118
|
]
|
|
1237
1119
|
},
|
|
1120
|
+
{
|
|
1121
|
+
"kind": "javascript-module",
|
|
1122
|
+
"path": "src/styles/constants.ts",
|
|
1123
|
+
"declarations": [
|
|
1124
|
+
{
|
|
1125
|
+
"kind": "variable",
|
|
1126
|
+
"name": "glVisualConfig",
|
|
1127
|
+
"type": {
|
|
1128
|
+
"text": "Omit<LayoutConfig, 'root'>"
|
|
1129
|
+
},
|
|
1130
|
+
"default": "{\n dimensions: {\n headerHeight: 38,\n borderWidth: 12,\n },\n header: {\n maximise: 'maximise',\n minimise: 'minimise',\n popout: false,\n },\n}"
|
|
1131
|
+
},
|
|
1132
|
+
{
|
|
1133
|
+
"kind": "variable",
|
|
1134
|
+
"name": "LAYOUT_ICONS",
|
|
1135
|
+
"type": {
|
|
1136
|
+
"text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
|
|
1137
|
+
},
|
|
1138
|
+
"default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
|
|
1139
|
+
"description": "A collection of SVG icons in base64 format.",
|
|
1140
|
+
"privacy": "public"
|
|
1141
|
+
}
|
|
1142
|
+
],
|
|
1143
|
+
"exports": [
|
|
1144
|
+
{
|
|
1145
|
+
"kind": "js",
|
|
1146
|
+
"name": "glVisualConfig",
|
|
1147
|
+
"declaration": {
|
|
1148
|
+
"name": "glVisualConfig",
|
|
1149
|
+
"module": "src/styles/constants.ts"
|
|
1150
|
+
}
|
|
1151
|
+
},
|
|
1152
|
+
{
|
|
1153
|
+
"kind": "js",
|
|
1154
|
+
"name": "LAYOUT_ICONS",
|
|
1155
|
+
"declaration": {
|
|
1156
|
+
"name": "LAYOUT_ICONS",
|
|
1157
|
+
"module": "src/styles/constants.ts"
|
|
1158
|
+
}
|
|
1159
|
+
}
|
|
1160
|
+
]
|
|
1161
|
+
},
|
|
1162
|
+
{
|
|
1163
|
+
"kind": "javascript-module",
|
|
1164
|
+
"path": "src/styles/dragging.styles.ts",
|
|
1165
|
+
"declarations": [
|
|
1166
|
+
{
|
|
1167
|
+
"kind": "variable",
|
|
1168
|
+
"name": "globalDraggingStyles",
|
|
1169
|
+
"default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\n box-shadow: inset 0 0 30px #000000;\n outline: 1px dashed #cccccc;\n transition: all 200ms ease;\n }\n .lm_dropTargetIndicator .lm_inner {\n background: var(${neutralFillStealthRest.cssCustomProperty});\n opacity: 0.2;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n`",
|
|
1170
|
+
"description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
|
|
1171
|
+
}
|
|
1172
|
+
],
|
|
1173
|
+
"exports": [
|
|
1174
|
+
{
|
|
1175
|
+
"kind": "js",
|
|
1176
|
+
"name": "globalDraggingStyles",
|
|
1177
|
+
"declaration": {
|
|
1178
|
+
"name": "globalDraggingStyles",
|
|
1179
|
+
"module": "src/styles/dragging.styles.ts"
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
]
|
|
1183
|
+
},
|
|
1184
|
+
{
|
|
1185
|
+
"kind": "javascript-module",
|
|
1186
|
+
"path": "src/styles/index.ts",
|
|
1187
|
+
"declarations": [],
|
|
1188
|
+
"exports": [
|
|
1189
|
+
{
|
|
1190
|
+
"kind": "js",
|
|
1191
|
+
"name": "*",
|
|
1192
|
+
"declaration": {
|
|
1193
|
+
"name": "*",
|
|
1194
|
+
"package": "./constants"
|
|
1195
|
+
}
|
|
1196
|
+
},
|
|
1197
|
+
{
|
|
1198
|
+
"kind": "js",
|
|
1199
|
+
"name": "*",
|
|
1200
|
+
"declaration": {
|
|
1201
|
+
"name": "*",
|
|
1202
|
+
"package": "./dragging.styles"
|
|
1203
|
+
}
|
|
1204
|
+
},
|
|
1205
|
+
{
|
|
1206
|
+
"kind": "js",
|
|
1207
|
+
"name": "*",
|
|
1208
|
+
"declaration": {
|
|
1209
|
+
"name": "*",
|
|
1210
|
+
"package": "./layout.styles"
|
|
1211
|
+
}
|
|
1212
|
+
}
|
|
1213
|
+
]
|
|
1214
|
+
},
|
|
1215
|
+
{
|
|
1216
|
+
"kind": "javascript-module",
|
|
1217
|
+
"path": "src/styles/layout.styles.ts",
|
|
1218
|
+
"declarations": [
|
|
1219
|
+
{
|
|
1220
|
+
"kind": "variable",
|
|
1221
|
+
"name": "layoutStyles",
|
|
1222
|
+
"default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n .lm_goldenlayout {\n padding: 1px;\n background: ${neutralLayer1};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n }\n .lm_maximised .lm_header {\n background-color: ${neutralLayer4};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: ${neutralLayer3};\n border-radius: calc(${controlCornerRadius} * 1.5px);\n border: 1px solid;\n border-color: #2e3339;\n box-sizing: border-box;\n }\n\n .lm-header {\n z-index: 1;\n }\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n z-index: 2;\n box-shadow: 0px -1px 15px rgba(0, 0, 0, 0.35);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: ${neutralLayer3};\n }\n .lm_header .lm_tab.lm_active {\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-bottom: 0;\n color: ${accentFillRest};\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: ${neutralLayer4};\n border: 1px solid;\n border-bottom-color: #2e3339;\n border-bottom: 0px solid;\n border-color: rgba(0, 0, 0, 0.35);\n border-radius: calc(${controlCornerRadius} * 1.5px) calc(${controlCornerRadius} * 1.5px) 0 0;\n box-shadow: 1px -1px 2px rgba(0, 0, 0, 0.35);\n color: rgba(255, 255, 255, 0.3);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 700;\n height: 30px;\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: rgba(255, 255, 255, 0.1);\n color: #f1f1f1;\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: 30px;\n height: 30px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 16px;\n background-color: rgba(255, 255, 255, 0.03);\n border-radius: calc(${controlCornerRadius} * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: rgba(255, 255, 255, 0.1);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: 10px;\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: ${accentFillRest};\n opacity: 0.7;\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n .lm_header .lm_tabdropdown_list {\n top: 38px;\n right: 108px;\n background-color: ${neutralLayer3};\n border: 1px solid;\n border-color: #2e3339;\n border-radius: calc(${controlCornerRadius} * 1.5px);\n box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);\n }\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: #c9c9c9;\n height: 36px;\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n .lm_row > .lm_item {\n float: left;\n }\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n .lm_maximise_placeholder {\n display: none;\n }\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: ${accentFillRest};\n border-radius: calc(${controlCornerRadius} * 4px);\n }\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize;\n }\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n z-index: 1;\n }\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n .lm_header .lm_tabs {\n position: absolute;\n }\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: 14px;\n height: 14px;\n position: absolute;\n top: 11px;\n right: 0;\n text-align: center;\n }\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
|
|
1223
|
+
"description": "`ElementStyles` which defines the css for FoundationLayout.",
|
|
1224
|
+
"privacy": "public"
|
|
1225
|
+
}
|
|
1226
|
+
],
|
|
1227
|
+
"exports": [
|
|
1228
|
+
{
|
|
1229
|
+
"kind": "js",
|
|
1230
|
+
"name": "layoutStyles",
|
|
1231
|
+
"declaration": {
|
|
1232
|
+
"name": "layoutStyles",
|
|
1233
|
+
"module": "src/styles/layout.styles.ts"
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1236
|
+
]
|
|
1237
|
+
},
|
|
1238
1238
|
{
|
|
1239
1239
|
"kind": "javascript-module",
|
|
1240
1240
|
"path": "src/utils/constants.ts",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-layout",
|
|
3
3
|
"description": "Genesis Foundation UI App Layout",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.122.0",
|
|
5
5
|
"license": "SEE LICENSE IN license.txt",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/foundation-layout.d.ts",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
"test:debug": "genx test --debug"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@genesislcap/foundation-testing": "14.
|
|
31
|
-
"@genesislcap/genx": "14.
|
|
30
|
+
"@genesislcap/foundation-testing": "14.122.0",
|
|
31
|
+
"@genesislcap/genx": "14.122.0",
|
|
32
32
|
"rimraf": "^3.0.2"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@genesis-community/golden-layout": "^2.11.0",
|
|
36
|
-
"@genesislcap/foundation-comms": "14.
|
|
37
|
-
"@genesislcap/foundation-logger": "14.
|
|
38
|
-
"@genesislcap/foundation-utils": "14.
|
|
36
|
+
"@genesislcap/foundation-comms": "14.122.0",
|
|
37
|
+
"@genesislcap/foundation-logger": "14.122.0",
|
|
38
|
+
"@genesislcap/foundation-utils": "14.122.0",
|
|
39
39
|
"@microsoft/fast-components": "^2.21.3",
|
|
40
40
|
"@microsoft/fast-element": "^1.7.0",
|
|
41
41
|
"@microsoft/fast-foundation": "^2.33.2",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
52
|
"customElements": "dist/custom-elements.json",
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "78b6b5b81da76d97c7475b84b71af074106681f3"
|
|
54
54
|
}
|