'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d07fd443.js');
const locale = require('./locale-9c9c5782.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}";

let IgcButtonComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, { disabled: this.disabled }, index.h("button", { name: this.name, type: this.type, value: this.value, "aria-disabled": this.disabled ? 'true' : null }, index.h("slot", null))));
  }
};
IgcButtonComponent.style = buttonComponentCss;

/**
 * @hidden
 */
class Utils {
  static isDockingIndicatorVertical(position) {
    return position === locale.IgcDockingIndicatorPosition.top ||
      position === locale.IgcDockingIndicatorPosition.bottom ||
      position === locale.IgcDockingIndicatorPosition.outerTop ||
      position === locale.IgcDockingIndicatorPosition.outerBottom;
  }
  static isDockingIndicatorBefore(position) {
    return position === locale.IgcDockingIndicatorPosition.top ||
      position === locale.IgcDockingIndicatorPosition.left ||
      position === locale.IgcDockingIndicatorPosition.outerTop ||
      position === locale.IgcDockingIndicatorPosition.outerLeft;
  }
  static isDockingIndicatorOuter(position) {
    return position === locale.IgcDockingIndicatorPosition.outerLeft ||
      position === locale.IgcDockingIndicatorPosition.outerRight ||
      position === locale.IgcDockingIndicatorPosition.outerTop ||
      position === locale.IgcDockingIndicatorPosition.outerBottom;
  }
  static isSplitPaneVertical(splitPane) {
    return splitPane.orientation === locale.IgcSplitPaneOrientation.vertical;
  }
  static isAltPressed(event) {
    return event.altKey || event.getModifierState('Alt') || event.getModifierState('AltGraph');
  }
  static isControlOrMetaPressed(event) {
    return event.ctrlKey || event.metaKey || event.getModifierState('Meta') || event.getModifierState('OS');
  }
  static partNameMap(partNameInfo, delimiter = ' ') {
    return Object.keys(partNameInfo)
      .filter(key => partNameInfo[key])
      .join(delimiter);
  }
}

/**
 * @hidden
 */
const IGC_DEFAULT_PANE_SIZE = 100;
/**
 * @hidden
 */
const IGC_DEFAULT_UNPIN_PANE_SIZE = 200;
/**
 * @hidden
 */
const IGC_RESIZING_MIN_SIZE = 42;
/**
 * @hidden
 */
const IGC_DEFAULT_RESIZE = 10;
/**
 * @hidden
 */
const IGC_DRAG_FLYOUT_THRESHOLD = 50;
/**
 * @hidden
 */
var IgcTabHeadersPosition;
(function (IgcTabHeadersPosition) {
  IgcTabHeadersPosition["top"] = "top";
  IgcTabHeadersPosition["bottom"] = "bottom";
})(IgcTabHeadersPosition || (IgcTabHeadersPosition = {}));
/**
 * @hidden
 */
var IgcContextMenuOrientation;
(function (IgcContextMenuOrientation) {
  IgcContextMenuOrientation["top"] = "top";
  IgcContextMenuOrientation["bottom"] = "bottom";
})(IgcContextMenuOrientation || (IgcContextMenuOrientation = {}));
/**
 * @hidden
 */
var IgcPinBehavior;
(function (IgcPinBehavior) {
  IgcPinBehavior["allPanes"] = "allPanes";
  IgcPinBehavior["selectedPane"] = "selectedPane";
})(IgcPinBehavior || (IgcPinBehavior = {}));

const contentPaneComponentCss = ":host{--min-pane-size:0px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;width:100%;height:100%;min-width:var(--min-pane-size);min-height:var(--min-pane-size);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:all}:host(:focus){outline-style:none}:host([part~=disabled]:not([part~=single-floating])),:host([part~=disabled])>slot:not([name]){pointer-events:none}";

let IgcContentPaneComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.disabled = false;
    this.isSingleFloating = false;
  }
  render() {
    const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
    const unpinnedSize = this.unpinnedSize ? this.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
    const parts = Utils.partNameMap({
      'content-pane': true,
      disabled: this.disabled,
      '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`
      }, part: parts }, index.h("slot", { name: "header" }), index.h("slot", null)));
  }
};
IgcContentPaneComponent.style = contentPaneComponentCss;

const contextMenuComponentCss = ":host{position:absolute;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;top:0;left:0;bottom:0;right:0;z-index:10002;pointer-events:none}:host igc-icon-component svg{width:17px;height:17px}:host igc-icon-component{margin-left:8px}[part=menu-content]{position:absolute;visibility:hidden;color:var(--igc-context-menu-color, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-context-menu-background, var(--igc-accent-color, #fff));border:1px solid var(--igc-context-menu-background, var(--igc-accent-color, #fff));font-size:0.75em;line-height:1.7;pointer-events:all;-webkit-box-shadow:0 5px 22px rgba(0, 0, 0, 0.08), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.26);box-shadow:0 5px 22px rgba(0, 0, 0, 0.08), 0 12px 17px 2px rgba(0, 0, 0, 0.12), 0 7px 8px -4px rgba(0, 0, 0, 0.26)}[part~=menu-item]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:6px 8px;cursor:pointer;-webkit-transition:background 0.25s ease-out, color 0.25s ease-out;transition:background 0.25s ease-out, color 0.25s ease-out;outline-style:none}[part~=menu-item]:hover{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}[part~=menu-item]:focus{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}[part~=disabled]{pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcContextMenuComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.menuClosed = index.createEvent(this, "menuClosed", 7);
    this.activeIndex = 0;
    this.handleDocumentResize = () => {
      this.menuClosed.emit();
    };
    this.handleDocumentMouseDown = (ev) => {
      if (ev.composedPath().every(el => el !== this.elem)) {
        // mousedown outside of context menu
        this.menuClosed.emit();
      }
    };
  }
  emitMenuClosed() {
    this.menuClosed.emit();
  }
  connectedCallback() {
    document.defaultView.addEventListener('resize', this.handleDocumentResize, false);
    document.defaultView.addEventListener('mousedown', this.handleDocumentMouseDown, false);
  }
  disconnectedCallback() {
    document.defaultView.removeEventListener('resize', this.handleDocumentResize, false);
    document.defaultView.removeEventListener('mousedown', this.handleDocumentMouseDown, false);
  }
  componentDidLoad() {
    const menuItemsDivRect = this.menuItemsDiv.getBoundingClientRect();
    const targetRect = this.target.getBoundingClientRect();
    const hostRect = this.elem.getBoundingClientRect();
    let menuLeft = targetRect.right - menuItemsDivRect.width - hostRect.left;
    let menuTop = this.orientation === IgcContextMenuOrientation.bottom ? targetRect.top + targetRect.height - hostRect.top : targetRect.top - menuItemsDivRect.height - hostRect.top;
    const menuBottom = menuTop + menuItemsDivRect.height;
    menuLeft = menuLeft >= 0 ? menuLeft : menuLeft + menuItemsDivRect.width - targetRect.width;
    menuTop = menuTop >= 0 ? menuTop : menuTop + menuItemsDivRect.height + targetRect.height;
    if (this.orientation === IgcContextMenuOrientation.bottom && menuBottom > hostRect.height) {
      menuTop = targetRect.top - menuItemsDivRect.height;
    }
    this.menuItemsDiv.style.left = menuLeft + 'px';
    this.menuItemsDiv.style.top = menuTop + 'px';
    this.menuItemsDiv.style.visibility = 'visible';
    this.focusItemAndSetActiveIndex();
  }
  focusItemAndSetActiveIndex() {
    var _a;
    const firstMenuItem = this.menuItemsDiv.querySelector('div[part="menu-item"]');
    (_a = firstMenuItem) === null || _a === void 0 ? void 0 : _a.focus();
  }
  handleKeyboardEvents(item, ev) {
    const menuItemChildren = this.menuItemsDiv.querySelectorAll('div[part="menu-item"]');
    if (ev.key === 'ArrowDown') {
      if (this.activeIndex < menuItemChildren.length - 1) {
        this.activeIndex++;
        menuItemChildren[this.activeIndex].focus();
      }
    }
    else if (ev.key === 'ArrowUp') {
      if (this.activeIndex > 0) {
        this.activeIndex--;
        menuItemChildren[this.activeIndex].focus();
      }
    }
    else if (ev.key === 'Enter' || ev.key === ' ') {
      item.clickHandler();
      this.emitMenuClosed();
    }
    else if (ev.key === 'Escape') {
      this.emitMenuClosed();
    }
  }
  handleMenuItemClick(item) {
    item.clickHandler();
    this.emitMenuClosed();
  }
  render() {
    return (index.h(index.Host, { exportparts: "menu-content: context-menu, menu-item: context-menu-item" }, index.h("div", { role: "menu", part: "menu-content", ref: el => this.menuItemsDiv = el, onMouseDown: ev => {
        ev.preventDefault();
      } }, this.items.map(item => {
      const parts = Utils.partNameMap({
        'menu-item': true,
        disabled: item.disabled
      });
      return (index.h("div", { role: "menuitem", part: parts, tabindex: "-1", onKeyDown: this.handleKeyboardEvents.bind(this, item), onClick: this.handleMenuItemClick.bind(this, item) }, index.h("span", { style: {
          flexGrow: '1',
          userSelect: 'none',
        } }, item.displayText), item.iconName !== null &&
        index.h("igc-icon-component", { name: item.iconName })));
    }))));
  }
  get elem() { return index.getElement(this); }
};
IgcContextMenuComponent.style = contextMenuComponentCss;

/**
 * @hidden
 */
class TwoWayMap {
  constructor() {
    this.map = new Map();
    this.reversedMap = new Map();
  }
  set(key, value) {
    this.map.set(key, value);
    this.reversedMap.set(value, key);
  }
  get(key) {
    return this.map.get(key);
  }
  getByValue(value) {
    return this.reversedMap.get(value);
  }
  delete(key) {
    const value = this.map.get(key);
    this.map.delete(key);
    this.reversedMap.delete(value);
  }
  has(key) {
    return this.map.has(key);
  }
  hasValue(value) {
    return this.reversedMap.has(value);
  }
}

/**
 * @hidden
 */
class IgcDockManagerService {
  constructor(dockManager) {
    this.dockManager = dockManager;
    this.unpinnedLocationMap = new Map();
  }
  getContent(contentId) {
    return this.clientContentPanesMap.get(contentId);
  }
  generateUuid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      const r = Math.random() * 16 | 0;
      const v = c === 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }
  populatePaneParents(splitPane, isRoot, isInDocHost) {
    if (!splitPane) {
      return;
    }
    if (!splitPane.id) {
      splitPane.id = this.generateUuid();
    }
    for (const pane of splitPane.panes) {
      this.paneParentMap.set(pane, splitPane);
      if (!pane.id) {
        pane.id = this.generateUuid();
      }
      if (pane.type === locale.IgcDockManagerPaneType.contentPane && !pane.hidden) {
        this.clientContentPanesMap.set(pane.contentId, pane);
        if (isInDocHost) {
          this.visibleDocuments.push(pane);
        }
        else {
          this.visibleContentPanes.push(pane);
        }
      }
      else if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
        this.populatePaneParents(pane, isRoot, isInDocHost);
      }
      else if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane) {
        for (const cp of pane.panes) {
          if (!cp.id) {
            cp.id = this.generateUuid();
          }
          this.paneParentMap.set(cp, pane);
          if (!cp.hidden) {
            this.clientContentPanesMap.set(cp.contentId, cp);
            if (isInDocHost) {
              this.visibleDocuments.push(cp);
            }
            else {
              this.visibleContentPanes.push(cp);
            }
          }
        }
      }
      else if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
        if (isRoot) {
          this.documentHosts.push(pane);
        }
        this.paneParentMap.set(pane.rootPane, pane);
        this.populatePaneParents(pane.rootPane, isRoot, true);
      }
    }
  }
  populatePinLocations(splitPane) {
    if (!splitPane) {
      return;
    }
    for (const pane of splitPane.panes) {
      if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
        this.populatePinLocations(pane);
      }
      else if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane) {
        for (const cp of pane.panes) {
          this.addContentPanePinLocation(cp);
          this.paneParentMap.set(cp, pane);
        }
      }
      else if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
        this.addContentPanePinLocation(pane);
      }
    }
  }
  resolvePaneUnpinLocation(pane) {
    let unpinnedLocation;
    if (pane.unpinnedLocation) {
      unpinnedLocation = pane.unpinnedLocation;
    }
    else {
      const documentHost = this.findClosestDocumentHost(pane);
      // TODO Implement an auto-detect algorithm for unpinned location when there is no document host
      unpinnedLocation = documentHost ? this.findPaneUnpinLocation(pane, documentHost) : locale.IgcUnpinnedLocation.left;
    }
    return unpinnedLocation;
  }
  addContentPanePinLocation(pane) {
    if (pane.isPinned === false) {
      const unpinnedLocation = this.resolvePaneUnpinLocation(pane);
      this.unpinnedLocationMap.set(pane, unpinnedLocation);
    }
  }
  findClosestDocumentHost(pane) {
    const panePath = this.getPanePath(pane);
    let maxCommonParents = -1;
    let closestDocHost;
    for (const docHost of this.documentHosts) {
      const docHostPath = this.getPanePath(docHost);
      let i;
      for (i = 0; i < panePath.length; i++) {
        const paneParent = panePath[i];
        const docHostParent = docHostPath[i];
        if (paneParent !== docHostParent) {
          break;
        }
      }
      if (i > maxCommonParents) {
        maxCommonParents = i;
        closestDocHost = docHost;
      }
    }
    return closestDocHost;
  }
  findPaneUnpinLocation(pane, docHost) {
    const panePath = this.getPanePath(pane);
    const docHostPath = this.getPanePath(docHost);
    let commonParentIndex = -1;
    for (let i = 0; i < panePath.length; i++) {
      const paneParent = panePath[i];
      const docHostParent = docHostPath[i];
      if (paneParent === docHostParent) {
        commonParentIndex = i;
      }
      else {
        break;
      }
    }
    if (commonParentIndex >= 0) {
      const commonParent = panePath[commonParentIndex];
      const paneIndex = commonParent.panes.indexOf(panePath[commonParentIndex + 1]);
      const docHostIndex = commonParent.panes.indexOf(docHostPath[commonParentIndex + 1]);
      return commonParent.orientation === locale.IgcSplitPaneOrientation.horizontal ?
        paneIndex < docHostIndex ? locale.IgcUnpinnedLocation.left : locale.IgcUnpinnedLocation.right :
        paneIndex < docHostIndex ? locale.IgcUnpinnedLocation.top : locale.IgcUnpinnedLocation.bottom;
    }
    return locale.IgcUnpinnedLocation.left;
  }
  removePane(pane) {
    if (pane === this.dockManager.maximizedPane) {
      this.dockManager.maximizedPane = null;
    }
    const parent = this.paneParentMap.get(pane);
    if (!parent) {
      if (this.dockManager.layout.floatingPanes) {
        const floatingIndex = this.dockManager.layout.floatingPanes.indexOf(pane);
        if (floatingIndex > -1) {
          this.dockManager.layout.floatingPanes.splice(floatingIndex, 1);
        }
      }
      return;
    }
    if (parent.type === locale.IgcDockManagerPaneType.splitPane ||
      parent.type === locale.IgcDockManagerPaneType.tabGroupPane) {
      const index = parent.panes.indexOf(pane);
      parent.panes.splice(index, 1);
      if (parent.panes.length === 0) {
        if (parent.allowEmpty) {
          const rootParent = this.getRootParent(pane);
          if (this.isFloatingPane(rootParent)) {
            this.removeFloatingPaneIfEmpty(rootParent);
          }
        }
        else {
          this.removePane(parent);
        }
      }
      else if (parent.type === locale.IgcDockManagerPaneType.splitPane) {
        const rootParent = this.getRootParent(parent);
        if (this.isFloatingPane(rootParent)) {
          this.removeFloatingPaneIfEmpty(parent);
        }
      }
    }
    else if (parent.type === locale.IgcDockManagerPaneType.documentHost) {
      parent.rootPane = null;
      this.removePane(parent);
    }
  }
  removeFloatingPaneIfEmpty(pane) {
    const childPanes = this.getChildContentPanes(pane);
    if (childPanes.length === 0) {
      this.removePane(pane);
    }
  }
  isFloatingPane(pane) {
    if (!this.dockManager.layout.floatingPanes) {
      return false;
    }
    return this.dockManager.layout.floatingPanes.indexOf(pane) > -1;
  }
  addFloatingPane(content, location, width, height) {
    const floatingPane = {
      type: locale.IgcDockManagerPaneType.splitPane,
      orientation: locale.IgcSplitPaneOrientation.vertical,
      panes: [content]
    };
    floatingPane.floatingLocation = location;
    floatingPane.floatingWidth = width;
    floatingPane.floatingHeight = height;
    if (!this.dockManager.layout.floatingPanes) {
      this.dockManager.layout.floatingPanes = [];
    }
    this.dockManager.layout.floatingPanes.push(floatingPane);
    this.dockManager.draggedPane = floatingPane;
    this.initialFloatingPaneLocation = floatingPane.floatingLocation;
    this.forceDragPane = floatingPane;
  }
  getChildContentPanes(pane) {
    const panes = [];
    this.getChildContentPanesRecursive(pane, panes);
    return panes;
  }
  getChildContentPanesRecursive(pane, children) {
    for (const child of pane.panes) {
      if (child.type === locale.IgcDockManagerPaneType.contentPane) {
        children.push(child);
      }
      else if (child.type === locale.IgcDockManagerPaneType.tabGroupPane ||
        child.type === locale.IgcDockManagerPaneType.splitPane) {
        this.getChildContentPanesRecursive(child, children);
      }
      else if (child.type === locale.IgcDockManagerPaneType.documentHost) {
        this.getChildContentPanesRecursive(child.rootPane, children);
      }
    }
  }
  getChildDocHostRecursive(pane) {
    for (const child of pane.panes) {
      if (child.type === locale.IgcDockManagerPaneType.documentHost) {
        return child;
      }
      else if (child.type === locale.IgcDockManagerPaneType.splitPane) {
        const result = this.getChildDocHostRecursive(child);
        if (result) {
          return result;
        }
      }
    }
    return null;
  }
  getVisibleContentPanes(parent) {
    return parent.panes.filter(t => this.isContentPaneVisible(t));
  }
  getPaneToDock(draggedPane) {
    return draggedPane.type === locale.IgcDockManagerPaneType.contentPane ? draggedPane :
      draggedPane.type === locale.IgcDockManagerPaneType.tabGroupPane || draggedPane.type === locale.IgcDockManagerPaneType.splitPane ?
        draggedPane.panes.length === 1 ?
          draggedPane.panes[0] :
          draggedPane :
        draggedPane;
  }
  removeDocumentHost(pane) {
    const docHost = this.getChildDocHostRecursive(pane);
    if (docHost) {
      const parent = this.getParent(docHost);
      const index = parent.panes.indexOf(docHost);
      parent.panes[index] = docHost.rootPane.panes.length === 1 ?
        docHost.rootPane.panes[0] :
        docHost.rootPane;
    }
  }
  dockToCenter(targetPane, draggedPane) {
    let targetContainer;
    if (targetPane.type === locale.IgcDockManagerPaneType.tabGroupPane) {
      targetContainer = targetPane;
    }
    else if (targetPane.type === locale.IgcDockManagerPaneType.contentPane) {
      targetContainer = {
        type: locale.IgcDockManagerPaneType.tabGroupPane,
        size: targetPane.size,
        panes: [targetPane]
      };
      const targetParent = this.paneParentMap.get(targetPane);
      const index = targetParent.panes.indexOf(targetPane);
      targetParent.panes[index] = targetContainer;
    }
    else if (targetPane.type === locale.IgcDockManagerPaneType.splitPane) {
      targetContainer = targetPane;
    }
    else if (targetPane.type === locale.IgcDockManagerPaneType.documentHost) {
      targetContainer = targetPane.rootPane;
    }
    if (targetContainer.type === locale.IgcDockManagerPaneType.tabGroupPane) {
      const panesToDock = (draggedPane.type === locale.IgcDockManagerPaneType.contentPane) ?
        [draggedPane] :
        this.getChildContentPanes(draggedPane);
      targetContainer.panes.push(...panesToDock);
    }
    else if (targetContainer.type === locale.IgcDockManagerPaneType.splitPane) {
      targetContainer.panes.push(draggedPane);
    }
  }
  dockToEdge(targetPane, position) {
    const targetParent = this.getParent(targetPane);
    const paneIndex = targetParent.panes.indexOf(targetPane);
    const isIndicatorVertical = Utils.isDockingIndicatorVertical(position);
    const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
    let draggedPane = this.dockManager.draggedPane;
    if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === locale.IgcDockManagerPaneType.splitPane &&
      this.dockManager.documentOnlyDrag &&
      !this.dockManager.dropTargetPaneInfo.floatingPaneWithoutDocHost) {
      this.removeDocumentHost(draggedPane);
    }
    else if ((draggedPane === null || draggedPane === void 0 ? void 0 : draggedPane.type) === locale.IgcDockManagerPaneType.contentPane &&
      this.dockManager.documentOnlyDrag &&
      this.dockManager.dropTargetPaneInfo.floatingPaneWithoutDocHost) {
      draggedPane = {
        type: locale.IgcDockManagerPaneType.documentHost,
        rootPane: {
          type: locale.IgcDockManagerPaneType.splitPane,
          orientation: locale.IgcSplitPaneOrientation.horizontal,
          panes: [draggedPane]
        }
      };
    }
    const paneToDock = draggedPane ? this.getPaneToDock(draggedPane) : this.dockManager.activePane;
    if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
      const insertIndex = Utils.isDockingIndicatorBefore(position) ?
        paneIndex :
        paneIndex + 1;
      targetParent.panes.splice(insertIndex, 0, paneToDock);
    }
    else {
      const newSplitPane = {
        type: locale.IgcDockManagerPaneType.splitPane,
        orientation: isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical,
        panes: Utils.isDockingIndicatorBefore(position) ?
          [paneToDock, targetPane] :
          [targetPane, paneToDock],
        size: targetPane.size
      };
      targetPane.size = undefined;
      paneToDock.size = undefined;
      targetParent.panes[paneIndex] = newSplitPane;
    }
  }
  updateLayout() {
    this.dockManager.layout = Object.assign({}, this.dockManager.layout);
  }
  processLayout() {
    this.paneParentMap = new Map();
    this.unpinnedLocationMap = new Map();
    this.clientContentPanesMap = new Map();
    this.documentHosts = [];
    this.visibleContentPanes = [];
    this.visibleDocuments = [];
    const layout = this.dockManager.layout;
    if (layout) {
      this.populatePaneParents(layout.rootPane, true, false);
      if (layout.floatingPanes) {
        const indicesToDelete = new Map(this.dockManager.floatingPaneZIndicesMap);
        for (let i = 0; i < layout.floatingPanes.length; i++) {
          const pane = layout.floatingPanes[i];
          this.populatePaneParents(pane, false, false);
          if (this.dockManager.floatingPaneZIndicesMap.has(pane)) {
            indicesToDelete.delete(pane);
          }
          else {
            this.dockManager.floatingPaneZIndicesMap.set(pane, i);
          }
        }
        for (const key of indicesToDelete.keys()) {
          this.dockManager.floatingPaneZIndicesMap.delete(key);
        }
      }
      this.populatePinLocations(layout.rootPane);
      if (this.dockManager.flyoutPane && !this.unpinnedLocationMap.has(this.dockManager.flyoutPane)) {
        this.dockManager.flyoutPane = null;
      }
    }
  }
  getParent(pane) {
    return this.paneParentMap.get(pane);
  }
  getRootParent(pane) {
    return this.getPanePath(pane)[0];
  }
  getPanePath(pane) {
    const path = [];
    let currentPane = pane;
    while (currentPane) {
      path.splice(0, 0, currentPane);
      currentPane = this.paneParentMap.get(currentPane);
    }
    return path;
  }
  getDocHostParent(pane) {
    let parent = pane;
    do {
      parent = this.paneParentMap.get(parent);
    } while (parent && parent.type !== locale.IgcDockManagerPaneType.documentHost);
    return parent;
  }
  resizeFlyoutPane(delta) {
    const pane = this.dockManager.flyoutPane;
    const location = this.unpinnedLocationMap.get(pane);
    const paneSize = pane.unpinnedSize ? pane.unpinnedSize : IGC_DEFAULT_UNPIN_PANE_SIZE;
    const newSize = location === locale.IgcUnpinnedLocation.left || location === locale.IgcUnpinnedLocation.top ?
      paneSize + delta :
      paneSize - delta;
    pane.unpinnedSize = newSize;
    this.updateLayout();
  }
  resizePane(pane, deltaPercentage) {
    const parentPane = this.getParent(pane);
    const childPanes = this.getSplitPaneVisibleChildren(parentPane);
    const paneIndex = childPanes.indexOf(pane);
    const paneSizes = childPanes.map(p => p.size || p.size === 0 ? p.size : IGC_DEFAULT_PANE_SIZE);
    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;
    this.updateLayout();
  }
  togglePin(pane, pinBehavior = IgcPinBehavior.allPanes) {
    const newValue = !this.getActualIsPinned(pane);
    const parent = this.paneParentMap.get(pane);
    const panes = parent.type === locale.IgcDockManagerPaneType.tabGroupPane && pinBehavior === IgcPinBehavior.allPanes ?
      parent.panes.filter(p => p.allowPinning !== false) :
      [pane];
    const location = this.resolvePaneUnpinLocation(pane);
    const args = {
      sourcePane: pane,
      panes,
      newValue,
      location
    };
    const event = this.dockManager.panePinnedToggle.emit(args);
    if (!event.defaultPrevented) {
      for (const cp of args.panes) {
        cp.isPinned = newValue;
      }
      if (this.dockManager.maximizedPane) {
        this.dockManager.maximizedPane = null;
        newValue ?
          this.dockManager.flyoutPane = null :
          this.flyoutPane(pane);
      }
      else if (newValue) {
        this.dockManager.flyoutPane = null;
      }
      this.updateLayout();
    }
  }
  closePane(pane) {
    let paneToRemove = pane;
    if (pane.type === locale.IgcDockManagerPaneType.contentPane && pane !== this.dockManager.flyoutPane) {
      const parent = this.paneParentMap.get(pane);
      if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane) {
        paneToRemove = parent;
      }
    }
    const paneRemoved = paneToRemove.type === locale.IgcDockManagerPaneType.tabGroupPane ?
      this.removeAllowedPanes(pane, paneToRemove) :
      this.emitPaneClose(pane, [paneToRemove]);
    if ((paneRemoved || pane.hidden) && pane === this.dockManager.flyoutPane) {
      this.dockManager.flyoutPane = null;
    }
    this.updateLayout();
  }
  closeFloatingPane(pane) {
    this.removeAllowedPanes(pane, pane);
    this.updateLayout();
  }
  emitPaneClose(sourcePane, panes) {
    let paneRemoved = false;
    const args = { sourcePane, panes };
    const event = this.dockManager.paneClose.emit(args);
    if (!event.defaultPrevented) {
      for (const pane of args.panes) {
        this.removePane(pane);
        paneRemoved = true;
      }
    }
    return paneRemoved;
  }
  removeAllowedPanes(sourcePane, pane) {
    let paneRemoved = false;
    const panes = this.getChildContentPanes(pane).filter(p => this.getActualAllowClose(p));
    paneRemoved = this.emitPaneClose(sourcePane, panes);
    return paneRemoved;
  }
  flyoutPane(pane) {
    this.dockManager.flyoutPane = this.dockManager.flyoutPane === pane ? null : pane;
  }
  maximizePane(pane) {
    const parent = this.getParent(pane);
    const targetPane = parent && parent.type === locale.IgcDockManagerPaneType.tabGroupPane && pane !== this.dockManager.flyoutPane ? parent : pane;
    this.dockManager.maximizedPane = this.dockManager.maximizedPane === targetPane ? null : targetPane;
  }
  moveFloatingPane(pane, location) {
    pane.floatingLocation = location;
    this.updateLayout();
  }
  resizeFloatingPaneStart(pane, resizerLocation) {
    var _a, _b, _c;
    const resizeArgs = {
      sourcePane: pane,
      resizerLocation
    };
    const resizeStartEvent = this.dockManager.floatingPaneResizeStart.emit(resizeArgs);
    if (resizeStartEvent.defaultPrevented) {
      return false;
    }
    this.initialFloatingPaneLocation = (_a = pane.floatingLocation) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
    this.initialFloatingPaneWidth = (_b = pane.floatingWidth) !== null && _b !== void 0 ? _b : IGC_DEFAULT_PANE_SIZE;
    this.initialFloatingPaneHeight = (_c = pane.floatingHeight) !== null && _c !== void 0 ? _c : IGC_DEFAULT_PANE_SIZE;
    return true;
  }
  resizeFloatingPane(pane, args) {
    const currX = pane.floatingLocation ? pane.floatingLocation.x : 0;
    const currY = pane.floatingLocation ? pane.floatingLocation.y : 0;
    const currW = pane.floatingWidth ? pane.floatingWidth : IGC_DEFAULT_PANE_SIZE;
    const currH = pane.floatingHeight ? pane.floatingHeight : IGC_DEFAULT_PANE_SIZE;
    const minW = IGC_DEFAULT_PANE_SIZE;
    const minH = IGC_DEFAULT_PANE_SIZE;
    const initialWidth = this.initialFloatingPaneWidth;
    const initialHeight = this.initialFloatingPaneHeight;
    const initialLocation = this.initialFloatingPaneLocation;
    let totalOffsetY = args.dragMoveArgs.totalOffsetY;
    let totalOffsetX = args.dragMoveArgs.totalOffsetX;
    let newX = currX;
    let newY = currY;
    let newWidth = currW;
    let newHeight = currH;
    const maxHeight = document.documentElement.clientHeight;
    const maxWidth = document.documentElement.clientWidth;
    switch (args.resizerLocation) {
      case (locale.IgcResizerLocation.top):
      case (locale.IgcResizerLocation.topLeft):
      case (locale.IgcResizerLocation.topRight):
        newHeight = initialHeight - totalOffsetY;
        if (newHeight < minH) {
          totalOffsetY = initialHeight - minH;
          newHeight = minH;
        }
        newY = initialLocation.y + totalOffsetY;
        if (newY < 0) {
          newHeight += newY;
          newY = 0;
        }
        else if (newY >= maxHeight - 1) {
          newY = maxHeight - 1;
        }
        break;
      case (locale.IgcResizerLocation.bottom):
      case (locale.IgcResizerLocation.bottomLeft):
      case (locale.IgcResizerLocation.bottomRight):
        newHeight = initialHeight + totalOffsetY;
        if (newHeight < minH) {
          newHeight = minH;
        }
        if (newY + newHeight > maxHeight) {
          newHeight = maxHeight - newY;
        }
        break;
    }
    switch (args.resizerLocation) {
      case (locale.IgcResizerLocation.left):
      case (locale.IgcResizerLocation.topLeft):
      case (locale.IgcResizerLocation.bottomLeft):
        newWidth = initialWidth - totalOffsetX;
        if (newWidth < minW) {
          totalOffsetX = initialWidth - minW;
          newWidth = minW;
        }
        newX = initialLocation.x + totalOffsetX;
        if (newX < 0) {
          newWidth += newX;
          newX = 0;
        }
        else if (newX >= maxWidth) {
          newX = maxWidth;
        }
        break;
      case (locale.IgcResizerLocation.right):
      case (locale.IgcResizerLocation.topRight):
      case (locale.IgcResizerLocation.bottomRight):
        newWidth = initialWidth + totalOffsetX;
        if (newWidth < minW) {
          newWidth = minW;
        }
        if (newX + newWidth > maxWidth) {
          newWidth = maxWidth - newX;
        }
        break;
    }
    if (currX === newX && currY === newY && currW === newWidth && currH === newHeight) {
      return;
    }
    const resizingArgs = {
      sourcePane: pane,
      oldWidth: currW,
      newWidth,
      oldHeight: currH,
      newHeight,
      oldLocation: { x: currX, y: currY },
      newLocation: { x: newX, y: newY },
      resizerLocation: args.resizerLocation
    };
    const resizingEvent = this.dockManager.floatingPaneResizeMove.emit(resizingArgs);
    if (resizingEvent.defaultPrevented) {
      args.dragMoveArgs.cancel = true;
      return;
    }
    else {
      pane.floatingLocation = resizingArgs.newLocation;
      pane.floatingWidth = resizingArgs.newWidth;
      pane.floatingHeight = resizingArgs.newHeight;
      this.updateLayout();
    }
  }
  resizeFloatingPaneEnd(pane, resizerLocation) {
    this.dockManager.floatingPaneResizeEnd.emit({
      sourcePane: pane,
      resizerLocation
    });
  }
  floatPane(pane, x, y, width, height) {
    let panesToRemove = [pane];
    let paneToAdd = pane;
    const parent = this.paneParentMap.get(pane);
    if (pane !== this.dockManager.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) {
      if (parent.allowEmpty) {
        const panes = [...parent.panes];
        panesToRemove = panes;
        paneToAdd = parent.panes.length === 1 ?
          pane :
          {
            type: locale.IgcDockManagerPaneType.tabGroupPane,
            panes,
            selectedIndex: parent.selectedIndex
          };
      }
      else {
        panesToRemove = [parent];
        paneToAdd = parent;
      }
    }
    panesToRemove.forEach(p => this.removePane(p));
    this.addFloatingPane(paneToAdd, { x, y }, width, height);
    if (pane === this.dockManager.flyoutPane) {
      pane.isPinned = true;
      this.dockManager.flyoutPane = null;
    }
    this.updateLayout();
  }
  floatTab(pane, x, y, width, height) {
    this.removePane(pane);
    const isInDocHost = !!this.getDocHostParent(pane);
    let content;
    if (isInDocHost && pane.documentOnly) {
      const docHost = {
        type: locale.IgcDockManagerPaneType.documentHost,
        rootPane: {
          type: locale.IgcDockManagerPaneType.splitPane,
          orientation: locale.IgcSplitPaneOrientation.vertical,
          panes: [pane]
        }
      };
      content = docHost;
    }
    else {
      content = pane;
    }
    this.addFloatingPane(content, { x, y }, width, height);
    this.updateLayout();
  }
  hasFloatingPaneHeader(pane) {
    const panes = this.getSplitPaneVisibleChildren(pane);
    if (panes && panes.length) {
      if (panes.length > 1) {
        return true;
      }
      const childPane = panes[0];
      if (childPane.type === locale.IgcDockManagerPaneType.splitPane) {
        return this.hasFloatingPaneHeader(childPane);
      }
      else if (childPane.type === locale.IgcDockManagerPaneType.documentHost) {
        return true;
      }
    }
    return false;
  }
  rootDockPane(position) {
    const layout = this.dockManager.layout;
    const rootPane = layout.rootPane;
    const paneToDock = this.dockManager.draggedPane ? this.getPaneToDock(this.dockManager.draggedPane) : this.dockManager.activePane;
    this.removePane(paneToDock);
    const isIndicatorVertical = position === locale.IgcDockingIndicatorPosition.top || position === locale.IgcDockingIndicatorPosition.bottom;
    const isSplitPaneVertical = Utils.isSplitPaneVertical(rootPane);
    if ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical)) {
      const insertIndex = (position === locale.IgcDockingIndicatorPosition.left || position === locale.IgcDockingIndicatorPosition.top) ?
        0 :
        rootPane.panes.length;
      rootPane.panes.splice(insertIndex, 0, paneToDock);
    }
    else {
      const newRootPane = {
        type: locale.IgcDockManagerPaneType.splitPane,
        orientation: isSplitPaneVertical ? locale.IgcSplitPaneOrientation.horizontal : locale.IgcSplitPaneOrientation.vertical,
        panes: (position === locale.IgcDockingIndicatorPosition.left || position === locale.IgcDockingIndicatorPosition.top) ?
          [paneToDock, rootPane] :
          [rootPane, paneToDock],
      };
      rootPane.size = undefined;
      paneToDock.size = undefined;
      layout.rootPane = newRootPane;
    }
    this.updateLayout();
  }
  dockPane(position) {
    var _a;
    const draggedFloatingPane = (_a = this.dockManager.draggedPane) !== null && _a !== void 0 ? _a : this.dockManager.activePane;
    const dropTargetPaneInfo = this.dockManager.dropTargetPaneInfo;
    this.removePane(draggedFloatingPane);
    const targetPane = this.dockManager.draggedPane ? dropTargetPaneInfo.pane : this.getParent(this.dockManager.activePane);
    switch (position) {
      case locale.IgcDockingIndicatorPosition.center:
        this.dockToCenter(targetPane, draggedFloatingPane);
        break;
      case locale.IgcDockingIndicatorPosition.left:
      case locale.IgcDockingIndicatorPosition.top:
      case locale.IgcDockingIndicatorPosition.right:
      case locale.IgcDockingIndicatorPosition.bottom:
        this.dockToEdge(targetPane, position);
        break;
      case locale.IgcDockingIndicatorPosition.outerLeft:
      case locale.IgcDockingIndicatorPosition.outerTop:
      case locale.IgcDockingIndicatorPosition.outerRight:
      case locale.IgcDockingIndicatorPosition.outerBottom:
        const docHost = this.dockManager.dropTargetPaneInfo.docHost;
        this.dockToEdge(docHost, position);
        break;
    }
    this.updateLayout();
  }
  getActualIsPinned(pane) {
    return pane.isPinned !== false;
  }
  getActualAllowClose(pane) {
    return pane.allowClose !== false;
  }
  isContentPaneVisible(pane) {
    return pane.isPinned !== false && pane.hidden !== true;
  }
  getSplitPaneVisibleChildren(pane) {
    return pane.panes.filter(p => {
      if (p.type === locale.IgcDockManagerPaneType.contentPane) {
        return this.isContentPaneVisible(p);
      }
      else if (p.type === locale.IgcDockManagerPaneType.splitPane) {
        return p.allowEmpty || this.getSplitPaneVisibleChildren(p).length;
      }
      else if (p.type === locale.IgcDockManagerPaneType.tabGroupPane) {
        return p.allowEmpty || p.panes.some(cp => this.isContentPaneVisible(cp));
      }
      else if (p.type === locale.IgcDockManagerPaneType.documentHost) {
        return p.rootPane.allowEmpty || this.getSplitPaneVisibleChildren(p.rootPane).length;
      }
    });
  }
  closeTabPane(pane) {
    this.emitPaneClose(pane, [pane]);
    this.updateLayout();
  }
  bringFloatingPaneOnTop(pane) {
    const floatingPanes = this.dockManager.layout.floatingPanes;
    const floatingPaneZIndicesMap = this.dockManager.floatingPaneZIndicesMap;
    const oldZIndex = floatingPaneZIndicesMap.get(pane);
    for (const p of floatingPanes) {
      const zIndex = floatingPaneZIndicesMap.get(p);
      if (zIndex < oldZIndex) {
        continue;
      }
      else if (zIndex > oldZIndex) {
        floatingPaneZIndicesMap.set(p, zIndex - 1);
      }
      else {
        floatingPaneZIndicesMap.set(p, floatingPanes.length - 1);
      }
    }
    this.dockManager.floatingPaneZIndicesMap = new Map(floatingPaneZIndicesMap);
  }
  createContextMenuItems(pane) {
    const items = [];
    if (this.getActualAllowClose(pane)) {
      items.push({ displayText: this.dockManager.resourceStrings.close, iconName: 'close', clickHandler: () => this.closeTabPane(pane) });
    }
    if (pane.allowPinning !== false) {
      items.push({ displayText: this.dockManager.resourceStrings.unpin, iconName: 'unpin', clickHandler: () => this.togglePin(pane, IgcPinBehavior.selectedPane) });
    }
    return items;
  }
  dragPaneStart(pane, rect, clientX, clientY) {
    var _a;
    if (this.dockManager.maximizedPane) {
      return false;
    }
    let panes;
    let parent;
    if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
      parent = this.getParent(pane);
      panes = parent.type === locale.IgcDockManagerPaneType.tabGroupPane && pane !== this.dockManager.flyoutPane ?
        parent.panes :
        [pane];
    }
    else {
      if (this.dockManager.draggedPane === pane) {
        return true;
      }
      panes = this.getChildContentPanes(pane);
    }
    const disableDockingAndFloating = panes.some(p => p.allowDocking === false) && panes.some(p => p.allowFloating === false);
    if (pane.type === locale.IgcDockManagerPaneType.contentPane && disableDockingAndFloating) {
      return false;
    }
    const dragStartEvent = this.dockManager.paneDragStart.emit({ sourcePane: pane, panes });
    if (dragStartEvent.defaultPrevented) {
      return false;
    }
    this.draggedPanes = panes;
    this.initialDragClientPoint = {
      x: clientX,
      y: clientY
    };
    if (pane.type === locale.IgcDockManagerPaneType.splitPane) {
      this.dockManager.draggedPane = pane;
      this.initialFloatingPaneLocation = (_a = pane.floatingLocation) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
    }
    else {
      if (this.draggedPanes.some(p => p.allowFloating === false)) {
        this.dockManager.draggedPane = panes.length > 1 ? parent : pane;
        return true;
      }
      const action = {
        type: locale.IgcPaneDragActionType.floatPane,
        location: { x: rect.x, y: rect.y },
        width: rect.width,
        height: rect.height
      };
      const dragOverEvent = this.dockManager.paneDragOver.emit({
        sourcePane: pane,
        panes,
        action,
        isValid: true
      });
      if (dragOverEvent.defaultPrevented) {
        return false;
      }
      if (!dragOverEvent.detail.isValid) {
        this.dockManager.draggedPane = panes.length > 1 ? parent : pane;
        return true;
      }
      this.floatPane(pane, rect.x, rect.y, action.width, action.height);
      return false;
    }
    return true;
  }
  dragPaneMove(clientX, clientY) {
    const draggedPane = this.dockManager.draggedPane;
    if (draggedPane.type === locale.IgcDockManagerPaneType.splitPane) {
      const oldLocation = draggedPane.floatingLocation ? draggedPane.floatingLocation : { x: 0, y: 0 };
      const newLocation = {
        x: this.initialFloatingPaneLocation.x + clientX - this.initialDragClientPoint.x,
        y: this.initialFloatingPaneLocation.y + clientY - this.initialDragClientPoint.y,
      };
      const dragOverEvent = this.dockManager.paneDragOver.emit({
        sourcePane: draggedPane,
        panes: this.draggedPanes,
        action: {
          type: locale.IgcPaneDragActionType.moveFloatingPane,
          oldLocation,
          newLocation
        },
        isValid: true
      });
      if (dragOverEvent.defaultPrevented) {
        return false;
      }
      else {
        if (dragOverEvent.detail.isValid) {
          this.moveFloatingPane(draggedPane, newLocation);
        }
        this.dockManager.isValidDrop = dragOverEvent.detail.isValid;
      }
    }
    return this.dragOver();
  }
  dragPaneEnd() {
    var _a;
    const dockingIndicator = this.dockingIndicator;
    const draggedPane = (_a = this.dockManager.draggedPane) !== null && _a !== void 0 ? _a : this.draggedTab;
    let docked = false;
    this.dockManager.paneDragEnd.emit({
      sourcePane: draggedPane,
      panes: this.draggedPanes
    });
    if (dockingIndicator && this.dockManager.isValidDrop) {
      if (draggedPane.type === locale.IgcDockManagerPaneType.contentPane) {
        if (draggedPane.isPinned === false) {
          draggedPane.isPinned = true;
          if (draggedPane === this.dockManager.flyoutPane) {
            this.dockManager.flyoutPane = null;
          }
        }
      }
      if (dockingIndicator.isRoot) {
        this.rootDockPane(dockingIndicator.position);
      }
      else {
        this.dockPane(dockingIndicator.position);
      }
      docked = true;
    }
    this.draggedPanes = null;
    this.draggedTab = null;
    this.dockManager.draggedPane = null;
    this.dockManager.dropTargetPaneInfo = null;
    this.dockManager.dropShadowRect = null;
    this.dockManager.isValidDrop = true;
    return docked;
  }
  dragOver() {
    var _a;
    if (this.dockingIndicator) {
      const dragOverEvent = this.dockManager.paneDragOver.emit({
        sourcePane: this.dockManager.draggedPane,
        panes: this.draggedPanes,
        action: {
          type: locale.IgcPaneDragActionType.dockPane,
          dockingIndicator: this.dockingIndicator,
          targetPane: (_a = this.dockManager.dropTargetPaneInfo) === null || _a === void 0 ? void 0 : _a.pane
        },
        isValid: true
      });
      if (dragOverEvent.defaultPrevented) {
        return false;
      }
      else {
        this.dockManager.isValidDrop = dragOverEvent.detail.isValid;
        this.dockManager.dropShadowRect = this.dockManager.isValidDrop ?
          this.dockingIndicator.isRoot ? this.getDropShadowRectRoot() : this.getDropShadowRect() :
          null;
      }
    }
    else {
      this.dockManager.dropShadowRect = null;
      if (this.dockManager.draggedPane.type !== locale.IgcDockManagerPaneType.splitPane) {
        this.dockManager.isValidDrop = false;
      }
    }
    return true;
  }
  dragTabStart(pane) {
    this.shiftLeftThreshold = Number.MAX_VALUE;
    this.shiftRightThreshold = 0;
    if (this.dockManager.draggedPane === pane) {
      return true;
    }
    const dragStartEvent = this.dockManager.paneDragStart.emit({
      sourcePane: pane,
      panes: [pane]
    });
    if (dragStartEvent.defaultPrevented) {
      return false;
    }
    this.initialTabHeaderClickOffset = null;
    this.draggedTab = pane;
    this.draggedPanes = [pane];
    return true;
  }
  dragTabMove(pane, args, rects) {
    const clientX = args.clientX;
    const clientY = args.clientY;
    const offsetX = args.offsetX;
    const totalOffsetX = args.totalOffsetX;
    const totalOffsetY = args.totalOffsetY;
    const headerRect = rects.headerRect;
    const prevHeaderRect = rects.prevHeaderRect;
    const nextHeaderRect = rects.nextHeaderRect;
    const lastVisibleHeaderRect = rects.lastVisibleHeaderRect;
    const tabsRect = rects.tabsRect;
    if (!this.initialTabHeaderClickOffset) {
      const clickOffsetX = clientX - totalOffsetX - headerRect.left;
      const clickOffsetY = clientY - totalOffsetY - headerRect.top;
      this.initialTabHeaderClickOffset = { x: clickOffsetX, y: clickOffsetY };
    }
    if (pane.allowFloating === false
      && (clientX < tabsRect.left || clientX > tabsRect.right || clientY < headerRect.top || clientY > headerRect.bottom)) {
      this.dockManager.draggedPane = pane;
      return this.dragOver();
    }
    this.dockManager.draggedPane = null;
    this.dockManager.isValidDrop = true;
    const paneIndex = this.getParent(pane).panes.indexOf(pane);
    if (prevHeaderRect
      && clientX < headerRect.left
      && clientX < this.shiftLeftThreshold
      && offsetX < 0) {
      this.shiftLeftThreshold = prevHeaderRect.left;
      const action = {
        type: locale.IgcPaneDragActionType.moveTab,
        oldIndex: paneIndex,
        newIndex: paneIndex - 1
      };
      const dragOverEvent = this.dockManager.paneDragOver.emit({
        sourcePane: pane,
        panes: [pane],
        action,
        isValid: true
      });
      if (dragOverEvent.defaultPrevented) {
        return false;
      }
      else if (!dragOverEvent.detail.isValid) {
        return true;
      }
      this.shiftTabLeft(pane);
    }
    else if (nextHeaderRect
      && clientX > headerRect.right
      && clientX > this.shiftRightThreshold
      && offsetX > 0) {
      this.shiftRightThreshold = nextHeaderRect.right;
      if (headerRect.top === nextHeaderRect.top) {
        const action = {
          type: locale.IgcPaneDragActionType.moveTab,
          oldIndex: paneIndex,
          newIndex: paneIndex + 1
        };
        const dragOverEvent = this.dockManager.paneDragOver.emit({
          sourcePane: pane,
          panes: [pane],
          action,
          isValid: true
        });
        if (dragOverEvent.defaultPrevented) {
          return false;
        }
        else if (!dragOverEvent.detail.isValid) {
          return true;
        }
        this.shiftTabRight(pane);
      }
    }
    if (Math.abs(totalOffsetY) > IGC_DRAG_FLYOUT_THRESHOLD
      || tabsRect.left - clientX > IGC_DRAG_FLYOUT_THRESHOLD
      || clientX - lastVisibleHeaderRect.right > IGC_DRAG_FLYOUT_THRESHOLD) {
      if (pane.allowFloating !== false && !this.dockManager.maximizedPane) {
        return this.floatTabHeader(pane, clientX, clientY, tabsRect);
      }
    }
    return true;
  }
  floatTabHeader(pane, clientX, clientY, tabsRect) {
    const rect = new DOMRect(clientX - this.initialTabHeaderClickOffset.x, clientY - this.initialTabHeaderClickOffset.y, tabsRect.width, tabsRect.height);
    let panes;
    let parent;
    if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
      parent = this.getParent(pane);
      panes = parent.type === locale.IgcDockManagerPaneType.tabGroupPane && pane !== this.dockManager.flyoutPane ?
        parent.panes :
        [pane];
    }
    this.draggedTab = null;
    const action = {
      type: locale.IgcPaneDragActionType.floatPane,
      location: { x: rect.x, y: rect.y },
      width: rect.width,
      height: rect.height
    };
    const dragOverEvent = this.dockManager.paneDragOver.emit({
      sourcePane: pane,
      panes,
      action,
      isValid: true
    });
    if (dragOverEvent.defaultPrevented) {
      return false;
    }
    else if (!dragOverEvent.detail.isValid) {
      return true;
    }
    this.initialDragClientPoint = {
      x: clientX,
      y: clientY
    };
    this.floatTab(pane, rect.x, rect.y, action.width, action.height);
    return false;
  }
  resolveChildPanesAllowMaximize(pane) {
    const panes = this.getChildContentPanes(pane);
    const visiblePanes = panes.filter(p => this.isContentPaneVisible(p));
    return visiblePanes.every(p => { var _a; return (_a = p.allowMaximize) !== null && _a !== void 0 ? _a : this.dockManager.allowMaximize; });
  }
  normalizeMaximizedPane(pane) {
    if (this.dockManager.maximizedPane) {
      const panes = this.dockManager.maximizedPane.type === locale.IgcDockManagerPaneType.splitPane || this.dockManager.maximizedPane.type === locale.IgcDockManagerPaneType.tabGroupPane
        ? this.getChildContentPanes(this.dockManager.maximizedPane)
        : [this.dockManager.maximizedPane];
      if (panes.every(p => p !== pane)) {
        this.maximizePane(this.dockManager.maximizedPane);
      }
    }
  }
  resolveAllowMaximize(pane) {
    var _a, _b;
    if (pane.type === locale.IgcDockManagerPaneType.splitPane || pane.type === locale.IgcDockManagerPaneType.tabGroupPane) {
      return this.resolveChildPanesAllowMaximize(pane);
    }
    else if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
      if (!this.getActualIsPinned(pane)) {
        return (_a = pane.allowMaximize) !== null && _a !== void 0 ? _a : this.dockManager.allowMaximize;
      }
      const parent = this.getParent(pane);
      return parent.type === locale.IgcDockManagerPaneType.tabGroupPane
        ? this.resolveChildPanesAllowMaximize(parent)
        : (_b = pane.allowMaximize) !== null && _b !== void 0 ? _b : this.dockManager.allowMaximize;
    }
  }
  getDropShadowRect() {
    var _a;
    const parentRect = this.dropTargetParentRect;
    const dropTargetPaneInfo = this.dockManager.dropTargetPaneInfo;
    if (!dropTargetPaneInfo) {
      return;
    }
    const shadowRect = new DOMRect();
    const draggedPaneSize = (_a = this.getPaneToDock(this.dockManager.draggedPane).size) !== null && _a !== void 0 ? _a : IGC_DEFAULT_PANE_SIZE;
    const isOuter = Utils.isDockingIndicatorOuter(this.dockingIndicator.position);
    const baseRect = isOuter ? parentRect : dropTargetPaneInfo.targetRect;
    if (this.dockingIndicator.position === locale.IgcDockingIndicatorPosition.center) {
      shadowRect.x = baseRect.x;
      shadowRect.y = baseRect.y;
      shadowRect.width = baseRect.width;
      shadowRect.height = baseRect.height;
      return shadowRect;
    }
    const targetPane = isOuter ? dropTargetPaneInfo.docHost : dropTargetPaneInfo.pane;
    const targetParent = this.getParent(targetPane);
    const panes = this.getSplitPaneVisibleChildren(targetParent);
    const draggedPaneIndex = panes.indexOf(this.dockManager.draggedPane);
    if (draggedPaneIndex > -1) {
      panes.splice(draggedPaneIndex, 1);
    }
    const dropTargetIndex = panes.indexOf(targetPane);
    const isIndicatorVertical = Utils.isDockingIndicatorVertical(this.dockingIndicator.position);
    const isSplitPaneVertical = Utils.isSplitPaneVertical(targetParent);
    const isSameSplitPane = ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
    const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
    const beforePanesTotalSize = panes.slice(0, dropTargetIndex).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
    const afterPanesTotalSize = panes.slice(0, dropTargetIndex + 1).reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
    switch (this.dockingIndicator.position) {
      case locale.IgcDockingIndicatorPosition.left:
      case locale.IgcDockingIndicatorPosition.outerLeft:
        shadowRect.x = baseRect.x;
        shadowRect.y = baseRect.y;
        shadowRect.height = baseRect.height;
        if (isSameSplitPane) {
          shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
          shadowRect.x = parentRect.left + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
        }
        else {
          shadowRect.width = parentRect.width / 2;
        }
        break;
      case locale.IgcDockingIndicatorPosition.right:
      case locale.IgcDockingIndicatorPosition.outerRight:
        shadowRect.y = baseRect.y;
        shadowRect.height = baseRect.height;
        if (isSameSplitPane) {
          shadowRect.width = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.width;
          shadowRect.x = parentRect.left + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.width;
        }
        else {
          shadowRect.width = parentRect.width / 2;
          shadowRect.x = parentRect.right - shadowRect.width;
        }
        break;
      case locale.IgcDockingIndicatorPosition.top:
      case locale.IgcDockingIndicatorPosition.outerTop:
        shadowRect.x = baseRect.x;
        shadowRect.y = baseRect.y;
        shadowRect.width = baseRect.width;
        if (isSameSplitPane) {
          shadowRect.height = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.height;
          shadowRect.y = parentRect.top + beforePanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.height;
        }
        else {
          shadowRect.height = parentRect.height / 2;
        }
        break;
      case locale.IgcDockingIndicatorPosition.bottom:
      case locale.IgcDockingIndicatorPosition.outerBottom:
        shadowRect.x = baseRect.x;
        shadowRect.width = baseRect.width;
        if (isSameSplitPane) {
          shadowRect.height = (draggedPaneSize / (draggedPaneSize + panesTotalSize)) * parentRect.height;
          shadowRect.y = parentRect.top + afterPanesTotalSize / (draggedPaneSize + panesTotalSize) * parentRect.height;
        }
        else {
          shadowRect.height = parentRect.height / 2;
          shadowRect.y = parentRect.bottom - shadowRect.height;
        }
        break;
    }
    return shadowRect;
  }
  getDropShadowRectRoot() {
    var _a;
    const rootRect = this.dropTargetParentRect;
    const shadowRect = new DOMRect();
    const draggedPaneSize = (_a = this.getPaneToDock(this.dockManager.draggedPane).size) !== null && _a !== void 0 ? _a : IGC_DEFAULT_PANE_SIZE;
    const panes = this.getSplitPaneVisibleChildren(this.dockManager.layout.rootPane);
    const draggedPaneIndex = panes.indexOf(this.dockManager.draggedPane);
    if (draggedPaneIndex > -1) {
      panes.splice(draggedPaneIndex, 1);
    }
    const panesTotalSize = panes.reduce((a, b) => a + (b.size || IGC_DEFAULT_PANE_SIZE), 0);
    const isIndicatorVertical = Utils.isDockingIndicatorVertical(this.dockingIndicator.position);
    const isSplitPaneVertical = Utils.isSplitPaneVertical(this.dockManager.layout.rootPane);
    const isSameSplitPane = (isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical);
    const isEmptyDockManager = panes.length === 0;
    switch (this.dockingIndicator.position) {
      case locale.IgcDockingIndicatorPosition.left:
        shadowRect.x = rootRect.x;
        shadowRect.y = rootRect.y;
        shadowRect.height = rootRect.height;
        shadowRect.width = isSameSplitPane || isEmptyDockManager ? (draggedPaneSize / (draggedPaneSize + panesTotalSize) * rootRect.width) : (rootRect.width / 2);
        break;
      case locale.IgcDockingIndicatorPosition.right:
        shadowRect.y = rootRect.y;
        shadowRect.height = rootRect.height;
        shadowRect.width = isSameSplitPane || isEmptyDockManager ? (shadowRect.width = draggedPaneSize / (draggedPaneSize + panesTotalSize) * rootRect.width) : (rootRect.width / 2);
        shadowRect.x = rootRect.right - shadowRect.width;
        break;
      case locale.IgcDockingIndicatorPosition.top:
        shadowRect.x = rootRect.x;
        shadowRect.y = rootRect.y;
        shadowRect.width = rootRect.width;
        shadowRect.height = isSameSplitPane || isEmptyDockManager ? (draggedPaneSize / (draggedPaneSize + panesTotalSize) * rootRect.height) : (rootRect.height / 2);
        break;
      case locale.IgcDockingIndicatorPosition.bottom:
        shadowRect.x = rootRect.x;
        shadowRect.width = rootRect.width;
        shadowRect.height = isSameSplitPane || isEmptyDockManager ? (draggedPaneSize / (draggedPaneSize + panesTotalSize) * rootRect.height) : (rootRect.height / 2);
        shadowRect.y = rootRect.bottom - shadowRect.height;
        break;
    }
    return shadowRect;
  }
  selectHiddenTab(tabGroup, pane) {
    const index = tabGroup.panes.indexOf(pane);
    tabGroup.panes.splice(index, 1);
    tabGroup.panes.splice(0, 0, pane);
    tabGroup.selectedIndex = 0;
    this.updateLayout();
  }
  shiftTabLeft(pane) {
    const tabGroup = this.getParent(pane);
    const draggedIndex = tabGroup.panes.indexOf(pane);
    if (draggedIndex > 0) {
      tabGroup.panes.splice(draggedIndex, 1);
      tabGroup.panes.splice(draggedIndex - 1, 0, pane);
      tabGroup.selectedIndex = draggedIndex - 1;
      this.updateLayout();
    }
    this.forceDragTabHeader = pane;
  }
  shiftTabRight(pane) {
    const tabGroup = this.getParent(pane);
    const draggedIndex = tabGroup.panes.indexOf(pane);
    if (draggedIndex < tabGroup.panes.length - 1) {
      tabGroup.panes.splice(draggedIndex, 1);
      tabGroup.panes.splice(draggedIndex + 1, 0, pane);
      tabGroup.selectedIndex = draggedIndex + 1;
      this.updateLayout();
    }
    this.forceDragTabHeader = pane;
  }
  cacheDocumentsOrder() {
    this.documentsCache = this.visibleDocuments.filter(c => !c.disabled);
  }
  cacheContentPanesOrder() {
    this.contentPanesCache = this.visibleContentPanes.filter(c => !c.disabled);
  }
  focusPrevContentPane(isInDocHost) {
    const contentPanesCache = isInDocHost ? this.documentsCache : this.contentPanesCache;
    const activePaneIndex = contentPanesCache.indexOf(this.dockManager.activePane);
    const prevPane = activePaneIndex > 0 ?
      contentPanesCache[activePaneIndex - 1] :
      contentPanesCache[contentPanesCache.length - 1];
    this.normalizeMaximizedPane(prevPane);
    this.dockManager.activePane = prevPane;
  }
  focusNextContentPane(isInDocHost) {
    const contentPanesCache = isInDocHost ? this.documentsCache : this.contentPanesCache;
    const activePaneIndex = contentPanesCache.indexOf(this.dockManager.activePane);
    const nextPane = (activePaneIndex >= 0 && activePaneIndex < contentPanesCache.length - 1) ?
      contentPanesCache[activePaneIndex + 1] :
      contentPanesCache[0];
    this.normalizeMaximizedPane(nextPane);
    this.dockManager.activePane = nextPane;
  }
}

/**
 * @hidden
 */
class IgcDockManagerKeyboardService {
  constructor(service) {
    this.service = service;
  }
  handleKeydown(event) {
    if (this.service.dockManager.disableKeyboardNavigation) {
      return;
    }
    const activePane = this.service.dockManager.activePane;
    const ctrlOrMetaKey = Utils.isControlOrMetaPressed(event);
    const altKey = Utils.isAltPressed(event);
    const shiftKey = event.shiftKey;
    if (event.key === 'Control' || event.key === 'Meta' || event.key === 'OS') {
      this.service.cacheDocumentsOrder();
    }
    else if (event.key === 'Alt' || event.key === 'AltGraph') {
      this.service.cacheContentPanesOrder();
    }
    else if (event.key === 'F6' || (event.key.startsWith('Arrow') && !shiftKey && ctrlOrMetaKey)) {
      this.handleFocusPane(event);
      event.stopPropagation();
    }
    else if (event.key === 'F3' && altKey && activePane) {
      this.service.dockManager.focusElement();
      this.service.closePane(activePane);
      event.stopPropagation();
    }
    else if (event.key.startsWith('Arrow') && shiftKey && activePane) {
      this.service.dockManager.focusElement();
      this.handleDockPane(event);
      event.stopPropagation();
    }
    else if ((event.key === 'F7' || event.key === 'F8') && (altKey || ctrlOrMetaKey)) {
      this.setPaneNavigatorMeta(altKey, ctrlOrMetaKey, shiftKey);
      event.stopPropagation();
    }
    else {
      return;
    }
  }
  handleFocusPane(event) {
    const altKey = Utils.isAltPressed(event);
    const ctrlOrMetaKey = Utils.isControlOrMetaPressed(event);
    const shiftKey = event.shiftKey;
    const f6 = event.key === 'F6';
    const arrowLeft = event.key === 'ArrowLeft';
    const arrowRight = event.key === 'ArrowRight';
    if (altKey && shiftKey && f6) {
      this.service.focusPrevContentPane(false);
    }
    else if (altKey && f6) {
      this.service.focusNextContentPane(false);
    }
    else if ((ctrlOrMetaKey && shiftKey && f6) || (ctrlOrMetaKey && arrowLeft)) {
      this.service.focusPrevContentPane(true);
    }
    else if ((ctrlOrMetaKey && f6) || (ctrlOrMetaKey && arrowRight)) {
      this.service.focusNextContentPane(true);
    }
  }
  handleDockPane(event) {
    const key = event.key;
    const ctrlOrMetaKey = Utils.isControlOrMetaPressed(event);
    const shiftKey = event.shiftKey;
    if (ctrlOrMetaKey && shiftKey) {
      this.handleRootDockPane(key);
    }
    else if (shiftKey) {
      const activePane = this.service.dockManager.activePane;
      const activePaneParent = this.service.getParent(activePane);
      if (activePaneParent.type === locale.IgcDockManagerPaneType.tabGroupPane && activePaneParent.panes.length > 1) {
        this.handleInnerDockPane(key);
      }
    }
  }
  handleRootDockPane(key) {
    switch (key) {
      case 'ArrowUp':
        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.top);
        break;
      case 'ArrowDown':
        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.bottom);
        break;
      case 'ArrowLeft':
        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.left);
        break;
      case 'ArrowRight':
        this.service.rootDockPane(locale.IgcDockingIndicatorPosition.right);
        break;
    }
  }
  handleInnerDockPane(key) {
    switch (key) {
      case 'ArrowUp':
        this.service.dockPane(locale.IgcDockingIndicatorPosition.top);
        break;
      case 'ArrowDown':
        this.service.dockPane(locale.IgcDockingIndicatorPosition.bottom);
        break;
      case 'ArrowLeft':
        this.service.dockPane(locale.IgcDockingIndicatorPosition.left);
        break;
      case 'ArrowRight':
        this.service.dockPane(locale.IgcDockingIndicatorPosition.right);
        break;
    }
  }
  setPaneNavigatorMeta(altKey, ctrlOrMetaKey, shiftKey) {
    let initIndex = 0;
    const allItems = this.service.visibleContentPanes.concat(this.service.visibleDocuments);
    if (allItems.length > 0) {
      if (ctrlOrMetaKey) {
        if (this.service.visibleDocuments.length > 0) {
          initIndex = shiftKey ?
            this.service.visibleContentPanes.length + this.service.visibleDocuments.length - 1 :
            this.service.visibleContentPanes.length;
        }
        else {
          initIndex = shiftKey ? this.service.visibleContentPanes.length - 1 : 0;
        }
      }
      else if (altKey) {
        initIndex = shiftKey ?
          this.service.visibleContentPanes.length > 0 ?
            this.service.visibleContentPanes.length - 1 :
            this.service.visibleDocuments.length - 1 :
          0;
      }
      const metadata = {
        activePanes: this.service.visibleContentPanes,
        activeDocuments: this.service.visibleDocuments,
        initialIndex: initIndex,
        previousActivePaneIndex: allItems.indexOf(this.service.dockManager.activePane)
      };
      this.service.dockManager.activePane = null;
      this.service.dockManager.navigationPaneMeta = metadata;
    }
  }
}

const dockmanagerComponentCss = ":host{position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;height:100%;width:100%;overflow:hidden}.pane-container--vertical{-ms-flex-direction:column;flex-direction:column}.unpinned-tab-area{display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-direction:row;flex-direction:row;width:auto;height:var(--unpinned-tab-area-size)}.unpinned-tab-area--hidden{display:none}.flyout-pane{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;width:100%;height:100%;pointer-events:none;z-index:2}.flyout-pane igc-content-pane-component{-webkit-box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:0 12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--right{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flyout-pane--right igc-content-pane-component{-webkit-box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:-12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--bottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flyout-pane--bottom igc-content-pane-component{-webkit-box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));box-shadow:0 -12px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08))}.flyout-pane--left{-ms-flex-direction:row;flex-direction:row}.flyout-pane--left igc-content-pane-component{-webkit-box-shadow:12px 0px 8px var(--igc-flyout-shadow-color, rgba(0, 0, 0, 0.08));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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;pointer-events:none;z-index:10004}.content{overflow:auto;height:100%;-ms-flex-positive:1;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))}.maximized{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10002}igc-tab-header-component>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.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}";

let IgcDockManager = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.paneHeaderConnected = index.createEvent(this, "paneHeaderConnected", 7);
    this.paneHeaderDisconnected = index.createEvent(this, "paneHeaderDisconnected", 7);
    this.tabHeaderConnected = index.createEvent(this, "tabHeaderConnected", 7);
    this.tabHeaderDisconnected = index.createEvent(this, "tabHeaderDisconnected", 7);
    this.splitterResizeStart = index.createEvent(this, "splitterResizeStart", 7);
    this.splitterResizeEnd = index.createEvent(this, "splitterResizeEnd", 7);
    this.paneClose = index.createEvent(this, "paneClose", 7);
    this.panePinnedToggle = index.createEvent(this, "panePinnedToggle", 7);
    this.activePaneChanged = index.createEvent(this, "activePaneChanged", 7);
    this.paneDragStart = index.createEvent(this, "paneDragStart", 7);
    this.paneDragOver = index.createEvent(this, "paneDragOver", 7);
    this.paneDragEnd = index.createEvent(this, "paneDragEnd", 7);
    this.floatingPaneResizeMove = index.createEvent(this, "floatingPaneResizeMove", 7);
    this.floatingPaneResizeEnd = index.createEvent(this, "floatingPaneResizeEnd", 7);
    this.floatingPaneResizeStart = index.createEvent(this, "floatingPaneResizeStart", 7);
    this.service = new IgcDockManagerService(this);
    this.keyboardService = new IgcDockManagerKeyboardService(this.service);
    this.activePaneInternalSet = false;
    this.domObserver = new MutationObserver(this.mutationCallback.bind(this));
    this.shouldMovePane = false;
    this.scheduledCallbacks = [];
    this.floatingPaneZIndicesMap = new Map();
    this.allowMaximize = true;
    this.allowFloatingPanesResize = true;
    this.disableKeyboardNavigation = false;
    this.activePane = null;
    this.handleCustomContentFocusIn = (eventArgs) => {
      const parent = eventArgs.currentTarget;
      if (parent) {
        const contentPane = this.service.clientContentPanesMap.get(parent.slot);
        if (!contentPane) {
          return;
        }
        this.setActivePane(contentPane);
      }
    };
    this._isValidDrop = true;
    this.handleShadowRootFocusOut = () => {
      if (this.paneToFocus) {
        return;
      }
      const rootNode = this.getRootNode();
      requestAnimationFrame(() => {
        if (!this.element.shadowRoot.activeElement && rootNode.activeElement === this.element) {
          this.clearActivePane();
        }
      });
    };
  }
  flyoutPaneChanged(newValue) {
    if (newValue) {
      this.scheduleAfterRender(() => {
        this.setFocus(newValue);
      });
    }
  }
  layoutChanged() {
    this.service.processLayout();
  }
  draggedPaneChanged() {
    if (this.draggedPane) {
      const panes = this.draggedPane.type === locale.IgcDockManagerPaneType.contentPane ?
        [this.draggedPane] :
        this.service.getChildContentPanes(this.draggedPane);
      this.showDockingIndicators = panes.every(p => p.allowDocking !== false);
      this.documentOnlyDrag = panes.some(p => p.documentOnly);
    }
    else {
      this.showDockingIndicators = false;
      this.documentOnlyDrag = false;
    }
  }
  dropPositionChanged() {
    var _a, _b;
    this.paneDragMoved((_a = this.dropPosition) === null || _a === void 0 ? void 0 : _a.x, (_b = this.dropPosition) === null || _b === void 0 ? void 0 : _b.y);
  }
  activePaneChange(newValue, oldValue) {
    var _a;
    const args = { newPane: newValue, oldPane: oldValue };
    if (this.flyoutPane && newValue && newValue !== this.flyoutPane) {
      this.service.flyoutPane(this.flyoutPane);
    }
    this.activePaneChanged.emit(args);
    if (this.activePaneInternalSet) {
      this.activePaneInternalSet = false;
      return;
    }
    if (newValue) {
      if (newValue.isPinned === false) {
        requestAnimationFrame(() => {
          this.service.flyoutPane(newValue);
        });
        // return because setFocus will be called in flyoutPaneChanged
        this.paneToFocus = newValue;
        return;
      }
      else {
        const parent = this.service.getParent(newValue);
        if (parent.type === locale.IgcDockManagerPaneType.tabGroupPane && parent.panes.length > 1) {
          const visibleTabs = this.service.getVisibleContentPanes(parent);
          const tabHeaderElement = this.tabHeadersMap.get(newValue);
          const firstTabRect = this.tabHeadersMap
            .get(visibleTabs[0])
            .getBoundingClientRect();
          const headerRect = tabHeaderElement.getBoundingClientRect();
          // return if the selected index is changed because setFocus will be called in handleTabSelectedChanged
          if (headerRect.top !== firstTabRect.top) { // header is hidden
            this.service.selectHiddenTab(parent, newValue);
            this.paneToFocus = newValue;
            return;
          }
          else {
            const visibleIndex = visibleTabs.indexOf(newValue);
            const selectedIndex = (_a = parent.selectedIndex) !== null && _a !== void 0 ? _a : 0;
            if (selectedIndex !== visibleIndex) {
              parent.selectedIndex = visibleIndex;
              this.paneToFocus = newValue;
              return;
            }
          }
        }
      }
      this.scheduleAfterRender(() => {
        this.setFocus(newValue);
      });
    }
  }
  handleFocusOut(_event) {
    if (this.paneToFocus) {
      return;
    }
    const rootNode = this.getRootNode();
    requestAnimationFrame(() => {
      if (!this.element.contains(rootNode.activeElement)) {
        this.clearActivePane();
      }
    });
  }
  handleKeyDown(event) {
    this.keyboardService.handleKeydown(event);
  }
  async dropPane() {
    const docked = this.handlePaneDragEnd();
    return Promise.resolve(docked);
  }
  async removePane(pane) {
    this.service.removePane(pane);
  }
  connectedCallback() {
    this.element.shadowRoot.addEventListener('focusout', this.handleShadowRootFocusOut);
    this.domObserver.observe(this.element, { attributes: true, subtree: true, childList: true });
    const dockManagerChildren = Array.from(this.element.children);
    for (const htmlElem of dockManagerChildren) {
      const elem = htmlElem;
      elem === null || elem === void 0 ? void 0 : elem.addEventListener('focusin', this.handleCustomContentFocusIn);
    }
  }
  componentWillLoad() {
    this.contextMenuMeta = null;
    this.navigationPaneMeta = null;
    if (this.layout) {
      this.layoutChanged();
    }
    if (!this.resourceStrings) {
      const closestElement = this.element.closest('[lang]');
      const lang = closestElement ? closestElement.lang.toLowerCase() : 'en';
      this.resourceStrings = locale.resourceStringsMap.has(lang) ? locale.resourceStringsMap.get(lang) : locale.resourceStringsMap.get('en');
    }
  }
  componentDidRender() {
    while (this.scheduledCallbacks.length) {
      const callback = this.scheduledCallbacks.shift();
      callback();
    }
  }
  disconnectedCallback() {
    this.element.shadowRoot.removeEventListener('focusout', this.handleShadowRootFocusOut);
    this.removeCustomContentEventListeners();
    this.domObserver.disconnect();
  }
  focusElement() {
    this.element.focus();
  }
  getRootNode() {
    return this.element.getRootNode();
  }
  scheduleAfterRender(callback) {
    this.scheduledCallbacks.push(callback);
  }
  handleTabHeaderFocus(pane) {
    this.setActivePane(pane);
  }
  handleContentPaneFocus(pane) {
    this.setActivePane(pane);
  }
  handleUnpinnedHeaderFocus(pane) {
    // delay the setting of the active pane, in case the unpinned tab is clicked it should focus the content pane first
    requestAnimationFrame(() => {
      this.setActivePane(pane);
    });
  }
  setFocus(pane) {
    if (!pane) {
      return;
    }
    this.paneToFocus = null;
    let elemToFocus = this.contentPanesElementMap.get(pane);
    if (!elemToFocus) {
      elemToFocus = this.tabHeadersMap.get(pane);
    }
    if (!elemToFocus) {
      elemToFocus = this.unpinnedHeadersMap.get(pane);
    }
    if (!elemToFocus) {
      throw new Error('No matching pane!');
    }
    elemToFocus.focus();
  }
  setActivePane(pane) {
    if (this.activePane !== pane) {
      this.activePaneInternalSet = true;
      this.activePane = pane;
    }
  }
  removeCustomContentEventListeners() {
    const dockManagerChildren = Array.from(this.element.children);
    dockManagerChildren.forEach(child => {
      child.removeEventListener('focusin', this.handleCustomContentFocusIn);
    });
  }
  mutationCallback(records) {
    records.filter(rec => rec.type === 'childList').forEach(child => {
      child.addedNodes.forEach(c => {
        c.addEventListener('focusin', this.handleCustomContentFocusIn);
      });
      child.removedNodes.forEach(r => {
        r.removeEventListener('focusin', this.handleCustomContentFocusIn);
      });
    });
  }
  get isValidDrop() {
    return this._isValidDrop;
  }
  set isValidDrop(value) {
    if (this._isValidDrop !== value) {
      this._isValidDrop = value;
      document.body.style.cursor = this._isValidDrop ? 'default' : 'not-allowed';
    }
  }
  handleFlyoutSplitterResizeEnd(event) {
    this.service.resizeFlyoutPane(event.detail);
    this.splitterResizeEnd.emit();
  }
  handleSplitterResizeStart() {
    this.splitterResizeStart.emit();
  }
  handleSplitterResizeEnd(parentPane, pane, event) {
    const splitter = event.target;
    const splitPane = splitter.parentElement;
    const splitPaneChildren = Array.from(splitPane.children);
    const paneComponents = splitPaneChildren.filter(c => c.tagName.toLowerCase() !== 'igc-splitter-component');
    const sizeProperty = parentPane.orientation === locale.IgcSplitPaneOrientation.horizontal ? 'offsetWidth' : 'offsetHeight';
    const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
    const offsetPercentage = event.detail / sizeSum;
    this.service.resizePane(pane, offsetPercentage);
    this.splitterResizeEnd.emit();
  }
  clearActivePane() {
    if (this.activePane) {
      this.setActivePane(null);
    }
  }
  handlePinToggle(pane) {
    this.focusElement();
    this.service.togglePin(pane);
  }
  handlePaneClose(pane) {
    this.focusElement();
    this.service.closePane(pane);
  }
  handleFloatingPaneClose(pane) {
    this.focusElement();
    this.service.closeFloatingPane(pane);
  }
  handleMaximize(pane) {
    this.service.maximizePane(pane);
  }
  handleUnpinnedTabMouseDown(pane, event) {
    const target = event.currentTarget;
    const rootNode = this.getRootNode();
    requestAnimationFrame(() => {
      if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
        target.focus();
      }
      this.handlePaneFlyout(pane);
    });
  }
  handlePaneFlyout(pane) {
    this.service.flyoutPane(pane);
  }
  handleUnpinnedTabKeyDown(pane, event) {
    if (event.key === 'Enter' || event.key === ' ') {
      this.handlePaneFlyout(pane);
    }
  }
  handlePaneDragStart(pane, event) {
    let rect;
    if (pane.type === locale.IgcDockManagerPaneType.contentPane) {
      const header = event.target;
      const parent = this.service.getParent(pane);
      rect = (pane !== this.flyoutPane && parent.type === locale.IgcDockManagerPaneType.tabGroupPane) ?
        header.closest('igc-tabs-component').getBoundingClientRect() :
        header.parentElement.getBoundingClientRect();
    }
    const dragStarted = this.service.dragPaneStart(pane, rect, event.detail.clientX, event.detail.clientY);
    if (!dragStarted) {
      event.detail.cancel = true;
    }
  }
  handlePaneDragMove(event) {
    this.paneDragMoved(event.detail.clientX, event.detail.clientY, event);
  }
  paneDragMoved(clientX, clientY, event) {
    this.handleDropPositionChange(clientX, clientY, event === null || event === void 0 ? void 0 : event.target);
    const dragMoved = this.service.dragPaneMove(event === null || event === void 0 ? void 0 : event.detail.clientX, event === null || event === void 0 ? void 0 : event.detail.clientY);
    if (event && !dragMoved) {
      event.detail.cancel = true;
    }
  }
  handlePaneDragEnd() {
    const docked = this.service.dragPaneEnd();
    if (docked) {
      this.focusElement();
    }
    return docked;
  }
  handleTabHeaderDragStart(pane, event) {
    this.shouldMovePane = false;
    const path = this.service.getPanePath(pane);
    const rootParent = path[0];
    if (rootParent !== this.layout.rootPane &&
      path.some(p => p.type === locale.IgcDockManagerPaneType.documentHost)) {
      const childPanes = this.service.getChildContentPanes(rootParent);
      if (childPanes.length === 1) {
        // pane is a single document host tab in a floating pane
        this.shouldMovePane = true;
        return this.handlePaneDragStart(rootParent, event);
      }
    }
    this.focusElement();
    const dragStarted = this.service.dragTabStart(pane);
    if (!dragStarted) {
      event.detail.cancel = true;
    }
  }
  handleTabHeaderDragMove(pane, event) {
    if (this.shouldMovePane) {
      return this.handlePaneDragMove(event);
    }
    const header = event.target;
    const headerRect = header.getBoundingClientRect();
    const tabs = header.closest('igc-tabs-component');
    const tabsRect = tabs.getBoundingClientRect();
    const tabHeaders = Array.from(tabs.querySelectorAll('igc-tab-header-component'));
    const headerIndex = tabHeaders.indexOf(header);
    const prevHeaderRect = headerIndex > 0 ? tabHeaders[headerIndex - 1].getBoundingClientRect() : null;
    const nextHeaderRect = headerIndex < tabHeaders.length - 1 ? tabHeaders[headerIndex + 1].getBoundingClientRect() : null;
    const lastVisibleHeaderRect = tabHeaders.filter(th => th.getBoundingClientRect().top === headerRect.top).slice(-1)[0].getBoundingClientRect();
    const tabRectsInfo = {
      headerRect,
      prevHeaderRect,
      nextHeaderRect,
      lastVisibleHeaderRect,
      tabsRect
    };
    this.handleDropPositionChange(event.detail.clientX, event.detail.clientY, event === null || event === void 0 ? void 0 : event.target);
    const tabMoved = this.service.dragTabMove(pane, event.detail, tabRectsInfo);
    if (event && !tabMoved) {
      event.detail.cancel = true;
    }
  }
  handleTabHeaderDragEnd(pane) {
    const docked = this.handlePaneDragEnd();
    if (!docked) {
      this.activePane = pane;
    }
  }
  handleFloatingPaneResizeStart(pane, event) {
    const args = event.detail;
    const resizeStarted = this.service.resizeFloatingPaneStart(pane, args.resizerLocation);
    if (!resizeStarted) {
      args.dragMoveArgs.cancel = true;
    }
  }
  handleFloatingPaneResizeMove(pane, event) {
    this.service.resizeFloatingPane(pane, event.detail);
  }
  handleFloatingPaneResizeEnd(pane, event) {
    this.service.resizeFloatingPaneEnd(pane, event.detail.resizerLocation);
  }
  handleDropPositionChange(clientX, clientY, target) {
    const elements = clientX && clientY ?
      this.element.shadowRoot.elementsFromPoint(clientX, clientY) :
      null;
    if (!elements || !elements.length) {
      this.service.dockingIndicator = null;
      this.dropTargetPaneInfo = null;
      return;
    }
    const topElement = elements[0];
    let indicatorTarget = null;
    let dockingIndicatorElement = topElement.closest('igc-root-docking-indicator-component');
    if (dockingIndicatorElement) {
      this.service.dockingIndicator = {
        position: dockingIndicatorElement.position,
        isRoot: true
      };
    }
    if (!dockingIndicatorElement) {
      const joystickIcon = topElement.closest('igc-joystick-icon-component');
      if (joystickIcon && !joystickIcon.empty) {
        dockingIndicatorElement = joystickIcon;
        this.service.dockingIndicator = {
          position: joystickIcon.position,
          isRoot: false
        };
        const joystickIndicator = joystickIcon.closest('igc-joystick-indicator-component');
        indicatorTarget = joystickIndicator.dropTargetPaneInfo;
      }
    }
    if (dockingIndicatorElement &&
      (this.service.dockingIndicator.isRoot || this.dropTargetPaneInfo === indicatorTarget)) {
      this.service.dropTargetParentRect = this.getDropTargetParentRect();
      return;
    }
    this.service.dockingIndicator = null;
    if (target) {
      const draggedHeader = target;
      const draggedFloatingPane = draggedHeader.closest('igc-floating-pane-component');
      const topFloatingPane = elements.find(e => e.tagName.toLowerCase() === 'igc-floating-pane-component');
      if (topFloatingPane === draggedFloatingPane) {
        const index = elements.lastIndexOf(draggedFloatingPane);
        elements.splice(0, index + 1);
      }
    }
    let paneElement;
    for (const element of elements) {
      const tagName = element.tagName.toLowerCase();
      if (tagName === 'igc-content-pane-component' || tagName === 'igc-split-pane-component') {
        if (paneElement) {
          break;
        }
        paneElement = element;
      }
      else if (tagName === 'igc-tabs-component' || tagName === 'igc-document-host-component') {
        paneElement = element;
        break;
      }
      else if (tagName === 'igc-floating-pane-component') {
        break;
      }
    }
    if (paneElement) {
      const dropPane = this.panesElementMap.getByValue(paneElement);
      if ((!this.dropTargetPaneInfo || this.dropTargetPaneInfo.pane !== dropPane) && dropPane !== this.draggedPane) {
        const docHost = this.service.getDocHostParent(dropPane);
        const dropPaneRoot = this.service.getRootParent(dropPane);
        const floatingPaneWithoutDocHost = this.layout.floatingPanes.indexOf(dropPaneRoot) !== -1 &&
          !this.service.getChildDocHostRecursive(dropPaneRoot);
        if (!this.documentOnlyDrag
          || docHost
          || floatingPaneWithoutDocHost
          || dropPane.type === locale.IgcDockManagerPaneType.documentHost) {
          this.dropTargetPaneInfo = {
            pane: dropPane,
            targetRect: paneElement.getBoundingClientRect(),
            docHost,
            floatingPaneWithoutDocHost
          };
        }
        else {
          this.dropTargetPaneInfo = null;
        }
      }
    }
    else {
      this.dropTargetPaneInfo = null;
    }
  }
  getDropTargetParentRect() {
    const position = this.service.dockingIndicator.position;
    let rect;
    if (this.service.dockingIndicator.isRoot) {
      rect = this.dockedPanesContainer.getBoundingClientRect();
    }
    else {
      if (Utils.isDockingIndicatorOuter(position)) {
        const targetDocHostParent = this.service.getParent(this.dropTargetPaneInfo.docHost);
        const isIndicatorVertical = Utils.isDockingIndicatorVertical(position);
        const isSplitPaneVertical = Utils.isSplitPaneVertical(targetDocHostParent);
        const isSameSplitPane = ((isIndicatorVertical && isSplitPaneVertical) || (!isIndicatorVertical && !isSplitPaneVertical));
        const outerParent = isSameSplitPane ? targetDocHostParent : this.dropTargetPaneInfo.docHost.rootPane;
        const outerParentRect = this.panesElementMap.has(outerParent) ? this.panesElementMap.get(outerParent).getBoundingClientRect() : null;
        rect = outerParentRect;
      }
      else {
        const targetPaneParent = this.service.getParent(this.dropTargetPaneInfo.pane);
        const targetPaneParentRect = this.panesElementMap.has(targetPaneParent) ? this.panesElementMap.get(targetPaneParent).getBoundingClientRect() : null;
        rect = targetPaneParentRect;
      }
    }
    return rect;
  }
  handlePaneContentMouseDown(pane) {
    requestAnimationFrame(() => {
      const rootNode = this.getRootNode();
      if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
        this.setFocus(pane);
      }
    });
  }
  handlePaneHeaderMouseDown(pane) {
    const rootNode = this.getRootNode();
    requestAnimationFrame(() => {
      if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
        const paneElement = this.contentPanesElementMap.get(pane);
        paneElement.focus();
      }
      else {
        this.setActivePane(pane);
      }
    });
  }
  handleTabHeaderMouseDown(pane, event) {
    const target = event.currentTarget;
    const rootNode = this.getRootNode();
    requestAnimationFrame(() => {
      if (this.element === rootNode.activeElement || !this.element.contains(rootNode.activeElement)) {
        target.focus();
      }
      else {
        this.setActivePane(pane);
      }
    });
  }
  handleFloatingPaneMouseDown(pane) {
    this.service.bringFloatingPaneOnTop(pane);
  }
  handleTabIconClick(p, position, isFloating, event) {
    this.focusElement();
    if (!isFloating && position === IgcTabHeadersPosition.bottom) {
      const elem = event.detail.target;
      const parentButton = elem.closest('igc-button-component');
      this.contextMenuMeta = { target: parentButton, menuItems: this.service.createContextMenuItems(p) };
    }
    else {
      this.contextMenuMeta = null;
      this.service.closeTabPane(p);
    }
  }
  handleContextMenuClosed() {
    this.contextMenuMeta = null;
  }
  handleTabSelectedIndexChanged(pane, event) {
    pane.selectedIndex = event.detail;
  }
  handleHiddenTabSelected(pane, event) {
    this.activePane = this.service.getVisibleContentPanes(pane)[event.detail];
  }
  handleSelectedTabOutOfView(pane, event) {
    const cp = this.service.getVisibleContentPanes(pane)[event.detail];
    this.service.selectHiddenTab(pane, cp);
  }
  handleTabIconKeyDown(iconName, p, ev) {
    if (iconName === 'arrow_drop_down' && ev.detail.key === 'ArrowDown') {
      const targetElem = ev.detail.target;
      const parentButton = targetElem.closest('igc-button-component');
      this.contextMenuMeta = { target: parentButton, menuItems: this.service.createContextMenuItems(p) };
    }
  }
  handleTabSelectedChanged(pane, ev) {
    if (ev.detail && pane === this.paneToFocus) {
      this.setFocus(pane);
    }
  }
  emitPaneHeaderConnected(pane, event) {
    this.paneHeaderConnected.emit({
      pane,
      element: event.detail
    });
  }
  emitPaneHeaderDisconnected(pane, event) {
    this.paneHeaderDisconnected.emit({
      pane,
      element: event.detail
    });
  }
  emitTabHeaderConnected(pane, event) {
    this.tabHeaderConnected.emit({
      pane,
      element: event.detail
    });
  }
  emitTabHeaderDisconnected(pane, event) {
    this.tabHeaderDisconnected.emit({
      pane,
      element: event.detail
    });
  }
  resolveAllowMaximize(pane) {
    return this.service.resolveAllowMaximize(pane);
  }
  renderContentPane(pane, isFloating, isFlyout) {
    const parentPane = this.service.getParent(pane);
    let forceDrag = false;
    let isSingleFloatingContentPane = false;
    let floatingPane;
    if (isFloating) {
      floatingPane = this.service.getRootParent(pane);
      const hasHeader = this.service.hasFloatingPaneHeader(floatingPane);
      if (!hasHeader) {
        isSingleFloatingContentPane = true;
        if (this.service.forceDragPane === floatingPane) {
          this.service.forceDragPane = null;
          forceDrag = true;
        }
      }
    }
    const maximized = this.maximizedPane === pane ||
      (parentPane.type === locale.IgcDockManagerPaneType.tabGroupPane && this.maximizedPane === parentPane) ||
      isFloating && isSingleFloatingContentPane && floatingPane === this.maximizedPane;
    return (index.h("igc-content-pane-component", { key: pane.id, size: pane.size, isFlyout: isFlyout, unpinnedSize: pane.unpinnedSize, disabled: pane.disabled, isSingleFloating: isSingleFloatingContentPane, ref: el => {
        if (el) {
          this.panesElementMap.set(pane, el);
          this.contentPanesElementMap.set(pane, el);
        }
      }, class: {
        'maximized': this.maximizedPane === pane
      }, header: pane.header, onFocusin: this.handleContentPaneFocus.bind(this, pane) }, index.h("igc-pane-header-component", { slot: "header", pane: pane, isActive: pane === this.activePane, disabled: pane.disabled && !isSingleFloatingContentPane, pinned: this.service.getActualIsPinned(pane), allowMaximize: this.resolveAllowMaximize(pane), maximized: maximized, allowClose: this.service.getActualAllowClose(pane), allowPinning: pane.allowPinning !== false, isFloating: isFloating, forcedDrag: forceDrag, resourceStrings: this.resourceStrings, onPinToggle: this.handlePinToggle.bind(this, pane), onMaximize: this.handleMaximize.bind(this, pane), onDragMoved: this.handlePaneDragMove.bind(this), onDragStarted: this.handlePaneDragStart.bind(this, isSingleFloatingContentPane ? floatingPane : pane), onDragEnded: this.handlePaneDragEnd.bind(this), onClose: this.handlePaneClose.bind(this, pane), onElementConnected: this.emitPaneHeaderConnected.bind(this, pane), onElementDisconnected: this.emitPaneHeaderDisconnected.bind(this, pane), onMouseDown: this.handlePaneHeaderMouseDown.bind(this, pane) }, (isFloating && pane.floatingHeaderId) ? index.h("slot", { name: pane.floatingHeaderId }) :
      pane.headerId ? index.h("slot", { name: pane.headerId }) :
        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) }));
  }
  renderDocumentHost(docHost) {
    return (index.h("igc-document-host-component", { key: docHost.id, size: docHost.size, ref: el => {
        if (el) {
          this.panesElementMap.set(docHost, el);
        }
      } }, this.renderSplitPane(docHost.rootPane, false, true)));
  }
  renderTabGroup(pane, isFloating, isInDocumentHost) {
    let tabs = pane.type === locale.IgcDockManagerPaneType.tabGroupPane ? pane.panes : [pane];
    tabs = tabs.filter(t => this.service.isContentPaneVisible(t));
    const selectedIndex = pane.type === locale.IgcDockManagerPaneType.tabGroupPane && pane.selectedIndex ?
      pane.selectedIndex : 0;
    const position = isInDocumentHost ? IgcTabHeadersPosition.top : IgcTabHeadersPosition.bottom;
    const isSingleTab = tabs.length === 1 && position === IgcTabHeadersPosition.bottom;
    const allowEmpty = pane.type === locale.IgcDockManagerPaneType.tabGroupPane ? pane.allowEmpty : false;
    const allowMaximize = this.resolveAllowMaximize(pane);
    return (allowEmpty || tabs.length > 0) && (index.h("igc-tabs-component", { key: pane.id, size: pane.size, selectedIndex: selectedIndex, hasHeaders: !isSingleTab, onSelectedIndexChanged: this.handleTabSelectedIndexChanged.bind(this, pane), onHiddenTabSelected: this.handleHiddenTabSelected.bind(this, pane), onSelectedTabOutOfView: this.handleSelectedTabOutOfView.bind(this, pane), tabHeadersPosition: position, resourceStrings: this.resourceStrings, ref: el => {
        if (el) {
          this.panesElementMap.set(pane, el);
        }
      }, class: {
        'maximized': this.maximizedPane === pane,
      } }, isSingleTab ?
      this.renderTabPanel(tabs[0], false, isFloating) :
      tabs.map(p => {
        return [
          this.renderTabHeader(p, position, isFloating),
          this.renderTabPanel(p, isInDocumentHost, isFloating)
        ];
      }), position === IgcTabHeadersPosition.top && allowMaximize &&
      index.h("igc-button-component", { slot: "tabHeaderIcon", onClick: this.handleMaximize.bind(this, pane), onFocus: this.clearActivePane.bind(this) }, index.h("igc-icon-component", { name: this.maximizedPane === pane ? 'minimize' : 'maximize', "aria-label": this.maximizedPane ? this.resourceStrings.minimize : this.resourceStrings.maximize, title: this.maximizedPane ? this.resourceStrings.minimize : this.resourceStrings.maximize }))));
  }
  renderTabPanel(pane, isInDocumentHost, isFloating) {
    return (index.h("igc-tab-panel-component", { key: pane.id, disabled: pane.disabled, onMouseDown: isInDocumentHost ? this.handlePaneContentMouseDown.bind(this, pane) : null, onSelectedChanged: this.handleTabSelectedChanged.bind(this, pane) }, isInDocumentHost ?
      index.h("slot", { name: pane.contentId }) :
      this.renderContentPane(pane, isFloating, false)));
  }
  renderTabHeader(pane, position, isFloating) {
    let forceDrag = false;
    const allowClose = this.service.getActualAllowClose(pane);
    const allowPinning = pane.allowPinning !== false;
    const iconName = isFloating ?
      allowClose ? 'close' : null :
      position === IgcTabHeadersPosition.bottom ?
        allowClose || allowPinning ? 'arrow_drop_down' : null :
        allowClose ? 'close' : null;
    if (this.service.forceDragTabHeader === pane) {
      this.service.forceDragTabHeader = null;
      forceDrag = true;
    }
    return (index.h("igc-tab-header-component", { key: pane.id, slot: "tabHeader", isActive: pane === this.activePane, disabled: pane.disabled, header: pane.header, resourceStrings: this.resourceStrings, onDragStarted: this.handleTabHeaderDragStart.bind(this, pane), onDragMoved: this.handleTabHeaderDragMove.bind(this, pane), onDragEnded: this.handleTabHeaderDragEnd.bind(this, pane), onMouseDown: this.handleTabHeaderMouseDown.bind(this, pane), onIconKeyDown: this.handleTabIconKeyDown.bind(this, iconName, pane), position: position, onIconClicked: this.handleTabIconClick.bind(this, pane, position, isFloating), iconName: iconName, forcedDrag: forceDrag, onElementConnected: this.emitTabHeaderConnected.bind(this, pane), onElementDisconnected: this.emitTabHeaderDisconnected.bind(this, pane), ref: el => {
        if (el) {
          this.tabHeadersMap.set(pane, el);
        }
      }, onFocusin: this.handleTabHeaderFocus.bind(this, pane) }, pane.tabHeaderId ?
      index.h("slot", { name: pane.tabHeaderId }) :
      index.h("span", null, pane.header)));
  }
  renderSplitPane(splitPane, isFloating, isInDocumentHost) {
    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, ref: el => {
        if (el) {
          this.panesElementMap.set(splitPane, el);
        }
      } }, panes.map((p, i) => {
      let paneComponent;
      if (p.type === locale.IgcDockManagerPaneType.splitPane) {
        paneComponent = this.renderSplitPane(p, isFloating, isInDocumentHost);
      }
      else if (p.type === locale.IgcDockManagerPaneType.contentPane) {
        paneComponent = isInDocumentHost ?
          this.renderTabGroup(p, isFloating, true) :
          this.renderContentPane(p, isFloating, false);
      }
      else if (p.type === locale.IgcDockManagerPaneType.documentHost) {
        paneComponent = this.renderDocumentHost(p);
      }
      else if (p.type === locale.IgcDockManagerPaneType.tabGroupPane) {
        paneComponent = this.renderTabGroup(p, isFloating, isInDocumentHost);
      }
      return i > 0 ?
        [this.renderSplitter(splitPane, p), paneComponent] :
        paneComponent;
    })));
  }
  renderUnpinnedTabArea(location) {
    const panes = [];
    const isHorizontal = location === locale.IgcUnpinnedLocation.top || location === locale.IgcUnpinnedLocation.bottom;
    const isLeft = location === locale.IgcUnpinnedLocation.left;
    const isRight = location === locale.IgcUnpinnedLocation.right;
    const isBottom = location === locale.IgcUnpinnedLocation.bottom;
    this.service.unpinnedLocationMap.forEach((l, p) => {
      if (l === location && p.hidden !== true) {
        panes.push(p);
      }
    });
    const tabAreaClasses = {
      'unpinned-tab-area': true,
      'unpinned-tab-area--left': isLeft,
      'unpinned-tab-area--right': isRight,
      'unpinned-tab-area--bottom': isBottom,
      'unpinned-tab-area--horizontal': isHorizontal,
      'unpinned-tab-area--hidden': panes.length === 0
    };
    return (index.h("div", { class: 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) {
          this.unpinnedHeadersMap.set(p, el);
        }
      } }, p.unpinnedHeaderId ? index.h("slot", { name: p.unpinnedHeaderId }) : p.header)))));
  }
  renderFlyoutPane() {
    const location = this.service.unpinnedLocationMap.get(this.flyoutPane);
    const flyoutClasses = {
      'flyout-pane': true,
      'flyout-pane--right': location === locale.IgcUnpinnedLocation.right,
      'flyout-pane--bottom': location === locale.IgcUnpinnedLocation.bottom,
      'flyout-pane--left': location === locale.IgcUnpinnedLocation.left,
    };
    let splitPaneOrientation = locale.IgcSplitPaneOrientation.vertical;
    if (location === locale.IgcUnpinnedLocation.left || location === locale.IgcUnpinnedLocation.right) {
      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) })));
  }
  renderFloatingPanes() {
    var _a, _b;
    return (index.h("div", { class: "floating-panes", style: { position: this.maximizedPane ? 'absolute' : 'fixed' } }, (_b = (_a = this.layout) === null || _a === void 0 ? void 0 : _a.floatingPanes) === null || _b === void 0 ? void 0 : _b.map(p => {
      var _a;
      const panes = this.service.getSplitPaneVisibleChildren(p);
      if (panes.length === 0) {
        return null;
      }
      const hasHeader = this.service.hasFloatingPaneHeader(p);
      let forceDrag = false;
      if (p === this.service.forceDragPane && hasHeader) {
        this.service.forceDragPane = null;
        forceDrag = true;
      }
      const containsMaximizedPane = this.maximizedPane && this.service.getRootParent(this.maximizedPane) === p;
      return (index.h("igc-floating-pane-component", { key: p.id, style: { zIndex: this.floatingPaneZIndicesMap.get(p).toString() }, floatingLocation: p.floatingLocation ? p.floatingLocation : { x: 0, y: 0 }, floatingWidth: p.floatingWidth ? p.floatingWidth : IGC_DEFAULT_PANE_SIZE, floatingHeight: p.floatingHeight ? p.floatingHeight : IGC_DEFAULT_PANE_SIZE, hasHeader: hasHeader, onWndResizeStart: this.handleFloatingPaneResizeStart.bind(this, p), onWndResizeMove: this.handleFloatingPaneResizeMove.bind(this, p), onWndResizeEnd: this.handleFloatingPaneResizeEnd.bind(this, p), onMouseDown: this.handleFloatingPaneMouseDown.bind(this, p), class: {
          'maximized': this.maximizedPane === p
        }, maximized: this.maximizedPane === p || containsMaximizedPane, allowResize: (_a = p.floatingResizable) !== null && _a !== void 0 ? _a : this.allowFloatingPanesResize }, hasHeader ?
        index.h("igc-pane-header-component", { slot: "header", isFloating: true, isFloatingPaneHeader: true, forcedDrag: forceDrag, allowMaximize: this.resolveAllowMaximize(p), maximized: this.maximizedPane === p, resourceStrings: this.resourceStrings, onDragStarted: this.handlePaneDragStart.bind(this, p), onDragMoved: this.handlePaneDragMove.bind(this), onDragEnded: this.handlePaneDragEnd.bind(this), onClose: this.handleFloatingPaneClose.bind(this, p), onMaximize: this.handleMaximize.bind(this, p), onFocusin: (this.clearActivePane.bind(this)) }) : null, this.renderSplitPane(p, true, false)));
    })));
  }
  renderRootDockingIndicator(position) {
    return (index.h("igc-root-docking-indicator-component", { position: position }));
  }
  renderDockingIndicators() {
    return (index.h("div", { class: "docking-indicators-container", style: {
        display: this.showDockingIndicators ? 'flex' : 'none'
      } }, !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.top), index.h("div", { style: {
        flexGrow: '1',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between'
      } }, !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.left), !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.right)), !this.documentOnlyDrag && this.renderRootDockingIndicator(locale.IgcDockingIndicatorPosition.bottom), this.dropTargetPaneInfo &&
      index.h("igc-joystick-indicator-component", { dropTargetPaneInfo: this.dropTargetPaneInfo, documentOnlyDrag: this.documentOnlyDrag })));
  }
  renderContextMenu() {
    return this.contextMenuMeta && (index.h("igc-context-menu-component", { onMenuClosed: this.handleContextMenuClosed.bind(this), orientation: IgcContextMenuOrientation.bottom, items: this.contextMenuMeta.menuItems, target: this.contextMenuMeta.target }));
  }
  renderDropShadow() {
    var _a, _b, _c, _d;
    return this.dropShadowRect && (index.h("div", { part: "docking-preview", class: "drop-shadow", style: {
        top: `${(_a = this.dropShadowRect) === null || _a === void 0 ? void 0 : _a.y}px`,
        left: `${(_b = this.dropShadowRect) === null || _b === void 0 ? void 0 : _b.x}px`,
        width: `${(_c = this.dropShadowRect) === null || _c === void 0 ? void 0 : _c.width}px`,
        height: `${(_d = this.dropShadowRect) === null || _d === void 0 ? void 0 : _d.height}px`,
      } }));
  }
  handlePaneNavigatorClosed(ev) {
    this.service.normalizeMaximizedPane(ev.detail);
    if (ev.detail && this.activePane !== ev.detail) {
      this.activePane = ev.detail;
    }
    this.navigationPaneMeta = null;
  }
  renderPaneNavigator() {
    return this.navigationPaneMeta &&
      index.h("igc-pane-navigator-component", { onClosed: this.handlePaneNavigatorClosed.bind(this), activePanes: this.navigationPaneMeta.activePanes, activeDocuments: this.navigationPaneMeta.activeDocuments, selectedIndex: this.navigationPaneMeta.initialIndex, previousActivePaneIndex: this.navigationPaneMeta.previousActivePaneIndex, resourceStrings: this.resourceStrings });
  }
  render() {
    var _a;
    this.panesElementMap = new TwoWayMap();
    this.tabHeadersMap = new Map();
    this.unpinnedHeadersMap = new Map();
    this.contentPanesElementMap = new Map();
    return (index.h(index.Host, { tabindex: "0", role: "group" }, 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(), this.renderDropShadow()));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "flyoutPane": ["flyoutPaneChanged"],
    "layout": ["layoutChanged"],
    "draggedPane": ["draggedPaneChanged"],
    "dropPosition": ["dropPositionChanged"],
    "activePane": ["activePaneChange"]
  }; }
};
IgcDockManager.style = dockmanagerComponentCss;

const documentHostComponentCss = ".sc-igc-document-host-component-h{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0px;min-height:0px}";

let IgcDocumentHostComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
    return (index.h(index.Host, { role: "group", style: {
        flex: `${size} 1 ${size}px`
      } }));
  }
};
IgcDocumentHostComponent.style = documentHostComponentCss;

const floatingPaneComponentCss = ":host{--min-pane-size:30px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:visible;min-width:var(--min-pane-size);min-height:var(--min-pane-size);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--igc-dock-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9));pointer-events:all;border:1px solid var(--igc-floating-pane-border-color, var(--igc-border-color, #F3F5F7));-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.24);box-shadow:0 4px 16px rgba(0, 0, 0, 0.24);z-index:0}";

let IgcFloatingPaneComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.wndResizeStart = index.createEvent(this, "wndResizeStart", 7);
    this.wndResizeMove = index.createEvent(this, "wndResizeMove", 7);
    this.wndResizeEnd = index.createEvent(this, "wndResizeEnd", 7);
    this.allowResize = true;
    this.floatingMinHeight = IGC_DEFAULT_PANE_SIZE;
    this.floatingMinWidth = IGC_DEFAULT_PANE_SIZE;
  }
  handleResizerMove(event) {
    const el = event.target;
    this.wndResizeMove.emit({
      dragMoveArgs: event.detail,
      resizerLocation: el.orientation
    });
  }
  handleResizeStart(event) {
    const el = event.target;
    const args = {
      dragMoveArgs: Object.assign(Object.assign({}, event.detail), { offsetX: 0, offsetY: 0 }),
      resizerLocation: el.orientation
    };
    this.wndResizeStart.emit(args);
    if (args.dragMoveArgs.cancel) {
      event.detail.cancel = true;
    }
  }
  handleResizeEnd(event) {
    const el = event.target;
    this.wndResizeEnd.emit({
      dragMoveArgs: event.detail,
      resizerLocation: el.orientation
    });
  }
  render() {
    const styles = {
      position: 'absolute',
      left: this.floatingLocation.x + 'px',
      top: this.floatingLocation.y + 'px',
      minWidth: this.floatingMinWidth + 'px',
      minHeight: this.floatingMinHeight + 'px',
      width: this.floatingWidth + 'px',
      height: this.floatingHeight + 'px',
    };
    return (index.h(index.Host, { style: this.maximized ? {} : styles, role: "dialog", "aria-label": "dialog", part: "floating-window" }, this.allowResize &&
      index.h(index.Fragment, null, index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.left, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.top, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.right, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.bottom, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) })), index.h("slot", { name: "header" }), index.h("slot", null), this.allowResize &&
      index.h(index.Fragment, null, index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.topRight, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.topLeft, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.bottomRight, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }), index.h("igc-resizer-component", { orientation: locale.IgcResizerLocation.bottomLeft, onResizerDragStart: this.handleResizeStart.bind(this), onResizerMoved: this.handleResizerMove.bind(this), onResizerDragEnd: this.handleResizeEnd.bind(this) }))));
  }
  get elem() { return index.getElement(this); }
};
IgcFloatingPaneComponent.style = floatingPaneComponentCss;

/**
 * @hidden
 */
const icons = {
  close: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>`,
  pin: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M15.18 2.25l7.07 7.07-2.83-.01-3.54 3.55.01 4.24-3.53-3.54-5.66 5.66H5.28V17.8l5.66-5.66L7.4 8.61l4.24.01 3.55-3.54-.01-2.83z"/>
    </svg>`,
  unpin: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="none" d="M0 0h24v25H0V0z"/>
      <path d="M11.84 14.08L6.7 19.22H5.28V17.8l5.14-5.14L2 4.26 3.29 3l18 18L20 22.21zm4-.49l-5-5h.73l3.55-3.54v-2.8l7.07 7.07h-2.77l-3.54 3.54z" />
    </svg>`,
  first_page: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
      <path fill="none" d="M24 24H0V0h24v24z"/>
    </svg>`,
  chevron_left: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
      <path d="M0 0h24v24H0z" fill="none"/>
    </svg>`,
  flip: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/>
    </svg>`,
  crop_square: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/>
    </svg>
    `,
  arrow_drop_down: `<svg class="icon icon-arrow_drop_down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M7 10l5 5 5-5z"></path>
    </svg>`,
  maximize: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none"/>
        <path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/>
    </svg>`,
  minimize: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0V0z" fill="none"/>
      <path d="M6 19h12v2H6z"/>
    </svg>`,
  more: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
    </svg>`
};

const iconComponentCss = ".sc-igc-icon-component-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:17px;height:17px;fill:currentColor}";

let IgcIconComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, { innerHTML: icons[this.name] }));
  }
};
IgcIconComponent.style = iconComponentCss;

const joystickIconComponentCss = ".sc-igc-joystick-icon-component-h{display:-ms-flexbox;display:flex;width:30px;height:30px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--igc-joystick-icon-color, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-joystick-background, var(--igc-accent-color, #fff));border:1px solid var(--igc-joystick-border-color, var(--igc-accent-color, #fff))}.inner-top.sc-igc-joystick-icon-component-h{border-bottom:none}.inner-start.sc-igc-joystick-icon-component-h{border-right:none}.inner-end.sc-igc-joystick-icon-component-h{border-left:none}.inner-bottom.sc-igc-joystick-icon-component-h{border-top:none}.inner-center.sc-igc-joystick-icon-component-h{border:1px solid var(--igc-joystick-background, var(--igc-accent-color, #fff))}.sc-igc-joystick-icon-component-h:hover{background:var(--igc-joystick-background-active, var(--igc-accent-color, #fff));color:var(--igc-joystick-icon-color-active, #000)}";

let IgcJoystickIconComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  resolveIconDivClass() {
    let positionClass;
    switch (this.position) {
      case locale.IgcDockingIndicatorPosition.outerTop:
        positionClass = 'outer-top';
        break;
      case locale.IgcDockingIndicatorPosition.outerBottom:
        positionClass = 'outer-bottom';
        break;
      case locale.IgcDockingIndicatorPosition.outerLeft:
        positionClass = 'outer-start';
        break;
      case locale.IgcDockingIndicatorPosition.outerRight:
        positionClass = 'outer-end';
        break;
      case locale.IgcDockingIndicatorPosition.top:
        positionClass = 'inner-top';
        break;
      case locale.IgcDockingIndicatorPosition.bottom:
        positionClass = 'inner-bottom';
        break;
      case locale.IgcDockingIndicatorPosition.left:
        positionClass = 'inner-start';
        break;
      case locale.IgcDockingIndicatorPosition.right:
        positionClass = 'inner-end';
        break;
      case locale.IgcDockingIndicatorPosition.center:
        positionClass = 'inner-center';
        break;
    }
    const classes = {};
    if (positionClass) {
      classes[positionClass] = true;
    }
    return classes;
  }
  resolveMargin() {
    switch (this.position) {
      case locale.IgcDockingIndicatorPosition.outerTop:
        return '0px 0px 10px 0px';
      case locale.IgcDockingIndicatorPosition.outerRight:
        return '0px 0px 0px 10px';
      case locale.IgcDockingIndicatorPosition.outerLeft:
        return '0px 10px 0px 0px';
      case locale.IgcDockingIndicatorPosition.outerBottom:
        return '10px 0px 0px 0px';
      default:
        return '0px';
    }
  }
  resolveGridRow() {
    switch (this.position) {
      case locale.IgcDockingIndicatorPosition.outerTop:
        return '1';
      case locale.IgcDockingIndicatorPosition.top:
        return this.isDocHost ? '2' : '1';
      case locale.IgcDockingIndicatorPosition.center:
        return this.isDocHost ? '3' : '2';
      case locale.IgcDockingIndicatorPosition.outerRight:
      case locale.IgcDockingIndicatorPosition.outerLeft:
        return '3';
      case locale.IgcDockingIndicatorPosition.right:
      case locale.IgcDockingIndicatorPosition.left:
        return this.isDocHost ? '3' : '2';
      case locale.IgcDockingIndicatorPosition.outerBottom:
        return '5';
      case locale.IgcDockingIndicatorPosition.bottom:
        return this.isDocHost ? '4' : '3';
    }
  }
  resolveGridColumn() {
    switch (this.position) {
      case locale.IgcDockingIndicatorPosition.outerLeft:
        return '1';
      case locale.IgcDockingIndicatorPosition.left:
        return this.isDocHost ? '2' : '1';
      case locale.IgcDockingIndicatorPosition.center:
        return this.isDocHost ? '3' : '2';
      case locale.IgcDockingIndicatorPosition.outerTop:
      case locale.IgcDockingIndicatorPosition.outerBottom:
        return '3';
      case locale.IgcDockingIndicatorPosition.top:
      case locale.IgcDockingIndicatorPosition.bottom:
        return this.isDocHost ? '3' : '2';
      case locale.IgcDockingIndicatorPosition.outerRight:
        return '5';
      case locale.IgcDockingIndicatorPosition.right:
        return this.isDocHost ? '4' : '3';
    }
  }
  renderIcon() {
    const position = this.position;
    if (position === locale.IgcDockingIndicatorPosition.outerLeft ||
      (position === locale.IgcDockingIndicatorPosition.left && !this.isDocHost)) {
      return index.h("igc-icon-component", { name: "chevron_left" });
    }
    else if (position === locale.IgcDockingIndicatorPosition.left) {
      return (index.h("igc-icon-component", { name: "flip", style: { transform: 'rotate(180deg)' } }));
    }
    else if (position === locale.IgcDockingIndicatorPosition.outerTop ||
      (position === locale.IgcDockingIndicatorPosition.top && !this.isDocHost)) {
      return (index.h("igc-icon-component", { name: "chevron_left", style: { transform: 'rotate(90deg)' } }));
    }
    else if (position === locale.IgcDockingIndicatorPosition.top) {
      return (index.h("igc-icon-component", { name: "flip", style: { transform: 'rotate(270deg)' } }));
    }
    else if (position === locale.IgcDockingIndicatorPosition.center) {
      return index.h("igc-icon-component", { name: "crop_square" });
    }
    else if (position === locale.IgcDockingIndicatorPosition.outerRight ||
      (position === locale.IgcDockingIndicatorPosition.right && !this.isDocHost)) {
      return (index.h("igc-icon-component", { name: "chevron_left", style: { transform: 'rotate(180deg)' } }));
    }
    else if (position === locale.IgcDockingIndicatorPosition.right) {
      return index.h("igc-icon-component", { name: "flip" });
    }
    else if (position === locale.IgcDockingIndicatorPosition.outerBottom ||
      (position === locale.IgcDockingIndicatorPosition.bottom && !this.isDocHost)) {
      return (index.h("igc-icon-component", { name: "chevron_left", style: { transform: 'rotate(270deg)' } }));
    }
    else if (position === locale.IgcDockingIndicatorPosition.bottom) {
      return (index.h("igc-icon-component", { name: "flip", style: { transform: 'rotate(90deg)' } }));
    }
  }
  render() {
    return (index.h(index.Host, { part: "docking-indicator", class: this.resolveIconDivClass(), style: {
        gridRow: this.resolveGridRow(),
        gridColumn: this.resolveGridColumn(),
        margin: this.resolveMargin()
      } }, !this.empty && this.renderIcon()));
  }
};
IgcJoystickIconComponent.style = joystickIconComponentCss;

const joystickIndicatorComponentCss = ".sc-igc-joystick-indicator-component-h{position:fixed;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.indicators-container.sc-igc-joystick-indicator-component{display:grid;grid-template-columns:repeat(3, auto);grid-template-rows:repeat(3, auto);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:all}.indicators-container--doc-host.sc-igc-joystick-indicator-component{grid-template-columns:repeat(5, auto);grid-template-rows:repeat(5, auto)}";

let IgcJoystickIndicatorComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  isEmptyCenter(position) {
    return this.documentOnlyDrag
      && position === locale.IgcDockingIndicatorPosition.center
      && this.dropTargetPaneInfo.floatingPaneWithoutDocHost;
  }
  isEmptyEdge(position) {
    return this.documentOnlyDrag
      && position !== locale.IgcDockingIndicatorPosition.center
      && this.dropTargetPaneInfo.pane.type === locale.IgcDockManagerPaneType.documentHost;
  }
  renderIndicator(position) {
    return (index.h("igc-joystick-icon-component", { isDocHost: this.isDocHost, position: position, empty: this.isEmptyCenter(position) || this.isEmptyEdge(position) }));
  }
  render() {
    this.isDocHost = !!this.dropTargetPaneInfo.docHost;
    return (index.h(index.Host, { style: {
        top: `${this.dropTargetPaneInfo.targetRect.y}px`,
        left: `${this.dropTargetPaneInfo.targetRect.x}px`,
        width: `${this.dropTargetPaneInfo.targetRect.width}px`,
        height: `${this.dropTargetPaneInfo.targetRect.height}px`,
      } }, index.h("div", { class: {
        'indicators-container': true,
        'indicators-container--doc-host': this.isDocHost
      } }, this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerLeft), this.renderIndicator(locale.IgcDockingIndicatorPosition.left), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerTop), this.renderIndicator(locale.IgcDockingIndicatorPosition.top), this.renderIndicator(locale.IgcDockingIndicatorPosition.center), this.renderIndicator(locale.IgcDockingIndicatorPosition.right), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerRight), this.renderIndicator(locale.IgcDockingIndicatorPosition.bottom), this.isDocHost && !this.documentOnlyDrag && this.renderIndicator(locale.IgcDockingIndicatorPosition.outerBottom))));
  }
};
IgcJoystickIndicatorComponent.style = joystickIndicatorComponentCss;

/**
 * @hidden
 */
class IgcDragService {
  constructor(element) {
    this.element = element;
    this.dragTolerance = 5;
    this.dragEdgeTolerance = 0;
    this.handleWheel = (event) => {
      event.preventDefault();
    };
    this.handleMouseDown = (event) => {
      // TODO Not sure if we need this
      // this.element.focus();
      // event.preventDefault();
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.lastX = this.startX;
      this.lastY = this.startY;
      this.subscribeDragEvents();
    };
    this.handleMouseMove = (event) => {
      event.preventDefault();
      const maxHeight = document.documentElement.clientHeight;
      const maxWidth = document.documentElement.clientWidth;
      if (event.clientX < this.dragEdgeTolerance) {
        this.currentX = this.dragEdgeTolerance;
      }
      else if (event.clientX > maxWidth - this.dragEdgeTolerance) {
        this.currentX = maxWidth - this.dragEdgeTolerance;
      }
      else {
        this.currentX = event.clientX;
      }
      if (event.clientY < this.dragEdgeTolerance) {
        this.currentY = this.dragEdgeTolerance;
      }
      else if (event.clientY > maxHeight - this.dragEdgeTolerance) {
        this.currentY = maxHeight - this.dragEdgeTolerance;
      }
      else {
        this.currentY = event.clientY;
      }
      if (!this.dragStarted) {
        if (this.forcedDrag) {
          this.forcedDrag = false;
          this.startX = this.currentX;
          this.startY = this.currentY;
          this.lastX = this.startX;
          this.lastY = this.startY;
          this.triggerDragStart();
        }
        else {
          const offsetX = this.currentX - this.lastX;
          const offsetY = this.currentY - this.lastY;
          if (Math.abs(offsetX) > this.dragTolerance || Math.abs(offsetY) > this.dragTolerance) {
            this.triggerDragStart();
          }
        }
      }
      if (!this.dragStarted) {
        return;
      }
      if (this.dragMove) {
        const args = {
          offsetX: this.currentX - this.lastX,
          offsetY: this.currentY - this.lastY,
          totalOffsetX: this.currentX - this.startX,
          totalOffsetY: this.currentY - this.startY,
          clientX: this.currentX,
          clientY: this.currentY
        };
        this.dragMove(args);
        if (args.cancel) {
          this.unsubscribeDragEvents();
        }
      }
      this.lastX = this.currentX;
      this.lastY = this.currentY;
    };
    this.handleMouseUp = (event) => {
      this.unsubscribeDragEvents();
      if (this.dragStarted && this.dragEnd) {
        this.dragEnd({
          offsetX: this.currentX - this.startX,
          offsetY: this.currentY - this.startY,
          clientX: event.clientX,
          clientY: event.clientY
        });
      }
    };
    this.element.addEventListener('mousedown', this.handleMouseDown, false);
  }
  triggerDragStart() {
    if (this.dragStart) {
      const args = {
        clientX: this.startX,
        clientY: this.startY
      };
      this.dragStart(args);
      if (args.cancel) {
        this.unsubscribeDragEvents();
        return;
      }
    }
    this.dragStarted = true;
  }
  subscribeDragEvents() {
    this.dragStarted = false;
    document.documentElement.addEventListener('mousemove', this.handleMouseMove, false);
    document.documentElement.addEventListener('mouseup', this.handleMouseUp, false);
    document.documentElement.addEventListener('wheel', this.handleWheel, { passive: false });
  }
  unsubscribeDragEvents() {
    document.documentElement.removeEventListener('mousemove', this.handleMouseMove, false);
    document.documentElement.removeEventListener('mouseup', this.handleMouseUp, false);
    document.documentElement.removeEventListener('wheel', this.handleWheel);
  }
  destroy() {
    this.element.removeEventListener('mousedown', this.handleMouseDown, false);
    this.unsubscribeDragEvents();
    this.element = null;
    this.dragStart = null;
    this.dragEnd = null;
    this.dragMove = null;
  }
  forceDragging() {
    this.forcedDrag = true;
    this.subscribeDragEvents();
  }
}

const paneHeaderComponentCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:4px 8px;font-size:14px;font-weight:400;color:var(--igc-pane-header-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pane-header-background, var(--igc-background-color, #E5E7E9));min-height:40px}:host igc-icon-component svg{width:17px;height:17px}:host([part~=window]){border-bottom:1px solid var(--igc-border-color, #F3F5F7);min-height:auto}.header-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1 1 100%;flex:1 1 100%;line-height:2.3}.header-actions{display:-ms-flexbox;display:flex}.header-actions igc-button-component+igc-button-component{margin-left:4px}:host([part~=active]){-webkit-box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue);box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue);color:var(--igc-active-color, cornflowerblue)}:host([part~=disabled]){pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcPaneHeaderComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.pinToggle = index.createEvent(this, "pinToggle", 7);
    this.maximize = index.createEvent(this, "maximize", 7);
    this.close = index.createEvent(this, "close", 7);
    this.dragStarted = index.createEvent(this, "dragStarted", 7);
    this.dragEnded = index.createEvent(this, "dragEnded", 7);
    this.dragMoved = index.createEvent(this, "dragMoved", 7);
    this.elementConnected = index.createEvent(this, "elementConnected", 7);
    this.elementDisconnected = index.createEvent(this, "elementDisconnected", 7);
    this.allowClose = true;
    this.allowMaximize = true;
    this.allowPinning = true;
    this.disabled = false;
    this.pinButtonClick = () => {
      this.pinToggle.emit();
    };
    this.maximizeButtonClick = () => {
      this.maximize.emit();
    };
    this.closeButtonClick = () => {
      this.close.emit();
    };
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragEdgeTolerance = 3;
    this.dragService.dragStart = args => {
      this.dragStarted.emit(args);
    };
    this.dragService.dragEnd = args => {
      this.dragEnded.emit(args);
    };
    this.dragService.dragMove = args => {
      this.dragMoved.emit(args);
    };
    this.forceDragging();
    this.elementConnected.emit(this.element);
  }
  disconnectedCallback() {
    if (this.dragService) {
      this.dragService.destroy();
    }
    this.elementDisconnected.emit(this.element);
  }
  forcedDragChanged() {
    this.forceDragging();
  }
  forceDragging() {
    if (this.forcedDrag) {
      this.dragService.forceDragging();
    }
  }
  render() {
    const commonParts = {
      active: this.isActive,
      disabled: this.disabled,
      floating: this.isFloating,
      window: this.isFloatingPaneHeader,
    };
    const paneHeaderParts = Utils.partNameMap(Object.assign({ 'pane-header': true }, commonParts));
    const paneHeaderContentParts = Utils.partNameMap(Object.assign({ 'pane-header-content': true }, commonParts));
    const paneHeaderActionsParts = Utils.partNameMap(Object.assign({ 'pane-header-actions': true }, commonParts));
    const exportParts = Utils.partNameMap(Object.assign({ 'pane-header-actions': true, 'pane-header-content': true }, commonParts), ',');
    return (index.h(index.Host, { part: paneHeaderParts, exportparts: exportParts }, index.h("div", { part: paneHeaderContentParts, class: "header-text" }, index.h("slot", null)), index.h("div", { part: paneHeaderActionsParts, class: "header-actions" }, this.allowPinning &&
      index.h("igc-button-component", { onClick: this.pinButtonClick, style: { display: this.isFloating ? 'none' : 'flex' } }, index.h("igc-icon-component", { name: this.pinned ? 'unpin' : 'pin', "aria-label": this.pinned ? this.resourceStrings.unpin : this.resourceStrings.pin, title: this.pinned ? this.resourceStrings.unpin : this.resourceStrings.pin })), this.allowMaximize &&
      index.h("igc-button-component", { name: "maximize", onClick: this.maximizeButtonClick }, index.h("igc-icon-component", { name: this.maximized ? 'minimize' : 'maximize', "aria-label": this.maximized ? this.resourceStrings.minimize : this.resourceStrings.maximize, title: this.maximized ? this.resourceStrings.minimize : this.resourceStrings.maximize })), this.allowClose &&
      index.h("igc-button-component", { onClick: this.closeButtonClick }, index.h("igc-icon-component", { name: "close", "aria-label": this.resourceStrings.close, title: this.resourceStrings.close })))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "forcedDrag": ["forcedDragChanged"]
  }; }
};
IgcPaneHeaderComponent.style = paneHeaderComponentCss;

const paneNavigatorComponentCss = ":host,:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;z-index:10002}.pane-navigator{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));width:350px;height:auto;max-height:336px;overflow:hidden;line-height:24px;z-index:10002;-webkit-box-shadow:0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.26);box-shadow:0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.26)}.pane-navigator:focus{outline-style:none}header{background:var(--igc-background-color, #E5E7E9);min-height:40px;height:40px}header h3{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:unset;font-size:0.875em;padding:8px}.body{display:-ms-flexbox;display:flex;overflow:auto}.group{display:-ms-flexbox;display:flex;-ms-flex:1 0 50%;flex:1 0 50%;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:16px}.title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:-webkit-sticky;position:sticky;top:0;background:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7));font-size:0.875em;margin:unset;-ms-flex-negative:0;flex-shrink:0}.items{overflow:auto;scrollbar-width:none}.items::-webkit-scrollbar{display:none}[part~=item]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;font-size:16px;padding:8px 0}[part~=item][part~=selected]{color:var(--igc-active-color, cornflowerblue)}[part~=item][part~=disabled]{pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcPaneNavigatorComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.closed = index.createEvent(this, "closed", 7);
  }
  scrollItemToView() {
    const selectedItem = this.allItemsElement[this.selectedIndex];
    const selectedItemRect = selectedItem.getBoundingClientRect();
    const itemsContainerRect = selectedItem.parentElement.getBoundingClientRect();
    if (selectedItemRect.top < itemsContainerRect.top) {
      this.allItemsElement[this.selectedIndex].parentElement.scrollTop -= itemsContainerRect.top - selectedItemRect.top;
    }
    if (selectedItemRect.bottom > itemsContainerRect.bottom) {
      this.allItemsElement[this.selectedIndex].parentElement.scrollTop += selectedItemRect.bottom - itemsContainerRect.bottom;
    }
  }
  handleKeyUp(event) {
    if (event.code === 'AltLeft' || event.code === 'AltRight' || event.key === 'Control' || event.key === 'OS' || event.key === 'Meta') {
      this.closed.emit(this.allItems[this.selectedIndex]);
    }
  }
  handleKeydown(event) {
    event.stopPropagation();
    const isShiftPressed = event.shiftKey;
    let index;
    if (Utils.isControlOrMetaPressed(event) && !event.altKey) {
      switch (event.key) {
        case 'ArrowUp':
          this.decreaseSelectedIndex();
          break;
        case 'ArrowDown':
          this.increaseSelectedIndex();
          break;
        case 'ArrowRight':
        case 'ArrowLeft': {
          if (this.activePanes.length === 0 || this.activeDocuments.length === 0) {
            return;
          }
          if (this.selectedIndex >= 0 && this.selectedIndex < this.activePanes.length) {
            index = this.selectedIndex + this.activePanes.length;
            this.navigateToIndex(index >= this.allItems.length ? this.allItems.length - 1 : index, 'next');
          }
          else if (this.selectedIndex >= this.activePanes.length && this.selectedIndex < this.allItems.length) {
            index = this.selectedIndex - this.activePanes.length;
            this.navigateToIndex(index > this.activePanes.length - 1 ? this.activePanes.length - 1 : index, 'previous');
          }
        }
      }
    }
    if (event.key === 'F7' || event.key === 'F8') {
      if (isShiftPressed) {
        this.decreaseSelectedIndex();
      }
      else {
        this.increaseSelectedIndex();
      }
    }
    this.scrollItemToView();
  }
  navigateToIndex(index, direction) {
    if (index === -1) {
      index = this.allItems.length - 1;
    }
    else if (index === this.allItems.length) {
      index = 0;
    }
    let counter = 0;
    while (this.allItems[index].disabled && counter <= this.allItems.length) {
      counter++;
      index = index + (direction === 'next' ? 1 : -1);
      if (index === -1) {
        index = this.allItems.length - 1;
      }
      else if (index === this.allItems.length) {
        index = 0;
      }
    }
    this.selectedIndex = index;
  }
  increaseSelectedIndex(amount = 1) {
    const newValue = this.selectedIndex + amount;
    this.navigateToIndex(newValue, 'next');
  }
  decreaseSelectedIndex(amount = 1) {
    const newValue = this.selectedIndex - amount;
    this.navigateToIndex(newValue, 'previous');
  }
  connectedCallback() {
    this.allItems = [...this.activePanes, ...this.activeDocuments];
  }
  componentDidLoad() {
    this.paneNav.focus();
    this.allItemsElement = Array.from(this.paneNav.querySelectorAll('[part~=item]'));
    this.navigateToIndex(this.selectedIndex, 'next');
    this.scrollItemToView();
  }
  resolveItemPart(item, index, isDocHost) {
    const part = Utils.partNameMap({
      item: true,
      selected: isDocHost ? index === this.selectedIndex - this.activePanes.length : index === this.selectedIndex,
      disabled: item.disabled
    });
    return part;
  }
  selectItem(index, isDocHost) {
    this.selectedIndex = !isDocHost ? index : this.activePanes.length + index;
  }
  renderItems(title, items, isDocHost) {
    return (index.h("article", { part: "group", class: "group" }, index.h("h4", { part: "title", class: "title" }, title), index.h("section", { class: "items" }, items === null || items === void 0 ? void 0 : items.map((item, index$1) => {
      return (index.h("div", { part: this.resolveItemPart(item, index$1, isDocHost), onMouseDown: () => this.selectItem(index$1, isDocHost), onMouseUp: () => this.closed.emit(this.allItems[this.selectedIndex]) }, item.header));
    }))));
  }
  render() {
    var _a;
    return (index.h(index.Host, { onClick: () => this.closed.emit(this.allItems[this.previousActivePaneIndex]), exportparts: "base: pane-navigator, header: pane-navigator-header, body: pane-navigator-body,\r\n                     group: pane-navigator-items-group, title: pane-navigator-items-group-title, item: pane-navigator-item, selected, disabled" }, index.h("article", { part: "base", class: "pane-navigator", ref: el => this.paneNav = el, tabIndex: 0, onClick: ev => ev.stopPropagation() }, index.h("header", { part: "header" }, index.h("h3", null, (_a = this.allItems[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.header)), index.h("section", { part: "body", class: "body" }, this.renderItems(this.resourceStrings.panes, this.activePanes, false), this.renderItems(this.resourceStrings.documents, this.activeDocuments, true)))));
  }
};
IgcPaneNavigatorComponent.style = paneNavigatorComponentCss;

const resizerComponentCss = "";

let IgcResizerComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.resizerMoved = index.createEvent(this, "resizerMoved", 7);
    this.resizerDragStart = index.createEvent(this, "resizerDragStart", 7);
    this.resizerDragEnd = index.createEvent(this, "resizerDragEnd", 7);
    this.dragStart = (args) => {
      this.resizerDragStart.emit(args);
    };
    this.dragEnd = (args) => {
      this.resizerDragEnd.emit(args);
    };
    this.dragMove = (args) => {
      this.resizerMoved.emit(args);
    };
  }
  get isCornerResizer() {
    return this.orientation === locale.IgcResizerLocation.bottomLeft || this.orientation === locale.IgcResizerLocation.bottomRight ||
      this.orientation === locale.IgcResizerLocation.topLeft || this.orientation === locale.IgcResizerLocation.topRight;
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragStart = this.dragStart;
    this.dragService.dragEnd = this.dragEnd;
    this.dragService.dragMove = this.dragMove;
  }
  disconnectedCallback() {
    this.dragService.destroy();
  }
  render() {
    return (index.h(index.Host, { style: {
        position: 'absolute',
        pointerEvents: 'all',
        height: (this.orientation === locale.IgcResizerLocation.left || this.orientation === locale.IgcResizerLocation.right) ?
          '100%' : this.isCornerResizer ? '10px' : '5px',
        width: (this.orientation === locale.IgcResizerLocation.left || this.orientation === locale.IgcResizerLocation.right) ? '5px' :
          this.isCornerResizer ? '10px' : '100%',
        cursor: this.orientation === locale.IgcResizerLocation.left || this.orientation === locale.IgcResizerLocation.right ?
          'ew-resize' : (this.orientation === locale.IgcResizerLocation.bottomLeft || this.orientation === locale.IgcResizerLocation.topRight) ?
          'ne-resize' : (this.orientation === locale.IgcResizerLocation.bottomRight || this.orientation === locale.IgcResizerLocation.topLeft) ?
          'nw-resize' : 'ns-resize',
        left: this.orientation === locale.IgcResizerLocation.left || this.orientation === locale.IgcResizerLocation.topLeft ||
          this.orientation === locale.IgcResizerLocation.bottomLeft ? '-3px' : null,
        top: this.orientation === locale.IgcResizerLocation.top || this.orientation === locale.IgcResizerLocation.topLeft ||
          this.orientation === locale.IgcResizerLocation.topRight ? '0px' : null,
        right: this.orientation === locale.IgcResizerLocation.right || this.orientation === locale.IgcResizerLocation.bottomRight ||
          this.orientation === locale.IgcResizerLocation.topRight ? '-3px' : null,
        bottom: this.orientation === locale.IgcResizerLocation.bottom || this.orientation === locale.IgcResizerLocation.bottomRight ||
          this.orientation === locale.IgcResizerLocation.bottomLeft ? '-3px' : null,
        zIndex: '10002'
      } }));
  }
  get element() { return index.getElement(this); }
};
IgcResizerComponent.style = resizerComponentCss;

const rootDockingIndicatorComponentCss = ".sc-igc-root-docking-indicator-component-h{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-item-align:center;align-self:center;pointer-events:all;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:10px;width:30px;height:30px;color:var(--igc-joystick-icon-color, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-joystick-background, var(--igc-accent-color, #fff));-webkit-transition:color 0.25s ease-out, background 0.25s ease-out;transition:color 0.25s ease-out, background 0.25s ease-out;border:1px solid var(--igc-joystick-border-color, var(--igc-accent-color, #fff))}.sc-igc-root-docking-indicator-component-h:hover{color:var(--igc-joystick-icon-color-active, #000);background:var(--igc-joystick-background-active, var(--igc-accent-color, #fff))}";

let IgcRootDockingIndicatorComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, { part: "root-docking-indicator" }, index.h("igc-icon-component", { name: "first_page", style: {
        transform: this.position === locale.IgcDockingIndicatorPosition.top ? 'rotate(90deg)' :
          this.position === locale.IgcDockingIndicatorPosition.right ? 'rotate(180deg)' :
            this.position === locale.IgcDockingIndicatorPosition.bottom ? 'rotate(270deg)' : 'rotate(0deg)'
      } })));
  }
};
IgcRootDockingIndicatorComponent.style = rootDockingIndicatorComponentCss;

const splitPaneComponentCss = ".sc-igc-split-pane-component-h{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0;border:none}";

let IgcSplitPaneComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  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" }));
  }
};
IgcSplitPaneComponent.style = splitPaneComponentCss;

const splitterComponentCss = ".sc-igc-splitter-component-h{position:relative;display:-ms-flexbox;display:flex;-ms-flex:0 0 4px;flex:0 0 4px;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:all}.splitter.sc-igc-splitter-component{width:100%;height:100%;cursor:ew-resize;background:var(--igc-splitter-background, #D3D6D9);--resize-handle-width:2px;--resize-handle-height:80px;outline-style:none}.splitter.sc-igc-splitter-component::after{position:absolute;content:\"\";background:var(--igc-splitter-handle, var(--igc-accent-color, #fff));top:50%;left:50%;width:var(--resize-handle-width);height:var(--resize-handle-height);max-height:100%;max-width:100%;border-radius:1px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.splitter.sc-igc-splitter-component:focus{background-color:var(--igc-active-color, cornflowerblue)}.splitter--vertical.sc-igc-splitter-component{cursor:ns-resize}.splitter--vertical.sc-igc-splitter-component::after{width:var(--resize-handle-height);height:var(--resize-handle-width)}.splitter-ghost.sc-igc-splitter-component{position:absolute;cursor:ew-resize;opacity:0.3;background:black;width:100%;height:100%;z-index:5}.splitter-ghost--vertical.sc-igc-splitter-component{cursor:ns-resize}";

let IgcSplitterComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.resizeStart = index.createEvent(this, "resizeStart", 7);
    this.resizeEnd = index.createEvent(this, "resizeEnd", 7);
    this.handleMouseUp = () => {
      document.documentElement.removeEventListener('mouseup', this.handleMouseUp, false);
      this.showDragGhost = false;
    };
    this.dragStart = () => {
      this.dragStartHelper(0);
    };
    this.dragEnd = () => {
      this.dragEndHelper();
    };
    this.dragMove = (args) => {
      const rect = this.ghostElement.getBoundingClientRect();
      const isHorizontal = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal;
      const clientCoordinate = isHorizontal ? args.clientX : args.clientY;
      const offset = isHorizontal ? args.offsetX : args.offsetY;
      const startCoordinate = isHorizontal ? rect.left : rect.top;
      const endCoordinate = isHorizontal ? rect.right : rect.bottom;
      if (offset <= 0 && startCoordinate < clientCoordinate) {
        return;
      }
      if (offset >= 0 && endCoordinate > clientCoordinate) {
        return;
      }
      this.dragOffset += offset;
      if (this.flyoutLocation) {
        this.constrainFlyoutResize();
      }
      else {
        this.constrainSplitPaneResize();
      }
    };
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragStart = this.dragStart;
    this.dragService.dragEnd = this.dragEnd;
    this.dragService.dragMove = this.dragMove;
  }
  disconnectedCallback() {
    this.dragService.destroy();
    document.documentElement.removeEventListener('mouseup', this.handleMouseUp, false);
  }
  calculateOffset(event) {
    if (this.isArrowUp(event) || this.isArrowLeft(event)) {
      return -IGC_DEFAULT_RESIZE;
    }
    else if (this.isArrowDown(event) || this.isArrowRight(event)) {
      return IGC_DEFAULT_RESIZE;
    }
  }
  isArrowUp(event) {
    return event.key === 'ArrowUp';
  }
  isArrowDown(event) {
    return event.key === 'ArrowDown';
  }
  isArrowLeft(event) {
    return event.key === 'ArrowLeft';
  }
  isArrowRight(event) {
    return event.key === 'ArrowRight';
  }
  handleKeydownEvent(event) {
    if (this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal &&
      (!this.isArrowLeft(event) && !this.isArrowRight(event))) {
      return;
    }
    if (this.splitPaneOrientation === locale.IgcSplitPaneOrientation.vertical &&
      (!this.isArrowUp(event) && !this.isArrowDown(event))) {
      return;
    }
    this.showDragGhost = false;
    this.dragStartHelper(this.calculateOffset(event));
    if (this.flyoutLocation) {
      this.constrainFlyoutResize();
    }
    else {
      this.constrainSplitPaneResize();
    }
    this.dragEndHelper();
  }
  handleMouseDown() {
    this.showDragGhost = true;
    document.documentElement.addEventListener('mouseup', this.handleMouseUp, false);
    this.resizeStart.emit();
  }
  dragStartHelper(dragOffset) {
    this.dragOffset = dragOffset;
    const parent = this.element.parentElement;
    const children = Array.from(parent.children);
    if (this.flyoutLocation) {
      const pane = children[0];
      this.paneSizes = [this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal ?
          pane.offsetWidth : pane.offsetHeight];
      this.flyoutMaxSize = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal ?
        parent.offsetWidth - IGC_RESIZING_MIN_SIZE :
        parent.offsetHeight - IGC_RESIZING_MIN_SIZE;
    }
    else {
      const index = children.indexOf(this.element);
      const panes = [children[index - 1], children[index + 1]];
      this.paneSizes = panes.map(p => this.splitPaneOrientation === locale.IgcSplitPaneOrientation.horizontal ?
        p.offsetWidth : p.offsetHeight);
    }
  }
  dragEndHelper() {
    const dragOffset = this.dragOffset;
    this.showDragGhost = false;
    this.dragOffset = 0;
    this.paneSizes = null;
    this.resizeEnd.emit(dragOffset);
  }
  constrainFlyoutResize() {
    const paneSize = this.paneSizes[0];
    const isStartLocation = this.flyoutLocation === locale.IgcUnpinnedLocation.left || this.flyoutLocation === locale.IgcUnpinnedLocation.top;
    const offset = isStartLocation ?
      this.dragOffset :
      -this.dragOffset;
    if (paneSize + offset < IGC_RESIZING_MIN_SIZE) {
      const minOffset = paneSize - IGC_RESIZING_MIN_SIZE;
      this.dragOffset = isStartLocation ? -minOffset : minOffset;
    }
    else if (paneSize + offset > this.flyoutMaxSize) {
      const maxOffset = this.flyoutMaxSize - paneSize;
      this.dragOffset = isStartLocation ? maxOffset : -maxOffset;
    }
  }
  constrainSplitPaneResize() {
    if (this.dragOffset < 0) {
      if (this.paneSizes[0] > IGC_RESIZING_MIN_SIZE) {
        if (this.paneSizes[0] + this.dragOffset < IGC_RESIZING_MIN_SIZE) {
          this.dragOffset = -(this.paneSizes[0] - IGC_RESIZING_MIN_SIZE);
        }
      }
      else {
        this.dragOffset = 0;
      }
    }
    else {
      if (this.paneSizes[1] > IGC_RESIZING_MIN_SIZE) {
        if (this.paneSizes[1] - this.dragOffset < IGC_RESIZING_MIN_SIZE) {
          this.dragOffset = this.paneSizes[1] - IGC_RESIZING_MIN_SIZE;
        }
      }
      else {
        this.dragOffset = 0;
      }
    }
  }
  render() {
    const isVertical = this.splitPaneOrientation === locale.IgcSplitPaneOrientation.vertical;
    const splitterClasses = {
      'splitter': true,
      'splitter--vertical': isVertical
    };
    const ghostClasses = {
      'splitter-ghost': true,
      'splitter-ghost--vertical': isVertical
    };
    return (index.h(index.Host, { part: "splitter" }, index.h("div", { part: "splitter-base", class: splitterClasses, tabIndex: 0, role: "separator", "aria-orientation": this.splitPaneOrientation.toString() }), this.showDragGhost &&
      index.h("div", { part: "splitter-ghost", class: ghostClasses, style: {
          left: `${isVertical ? 0 : this.dragOffset}px`,
          top: `${isVertical ? this.dragOffset : 0}px`
        }, ref: el => this.ghostElement = el })));
  }
  get element() { return index.getElement(this); }
};
IgcSplitterComponent.style = splitterComponentCss;

const tabHeaderComponentCss = ":host{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;padding:0.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--igc-tab-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-tab-background, var(--igc-background-color, #E5E7E9));border-style:solid;border-color:var(--igc-tab-border-color, var(--igc-border-color, #F3F5F7));border-top-width:1px;border-left-width:1px;border-bottom-width:0;border-right-width:1px;font-size:0.75em;line-height:2;outline-style:none}:host igc-icon-component svg{width:17px;height:17px}:host *+igc-button-component{margin-left:0.5em}:host([part~=selected]){color:var(--igc-tab-text-active, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-tab-background-active, var(--igc-border-color, #F3F5F7));border-color:var(--igc-tab-border-color-active, var(--igc-border-color, #F3F5F7))}:host([part~=bottom]){border-top-width:0;border-bottom-width:1px}:host([part~=bottom]):first-of-type{border-left:none}:host([part~=active]){-webkit-box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue);box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue);color:var(--igc-active-color, cornflowerblue)}:host([part~=active]) igc-icon-component{color:var(--igc-active-color, cornflowerblue)}:host([part~=disabled]){pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcTabHeaderComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.dragStarted = index.createEvent(this, "dragStarted", 7);
    this.dragMoved = index.createEvent(this, "dragMoved", 7);
    this.dragEnded = index.createEvent(this, "dragEnded", 7);
    this.tabMouseDown = index.createEvent(this, "tabMouseDown", 7);
    this.iconClicked = index.createEvent(this, "iconClicked", 7);
    this.iconKeyDown = index.createEvent(this, "iconKeyDown", 7);
    this.elementConnected = index.createEvent(this, "elementConnected", 7);
    this.elementDisconnected = index.createEvent(this, "elementDisconnected", 7);
    this.selected = false;
    this.position = IgcTabHeadersPosition.top;
    this.disabled = false;
    this.iconClick = (ev) => {
      this.iconClicked.emit(ev);
    };
    this.keyDown = (ev) => {
      this.iconKeyDown.emit(ev);
    };
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragStart = args => {
      this.dragStarted.emit(args);
    };
    this.dragService.dragMove = args => {
      this.dragMoved.emit(args);
    };
    this.dragService.dragEnd = args => {
      this.dragEnded.emit(args);
    };
    this.forceDragging();
    this.elementConnected.emit(this.element);
  }
  disconnectedCallback() {
    if (this.dragService) {
      this.dragService.destroy();
    }
    this.elementDisconnected.emit(this.element);
  }
  handleMouseDown() {
    this.tabMouseDown.emit();
  }
  forcedDragChanged() {
    this.forceDragging();
  }
  forceDragging() {
    if (this.forcedDrag) {
      this.dragService.forceDragging();
    }
  }
  render() {
    const parts = Utils.partNameMap({
      'tab-header': true,
      top: this.position === IgcTabHeadersPosition.top,
      active: this.isActive,
      selected: this.selected,
      disabled: this.disabled,
      bottom: this.position === IgcTabHeadersPosition.bottom,
    });
    return (index.h(index.Host, { role: "tab", part: parts, "aria-label": this.header, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: !this.selected || this.disabled ? -1 : 0 }, index.h("slot", null), this.iconName &&
      index.h("igc-button-component", { style: {
          visibility: this.selected ? 'visible' : 'hidden',
          pointerEvents: this.selected && !this.disabled ? 'all' : 'none'
        }, onClick: this.iconClick, onKeyDown: this.keyDown }, index.h("igc-icon-component", { name: this.iconName, "aria-label": this.iconName === 'close' ? this.resourceStrings.close : this.resourceStrings.moreOptions, title: this.iconName === 'close' ? this.resourceStrings.close : this.resourceStrings.moreOptions }))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "forcedDrag": ["forcedDragChanged"]
  }; }
};
IgcTabHeaderComponent.style = tabHeaderComponentCss;

const tabPanelComponentCss = ":host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:auto;-ms-flex-positive:1;flex-grow:1;height:100%;color:var(--igc-pane-content-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background-color:var(--igc-pane-content-background, var(--igc-border-color, #F3F5F7))}:host([part~=disabled]){pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcTabPanelComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.selectedChanged = index.createEvent(this, "selectedChanged", 7);
    this.emitSelectedChanged = false;
    this.selected = false;
    this.disabled = false;
  }
  selectedPropChange() {
    this.emitSelectedChanged = true;
  }
  componentDidUpdate() {
    if (this.emitSelectedChanged) {
      this.emitSelectedChanged = false;
      this.selectedChanged.emit(this.selected);
    }
  }
  render() {
    const parts = Utils.partNameMap({
      'tab-panel': true,
      selected: this.selected,
      disabled: this.disabled
    });
    return (index.h(index.Host, { role: "tabpanel", part: parts, style: {
        display: this.selected ? 'block' : 'none'
      } }, index.h("slot", null)));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "selected": ["selectedPropChange"]
  }; }
};
IgcTabPanelComponent.style = tabPanelComponentCss;

const tabsComponentCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0px;min-height:0px}.tabs{display:-ms-flexbox;display:flex;overflow:hidden;min-height:32px;max-height:32px;background:var(--igc-dock-background, var(--igc-background-color, #E5E7E9))}.tabs--top{padding-top:8px}.tabs--top .tab-headers-container--wrapped{-ms-flex-wrap:wrap;flex-wrap:wrap}.tabs--bottom{padding-bottom:8px}.tabs--bottom .tab-headers-container--wrapped{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.content{-ms-flex-positive:1;flex-grow:1;height:100%;overflow:auto}.tab-headers-container{width:100%;display:-ms-flexbox;display:flex;overflow:hidden}.tab-header-icon-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;padding-left:8px;padding-right:8px}";

/**
 * @hidden
 */
let NEXT_TAB_ID = 0;
let IgcTabsComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.selectedIndexChanged = index.createEvent(this, "selectedIndexChanged", 3);
    this.hiddenTabSelected = index.createEvent(this, "hiddenTabSelected", 3);
    this.selectedTabOutOfView = index.createEvent(this, "selectedTabOutOfView", 3);
    this.forcedUpdate = false;
    this.hasHiddenTabs = false;
    this.tabHeadersPosition = IgcTabHeadersPosition.top;
    this.hasHeaders = true;
    this.showHiddenTabsMenu = true;
    this.resizeObserver = new ResizeObserver(this.tabHeadersDivResized.bind(this));
    this.slotChanged = () => {
      this.updateSelectedIndex();
      this.setTabsAttributes();
      this.forceUpdate();
    };
    this.onTabKeyDown = (ev) => {
      const tabHeaders = this.tabHeaders;
      if (Utils.isAltPressed(ev) || Utils.isControlOrMetaPressed(ev) || ev.shiftKey) {
        return;
      }
      if (ev.key === 'ArrowRight') {
        for (let i = this.selectedIndex; i < tabHeaders.length - this.hiddenTabHeaders.length - 1; i++) {
          if (!tabHeaders[i + 1].disabled) {
            this.selectedIndex = i + 1;
            tabHeaders[i + 1].focus();
            return;
          }
        }
      }
      else if (ev.key === 'ArrowLeft') {
        for (let i = this.selectedIndex; i > 0; i--) {
          if (!tabHeaders[i - 1].disabled) {
            this.selectedIndex = i - 1;
            tabHeaders[i - 1].focus();
            return;
          }
        }
      }
    };
  }
  selectedIndexPropertyChanged(newValue) {
    this.handleSelectedIndexChanged(newValue);
    this.selectedIndexChanged.emit(newValue);
  }
  componentWillLoad() {
    this.hiddenTabsMenuMeta = null;
    this.updateSelectedIndex();
  }
  componentDidLoad() {
    this.setTabsAttributes();
    this.tabHeadersDiv = this.el.shadowRoot.querySelector('div.tabs');
    if (this.tabHeadersDiv) {
      this.resizeObserver.observe(this.tabHeadersDiv);
    }
  }
  componentDidUpdate() {
    if (this.forcedUpdate) {
      this.forcedUpdate = false;
      this.setHasHiddenTabs();
    }
  }
  setTabsAttributes() {
    const tabHeaders = this.tabHeaders;
    const tabPanels = this.tabPanels;
    for (let i = 0; i < tabHeaders.length; i++) {
      if (!tabHeaders[i].getAttribute('id')) {
        const tabHeaderId = `tab-item-${NEXT_TAB_ID}`;
        const tabPanelId = `tab-panel-${NEXT_TAB_ID++}`;
        tabPanels[i].setAttribute('id', tabPanelId);
        tabHeaders[i].setAttribute('id', tabHeaderId);
        tabPanels[i].setAttribute('aria-labelledby', tabHeaderId);
        tabHeaders[i].setAttribute('aria-controls', tabPanelId);
      }
    }
  }
  disconnectedCallback() {
    this.resizeObserver.disconnect();
  }
  forceUpdate() {
    this.forcedUpdate = true;
    index.forceUpdate(this);
  }
  updateSelectedIndex() {
    const tabPanels = this.tabPanels;
    if (tabPanels.length === 0) {
      return;
    }
    if (this.selectedIndex > tabPanels.length - 1) {
      this.selectedIndex = tabPanels.length - 1;
    }
    else {
      this.handleSelectedIndexChanged(this.selectedIndex);
    }
  }
  get tabPanels() {
    return Array.from(this.el.querySelectorAll('igc-tab-panel-component'));
  }
  get tabHeaders() {
    return Array.from(this.el.querySelectorAll('igc-tab-header-component'));
  }
  get hiddenTabHeaders() {
    var _a;
    const containerTop = (_a = this.tabHeaders[0]) === null || _a === void 0 ? void 0 : _a.offsetTop;
    return this.tabHeaders.filter(t => t.offsetTop !== containerTop);
  }
  handleSelectedIndexChanged(newValue) {
    const tabHeaders = this.tabHeaders;
    const tabPanels = this.tabPanels;
    tabHeaders.forEach((t, i) => {
      t.selected = i === newValue;
    });
    tabPanels.forEach((t, i) => {
      t.selected = i === newValue;
    });
  }
  handleTabMouseDown(ev) {
    const tabHeader = ev.target;
    const tabHeaders = this.tabHeaders;
    const headerIndex = tabHeaders.indexOf(tabHeader);
    if (headerIndex >= 0) {
      this.selectedIndex = headerIndex;
    }
  }
  tabHeadersDivResized() {
    var _a;
    const containerTop = (_a = this.tabHeaders[0]) === null || _a === void 0 ? void 0 : _a.offsetTop;
    const selectedTabHeader = this.tabHeaders.filter(t => t.selected)[0];
    if ((selectedTabHeader === null || selectedTabHeader === void 0 ? void 0 : selectedTabHeader.offsetTop) !== containerTop) {
      const index = this.selectedIndex;
      this.selectedTabOutOfView.emit(index);
    }
    this.setHasHiddenTabs();
  }
  setHasHiddenTabs() {
    this.hasHiddenTabs = this.hiddenTabHeaders.length > 0;
  }
  handleHiddenTabsMenuClick(ev) {
    const button = ev.currentTarget;
    const items = this.hiddenTabHeaders.map(header => ({
      displayText: header.header,
      disabled: header.disabled,
      iconName: null,
      clickHandler: () => {
        const index = this.tabHeaders.indexOf(header);
        this.hiddenTabSelected.emit(index);
      }
    }));
    this.hiddenTabsMenuMeta = { target: button, menuItems: items };
  }
  handleContextMenuClosed() {
    this.hiddenTabsMenuMeta = null;
  }
  renderHiddenTabsMenu() {
    return this.hiddenTabsMenuMeta && (index.h("igc-context-menu-component", { onMenuClosed: this.handleContextMenuClosed.bind(this), orientation: this.tabHeadersPosition === IgcTabHeadersPosition.top ? IgcContextMenuOrientation.bottom : IgcContextMenuOrientation.top, items: this.hiddenTabsMenuMeta.menuItems, target: this.hiddenTabsMenuMeta.target }));
  }
  renderTabHeaders(top) {
    const classes = {
      'tabs': true,
      'tabs--top': top,
      'tabs--bottom': !top
    };
    const commontParts = { top, bottom: !top };
    const tabStripParts = Utils.partNameMap(Object.assign({ 'tab-strip-area': true }, commontParts));
    const tabStripActionsParts = Utils.partNameMap(Object.assign({ 'tab-strip-actions': true }, commontParts));
    return (index.h("div", { part: tabStripParts, style: {
        display: this.hasHeaders ? 'flex' : 'none'
      }, class: classes, onKeyDown: this.onTabKeyDown }, index.h("div", { class: {
        'tab-headers-container': true,
        'tab-headers-container--wrapped': this.showHiddenTabsMenu
      } }, index.h("slot", { name: "tabHeader" })), index.h("div", { part: tabStripActionsParts, class: "tab-header-icon-container" }, this.showHiddenTabsMenu && this.hasHiddenTabs &&
      index.h("igc-button-component", { onClick: this.handleHiddenTabsMenuClick.bind(this) }, index.h("igc-icon-component", { name: "more", "aria-label": this.resourceStrings.moreTabs, title: this.resourceStrings.moreTabs, style: {
          display: 'block'
        } })), index.h("slot", { name: "tabHeaderIcon" }))));
  }
  render() {
    const size = this.size || this.size === 0 ? this.size : IGC_DEFAULT_PANE_SIZE;
    const top = this.tabHeadersPosition === IgcTabHeadersPosition.top;
    const bottom = this.tabHeadersPosition === IgcTabHeadersPosition.bottom;
    const tabsContentParts = Utils.partNameMap({ 'tabs-content': true, document: top });
    const exportParts = Utils.partNameMap({
      'tab-strip-area': true,
      'tab-strip-actions': true,
      'tabs-content': true,
      document: top,
      top,
      bottom
    }, ',');
    return (index.h(index.Host, { role: "tablist", style: {
        flex: `${size} 1 ${size}px`
      }, exportparts: exportParts }, top && this.renderTabHeaders(top), index.h("div", { part: tabsContentParts, class: "content" }, index.h("slot", { onSlotchange: this.slotChanged })), bottom && this.renderTabHeaders(top), this.renderHiddenTabsMenu()));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "selectedIndex": ["selectedIndexPropertyChanged"]
  }; }
};
IgcTabsComponent.style = tabsComponentCss;

const unpinnedPaneHeaderComponentCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:12px;padding:4px;margin-right:4px;color:var(--igc-pinned-header-text, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-pinned-header-background, var(--igc-accent-color, #fff));cursor:pointer;outline-style:none}:host([part~=vertical]){-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;margin-right:unset;margin-bottom:4px}:host([part~=active]){color:var(--igc-active-color, cornflowerblue);-webkit-box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue);box-shadow:inset 0 -2px 0 0 var(--igc-active-color, cornflowerblue)}:host([part~=vertical][part~=active]){-webkit-box-shadow:inset 2px 0 0 0 var(--igc-active-color, cornflowerblue);box-shadow:inset 2px 0 0 0 var(--igc-active-color, cornflowerblue)}:host([part~=disabled]){pointer-events:none;color:var(--igc-disabled-color, rgba(0, 0, 0, 0.38))}";

let IgcUnpinnedPaneHeaderComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.disabled = false;
  }
  render() {
    const isHorizontal = this.location === locale.IgcUnpinnedLocation.top || this.location === locale.IgcUnpinnedLocation.bottom;
    const parts = Utils.partNameMap({
      'unpinned-pane-header': true,
      vertical: !isHorizontal,
      active: this.isActive,
      disabled: this.disabled,
    });
    return (index.h(index.Host, { part: parts, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? -1 : 0 }, index.h("slot", null)));
  }
};
IgcUnpinnedPaneHeaderComponent.style = unpinnedPaneHeaderComponentCss;

const sampleComponentCss = ".sc-sample-component-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}";

/**
 * @hidden
 */
const customResourceStrings = {
  close: '[Custom]Close',
  pin: '[Custom]Pin',
  unpin: '[Custom]Unpin',
  maximize: '[Custom]Maximize',
  minimize: '[Custom]Minimize',
  moreOptions: '[Custom]More options'
};
locale.addResourceStrings('custom', customResourceStrings);
let SampleComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.hiddenPanes = [];
    this.teamExplorerPane = {
      type: locale.IgcDockManagerPaneType.contentPane,
      header: 'Team Explorer',
      contentId: 'content7',
      allowMaximize: true
    };
    this.unpinnedToolboxPane = {
      type: locale.IgcDockManagerPaneType.contentPane,
      header: 'Toolbox',
      contentId: 'content1',
      isPinned: false
    };
    this.layout1 = {
      rootPane: {
        type: locale.IgcDockManagerPaneType.splitPane,
        orientation: locale.IgcSplitPaneOrientation.horizontal,
        panes: [
          this.unpinnedToolboxPane,
          {
            type: locale.IgcDockManagerPaneType.splitPane,
            orientation: locale.IgcSplitPaneOrientation.vertical,
            size: 300,
            panes: [
              {
                type: locale.IgcDockManagerPaneType.documentHost,
                size: 300,
                rootPane: {
                  type: locale.IgcDockManagerPaneType.splitPane,
                  orientation: locale.IgcSplitPaneOrientation.horizontal,
                  allowEmpty: true,
                  panes: [
                    {
                      type: locale.IgcDockManagerPaneType.tabGroupPane,
                      panes: [
                        {
                          type: locale.IgcDockManagerPaneType.contentPane,
                          header: 'MainWindow.xaml',
                          contentId: 'content2',
                          documentOnly: true,
                          // allowMaximize: false,
                        },
                        {
                          type: locale.IgcDockManagerPaneType.contentPane,
                          header: 'MainWindow.xaml.cs',
                          contentId: 'content6',
                          documentOnly: true,
                          allowFloating: false
                        }
                      ]
                    },
                    {
                      type: locale.IgcDockManagerPaneType.contentPane,
                      header: 'App.xaml',
                      contentId: 'content8',
                      allowMaximize: true
                    }
                  ]
                }
              },
              {
                type: locale.IgcDockManagerPaneType.splitPane,
                orientation: locale.IgcSplitPaneOrientation.horizontal,
                allowEmpty: true,
                panes: []
              },
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                header: 'Error List',
                contentId: 'content3',
                allowDocking: false,
                allowFloating: false,
                allowMaximize: false
              }
            ]
          },
          {
            type: locale.IgcDockManagerPaneType.splitPane,
            orientation: locale.IgcSplitPaneOrientation.vertical,
            panes: [
              {
                type: locale.IgcDockManagerPaneType.tabGroupPane,
                size: 200,
                allowEmpty: true,
                panes: [
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    header: 'Solution Explorer',
                    headerId: 'header1',
                    tabHeaderId: 'tabHeader1',
                    unpinnedHeaderId: 'unpinnedHeader1',
                    contentId: 'content4',
                    allowMaximize: false
                  },
                  this.teamExplorerPane
                ]
              },
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                header: 'Properties',
                contentId: 'content5',
                unpinnedLocation: locale.IgcUnpinnedLocation.top,
                allowFloating: false,
                allowMaximize: false
              }
            ]
          }
        ]
      },
      floatingPanes: [
        {
          type: locale.IgcDockManagerPaneType.splitPane,
          orientation: locale.IgcSplitPaneOrientation.horizontal,
          floatingLocation: { x: 50, y: 100 },
          floatingWidth: 200,
          floatingHeight: 100,
          panes: [
            {
              type: locale.IgcDockManagerPaneType.contentPane,
              header: 'Notifications',
              contentId: 'content9',
              allowDocking: false
            }
          ],
          // floatingResizable: true
        },
        {
          type: locale.IgcDockManagerPaneType.splitPane,
          allowEmpty: true,
          orientation: locale.IgcSplitPaneOrientation.horizontal,
          floatingLocation: { x: 250, y: 350 },
          floatingWidth: 300,
          floatingHeight: 200,
          panes: [
            {
              type: locale.IgcDockManagerPaneType.contentPane,
              header: 'Floating 1',
              contentId: 'content10'
            },
            {
              type: locale.IgcDockManagerPaneType.contentPane,
              header: 'Floating 2',
              contentId: 'content11',
              allowMaximize: false
            }
          ]
        },
        {
          type: locale.IgcDockManagerPaneType.splitPane,
          orientation: locale.IgcSplitPaneOrientation.horizontal,
          floatingLocation: { x: 750, y: 200 },
          floatingWidth: 300,
          floatingHeight: 200,
          panes: [
            {
              type: locale.IgcDockManagerPaneType.tabGroupPane,
              allowEmpty: true,
              panes: [
                {
                  type: locale.IgcDockManagerPaneType.contentPane,
                  header: 'Floating Tab 1',
                  contentId: 'content12'
                },
                {
                  type: locale.IgcDockManagerPaneType.contentPane,
                  header: 'Floating Tab 2',
                  contentId: 'content13'
                }
              ]
            }
          ]
        }
      ]
    };
    this.layout2 = {
      rootPane: {
        type: locale.IgcDockManagerPaneType.splitPane,
        orientation: locale.IgcSplitPaneOrientation.horizontal,
        panes: [
          {
            type: locale.IgcDockManagerPaneType.splitPane,
            orientation: locale.IgcSplitPaneOrientation.vertical,
            panes: [
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                contentId: 'content1',
                header: 'Content Pane 1'
              },
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                contentId: 'content2',
                header: 'Unpinned Pane 1',
                isPinned: false
              }
            ]
          },
          {
            type: locale.IgcDockManagerPaneType.splitPane,
            orientation: locale.IgcSplitPaneOrientation.vertical,
            size: 200,
            panes: [
              {
                type: locale.IgcDockManagerPaneType.documentHost,
                size: 200,
                rootPane: {
                  type: locale.IgcDockManagerPaneType.splitPane,
                  orientation: locale.IgcSplitPaneOrientation.horizontal,
                  panes: [
                    {
                      type: locale.IgcDockManagerPaneType.tabGroupPane,
                      panes: [
                        {
                          type: locale.IgcDockManagerPaneType.contentPane,
                          header: 'Document 1',
                          contentId: 'content3'
                        },
                        {
                          type: locale.IgcDockManagerPaneType.contentPane,
                          header: 'Document 2',
                          contentId: 'content4'
                        }
                      ]
                    }
                  ]
                }
              },
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                contentId: 'content5',
                header: 'Unpinned Pane 2',
                isPinned: false
              }
            ]
          },
          {
            type: locale.IgcDockManagerPaneType.splitPane,
            orientation: locale.IgcSplitPaneOrientation.vertical,
            panes: [
              {
                type: locale.IgcDockManagerPaneType.tabGroupPane,
                size: 200,
                // selectedIndex: 1,
                panes: [
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    contentId: 'content6',
                    header: 'Tab 1'
                  },
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    contentId: 'content7',
                    header: 'Tab 2'
                  },
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    contentId: 'content8',
                    header: 'Tab 3'
                  },
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    contentId: 'content9',
                    header: 'Tab 4'
                  },
                  {
                    type: locale.IgcDockManagerPaneType.contentPane,
                    contentId: 'content10',
                    header: 'Tab 5'
                  }
                ]
              },
              {
                type: locale.IgcDockManagerPaneType.contentPane,
                contentId: 'content11',
                header: 'Content Pane 2'
              }
            ]
          }
        ]
      },
      floatingPanes: [
        {
          type: locale.IgcDockManagerPaneType.splitPane,
          orientation: locale.IgcSplitPaneOrientation.horizontal,
          floatingHeight: 150,
          floatingWidth: 250,
          floatingLocation: { x: 300, y: 200 },
          panes: [
            {
              type: locale.IgcDockManagerPaneType.contentPane,
              contentId: 'content12',
              header: 'Floating Pane'
            }
          ]
        }
      ]
    };
    this.layout = this.layout1;
    this.id = 100;
    this.foundElem = [];
  }
  saveLayout() {
    this.savedLayout = JSON.stringify(this.dockManager.layout);
  }
  loadLayout() {
    this.dockManager.layout = JSON.parse(this.savedLayout);
  }
  setActivePane() {
    // this.dockManager.activePane = this.teamExplorerPane;
    this.dockManager.activePane = this.unpinnedToolboxPane;
  }
  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,
      header: 'NewPane',
      contentId: this.newId
    });
    this.dockManager.layout = Object.assign({}, this.layout);
  }
  addTab() {
    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
    this.newId = `content${this.id++}`;
    const newDiv = this.createElement(this.newId, 'button');
    this.dockManager.appendChild(newDiv);
    const tabGroupPane = this.foundElem[0];
    tabGroupPane.panes.push({
      type: locale.IgcDockManagerPaneType.contentPane,
      header: 'NewTab',
      contentId: this.newId
    });
    this.dockManager.layout = Object.assign({}, this.layout);
  }
  disableContentPane() {
    this.findElement(this.layout.rootPane, locale.IgcDockManagerPaneType.tabGroupPane);
    const tabGroupPane = this.foundElem[0];
    tabGroupPane.panes[0].disabled = true;
    this.dockManager.layout = Object.assign({}, this.layout);
  }
  findElement(pane, type) {
    if (!pane) {
      return;
    }
    if (pane.type === type) {
      this.foundElem.push(pane);
    }
    if (pane.type === locale.IgcDockManagerPaneType.tabGroupPane || pane.type === locale.IgcDockManagerPaneType.splitPane) {
      for (const c of pane.panes) {
        this.findElement(c, type);
      }
    }
    if (pane.type === locale.IgcDockManagerPaneType.documentHost) {
      this.findElement(pane.rootPane, type);
    }
  }
  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);
    }
  }
  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);
    }
  }
  createElement(content, typeOfElement) {
    const someContent = document.createTextNode(content);
    let elem;
    switch (typeOfElement) {
      case ('button'):
        elem = document.createElement('button');
        elem.appendChild(someContent);
        break;
      case ('input'):
        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) {
    console.log(event);
    if (this.hideOnCloseCheckbox.checked) {
      for (const pane of event.detail.panes) {
        pane.hidden = true;
        this.hiddenPanes.splice(0, 0, pane);
        this.hiddenPanes = [...this.hiddenPanes];
      }
      event.preventDefault();
    }
    // const panes = event.detail.panes;
    // const confirmed = confirm(`Are you sure you want to close panes '${panes.map(p => p.header).join(', ')}'?`);
    // // event.detail.panes = [panes[0]];
    // if (confirmed) {
    //   for (const pane of panes) {
    //     const contentChild = this.dockManager.querySelector(`[slot=${pane.contentId}]`);
    //     this.dockManager.removeChild(contentChild);
    //   }
    // } else {
    //   event.preventDefault();
    // }
  }
  handlePinnedToggle(event) {
    console.log(event);
    // if (event.detail.sourcePane.type === IgcDockManagerPaneType.contentPane) {
    //   event.detail.panes = [event.detail.sourcePane];
    // }
    // event.preventDefault();
  }
  handleActivePaneChanged(event) {
    console.log(event);
  }
  handleDragStart(event) {
    console.log(event);
    // event.preventDefault();
  }
  handleDragOver(event) {
    const args = event.detail;
    console.log(args.action);
  }
  handleDragEnd(event) {
    console.log(event);
  }
  handleFloatingPaneResizeStart(event) {
    console.log(event, Object.assign({}, event.detail));
    // event.preventDefault();
  }
  handleFloatingPaneResizeMove(event) {
    console.log(event, Object.assign({}, event.detail));
  }
  handleFloatingPaneResizeEnd(event) {
    console.log(event, Object.assign({}, event.detail));
  }
  // private getCustomResourceStrings(): IgcDockManagerResourceStrings {
  //   const customResourceStrings: IgcDockManagerResourceStrings = {
  //     close: '[Custom]Close',
  //     pin: '[Custom]Pin',
  //     unpin: '[Custom]Unpin',
  //     maximize: '[Custom]Maximize',
  //     minimize: '[Custom]Minimize',
  //     moreOptions: '[Custom]More options'
  //   };
  //   return customResourceStrings;
  // }
  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), onFloatingPaneResizeStart: this.handleFloatingPaneResizeStart.bind(this), onFloatingPaneResizeMove: this.handleFloatingPaneResizeMove.bind(this), onFloatingPaneResizeEnd: this.handleFloatingPaneResizeEnd.bind(this),
      // resourceStrings={this.getCustomResourceStrings()}
      ref: el => this.dockManager = el }, 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("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"))));
  }
};
SampleComponent.style = sampleComponentCss;

exports.igc_button_component = IgcButtonComponent;
exports.igc_content_pane_component = IgcContentPaneComponent;
exports.igc_context_menu_component = IgcContextMenuComponent;
exports.igc_dockmanager = IgcDockManager;
exports.igc_document_host_component = IgcDocumentHostComponent;
exports.igc_floating_pane_component = IgcFloatingPaneComponent;
exports.igc_icon_component = IgcIconComponent;
exports.igc_joystick_icon_component = IgcJoystickIconComponent;
exports.igc_joystick_indicator_component = IgcJoystickIndicatorComponent;
exports.igc_pane_header_component = IgcPaneHeaderComponent;
exports.igc_pane_navigator_component = IgcPaneNavigatorComponent;
exports.igc_resizer_component = IgcResizerComponent;
exports.igc_root_docking_indicator_component = IgcRootDockingIndicatorComponent;
exports.igc_split_pane_component = IgcSplitPaneComponent;
exports.igc_splitter_component = IgcSplitterComponent;
exports.igc_tab_header_component = IgcTabHeaderComponent;
exports.igc_tab_panel_component = IgcTabPanelComponent;
exports.igc_tabs_component = IgcTabsComponent;
exports.igc_unpinned_pane_header_component = IgcUnpinnedPaneHeaderComponent;
exports.sample_component = SampleComponent;
