igniteui-dockmanager 2.1.2 → 2.1.3

package/common/util.d.ts

@@ -2,3 +2,4 @@ export interface PartNameInfo {
     readonly [name: string]: string | boolean | number;
 }
 export declare const partNameMap: (partNameInfo: PartNameInfo) => string;
+export declare const exportPartsMap: (partNameInfo: PartNameInfo) => string;

package/common/util.js

@@ -3,3 +3,8 @@ export const partNameMap = (partNameInfo) => {
         .filter((key) => partNameInfo[key])
         .join(' ');
 };
+export const exportPartsMap = (partNameInfo) => {
+    return Object.keys(partNameInfo)
+        .filter((key) => partNameInfo[key])
+        .join(', ');
+};

package/components/dockmanager/dockmanager-component.js

@@ -2012,6 +2012,10 @@ export default class IgcDockManagerComponent extends EventEmitterMixin(LitElemen
         this.activePane = this.service.getVisibleContentPanes(pane)[event.detail];
     }
     handleSelectedTabOutOfView(pane, event) {
+        if (this.panesElementMap.get(pane) !== event.target) {
+            event.stopPropagation();
+            return;
+        }
         const cp = pane.panes[event.detail];
         if (cp && this.service.getVisibleContentPanes(pane).indexOf(cp) >= 0) {
             this.service.selectHiddenTab(pane, cp);

package/components/dockmanager/pane-navigator/pane-navigator-component.js

@@ -39,6 +39,7 @@ export default class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElem
         this._allItems = [...this.activePanes, ...this.activeDocuments];
         this.addEventListener('keyup', this._handleKeyUp);
         this.addEventListener('keydown', this._handleKeyDown);
+        this.setAttribute('exportparts', 'base: pane-navigator, header: pane-navigator-header, body: pane-navigator-body, group: pane-navigator-items-group, title: pane-navigator-items-group-title, item: pane-navigator-item, selected, disabled');
     }
     firstUpdated() {
         const element = this._paneNav.value;
@@ -171,8 +172,6 @@ export default class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElem
         @click=${() => this.emitEvent('igcClosed', {
             detail: this._allItems[this.previousActivePaneIndex],
         })}
-        exportparts="base: pane-navigator, header: pane-navigator-header, body: pane-navigator-body,
-                     group: pane-navigator-items-group, title: pane-navigator-items-group-title, item: pane-navigator-item, selected, disabled"
       >
         <article
           part="base"

package/components/dockmanager/panes/content-pane-component.d.ts

@@ -110,6 +110,7 @@ export default class IgcContentPaneComponent extends IgcContentPaneComponent_bas
     set minResizeHeight(value: number | undefined);
     get minResizeHeight(): number;
     connectedCallback(): void;
+    protected _headerChanged(): void;
     protected updated(): void;
     private _updateFlex;
     private _updateParts;

package/components/dockmanager/panes/content-pane-component.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { watch } from '../../../common/decorators/watch.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../utils/utils.js';
@@ -99,6 +100,9 @@ export default class IgcContentPaneComponent extends EventEmitterMixin(LitElemen
         this._updateParts();
         this._updateFlex();
     }
+    _headerChanged() {
+        this._updateParts();
+    }
     updated() {
         this.emitEvent('igcRendered', {
             detail: this,
@@ -163,3 +167,6 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'min-resize-height' })
 ], IgcContentPaneComponent.prototype, "minResizeHeight", null);
+__decorate([
+    watch('header', { waitUntilFirstUpdate: true })
+], IgcContentPaneComponent.prototype, "_headerChanged", null);

package/components/dockmanager/panes/pane-header-component.js

@@ -11,7 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../../common/decorators/watch.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
-import { partNameMap } from '../../../common/util.js';
+import { exportPartsMap, partNameMap } from '../../../common/util.js';
 import { convertToIgcResource } from '../../../utils/locale.js';
 import IgcButtonDMComponent from '../../button/button-component.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
@@ -108,7 +108,7 @@ export default class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement
             'pane-header': true,
             ...this.commonParts,
         });
-        const exportParts = partNameMap({
+        const exportParts = exportPartsMap({
             'pane-header': true,
             'pane-header-actions': true,
             'pane-header-content': true,

package/components/tabs/tab-header-component.d.ts

@@ -118,6 +118,7 @@ export default class IgcTabHeaderComponent extends IgcTabHeaderComponent_base {
     private _updateParts;
     /** @internal */
     disconnectedCallback(): void;
+    protected _headerChanged(): void;
     protected _forcedDragChanged(): void;
     private _forceDragging;
     protected _activeChanged(): void;

package/components/tabs/tab-header-component.js

@@ -10,7 +10,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { partNameMap } from '../../common/util.js';
+import { exportPartsMap, partNameMap } from '../../common/util.js';
 import IgcButtonDMComponent from '../button/button-component.js';
 import { IgcDragService, } from '../drag-drop/drag.service.js';
 import IgcIconDMComponent from '../icon/icon-component.js';
@@ -104,7 +104,7 @@ export default class IgcTabHeaderComponent extends EventEmitterMixin(LitElement)
             'hover-preview-options': showMoreOptionsOnHover,
             bottom: this.position === 'bottom',
         });
-        const exportParts = partNameMap({
+        const exportParts = exportPartsMap({
             'tab-header-close-button': true,
             'tab-header-more-options': true,
             'tab-header-more-options-button': true,
@@ -128,6 +128,9 @@ export default class IgcTabHeaderComponent extends EventEmitterMixin(LitElement)
         this.removeEventListener('pointerenter', this._handlePointerEnter);
         this.removeEventListener('pointerleave', this._handlePointerLeave);
     }
+    _headerChanged() {
+        this._updateParts();
+    }
     _forcedDragChanged() {
         this._forceDragging();
     }
@@ -278,6 +281,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], IgcTabHeaderComponent.prototype, "showHeaderIconOnHover", void 0);
+__decorate([
+    watch('header', { waitUntilFirstUpdate: true })
+], IgcTabHeaderComponent.prototype, "_headerChanged", null);
 __decorate([
     watch('forcedDrag', { waitUntilFirstUpdate: true })
 ], IgcTabHeaderComponent.prototype, "_forcedDragChanged", null);

package/components/tabs/tabs-component.js

@@ -11,7 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
-import { partNameMap } from '../../common/util.js';
+import { exportPartsMap, partNameMap } from '../../common/util.js';
 import IgcButtonDMComponent from '../button/button-component.js';
 import IgcContextMenuComponent from '../context-menu/context-menu.js';
 import { IGC_DEFAULT_PANE_SIZE, } from '../dockmanager/dockmanager.interfaces.js';
@@ -171,7 +171,7 @@ export default class IgcTabsComponent extends EventEmitterMixin(LitElement) {
         const bottom = this.tabHeadersPosition === 'bottom';
         const contentIds = this.contentIds.join(' ');
         const parts = `tabs-container ${contentIds}`;
-        const exportParts = partNameMap({
+        const exportParts = exportPartsMap({
             'tab-strip-area': true,
             'tab-strip-actions': true,
             'tabs-content': true,