igniteui-dockmanager 1.12.0 → 1.12.2-beta.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 1.12.1
+
+### Enhancements
+- Include pane information in `splitterResizeStart` and `splitterResizeEnd` events
+- `IgcDockManagerComponent` is now exported as class
+
+### Bug fixes
+- Contents in slots with `unpinnedHeaderId` are not updated correctly [#53](https://github.com/IgniteUI/igniteui-dockmanager/issues/53)
+
 ## 1.12.0
 
 ### Bug fixes

package/dist/cjs/igc-button-component_20.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f11f2141.js');
-const locale = require('./locale-9c9c5782.js');
+const locale = require('./locale-d4a89130.js');
 
 const buttonComponentCss = "button{position:static;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:transparent;border:none;-webkit-tap-highlight-color:transparent;opacity:0.7;-webkit-transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:-ms-flexbox;display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);-webkit-box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
 
@@ -2249,13 +2249,25 @@ let IgcDockManager = class {
       document.body.style.cursor = this._isValidDrop ? 'default' : 'not-allowed';
     }
   }
-  handleFlyoutSplitterResizeEnd(event) {
+  handleFlyoutSplitterResizeEnd(pane, orientation, event) {
     this.service.resizeFlyoutPane(event.detail);
-    this.splitterResizeEnd.emit();
+    let offset = this.splitterOffset * event.detail;
+    let rect;
+    const splitter = event.target;
+    rect = splitter.previousElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === locale.IgcSplitPaneOrientation.horizontal ? rect.width + offset : rect.width;
+    const paneHeight = orientation === locale.IgcSplitPaneOrientation.vertical ? rect.height + offset : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
-  handleSplitterResizeStart(event) {
+  handleSplitterResizeStart(pane, event) {
     const splitter = event.target;
-    const resizeStartEvent = this.splitterResizeStart.emit();
+    const orientation = splitter.splitPaneOrientation;
+    let rect;
+    const splitterEl = event.target;
+    rect = pane === this.flyoutPane ? splitterEl.previousElementSibling.getBoundingClientRect() : splitterEl.nextElementSibling.getBoundingClientRect();
+    const paneWidth = rect.width;
+    const paneHeight = rect.height;
+    const resizeStartEvent = this.splitterResizeStart.emit({ pane, orientation, paneWidth, paneHeight });
     if (resizeStartEvent.defaultPrevented) {
       this.splitterOffset = 0;
       splitter.showDragGhost = false;
@@ -2291,7 +2303,12 @@ let IgcDockManager = class {
       offsetPercentage *= -1;
     }
     this.service.resizePane(pane, offsetPercentage);
-    this.splitterResizeEnd.emit();
+    const orientation = parentPane.orientation;
+    let rect;
+    rect = splitter.nextElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === locale.IgcSplitPaneOrientation.horizontal ? rect.width - offsetPercentage * sizeSum : rect.width;
+    const paneHeight = orientation === locale.IgcSplitPaneOrientation.vertical ? rect.height - offsetPercentage * sizeSum : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
   clearActivePane() {
     if (this.activePane && this.shouldClearActivePane && this.reason !== ActionReason.drop) {
@@ -2767,7 +2784,7 @@ let IgcDockManager = class {
         pane.header), index.h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) }, index.h("slot", { name: pane.contentId }))));
   }
   renderSplitter(parentPane, pane) {
-    return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
+    return (index.h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this, pane), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
   }
   renderDocumentHost(docHost) {
     return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
@@ -2874,6 +2891,10 @@ let IgcDockManager = class {
     };
     return (index.h("div", { class: tabAreaClasses, part: Utils.partNameMap(tabAreaClasses), role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical' }, panes.map(p => (index.h("igc-unpinned-pane-header-component", { location: location, isActive: p === this.activePane, disabled: p.disabled, onMouseDown: this.handleUnpinnedTabMouseDown.bind(this, p), onKeyDown: this.handleUnpinnedTabKeyDown.bind(this, p), onFocus: this.handleUnpinnedHeaderFocus.bind(this, p), ref: el => {
         if (el) {
+          const slot = el.querySelector('slot');
+          if (slot && p.unpinnedHeaderId) {
+            slot.name = p.unpinnedHeaderId;
+          }
           this.unpinnedHeadersMap.set(p, el);
         }
       } }, p.unpinnedHeaderId ? index.h("slot", { name: p.unpinnedHeaderId }) : p.header)))));
@@ -2891,7 +2912,7 @@ let IgcDockManager = class {
       splitPaneOrientation = locale.IgcSplitPaneOrientation.horizontal;
     }
     const maximized = this.maximizedPane === this.flyoutPane;
-    return this.flyoutPane && (index.h("div", { class: flyoutClasses, style: { 'z-index': maximized ? '10002' : '2' } }, this.renderContentPane(this.flyoutPane, false, true), index.h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this) })));
+    return this.flyoutPane && (index.h("div", { class: flyoutClasses, style: { 'z-index': maximized ? '10002' : '2' } }, this.renderContentPane(this.flyoutPane, false, true), index.h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this, this.flyoutPane), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this, this.flyoutPane, splitPaneOrientation) })));
   }
   renderFloatingPanes() {
     var _a, _b;
@@ -4425,7 +4446,15 @@ let SampleComponent = class {
       type: locale.IgcDockManagerPaneType.contentPane,
       header: 'Toolbox',
       contentId: 'content1',
-      isPinned: false
+      isPinned: false,
+      unpinnedHeaderId: "toolboxHeader"
+    };
+    this.unpinnedTeamExplorerPane = {
+      type: locale.IgcDockManagerPaneType.contentPane,
+      header: 'Team Explorer',
+      contentId: 'content14',
+      isPinned: false,
+      unpinnedHeaderId: "teamExplorerHeader"
     };
     this.layout1 = {
       rootPane: {
@@ -4433,6 +4462,7 @@ let SampleComponent = class {
         orientation: locale.IgcSplitPaneOrientation.horizontal,
         panes: [
           this.unpinnedToolboxPane,
+          this.unpinnedTeamExplorerPane,
           {
             type: locale.IgcDockManagerPaneType.splitPane,
             orientation: locale.IgcSplitPaneOrientation.vertical,
@@ -4854,6 +4884,9 @@ let SampleComponent = class {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
   }
+  handleSplitterResizeEnd(event) {
+    this.log(event, Object.assign({}, event.detail));
+  }
   handleFloatingPaneResizeStart(event) {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
@@ -4886,11 +4919,11 @@ let SampleComponent = class {
   render() {
     return (index.h(index.Host, null, index.h("div", null, index.h("button", { onClick: () => this.saveLayout() }, "Save Layout"), index.h("button", { onClick: () => this.loadLayout() }, "Load Layout"), index.h("button", { onClick: () => this.setActivePane() }, "Set Active Pane"), index.h("button", { onClick: () => this.addPane() }, "Add Floating Pane"), index.h("button", { onClick: () => this.addTab() }, "Add Tab Pane"), index.h("button", { onClick: () => this.disableContentPane() }, "Disable Tab Pane"), index.h("input", { id: "hideOnClose", type: "checkbox", style: { marginLeft: '20px' }, ref: el => this.hideOnCloseCheckbox = el }), index.h("label", { htmlFor: "hideOnClose" }, "Hide on close"), index.h("span", { style: { marginLeft: '20px' } }, "Hidden Panes:"), index.h("select", { style: { width: '150px' }, ref: el => this.hiddenPanesSelect = el }, this.hiddenPanes.map(p => {
       return (index.h("option", { value: p.id }, p.header));
-    })), index.h("button", { onClick: () => this.showPane() }, "Show Pane"), index.h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")), index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
+    })), index.h("button", { onClick: () => this.showPane() }, "Show Pane"), index.h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")), index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
       // resourceStrings={this.getCustomResourceStrings()}
       ref: el => this.dockManager = el,
       // allowFloatingPanesResize={false}
-      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), index.h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), index.h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, index.h("button", null, "Tests")), index.h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), index.h("div", { slot: "content4" }, "Content 4"), index.h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), index.h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), index.h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), index.h("div", { slot: "content8" }, "Content 8"), index.h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), index.h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, index.h("button", null, "Test")), index.h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, index.h("input", null)), index.h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"), index.h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"))));
+      showHeaderIconOnHover: 'closeOnly' }, index.h("div", { slot: "header1" }, index.h("span", { style: { color: 'red' } }, "Solution Explorer"), index.h("button", null, "H")), index.h("div", { slot: "tabHeader1" }, index.h("span", { style: { color: 'orange' } }, "Solution Explorer"), index.h("button", null, "T")), index.h("div", { slot: "unpinnedHeader1" }, index.h("span", { style: { color: 'blue' } }, "Solution Explorer"), index.h("button", null, "U")), index.h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), index.h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), index.h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, index.h("button", null, "Tests")), index.h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), index.h("div", { slot: "content4" }, "Content 4"), index.h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), index.h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), index.h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), index.h("div", { slot: "content8" }, "Content 8"), index.h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), index.h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, index.h("button", null, "Test")), index.h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, index.h("input", null)), index.h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"), index.h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"), index.h("div", { slot: "content14", style: { width: '100%', height: '100%' } }, "Content 14"), index.h("div", { slot: "toolboxHeader" }, index.h("span", null, "[U] Toolbox")), index.h("div", { slot: "teamExplorerHeader" }, index.h("span", null, "[U] Team Explorer")))));
   }
 };
 SampleComponent.style = sampleComponentCss;

package/dist/cjs/index.cjs.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const locale = require('./locale-9c9c5782.js');
+const locale = require('./locale-d4a89130.js');
 
 
 
+exports.IgcDockManagerComponent = locale.IgcDockManagerComponent;
 Object.defineProperty(exports, 'IgcDockManagerPaneType', {
 	enumerable: true,
 	get: function () {

package/dist/cjs/{locale-9c9c5782.js → locale-d4a89130.js}

@@ -38,6 +38,29 @@ exports.IgcPaneDragActionType = void 0;
   IgcPaneDragActionType["dockPane"] = "dockPane";
   IgcPaneDragActionType["moveTab"] = "moveTab";
 })(exports.IgcPaneDragActionType || (exports.IgcPaneDragActionType = {}));
+/**
+ * Describes a Dock Manager component.
+ */
+/* blazorSupportsVisualChildren */
+class IgcDockManagerComponent extends HTMLElement {
+  /**
+   * Performs drop of the `draggedPane` into the specified `dropPosition`.
+   * Returns true if the pane has been docked otherwise returns false.
+   */
+  dropPane() {
+    return null;
+  }
+  /**
+   * Removes a pane from the layout.
+   */
+  removePane(pane) {
+    return null;
+  }
+  addEventListener(type, listener, options) {
+  }
+  removeEventListener(type, listener, options) {
+  }
+}
 exports.IgcResizerLocation = void 0;
 (function (IgcResizerLocation) {
   IgcResizerLocation["top"] = "top";
@@ -127,6 +150,7 @@ function addResourceStrings(language, resourceStrings) {
   resourceStringsMap.set(language, resourceStrings);
 }
 
+exports.IgcDockManagerComponent = IgcDockManagerComponent;
 exports.IgcDockManagerResourceStringsEN = IgcDockManagerResourceStringsEN;
 exports.IgcDockManagerResourceStringsES = IgcDockManagerResourceStringsES;
 exports.IgcDockManagerResourceStringsJP = IgcDockManagerResourceStringsJP;

package/dist/collection/components/dockmanager/dockmanager-component.js

@@ -467,13 +467,25 @@ export class IgcDockManager {
       document.body.style.cursor = this._isValidDrop ? 'default' : 'not-allowed';
     }
   }
-  handleFlyoutSplitterResizeEnd(event) {
+  handleFlyoutSplitterResizeEnd(pane, orientation, event) {
     this.service.resizeFlyoutPane(event.detail);
-    this.splitterResizeEnd.emit();
+    let offset = this.splitterOffset * event.detail;
+    let rect;
+    const splitter = event.target;
+    rect = splitter.previousElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === IgcSplitPaneOrientation.horizontal ? rect.width + offset : rect.width;
+    const paneHeight = orientation === IgcSplitPaneOrientation.vertical ? rect.height + offset : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
-  handleSplitterResizeStart(event) {
+  handleSplitterResizeStart(pane, event) {
     const splitter = event.target;
-    const resizeStartEvent = this.splitterResizeStart.emit();
+    const orientation = splitter.splitPaneOrientation;
+    let rect;
+    const splitterEl = event.target;
+    rect = pane === this.flyoutPane ? splitterEl.previousElementSibling.getBoundingClientRect() : splitterEl.nextElementSibling.getBoundingClientRect();
+    const paneWidth = rect.width;
+    const paneHeight = rect.height;
+    const resizeStartEvent = this.splitterResizeStart.emit({ pane, orientation, paneWidth, paneHeight });
     if (resizeStartEvent.defaultPrevented) {
       this.splitterOffset = 0;
       splitter.showDragGhost = false;
@@ -509,7 +521,12 @@ export class IgcDockManager {
       offsetPercentage *= -1;
     }
     this.service.resizePane(pane, offsetPercentage);
-    this.splitterResizeEnd.emit();
+    const orientation = parentPane.orientation;
+    let rect;
+    rect = splitter.nextElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === IgcSplitPaneOrientation.horizontal ? rect.width - offsetPercentage * sizeSum : rect.width;
+    const paneHeight = orientation === IgcSplitPaneOrientation.vertical ? rect.height - offsetPercentage * sizeSum : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
   clearActivePane() {
     if (this.activePane && this.shouldClearActivePane && this.reason !== ActionReason.drop) {
@@ -998,7 +1015,7 @@ export class IgcDockManager {
         h("slot", { name: pane.contentId }))));
   }
   renderSplitter(parentPane, pane) {
-    return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
+    return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this, pane), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
   }
   renderDocumentHost(docHost) {
     return (h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
@@ -1105,6 +1122,10 @@ export class IgcDockManager {
     };
     return (h("div", { class: tabAreaClasses, part: Utils.partNameMap(tabAreaClasses), role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical' }, panes.map(p => (h("igc-unpinned-pane-header-component", { location: location, isActive: p === this.activePane, disabled: p.disabled, onMouseDown: this.handleUnpinnedTabMouseDown.bind(this, p), onKeyDown: this.handleUnpinnedTabKeyDown.bind(this, p), onFocus: this.handleUnpinnedHeaderFocus.bind(this, p), ref: el => {
         if (el) {
+          const slot = el.querySelector('slot');
+          if (slot && p.unpinnedHeaderId) {
+            slot.name = p.unpinnedHeaderId;
+          }
           this.unpinnedHeadersMap.set(p, el);
         }
       } }, p.unpinnedHeaderId ? h("slot", { name: p.unpinnedHeaderId }) : p.header)))));
@@ -1124,7 +1145,7 @@ export class IgcDockManager {
     const maximized = this.maximizedPane === this.flyoutPane;
     return this.flyoutPane && (h("div", { class: flyoutClasses, style: { 'z-index': maximized ? '10002' : '2' } },
       this.renderContentPane(this.flyoutPane, false, true),
-      h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this) })));
+      h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this, this.flyoutPane), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this, this.flyoutPane, splitPaneOrientation) })));
   }
   renderFloatingPanes() {
     var _a, _b;
@@ -1581,9 +1602,14 @@ export class IgcDockManager {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "IgcSplitterResizeEventArgs",
+        "resolved": "IgcSplitterResizeEventArgs",
+        "references": {
+          "IgcSplitterResizeEventArgs": {
+            "location": "import",
+            "path": "./dockmanager.public-interfaces"
+          }
+        }
       }
     }, {
       "method": "splitterResizeEnd",
@@ -1596,9 +1622,14 @@ export class IgcDockManager {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "IgcSplitterResizeEventArgs",
+        "resolved": "IgcSplitterResizeEventArgs",
+        "references": {
+          "IgcSplitterResizeEventArgs": {
+            "location": "import",
+            "path": "./dockmanager.public-interfaces"
+          }
+        }
       }
     }, {
       "method": "paneClose",

package/dist/collection/components/dockmanager/dockmanager.public-interfaces.js

@@ -36,6 +36,36 @@ export var IgcPaneDragActionType;
   IgcPaneDragActionType["dockPane"] = "dockPane";
   IgcPaneDragActionType["moveTab"] = "moveTab";
 })(IgcPaneDragActionType || (IgcPaneDragActionType = {}));
+/**
+ * Describes a Dock Manager component.
+ */
+/* blazorSupportsVisualChildren */
+export class IgcDockManagerComponent extends HTMLElement {
+  /**
+   * Performs drop of the `draggedPane` into the specified `dropPosition`.
+   * Returns true if the pane has been docked otherwise returns false.
+   */
+  dropPane() {
+    return null;
+  }
+  /**
+   * Removes a pane from the layout.
+   */
+  removePane(pane) {
+    pane = pane;
+    return null;
+  }
+  addEventListener(type, listener, options) {
+    type = type;
+    listener = listener;
+    options = options;
+  }
+  removeEventListener(type, listener, options) {
+    type = type;
+    listener = listener;
+    options = options;
+  }
+}
 export var IgcResizerLocation;
 (function (IgcResizerLocation) {
   IgcResizerLocation["top"] = "top";

package/dist/collection/components/sample-component/sample-component.js

@@ -29,7 +29,15 @@ export class SampleComponent {
       type: IgcDockManagerPaneType.contentPane,
       header: 'Toolbox',
       contentId: 'content1',
-      isPinned: false
+      isPinned: false,
+      unpinnedHeaderId: "toolboxHeader"
+    };
+    this.unpinnedTeamExplorerPane = {
+      type: IgcDockManagerPaneType.contentPane,
+      header: 'Team Explorer',
+      contentId: 'content14',
+      isPinned: false,
+      unpinnedHeaderId: "teamExplorerHeader"
     };
     this.layout1 = {
       rootPane: {
@@ -37,6 +45,7 @@ export class SampleComponent {
         orientation: IgcSplitPaneOrientation.horizontal,
         panes: [
           this.unpinnedToolboxPane,
+          this.unpinnedTeamExplorerPane,
           {
             type: IgcDockManagerPaneType.splitPane,
             orientation: IgcSplitPaneOrientation.vertical,
@@ -472,6 +481,9 @@ export class SampleComponent {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
   }
+  handleSplitterResizeEnd(event) {
+    this.log(event, Object.assign({}, event.detail));
+  }
   handleFloatingPaneResizeStart(event) {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
@@ -518,7 +530,7 @@ export class SampleComponent {
         })),
         h("button", { onClick: () => this.showPane() }, "Show Pane"),
         h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")),
-      h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this), 
+      h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this), 
         // resourceStrings={this.getCustomResourceStrings()}
         ref: el => this.dockManager = el, 
         // allowFloatingPanesResize={false}
@@ -548,7 +560,12 @@ export class SampleComponent {
         h("div", { slot: "content11", style: { width: '100%', height: '100%' } },
           h("input", null)),
         h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"),
-        h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"))));
+        h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"),
+        h("div", { slot: "content14", style: { width: '100%', height: '100%' } }, "Content 14"),
+        h("div", { slot: "toolboxHeader" },
+          h("span", null, "[U] Toolbox")),
+        h("div", { slot: "teamExplorerHeader" },
+          h("span", null, "[U] Team Explorer")))));
   }
   static get is() { return "sample-component"; }
   static get encapsulation() { return "scoped"; }

package/dist/esm/igc-button-component_20.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, F as Fragment, g as getElement, f as forceUpdate } from './index-cbe7fc41.js';
-import { h as IgcDockingIndicatorPosition, f as IgcSplitPaneOrientation, e as IgcDockManagerPaneType, g as IgcUnpinnedLocation, i as IgcPaneDragActionType, j as IgcResizerLocation, r as resourceStringsMap, d as addResourceStrings } from './locale-e3a8686b.js';
+import { h as IgcDockingIndicatorPosition, f as IgcSplitPaneOrientation, e as IgcDockManagerPaneType, g as IgcUnpinnedLocation, i as IgcPaneDragActionType, k as IgcResizerLocation, r as resourceStringsMap, d as addResourceStrings } from './locale-505757c0.js';
 
 const buttonComponentCss = "button{position:static;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:transparent;border:none;-webkit-tap-highlight-color:transparent;opacity:0.7;-webkit-transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:-ms-flexbox;display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);-webkit-box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
 
@@ -2245,13 +2245,25 @@ let IgcDockManager = class {
       document.body.style.cursor = this._isValidDrop ? 'default' : 'not-allowed';
     }
   }
-  handleFlyoutSplitterResizeEnd(event) {
+  handleFlyoutSplitterResizeEnd(pane, orientation, event) {
     this.service.resizeFlyoutPane(event.detail);
-    this.splitterResizeEnd.emit();
+    let offset = this.splitterOffset * event.detail;
+    let rect;
+    const splitter = event.target;
+    rect = splitter.previousElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === IgcSplitPaneOrientation.horizontal ? rect.width + offset : rect.width;
+    const paneHeight = orientation === IgcSplitPaneOrientation.vertical ? rect.height + offset : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
-  handleSplitterResizeStart(event) {
+  handleSplitterResizeStart(pane, event) {
     const splitter = event.target;
-    const resizeStartEvent = this.splitterResizeStart.emit();
+    const orientation = splitter.splitPaneOrientation;
+    let rect;
+    const splitterEl = event.target;
+    rect = pane === this.flyoutPane ? splitterEl.previousElementSibling.getBoundingClientRect() : splitterEl.nextElementSibling.getBoundingClientRect();
+    const paneWidth = rect.width;
+    const paneHeight = rect.height;
+    const resizeStartEvent = this.splitterResizeStart.emit({ pane, orientation, paneWidth, paneHeight });
     if (resizeStartEvent.defaultPrevented) {
       this.splitterOffset = 0;
       splitter.showDragGhost = false;
@@ -2287,7 +2299,12 @@ let IgcDockManager = class {
       offsetPercentage *= -1;
     }
     this.service.resizePane(pane, offsetPercentage);
-    this.splitterResizeEnd.emit();
+    const orientation = parentPane.orientation;
+    let rect;
+    rect = splitter.nextElementSibling.getBoundingClientRect();
+    const paneWidth = orientation === IgcSplitPaneOrientation.horizontal ? rect.width - offsetPercentage * sizeSum : rect.width;
+    const paneHeight = orientation === IgcSplitPaneOrientation.vertical ? rect.height - offsetPercentage * sizeSum : rect.height;
+    this.splitterResizeEnd.emit({ pane, orientation, paneWidth, paneHeight });
   }
   clearActivePane() {
     if (this.activePane && this.shouldClearActivePane && this.reason !== ActionReason.drop) {
@@ -2763,7 +2780,7 @@ let IgcDockManager = class {
         pane.header), h("div", { class: "content", onMouseDown: this.handlePaneContentMouseDown.bind(this, pane) }, h("slot", { name: pane.contentId }))));
   }
   renderSplitter(parentPane, pane) {
-    return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
+    return (h("igc-splitter-component", { splitPaneOrientation: parentPane.orientation, onResizeStart: this.handleSplitterResizeStart.bind(this, pane), onResizeEnd: this.handleSplitterResizeEnd.bind(this, parentPane, pane), onFocusin: this.clearActivePane.bind(this) }));
   }
   renderDocumentHost(docHost) {
     return (h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
@@ -2870,6 +2887,10 @@ let IgcDockManager = class {
     };
     return (h("div", { class: tabAreaClasses, part: Utils.partNameMap(tabAreaClasses), role: "tablist", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical' }, panes.map(p => (h("igc-unpinned-pane-header-component", { location: location, isActive: p === this.activePane, disabled: p.disabled, onMouseDown: this.handleUnpinnedTabMouseDown.bind(this, p), onKeyDown: this.handleUnpinnedTabKeyDown.bind(this, p), onFocus: this.handleUnpinnedHeaderFocus.bind(this, p), ref: el => {
         if (el) {
+          const slot = el.querySelector('slot');
+          if (slot && p.unpinnedHeaderId) {
+            slot.name = p.unpinnedHeaderId;
+          }
           this.unpinnedHeadersMap.set(p, el);
         }
       } }, p.unpinnedHeaderId ? h("slot", { name: p.unpinnedHeaderId }) : p.header)))));
@@ -2887,7 +2908,7 @@ let IgcDockManager = class {
       splitPaneOrientation = IgcSplitPaneOrientation.horizontal;
     }
     const maximized = this.maximizedPane === this.flyoutPane;
-    return this.flyoutPane && (h("div", { class: flyoutClasses, style: { 'z-index': maximized ? '10002' : '2' } }, this.renderContentPane(this.flyoutPane, false, true), h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this) })));
+    return this.flyoutPane && (h("div", { class: flyoutClasses, style: { 'z-index': maximized ? '10002' : '2' } }, this.renderContentPane(this.flyoutPane, false, true), h("igc-splitter-component", { flyoutLocation: location, splitPaneOrientation: splitPaneOrientation, onResizeStart: this.handleSplitterResizeStart.bind(this, this.flyoutPane), onResizeEnd: this.handleFlyoutSplitterResizeEnd.bind(this, this.flyoutPane, splitPaneOrientation) })));
   }
   renderFloatingPanes() {
     var _a, _b;
@@ -4421,7 +4442,15 @@ let SampleComponent = class {
       type: IgcDockManagerPaneType.contentPane,
       header: 'Toolbox',
       contentId: 'content1',
-      isPinned: false
+      isPinned: false,
+      unpinnedHeaderId: "toolboxHeader"
+    };
+    this.unpinnedTeamExplorerPane = {
+      type: IgcDockManagerPaneType.contentPane,
+      header: 'Team Explorer',
+      contentId: 'content14',
+      isPinned: false,
+      unpinnedHeaderId: "teamExplorerHeader"
     };
     this.layout1 = {
       rootPane: {
@@ -4429,6 +4458,7 @@ let SampleComponent = class {
         orientation: IgcSplitPaneOrientation.horizontal,
         panes: [
           this.unpinnedToolboxPane,
+          this.unpinnedTeamExplorerPane,
           {
             type: IgcDockManagerPaneType.splitPane,
             orientation: IgcSplitPaneOrientation.vertical,
@@ -4850,6 +4880,9 @@ let SampleComponent = class {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
   }
+  handleSplitterResizeEnd(event) {
+    this.log(event, Object.assign({}, event.detail));
+  }
   handleFloatingPaneResizeStart(event) {
     this.log(event, Object.assign({}, event.detail));
     // event.preventDefault();
@@ -4882,11 +4915,11 @@ let SampleComponent = class {
   render() {
     return (h(Host, null, h("div", null, h("button", { onClick: () => this.saveLayout() }, "Save Layout"), h("button", { onClick: () => this.loadLayout() }, "Load Layout"), h("button", { onClick: () => this.setActivePane() }, "Set Active Pane"), h("button", { onClick: () => this.addPane() }, "Add Floating Pane"), h("button", { onClick: () => this.addTab() }, "Add Tab Pane"), h("button", { onClick: () => this.disableContentPane() }, "Disable Tab Pane"), h("input", { id: "hideOnClose", type: "checkbox", style: { marginLeft: '20px' }, ref: el => this.hideOnCloseCheckbox = el }), h("label", { htmlFor: "hideOnClose" }, "Hide on close"), h("span", { style: { marginLeft: '20px' } }, "Hidden Panes:"), h("select", { style: { width: '150px' }, ref: el => this.hiddenPanesSelect = el }, this.hiddenPanes.map(p => {
       return (h("option", { value: p.id }, p.header));
-    })), h("button", { onClick: () => this.showPane() }, "Show Pane"), h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")), h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
+    })), h("button", { onClick: () => this.showPane() }, "Show Pane"), h("button", { onClick: () => this.showAllPanes() }, "Show All Panes")), h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPanePinnedToggle: this.handlePinnedToggle.bind(this), onActivePaneChanged: this.handleActivePaneChanged.bind(this), onPaneDragStart: this.handleDragStart.bind(this), onPaneDragOver: this.handleDragOver.bind(this), onPaneDragEnd: this.handleDragEnd.bind(this), onSplitterResizeStart: this.handleSplitterResizeStart.bind(this), onSplitterResizeEnd: this.handleSplitterResizeEnd.bind(this), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this), onLayoutChange: this.handleLayoutChange.bind(this),
       // resourceStrings={this.getCustomResourceStrings()}
       ref: el => this.dockManager = el,
       // allowFloatingPanesResize={false}
-      showHeaderIconOnHover: 'closeOnly' }, h("div", { slot: "header1" }, h("span", { style: { color: 'red' } }, "Solution Explorer"), h("button", null, "H")), h("div", { slot: "tabHeader1" }, h("span", { style: { color: 'orange' } }, "Solution Explorer"), h("button", null, "T")), h("div", { slot: "unpinnedHeader1" }, h("span", { style: { color: 'blue' } }, "Solution Explorer"), h("button", null, "U")), h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, h("button", null, "Tests")), h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), h("div", { slot: "content4" }, "Content 4"), h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), h("div", { slot: "content8" }, "Content 8"), h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, h("button", null, "Test")), h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, h("input", null)), h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"), h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"))));
+      showHeaderIconOnHover: 'closeOnly' }, h("div", { slot: "header1" }, h("span", { style: { color: 'red' } }, "Solution Explorer"), h("button", null, "H")), h("div", { slot: "tabHeader1" }, h("span", { style: { color: 'orange' } }, "Solution Explorer"), h("button", null, "T")), h("div", { slot: "unpinnedHeader1" }, h("span", { style: { color: 'blue' } }, "Solution Explorer"), h("button", null, "U")), h("button", { style: { background: 'pink' }, slot: "tabHeaderCloseButton" }, "Y"), h("div", { slot: "content1", style: { width: '100%', height: '100%' } }, "Content 1"), h("div", { slot: "content2", style: { width: '100%', height: '100%' } }, h("button", null, "Tests")), h("div", { slot: "content3", style: { width: '100%', height: '100%' } }, "Content 3"), h("div", { slot: "content4" }, "Content 4"), h("div", { slot: "content5", style: { width: '100%', height: '100%' } }, "Content 5"), h("div", { slot: "content6", style: { width: '100%', height: '100%' } }, "Content 6"), h("div", { slot: "content7", style: { width: '100%', height: '100%' } }, "Content 7"), h("div", { slot: "content8" }, "Content 8"), h("div", { slot: "content9", style: { width: '100%', height: '100%' } }, "Content 9"), h("div", { slot: "content10", style: { width: '100%', height: '100%' } }, h("button", null, "Test")), h("div", { slot: "content11", style: { width: '100%', height: '100%' } }, h("input", null)), h("div", { slot: "content12", style: { width: '100%', height: '100%' } }, "Content 12"), h("div", { slot: "content13", style: { width: '100%', height: '100%' } }, "Content 13"), h("div", { slot: "content14", style: { width: '100%', height: '100%' } }, "Content 14"), h("div", { slot: "toolboxHeader" }, h("span", null, "[U] Toolbox")), h("div", { slot: "teamExplorerHeader" }, h("span", null, "[U] Team Explorer")))));
   }
 };
 SampleComponent.style = sampleComponentCss;

package/dist/esm/index.js

@@ -1 +1 @@
-export { e as IgcDockManagerPaneType, I as IgcDockManagerResourceStringsEN, b as IgcDockManagerResourceStringsES, a as IgcDockManagerResourceStringsJP, c as IgcDockManagerResourceStringsKO, h as IgcDockingIndicatorPosition, i as IgcPaneDragActionType, j as IgcResizerLocation, f as IgcSplitPaneOrientation, g as IgcUnpinnedLocation, d as addResourceStrings } from './locale-e3a8686b.js';
+export { j as IgcDockManagerComponent, e as IgcDockManagerPaneType, I as IgcDockManagerResourceStringsEN, b as IgcDockManagerResourceStringsES, a as IgcDockManagerResourceStringsJP, c as IgcDockManagerResourceStringsKO, h as IgcDockingIndicatorPosition, i as IgcPaneDragActionType, k as IgcResizerLocation, f as IgcSplitPaneOrientation, g as IgcUnpinnedLocation, d as addResourceStrings } from './locale-505757c0.js';

package/dist/esm/{locale-e3a8686b.js → locale-505757c0.js}

@@ -36,6 +36,29 @@ var IgcPaneDragActionType;
   IgcPaneDragActionType["dockPane"] = "dockPane";
   IgcPaneDragActionType["moveTab"] = "moveTab";
 })(IgcPaneDragActionType || (IgcPaneDragActionType = {}));
+/**
+ * Describes a Dock Manager component.
+ */
+/* blazorSupportsVisualChildren */
+class IgcDockManagerComponent extends HTMLElement {
+  /**
+   * Performs drop of the `draggedPane` into the specified `dropPosition`.
+   * Returns true if the pane has been docked otherwise returns false.
+   */
+  dropPane() {
+    return null;
+  }
+  /**
+   * Removes a pane from the layout.
+   */
+  removePane(pane) {
+    return null;
+  }
+  addEventListener(type, listener, options) {
+  }
+  removeEventListener(type, listener, options) {
+  }
+}
 var IgcResizerLocation;
 (function (IgcResizerLocation) {
   IgcResizerLocation["top"] = "top";
@@ -125,4 +148,4 @@ function addResourceStrings(language, resourceStrings) {
   resourceStringsMap.set(language, resourceStrings);
 }
 
-export { IgcDockManagerResourceStringsEN as I, IgcDockManagerResourceStringsJP as a, IgcDockManagerResourceStringsES as b, IgcDockManagerResourceStringsKO as c, addResourceStrings as d, IgcDockManagerPaneType as e, IgcSplitPaneOrientation as f, IgcUnpinnedLocation as g, IgcDockingIndicatorPosition as h, IgcPaneDragActionType as i, IgcResizerLocation as j, resourceStringsMap as r };
+export { IgcDockManagerResourceStringsEN as I, IgcDockManagerResourceStringsJP as a, IgcDockManagerResourceStringsES as b, IgcDockManagerResourceStringsKO as c, addResourceStrings as d, IgcDockManagerPaneType as e, IgcSplitPaneOrientation as f, IgcUnpinnedLocation as g, IgcDockingIndicatorPosition as h, IgcPaneDragActionType as i, IgcDockManagerComponent as j, IgcResizerLocation as k, resourceStringsMap as r };