@genesislcap/foundation-layout 14.393.3-FUI-2471.1 → 14.393.3-FUI-2471.3

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 (24) hide show
  1. package/dist/custom-elements.json +435 -129
  2. package/dist/dts/main/layout-main.d.ts +5 -1
  3. package/dist/dts/main/layout-main.d.ts.map +1 -1
  4. package/dist/dts/main/layout-popout-controller.d.ts +49 -0
  5. package/dist/dts/main/layout-popout-controller.d.ts.map +1 -0
  6. package/dist/dts/utils/constants.d.ts +6 -0
  7. package/dist/dts/utils/constants.d.ts.map +1 -1
  8. package/dist/dts/utils/index.d.ts +1 -0
  9. package/dist/dts/utils/index.d.ts.map +1 -1
  10. package/dist/dts/utils/popout-events.d.ts +43 -0
  11. package/dist/dts/utils/popout-events.d.ts.map +1 -0
  12. package/dist/dts/utils/types.d.ts +31 -0
  13. package/dist/dts/utils/types.d.ts.map +1 -1
  14. package/dist/esm/main/layout-main.js +37 -7
  15. package/dist/esm/main/layout-popout-controller.js +289 -0
  16. package/dist/esm/utils/constants.js +6 -0
  17. package/dist/esm/utils/index.js +1 -0
  18. package/dist/esm/utils/popout-events.js +5 -0
  19. package/dist/foundation-layout.api.json +12 -3
  20. package/dist/foundation-layout.d.ts +85 -1
  21. package/docs/api/foundation-layout.layoutpopoutconfig.md +1 -0
  22. package/docs/api/foundation-layout.serialisedlayout.md +3 -0
  23. package/docs/api-report.md.api.md +15 -0
  24. package/package.json +15 -13
package/dist/custom-elements.json CHANGED
@@ -621,15 +621,6 @@
621
621
  "default": "undefined",
622
622
  "description": "Controls whether popout functionality is enabled on the layout. Defaults to disabled.\nPass an empty object `{}` to use default configurations, or a LayoutPopoutConfig object to further customise."
623
623
  },
624
- {
625
- "kind": "field",
626
- "name": "popupMode",
627
- "type": {
628
- "text": "boolean"
629
- },
630
- "privacy": "private",
631
- "default": "false"
632
- },
633
624
  {
634
625
  "kind": "method",
635
626
  "name": "layoutRequiredRegistrations",
@@ -1004,7 +995,7 @@
1004
995
  {
1005
996
  "kind": "variable",
1006
997
  "name": "layoutTemplate",
1007
- "default": "html<FoundationLayout>`\n <template>\n ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n <div class=\"layout-container\" ${ref('layoutElement')}></div>\n </template>\n`",
998
+ "default": "html<FoundationLayout>`\n <template>\n ${when(\n (x) => Boolean(x.popoutConfig),\n html<FoundationLayout>`\n <foundation-layout-popout-controller\n ${ref('popoutController')}\n :parentLayout=\"${(x) => x}\"\n channel-name=\"${(x) => x.popoutConfig?.channelName}\"\n ></foundation-layout-popout-controller>\n `,\n )}\n ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}\n <div class=\"layout-container\" ${ref('layoutElement')}></div>\n </template>\n`",
1008
999
  "description": "`ViewTemplate` which defines the html for FoundationLayout.",
1009
1000
  "privacy": "public"
1010
1001
  }
@@ -1036,6 +1027,262 @@
1036
1027
  }
1037
1028
  ]
1038
1029
  },
1030
+ {
1031
+ "kind": "javascript-module",
1032
+ "path": "src/main/layout-popout-controller.ts",
1033
+ "declarations": [
1034
+ {
1035
+ "kind": "class",
1036
+ "description": "",
1037
+ "name": "FoundationLayoutPopoutController",
1038
+ "members": [
1039
+ {
1040
+ "kind": "field",
1041
+ "name": "channelName",
1042
+ "type": {
1043
+ "text": "string"
1044
+ }
1045
+ },
1046
+ {
1047
+ "kind": "field",
1048
+ "name": "layoutKey",
1049
+ "type": {
1050
+ "text": "string"
1051
+ },
1052
+ "privacy": "private"
1053
+ },
1054
+ {
1055
+ "kind": "field",
1056
+ "name": "channel",
1057
+ "type": {
1058
+ "text": "TypedBroadcastChannel<LayoutPopoutEvents>"
1059
+ },
1060
+ "privacy": "private"
1061
+ },
1062
+ {
1063
+ "kind": "field",
1064
+ "name": "pollInterval",
1065
+ "type": {
1066
+ "text": "any"
1067
+ },
1068
+ "privacy": "private"
1069
+ },
1070
+ {
1071
+ "kind": "field",
1072
+ "name": "unloadHandler",
1073
+ "type": {
1074
+ "text": "() => void"
1075
+ },
1076
+ "privacy": "private"
1077
+ },
1078
+ {
1079
+ "kind": "field",
1080
+ "name": "lastUpdate",
1081
+ "type": {
1082
+ "text": "string"
1083
+ },
1084
+ "privacy": "private"
1085
+ },
1086
+ {
1087
+ "kind": "field",
1088
+ "name": "popoutRegistry",
1089
+ "type": {
1090
+ "text": "Map<\n string,\n { geometry: PopoutGeometry; state?: unknown; window?: Window }\n >"
1091
+ },
1092
+ "privacy": "private",
1093
+ "default": "new Map()"
1094
+ },
1095
+ {
1096
+ "kind": "method",
1097
+ "name": "setupChannel",
1098
+ "privacy": "private"
1099
+ },
1100
+ {
1101
+ "kind": "method",
1102
+ "name": "setupListener",
1103
+ "privacy": "private"
1104
+ },
1105
+ {
1106
+ "kind": "method",
1107
+ "name": "applyStateToParent",
1108
+ "privacy": "private",
1109
+ "parameters": [
1110
+ {
1111
+ "name": "state",
1112
+ "type": {
1113
+ "text": "unknown"
1114
+ }
1115
+ }
1116
+ ]
1117
+ },
1118
+ {
1119
+ "kind": "method",
1120
+ "name": "setupUnloadListener",
1121
+ "privacy": "private"
1122
+ },
1123
+ {
1124
+ "kind": "method",
1125
+ "name": "teardownUnloadListener",
1126
+ "privacy": "private"
1127
+ },
1128
+ {
1129
+ "kind": "method",
1130
+ "name": "emitAutosave",
1131
+ "privacy": "private"
1132
+ },
1133
+ {
1134
+ "kind": "method",
1135
+ "name": "startPolling",
1136
+ "privacy": "private"
1137
+ },
1138
+ {
1139
+ "kind": "method",
1140
+ "name": "stopPolling",
1141
+ "privacy": "private"
1142
+ },
1143
+ {
1144
+ "kind": "method",
1145
+ "name": "getGeometry",
1146
+ "privacy": "private",
1147
+ "return": {
1148
+ "type": {
1149
+ "text": "Promise<PopoutGeometry>"
1150
+ }
1151
+ }
1152
+ },
1153
+ {
1154
+ "kind": "method",
1155
+ "name": "getComponentState",
1156
+ "privacy": "private",
1157
+ "return": {
1158
+ "type": {
1159
+ "text": "unknown"
1160
+ }
1161
+ }
1162
+ },
1163
+ {
1164
+ "kind": "method",
1165
+ "name": "broadcastUpdate",
1166
+ "privacy": "private",
1167
+ "parameters": [
1168
+ {
1169
+ "name": "geometry",
1170
+ "type": {
1171
+ "text": "PopoutGeometry"
1172
+ }
1173
+ },
1174
+ {
1175
+ "name": "state",
1176
+ "optional": true,
1177
+ "type": {
1178
+ "text": "unknown"
1179
+ }
1180
+ }
1181
+ ]
1182
+ },
1183
+ {
1184
+ "kind": "method",
1185
+ "name": "openPopout",
1186
+ "privacy": "public",
1187
+ "parameters": [
1188
+ {
1189
+ "name": "registration",
1190
+ "type": {
1191
+ "text": "string"
1192
+ },
1193
+ "description": "The registration ID of the component to pop out."
1194
+ },
1195
+ {
1196
+ "name": "popoutState",
1197
+ "optional": true,
1198
+ "type": {
1199
+ "text": "PopoutState"
1200
+ },
1201
+ "description": "Optional state (geometry and component state) to use for the new window."
1202
+ },
1203
+ {
1204
+ "name": "uuid",
1205
+ "optional": true,
1206
+ "type": {
1207
+ "text": "any"
1208
+ },
1209
+ "description": "UUID generator from parent layout"
1210
+ }
1211
+ ],
1212
+ "description": "Opens a component in a popout window."
1213
+ },
1214
+ {
1215
+ "kind": "method",
1216
+ "name": "getRegistry",
1217
+ "privacy": "public",
1218
+ "return": {
1219
+ "type": {
1220
+ "text": "{ [layoutKey: string]: PopoutState }"
1221
+ }
1222
+ }
1223
+ },
1224
+ {
1225
+ "kind": "method",
1226
+ "name": "restorePopouts",
1227
+ "privacy": "public",
1228
+ "parameters": [
1229
+ {
1230
+ "name": "registry",
1231
+ "type": {
1232
+ "text": "{ [layoutKey: string]: PopoutState }"
1233
+ }
1234
+ },
1235
+ {
1236
+ "name": "uuid",
1237
+ "type": {
1238
+ "text": "any"
1239
+ }
1240
+ }
1241
+ ],
1242
+ "description": "Restores popouts from a registry"
1243
+ },
1244
+ {
1245
+ "kind": "method",
1246
+ "name": "closeAllPopouts",
1247
+ "privacy": "public"
1248
+ }
1249
+ ],
1250
+ "attributes": [
1251
+ {
1252
+ "name": "channel-name",
1253
+ "type": {
1254
+ "text": "string"
1255
+ },
1256
+ "fieldName": "channelName"
1257
+ }
1258
+ ],
1259
+ "superclass": {
1260
+ "name": "FASTElement",
1261
+ "package": "@microsoft/fast-element"
1262
+ },
1263
+ "tagName": "foundation-layout-popout-controller",
1264
+ "customElement": true
1265
+ }
1266
+ ],
1267
+ "exports": [
1268
+ {
1269
+ "kind": "js",
1270
+ "name": "FoundationLayoutPopoutController",
1271
+ "declaration": {
1272
+ "name": "FoundationLayoutPopoutController",
1273
+ "module": "src/main/layout-popout-controller.ts"
1274
+ }
1275
+ },
1276
+ {
1277
+ "kind": "custom-element-definition",
1278
+ "name": "foundation-layout-popout-controller",
1279
+ "declaration": {
1280
+ "name": "FoundationLayoutPopoutController",
1281
+ "module": "src/main/layout-popout-controller.ts"
1282
+ }
1283
+ }
1284
+ ]
1285
+ },
1039
1286
  {
1040
1287
  "kind": "javascript-module",
1041
1288
  "path": "src/main/layout-region.ts",
@@ -1217,125 +1464,6 @@
1217
1464
  }
1218
1465
  ]
1219
1466
  },
1220
- {
1221
- "kind": "javascript-module",
1222
- "path": "src/styles/constants.ts",
1223
- "declarations": [
1224
- {
1225
- "kind": "function",
1226
- "name": "glVisualConfig",
1227
- "return": {
1228
- "type": {
1229
- "text": "Omit<LayoutConfig, 'root'>"
1230
- }
1231
- }
1232
- },
1233
- {
1234
- "kind": "variable",
1235
- "name": "LAYOUT_ICONS",
1236
- "type": {
1237
- "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
1238
- },
1239
- "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
1240
- "description": "A collection of SVG icons in base64 format.",
1241
- "privacy": "public"
1242
- }
1243
- ],
1244
- "exports": [
1245
- {
1246
- "kind": "js",
1247
- "name": "glVisualConfig",
1248
- "declaration": {
1249
- "name": "glVisualConfig",
1250
- "module": "src/styles/constants.ts"
1251
- }
1252
- },
1253
- {
1254
- "kind": "js",
1255
- "name": "LAYOUT_ICONS",
1256
- "declaration": {
1257
- "name": "LAYOUT_ICONS",
1258
- "module": "src/styles/constants.ts"
1259
- }
1260
- }
1261
- ]
1262
- },
1263
- {
1264
- "kind": "javascript-module",
1265
- "path": "src/styles/dragging.styles.ts",
1266
- "declarations": [
1267
- {
1268
- "kind": "variable",
1269
- "name": "globalDraggingStyles",
1270
- "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`",
1271
- "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"
1272
- }
1273
- ],
1274
- "exports": [
1275
- {
1276
- "kind": "js",
1277
- "name": "globalDraggingStyles",
1278
- "declaration": {
1279
- "name": "globalDraggingStyles",
1280
- "module": "src/styles/dragging.styles.ts"
1281
- }
1282
- }
1283
- ]
1284
- },
1285
- {
1286
- "kind": "javascript-module",
1287
- "path": "src/styles/index.ts",
1288
- "declarations": [],
1289
- "exports": [
1290
- {
1291
- "kind": "js",
1292
- "name": "*",
1293
- "declaration": {
1294
- "name": "*",
1295
- "package": "./constants"
1296
- }
1297
- },
1298
- {
1299
- "kind": "js",
1300
- "name": "*",
1301
- "declaration": {
1302
- "name": "*",
1303
- "package": "./dragging.styles"
1304
- }
1305
- },
1306
- {
1307
- "kind": "js",
1308
- "name": "*",
1309
- "declaration": {
1310
- "name": "*",
1311
- "package": "./layout.styles"
1312
- }
1313
- }
1314
- ]
1315
- },
1316
- {
1317
- "kind": "javascript-module",
1318
- "path": "src/styles/layout.styles.ts",
1319
- "declarations": [
1320
- {
1321
- "kind": "variable",
1322
- "name": "layoutStyles",
1323
- "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 }\n\n .lm_stack.lm_item {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_maximised .lm_header {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 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: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n border: 1px solid;\n border-color: 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_stack > .lm_items {\n box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: var(--neutral-layer-card-container);\n }\n\n .lm_header .lm_tab.lm_active {\n background-color: var(--neutral-layer-card-container);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-bottom: 0;\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: var(--neutral-layer-4);\n border: 0;\n border-bottom-color: transparent;\n border-bottom: 0 solid;\n border-color: var(--neutral-stroke-rest);\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: 13px;\n font-weight: 400;\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\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: 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\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 100%;\n }\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\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\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 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: var(--neutral-foreground-hint);\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\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: 0 5px 15px rgb(0 0 0 / 35%);\n }\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: normal;\n }\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\n .lm_row > .lm_item {\n float: left;\n }\n\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n\n .lm_maximise_placeholder {\n display: none;\n }\n\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\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\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\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\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\n .lm_header {\n overflow: visible;\n position: relative;\n }\n\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\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\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .lm_header .lm_tabs {\n position: absolute;\n }\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\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\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\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\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 top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n position: absolute;\n right: 0;\n text-align: center;\n }\n\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\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\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\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\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\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\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\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\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\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\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\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\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\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\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\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\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\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n box-shadow: none;\n }\n\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\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\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
1324
- "description": "`ElementStyles` which defines the css for FoundationLayout.",
1325
- "privacy": "public"
1326
- }
1327
- ],
1328
- "exports": [
1329
- {
1330
- "kind": "js",
1331
- "name": "layoutStyles",
1332
- "declaration": {
1333
- "name": "layoutStyles",
1334
- "module": "src/styles/layout.styles.ts"
1335
- }
1336
- }
1337
- ]
1338
- },
1339
1467
  {
1340
1468
  "kind": "javascript-module",
1341
1469
  "path": "src/utils/constants.ts",
@@ -1359,6 +1487,15 @@
1359
1487
  "default": "'f-layout-key'",
1360
1488
  "description": "Key to be used for controlling popout behaviour"
1361
1489
  },
1490
+ {
1491
+ "kind": "variable",
1492
+ "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
1493
+ "type": {
1494
+ "text": "number"
1495
+ },
1496
+ "default": "1000",
1497
+ "description": "How often a popout window should check to broadcast its\ngeometry"
1498
+ },
1362
1499
  {
1363
1500
  "kind": "variable",
1364
1501
  "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
@@ -1398,6 +1535,14 @@
1398
1535
  "module": "src/utils/constants.ts"
1399
1536
  }
1400
1537
  },
1538
+ {
1539
+ "kind": "js",
1540
+ "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
1541
+ "declaration": {
1542
+ "name": "POPOUT_GEOMETRY_BROADCAST_INTERVAL",
1543
+ "module": "src/utils/constants.ts"
1544
+ }
1545
+ },
1401
1546
  {
1402
1547
  "kind": "js",
1403
1548
  "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
@@ -1662,6 +1807,14 @@
1662
1807
  "package": "./templates"
1663
1808
  }
1664
1809
  },
1810
+ {
1811
+ "kind": "js",
1812
+ "name": "*",
1813
+ "declaration": {
1814
+ "name": "*",
1815
+ "package": "./popout-events"
1816
+ }
1817
+ },
1665
1818
  {
1666
1819
  "kind": "js",
1667
1820
  "name": "*",
@@ -1706,6 +1859,40 @@
1706
1859
  "declarations": [],
1707
1860
  "exports": []
1708
1861
  },
1862
+ {
1863
+ "kind": "javascript-module",
1864
+ "path": "src/utils/popout-events.ts",
1865
+ "declarations": [
1866
+ {
1867
+ "kind": "variable",
1868
+ "name": "LAYOUT_POPOUT_CHANNEL_NAME",
1869
+ "type": {
1870
+ "text": "string"
1871
+ },
1872
+ "default": "'f-layout-popout-channel'",
1873
+ "description": "Name of the default broadcast channel used for layout popouts",
1874
+ "privacy": "public"
1875
+ }
1876
+ ],
1877
+ "exports": [
1878
+ {
1879
+ "kind": "js",
1880
+ "name": "LAYOUT_POPOUT_CHANNEL_NAME",
1881
+ "declaration": {
1882
+ "name": "LAYOUT_POPOUT_CHANNEL_NAME",
1883
+ "module": "src/utils/popout-events.ts"
1884
+ }
1885
+ },
1886
+ {
1887
+ "kind": "js",
1888
+ "name": "PopoutGeometry",
1889
+ "declaration": {
1890
+ "name": "PopoutGeometry",
1891
+ "module": "src/utils/popout-events.ts"
1892
+ }
1893
+ }
1894
+ ]
1895
+ },
1709
1896
  {
1710
1897
  "kind": "javascript-module",
1711
1898
  "path": "src/utils/templates.ts",
@@ -1717,6 +1904,125 @@
1717
1904
  "path": "src/utils/types.ts",
1718
1905
  "declarations": [],
1719
1906
  "exports": []
1907
+ },
1908
+ {
1909
+ "kind": "javascript-module",
1910
+ "path": "src/styles/constants.ts",
1911
+ "declarations": [
1912
+ {
1913
+ "kind": "function",
1914
+ "name": "glVisualConfig",
1915
+ "return": {
1916
+ "type": {
1917
+ "text": "Omit<LayoutConfig, 'root'>"
1918
+ }
1919
+ }
1920
+ },
1921
+ {
1922
+ "kind": "variable",
1923
+ "name": "LAYOUT_ICONS",
1924
+ "type": {
1925
+ "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
1926
+ },
1927
+ "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
1928
+ "description": "A collection of SVG icons in base64 format.",
1929
+ "privacy": "public"
1930
+ }
1931
+ ],
1932
+ "exports": [
1933
+ {
1934
+ "kind": "js",
1935
+ "name": "glVisualConfig",
1936
+ "declaration": {
1937
+ "name": "glVisualConfig",
1938
+ "module": "src/styles/constants.ts"
1939
+ }
1940
+ },
1941
+ {
1942
+ "kind": "js",
1943
+ "name": "LAYOUT_ICONS",
1944
+ "declaration": {
1945
+ "name": "LAYOUT_ICONS",
1946
+ "module": "src/styles/constants.ts"
1947
+ }
1948
+ }
1949
+ ]
1950
+ },
1951
+ {
1952
+ "kind": "javascript-module",
1953
+ "path": "src/styles/dragging.styles.ts",
1954
+ "declarations": [
1955
+ {
1956
+ "kind": "variable",
1957
+ "name": "globalDraggingStyles",
1958
+ "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`",
1959
+ "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"
1960
+ }
1961
+ ],
1962
+ "exports": [
1963
+ {
1964
+ "kind": "js",
1965
+ "name": "globalDraggingStyles",
1966
+ "declaration": {
1967
+ "name": "globalDraggingStyles",
1968
+ "module": "src/styles/dragging.styles.ts"
1969
+ }
1970
+ }
1971
+ ]
1972
+ },
1973
+ {
1974
+ "kind": "javascript-module",
1975
+ "path": "src/styles/index.ts",
1976
+ "declarations": [],
1977
+ "exports": [
1978
+ {
1979
+ "kind": "js",
1980
+ "name": "*",
1981
+ "declaration": {
1982
+ "name": "*",
1983
+ "package": "./constants"
1984
+ }
1985
+ },
1986
+ {
1987
+ "kind": "js",
1988
+ "name": "*",
1989
+ "declaration": {
1990
+ "name": "*",
1991
+ "package": "./dragging.styles"
1992
+ }
1993
+ },
1994
+ {
1995
+ "kind": "js",
1996
+ "name": "*",
1997
+ "declaration": {
1998
+ "name": "*",
1999
+ "package": "./layout.styles"
2000
+ }
2001
+ }
2002
+ ]
2003
+ },
2004
+ {
2005
+ "kind": "javascript-module",
2006
+ "path": "src/styles/layout.styles.ts",
2007
+ "declarations": [
2008
+ {
2009
+ "kind": "variable",
2010
+ "name": "layoutStyles",
2011
+ "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 }\n\n .lm_stack.lm_item {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_maximised .lm_header {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 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: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n border: 1px solid;\n border-color: 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_stack > .lm_items {\n box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: var(--neutral-layer-card-container);\n }\n\n .lm_header .lm_tab.lm_active {\n background-color: var(--neutral-layer-card-container);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-bottom: 0;\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: var(--neutral-layer-4);\n border: 0;\n border-bottom-color: transparent;\n border-bottom: 0 solid;\n border-color: var(--neutral-stroke-rest);\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: 13px;\n font-weight: 400;\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\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: 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\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 100%;\n }\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\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\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 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: var(--neutral-foreground-hint);\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\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: 0 5px 15px rgb(0 0 0 / 35%);\n }\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: normal;\n }\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\n .lm_row > .lm_item {\n float: left;\n }\n\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n\n .lm_maximise_placeholder {\n display: none;\n }\n\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\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\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\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\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\n .lm_header {\n overflow: visible;\n position: relative;\n }\n\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\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\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .lm_header .lm_tabs {\n position: absolute;\n }\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\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\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\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\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 top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n position: absolute;\n right: 0;\n text-align: center;\n }\n\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\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\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\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\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\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\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\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\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\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\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\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\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\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\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\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\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\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n box-shadow: none;\n }\n\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\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\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
2012
+ "description": "`ElementStyles` which defines the css for FoundationLayout.",
2013
+ "privacy": "public"
2014
+ }
2015
+ ],
2016
+ "exports": [
2017
+ {
2018
+ "kind": "js",
2019
+ "name": "layoutStyles",
2020
+ "declaration": {
2021
+ "name": "layoutStyles",
2022
+ "module": "src/styles/layout.styles.ts"
2023
+ }
2024
+ }
2025
+ ]
1720
2026
  }
1721
2027
  ]
1722
2028
  }