@genesislcap/foundation-layout 14.491.1 → 14.492.0-GENC-1462.1

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 (13) hide show
  1. package/dist/custom-elements.json +126 -122
  2. package/dist/dts/main/layout-main.d.ts +1 -0
  3. package/dist/dts/main/layout-main.d.ts.map +1 -1
  4. package/dist/dts/react.d.ts +1 -0
  5. package/dist/dts/utils/events.d.ts +8 -0
  6. package/dist/dts/utils/events.d.ts.map +1 -1
  7. package/dist/esm/main/layout-main.js +8 -0
  8. package/dist/esm/utils/events.js +8 -0
  9. package/dist/foundation-layout.api.json +3 -3
  10. package/dist/foundation-layout.d.ts +9 -0
  11. package/dist/react.cjs +6 -1
  12. package/dist/react.mjs +6 -1
  13. package/package.json +15 -15
package/dist/custom-elements.json CHANGED
@@ -185,6 +185,125 @@
185
185
  }
186
186
  ]
187
187
  },
188
+ {
189
+ "kind": "javascript-module",
190
+ "path": "src/styles/constants.ts",
191
+ "declarations": [
192
+ {
193
+ "kind": "function",
194
+ "name": "glVisualConfig",
195
+ "return": {
196
+ "type": {
197
+ "text": "Omit<LayoutConfig, 'root'>"
198
+ }
199
+ }
200
+ },
201
+ {
202
+ "kind": "variable",
203
+ "name": "LAYOUT_ICONS",
204
+ "type": {
205
+ "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
206
+ },
207
+ "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
208
+ "description": "A collection of SVG icons in base64 format.",
209
+ "privacy": "public"
210
+ }
211
+ ],
212
+ "exports": [
213
+ {
214
+ "kind": "js",
215
+ "name": "glVisualConfig",
216
+ "declaration": {
217
+ "name": "glVisualConfig",
218
+ "module": "src/styles/constants.ts"
219
+ }
220
+ },
221
+ {
222
+ "kind": "js",
223
+ "name": "LAYOUT_ICONS",
224
+ "declaration": {
225
+ "name": "LAYOUT_ICONS",
226
+ "module": "src/styles/constants.ts"
227
+ }
228
+ }
229
+ ]
230
+ },
231
+ {
232
+ "kind": "javascript-module",
233
+ "path": "src/styles/dragging.styles.ts",
234
+ "declarations": [
235
+ {
236
+ "kind": "variable",
237
+ "name": "globalDraggingStyles",
238
+ "default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\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 cursor: move;\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_title {\n color: white;\n padding-left: 10px;\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`",
239
+ "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"
240
+ }
241
+ ],
242
+ "exports": [
243
+ {
244
+ "kind": "js",
245
+ "name": "globalDraggingStyles",
246
+ "declaration": {
247
+ "name": "globalDraggingStyles",
248
+ "module": "src/styles/dragging.styles.ts"
249
+ }
250
+ }
251
+ ]
252
+ },
253
+ {
254
+ "kind": "javascript-module",
255
+ "path": "src/styles/index.ts",
256
+ "declarations": [],
257
+ "exports": [
258
+ {
259
+ "kind": "js",
260
+ "name": "*",
261
+ "declaration": {
262
+ "name": "*",
263
+ "package": "./constants"
264
+ }
265
+ },
266
+ {
267
+ "kind": "js",
268
+ "name": "*",
269
+ "declaration": {
270
+ "name": "*",
271
+ "package": "./dragging.styles"
272
+ }
273
+ },
274
+ {
275
+ "kind": "js",
276
+ "name": "*",
277
+ "declaration": {
278
+ "name": "*",
279
+ "package": "./layout.styles"
280
+ }
281
+ }
282
+ ]
283
+ },
284
+ {
285
+ "kind": "javascript-module",
286
+ "path": "src/styles/layout.styles.ts",
287
+ "declarations": [
288
+ {
289
+ "kind": "variable",
290
+ "name": "layoutStyles",
291
+ "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n :host {\n --foundation-tab-height: calc(\n (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n );\n }\n\n .lm_goldenlayout {\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n font-family: var(--body-font);\n box-sizing: border-box;\n }\n\n .lm_goldenlayout * {\n box-sizing: border-box;\n }\n\n .lm_stack.lm_item {\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n border-style: solid;\n border-width: var(--rapid-layout-item-border-width, 0);\n border-color: var(--rapid-layout-item-border-color, var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n box-sizing: border-box;\n }\n\n .lm_maximised .lm_header {\n border-bottom: var(--card-border, 0);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px)\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border: var(--rapid-layout-item-inner-border, 1px solid var(--neutral-stroke-rest));\n box-sizing: border-box;\n color: var(--neutral-foreground-rest);\n }\n\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_header .lm_tab.lm_active {\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n color: var(--accent-foreground-rest);\n border-style: solid;\n border-width: var(--tab-active-border-width, 1px 1px 0 1px);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background: var(--tab-rest-background-color, var(--neutral-layer-4));\n border-style: solid;\n border-width: var(--tab-rest-border-width, 1px);\n border-color: var(--tab-rest-border-color, transparent);\n border-radius: calc(var(--control-corner-radius) * 1.5px)\n calc(var(--control-corner-radius) * 1.5px) 0 0;\n color: var(--accent-foreground-rest);\n display: flex;\n font-family: inherit;\n font-size: var(--type-ramp-minus-1-font-size);\n font-weight: 400;\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n margin-right: 2px;\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n float: left;\n cursor: pointer;\n position: relative;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: var(--neutral-layer-card-container);\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.45);\n background-color: var(\n --icon-button-background,\n color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%)\n );\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\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: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n background-repeat: no-repeat;\n background-position: center;\n margin-left: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n position: relative;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: var(--neutral-foreground-hint);\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: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n right: 108px;\n background-color: var(--neutral-layer-3);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 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: var(--neutral-foreground-rest);\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n border-radius: 0;\n overflow: visible;\n text-overflow: unset;\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: 0;\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: var(--accent-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 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 !important;\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 !important;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n border-bottom: var(--card-border, 0);\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 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 user-select: none;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\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 box-shadow: none;\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`",
292
+ "description": "`ElementStyles` which defines the css for FoundationLayout.",
293
+ "privacy": "public"
294
+ }
295
+ ],
296
+ "exports": [
297
+ {
298
+ "kind": "js",
299
+ "name": "layoutStyles",
300
+ "declaration": {
301
+ "name": "layoutStyles",
302
+ "module": "src/styles/layout.styles.ts"
303
+ }
304
+ }
305
+ ]
306
+ },
188
307
  {
189
308
  "kind": "javascript-module",
190
309
  "path": "src/main/index.ts",
@@ -951,6 +1070,10 @@
951
1070
  {
952
1071
  "description": "emitted when the user drags the divider to resize elements",
953
1072
  "name": "item-resized"
1073
+ },
1074
+ {
1075
+ "description": "emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change",
1076
+ "name": "state-changed"
954
1077
  }
955
1078
  ],
956
1079
  "attributes": [
@@ -1454,125 +1577,6 @@
1454
1577
  }
1455
1578
  ]
1456
1579
  },
1457
- {
1458
- "kind": "javascript-module",
1459
- "path": "src/styles/constants.ts",
1460
- "declarations": [
1461
- {
1462
- "kind": "function",
1463
- "name": "glVisualConfig",
1464
- "return": {
1465
- "type": {
1466
- "text": "Omit<LayoutConfig, 'root'>"
1467
- }
1468
- }
1469
- },
1470
- {
1471
- "kind": "variable",
1472
- "name": "LAYOUT_ICONS",
1473
- "type": {
1474
- "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
1475
- },
1476
- "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
1477
- "description": "A collection of SVG icons in base64 format.",
1478
- "privacy": "public"
1479
- }
1480
- ],
1481
- "exports": [
1482
- {
1483
- "kind": "js",
1484
- "name": "glVisualConfig",
1485
- "declaration": {
1486
- "name": "glVisualConfig",
1487
- "module": "src/styles/constants.ts"
1488
- }
1489
- },
1490
- {
1491
- "kind": "js",
1492
- "name": "LAYOUT_ICONS",
1493
- "declaration": {
1494
- "name": "LAYOUT_ICONS",
1495
- "module": "src/styles/constants.ts"
1496
- }
1497
- }
1498
- ]
1499
- },
1500
- {
1501
- "kind": "javascript-module",
1502
- "path": "src/styles/dragging.styles.ts",
1503
- "declarations": [
1504
- {
1505
- "kind": "variable",
1506
- "name": "globalDraggingStyles",
1507
- "default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\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 cursor: move;\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_title {\n color: white;\n padding-left: 10px;\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`",
1508
- "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"
1509
- }
1510
- ],
1511
- "exports": [
1512
- {
1513
- "kind": "js",
1514
- "name": "globalDraggingStyles",
1515
- "declaration": {
1516
- "name": "globalDraggingStyles",
1517
- "module": "src/styles/dragging.styles.ts"
1518
- }
1519
- }
1520
- ]
1521
- },
1522
- {
1523
- "kind": "javascript-module",
1524
- "path": "src/styles/index.ts",
1525
- "declarations": [],
1526
- "exports": [
1527
- {
1528
- "kind": "js",
1529
- "name": "*",
1530
- "declaration": {
1531
- "name": "*",
1532
- "package": "./constants"
1533
- }
1534
- },
1535
- {
1536
- "kind": "js",
1537
- "name": "*",
1538
- "declaration": {
1539
- "name": "*",
1540
- "package": "./dragging.styles"
1541
- }
1542
- },
1543
- {
1544
- "kind": "js",
1545
- "name": "*",
1546
- "declaration": {
1547
- "name": "*",
1548
- "package": "./layout.styles"
1549
- }
1550
- }
1551
- ]
1552
- },
1553
- {
1554
- "kind": "javascript-module",
1555
- "path": "src/styles/layout.styles.ts",
1556
- "declarations": [
1557
- {
1558
- "kind": "variable",
1559
- "name": "layoutStyles",
1560
- "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n :host {\n --foundation-tab-height: calc(\n (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n );\n }\n\n .lm_goldenlayout {\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n font-family: var(--body-font);\n box-sizing: border-box;\n }\n\n .lm_goldenlayout * {\n box-sizing: border-box;\n }\n\n .lm_stack.lm_item {\n background-color: var(--rapid-layout-item-background, var(--neutral-layer-3));\n border-style: solid;\n border-width: var(--rapid-layout-item-border-width, 0);\n border-color: var(--rapid-layout-item-border-color, var(--neutral-stroke-rest));\n border-radius: var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n box-sizing: border-box;\n }\n\n .lm_maximised .lm_header {\n border-bottom: var(--card-border, 0);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px) calc(var(--control-corner-radius) * 1.5px)\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px))\n var(--card-corner-radius, calc(var(--control-corner-radius) * 1.5px));\n border: var(--rapid-layout-item-inner-border, 1px solid var(--neutral-stroke-rest));\n box-sizing: border-box;\n color: var(--neutral-foreground-rest);\n }\n\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_header .lm_tab.lm_active {\n background: var(--tab-active-background-color, var(--neutral-layer-card-container));\n color: var(--accent-foreground-rest);\n border-style: solid;\n border-width: var(--tab-active-border-width, 1px 1px 0 1px);\n border-color: var(--tab-active-border-color, var(--neutral-stroke-rest));\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background: var(--tab-rest-background-color, var(--neutral-layer-4));\n border-style: solid;\n border-width: var(--tab-rest-border-width, 1px);\n border-color: var(--tab-rest-border-color, transparent);\n border-radius: calc(var(--control-corner-radius) * 1.5px)\n calc(var(--control-corner-radius) * 1.5px) 0 0;\n color: var(--accent-foreground-rest);\n display: flex;\n font-family: inherit;\n font-size: var(--type-ramp-minus-1-font-size);\n font-weight: 400;\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n margin-right: 2px;\n padding: 0 calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n float: left;\n cursor: pointer;\n position: relative;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: var(--neutral-layer-card-container);\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.45);\n background-color: var(\n --icon-button-background,\n color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%)\n );\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 1;\n }\n .lm_header .lm_controls > *:hover {\n background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\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: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n background-repeat: no-repeat;\n background-position: center;\n margin-left: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);\n position: relative;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: var(--neutral-foreground-hint);\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: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n right: 108px;\n background-color: var(--neutral-layer-3);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 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: var(--neutral-foreground-rest);\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n border-radius: 0;\n overflow: visible;\n text-overflow: unset;\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: 0;\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: var(--accent-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 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 !important;\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 !important;\n }\n .lm_header {\n overflow: visible;\n position: relative;\n border-bottom: var(--card-border, 0);\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 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 user-select: none;\n }\n .lm_header .lm_tab .lm_close_tab {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\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 box-shadow: none;\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`",
1561
- "description": "`ElementStyles` which defines the css for FoundationLayout.",
1562
- "privacy": "public"
1563
- }
1564
- ],
1565
- "exports": [
1566
- {
1567
- "kind": "js",
1568
- "name": "layoutStyles",
1569
- "declaration": {
1570
- "name": "layoutStyles",
1571
- "module": "src/styles/layout.styles.ts"
1572
- }
1573
- }
1574
- ]
1575
- },
1576
1580
  {
1577
1581
  "kind": "javascript-module",
1578
1582
  "path": "src/utils/constants.ts",
@@ -1756,10 +1760,10 @@
1756
1760
  "kind": "variable",
1757
1761
  "name": "LayoutEmitEvents",
1758
1762
  "type": {
1759
- "text": "{\n firstLoaded: 'first-loaded',\n itemAdded: 'item-added',\n itemRemoved: 'item-removed',\n itemResized: 'item-resized',\n}"
1763
+ "text": "{\n firstLoaded: 'first-loaded',\n itemAdded: 'item-added',\n itemRemoved: 'item-removed',\n itemResized: 'item-resized',\n stateChanged: 'state-changed',\n}"
1760
1764
  },
1761
- "default": "{\n firstLoaded: 'first-loaded',\n itemAdded: 'item-added',\n itemRemoved: 'item-removed',\n itemResized: 'item-resized',\n}",
1762
- "description": "Defines events that the layout system emits\n\n'firstLoaded' - emitted when the layout has finished loading the first time\nusing the declarative API after DEFAULT_RELOAD_BUFFER ms.\n<br/>\n'itemAdded' - emitted when an item is added to the layout'\n<br/>\n'itemRemoved' - emitted when an item is removed from the layout'\n<br/>\n'itemResized' - emitted when the user drags the divider to resize elements",
1765
+ "default": "{\n firstLoaded: 'first-loaded',\n itemAdded: 'item-added',\n itemRemoved: 'item-removed',\n itemResized: 'item-resized',\n stateChanged: 'state-changed',\n}",
1766
+ "description": "Defines events that the layout system emits\n\n'firstLoaded' - emitted when the layout has finished loading the first time\nusing the declarative API after DEFAULT_RELOAD_BUFFER ms.\n<br/>\n'itemAdded' - emitted when an item is added to the layout'\n<br/>\n'itemRemoved' - emitted when an item is removed from the layout'\n<br/>\n'itemResized' - emitted when the user drags the divider to resize elements\n<br/>\n'stateChanged' - emitted on every persisted layout change. This is the broadest\nevent: it fires wherever the layout caches/saves its state, which includes item\nadd/remove/resize but ALSO the changes the granular events miss — dragging a pane\nto a new position, loading a whole layout via FoundationLayout.loadLayout,\nreverting to the default, and contained-item autosave requests. Prefer this when\nyou need to mirror the layout to your own store and must not miss any change.",
1763
1767
  "privacy": "public"
1764
1768
  },
1765
1769
  {
package/dist/dts/main/layout-main.d.ts CHANGED
@@ -14,6 +14,7 @@ export { layoutStyles } from '../styles';
14
14
  * @fires item-added - emitted when an item is added to the layout
15
15
  * @fires item-removed - emitted when an item is removed from the layout
16
16
  * @fires item-resized - emitted when the user drags the divider to resize elements
17
+ * @fires state-changed - emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change
17
18
  */
18
19
  export declare class FoundationLayout extends FoundationElement implements LayoutComponent {
19
20
  #private;
package/dist/dts/main/layout-main.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"layout-main.d.ts","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EAGZ,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAGL,gBAAgB,EAChB,aAAa,EACb,YAAY,EAOZ,eAAe,EAGf,kBAAkB,EAGlB,SAAS,EAET,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAE,gCAAgC,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAmBzC;;;;;;;;;;;;GAYG;AACH,qBAAa,gBAAiB,SAAQ,iBAAkB,YAAW,eAAe;;IAChF,OAAO,CAAC,MAAM,CAAe;IAC7B,gBAAgB;IAChB,aAAa,EAAE,WAAW,CAAC;IAC3B,OAAO,CAAC,YAAY,CAAqC;IACzD,OAAO,CAAC,mBAAmB,CAAqC;IAEhE,gBAAgB;IAChB,CAAC,aAAa,CAAC,EAAG,MAAM,CAAU;IAElC;;;;OAIG;IACmC,YAAY,EAAE,MAAM,CAAyB;IACnF,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,oBAAoB,CAAK;IAEjC,gBAAgB;IACV,OAAO,CAAC,IAAI,CAAO;IAEzB,gBAAgB;IACP,OAAO,CAAC,OAAO,CAAU;IAClC;;;;;OAKG;IACmC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC3D;;;;OAIG;IACS,sBAAsB,GAAI,aAAa,MAAM,YAC2B;IAEpF;;;OAGG;IACH,gBAAgB,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC;IAE3C;;;;;;;;;;OAUG;IACS,cAAc,UAAS;IACnC,gBAAgB;IACJ,mBAAmB,UAAS;IAExC;;;;;OAKG;IACH,aAAa,EAAE,YAAY,EAAE,CAAM;IAEnC;;;OAGG;IACS,QAAQ,EAAE,OAAO,CAAS;IAEtC;;;;;OAKG;IACI,KAAK,EAAG,sBAAsB,CAAU;IAE/C;;;;;;;OAOG;IACI,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAa;IAE5D,gBAAgB;IACJ,SAAS,UAAS;IAE9B,gBAAgB;IAChB,gBAAgB,EAAE,gCAAgC,CAAC;IACnD;;;;OAIG;IACS,YAAY,EAAE,kBAAkB,GAAG,SAAS,CAAa;IAErE,gBAAgB;;IAahB,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IA+BzB,gBAAgB;IAChB,oBAAoB,IAAI,IAAI;IAY5B,gBAAgB;IAChB,OAAO,CAAC,WAAW;IAInB,gBAAgB;IAChB,OAAO,CAAC,UAAU;IAMlB,gBAAgB;IAChB,OAAO,CAAC,eAAe;IAKvB,gBAAgB;IAChB,OAAO,CAAC,gBAAgB;IAIxB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAOzB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAKzB,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAIzB,gBAAgB;IAChB,OAAO,CAAC,kBAAkB;IAI1B,gBAAgB;IAChB,OAAO,CAAC,kBAAkB;IAI1B,gBAAgB;IACJ,OAAO,CAAC,eAAe,CAAqB;IACxD,gBAAgB;IAChB,sBAAsB;IAQtB;;OAEG;IAEH;;;;;;;;;;OAUG;IACH,MAAM,CAAC,2BAA2B,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,EAAE;IActE;;;;;;;;OAQG;IACH,eAAe,IAAI,MAAM,EAAE;IAI3B;;;;;;OAMG;IACH,SAAS,IAAI,gBAAgB;IA8B7B;;;;;;;;;;;OAWG;IACH,qBAAqB,IAAI,OAAO;IAwChC;;;;;;;;;;;;;OAaG;IACH,6BAA6B,IAAI,OAAO;IAcxC;;;;;;;;;;;;OAYG;IACH,+BAA+B,IAAI,OAAO;IAyB1C;;;;;;;;;;;;OAYG;IACH,UAAU,CACR,MAAM,EAAE,gBAAgB,EACxB,iBAAiB,GAAE,aAAa,GAAG,OAAiB,EACpD,YAAY,GAAE,OAAe;IAwC/B;;;;;;;;;;;OAWG;IACH,OAAO,CACL,MAAM,EAAE,uBAAuB,GAAG,uBAAuB,EAAE,EAC3D,SAAS,GAAE,SAAmC;IAsHhD;;;;;;;;;OASG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,GAAE,OAAe,GAAG,MAAM;IAgDjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0CG;IACH,YAAY,CAAC,YAAY,EAAE,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,gBAAgB,GAAG,MAAM;IA4B3F;;OAEG;IAEH;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,mBAAmB,IAAI,IAAI;IAuB3B;;;;;;;OAOG;IACH,gBAAgB,CAAC,CAAC,SAAS,cAAc,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC;IAetD;;;;;;;;OAQG;IACH,wBAAwB,CAAC,MAAM,EAAE,kBAAkB,GAAG,MAAM;IA4J5D;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAehC;;;;;;;;SAQK;IACL,OAAO,CAAC,kBAAkB;IAoB1B;;;;;;;;OAQG;IACH,OAAO,CAAC,kCAAkC;IA4B1C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,oBAAoB;IAe5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAU3B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAc1B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAM3B;;;OAGG;IACH,OAAO,CAAC,4BAA4B;IAWpC;;;OAGG;IACH,OAAO,CAAC,uBAAuB;CAyChC;AAKD;;;;;GAKG;AACH,eAAO,MAAM,cAAc,uEAe1B,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;2BAI3B,CAAC"}
package/dist/dts/react.d.ts CHANGED
@@ -55,6 +55,7 @@ export declare const FoundationLayout: React.ForwardRefExoticComponent<
55
55
  onItemAdded?: (event: CustomEvent<unknown>) => void;
56
56
  onItemRemoved?: (event: CustomEvent<unknown>) => void;
57
57
  onItemResized?: (event: CustomEvent<unknown>) => void;
58
+ onStateChanged?: (event: CustomEvent<unknown>) => void;
58
59
  }
59
60
  > & React.RefAttributes<FoundationLayoutWC>
60
61
  >;
package/dist/dts/utils/events.d.ts CHANGED
@@ -9,6 +9,13 @@
9
9
  * 'itemRemoved' - emitted when an item is removed from the layout'
10
10
  * <br/>
11
11
  * 'itemResized' - emitted when the user drags the divider to resize elements
12
+ * <br/>
13
+ * 'stateChanged' - emitted on every persisted layout change. This is the broadest
14
+ * event: it fires wherever the layout caches/saves its state, which includes item
15
+ * add/remove/resize but ALSO the changes the granular events miss — dragging a pane
16
+ * to a new position, loading a whole layout via {@link FoundationLayout.loadLayout},
17
+ * reverting to the default, and contained-item autosave requests. Prefer this when
18
+ * you need to mirror the layout to your own store and must not miss any change.
12
19
  * @public
13
20
  */
14
21
  export declare const LayoutEmitEvents: {
@@ -16,6 +23,7 @@ export declare const LayoutEmitEvents: {
16
23
  readonly itemAdded: "item-added";
17
24
  readonly itemRemoved: "item-removed";
18
25
  readonly itemResized: "item-resized";
26
+ readonly stateChanged: "state-changed";
19
27
  };
20
28
  /**
21
29
  * Defines events that the layout system listens for
package/dist/dts/utils/events.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE,IAAI,CAAC;CAChB,CAAC"}
1
+ {"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/utils/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;IAC3D,QAAQ,EAAE,IAAI,CAAC;CAChB,CAAC"}
package/dist/esm/main/layout-main.js CHANGED
@@ -38,6 +38,7 @@ const defaultAddItemPlacement = {
38
38
  * @fires item-added - emitted when an item is added to the layout
39
39
  * @fires item-removed - emitted when an item is removed from the layout
40
40
  * @fires item-resized - emitted when the user drags the divider to resize elements
41
+ * @fires state-changed - emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change
41
42
  */
42
43
  export class FoundationLayout extends FoundationElement {
43
44
  /** @internal */
@@ -897,6 +898,13 @@ export class FoundationLayout extends FoundationElement {
897
898
  existingLayouts[this.autoSaveKey] = JSON.stringify(this.getLayout());
898
899
  this.session.setLocalStorageItem(AUTOSAVE_KEY, JSON.stringify(existingLayouts));
899
900
  }
901
+ // Every persist-worthy change funnels through here (add/remove/resize, drag-move,
902
+ // loadLayout, revert-to-default, autosave requests), but only some of those also emit
903
+ // a granular item-* event. Emit `state-changed` unconditionally — OUTSIDE the
904
+ // `autoSaveKey` guard so it fires even when the built-in localStorage autosave is
905
+ // disabled — so a consumer mirroring the layout to its own store can react to ANY
906
+ // change without having to re-implement the lifecycle sweep.
907
+ this.$emit(LayoutEmitEvents.stateChanged);
900
908
  }
901
909
  /**
902
910
  * Used when we are trying to load a layout with missing registrations and we want to add placeholder items
package/dist/esm/utils/events.js CHANGED
@@ -9,6 +9,13 @@
9
9
  * 'itemRemoved' - emitted when an item is removed from the layout'
10
10
  * <br/>
11
11
  * 'itemResized' - emitted when the user drags the divider to resize elements
12
+ * <br/>
13
+ * 'stateChanged' - emitted on every persisted layout change. This is the broadest
14
+ * event: it fires wherever the layout caches/saves its state, which includes item
15
+ * add/remove/resize but ALSO the changes the granular events miss — dragging a pane
16
+ * to a new position, loading a whole layout via {@link FoundationLayout.loadLayout},
17
+ * reverting to the default, and contained-item autosave requests. Prefer this when
18
+ * you need to mirror the layout to your own store and must not miss any change.
12
19
  * @public
13
20
  */
14
21
  export const LayoutEmitEvents = {
@@ -16,6 +23,7 @@ export const LayoutEmitEvents = {
16
23
  itemAdded: 'item-added',
17
24
  itemRemoved: 'item-removed',
18
25
  itemResized: 'item-resized',
26
+ stateChanged: 'state-changed',
19
27
  };
20
28
  /**
21
29
  * Defines events that the layout system listens for
package/dist/foundation-layout.api.json CHANGED
@@ -293,7 +293,7 @@
293
293
  {
294
294
  "kind": "Class",
295
295
  "canonicalReference": "@genesislcap/foundation-layout!FoundationLayout:class",
296
- "docComment": "/**\n * Top level web component which is used to initialise a custom layout\n *\n * @remarks\n *\n * Can be used in a composition to customise the styles of the layout.\n *\n * The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `FoundationLayout` class.\n *\n * @tagname\n *\n * %%prefix%%-layout\n *\n * @fires\n *\n * first-loaded - emitted when the layout has finished loading the first time\n *\n * @fires\n *\n * item-added - emitted when an item is added to the layout\n *\n * @fires\n *\n * item-removed - emitted when an item is removed from the layout\n *\n * @fires\n *\n * item-resized - emitted when the user drags the divider to resize elements\n *\n * @public\n */\n",
296
+ "docComment": "/**\n * Top level web component which is used to initialise a custom layout\n *\n * @remarks\n *\n * Can be used in a composition to customise the styles of the layout.\n *\n * The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `FoundationLayout` class.\n *\n * @tagname\n *\n * %%prefix%%-layout\n *\n * @fires\n *\n * first-loaded - emitted when the layout has finished loading the first time\n *\n * @fires\n *\n * item-added - emitted when an item is added to the layout\n *\n * @fires\n *\n * item-removed - emitted when an item is removed from the layout\n *\n * @fires\n *\n * item-resized - emitted when the user drags the divider to resize elements\n *\n * @fires\n *\n * state-changed - emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change\n *\n * @public\n */\n",
297
297
  "excerptTokens": [
298
298
  {
299
299
  "kind": "Content",
@@ -1860,7 +1860,7 @@
1860
1860
  {
1861
1861
  "kind": "Variable",
1862
1862
  "canonicalReference": "@genesislcap/foundation-layout!LayoutEmitEvents:var",
1863
- "docComment": "/**\n * Defines events that the layout system emits\n *\n * 'firstLoaded' - emitted when the layout has finished loading the first time using the declarative API after {@link DEFAULT_RELOAD_BUFFER} ms. <br/> 'itemAdded' - emitted when an item is added to the layout' <br/> 'itemRemoved' - emitted when an item is removed from the layout' <br/> 'itemResized' - emitted when the user drags the divider to resize elements\n *\n * @public\n */\n",
1863
+ "docComment": "/**\n * Defines events that the layout system emits\n *\n * 'firstLoaded' - emitted when the layout has finished loading the first time using the declarative API after {@link DEFAULT_RELOAD_BUFFER} ms. <br/> 'itemAdded' - emitted when an item is added to the layout' <br/> 'itemRemoved' - emitted when an item is removed from the layout' <br/> 'itemResized' - emitted when the user drags the divider to resize elements <br/> 'stateChanged' - emitted on every persisted layout change. This is the broadest event: it fires wherever the layout caches/saves its state, which includes item add/remove/resize but ALSO the changes the granular events miss — dragging a pane to a new position, loading a whole layout via {@link FoundationLayout.loadLayout}, reverting to the default, and contained-item autosave requests. Prefer this when you need to mirror the layout to your own store and must not miss any change.\n *\n * @public\n */\n",
1864
1864
  "excerptTokens": [
1865
1865
  {
1866
1866
  "kind": "Content",
@@ -1868,7 +1868,7 @@
1868
1868
  },
1869
1869
  {
1870
1870
  "kind": "Content",
1871
- "text": "{\n readonly firstLoaded: \"first-loaded\";\n readonly itemAdded: \"item-added\";\n readonly itemRemoved: \"item-removed\";\n readonly itemResized: \"item-resized\";\n}"
1871
+ "text": "{\n readonly firstLoaded: \"first-loaded\";\n readonly itemAdded: \"item-added\";\n readonly itemRemoved: \"item-removed\";\n readonly itemResized: \"item-resized\";\n readonly stateChanged: \"state-changed\";\n}"
1872
1872
  }
1873
1873
  ],
1874
1874
  "fileUrlPath": "src/utils/events.ts",
package/dist/foundation-layout.d.ts CHANGED
@@ -107,6 +107,7 @@ export declare const DEFAULT_RELOAD_BUFFER = 500;
107
107
  * @fires item-added - emitted when an item is added to the layout
108
108
  * @fires item-removed - emitted when an item is removed from the layout
109
109
  * @fires item-resized - emitted when the user drags the divider to resize elements
110
+ * @fires state-changed - emitted on every persisted layout change (add/remove/resize, drag-move, loadLayout, revert-to-default, autosave request); use this to mirror the layout without missing any change
110
111
  */
111
112
  export declare class FoundationLayout extends FoundationElement implements LayoutComponent {
112
113
  #private;
@@ -832,6 +833,13 @@ export declare class FoundationLayout extends FoundationElement implements Layou
832
833
  * 'itemRemoved' - emitted when an item is removed from the layout'
833
834
  * <br/>
834
835
  * 'itemResized' - emitted when the user drags the divider to resize elements
836
+ * <br/>
837
+ * 'stateChanged' - emitted on every persisted layout change. This is the broadest
838
+ * event: it fires wherever the layout caches/saves its state, which includes item
839
+ * add/remove/resize but ALSO the changes the granular events miss — dragging a pane
840
+ * to a new position, loading a whole layout via {@link FoundationLayout.loadLayout},
841
+ * reverting to the default, and contained-item autosave requests. Prefer this when
842
+ * you need to mirror the layout to your own store and must not miss any change.
835
843
  * @public
836
844
  */
837
845
  export declare const LayoutEmitEvents: {
@@ -839,6 +847,7 @@ export declare class FoundationLayout extends FoundationElement implements Layou
839
847
  readonly itemAdded: "item-added";
840
848
  readonly itemRemoved: "item-removed";
841
849
  readonly itemResized: "item-resized";
850
+ readonly stateChanged: "state-changed";
842
851
  };
843
852
 
844
853
  /** @beta */
package/dist/react.cjs CHANGED
@@ -26,7 +26,7 @@ const FoundationLayoutItem = React.forwardRef(function FoundationLayoutItem(prop
26
26
  });
27
27
 
28
28
  const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref) {
29
- const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, children, ...rest } = props;
29
+ const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, onStateChanged, children, ...rest } = props;
30
30
  const _innerRef = React.useRef(null);
31
31
  const _onFirstLoadedRef = React.useRef(onFirstLoaded);
32
32
  _onFirstLoadedRef.current = onFirstLoaded;
@@ -36,6 +36,8 @@ const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref)
36
36
  _onItemRemovedRef.current = onItemRemoved;
37
37
  const _onItemResizedRef = React.useRef(onItemResized);
38
38
  _onItemResizedRef.current = onItemResized;
39
+ const _onStateChangedRef = React.useRef(onStateChanged);
40
+ _onStateChangedRef.current = onStateChanged;
39
41
  React.useLayoutEffect(() => {
40
42
  const el = _innerRef.current;
41
43
  if (!el) return;
@@ -47,11 +49,14 @@ const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref)
47
49
  el.addEventListener('item-removed', _onItemRemovedFn);
48
50
  const _onItemResizedFn = (e) => _onItemResizedRef.current?.(e);
49
51
  el.addEventListener('item-resized', _onItemResizedFn);
52
+ const _onStateChangedFn = (e) => _onStateChangedRef.current?.(e);
53
+ el.addEventListener('state-changed', _onStateChangedFn);
50
54
  return () => {
51
55
  el.removeEventListener('first-loaded', _onFirstLoadedFn);
52
56
  el.removeEventListener('item-added', _onItemAddedFn);
53
57
  el.removeEventListener('item-removed', _onItemRemovedFn);
54
58
  el.removeEventListener('item-resized', _onItemResizedFn);
59
+ el.removeEventListener('state-changed', _onStateChangedFn);
55
60
  };
56
61
  }, []);
57
62
  return React.createElement(customElements.getName(FoundationLayoutWC) ?? '%%prefix%%-layout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
package/dist/react.mjs CHANGED
@@ -24,7 +24,7 @@ export const FoundationLayoutItem = React.forwardRef(function FoundationLayoutIt
24
24
  });
25
25
 
26
26
  export const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref) {
27
- const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, children, ...rest } = props;
27
+ const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, onStateChanged, children, ...rest } = props;
28
28
  const _innerRef = React.useRef(null);
29
29
  const _onFirstLoadedRef = React.useRef(onFirstLoaded);
30
30
  _onFirstLoadedRef.current = onFirstLoaded;
@@ -34,6 +34,8 @@ export const FoundationLayout = React.forwardRef(function FoundationLayout(props
34
34
  _onItemRemovedRef.current = onItemRemoved;
35
35
  const _onItemResizedRef = React.useRef(onItemResized);
36
36
  _onItemResizedRef.current = onItemResized;
37
+ const _onStateChangedRef = React.useRef(onStateChanged);
38
+ _onStateChangedRef.current = onStateChanged;
37
39
  React.useLayoutEffect(() => {
38
40
  const el = _innerRef.current;
39
41
  if (!el) return;
@@ -45,11 +47,14 @@ export const FoundationLayout = React.forwardRef(function FoundationLayout(props
45
47
  el.addEventListener('item-removed', _onItemRemovedFn);
46
48
  const _onItemResizedFn = (e) => _onItemResizedRef.current?.(e);
47
49
  el.addEventListener('item-resized', _onItemResizedFn);
50
+ const _onStateChangedFn = (e) => _onStateChangedRef.current?.(e);
51
+ el.addEventListener('state-changed', _onStateChangedFn);
48
52
  return () => {
49
53
  el.removeEventListener('first-loaded', _onFirstLoadedFn);
50
54
  el.removeEventListener('item-added', _onItemAddedFn);
51
55
  el.removeEventListener('item-removed', _onItemRemovedFn);
52
56
  el.removeEventListener('item-resized', _onItemResizedFn);
57
+ el.removeEventListener('state-changed', _onStateChangedFn);
53
58
  };
54
59
  }, []);
55
60
  return React.createElement(customElements.getName(FoundationLayoutWC) ?? '%%prefix%%-layout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
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.491.1",
4
+ "version": "14.492.0-GENC-1462.1",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-layout.d.ts",
@@ -38,22 +38,22 @@
38
38
  }
39
39
  },
40
40
  "devDependencies": {
41
- "@genesislcap/foundation-testing": "14.491.1",
42
- "@genesislcap/genx": "14.491.1",
43
- "@genesislcap/rollup-builder": "14.491.1",
44
- "@genesislcap/ts-builder": "14.491.1",
45
- "@genesislcap/uvu-playwright-builder": "14.491.1",
46
- "@genesislcap/vite-builder": "14.491.1",
47
- "@genesislcap/webpack-builder": "14.491.1"
41
+ "@genesislcap/foundation-testing": "14.492.0-GENC-1462.1",
42
+ "@genesislcap/genx": "14.492.0-GENC-1462.1",
43
+ "@genesislcap/rollup-builder": "14.492.0-GENC-1462.1",
44
+ "@genesislcap/ts-builder": "14.492.0-GENC-1462.1",
45
+ "@genesislcap/uvu-playwright-builder": "14.492.0-GENC-1462.1",
46
+ "@genesislcap/vite-builder": "14.492.0-GENC-1462.1",
47
+ "@genesislcap/webpack-builder": "14.492.0-GENC-1462.1"
48
48
  },
49
49
  "dependencies": {
50
50
  "@genesis-community/golden-layout": "^2.13.0",
51
- "@genesislcap/foundation-broadcast-channel": "14.491.1",
52
- "@genesislcap/foundation-comms": "14.491.1",
53
- "@genesislcap/foundation-events": "14.491.1",
54
- "@genesislcap/foundation-logger": "14.491.1",
55
- "@genesislcap/foundation-ui": "14.491.1",
56
- "@genesislcap/foundation-utils": "14.491.1",
51
+ "@genesislcap/foundation-broadcast-channel": "14.492.0-GENC-1462.1",
52
+ "@genesislcap/foundation-comms": "14.492.0-GENC-1462.1",
53
+ "@genesislcap/foundation-events": "14.492.0-GENC-1462.1",
54
+ "@genesislcap/foundation-logger": "14.492.0-GENC-1462.1",
55
+ "@genesislcap/foundation-ui": "14.492.0-GENC-1462.1",
56
+ "@genesislcap/foundation-utils": "14.492.0-GENC-1462.1",
57
57
  "@microsoft/fast-components": "2.30.6",
58
58
  "@microsoft/fast-element": "1.14.0",
59
59
  "@microsoft/fast-foundation": "2.50.0"
@@ -67,5 +67,5 @@
67
67
  "access": "public"
68
68
  },
69
69
  "customElements": "dist/custom-elements.json",
70
- "gitHead": "f4f0c1e530c16f54fda208dd503b79f14cc9200c"
70
+ "gitHead": "dabde96a5bba84756a0c5ddc4f679d747179735d"
71
71
  }