@genesislcap/foundation-layout 9.0.1-alpha-b5c5eb7.0

package/dist/esm/main/layout-main.js

@@ -0,0 +1,391 @@
+var _a;
+import { __decorate } from "tslib";
+import { html, attr, observable, when, ref } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { logger } from '../utils/logger';
+import { GoldenLayout, LayoutConfig, ResolvedLayoutConfig, } from '@genesis-community/golden-layout';
+import { DEFAULT_RELOAD_BUFFER, LayoutEmitEvents, LayoutReceiveEvents, componentType, } from '../utils/';
+import { LayoutRegistrationError, LayoutUsageError } from '../utils/error';
+import { getMissingArrayItems } from '../utils/';
+import { globalDraggingStyles, glVisualConfig, layoutStyles } from '../styles';
+export { layoutStyles } from '../styles';
+/*
+ * We only want to apply the global stylesheet required for golden layout
+ * to work once, and only apply it if we actually use an instance of the
+ * layout that requires it
+ */
+let appliedGlobalStyles = false;
+/**
+ * @beta
+ * Top level web component which is used to initialise a custom layout
+ * @remarks
+ * Can be used in a composition to customise the styles of the layout.
+ */
+export class FoundationLayout extends FoundationElement {
+    /** @internal */
+    constructor() {
+        super();
+        this.layoutConfig = { root: undefined };
+        /** @internal */
+        this[_a] = 'root';
+        /**
+         * Number describing how long to wait in ms before reloading the config when adding items
+         * declaratively by the html API. Default 500 (ms).
+         * @beta
+         */
+        this.reloadBuffer = DEFAULT_RELOAD_BUFFER;
+        this.reloadPending = false;
+        this.registeredComponents = 0;
+        /** @internal */
+        this.hasFirstLoaded = false;
+        /** @internal */
+        this.usingDeclerativeAPI = false;
+        /**
+         * @beta
+         * Set to true when the user is currently dragging the panes inside of the layout
+         */
+        this.dragging = false;
+        this.onDragStart = this.onDragStart.bind(this);
+        this.onDragStop = this.onDragStop.bind(this);
+        this.cacheLayout = this.cacheLayout.bind(this);
+        this.onItemRemoved = this.onItemRemoved.bind(this);
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        logger.debug(`FoundationLayout connected to the DOM`);
+        this.layout = new GoldenLayout(this.layoutElement);
+        this.layout.resizeWithContainerAutomatically = true;
+        if (!appliedGlobalStyles) {
+            new CSSStyleSheet()
+                .replace(globalDraggingStyles)
+                .then((x) => document.adoptedStyleSheets.push(x))
+                .catch((e) => console.error('Failed to replace styles:', e));
+            appliedGlobalStyles = true;
+        }
+        this.shadowRoot.addEventListener('dragStart', this.onDragStart, true);
+        this.shadowRoot.addEventListener('dragStop', this.onDragStop, true);
+        this.shadowRoot.addEventListener('itemDestroyed', this.onItemRemoved, true);
+        this.shadowRoot.addEventListener('closeButtonPressed', this.onItemRemoved, true);
+    }
+    /** @internal */
+    disconnectedCallback() {
+        this.shadowRoot.removeEventListener('dragStart', this.onDragStart);
+        this.shadowRoot.removeEventListener('dragStop', this.onDragStop);
+        this.shadowRoot.removeEventListener('itemDestroyed', this.onItemRemoved);
+        this.shadowRoot.removeEventListener('closeButtonPressed', this.onItemRemoved);
+    }
+    /** @internal */
+    onDragStart() {
+        this.dragging = true;
+    }
+    /** @internal */
+    onDragStop() {
+        this.dragging = false;
+    }
+    /** @internal */
+    onItemAdded() {
+        this.$emit(LayoutEmitEvents.itemAdded);
+    }
+    /** @internal */
+    onItemRemoved() {
+        this.$emit(LayoutEmitEvents.itemRemoved);
+    }
+    /**
+     * JS API, public
+     */
+    /**
+     * @beta
+     * Gets all of the required registration function names for a set of config
+     * @remarks
+     * You can use this with {@link FoundationLayout.registeredItems | registeredItems} to work out what items you need to register with {@link FoundationLayout.registerItem | registerItem()}
+     * before loading the layout with {@link FoundationLayout.loadLayout | loadLayout()}
+     *
+     * @param layout - any version of {@link SerialisedLayout} object describing the layout
+     * @returns string[] - an item for each registered element in the config. These must all be added before {@link FoundationLayout.loadLayout | function}
+     * @throws - various errors if the layout parameter cannot be parsed
+     */
+    static layoutRequiredRegistrations(layout) {
+        const { c: config } = layout;
+        const layoutConfig = LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(config));
+        const names = [];
+        JSON.stringify(layoutConfig, (k, v) => {
+            if (k === 'componentType') {
+                names.push(v);
+            }
+            return v;
+        });
+        return names.sort();
+    }
+    /**
+     * @beta
+     * Gets all of the currently registered names
+     * @remarks
+     * You can use this with {@link FoundationLayout.layoutRequiredRegistrations | layoutRequiredRegistrations} to work out what items you need to register with {@link FoundationLayout.registerItem | registerItem()}
+     * before loading the layout with {@link FoundationLayout.loadLayout | loadLayout()}
+     *
+     * @returns string[] - an item for each registered element currently registered with the layout system
+     */
+    registeredItems() {
+        return this.layout.getRegisteredComponentTypeNames();
+    }
+    /**
+     * @beta
+     * Gets a minified string containing the config describing the current layout of the layout object to later restore in {@link FoundationLayout.loadLayout | function}
+     * @returns - latest version of {@link SerialisedLayout} describing the layout
+     */
+    getLayout() {
+        return { v: '1', c: ResolvedLayoutConfig.minifyConfig(this.layout.saveLayout()) };
+    }
+    /**
+     * @beta
+     * Restores a layout described in the config from {@link FoundationLayout.getLayout | getLayout()}
+     *
+     * @remarks
+     * In order to restore a layout you must have registered all of the required panes with the layout system before restoring it. If you are just setting the layout using the declarative API then all of the same components will be registered. <br/ >If you have added any elements using {@link FoundationLayout.registerItem} then you must ensure all of the same items have been added again. To make tracking what items are registered easier it is recommended in this case you explicitly name your registrations using the `id` parameter available on the {@link RegisteredElementConfig} and `foundation-layout-item` APIs. <br/> You can use {@link FoundationLayout.layoutRequiredRegistrations} to check which items are registered in a current layout in order to dynamically add any missing items before you can restore the layout
+     *
+     * @param layout - any version of {@link SerialisedLayout} object describing the layout
+     * @throws {@link LayoutUsageError} if you attempt to load a layout with registered items that are not currently registered with the layout system
+     * @throws various errors if the layout string is malformed and cannot be parsed
+     */
+    loadLayout(layout) {
+        const alreadyRegistered = this.registeredItems();
+        const wantedRegistered = FoundationLayout.layoutRequiredRegistrations(layout);
+        const missingRegisteredItems = getMissingArrayItems(wantedRegistered, alreadyRegistered);
+        if (missingRegisteredItems.length !== 0) {
+            throw new LayoutUsageError(`Trying to load layout with extra components. The component(s) not currently loaded are "${[
+                ...new Set(missingRegisteredItems),
+            ]}"`);
+        }
+        this.layout.loadLayout(Object.assign(Object.assign({}, LayoutConfig.fromResolved(ResolvedLayoutConfig.unminifyConfig(layout.c))), glVisualConfig));
+    }
+    /**
+     * @beta
+     * Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
+     * @remarks
+     * Adding a new item invokes the registration previously made explicitly via {@link FoundationLayout.registerItem | registerItem()} or implicitly via the html declerative API.
+     *
+     * The elements added onto the new pane are copies using `element.cloneNode()` of the original element references used during registration.
+     *
+     * @param config - {@link RegisteredElementConfig} configuration items for the new pane
+     * @param placement - where to add the new pane on the layout (defaults to the right hand side)
+     * @throws {@link LayoutRegistrationError} if you attempt to add an item before it has been registered
+     */
+    addItem(config, placement = { area: 'right' }) {
+        const { registration, title, size, closable } = config;
+        if (!this.layout.getRegisteredComponentTypeNames().includes(registration)) {
+            throw new LayoutRegistrationError(`Cannot add item '${registration}' which is not registered with the layout system.`);
+        }
+        const itemConfig = {
+            type: 'component',
+            componentType: registration,
+            title: title !== null && title !== void 0 ? title : `Item ${registration}`,
+            reorderEnabled: true,
+            isClosable: closable || false,
+            size,
+        };
+        /**
+         * If no root is added (no items via declerative API) then
+         * this new item is the root so set it and return
+         */
+        if (typeof this.layoutConfig.root === 'undefined') {
+            this.layoutConfig = Object.assign({ root: itemConfig }, glVisualConfig);
+            this.layout.loadLayout(this.layoutConfig);
+            this.onItemAdded();
+            return;
+        }
+        // Else we add the item relative to existing items
+        this.cacheLayout();
+        const { area } = placement;
+        this.layoutConfig = Object.assign({ root: {
+                type: area === 'top' || area === 'bottom' ? 'column' : 'row',
+                content: area === 'right' || area === 'bottom'
+                    ? [this.layoutConfig.root, itemConfig]
+                    : [itemConfig, this.layoutConfig.root],
+            } }, glVisualConfig);
+        this.layout.loadLayout(this.layoutConfig);
+        this.onItemAdded();
+    }
+    /**
+     * @beta
+     * Register a collection of `Element` and associate them with an `ID` with the layout system for later use.
+     * @remarks
+     * You would use this to register elements that you later want to load when using {@link FoundationLayout.loadLayout}.
+     * Use {@link FoundationLayout.layoutRequiredRegistrations} to see what components need to be registered for a certain config
+     * and then register them using this function before calling {@link FoundationLayout.loadLayout}.
+     *
+     * When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear. If you want to avoid this you can pass copies using `element.cloneNode(true)`.
+     *
+     * @param registration - string of the registration ID
+     * @param elements - Elements[] containing the reference to the elements to register for later usage
+     * @throws {@link LayoutUsageError} if you attempt to add an item before the layout has been initialised.
+     * @throws {@link LayoutRegistrationError} if you attempt to use a `registration` name which is already in use (declarative html API and JavaScript API registrations use the same "pool" of registration names).
+     * @returns - string defining the name of the registered item with the layout system (config.id if set).
+     */
+    registerItem(registration, elements) {
+        if (!this.layout.isInitialised) {
+            throw new LayoutUsageError('Cannot add item via JS API until initialised');
+        }
+        return this.cacheElementsAndRegister({
+            elements: elements,
+            id: registration,
+        });
+    }
+    /**
+     * Internal APIs
+     */
+    /**
+     * Request to reload the layout using the private member config. Debounced using the time set
+     * in this.reloadBuffer
+     * @internal
+     */
+    requestLayoutReload() {
+        if (this.reloadPending)
+            return;
+        this.reloadPending = true;
+        setTimeout(() => {
+            this.layout.loadLayout(this.layoutConfig);
+            this.reloadPending = false;
+            if (!this.hasFirstLoaded) {
+                this.$emit(LayoutEmitEvents.firstLoaded);
+                this.hasFirstLoaded = true;
+            }
+        }, this.reloadBuffer);
+    }
+    /**
+     * Adds a config item into the root config and returns a link to the new config in the tree
+     * @typeParam T - RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig;
+     * @param item - T to add as the root element of the layout
+     * @returns T the reference to the added item in the whole item config
+     * @throws {@link LayoutUsageError} if you try and add an item when a root has already been set (this happens if you have multiple direct children of this html element which is an incorrect usage)
+     * @internal
+     */
+    addItemFromChild(item) {
+        if (typeof this.layoutConfig.root !== 'undefined') {
+            throw new LayoutUsageError('Cannot have multiple layout items as direct descendants of the layout root. You need to put the layout items within a layout region.');
+        }
+        this.usingDeclerativeAPI = true;
+        this.layoutConfig = Object.assign({ root: item }, glVisualConfig);
+        return this.layoutConfig.root;
+    }
+    /**
+     * Registers a function with golden layout to create a pane
+     * @param elements - Elements[] to add to new new pane
+     * @param id - optional string which is used to register the new function with golden layout. Defaults to sequentially setting the IDs for default items
+     * @returns - string which is the registered ID
+     * @throws - {@link LayoutRegistrationError} if the id is already in use
+     * @internal
+     */
+    cacheElementsAndRegister({ elements, id }) {
+        const reg = id || `${(this.registeredComponents += 1)}`;
+        if (this.layout.getRegisteredComponentTypeNames().includes(reg)) {
+            throw new LayoutRegistrationError(`Cannot register item with already registered name: '${reg}'`);
+        }
+        const setupEvents = this.setupLayoutReceiveEvents.bind(this);
+        /**
+         * What we need the registration function to do:
+         * "Consume" the registered elements initially, so we don't have duplicate items from the declarative API
+         * We need to hold a master copy of the registered items
+         * When an item is created at first, it is copied from the master copy so it behaves as expected
+         * When a copy is created it becomes its own instance for the lifetime of the layout in the DOM
+         *
+         * This has the effect of allowing us to create multiple instances of the same registered item, and each
+         * created instance is separate allowing it to implement its own serialise and cache of data.
+         */
+        const registrationFunction = (function () {
+            // Use appendChild to consume the elements and save them in the master copy
+            const masterCopy = document.createDocumentFragment();
+            elements.forEach((e) => masterCopy.appendChild(e));
+            let instanceCount = 0;
+            const instances = new Map();
+            return (container, state) => {
+                var _b;
+                // If this is a new instance then assign it an instanceCount
+                if (!(state === null || state === void 0 ? void 0 : state['instance'])) {
+                    instanceCount += 1;
+                    state['instance'] = instanceCount;
+                }
+                container.state['instance'] = state['instance'];
+                container.state['originalTitle'] = (_b = state['originalTitle']) !== null && _b !== void 0 ? _b : container.title;
+                // If this is a new instance then copy the master copy into the instances map
+                // this is then the instance that is recalled for this version each time
+                // the key point is "cloneNode" which makes a copy at this point
+                if (!instances.has(state === null || state === void 0 ? void 0 : state['instance'])) {
+                    const instanceCopy = document.createDocumentFragment();
+                    Array.from(masterCopy.children).forEach((e) => instanceCopy.appendChild(e.cloneNode(true)));
+                    instances.set(state['instance'], [...instanceCopy.children]);
+                }
+                // get the instance from the map and append it to the container
+                instances.get(state['instance']).forEach((e) => container.element.appendChild(e));
+                setupEvents(container, state);
+            };
+        })();
+        this.layout.registerComponentFactoryFunction(reg, registrationFunction);
+        return reg;
+    }
+    /**
+     * Sets up the event listeners for the layout receive events
+     * @internal
+     */
+    setupLayoutReceiveEvents(container, state) {
+        const originalTitle = container.state['originalTitle'];
+        container.element.addEventListener(LayoutReceiveEvents.changeTitle, (e) => {
+            const maybeDetail = e === null || e === void 0 ? void 0 : e.detail;
+            if (!((maybeDetail === null || maybeDetail === void 0 ? void 0 : maybeDetail.title) && (maybeDetail === null || maybeDetail === void 0 ? void 0 : maybeDetail.mode))) {
+                logger.error('Invalid change-title event.detail:', e === null || e === void 0 ? void 0 : e.detail);
+            }
+            container.setTitle(`${maybeDetail.mode === 'suffix' ? originalTitle + ' ' : ''}${maybeDetail.title}`);
+        });
+    }
+    /**
+     * Saves the stored layout config according to the Golden Layout provider.
+     * Needs to be called when the layout is updated outside of using addItemFromChild.
+     * @internal
+     * */
+    cacheLayout() {
+        this.layoutConfig = LayoutConfig.fromResolved(this.layout.saveLayout());
+    }
+}
+_a = componentType;
+__decorate([
+    attr({ attribute: 'reload-buffer' })
+], FoundationLayout.prototype, "reloadBuffer", void 0);
+__decorate([
+    observable
+], FoundationLayout.prototype, "hasFirstLoaded", void 0);
+__decorate([
+    observable
+], FoundationLayout.prototype, "usingDeclerativeAPI", void 0);
+__decorate([
+    observable
+], FoundationLayout.prototype, "dragging", void 0);
+const loadingTemplate = html `
+  <div class="html-spinner"></div>
+`;
+/**
+ * `ViewTemplate` which defines the html for {@link FoundationLayout}.
+ * @remarks
+ * Can be used in a composition to customise the styles of the layout.
+ * @beta
+ */
+export const layoutTemplate = html `
+  <template>
+    ${when((x) => !x.hasFirstLoaded && x.usingDeclerativeAPI, loadingTemplate)}
+    <div class="layout-container" ${ref('layoutElement')}></div>
+  </template>
+`;
+/**
+ * The Foundation Layout Composed element
+ *
+ * @internal
+ * @remarks
+ * Can be registered with the design system via {@link foundationlayoutComponents}.
+ *
+ * Tag Name: <{prefix}-layout>
+ */
+export const foundationLayout = FoundationLayout.compose({
+    baseName: 'layout',
+    styles: layoutStyles,
+    template: layoutTemplate,
+});
+//# sourceMappingURL=layout-main.js.map

package/dist/esm/main/layout-main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-main.js","sourceRoot":"","sources":["../../../src/main/layout-main.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAGL,YAAY,EAEZ,YAAY,EACZ,oBAAoB,GAErB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACL,qBAAqB,EAErB,gBAAgB,EAChB,mBAAmB,EAKnB,aAAa,GAEd,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE/E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC;;;;GAIG;AACH,IAAI,mBAAmB,GAAG,KAAK,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,gBAAiB,SAAQ,iBAAiB;IA6BrD,gBAAgB;IAChB;QACE,KAAK,EAAE,CAAC;QA3BF,iBAAY,GAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QAEzD,gBAAgB;QAChB,QAAe,GAAG,MAAe,CAAC;QAElC;;;;WAIG;QACmC,iBAAY,GAAW,qBAAqB,CAAC;QAC3E,kBAAa,GAAG,KAAK,CAAC;QACtB,yBAAoB,GAAG,CAAC,CAAC;QAEjC,gBAAgB;QACJ,mBAAc,GAAG,KAAK,CAAC;QACnC,gBAAgB;QACJ,wBAAmB,GAAG,KAAK,CAAC;QAExC;;;WAGG;QACS,aAAQ,GAAY,KAAK,CAAC;QAKpC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,gCAAgC,GAAG,IAAI,CAAC;QAEpD,IAAI,CAAC,mBAAmB,EAAE;YACxB,IAAI,aAAa,EAAE;iBAChB,OAAO,CAAC,oBAAoB,CAAC;iBAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;iBAChD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC,CAAC,CAAC,CAAC;YAC/D,mBAAmB,GAAG,IAAI,CAAC;SAC5B;QAED,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACpE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAC5E,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IACnF,CAAC;IAED,gBAAgB;IAChB,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACnE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAChF,CAAC;IAED,gBAAgB;IACR,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAED,gBAAgB;IACR,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,gBAAgB;IACR,WAAW;QACjB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,gBAAgB;IACR,aAAa;QACnB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC3C,CAAC;IAED;;OAEG;IAEH;;;;;;;;;;OAUG;IACH,MAAM,CAAC,2BAA2B,CAAC,MAAwB;QACzD,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;QAC7B,MAAM,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,oBAAoB,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;QAE5F,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpC,IAAI,CAAC,KAAK,eAAe,EAAE;gBACzB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;aACf;YACD,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED;;;;;;;;OAQG;IACH,eAAe;QACb,OAAO,IAAI,CAAC,MAAM,CAAC,+BAA+B,EAAE,CAAC;IACvD,CAAC;IAED;;;;OAIG;IACH,SAAS;QACP,OAAO,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;IACpF,CAAC;IAED;;;;;;;;;;OAUG;IACH,UAAU,CAAC,MAAwB;QACjC,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACjD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,2BAA2B,CAAC,MAAM,CAAC,CAAC;QAC9E,MAAM,sBAAsB,GAAG,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;QACzF,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;YACvC,MAAM,IAAI,gBAAgB,CACxB,2FAA2F;gBACzF,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC;aACnC,GAAG,CACL,CAAC;SACH;QACD,IAAI,CAAC,MAAM,CAAC,UAAU,iCACjB,YAAY,CAAC,YAAY,CAAC,oBAAoB,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GACxE,cAAc,EACjB,CAAC;IACL,CAAC;IAED;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,MAA+B,EAAE,YAAuB,EAAE,IAAI,EAAE,OAAO,EAAE;QAC/E,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;QAEvD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,+BAA+B,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YACzE,MAAM,IAAI,uBAAuB,CAC/B,oBAAoB,YAAY,mDAAmD,CACpF,CAAC;SACH;QAED,MAAM,UAAU,GAAwB;YACtC,IAAI,EAAE,WAAW;YACjB,aAAa,EAAE,YAAY;YAC3B,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,QAAQ,YAAY,EAAE;YACtC,cAAc,EAAE,IAAI;YACpB,UAAU,EAAE,QAAQ,IAAI,KAAK;YAC7B,IAAI;SACL,CAAC;QAEF;;;WAGG;QACH,IAAI,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,KAAK,WAAW,EAAE;YACjD,IAAI,CAAC,YAAY,mBACf,IAAI,EAAE,UAAU,IACb,cAAc,CAClB,CAAC;YACF,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;SACR;QAED,kDAAkD;QAClD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;QAE3B,IAAI,CAAC,YAAY,mBACf,IAAI,EAAE;gBACJ,IAAI,EAAE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;gBAC5D,OAAO,EACL,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,QAAQ;oBACnC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;oBACtC,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;aAC3C,IACE,cAAc,CAClB,CAAC;QAEF,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,YAAoB,EAAE,QAAmB;QACpD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE;YAC9B,MAAM,IAAI,gBAAgB,CAAC,8CAA8C,CAAC,CAAC;SAC5E;QAED,OAAO,IAAI,CAAC,wBAAwB,CAAC;YACnC,QAAQ,EAAE,QAAQ;YAClB,EAAE,EAAE,YAAY;SACjB,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IAEH;;;;OAIG;IACH,mBAAmB;QACjB,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QAE/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;gBACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;aAC5B;QACH,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACxB,CAAC;IAED;;;;;;;OAOG;IACH,gBAAgB,CAA2B,IAAO;QAChD,IAAI,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,KAAK,WAAW,EAAE;YACjD,MAAM,IAAI,gBAAgB,CACxB,sIAAsI,CACvI,CAAC;SACH;QAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAEhC,IAAI,CAAC,YAAY,mBACf,IAAI,EAAE,IAAI,IACP,cAAc,CAClB,CAAC;QACF,OAAO,IAAI,CAAC,YAAY,CAAC,IAAS,CAAC;IACrC,CAAC;IAED;;;;;;;OAOG;IACH,wBAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAsB;QAC3D,MAAM,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,CAAC,EAAE,CAAC;QAExD,IAAI,IAAI,CAAC,MAAM,CAAC,+BAA+B,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;YAC/D,MAAM,IAAI,uBAAuB,CAC/B,uDAAuD,GAAG,GAAG,CAC9D,CAAC;SACH;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7D;;;;;;;;;WASG;QACH,MAAM,oBAAoB,GAAG,CAAC;YAC5B,2EAA2E;YAC3E,MAAM,UAAU,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;YACrD,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnD,IAAI,aAAa,GAAG,CAAC,CAAC;YACtB,MAAM,SAAS,GAA2B,IAAI,GAAG,EAAE,CAAC;YAEpD,OAAO,CAAC,SAA6B,EAAE,KAA4B,EAAE,EAAE;;gBACrE,4DAA4D;gBAC5D,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,UAAU,CAAC,CAAA,EAAE;oBACxB,aAAa,IAAI,CAAC,CAAC;oBACnB,KAAK,CAAC,UAAU,CAAC,GAAG,aAAa,CAAC;iBACnC;gBACD,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;gBAEhD,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAA,KAAK,CAAC,eAAe,CAAC,mCAAI,SAAS,CAAC,KAAK,CAAC;gBAE7E,6EAA6E;gBAC7E,wEAAwE;gBACxE,gEAAgE;gBAChE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,UAAU,CAAC,CAAC,EAAE;oBACvC,MAAM,YAAY,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;oBACvD,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAC5C,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAC5C,CAAC;oBACF,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;iBAC9D;gBAED,+DAA+D;gBAC/D,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;gBAElF,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAChC,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;QAEL,IAAI,CAAC,MAAM,CAAC,gCAAgC,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC;QACxE,OAAO,GAAG,CAAC;IACb,CAAC;IAED;;;OAGG;IACK,wBAAwB,CAAC,SAA6B,EAAE,KAAgB;QAC9E,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAEvD,SAAS,CAAC,OAAO,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAM,EAAE,EAAE;YAC7E,MAAM,WAAW,GAAG,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAA2D,CAAC;YACnF,IAAI,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,MAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,CAAA,CAAC,EAAE;gBAC9C,MAAM,CAAC,KAAK,CAAC,oCAAoC,EAAE,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,CAAC,CAAC;aAC/D;YAED,SAAS,CAAC,QAAQ,CAChB,GAAG,WAAW,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAClF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;SAIK;IACG,WAAW;QACjB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1E,CAAC;CACF;KAxYE,aAAa;AAOwB;IAArC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;sDAA8C;AAKvE;IAAX,UAAU;wDAAwB;AAEvB;IAAX,UAAU;6DAA6B;AAM5B;IAAX,UAAU;kDAA2B;AAsXxC,MAAM,eAAe,GAAG,IAAI,CAAA;;CAE3B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAkB;;MAE9C,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,mBAAmB,EAAE,eAAe,CAAC;oCAC1C,GAAG,CAAC,eAAe,CAAC;;CAEvD,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC;IACvD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,cAAc;CACzB,CAAC,CAAC"}

package/dist/esm/main/layout-region.js

@@ -0,0 +1,98 @@
+var _a;
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { logger } from '../utils/logger';
+import { componentType, getParentLayoutComponent, layoutRegionValue, wrapperTemplate, } from '../utils';
+import { FoundationElement } from '@microsoft/fast-foundation';
+const defaultLayoutType = layoutRegionValue[0];
+const regionConveter = (x) => {
+    const t = {
+        horizontal: 'column',
+        vertical: 'row',
+        tabs: 'stack',
+    };
+    return t[x];
+};
+/**
+ * @beta
+ * `FoundationLayoutRegion` is a custom element that represents a region in the layout.
+ * @remarks
+ * This element is used to create a region in the layout. It can be used to create a horizontal or vertical split, or a tabbed region.
+ *
+ * This is a simple component which is only used to define the layout splits; any JavaScript API interactions or custom styling is used via {@link FoundationLayout}.
+ */
+export class FoundationLayoutRegion extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this[_a] = 'horizontal';
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        if (!layoutRegionValue.includes(this.type)) {
+            this.type = defaultLayoutType;
+            logger.warn(`Using invalid attribute "type", defaulting to ${defaultLayoutType}`);
+        }
+        this[componentType] = this.type;
+        this.setupLayoutRegion();
+    }
+    /**
+     * Gets the layout config for this region using {@link FoundationLayoutRegion.constructLayoutConfig} and adds it into the main config tree via the parents. It saves a reference to the this config so a child can add its config in later.
+     * @internal
+     */
+    setupLayoutRegion() {
+        this.layoutConfig = this.getParentLayoutComponent().addItemFromChild(this.constructLayoutConfig());
+    }
+    /**
+     * Creates a golden layout config for this object.
+     * @internal
+     */
+    constructLayoutConfig() {
+        const glRegion = regionConveter(this[componentType]);
+        return {
+            type: glRegion,
+            content: [],
+            size: this.size,
+        };
+    }
+    /** @internal */
+    getParentLayoutComponent() {
+        return getParentLayoutComponent.apply(this);
+    }
+    /** @internal */
+    addItemFromChild(item) {
+        this.layoutConfig.content.push(item);
+        return this.layoutConfig.content[this.layoutConfig.content.length - 1];
+    }
+    /** @internal */
+    requestLayoutReload() {
+        this.getParentLayoutComponent().requestLayoutReload();
+    }
+    /** @internal */
+    cacheElementsAndRegister(config) {
+        return this.getParentLayoutComponent().cacheElementsAndRegister(config);
+    }
+}
+_a = componentType;
+__decorate([
+    attr
+], FoundationLayoutRegion.prototype, "size", void 0);
+__decorate([
+    attr
+], FoundationLayoutRegion.prototype, "type", void 0);
+/**
+ * The FoundationLayoutRegion Composed element
+ *
+ * @internal
+ * @remarks
+ * Can be registered with the design system via {@link foundationlayoutComponents}.
+ * You do not need to compose your own version of this to update the styles of the layout.
+ *
+ * Tag Name: <{prefix}-layout-region>
+ */
+export const foundationLayoutRegion = FoundationLayoutRegion.compose({
+    baseName: 'layout-region',
+    template: wrapperTemplate,
+});
+//# sourceMappingURL=layout-region.js.map

package/dist/esm/main/layout-region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-region.js","sourceRoot":"","sources":["../../../src/main/layout-region.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAM/C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EACL,aAAa,EACb,wBAAwB,EAGxB,iBAAiB,EAEjB,eAAe,GAChB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAG/C,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAuB,EAAE;IAClE,MAAM,CAAC,GAAqD;QAC1D,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,OAAO;KACd,CAAC;IACF,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AACd,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,OAAO,sBAAuB,SAAQ,iBAAiB;IAA7D;;QAcE,gBAAgB;QAChB,QAAe,GAAqB,YAAY,CAAC;IA+DnD,CAAC;IAtDC,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC1C,IAAI,CAAC,IAAI,GAAG,iBAAiB,CAAC;YAC9B,MAAM,CAAC,IAAI,CAAC,iDAAiD,iBAAiB,EAAE,CAAC,CAAC;SACnF;QACD,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACK,iBAAiB;QACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC,gBAAgB,CAClE,IAAI,CAAC,qBAAqB,EAAE,CAC7B,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,qBAAqB;QAC3B,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACrD,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;IACJ,CAAC;IAED,gBAAgB;IACR,wBAAwB;QAC9B,OAAO,wBAAwB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;IAChB,gBAAgB,CAA2B,IAAO;QAChD,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;QAC5C,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAM,CAAC;IAC9E,CAAC;IAED,gBAAgB;IAChB,mBAAmB;QACjB,IAAI,CAAC,wBAAwB,EAAE,CAAC,mBAAmB,EAAE,CAAC;IACxD,CAAC;IAED,gBAAgB;IAChB,wBAAwB,CAAC,MAA0B;QACjD,OAAO,IAAI,CAAC,wBAAwB,EAAE,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC;IAC1E,CAAC;CACF;KA/DE,aAAa;AAVR;IAAL,IAAI;oDAAc;AAOb;IAAL,IAAI;oDAAwB;AAoE/B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,OAAO,CAAC;IACnE,QAAQ,EAAE,eAAe;IACzB,QAAQ,EAAE,eAAe;CAC1B,CAAC,CAAC"}

package/dist/esm/main/main.css

@@ -0,0 +1,17 @@
+/* index.ejs styling */
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: red;
+}
+
+:not(:defined) {
+  visibility: hidden;
+}

package/dist/esm/styles/constants.js

@@ -0,0 +1,16 @@
+export const glVisualConfig = {
+    dimensions: {
+        headerHeight: 38,
+        borderWidth: 12,
+    },
+    header: {
+        maximise: 'maximise',
+        minimise: 'minimise',
+        popout: false,
+    },
+};
+export const maximisSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMTQ0IDMyaC0xMjhDNy4xNTYgMzIgMCAzOS4xNiAwIDQ4djEyOEMwIDE4NC44IDcuMTU2IDE5MiAxNiAxOTJTMzIgMTg0LjggMzIgMTc2VjY0aDExMkMxNTIuOCA2NCAxNjAgNTYuODQgMTYwIDQ4UzE1Mi44IDMyIDE0NCAzMnpNMTQ0IDQ0OEgzMnYtMTEyQzMyIDMyNy4yIDI0Ljg0IDMyMCAxNiAzMjBTMCAzMjcuMiAwIDMzNnYxMjhDMCA0NzIuOCA3LjE1NiA0ODAgMTYgNDgwaDEyOEMxNTIuOCA0ODAgMTYwIDQ3Mi44IDE2MCA0NjRTMTUyLjggNDQ4IDE0NCA0NDh6TTQzMiAzMjBjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZWNDQ4aC0xMTJjLTguODQ0IDAtMTYgNy4xNTYtMTYgMTZzNy4xNTYgMTYgMTYgMTZoMTI4YzguODQ0IDAgMTYtNy4xNTYgMTYtMTZ2LTEyOEM0NDggMzI3LjIgNDQwLjggMzIwIDQzMiAzMjB6TTQzMiAzMmgtMTI4QzI5NS4yIDMyIDI4OCAzOS4xNiAyODggNDhTMjk1LjIgNjQgMzA0IDY0SDQxNnYxMTJDNDE2IDE4NC44IDQyMy4yIDE5MiA0MzIgMTkyUzQ0OCAxODQuOCA0NDggMTc2di0xMjhDNDQ4IDM5LjE2IDQ0MC44IDMyIDQzMiAzMnoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=';
+export const minimiseSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMCA0NjRDMCA0NTUuMiA3LjE2NCA0NDggMTYgNDQ4SDQ5NkM1MDQuOCA0NDggNTEyIDQ1NS4yIDUxMiA0NjRDNTEyIDQ3Mi44IDUwNC44IDQ4MCA0OTYgNDgwSDE2QzcuMTY0IDQ4MCAwIDQ3Mi44IDAgNDY0eiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==';
+export const closeSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzE1LjMgNDExLjNjLTYuMjUzIDYuMjUzLTE2LjM3IDYuMjUzLTIyLjYzIDBMMTYwIDI3OC42bC0xMzIuNyAxMzIuN2MtNi4yNTMgNi4yNTMtMTYuMzcgNi4yNTMtMjIuNjMgMGMtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M0wxMzcuNCAyNTZMNC42OSAxMjMuM2MtNi4yNTMtNi4yNTMtNi4yNTMtMTYuMzcgMC0yMi42M2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwTDE2MCAyMzMuNGwxMzIuNy0xMzIuN2M2LjI1My02LjI1MyAxNi4zNy02LjI1MyAyMi42MyAwYzYuMjUzIDYuMjUzIDYuMjUzIDE2LjM3IDAgMjIuNjNMMTgyLjYgMjU2bDEzMi43IDEzMi43QzMyMS42IDM5NC45IDMyMS42IDQwNS4xIDMxNS4zIDQxMS4zeiIgZmlsbD0iIzg3OWJhNiIvPjwvc3ZnPg==';
+export const tabDropdownSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNNC4yNTEgMTgxLjFDNy4zOTIgMTc3LjcgMTEuNjkgMTc1LjEgMTYgMTc1LjFjMy44OTEgMCA3Ljc4MSAxLjQwNiAxMC44NiA0LjI1bDE5Ny4xIDE4MS4xbDE5Ny4xLTE4MS4xYzYuNS02IDE2LjY0LTUuNjI1IDIyLjYxIC45MDYyYzYgNi41IDUuNTk0IDE2LjU5LS44OTA2IDIyLjU5bC0yMDggMTkyYy02LjE1NiA1LjY4OC0xNS41NiA1LjY4OC0yMS43MiAwbC0yMDgtMTkyQy0xLjM0MyAxOTcuNy0xLjc0OSAxODcuNiA0LjI1MSAxODEuMXoiIGZpbGw9IiM4NzliYTYiLz48L3N2Zz4=';
+//# sourceMappingURL=constants.js.map

package/dist/esm/styles/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/styles/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAA+B;IACxD,UAAU,EAAE;QACV,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,EAAE;KAChB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,KAAK;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GACrB,olCAAolC,CAAC;AAEvlC,MAAM,CAAC,MAAM,WAAW,GACtB,4hBAA4hB,CAAC;AAE/hB,MAAM,CAAC,MAAM,QAAQ,GACnB,o2BAAo2B,CAAC;AAEv2B,MAAM,CAAC,MAAM,cAAc,GACzB,wsBAAwsB,CAAC"}

package/dist/esm/styles/dragging.styles.js

@@ -0,0 +1,116 @@
+import { neutralFillStealthRest } from '@microsoft/fast-components';
+/**
+ * This is defined as a string rather than a css template
+ * because it is applied to a CSSStyleSheet object rather than
+ * used as a FAST template
+ */
+export const globalDraggingStyles = `
+  .lm_dragProxy .lm_content {
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
+  }
+  .lm_dropTargetIndicator {
+    box-shadow: inset 0 0 30px #000000;
+    outline: 1px dashed #cccccc;
+    transition: all 200ms ease;
+  }
+  .lm_dropTargetIndicator .lm_inner {
+    background: var(${neutralFillStealthRest.cssCustomProperty});
+    opacity: 0.2;
+  }
+  .lm_dragProxy.lm_left .lm_header,
+  .lm_dragProxy.lm_right .lm_header {
+    width: 20px;
+    float: left;
+    vertical-align: top;
+  }
+  .lm_dragProxy.lm_left .lm_header .lm_tabs,
+  .lm_dragProxy.lm_right .lm_header .lm_tabs {
+    transform-origin: left top;
+    top: 0;
+    width: 1000px;
+  }
+  .lm_dragProxy.lm_left .lm_header .lm_controls,
+  .lm_dragProxy.lm_right .lm_header .lm_controls {
+    bottom: 0;
+  }
+  .lm_dragProxy.lm_left .lm_items,
+  .lm_dragProxy.lm_right .lm_items {
+    float: left;
+  }
+  .lm_dragProxy.lm_left .lm_header .lm_tabs {
+    transform: rotate(-90deg) scaleX(-1);
+    left: 0;
+  }
+  .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {
+    transform: scaleX(-1);
+    margin-top: 1px;
+  }
+  .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: initial;
+    left: 20px;
+  }
+  .lm_dragProxy.lm_right .lm_content {
+    float: left;
+  }
+  .lm_dragProxy.lm_right .lm_header .lm_tabs {
+    transform: rotate(90deg) scaleX(1);
+    left: 100%;
+    margin-left: 0;
+  }
+  .lm_dragProxy.lm_right .lm_header .lm_controls {
+    left: 3px;
+  }
+  .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {
+    top: initial;
+    right: 20px;
+  }
+  .lm_dragProxy.lm_bottom .lm_header .lm_tab {
+    margin-top: 0;
+    border-top: none;
+  }
+  .lm_dragProxy.lm_bottom .lm_header .lm_controls,
+  .lm_stack.lm_bottom .lm_header .lm_controls {
+    top: 3px;
+  }
+  .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,
+  .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {
+    top: initial;
+    bottom: 20px;
+  }
+  .lm_dragProxy {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+  }
+  .lm_dragProxy .lm_header {
+    background: transparent;
+  }
+  .lm_dragProxy .lm_content {
+    border-top: none;
+    overflow: hidden;
+  }
+  .lm_dropTargetIndicator {
+    display: none;
+    position: absolute;
+    z-index: 20;
+  }
+  .lm_dropTargetIndicator .lm_inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+  .lm_transition_indicator {
+    display: none;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 20;
+  }
+`;
+//# sourceMappingURL=dragging.styles.js.map