@genesislcap/foundation-layout 14.369.0 → 14.370.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/custom-elements.json +35 -6
  2. package/dist/dts/main/layout-main.d.ts +4 -0
  3. package/dist/dts/main/layout-main.d.ts.map +1 -1
  4. package/dist/dts/styles/constants.d.ts +1 -1
  5. package/dist/dts/styles/constants.d.ts.map +1 -1
  6. package/dist/dts/styles/layout.styles.d.ts.map +1 -1
  7. package/dist/dts/utils/constants.d.ts +2 -0
  8. package/dist/dts/utils/constants.d.ts.map +1 -1
  9. package/dist/esm/main/layout-main.js +18 -1
  10. package/dist/esm/styles/constants.js +4 -3
  11. package/dist/esm/styles/layout.styles.js +15 -10
  12. package/dist/esm/utils/constants.js +11 -0
  13. package/dist/foundation-layout.d.ts +4 -0
  14. package/docs/api-report.md.api.md +2 -0
  15. package/package.json +13 -12
package/dist/custom-elements.json CHANGED
@@ -1194,12 +1194,13 @@
1194
1194
  "path": "src/styles/constants.ts",
1195
1195
  "declarations": [
1196
1196
  {
1197
- "kind": "variable",
1197
+ "kind": "function",
1198
1198
  "name": "glVisualConfig",
1199
- "type": {
1200
- "text": "Omit<LayoutConfig, 'root'>"
1201
- },
1202
- "default": "{\n dimensions: {\n headerHeight: 38,\n borderWidth: 12,\n },\n header: {\n maximise: 'maximise',\n minimise: 'minimise',\n popout: false,\n },\n}"
1199
+ "return": {
1200
+ "type": {
1201
+ "text": "Omit<LayoutConfig, 'root'>"
1202
+ }
1203
+ }
1203
1204
  },
1204
1205
  {
1205
1206
  "kind": "variable",
@@ -1291,7 +1292,7 @@
1291
1292
  {
1292
1293
  "kind": "variable",
1293
1294
  "name": "layoutStyles",
1294
- "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\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 .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: 0px -1px 15px rgba(0, 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 .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: 0px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px) 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: 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: 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: 30px;\n height: 30px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: 16px;\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: 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: 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: 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: 38px;\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: 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: 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 }\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 user-select: none;\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 {.lm_header .lm_tab.lm_active\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`",
1295
+ "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n :host {\n --foundation-tab-height: calc((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);\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 .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: 0px -1px 15px rgba(0, 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 .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: 0px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px) 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 .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: 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 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 .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: 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: 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 }\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 user-select: none;\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: 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 .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 {.lm_header .lm_tab.lm_active\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`",
1295
1296
  "description": "`ElementStyles` which defines the css for FoundationLayout.",
1296
1297
  "privacy": "public"
1297
1298
  }
@@ -1329,6 +1330,18 @@
1329
1330
  },
1330
1331
  "default": "'f-layout-popout'",
1331
1332
  "description": "Put this classname on an element which is a DOM parent of the layout, and\nif the layout goes into popout mode then it will place itself as the only child\nfor the popout container you set."
1333
+ },
1334
+ {
1335
+ "kind": "variable",
1336
+ "name": "DEFAULT_TAB_HEIGHT",
1337
+ "type": {
1338
+ "text": "string"
1339
+ },
1340
+ "default": "'36px'"
1341
+ },
1342
+ {
1343
+ "kind": "function",
1344
+ "name": "getLayoutHeaderHeight"
1332
1345
  }
1333
1346
  ],
1334
1347
  "exports": [
@@ -1347,6 +1360,22 @@
1347
1360
  "name": "LAYOUT_POPOUT_CONTAINER_CLASS",
1348
1361
  "module": "src/utils/constants.ts"
1349
1362
  }
1363
+ },
1364
+ {
1365
+ "kind": "js",
1366
+ "name": "DEFAULT_TAB_HEIGHT",
1367
+ "declaration": {
1368
+ "name": "DEFAULT_TAB_HEIGHT",
1369
+ "module": "src/utils/constants.ts"
1370
+ }
1371
+ },
1372
+ {
1373
+ "kind": "js",
1374
+ "name": "getLayoutHeaderHeight",
1375
+ "declaration": {
1376
+ "name": "getLayoutHeaderHeight",
1377
+ "module": "src/utils/constants.ts"
1378
+ }
1350
1379
  }
1351
1380
  ]
1352
1381
  },
package/dist/dts/main/layout-main.d.ts CHANGED
@@ -126,6 +126,10 @@ export declare class FoundationLayout extends FoundationElement implements Layou
126
126
  private onPreItemMaximised;
127
127
  /** @internal */
128
128
  private onPreItemMinimised;
129
+ /** @internal */
130
+ private customTokensMap;
131
+ /** @internal */
132
+ customTokensMapChanged(): void;
129
133
  /**
130
134
  * JS API, public
131
135
  */
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/styles/constants.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LayoutConfig } from '@genesis-community/golden-layout';
2
- export declare const glVisualConfig: Omit<LayoutConfig, 'root'>;
2
+ export declare const glVisualConfig: () => Omit<LayoutConfig, "root">;
3
3
  /**
4
4
  * A collection of SVG icons in base64 format.
5
5
  * @remarks
package/dist/dts/styles/constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/styles/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAEhE,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAUrD,CAAC;AAoBF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/styles/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAGhE,eAAO,MAAM,cAAc,QAAO,IAAI,CAAC,YAAY,EAAE,MAAM,CAUzD,CAAC;AAoBH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC"}
package/dist/dts/styles/layout.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AA0FA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDA4axB,CAAC"}
1
+ {"version":3,"file":"layout.styles.d.ts","sourceRoot":"","sources":["../../../src/styles/layout.styles.ts"],"names":[],"mappings":"AA2FA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iDAgbxB,CAAC"}
package/dist/dts/utils/constants.d.ts CHANGED
@@ -33,4 +33,6 @@ export declare const LAYOUT_POPOUT_CONTROL_KEY = "f-layout-key";
33
33
  * @beta
34
34
  */
35
35
  export declare const LAYOUT_POPOUT_CONTAINER_CLASS = "f-layout-popout";
36
+ export declare const DEFAULT_TAB_HEIGHT = "36px";
37
+ export declare const getLayoutHeaderHeight: () => string;
36
38
  //# sourceMappingURL=constants.d.ts.map
package/dist/dts/utils/constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAA+B,CAAC;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,iBAAiB,CAAC;AAExD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,oBAAoB,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/utils/constants.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,aAAa,eAA2B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,eAA+B,CAAC;AAE9D;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,YAAY,+BAA+B,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,iBAAiB,CAAC;AAExD;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,oBAAoB,CAAC;AAE/D,eAAO,MAAM,kBAAkB,SAAS,CAAC;AAGzC,eAAO,MAAM,qBAAqB,cAKjC,CAAC"}
package/dist/esm/main/layout-main.js CHANGED
@@ -2,6 +2,7 @@ var _FoundationLayout__boundDragListener, _a;
2
2
  import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
3
3
  import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
4
4
  import { Session } from '@genesislcap/foundation-comms';
5
+ import { designTokensMap } from '@genesislcap/foundation-ui';
5
6
  import { layoutCacheDocument, UUID } from '@genesislcap/foundation-utils';
6
7
  import { attr, html, observable, ref, when } from '@microsoft/fast-element';
7
8
  import { FoundationElement } from '@microsoft/fast-foundation';
@@ -109,6 +110,8 @@ export class FoundationLayout extends FoundationElement {
109
110
  this.popupMode = false;
110
111
  /** @internal */
111
112
  _FoundationLayout__boundDragListener.set(this, undefined);
113
+ /** @internal */
114
+ this.customTokensMap = designTokensMap();
112
115
  this.onDragStart = this.onDragStart.bind(this);
113
116
  this.onDragStop = this.onDragStop.bind(this);
114
117
  this.cacheAndSaveLayout = this.cacheAndSaveLayout.bind(this);
@@ -197,6 +200,16 @@ export class FoundationLayout extends FoundationElement {
197
200
  onPreItemMinimised() {
198
201
  this.updateLifecycleToken();
199
202
  }
203
+ /** @internal */
204
+ customTokensMapChanged() {
205
+ // Handles the race condition of the layout being init before the tokens
206
+ // are configured, in this case it'll reload the layout with the tokens
207
+ if (!this.customTokensMap.value)
208
+ return;
209
+ if (!this.hasFirstLoaded)
210
+ return;
211
+ this.loadGLConfigAndSetup(this.layoutConfig);
212
+ }
200
213
  /**
201
214
  * JS API, public
202
215
  */
@@ -870,8 +883,9 @@ export class FoundationLayout extends FoundationElement {
870
883
  * @internal
871
884
  */
872
885
  loadGLConfigAndSetup(config) {
886
+ const _glVisualConfig = glVisualConfig();
873
887
  this.hasFirstLoaded = true;
874
- this.layout.loadLayout(Object.assign(Object.assign(Object.assign({}, config), glVisualConfig), { dimensions: Object.assign(Object.assign({}, glVisualConfig.dimensions), this.dimensionsConfig) }));
888
+ this.layout.loadLayout(Object.assign(Object.assign(Object.assign({}, config), _glVisualConfig), { dimensions: Object.assign(Object.assign({}, _glVisualConfig.dimensions), this.dimensionsConfig) }));
875
889
  this.attatchResizeEvents();
876
890
  }
877
891
  /**
@@ -992,6 +1006,9 @@ __decorate([
992
1006
  __decorate([
993
1007
  attr({ attribute: 'popout-config' })
994
1008
  ], FoundationLayout.prototype, "popoutConfig", void 0);
1009
+ __decorate([
1010
+ observable
1011
+ ], FoundationLayout.prototype, "customTokensMap", void 0);
995
1012
  const loadingTemplate = html `
996
1013
  <div class="html-spinner"></div>
997
1014
  `;
package/dist/esm/styles/constants.js CHANGED
@@ -1,6 +1,7 @@
1
- export const glVisualConfig = {
1
+ import { getLayoutHeaderHeight } from '../utils';
2
+ export const glVisualConfig = () => ({
2
3
  dimensions: {
3
- headerHeight: 38,
4
+ headerHeight: parseInt(getLayoutHeaderHeight().replace('px', '')),
4
5
  borderWidth: 12,
5
6
  },
6
7
  header: {
@@ -8,7 +9,7 @@ export const glVisualConfig = {
8
9
  minimise: 'minimise',
9
10
  popout: false,
10
11
  },
11
- };
12
+ });
12
13
  const renameSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI0NTAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgNDUwIDQ1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMTguNjEgMCAwIDE4LjYxIDIyMi44MSAyMjIuODEpIiBpZD0iT3V0bGluZSIgID48cGF0aCBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtZGFzaG9mZnNldDogMDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDQ7IGZpbGw6IHJnYigxMTEsMTI2LDEzNSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiICB0cmFuc2Zvcm09IiB0cmFuc2xhdGUoLTExLjk2LCAtMTIuMDQpIiBkPSJNIDIyLjg1MyAxLjE0OCBhIDMuNjI2IDMuNjI2IDAgMCAwIC01LjEyNCAwIEwgMS40NjUgMTcuNDEyIEEgNC45NjggNC45NjggMCAwIDAgMCAyMC45NDcgViAyMyBhIDEgMSAwIDAgMCAxIDEgSCAzLjA1MyBhIDQuOTY2IDQuOTY2IDAgMCAwIDMuNTM1IC0xLjQ2NCBMIDIyLjg1MyA2LjI3MSBBIDMuNjI2IDMuNjI2IDAgMCAwIDIyLjg1MyAxLjE0OCBaIE0gNS4xNzQgMjEuMTIyIEEgMy4wMjIgMy4wMjIgMCAwIDEgMy4wNTMgMjIgSCAyIFYgMjAuOTQ3IGEgMi45OCAyLjk4IDAgMCAxIDAuODc5IC0yLjEyMSBMIDE1LjIyMiA2LjQ4MyBsIDIuMyAyLjMgWiBNIDIxLjQzOCA0Ljg1NyBMIDE4LjkzMiA3LjM2NCBsIC0yLjMgLTIuMjk1IGwgMi41MDcgLTIuNTA3IGEgMS42MjMgMS42MjMgMCAxIDEgMi4yOTUgMi4zIFoiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz48L2c+PC9zdmc+Cg==';
13
14
  const maximiseSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTQ0IDMyaC0xMjhDNy4xNTYgMzIgMCAzOS4xNiAwIDQ4djEyOEMwIDE4NC44IDcuMTU2IDE5MiAxNiAxOTJTMzIgMTg0LjggMzIgMTc2VjY0aDExMkMxNTIuOCA2NCAxNjAgNTYuODQgMTYwIDQ4UzE1Mi44IDMyIDE0NCAzMnpNMTQ0IDQ0OEgzMnYtMTEyQzMyIDMyNy4yIDI0Ljg0IDMyMCAxNiAzMjBTMCAzMjcuMiAwIDMzNnYxMjhDMCA0NzIuOCA3LjE1NiA0ODAgMTYgNDgwaDEyOEMxNTIuOCA0ODAgMTYwIDQ3Mi44IDE2MCA0NjRTMTUyLjggNDQ4IDE0NCA0NDh6TTQzMiAzMjBjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZWNDQ4aC0xMTJjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZzNy4xNTYgMTYgMTYgMTZoMTI4YzguODQ0IDAgMTYtNy4xNTYgMTYtMTZ2LTEyOEM0NDggMzI3LjIgNDQwLjggMzIwIDQzMiAzMjB6TTQzMiAzMmgtMTI4QzI5NS4yIDMyIDI4OCAzOS4xNiAyODggNDhTMjk1LjIgNjQgMzA0IDY0SDQxNnYxMTJDNDE2IDE4NC44IDQyMy4yIDE5MiA0MzIgMTkyUzQ0OCAxODQuOCA0NDggMTc2di0xMjhDNDQ4IDM5LjE2IDQ0MC44IDMyIDQzMiAzMnoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=';
14
15
  const minimiseSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMCA0NjRDMCA0NTUuMiA3LjE2NCA0NDggMTYgNDQ4SDQ5NkM1MDQuOCA0NDggNTEyIDQ1NS4yIDUxMiA0NjRDNTEyIDQ3Mi44IDUwNC44IDQ4MCA0OTYgNDgwSDE2QzcuMTY0IDQ4MCAwIDQ3Mi44IDAgNDY0eiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==';
package/dist/esm/styles/layout.styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // NOTE: This file is stylelint ignored as the css class names that golden layout use go against the rules
2
2
  import { css } from '@microsoft/fast-element';
3
+ import { DEFAULT_TAB_HEIGHT } from '../utils';
3
4
  import { LAYOUT_ICONS } from './constants';
4
5
  const containerStyles = `
5
6
  :host {
@@ -94,6 +95,10 @@ export const layoutStyles = css `
94
95
  ${containerStyles}
95
96
  ${loadingSpinnerStyles}
96
97
 
98
+ :host {
99
+ --foundation-tab-height: calc((( (var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px);
100
+ }
101
+
97
102
  .lm_goldenlayout {
98
103
  border-radius: calc(var(--control-corner-radius) * 1.5px);
99
104
  }
@@ -153,7 +158,7 @@ export const layoutStyles = css `
153
158
  font-family: inherit;
154
159
  font-size: 13px;
155
160
  font-weight: 400;
156
- height: 30px;
161
+ height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);
157
162
  margin-right: 2px;
158
163
  margin-top: 3px;
159
164
  padding: 2px 16px;
@@ -169,11 +174,11 @@ export const layoutStyles = css `
169
174
  display: flex;
170
175
  }
171
176
  .lm_header .lm_controls > * {
172
- width: 30px;
173
- height: 30px;
177
+ width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);
178
+ height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);
174
179
  background-repeat: no-repeat;
175
180
  background-position: center;
176
- background-size: 16px;
181
+ background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);
177
182
  background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);
178
183
  border-radius: calc(var(--control-corner-radius) * 1.5px);
179
184
  margin-right: 4px;
@@ -196,7 +201,7 @@ export const layoutStyles = css `
196
201
  }
197
202
  .lm_header .lm_tab .lm_close_tab {
198
203
  background-image: url('${LAYOUT_ICONS.closeSVG}');
199
- background-size: 10px;
204
+ background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);
200
205
  background-repeat: no-repeat;
201
206
  margin-left: 12px;
202
207
  position: relative;
@@ -219,7 +224,7 @@ export const layoutStyles = css `
219
224
  background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');
220
225
  }
221
226
  .lm_header .lm_tabdropdown_list {
222
- top: 38px;
227
+ top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});
223
228
  right: 108px;
224
229
  background-color: var(--neutral-layer-3);
225
230
  border: 1px solid;
@@ -233,7 +238,7 @@ export const layoutStyles = css `
233
238
  white-space: nowrap;
234
239
  background-color: transparent;
235
240
  color: var(--neutral-foreground-rest);
236
- height: 36px;
241
+ height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});
237
242
  border-radius: 0;
238
243
  overflow: visible;
239
244
  text-overflow: normal;
@@ -351,10 +356,10 @@ export const layoutStyles = css `
351
356
  padding-left: 10px;
352
357
  }
353
358
  .lm_header .lm_tab .lm_close_tab {
354
- width: 14px;
355
- height: 14px;
359
+ width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);
360
+ height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);
361
+ top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);
356
362
  position: absolute;
357
- top: 11px;
358
363
  right: 0;
359
364
  text-align: center;
360
365
  }
package/dist/esm/utils/constants.js CHANGED
@@ -1,3 +1,5 @@
1
+ /* eslint-disable @typescript-eslint/no-magic-numbers */
2
+ import { designTokensMap } from '@genesislcap/foundation-ui';
1
3
  /**
2
4
  * Used to key what type of LayoutComponent an object is
3
5
  * @internal
@@ -33,3 +35,12 @@ export const LAYOUT_POPOUT_CONTROL_KEY = 'f-layout-key';
33
35
  * @beta
34
36
  */
35
37
  export const LAYOUT_POPOUT_CONTAINER_CLASS = 'f-layout-popout';
38
+ export const DEFAULT_TAB_HEIGHT = '36px';
39
+ // Reads the calc((((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px)
40
+ export const getLayoutHeaderHeight = () => {
41
+ const tokens = designTokensMap();
42
+ if (!tokens.value)
43
+ return DEFAULT_TAB_HEIGHT;
44
+ const { style, space } = tokens.value.design_tokens;
45
+ return `${(style.baseHeightMultiplier.$value + style.density.$value) * space.designUnit.$value - 4}px`;
46
+ };
package/dist/foundation-layout.d.ts CHANGED
@@ -201,6 +201,10 @@ export declare class FoundationLayout extends FoundationElement implements Layou
201
201
  private onPreItemMaximised;
202
202
  /** @internal */
203
203
  private onPreItemMinimised;
204
+ /** @internal */
205
+ private customTokensMap;
206
+ /** @internal */
207
+ customTokensMapChanged(): void;
204
208
  /**
205
209
  * JS API, public
206
210
  */
package/docs/api-report.md.api.md CHANGED
@@ -45,6 +45,8 @@ export class FoundationLayout extends FoundationElement implements LayoutCompone
45
45
  // @internal (undocumented)
46
46
  connectedCallback(): void;
47
47
  customButtons: CustomButton[];
48
+ // @internal (undocumented)
49
+ customTokensMapChanged(): void;
48
50
  dimensionsConfig?: LayoutConfig.Dimensions;
49
51
  // @internal (undocumented)
50
52
  disconnectedCallback(): void;
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.369.0",
4
+ "version": "14.370.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-layout.d.ts",
@@ -36,19 +36,20 @@
36
36
  }
37
37
  },
38
38
  "devDependencies": {
39
- "@genesislcap/foundation-testing": "14.369.0",
40
- "@genesislcap/genx": "14.369.0",
41
- "@genesislcap/rollup-builder": "14.369.0",
42
- "@genesislcap/ts-builder": "14.369.0",
43
- "@genesislcap/uvu-playwright-builder": "14.369.0",
44
- "@genesislcap/vite-builder": "14.369.0",
45
- "@genesislcap/webpack-builder": "14.369.0"
39
+ "@genesislcap/foundation-testing": "14.370.0",
40
+ "@genesislcap/genx": "14.370.0",
41
+ "@genesislcap/rollup-builder": "14.370.0",
42
+ "@genesislcap/ts-builder": "14.370.0",
43
+ "@genesislcap/uvu-playwright-builder": "14.370.0",
44
+ "@genesislcap/vite-builder": "14.370.0",
45
+ "@genesislcap/webpack-builder": "14.370.0"
46
46
  },
47
47
  "dependencies": {
48
48
  "@genesis-community/golden-layout": "^2.11.0",
49
- "@genesislcap/foundation-comms": "14.369.0",
50
- "@genesislcap/foundation-logger": "14.369.0",
51
- "@genesislcap/foundation-utils": "14.369.0",
49
+ "@genesislcap/foundation-comms": "14.370.0",
50
+ "@genesislcap/foundation-logger": "14.370.0",
51
+ "@genesislcap/foundation-ui": "14.370.0",
52
+ "@genesislcap/foundation-utils": "14.370.0",
52
53
  "@microsoft/fast-components": "2.30.6",
53
54
  "@microsoft/fast-element": "1.14.0",
54
55
  "@microsoft/fast-foundation": "2.49.6"
@@ -62,5 +63,5 @@
62
63
  "access": "public"
63
64
  },
64
65
  "customElements": "dist/custom-elements.json",
65
- "gitHead": "f733a868a4f3e947a51564b5f3fcc592804bd917"
66
+ "gitHead": "85079a1941403b9daee95a1cca7fc14bc5929435"
66
67
  }