igniteui-dockmanager 2.1.1 → 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

@@ -1989,7 +1989,7 @@ export default class IgcDockManagerComponent extends EventEmitterMixin(LitElemen
     }
     handlePaneContentPointerDown(pane) {
         requestAnimationFrame(() => {
-            const rootNode = this.shadowRoot ?? document;
+            const rootNode = this.getRootNode();
             if (this === rootNode.activeElement ||
                 !this.contains(rootNode.activeElement)) {
                 this.setFocus(pane);
@@ -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/dockmanager.service.d.ts

@@ -22,6 +22,7 @@ export declare class IgcDockManagerService {
     private isUpdatingLayout;
     private lastSwapCenter;
     private _splitterSize;
+    private _previousLocationMap;
     visibleDocuments: IgcContentPane[];
     visibleContentPanes: IgcContentPane[];
     documentHosts: IgcDocumentHost[];

package/components/dockmanager/dockmanager.service.js

@@ -11,6 +11,7 @@ export class IgcDockManagerService {
         this.contentPanesCache = [];
         this.isUpdatingLayout = false;
         this._splitterSize = null;
+        this._previousLocationMap = null;
         this.visibleDocuments = [];
         this.visibleContentPanes = [];
         this.documentHosts = [];
@@ -111,17 +112,22 @@ export class IgcDockManagerService {
         }
     }
     resolvePaneUnpinLocation(pane) {
-        let unpinnedLocation;
         if (pane.unpinnedLocation) {
-            unpinnedLocation = pane.unpinnedLocation;
+            return pane.unpinnedLocation;
         }
-        else {
-            const documentHost = this.findClosestDocumentHost(pane);
-            unpinnedLocation = documentHost
-                ? this.findPaneUnpinLocation(pane, documentHost)
-                : 'left';
+        const documentHost = this.findClosestDocumentHost(pane);
+        if (documentHost) {
+            const panePath = this.getPanePath(pane);
+            const docHostPath = this.getPanePath(documentHost);
+            if (panePath.length > 0 &&
+                docHostPath.length > 0 &&
+                panePath[0] === docHostPath[0]) {
+                return this.findPaneUnpinLocation(pane, documentHost);
+            }
         }
-        return unpinnedLocation;
+        const previousLocation = this._previousLocationMap?.get(pane.contentId) ??
+            this.unpinnedLocationMap.get(pane);
+        return previousLocation ?? 'left';
     }
     addContentPanePinLocation(pane) {
         if (pane.isPinned === false) {
@@ -654,6 +660,10 @@ export class IgcDockManagerService {
             .filter((pane) => pane && pane.id != null)
             .map((pane) => pane.id);
         this.paneParentMap = new Map();
+        this._previousLocationMap = new Map();
+        for (const [pane, location] of this.unpinnedLocationMap) {
+            this._previousLocationMap.set(pane.contentId, location);
+        }
         this.unpinnedLocationMap = new Map();
         this.clientContentPanesMap = new Map();
         this.documentHosts = [];
@@ -680,6 +690,7 @@ export class IgcDockManagerService {
                 }
             }
             this.populatePinLocations(layout.rootPane);
+            this._previousLocationMap = null;
             if (this.dockManager.flyoutPane &&
                 !this.unpinnedLocationMap.has(this.dockManager.flyoutPane)) {
                 this.setFlyoutPane(null, this.dockManager.flyoutPane);

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,

package/custom-elements.json

@@ -466,6 +466,18 @@
               }
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "exportPartsMap",
+          "parameters": [
+            {
+              "name": "partNameInfo",
+              "type": {
+                "text": "PartNameInfo"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -476,6 +488,14 @@
             "name": "partNameMap",
             "module": "src/common/util.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "exportPartsMap",
+          "declaration": {
+            "name": "exportPartsMap",
+            "module": "src/common/util.ts"
+          }
         }
       ]
     },
@@ -5879,6 +5899,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_previousLocationMap",
+              "type": {
+                "text": "Map<string, UnpinnedLocation> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "visibleDocuments",
@@ -8571,6 +8600,11 @@
               "name": "_updateParts",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_headerChanged",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_forcedDragChanged",
@@ -11388,6 +11422,11 @@
                 "text": "number"
               }
             },
+            {
+              "kind": "method",
+              "name": "_headerChanged",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_updateFlex",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "igniteui-dockmanager",
-    "version":  "2.1.1",
+    "version":  "2.1.3",
     "description":  "Ignite UI Dock Manager Web Component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes.",
     "author":  "Infragistics",
     "license":  "SEE LICENSE IN LICENSE",