@genesislcap/foundation-layout 14.92.4 → 14.93.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (9) hide show
  1. package/dist/custom-elements.json +118 -118
  2. package/dist/dts/main/layout-main.d.ts.map +1 -1
  3. package/dist/dts/utils/types.d.ts +2 -2
  4. package/dist/esm/main/layout-main.js +15 -5
  5. package/dist/foundation-layout.api.json +2 -2
  6. package/dist/foundation-layout.d.ts +2 -2
  7. package/docs/api/foundation-layout.layoutcomponentwithstate.applystate.md +1 -1
  8. package/docs/api/foundation-layout.layoutcomponentwithstate.md +2 -2
  9. package/package.json +7 -7
package/dist/custom-elements.json CHANGED
@@ -1037,124 +1037,6 @@
1037
1037
  }
1038
1038
  ]
1039
1039
  },
1040
- {
1041
- "kind": "javascript-module",
1042
- "path": "src/styles/constants.ts",
1043
- "declarations": [
1044
- {
1045
- "kind": "variable",
1046
- "name": "glVisualConfig",
1047
- "type": {
1048
- "text": "Omit<LayoutConfig, 'root'>"
1049
- },
1050
- "default": "{\n dimensions: {\n headerHeight: 38,\n borderWidth: 12,\n },\n header: {\n maximise: 'maximise',\n minimise: 'minimise',\n popout: false,\n },\n}"
1051
- },
1052
- {
1053
- "kind": "variable",
1054
- "name": "LAYOUT_ICONS",
1055
- "type": {
1056
- "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n}"
1057
- },
1058
- "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n}",
1059
- "description": "A collection of SVG icons in base64 format.",
1060
- "privacy": "public"
1061
- }
1062
- ],
1063
- "exports": [
1064
- {
1065
- "kind": "js",
1066
- "name": "glVisualConfig",
1067
- "declaration": {
1068
- "name": "glVisualConfig",
1069
- "module": "src/styles/constants.ts"
1070
- }
1071
- },
1072
- {
1073
- "kind": "js",
1074
- "name": "LAYOUT_ICONS",
1075
- "declaration": {
1076
- "name": "LAYOUT_ICONS",
1077
- "module": "src/styles/constants.ts"
1078
- }
1079
- }
1080
- ]
1081
- },
1082
- {
1083
- "kind": "javascript-module",
1084
- "path": "src/styles/dragging.styles.ts",
1085
- "declarations": [
1086
- {
1087
- "kind": "variable",
1088
- "name": "globalDraggingStyles",
1089
- "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`",
1090
- "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"
1091
- }
1092
- ],
1093
- "exports": [
1094
- {
1095
- "kind": "js",
1096
- "name": "globalDraggingStyles",
1097
- "declaration": {
1098
- "name": "globalDraggingStyles",
1099
- "module": "src/styles/dragging.styles.ts"
1100
- }
1101
- }
1102
- ]
1103
- },
1104
- {
1105
- "kind": "javascript-module",
1106
- "path": "src/styles/index.ts",
1107
- "declarations": [],
1108
- "exports": [
1109
- {
1110
- "kind": "js",
1111
- "name": "*",
1112
- "declaration": {
1113
- "name": "*",
1114
- "package": "./constants"
1115
- }
1116
- },
1117
- {
1118
- "kind": "js",
1119
- "name": "*",
1120
- "declaration": {
1121
- "name": "*",
1122
- "package": "./dragging.styles"
1123
- }
1124
- },
1125
- {
1126
- "kind": "js",
1127
- "name": "*",
1128
- "declaration": {
1129
- "name": "*",
1130
- "package": "./layout.styles"
1131
- }
1132
- }
1133
- ]
1134
- },
1135
- {
1136
- "kind": "javascript-module",
1137
- "path": "src/styles/layout.styles.ts",
1138
- "declarations": [
1139
- {
1140
- "kind": "variable",
1141
- "name": "layoutStyles",
1142
- "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`",
1143
- "description": "`ElementStyles` which defines the css for FoundationLayout.",
1144
- "privacy": "public"
1145
- }
1146
- ],
1147
- "exports": [
1148
- {
1149
- "kind": "js",
1150
- "name": "layoutStyles",
1151
- "declaration": {
1152
- "name": "layoutStyles",
1153
- "module": "src/styles/layout.styles.ts"
1154
- }
1155
- }
1156
- ]
1157
- },
1158
1040
  {
1159
1041
  "kind": "javascript-module",
1160
1042
  "path": "src/utils/constants.ts",
@@ -1367,6 +1249,124 @@
1367
1249
  "path": "src/utils/types.ts",
1368
1250
  "declarations": [],
1369
1251
  "exports": []
1252
+ },
1253
+ {
1254
+ "kind": "javascript-module",
1255
+ "path": "src/styles/constants.ts",
1256
+ "declarations": [
1257
+ {
1258
+ "kind": "variable",
1259
+ "name": "glVisualConfig",
1260
+ "type": {
1261
+ "text": "Omit<LayoutConfig, 'root'>"
1262
+ },
1263
+ "default": "{\n dimensions: {\n headerHeight: 38,\n borderWidth: 12,\n },\n header: {\n maximise: 'maximise',\n minimise: 'minimise',\n popout: false,\n },\n}"
1264
+ },
1265
+ {
1266
+ "kind": "variable",
1267
+ "name": "LAYOUT_ICONS",
1268
+ "type": {
1269
+ "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n}"
1270
+ },
1271
+ "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n}",
1272
+ "description": "A collection of SVG icons in base64 format.",
1273
+ "privacy": "public"
1274
+ }
1275
+ ],
1276
+ "exports": [
1277
+ {
1278
+ "kind": "js",
1279
+ "name": "glVisualConfig",
1280
+ "declaration": {
1281
+ "name": "glVisualConfig",
1282
+ "module": "src/styles/constants.ts"
1283
+ }
1284
+ },
1285
+ {
1286
+ "kind": "js",
1287
+ "name": "LAYOUT_ICONS",
1288
+ "declaration": {
1289
+ "name": "LAYOUT_ICONS",
1290
+ "module": "src/styles/constants.ts"
1291
+ }
1292
+ }
1293
+ ]
1294
+ },
1295
+ {
1296
+ "kind": "javascript-module",
1297
+ "path": "src/styles/dragging.styles.ts",
1298
+ "declarations": [
1299
+ {
1300
+ "kind": "variable",
1301
+ "name": "globalDraggingStyles",
1302
+ "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`",
1303
+ "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"
1304
+ }
1305
+ ],
1306
+ "exports": [
1307
+ {
1308
+ "kind": "js",
1309
+ "name": "globalDraggingStyles",
1310
+ "declaration": {
1311
+ "name": "globalDraggingStyles",
1312
+ "module": "src/styles/dragging.styles.ts"
1313
+ }
1314
+ }
1315
+ ]
1316
+ },
1317
+ {
1318
+ "kind": "javascript-module",
1319
+ "path": "src/styles/index.ts",
1320
+ "declarations": [],
1321
+ "exports": [
1322
+ {
1323
+ "kind": "js",
1324
+ "name": "*",
1325
+ "declaration": {
1326
+ "name": "*",
1327
+ "package": "./constants"
1328
+ }
1329
+ },
1330
+ {
1331
+ "kind": "js",
1332
+ "name": "*",
1333
+ "declaration": {
1334
+ "name": "*",
1335
+ "package": "./dragging.styles"
1336
+ }
1337
+ },
1338
+ {
1339
+ "kind": "js",
1340
+ "name": "*",
1341
+ "declaration": {
1342
+ "name": "*",
1343
+ "package": "./layout.styles"
1344
+ }
1345
+ }
1346
+ ]
1347
+ },
1348
+ {
1349
+ "kind": "javascript-module",
1350
+ "path": "src/styles/layout.styles.ts",
1351
+ "declarations": [
1352
+ {
1353
+ "kind": "variable",
1354
+ "name": "layoutStyles",
1355
+ "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`",
1356
+ "description": "`ElementStyles` which defines the css for FoundationLayout.",
1357
+ "privacy": "public"
1358
+ }
1359
+ ],
1360
+ "exports": [
1361
+ {
1362
+ "kind": "js",
1363
+ "name": "layoutStyles",
1364
+ "declaration": {
1365
+ "name": "layoutStyles",
1366
+ "module": "src/styles/layout.styles.ts"
1367
+ }
1368
+ }
1369
+ ]
1370
1370
  }
1371
1371
  ]
1372
1372
  }
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":"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"}
package/dist/dts/utils/types.d.ts CHANGED
@@ -32,7 +32,7 @@ export type SerialisedLayout = {
32
32
  * @remarks
33
33
  * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
34
34
  *
35
- * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
35
+ * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with {@link FoundationLayout.loadLayout} (or via autoloading). The state will be applied to the component via `applyState`, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.
36
36
  *
37
37
  * See the written documentation for some error scenarios to consider about when implementing this interface.
38
38
  *
@@ -85,7 +85,7 @@ export interface LayoutComponentWithState<T> {
85
85
  */
86
86
  getCurrentState(): T;
87
87
  /**
88
- * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.
88
+ * Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.
89
89
  */
90
90
  applyState(state: T | null): void;
91
91
  }
package/dist/esm/main/layout-main.js CHANGED
@@ -214,6 +214,8 @@ export class FoundationLayout extends FoundationElement {
214
214
  return;
215
215
  const orderedStates = [...items].map((item) => { var _b; return (_b = item.getCurrentState) === null || _b === void 0 ? void 0 : _b.call(item); });
216
216
  const componentInstanceContainer = items[0][instanceContainer];
217
+ // known use of deprecated API, but there is no other way of implementing it and we control
218
+ // the underlying library anyway
217
219
  componentInstanceContainer.container.setState({
218
220
  instance: componentInstanceContainer.instance,
219
221
  orderedStates,
@@ -270,6 +272,17 @@ export class FoundationLayout extends FoundationElement {
270
272
  this.registerPlaceholdersAndSetClosable(layoutConfig, missingRegisteredItems);
271
273
  }
272
274
  this.loadGLConfigAndSetup(layoutConfig);
275
+ // Try and restore any serialised state that is stored in the SerialisedLayout
276
+ const componentCollection = this.getLayoutComponents();
277
+ componentCollection.forEach((items) => {
278
+ if (!items.length)
279
+ return;
280
+ const componentInstanceContainer = items[0][instanceContainer];
281
+ // known use of deprecated API, but there is no other way of implementing it and we control
282
+ // the underlying library anyway
283
+ const orderedStates = componentInstanceContainer.container.getState()['orderedStates'];
284
+ [...items].map((item, i) => { var _b, _c; return (_b = item.applyState) === null || _b === void 0 ? void 0 : _b.call(item, (_c = orderedStates[i]) !== null && _c !== void 0 ? _c : null); });
285
+ });
273
286
  this.cacheAndSaveLayout();
274
287
  }
275
288
  /**
@@ -469,11 +482,8 @@ export class FoundationLayout extends FoundationElement {
469
482
  container,
470
483
  instance: state['instance'],
471
484
  };
472
- const instanceOrderedStates = state['orderedStates'] || [];
473
485
  // get the instance from the map and append it to the container
474
- instances.get(state['instance']).forEach((component, i) => {
475
- var _b, _c;
476
- (_b = component.applyState) === null || _b === void 0 ? void 0 : _b.call(component, (_c = instanceOrderedStates[i]) !== null && _c !== void 0 ? _c : null);
486
+ instances.get(state['instance']).forEach((component) => {
477
487
  container.element.appendChild(component);
478
488
  component[instanceContainer] = componentInstanceContainer;
479
489
  });
@@ -487,7 +497,7 @@ export class FoundationLayout extends FoundationElement {
487
497
  * Sets up the event listeners for the layout receive events
488
498
  * @internal
489
499
  */
490
- setupLayoutReceiveEvents(container, state) {
500
+ setupLayoutReceiveEvents(container, _state) {
491
501
  const originalTitle = container.state['originalTitle'];
492
502
  container.element.addEventListener(LayoutReceiveEvents.changeTitle, (e) => {
493
503
  const maybeDetail = e === null || e === void 0 ? void 0 : e.detail;
package/dist/foundation-layout.api.json CHANGED
@@ -1435,7 +1435,7 @@
1435
1435
  {
1436
1436
  "kind": "Interface",
1437
1437
  "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState:interface",
1438
- "docComment": "/**\n * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.\n *\n * @remarks\n *\n * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.\n *\n * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.\n *\n * See the written documentation for some error scenarios to consider about when implementing this interface.\n *\n * @typeParam T - the type of the state object you wish to serialise with the component.\n *\n * @example\n * ```\n * type ComponentState = {\n * foo: string;\n * }\n * \\@customElement({ name: 'my-component' })\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * \\@observable foo: string;\n * private fooCache: ComponentState | null;\n *\n * getCurrentState(): ComponentState {\n * if (!this.foo) return null;\n * return {\n * foo: this.foo;\n * }\n * }\n *\n * applyState(state: ComponentState | null) {\n * this.fooCache = state;\n * }\n *\n * connectedCallback() {\n * // do other required setup\n * if (this.fooCache) {\n * this.foo = this.fooCache.foo;\n * }\n * }\n * }\n * ```\n *\n * @example\n *\n * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.\n * ```\n * // Same component as above\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * // can use xChanged pattern as `foo` was declared observable\n * fooChanged() {\n * this.$emit(LayoutReceiveEvents.autosave);\n * }\n * }\n * ```\n *\n * @public\n */\n",
1438
+ "docComment": "/**\n * Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.\n *\n * @remarks\n *\n * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.\n *\n * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with {@link FoundationLayout.loadLayout} (or via autoloading). The state will be applied to the component via `applyState`, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.\n *\n * See the written documentation for some error scenarios to consider about when implementing this interface.\n *\n * @typeParam T - the type of the state object you wish to serialise with the component.\n *\n * @example\n * ```\n * type ComponentState = {\n * foo: string;\n * }\n * \\@customElement({ name: 'my-component' })\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * \\@observable foo: string;\n * private fooCache: ComponentState | null;\n *\n * getCurrentState(): ComponentState {\n * if (!this.foo) return null;\n * return {\n * foo: this.foo;\n * }\n * }\n *\n * applyState(state: ComponentState | null) {\n * this.fooCache = state;\n * }\n *\n * connectedCallback() {\n * // do other required setup\n * if (this.fooCache) {\n * this.foo = this.fooCache.foo;\n * }\n * }\n * }\n * ```\n *\n * @example\n *\n * If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the {@link LayoutReceiveEvents} `autosave` event.\n * ```\n * // Same component as above\n * export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {\n * // can use xChanged pattern as `foo` was declared observable\n * fooChanged() {\n * this.$emit(LayoutReceiveEvents.autosave);\n * }\n * }\n * ```\n *\n * @public\n */\n",
1439
1439
  "excerptTokens": [
1440
1440
  {
1441
1441
  "kind": "Content",
@@ -1463,7 +1463,7 @@
1463
1463
  {
1464
1464
  "kind": "MethodSignature",
1465
1465
  "canonicalReference": "@genesislcap/foundation-layout!LayoutComponentWithState#applyState:member(1)",
1466
- "docComment": "/**\n * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.\n */\n",
1466
+ "docComment": "/**\n * Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.\n */\n",
1467
1467
  "excerptTokens": [
1468
1468
  {
1469
1469
  "kind": "Content",
package/dist/foundation-layout.d.ts CHANGED
@@ -503,7 +503,7 @@ declare interface LayoutComponent {
503
503
  * @remarks
504
504
  * When the layout is saved either via the autosave functionality or manually calling {@link FoundationLayout.getLayout}, all contained components will be requested to provide state if they wish.
505
505
  *
506
- * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
506
+ * Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with {@link FoundationLayout.loadLayout} (or via autoloading). The state will be applied to the component via `applyState`, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.
507
507
  *
508
508
  * See the written documentation for some error scenarios to consider about when implementing this interface.
509
509
  *
@@ -556,7 +556,7 @@ export declare interface LayoutComponentWithState<T> {
556
556
  */
557
557
  getCurrentState(): T;
558
558
  /**
559
- * Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`.
559
+ * Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.
560
560
  */
561
561
  applyState(state: T | null): void;
562
562
  }
package/docs/api/foundation-layout.layoutcomponentwithstate.applystate.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ## LayoutComponentWithState.applyState() method
6
6
 
7
- Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in `connectedCallback`<!-- -->.
7
+ Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM.
8
8
 
9
9
  **Signature:**
10
10
 
package/docs/api/foundation-layout.layoutcomponentwithstate.md CHANGED
@@ -16,7 +16,7 @@ export interface LayoutComponentWithState<T>
16
16
 
17
17
  When the layout is saved either via the autosave functionality or manually calling [FoundationLayout.getLayout()](./foundation-layout.foundationlayout.getlayout.md)<!-- -->, all contained components will be requested to provide state if they wish.
18
18
 
19
- Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`<!-- -->. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
19
+ Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is loaded with [FoundationLayout.loadLayout()](./foundation-layout.foundationlayout.loadlayout.md) (or via autoloading). The state will be applied to the component via `applyState`<!-- -->, this may be before or after the component has been placed on the DOM, so you'll need to handle either scenario. The state is `null` when the instance is first created.
20
20
 
21
21
  See the written documentation for some error scenarios to consider about when implementing this interface.
22
22
 
@@ -70,6 +70,6 @@ export class MyComponent extends FASTElement implements LayoutComponentWithState
70
70
 
71
71
  | Method | Description |
72
72
  | --- | --- |
73
- | [applyState(state)](./foundation-layout.layoutcomponentwithstate.applystate.md) | Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in <code>connectedCallback</code>. |
73
+ | [applyState(state)](./foundation-layout.layoutcomponentwithstate.applystate.md) | Handle any state that has been saved previously for this instance of this component. It is not deterministic to know whether this is called before the component is appended to the DOM. |
74
74
  | [getCurrentState()](./foundation-layout.layoutcomponentwithstate.getcurrentstate.md) | Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return <code>null</code> as the state, following the pattern of <code>null</code> being set as the initial state. |
75
75
 
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.92.4",
4
+ "version": "14.93.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.92.4",
31
- "@genesislcap/genx": "14.92.4",
30
+ "@genesislcap/foundation-testing": "14.93.0",
31
+ "@genesislcap/genx": "14.93.0",
32
32
  "rimraf": "^3.0.2"
33
33
  },
34
34
  "dependencies": {
35
35
  "@genesis-community/golden-layout": "^2.10.1",
36
- "@genesislcap/foundation-comms": "14.92.4",
37
- "@genesislcap/foundation-logger": "14.92.4",
38
- "@genesislcap/foundation-utils": "14.92.4",
36
+ "@genesislcap/foundation-comms": "14.93.0",
37
+ "@genesislcap/foundation-logger": "14.93.0",
38
+ "@genesislcap/foundation-utils": "14.93.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": "04c7691aa4331bd6caa2748f96508050665467cd"
53
+ "gitHead": "2e777404028ad7c11b239b17ae32946c873b7a4d"
54
54
  }