igniteui-dockmanager 2.1.0-RC.0 → 2.2.0-alpha.0

package/README.md

@@ -3,7 +3,7 @@
 [Ignite UI Dock Manager Web Component](https://www.infragistics.com/) 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.
 
 > [!IMPORTANT]
-> **Version 2.0+ Notice:** The Dock Manager has been migrated from Stencil to **Lit**. For the legacy Stencil-based version, please refer to the [1.18.x branch](https://github.com/IgniteUI/dock-manager/tree/1.18.x).
+> **Version 2.0+ Notice:** The Dock Manager has been migrated from Stencil to **Lit**. For the legacy Stencil-based version, please refer to the [1.x branch](https://github.com/IgniteUI/dock-manager/tree/1.x).
 
 ## NPM Package
 
@@ -26,9 +26,9 @@ defineComponents(IgcDockManagerComponent);
 
 ```
 
-### Legacy Stencil Version (v1.18.x)
+### Legacy Stencil Version (v1.x)
 
-If you are using the version from the `1.18.x` branch, it is necessary to import and call the `defineCustomElements()` function:
+If you are using the version from the `1.x` branch, it is necessary to import and call the `defineCustomElements()` function:
 
 ```ts
 import { defineCustomElements } from 'igniteui-dockmanager/loader';
@@ -65,7 +65,7 @@ To ensure stability for our customers, we maintain the following branch structur
 | --- | --- | --- | --- |
 | `master` | Stable | **Lit** | Active Development |
 | `develop` | Bleeding Edge | **Lit** | Integration |
-| `1.18.x` | Legacy LTS | **Stencil** | Security & Critical Bug fixes Only |
+| `1.x` | Legacy LTS | **Stencil** | Security & Critical Bug fixes Only |
 
 ## Support
 

package/custom-elements.json

@@ -5393,6 +5393,30 @@
           },
           "tagName": "igc-dockmanager",
           "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "headerRect"
+        },
+        {
+          "kind": "variable",
+          "name": "tabsRect"
+        },
+        {
+          "kind": "variable",
+          "name": "prevHeaderRect"
+        },
+        {
+          "kind": "variable",
+          "name": "nextHeaderRect"
+        },
+        {
+          "kind": "variable",
+          "name": "lastVisibleHeaderRect"
+        },
+        {
+          "kind": "variable",
+          "name": "maximized"
         }
       ],
       "exports": [
@@ -7423,6 +7447,36 @@
               ]
             }
           ]
+        },
+        {
+          "kind": "variable",
+          "name": "panes",
+          "type": {
+            "text": "IgcContentPane[]"
+          },
+          "default": "[]"
+        },
+        {
+          "kind": "variable",
+          "name": "location"
+        },
+        {
+          "kind": "variable",
+          "name": "newValue",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "!this.getActualIsPinned(pane)"
+        },
+        {
+          "kind": "variable",
+          "name": "newWidth",
+          "default": "currW"
+        },
+        {
+          "kind": "variable",
+          "name": "newHeight",
+          "default": "currH"
         }
       ],
       "exports": [
@@ -9836,6 +9890,10 @@
           },
           "tagName": "igc-tabs-component",
           "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "top"
         }
       ],
       "exports": [
@@ -10511,118 +10569,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/dockmanager/keyboard/keyboard.service.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "IgcDockManagerKeyboardService",
-          "members": [
-            {
-              "kind": "method",
-              "name": "handleKeydown",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusPane",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDockPane",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleRootDockPane",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleInnerDockPane",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setPaneNavigatorMeta",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "altKey",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "ctrlOrMetaKey",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "shiftKey",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "IgcDockManagerKeyboardService",
-          "declaration": {
-            "name": "IgcDockManagerKeyboardService",
-            "module": "src/components/dockmanager/keyboard/keyboard.service.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/dockmanager/pane-navigator/pane-navigator-component.ts",
@@ -11107,6 +11053,122 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dockmanager/keyboard/keyboard.service.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "IgcDockManagerKeyboardService",
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocusPane",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDockPane",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleRootDockPane",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInnerDockPane",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setPaneNavigatorMeta",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "altKey",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "ctrlOrMetaKey",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "shiftKey",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "previousActivePaneIndex"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IgcDockManagerKeyboardService",
+          "declaration": {
+            "name": "IgcDockManagerKeyboardService",
+            "module": "src/components/dockmanager/keyboard/keyboard.service.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/dockmanager/panes/content-pane-component.ts",

package/dist/LICENSE

@@ -0,0 +1,13 @@
+This is a commercial product, requiring a valid paid-for license for commercial use.
+This product is free to use for non-commercial educational use for students in K through 12 grades
+or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum.
+
+In order for us to verify your eligibility for free usage, please register for trial at
+https://www.infragistics.com/free-downloads and open a support ticket with a request for free license.
+
+To acquire a license for commercial usage, please register for trial at https://www.infragistics.com/free-downloads
+and refer to the purchasing options in the pricing section on the product page.
+
+© Copyright 2020 INFRAGISTICS. All Rights Reserved.
+The Infragistics Ultimate license & copyright applies to this distribution.
+For information on that license, please go to our website https://www.infragistics.com/legal/license.

package/dist/README.md

@@ -0,0 +1,84 @@
+# Ignite UI Dock Manager Web Component - from Infragistics
+
+[Ignite UI Dock Manager Web Component](https://www.infragistics.com/) 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.
+
+> [!IMPORTANT]
+> **Version 2.0+ Notice:** The Dock Manager has been migrated from Stencil to **Lit**. For the legacy Stencil-based version, please refer to the [1.x branch](https://github.com/IgniteUI/dock-manager/tree/1.x).
+
+## NPM Package
+
+You can include the Ignite UI Dock Manager Web Component in your project as a dependency using the NPM package.
+
+```
+npm install igniteui-dockmanager --save
+```
+
+## Usage
+
+### Lit Version (v2.0+)
+
+In the new Lit-based version, you simply import the component and call the `defineComponents()` function:
+
+```ts
+import { defineComponents, IgcDockManagerComponent } from 'igniteui-dockmanager';
+
+defineComponents(IgcDockManagerComponent);
+
+```
+
+### Legacy Stencil Version (v1.x)
+
+If you are using the version from the `1.x` branch, it is necessary to import and call the `defineCustomElements()` function:
+
+```ts
+import { defineCustomElements } from 'igniteui-dockmanager/loader';
+
+defineCustomElements();
+
+```
+
+Once the Dock Manager is imported, you can add it on the page:
+
+```html
+<igc-dockmanager id="dockManager">
+</igc-dockmanager>
+```
+
+More information on how to use the Ignite UI Dock Manager Web Component can be found [here](https://infragistics.com/products/ignite-ui-web-components/web-components/components/dock-manager.html).
+
+### Localization
+
+To localize the Dock Manager strings, install the peer dependency `igniteui-i18n-resources` and register a language bundle with `igniteui-i18n-core`:
+
+```ts
+import { registerI18n } from 'igniteui-i18n-core';
+import { DockManagerResourceStringsES } from 'igniteui-i18n-resources';
+
+registerI18n(DockManagerResourceStringsES, 'es');
+```
+
+## Branching & Maintenance
+
+To ensure stability for our customers, we maintain the following branch structure:
+
+| Branch | Status | Framework | Support |
+| --- | --- | --- | --- |
+| `master` | Stable | **Lit** | Active Development |
+| `develop` | Bleeding Edge | **Lit** | Integration |
+| `1.x` | Legacy LTS | **Stencil** | Security & Critical Bug fixes Only |
+
+## Support
+
+Developer support is provided as part of the commercial, paid-for license via [Infragistics Forums](https://www.infragistics.com/community/forums/), or via Chat & Phone with a Priority Support license.  To acquire a license for paid support or Priority Support, please visit this [page](https://www.infragistics.com/how-to-buy/product-pricing#developers).
+
+## License
+
+This is a commercial product, requiring a valid paid-for license for commercial use.  
+This product is free to use for non-commercial educational use for students in K through 12 grades or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum.
+In order for us to verify your eligibility for free usage, please [register for trial](https://www.infragistics.com/free-downloads) and open a support ticket with a request for free license.
+
+To acquire a license for commercial usage, please [register for trial](https://www.infragistics.com/free-downloads) and refer to the purchasing options in the pricing section on the product page.  
+
+© Copyright 2020 INFRAGISTICS. All Rights Reserved. 
+The Infragistics Ultimate license & copyright applies to this distribution. 
+For information on that license, please go to our website [https://www.infragistics.com/legal/license](https://www.infragistics.com/legal/license).

package/{components → dist/components}/button/button-component.js

@@ -8,7 +8,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { styles } from './button-component.css.js';
-class IgcButtonDMComponent extends LitElement {
+export default class IgcButtonDMComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
@@ -16,6 +16,8 @@ class IgcButtonDMComponent extends LitElement {
         this.name = '';
         this.value = '';
     }
+    static { this.tagName = 'igc-button-component'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcButtonDMComponent);
     }
@@ -33,9 +35,6 @@ class IgcButtonDMComponent extends LitElement {
     `;
     }
 }
-IgcButtonDMComponent.tagName = 'igc-button-component';
-IgcButtonDMComponent.styles = [styles];
-export default IgcButtonDMComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcButtonDMComponent.prototype, "disabled", void 0);

package/{components → dist/components}/context-menu/context-menu.js

@@ -12,7 +12,9 @@ import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../utils/utils.js';
 import IgcIconDMComponent from '../icon/icon-component.js';
 import { styles } from './context-menu.css.js';
-class IgcContextMenuComponent extends EventEmitterMixin(LitElement) {
+export default class IgcContextMenuComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-context-menu'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcContextMenuComponent, IgcIconDMComponent);
     }
@@ -232,9 +234,6 @@ class IgcContextMenuComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcContextMenuComponent.tagName = 'igc-context-menu';
-IgcContextMenuComponent.styles = [styles];
-export default IgcContextMenuComponent;
 __decorate([
     state()
 ], IgcContextMenuComponent.prototype, "activeIndex", void 0);

package/{components → dist/components}/dockmanager/docking/edge-docking-indicator-component.js

@@ -9,7 +9,9 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './edge-docking-indicator-component.css.js';
-class IgcEdgeDockingIndicatorComponent extends LitElement {
+export default class IgcEdgeDockingIndicatorComponent extends LitElement {
+    static { this.tagName = 'igc-edge-docking-indicator'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcEdgeDockingIndicatorComponent, IgcIconDMComponent);
     }
@@ -38,9 +40,6 @@ class IgcEdgeDockingIndicatorComponent extends LitElement {
     `;
     }
 }
-IgcEdgeDockingIndicatorComponent.tagName = 'igc-edge-docking-indicator';
-IgcEdgeDockingIndicatorComponent.styles = [styles];
-export default IgcEdgeDockingIndicatorComponent;
 __decorate([
     property({ type: String })
 ], IgcEdgeDockingIndicatorComponent.prototype, "position", void 0);

package/{components → dist/components}/dockmanager/docking/joystick-icon-component.js

@@ -9,13 +9,15 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './joystick-icon-component.css.js';
-class IgcJoystickIconComponent extends LitElement {
+export default class IgcJoystickIconComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.isDocHost = false;
         this.direction = 'ltr';
         this.empty = false;
     }
+    static { this.tagName = 'igc-joystick-icon'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcJoystickIconComponent, IgcIconDMComponent);
     }
@@ -192,9 +194,6 @@ class IgcJoystickIconComponent extends LitElement {
         return html ` ${!this.empty ? this._renderIcon() : nothing} `;
     }
 }
-IgcJoystickIconComponent.tagName = 'igc-joystick-icon';
-IgcJoystickIconComponent.styles = [styles];
-export default IgcJoystickIconComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcJoystickIconComponent.prototype, "isDocHost", void 0);

package/{components → dist/components}/dockmanager/docking/joystick-indicator-component.js

@@ -11,13 +11,15 @@ import { registerComponent } from '../../../common/definitions/register.js';
 import { closestElement, getDirection } from '../../../utils/utils.js';
 import IgcJoystickIconComponent from './joystick-icon-component.js';
 import { styles } from './joystick-indicator-component.css.js';
-class IgcJoystickIndicatorComponent extends LitElement {
+export default class IgcJoystickIndicatorComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.isDocHost = false;
         this.documentOnlyDrag = false;
         this.allowCenterDock = false;
     }
+    static { this.tagName = 'igc-joystick-indicator'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcJoystickIndicatorComponent, IgcJoystickIconComponent);
     }
@@ -107,9 +109,6 @@ class IgcJoystickIndicatorComponent extends LitElement {
     `;
     }
 }
-IgcJoystickIndicatorComponent.tagName = 'igc-joystick-indicator';
-IgcJoystickIndicatorComponent.styles = [styles];
-export default IgcJoystickIndicatorComponent;
 __decorate([
     state()
 ], IgcJoystickIndicatorComponent.prototype, "isDocHost", void 0);

package/{components → dist/components}/dockmanager/docking/root-docking-indicator-component.js

@@ -9,7 +9,9 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './root-docking-indicator-component.css.js';
-class IgcRootDockingIndicatorComponent extends LitElement {
+export default class IgcRootDockingIndicatorComponent extends LitElement {
+    static { this.tagName = 'igc-root-docking-indicator'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcRootDockingIndicatorComponent, IgcIconDMComponent);
     }
@@ -38,9 +40,6 @@ class IgcRootDockingIndicatorComponent extends LitElement {
     `;
     }
 }
-IgcRootDockingIndicatorComponent.tagName = 'igc-root-docking-indicator';
-IgcRootDockingIndicatorComponent.styles = [styles];
-export default IgcRootDockingIndicatorComponent;
 __decorate([
     property({ type: String })
 ], IgcRootDockingIndicatorComponent.prototype, "position", void 0);

package/{components → dist/components}/dockmanager/docking/splitter-docking-indicator-component.js

@@ -9,7 +9,9 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './splitter-docking-indicator-component.css.js';
-class IgcSplitterDockingIndicatorComponent extends LitElement {
+export default class IgcSplitterDockingIndicatorComponent extends LitElement {
+    static { this.tagName = 'igc-splitter-docking-indicator'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcSplitterDockingIndicatorComponent, IgcIconDMComponent);
     }
@@ -31,9 +33,6 @@ class IgcSplitterDockingIndicatorComponent extends LitElement {
     `;
     }
 }
-IgcSplitterDockingIndicatorComponent.tagName = 'igc-splitter-docking-indicator';
-IgcSplitterDockingIndicatorComponent.styles = [styles];
-export default IgcSplitterDockingIndicatorComponent;
 __decorate([
     property({ type: String })
 ], IgcSplitterDockingIndicatorComponent.prototype, "position", void 0);

package/{components → dist/components}/dockmanager/dockmanager-component.js

@@ -46,7 +46,9 @@ var ActionReason;
     ActionReason["maximizeOrMinimize"] = "maximizeOrMinimize";
 })(ActionReason || (ActionReason = {}));
 const PANE_HEADER_HEIGHT = 40;
-class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
+export default class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-dockmanager'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcDockManagerComponent, IgcContentPaneComponent, IgcContextMenuComponent, IgcDocumentHostComponent, IgcFloatingPaneComponent, IgcJoystickIndicatorComponent, IgcEdgeDockingIndicatorComponent, IgcPaneHeaderComponent, IgcPaneNavigatorComponent, IgcRootDockingIndicatorComponent, IgcSplitPaneComponent, IgcSplitterComponent, IgcSplitterDockingIndicatorComponent, IgcTabHeaderComponent, IgcTabPanelComponent, IgcTabsComponent, IgcTrialWatermark, IgcUnpinnedPaneHeaderComponent);
     }
@@ -3000,9 +3002,6 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcDockManagerComponent.tagName = 'igc-dockmanager';
-IgcDockManagerComponent.styles = [styles];
-export default IgcDockManagerComponent;
 __decorate([
     state()
 ], IgcDockManagerComponent.prototype, "dropTargetPaneInfo", void 0);

package/{components → dist/components}/dockmanager/pane-navigator/pane-navigator-component.js

@@ -12,7 +12,7 @@ import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../common/util.js';
 import { isControlOrMetaPressed } from '../../../utils/utils.js';
 import { styles } from './pane-navigator-component.css.js';
-class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElement) {
+export default class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._paneNav = createRef();
@@ -28,6 +28,8 @@ class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElement) {
             }
         };
     }
+    static { this.tagName = 'igc-pane-navigator'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcPaneNavigatorComponent);
     }
@@ -191,9 +193,6 @@ class IgcPaneNavigatorComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcPaneNavigatorComponent.tagName = 'igc-pane-navigator';
-IgcPaneNavigatorComponent.styles = [styles];
-export default IgcPaneNavigatorComponent;
 __decorate([
     state()
 ], IgcPaneNavigatorComponent.prototype, "_allItems", void 0);