igniteui-dockmanager 1.14.4 → 1.15.0-alpha.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-050356a8.js');
-const locale = require('./locale-1ad1c5f3.js');
+const locale = require('./locale-d92f1ee8.js');
 
 const buttonComponentCss = "button{position:static;display:inline-flex;align-items: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;transition:background 0.25s ease-out, opacity 0.25s ease-out, box-shadow 0.25s ease-out}:host([disabled]){pointer-events:none}:host{display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:0.54}";
 
@@ -152,7 +152,7 @@ const IgcContentPaneComponent = class {
       'single-floating': this.isSingleFloating
     });
     return (index.h(index.Host, { role: "group", "aria-label": this.header, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, style: {
-        flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : `${size} 1 ${size}px`
+        flex: this.isFlyout ? `0 1 ${unpinnedSize}px` : `0 0 ${size}px`
       }, part: parts }, index.h("slot", { name: "header" }), index.h("slot", null)));
   }
 };
@@ -789,7 +789,7 @@ class IgcDockManagerService {
     const sizeSum = paneSizes.reduce((p, c) => c + p, 0);
     const calcDelta = deltaPercentage * sizeSum;
     childPanes[paneIndex - 1].size = paneSizes[paneIndex - 1] + calcDelta;
-    childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
+    // childPanes[paneIndex].size = paneSizes[paneIndex] - calcDelta;
     this.updateLayout();
   }
   togglePin(pane, pinBehavior = IgcPinBehavior.allPanes) {
@@ -1943,7 +1943,7 @@ class IgcDockManagerKeyboardService {
   }
 }
 
-const dockmanagerComponentCss = ":host{position:relative;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;height:100%;width:100%;overflow:hidden}.pane-container--vertical{flex-direction:column}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}";
+const dockmanagerComponentCss = ":host{position:relative;display:flex;overflow:hidden;box-sizing:border-box;height:100%;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));font-family:var(--igc-font-family, \"Titillium Web\", \"Roboto\", \"Helvetica Neue\", sans-serif);outline-style:none;--unpinned-tab-area-size:30px}:host igc-icon-component svg{width:17px;height:17px}.pane-container--vertical,.pane-container--horizontal,.pane-container{display:flex;flex-grow:1;max-height:100vh;max-width:100wh}.pane-container--horizontal{overflow-x:auto}.pane-container--vertical{flex-direction:column;overflow-y:auto}.unpinned-tab-area{display:flex;flex-direction:column;width:var(--unpinned-tab-area-size);height:auto}.unpinned-tab-area--left{padding:8px 8px 8px 0}.unpinned-tab-area--right{padding:8px 0 8px 8px}.unpinned-tab-area--bottom{padding-top:8px}.unpinned-tab-area--horizontal{flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{flex-direction:row}.flyout-pane--left igc-content-pane-component{box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.floating-panes{position:fixed;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10000}.docking-indicators-container{position:absolute;display:flex;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;flex-grow:1;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));position:relative}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}.drop-shadow{background-color:var(--igc-drop-shadow-background, rgba(100, 149, 237, 0.2));position:fixed;z-index:10003;display:block;pointer-events:none}.hidden{height:0;opacity:0;padding:0;pointer-events:none;min-height:0 !important;transition:opacity 0.5s ease;position:absolute}.transitioned{overflow:hidden;transition:opacity 0.5s ease;position:absolute;z-index:999;width:100%}";
 
 var ActionReason;
 (function (ActionReason) {
@@ -2084,6 +2084,7 @@ const IgcDockManager = class {
         targetPart: 'splitter-handle'
       },
     ];
+    this.ignoreResizeConstraints = true;
     this.updateTemplates = () => {
       if (this.templates.size > 0) {
         return;
@@ -2588,7 +2589,7 @@ const IgcDockManager = class {
     const sizeProperty = parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'offsetWidth' : 'offsetHeight';
     const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
     // If the new size is smaller or bigger that the size constraints, do not resize
-    const offset = this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') && this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
+    const offset = this.ignoreResizeConstraints || this.isPaneSizeWithinConstraints(previousPane, event.detail, parentPane.orientation, 'previous') && this.isPaneSizeWithinConstraints(nextPane, event.detail, parentPane.orientation) ? event.detail : 0;
     let offsetPercentage = this.splitterOffset * offset / sizeSum;
     let rtl = false;
     if (this.element.dir !== '') {
@@ -3330,9 +3331,9 @@ const IgcDockManager = class {
       index.h("slot", { name: pane.tabHeaderId }) :
       index.h("span", { part: "header-title", title: pane.header }, pane.header)));
   }
-  renderSplitPane(splitPane, isFloating, isInDocumentHost) {
+  renderSplitPane(splitPane, isFloating, isInDocumentHost, isRootPane = false) {
     const panes = this.service.getSplitPaneVisibleChildren(splitPane);
-    return (splitPane.allowEmpty || panes.length > 0) && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, onRendered: this.handleSplitPaneRendered.bind(this, panes), ref: el => {
+    return (splitPane.allowEmpty || panes.length > 0) && (index.h("igc-split-pane-component", { key: splitPane.id, orientation: splitPane.orientation, size: splitPane.size, shouldFillParent: this.ignoreResizeConstraints ? isRootPane : false, onRendered: this.handleSplitPaneRendered.bind(this, panes), ref: el => {
         if (el) {
           this.panesElementMap.set(splitPane, el);
         }
@@ -3472,7 +3473,7 @@ const IgcDockManager = class {
     this.tabHeadersMap = new Map();
     this.unpinnedHeadersMap = new Map();
     this.contentPanesElementMap = new Map();
-    return (index.h(index.Host, { tabindex: "0", role: "group" }, this.renderButtonsTemplates(), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.left), index.h("div", { class: "pane-container--vertical", style: { position: this.maximizedPane ? 'absolute' : 'relative' } }, this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.top), index.h("div", { ref: el => this.dockedPanesContainer = el, class: "pane-container--horizontal", style: { position: this.maximizedPane ? 'absolute' : 'relative' } }, ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.rootPane) && this.renderSplitPane(this.layout.rootPane, false, false), this.renderFlyoutPane(), this.renderDockingIndicators()), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.bottom)), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.right), this.renderFloatingPanes(), this.renderContextMenu(), this.renderPaneNavigator(), index.h("igc-trial-watermark", { text: "Trial version of Ignite UI", style: { 'z-index': '10005' } }), this.renderDropShadow()));
+    return (index.h(index.Host, { tabindex: "0", role: "group" }, this.renderButtonsTemplates(), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.left), index.h("div", { class: "pane-container--vertical", style: { position: this.maximizedPane ? 'absolute' : 'relative' } }, this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.top), index.h("div", { ref: el => this.dockedPanesContainer = el, class: "pane-container--horizontal", style: { position: this.maximizedPane ? 'absolute' : 'relative' } }, ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.rootPane) && this.renderSplitPane(this.layout.rootPane, false, false, true), this.renderFlyoutPane(), this.renderDockingIndicators()), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.bottom)), this.renderUnpinnedTabArea(locale.IgcUnpinnedLocation.right), this.renderFloatingPanes(), this.renderContextMenu(), this.renderPaneNavigator(), index.h("igc-trial-watermark", { text: "Trial version of Ignite UI", style: { 'z-index': '10005' } }), this.renderDropShadow()));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -4298,16 +4299,22 @@ const IgcSplitPaneComponent = class {
     this.rendered = index.createEvent(this, "rendered", 7);
     this.orientation = undefined;
     this.size = undefined;
+    this.shouldFillParent = false;
   }
   componentDidRender() {
     this.rendered.emit();
   }
   render() {
     const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
-    return (index.h(index.Host, { role: "group", style: {
-        flexDirection: this.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'row' : 'column',
-        flex: `${size} 1 ${size}px`
-      }, part: "split-pane" }));
+    return (index.h(index.Host, { role: "group", style: this.shouldFillParent
+        ? {
+          width: `100%`,
+          height: `100%`
+        }
+        : {
+          flexDirection: this.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'row' : 'column',
+          flex: `0 0 ${size}px`
+        }, part: "split-pane" }));
   }
 };
 IgcSplitPaneComponent.style = splitPaneComponentCss;
@@ -4482,17 +4489,6 @@ const IgcSplitterComponent = class {
         this.dragOffset = 0;
       }
     }
-    else {
-      const referencePaneSize = !rtl || isVertical ? this.paneSizes[1] : this.paneSizes[0];
-      if (referencePaneSize > IGC_RESIZING_MIN_SIZE) {
-        if (referencePaneSize - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
-          this.dragOffset = referencePaneSize - IGC_RESIZING_MIN_SIZE;
-        }
-      }
-      else {
-        this.dragOffset = 0;
-      }
-    }
   }
   closestElement(selector, el) {
     return ((el && el.closest(selector)) ||
@@ -5004,7 +5000,7 @@ const IgcUnpinnedPaneHeaderComponent = class {
 };
 IgcUnpinnedPaneHeaderComponent.style = unpinnedPaneHeaderComponentCss;
 
-const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}";
+const sampleComponentCss = ".sc-sample-component-h{display:flex;flex-direction:column;height:100%}igc-dockmanager.sc-sample-component{margin:10px;border:1px solid black}";
 
 /**
  * @hidden
@@ -5327,98 +5323,212 @@ const SampleComponent = class {
         }
       ]
     };
-    this.layout = this.layout1;
+    this.layout3 = {
+      rootPane: {
+        type: locale.IgcDockManagerPaneType.splitPane,
+        orientation: locale.IgcSplitPaneOrientation.horizontal,
+        panes: [
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.vertical,
+            size: 300,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content1',
+                header: 'Content Pane 1',
+                size: 500 // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content2',
+                header: 'Content Pane 2',
+                size: 300 // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content3',
+                header: 'NOT USED',
+                allowClose: false,
+                allowMaximize: false,
+                allowPinning: false
+              }
+            ]
+          },
+          {
+            type: locale.IgcDockManagerPaneType.splitPane,
+            orientation: locale.IgcSplitPaneOrientation.vertical,
+            size: 450,
+            panes: [
+              {
+                type: locale.IgcDockManagerPaneType.splitPane,
+                orientation: locale.IgcSplitPaneOrientation.horizontal,
+                size: 450,
+                panes: [
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: 'content4',
+                    header: 'Content Pane 4',
+                    size: 400 // PIXELS
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: 'content5',
+                    header: 'Content Pane 5',
+                    size: 200 // PIXELS
+                  },
+                  {
+                    type: locale.IgcDockManagerPaneType.contentPane,
+                    contentId: 'content6',
+                    header: 'NOT USED',
+                    allowClose: false,
+                    allowMaximize: false,
+                    allowPinning: false
+                  }
+                ]
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content7',
+                header: 'Content Pane 7',
+                size: 200 // PIXELS
+              },
+              {
+                type: locale.IgcDockManagerPaneType.contentPane,
+                contentId: 'content8',
+                header: 'NOT USED',
+                allowClose: false,
+                allowMaximize: false,
+                allowPinning: false
+              }
+            ]
+          }
+        ]
+      },
+      floatingPanes: []
+    };
+    this.layout = this.layout3;
     this.logEnabled = false;
-    this.id = 100;
-    this.foundElem = [];
     this.hiddenPanes = [];
   }
-  saveLayout() {
+  /*
+  private hiddenPanesSelect: HTMLSelectElement;
+  private savedLayout: string;
+
+  private saveLayout() {
     this.savedLayout = JSON.stringify(this.dockManager.layout);
   }
-  loadLayout() {
+
+  private loadLayout() {
     this.dockManager.layout = JSON.parse(this.savedLayout);
   }
-  setActivePane() {
+
+  private setActivePane() {
     // this.dockManager.activePane = this.teamExplorerPane;
     this.dockManager.activePane = this.unpinnedToolboxPane;
   }
-  addPane() {
+
+  private id = 100;
+  private newId: string;
+
+  private addPane() {
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'input');
     this.dockManager.appendChild(newDiv);
+
     this.layout.floatingPanes[1].panes.push({
-      type: locale.IgcDockManagerPaneType.contentPane,
+      type: IgcDockManagerPaneType.contentPane,
       header: 'NewPane',
       contentId: this.newId
     });
-    this.dockManager.layout = Object.assign({}, this.layout);
+
+    this.dockManager.layout = { ...this.layout };
   }
-  addTab() {
-    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
+
+  private addTab() {
+    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
+
     this.newId = `content${this.id++}`;
     const newDiv = this.createElement(this.newId, 'button');
     this.dockManager.appendChild(newDiv);
-    const tabGroupPane = this.foundElem[0];
+
+    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
     tabGroupPane.panes.push({
-      type: locale.IgcDockManagerPaneType.contentPane,
+      type: IgcDockManagerPaneType.contentPane,
       header: 'NewTab',
       contentId: this.newId
     });
-    this.dockManager.layout = Object.assign({}, this.layout);
+
+    this.dockManager.layout = { ...this.layout };
   }
-  disableContentPane() {
-    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
-    const tabGroupPane = this.foundElem[0];
+
+  private disableContentPane() {
+    this.findElement(this.layout.rootPane, IgcDockManagerPaneType.tabGroupPane);
+
+    const tabGroupPane = this.foundElem[0] as IgcTabGroupPane;
     tabGroupPane.panes[0].disabled = true;
-    this.dockManager.layout = Object.assign({}, this.layout);
+    this.dockManager.layout = { ...this.layout };
   }
-  toggleProximityDock() {
+
+  private toggleProximityDock() {
     this.dockManager.proximityDock = !this.dockManager.proximityDock;
   }
-  focusPane() {
+
+  private focusPane() {
     this.dockManager.focusPane('content12');
   }
-  findElement(pane, type) {
-    if (!pane) {
-      return;
-    }
+
+  private foundElem: IgcDockManagerPane[] = [];
+  private findElement(pane: IgcDockManagerPane, type: IgcDockManagerPaneType) {
+    if (!pane) { return; }
+
     if (pane.type === type) {
       this.foundElem.push(pane);
     }
-    if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane || pane.type === locale.IgcDockManagerPaneType.splitPane) {
+
+    if (pane.type === IgcDockManagerPaneType.tabGroupPane || pane.type === IgcDockManagerPaneType.splitPane) {
       for (const c of pane.panes) {
         this.findElement(c, type);
       }
     }
-    if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
+
+    if (pane.type === IgcDockManagerPaneType.documentHost) {
       this.findElement(pane.rootPane, type);
     }
   }
-  showPane() {
+
+  private showPane() {
     const index = this.hiddenPanesSelect.selectedIndex;
+
     if (index >= 0) {
       this.hiddenPanes[index].hidden = false;
       this.hiddenPanes.splice(index, 1);
       this.hiddenPanes = [...this.hiddenPanes];
-      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
+      this.dockManager.layout = { ...this.dockManager.layout };
     }
   }
-  showAllPanes() {
+
+  private showAllPanes() {
     if (this.hiddenPanes.length > 0) {
       for (const pane of this.hiddenPanes) {
         pane.hidden = false;
       }
       this.hiddenPanes = [];
-      this.dockManager.layout = Object.assign({}, this.dockManager.layout);
+      this.dockManager.layout = { ...this.dockManager.layout };
     }
   }
-  toggleInBoundaries() {
+
+  private toggleInBoundaries() {
     this.dockManager.containedInBoundaries = !this.dockManager.containedInBoundaries;
   }
-  createElement(content, typeOfElement) {
+
+  // private toggleIgnoreResizeConstraints() {
+  //   this.dockManager.ignoreResizeConstraints = !this.dockManager.ignoreResizeConstraints;
+  // }
+
+  private createElement(content: string, typeOfElement: string): HTMLElement {
     const someContent = document.createTextNode(content);
-    let elem;
+    let elem: HTMLElement;
     switch (typeOfElement) {
       case ('button'):
         elem = document.createElement('button');
@@ -5428,12 +5538,15 @@ const SampleComponent = class {
         elem = document.createElement('input');
         break;
     }
+
     const divContent = document.createElement('div');
     divContent.appendChild(elem ? elem : someContent);
     divContent.setAttribute('slot', content);
     divContent.setAttribute('style', 'width: 100%; height: 100%;');
+
     return divContent;
   }
+  */
   handlePaneClose(event) {
     this.log(event);
     if (this.hideOnCloseCheckbox.checked) {
@@ -5525,13 +5638,11 @@ const 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("button", { onClick: () => this.focusPane() }, "Focus Pane"), index.h("button", { onClick: () => this.toggleProximityDock() }, "Toggle Proximity Dock"), 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("button", { onClick: () => this.toggleInBoundaries() }, "Toggle In Boundaries")), index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPaneScroll: this.handlePaneScroll.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),
+    return (index.h(index.Host, null, index.h("igc-dockmanager", { layout: this.layout, onPaneClose: this.handlePaneClose.bind(this), onPaneScroll: this.handlePaneScroll.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%' } }, index.h("p", null, "Content 12 "), index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ")), 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")))));
+      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%' } }), 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%' } }, index.h("p", null, "Content 12 "), index.h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ")), 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;