igniteui-dockmanager 1.7.0-beta.3 → 1.7.0-beta.4

package/CHANGELOG.md

@@ -6,8 +6,10 @@ All notable changes for each version of this project will be documented in this
 
 ### New features
 - Customizable floating pane header
-- Support for document-only content panes which can be docked only inside a document host
-- `allowEmpty` property for split and tab group panes which allows displaying empty areas
+- `disabled` property per pane [#23](https://github.com/IgniteUI/igniteui-dockmanager/issues/23)
+- `documentOnly` property which allows content pane to be docked only inside a document host
+- `allowEmpty` property for split and tab group panes which allows displaying empty areas [#18](https://github.com/IgniteUI/igniteui-dockmanager/issues/18)
+- `disableKeyboardNavigation` property on the dock manager [#22](https://github.com/IgniteUI/igniteui-dockmanager/issues/22)
 
 ### Bug fixes
 - Docking indicators appear over the currently dragged floating pane

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

@@ -17,6 +17,44 @@ let IgcButtonComponent = class {
 };
 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
  */
@@ -62,23 +100,30 @@ var IgcPinBehavior;
   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}";
+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;
-    return (index.h(index.Host, { role: "group", "aria-label": this.header, tabindex: "0", style: {
+    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: "content-pane" }, index.h("slot", { name: "header" }), index.h("slot", null)));
+      }, 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}.menu-items{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)}.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}.menu-item:hover{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}.menu-item:focus{background:var(--igc-context-menu-background-active, var(--igc-border-color, #F3F5F7));color:var(--igc-context-menu-color-active, #000)}";
+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) {
@@ -124,11 +169,12 @@ let IgcContextMenuComponent = class {
     this.focusItemAndSetActiveIndex();
   }
   focusItemAndSetActiveIndex() {
-    const firstMenuItem = this.menuItemsDiv.firstElementChild;
-    firstMenuItem.focus();
+    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.children;
+    const menuItemChildren = this.menuItemsDiv.querySelectorAll('div[part="menu-item"]');
     if (ev.key === 'ArrowDown') {
       if (this.activeIndex < menuItemChildren.length - 1) {
         this.activeIndex++;
@@ -149,9 +195,19 @@ let IgcContextMenuComponent = class {
       this.emitMenuClosed();
     }
   }
+  handleMenuItemClick(item) {
+    item.clickHandler();
+    this.emitMenuClosed();
+  }
   render() {
-    return (index.h(index.Host, { onClick: this.emitMenuClosed.bind(this), exportparts: "menu-content: context-menu, menu-item: context-menu-item" }, index.h("div", { role: "menu", class: "menu-items", part: "menu-content", ref: el => this.menuItemsDiv = el }, this.items.map(item => {
-      return (index.h("div", { role: "menuitem", part: "menu-item", tabindex: "-1", class: "menu-item", onKeyDown: this.handleKeyboardEvents.bind(this, item), onClick: item.clickHandler }, index.h("span", { style: {
+    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 &&
@@ -195,44 +251,6 @@ class TwoWayMap {
   }
 }
 
-/**
- * @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
  */
@@ -1528,10 +1546,10 @@ class IgcDockManagerService {
     this.forceDragTabHeader = pane;
   }
   cacheDocumentsOrder() {
-    this.documentsCache = [...this.visibleDocuments];
+    this.documentsCache = this.visibleDocuments.filter(c => !c.disabled);
   }
   cacheContentPanesOrder() {
-    this.contentPanesCache = [...this.visibleContentPanes];
+    this.contentPanesCache = this.visibleContentPanes.filter(c => !c.disabled);
   }
   focusPrevContentPane(isInDocHost) {
     const contentPanesCache = isInDocHost ? this.documentsCache : this.contentPanesCache;
@@ -1561,6 +1579,9 @@ class IgcDockManagerKeyboardService {
     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);
@@ -1722,6 +1743,7 @@ let IgcDockManager = class {
     this.floatingPaneZIndicesMap = new Map();
     this.allowMaximize = true;
     this.allowFloatingPanesResize = true;
+    this.disableKeyboardNavigation = false;
     this.activePane = null;
     this.handleCustomContentFocusIn = (eventArgs) => {
       const parent = eventArgs.currentTarget;
@@ -2328,14 +2350,14 @@ let IgcDockManager = class {
     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, ref: el => {
+    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, 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 }) :
+      }, 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 }))));
   }
@@ -2375,7 +2397,7 @@ let IgcDockManager = class {
       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, onMouseDown: isInDocumentHost ? this.handlePaneContentMouseDown.bind(this, pane) : null, onSelectedChanged: this.handleTabSelectedChanged.bind(this, pane) }, isInDocumentHost ?
+    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)));
   }
@@ -2392,7 +2414,7 @@ let IgcDockManager = class {
       this.service.forceDragTabHeader = null;
       forceDrag = true;
     }
-    return (index.h("igc-tab-header-component", { key: pane.id, slot: "tabHeader", isActive: pane === this.activePane, 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 => {
+    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);
         }
@@ -2446,7 +2468,7 @@ let IgcDockManager = class {
       '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, onMouseDown: this.handleUnpinnedTabMouseDown.bind(this, p), onKeyDown: this.handleUnpinnedTabKeyDown.bind(this, p), onFocus: this.handleUnpinnedHeaderFocus.bind(this, p), ref: el => {
+    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);
         }
@@ -2982,7 +3004,7 @@ class IgcDragService {
   }
 }
 
-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(.floating-pane-header){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(.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)}";
+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) {
@@ -2998,6 +3020,7 @@ let IgcPaneHeaderComponent = class {
     this.allowClose = true;
     this.allowMaximize = true;
     this.allowPinning = true;
+    this.disabled = false;
     this.pinButtonClick = () => {
       this.pinToggle.emit();
     };
@@ -3040,6 +3063,7 @@ let IgcPaneHeaderComponent = class {
   render() {
     const commonParts = {
       active: this.isActive,
+      disabled: this.disabled,
       floating: this.isFloating,
       window: this.isFloatingPaneHeader,
     };
@@ -3047,10 +3071,7 @@ let IgcPaneHeaderComponent = class {
     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, { class: {
-        'floating-pane-header': this.isFloatingPaneHeader,
-        'active': this.isActive
-      }, 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 &&
+    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 })))));
@@ -3062,7 +3083,7 @@ let IgcPaneHeaderComponent = class {
 };
 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}.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}.item--selected{color:var(--igc-active-color, cornflowerblue)}";
+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) {
@@ -3104,11 +3125,11 @@ let IgcPaneNavigatorComponent = class {
           }
           if (this.selectedIndex >= 0 && this.selectedIndex < this.activePanes.length) {
             index = this.selectedIndex + this.activePanes.length;
-            this.selectedIndex = index >= this.allItems.length ? this.allItems.length - 1 : index;
+            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.selectedIndex = index > this.activePanes.length - 1 ? this.activePanes.length - 1 : index;
+            this.navigateToIndex(index > this.activePanes.length - 1 ? this.activePanes.length - 1 : index, 'previous');
           }
         }
       }
@@ -3123,39 +3144,62 @@ let IgcPaneNavigatorComponent = class {
     }
     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.selectedIndex = newValue >= this.allItems.length ? 0 : newValue;
+    this.navigateToIndex(newValue, 'next');
   }
   decreaseSelectedIndex(amount = 1) {
     const newValue = this.selectedIndex - amount;
-    this.selectedIndex = newValue < 0 ? this.allItems.length - 1 : newValue;
+    this.navigateToIndex(newValue, 'previous');
   }
   connectedCallback() {
     this.allItems = [...this.activePanes, ...this.activeDocuments];
   }
   componentDidLoad() {
     this.paneNav.focus();
-    this.allItemsElement = Array.from(this.paneNav.querySelectorAll('.item'));
+    this.allItemsElement = Array.from(this.paneNav.querySelectorAll('[part~=item]'));
+    this.navigateToIndex(this.selectedIndex, 'next');
     this.scrollItemToView();
   }
-  resolveItemClass(index, isDocHost) {
-    return {
-      'item': true,
-      'item--selected': isDocHost ? index === this.selectedIndex - this.activePanes.length : index === this.selectedIndex
-    };
+  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: "item", class: "group" }, index.h("h4", { part: "title", class: "title" }, title), index.h("section", { class: "items" }, items === null || items === void 0 ? void 0 : items.map((a, index$1) => {
-      return (index.h("div", { part: "content", class: this.resolveItemClass(index$1, isDocHost), onMouseDown: () => this.selectItem(index$1, isDocHost), onMouseUp: () => this.closed.emit(this.allItems[this.selectedIndex]) }, a.header));
+    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                     item: pane-navigator-items-group, title: pane-navigator-items-group-title, content: pane-navigator-item" }, 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)))));
+    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;
@@ -3426,7 +3470,7 @@ let IgcSplitterComponent = class {
 };
 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(.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(.bottom){border-top-width:0;border-bottom-width:1px}:host(.bottom):first-of-type{border-left:none}:host(.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(.active) igc-icon-component{color:var(--igc-active-color, cornflowerblue)}";
+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) {
@@ -3441,6 +3485,7 @@ let IgcTabHeaderComponent = class {
     this.elementDisconnected = index.createEvent(this, "elementDisconnected", 7);
     this.selected = false;
     this.position = IgcTabHeadersPosition.top;
+    this.disabled = false;
     this.iconClick = (ev) => {
       this.iconClicked.emit(ev);
     };
@@ -3480,22 +3525,18 @@ let IgcTabHeaderComponent = class {
     }
   }
   render() {
-    const tabClasses = {
-      'active': this.isActive,
-      'selected': this.selected,
-      'bottom': this.position === IgcTabHeadersPosition.bottom
-    };
     const parts = Utils.partNameMap({
-      'tab-header': 'tab-header',
+      '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', tabIndex: this.selected ? 0 : -1, class: tabClasses }, index.h("slot", null), this.iconName &&
+    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 ? 'all' : 'none'
+          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); }
@@ -3505,7 +3546,7 @@ let IgcTabHeaderComponent = class {
 };
 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))}";
+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) {
@@ -3513,6 +3554,7 @@ let IgcTabPanelComponent = class {
     this.selectedChanged = index.createEvent(this, "selectedChanged", 7);
     this.emitSelectedChanged = false;
     this.selected = false;
+    this.disabled = false;
   }
   selectedPropChange() {
     this.emitSelectedChanged = true;
@@ -3524,7 +3566,12 @@ let IgcTabPanelComponent = class {
     }
   }
   render() {
-    return (index.h(index.Host, { role: "tabpanel", style: {
+    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)));
   }
@@ -3564,15 +3611,21 @@ let IgcTabsComponent = class {
         return;
       }
       if (ev.key === 'ArrowRight') {
-        if (this.selectedIndex < tabHeaders.length - this.hiddenTabHeaders.length - 1) {
-          this.selectedIndex++;
-          tabHeaders[this.selectedIndex].focus();
+        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') {
-        if (this.selectedIndex > 0) {
-          this.selectedIndex--;
-          tabHeaders[this.selectedIndex].focus();
+        for (let i = this.selectedIndex; i > 0; i--) {
+          if (!tabHeaders[i - 1].disabled) {
+            this.selectedIndex = i - 1;
+            tabHeaders[i - 1].focus();
+            return;
+          }
         }
       }
     };
@@ -3677,6 +3730,7 @@ let IgcTabsComponent = class {
     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);
@@ -3734,18 +3788,22 @@ let IgcTabsComponent = class {
 };
 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(.vertical){-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;margin-right:unset;margin-bottom:4px}:host(.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(.vertical.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)}";
+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;
-    return (index.h(index.Host, { part: "unpinned-pane-header", role: "tab", tabindex: "0", class: {
-        'vertical': !isHorizontal,
-        'active': this.isActive
-      } }, index.h("slot", null)));
+    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;
@@ -4101,6 +4159,12 @@ let SampleComponent = class {
     });
     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;
@@ -4218,7 +4282,7 @@ let SampleComponent = class {
   //   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("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(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()}

package/dist/cjs/igniteui-dockmanager.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"]]],[1,"igc-tabs-component",{"size":[2],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"]},[[1,"mousedown","handleMouseDown"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[2,"igc-splitter-component",{"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"showDragGhost":[32],"dragOffset":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"]}],[1,"igc-context-menu-component",{"orientation":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
+  return index.bootstrapLazy([["igc-button-component_20.cjs",[[2,"sample-component",{"hiddenPanes":[1040]}],[1,"igc-dockmanager",{"navigationPaneMeta":[1040],"allowMaximize":[4,"allow-maximize"],"maximizedPane":[1040],"resourceStrings":[1040],"allowFloatingPanesResize":[4,"allow-floating-panes-resize"],"disableKeyboardNavigation":[4,"disable-keyboard-navigation"],"layout":[1040],"draggedPane":[1040],"dropPosition":[16],"activePane":[1040],"dropTargetPaneInfo":[32],"flyoutPane":[32],"floatingPaneZIndicesMap":[32],"contextMenuMeta":[32],"dropShadowRect":[32],"dropPane":[64],"removePane":[64]},[[0,"focusout","handleFocusOut"],[0,"keydown","handleKeyDown"]]],[1,"igc-tabs-component",{"size":[2],"tabHeadersPosition":[1,"tab-headers-position"],"selectedIndex":[1026,"selected-index"],"hasHeaders":[4,"has-headers"],"showHiddenTabsMenu":[4,"show-hidden-tabs-menu"],"resourceStrings":[16],"hiddenTabsMenuMeta":[32],"hasHiddenTabs":[32]},[[0,"tabMouseDown","handleTabMouseDown"]]],[2,"igc-joystick-indicator-component",{"dropTargetPaneInfo":[16],"documentOnlyDrag":[4,"document-only-drag"]}],[1,"igc-pane-header-component",{"dragService":[1040],"pinned":[4],"maximized":[4],"isFloating":[4,"is-floating"],"forcedDrag":[4,"forced-drag"],"isFloatingPaneHeader":[4,"is-floating-pane-header"],"allowClose":[4,"allow-close"],"allowMaximize":[4,"allow-maximize"],"allowPinning":[4,"allow-pinning"],"pane":[16],"isActive":[4,"is-active"],"disabled":[4],"resourceStrings":[16]}],[1,"igc-tab-header-component",{"dragService":[1040],"selected":[4],"position":[1],"iconName":[1,"icon-name"],"header":[1],"isActive":[4,"is-active"],"resourceStrings":[16],"forcedDrag":[4,"forced-drag"],"disabled":[4]},[[1,"mousedown","handleMouseDown"]]],[1,"igc-floating-pane-component",{"allowResize":[4,"allow-resize"],"floatingLocation":[16],"floatingWidth":[2,"floating-width"],"floatingHeight":[2,"floating-height"],"hasHeader":[4,"has-header"],"maximized":[4],"floatingMinHeight":[2,"floating-min-height"],"floatingMinWidth":[2,"floating-min-width"]}],[2,"igc-root-docking-indicator-component",{"position":[1]}],[1,"igc-content-pane-component",{"size":[2],"isFlyout":[4,"is-flyout"],"unpinnedSize":[2,"unpinned-size"],"header":[1],"disabled":[4],"isSingleFloating":[4,"is-single-floating"]}],[2,"igc-document-host-component",{"size":[2]}],[1,"igc-pane-navigator-component",{"activeDocuments":[16],"activePanes":[16],"selectedIndex":[1026,"selected-index"],"previousActivePaneIndex":[2,"previous-active-pane-index"],"resourceStrings":[16]},[[0,"keyup","handleKeyUp"],[0,"keydown","handleKeydown"]]],[2,"igc-split-pane-component",{"orientation":[1],"size":[2]}],[2,"igc-splitter-component",{"splitPaneOrientation":[1,"split-pane-orientation"],"flyoutLocation":[1,"flyout-location"],"showDragGhost":[32],"dragOffset":[32]},[[0,"keydown","handleKeydownEvent"],[1,"mousedown","handleMouseDown"]]],[1,"igc-tab-panel-component",{"selected":[4],"disabled":[4]}],[1,"igc-unpinned-pane-header-component",{"location":[1],"isActive":[4,"is-active"],"disabled":[4]}],[1,"igc-context-menu-component",{"orientation":[1],"target":[16],"items":[16],"activeIndex":[1026,"active-index"]},[[0,"focusout","emitMenuClosed"]]],[2,"igc-joystick-icon-component",{"isDocHost":[4,"is-doc-host"],"position":[1],"empty":[4]}],[2,"igc-resizer-component",{"orientation":[1],"dragOffsetX":[32],"dragOffsetY":[32]}],[1,"igc-button-component",{"disabled":[4],"name":[513],"type":[513],"value":[513]}],[2,"igc-icon-component",{"name":[1]}]]]], options);
 });