igniteui-dockmanager 2.0.0-alpha.4 → 2.0.0-alpha.6

package/custom-elements.json

@@ -23,6 +23,190 @@
             "module": "./common/definitions/defineComponents.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "IgcButtonDMComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/button/button-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContextMenuEventMap",
+          "declaration": {
+            "name": "IgcContextMenuEventMap",
+            "module": "./components/context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContextMenuComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcJoystickIconComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/docking/joystick-icon-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcJoystickIndicatorComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/docking/joystick-indicator-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcRootDockingIndicatorComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/docking/root-docking-indicator-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitterDockingIndicatorComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/docking/splitter-docking-indicator-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContextMenuOrientation",
+          "declaration": {
+            "name": "IgcContextMenuOrientation",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContextMenuPosition",
+          "declaration": {
+            "name": "IgcContextMenuPosition",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockingIndicatorPosition",
+          "declaration": {
+            "name": "IgcDockingIndicatorPosition",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManagerPaneType",
+          "declaration": {
+            "name": "IgcDockManagerPaneType",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneActionBehavior",
+          "declaration": {
+            "name": "IgcPaneActionBehavior",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneDragActionType",
+          "declaration": {
+            "name": "IgcPaneDragActionType",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcResizerLocation",
+          "declaration": {
+            "name": "IgcResizerLocation",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitPaneOrientation",
+          "declaration": {
+            "name": "IgcSplitPaneOrientation",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabHeadersPosition",
+          "declaration": {
+            "name": "IgcTabHeadersPosition",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcUnpinnedLocation",
+          "declaration": {
+            "name": "IgcUnpinnedLocation",
+            "module": "./components/dockmanager/dockmanager.interfaces.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManager",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/dockmanager-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneNavigatorEventMap",
+          "declaration": {
+            "name": "IgcPaneNavigatorEventMap",
+            "module": "./components/dockmanager/pane-navigator/pane-navigator-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneNavigatorComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/pane-navigator/pane-navigator-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContentPaneComponentEventMap",
+          "declaration": {
+            "name": "IgcContentPaneComponentEventMap",
+            "module": "./components/dockmanager/panes/content-pane-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcContentPaneComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/content-pane-component.js"
+          }
+        },
         {
           "kind": "js",
           "name": "IgcDocumentHostComponent",
@@ -30,6 +214,216 @@
             "name": "default",
             "module": "./components/dockmanager/panes/document-host-component.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "IgcFloatingPaneEventMap",
+          "declaration": {
+            "name": "IgcFloatingPaneEventMap",
+            "module": "./components/dockmanager/panes/floating-pane-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcFloatingPaneComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/floating-pane-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneHeaderEventMap",
+          "declaration": {
+            "name": "IgcPaneHeaderEventMap",
+            "module": "./components/dockmanager/panes/pane-header-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcPaneHeaderComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/pane-header-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcResizerComponentEventMap",
+          "declaration": {
+            "name": "IgcResizerComponentEventMap",
+            "module": "./components/dockmanager/panes/resizer-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcResizerComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/resizer-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitPaneComponentEventMap",
+          "declaration": {
+            "name": "IgcSplitPaneComponentEventMap",
+            "module": "./components/dockmanager/panes/split-pane-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitPaneComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/split-pane-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitterEventMap",
+          "declaration": {
+            "name": "IgcSplitterEventMap",
+            "module": "./components/dockmanager/panes/splitter-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcSplitterComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/splitter-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcUnpinnedPaneHeaderComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/dockmanager/panes/unpinned-pane-header-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcIconDMComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/icon/icon-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabHeaderEventMap",
+          "declaration": {
+            "name": "IgcTabHeaderEventMap",
+            "module": "./components/tabs/tab-header-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabHeaderComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/tabs/tab-header-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabPanelEventMap",
+          "declaration": {
+            "name": "IgcTabPanelEventMap",
+            "module": "./components/tabs/tab-panel-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabPanelComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/tabs/tab-panel-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabsEventMap",
+          "declaration": {
+            "name": "IgcTabsEventMap",
+            "module": "./components/tabs/tabs-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcTabsComponent",
+          "declaration": {
+            "name": "default",
+            "module": "./components/tabs/tabs-component.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManagerResourceStringsEN",
+          "declaration": {
+            "name": "IgcDockManagerResourceStringsEN",
+            "module": "./i18n/resources.en.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManagerResourceStringsES",
+          "declaration": {
+            "name": "IgcDockManagerResourceStringsES",
+            "module": "./i18n/resources.es.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManagerResourceStringsJP",
+          "declaration": {
+            "name": "IgcDockManagerResourceStringsJP",
+            "module": "./i18n/resources.jp.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "IgcDockManagerResourceStringsKO",
+          "declaration": {
+            "name": "IgcDockManagerResourceStringsKO",
+            "module": "./i18n/resources.ko.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "addResourceStrings",
+          "declaration": {
+            "name": "addResourceStrings",
+            "module": "./utils/locale.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/loader.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "defineCustomElements",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "deprecated": "in 2.0.0 The `defineCustomElements` function and its import path (`@infragistics/igniteui-dockmanager/loader`) are deprecated.\n\nTo register your custom element, you should now directly use the `defineComponents` function\nprovided by the main package entry point, passing the IgcDockManager component:\n\nInstead of:\n```typescript\nimport { defineCustomElements } from '@infragistics/igniteui-dockmanager/loader';\n// ...\ndefineCustomElements();\n```\n\nPlease update your code to:\n```typescript\nimport { defineComponents, IgcDockManager } from '@infragistics/igniteui-dockmanager';\n// ...\ndefineComponents(IgcDockManager); // Explicitly call defineComponents\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defineCustomElements",
+          "declaration": {
+            "name": "defineCustomElements",
+            "module": "src/loader.ts"
+          }
         }
       ]
     },
@@ -1601,7 +1995,7 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'igc-button'"
+              "default": "'igc-button-component'"
             },
             {
               "kind": "method",
@@ -1703,7 +2097,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "igc-button",
+          "tagName": "igc-button-component",
           "customElement": true
         }
       ],
@@ -2412,7 +2806,7 @@
                 "text": "array"
               },
               "privacy": "private",
-              "default": "[ { slot: 'paneHeaderCloseButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderCloseButton', targetPart: 'pane-header-close-button', }, { slot: 'tabHeaderCloseButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderCloseButton', targetPart: 'tab-header-close-button', }, { slot: 'tabHeaderCloseButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuCloseButton', targetPart: 'context-menu-close-button', }, { slot: 'closeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderCloseButton', targetPart: 'pane-header-close-button', }, { slot: 'closeButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderCloseButton', targetPart: 'tab-header-close-button', }, { slot: 'closeButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuCloseButton', targetPart: 'context-menu-close-button', }, { slot: 'moreTabsButton', targetName: 'igc-tabs', targetSlot: 'tabsMoreButton', targetPart: 'tabs-more-button', }, { slot: 'maximizeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderMaximizeButton', targetPart: 'pane-header-maximize-button', }, { slot: 'maximizeButton', targetName: 'igc-tabs', targetSlot: 'tabsMaximizeButton', targetPart: 'tabs-maximize-button', }, { slot: 'minimizeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderMinimizeButton', targetPart: 'pane-header-minimize-button', }, { slot: 'minimizeButton', targetName: 'igc-tabs', targetSlot: 'tabsMinimizeButton', targetPart: 'tabs-minimize-button', }, { slot: 'pinButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderPinButton', targetPart: 'pane-header-pin-button', }, { slot: 'unpinButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderUnpinButton', targetPart: 'pane-header-unpin-button', }, { slot: 'unpinButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuUnpinButton', targetPart: 'context-menu-unpin-button', }, { slot: 'moreOptionsButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderMoreOptionsButton', targetPart: 'tab-header-more-options-button', }, { slot: 'splitterHandle', targetName: 'igc-splitter', targetSlot: 'splitterHandle', targetPart: 'splitter-handle', }, ]"
+              "default": "[ { slot: 'paneHeaderCloseButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderCloseButton', targetPart: 'pane-header-close-button', }, { slot: 'tabHeaderCloseButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderCloseButton', targetPart: 'tab-header-close-button', }, { slot: 'tabHeaderCloseButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuCloseButton', targetPart: 'context-menu-close-button', }, { slot: 'closeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderCloseButton', targetPart: 'pane-header-close-button', }, { slot: 'closeButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderCloseButton', targetPart: 'tab-header-close-button', }, { slot: 'closeButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuCloseButton', targetPart: 'context-menu-close-button', }, { slot: 'moreTabsButton', targetName: 'igc-tabs-component', targetSlot: 'tabsMoreButton', targetPart: 'tabs-more-button', }, { slot: 'maximizeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderMaximizeButton', targetPart: 'pane-header-maximize-button', }, { slot: 'maximizeButton', targetName: 'igc-tabs-component', targetSlot: 'tabsMaximizeButton', targetPart: 'tabs-maximize-button', }, { slot: 'minimizeButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderMinimizeButton', targetPart: 'pane-header-minimize-button', }, { slot: 'minimizeButton', targetName: 'igc-tabs-component', targetSlot: 'tabsMinimizeButton', targetPart: 'tabs-minimize-button', }, { slot: 'pinButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderPinButton', targetPart: 'pane-header-pin-button', }, { slot: 'unpinButton', targetName: 'igc-pane-header', targetSlot: 'paneHeaderUnpinButton', targetPart: 'pane-header-unpin-button', }, { slot: 'unpinButton', targetName: 'igc-context-menu', targetSlot: 'contextMenuUnpinButton', targetPart: 'context-menu-unpin-button', }, { slot: 'moreOptionsButton', targetName: 'igc-tab-header', targetSlot: 'tabHeaderMoreOptionsButton', targetPart: 'tab-header-more-options-button', }, { slot: 'splitterHandle', targetName: 'igc-splitter', targetSlot: 'splitterHandle', targetPart: 'splitter-handle', }, ]"
             },
             {
               "kind": "field",
@@ -6478,7 +6872,7 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'igc-icon'"
+              "default": "'igc-icon-component'"
             },
             {
               "kind": "method",
@@ -6513,7 +6907,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "igc-icon",
+          "tagName": "igc-icon-component",
           "customElement": true
         }
       ],
@@ -7945,7 +8339,7 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'igc-tabs'"
+              "default": "'igc-tabs-component'"
             },
             {
               "kind": "method",
@@ -8554,7 +8948,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "igc-tabs",
+          "tagName": "igc-tabs-component",
           "customElement": true
         }
       ],
@@ -10905,6 +11299,15 @@
               "description": "Enables or disables pinning.",
               "attribute": "allow-pinning"
             },
+            {
+              "kind": "field",
+              "name": "pane",
+              "type": {
+                "text": "IgcContentPane"
+              },
+              "privacy": "public",
+              "description": "Reference to the content pane associated with this header."
+            },
             {
               "kind": "field",
               "name": "resourceStrings",

package/dist/components/button/button-component.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const styles = css `button{position:static;display:inline-flex;align-items:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:rgba(0,0,0,0);border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:.7;transition:background .25s ease-out,opacity .25s ease-out,box-shadow .25s ease-out}:host([disabled]){pointer-events:none}:host{display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:.54}`;
+export const styles = css `button{position:static;display:inline-flex;align-items:center;justify-content:center;width:auto;height:100%;min-width:10px;padding:2px 4px;border-radius:2px;color:var(--igc-button-component-text, rgba(0, 0, 0, 0.72));cursor:pointer;outline-style:none;font-size:14px;font-family:inherit;background:rgba(0,0,0,0);border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:.7;transition:background .25s ease-out,opacity .25s ease-out,box-shadow .25s ease-out}:host([disabled]){pointer-events:none}:host{display:flex}button{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}button:hover{opacity:1}button:focus{background:var(--igc-accent-color, #fff);box-shadow:inset 0 0 0 1px var(--igc-active-color, cornflowerblue);opacity:1}button[disabled]{opacity:.54}`;

package/dist/components/button/button-component.d.ts

@@ -2,11 +2,11 @@ import { LitElement } from 'lit';
 /**
  * A custom button component used within the Dock Manager.
  *
- * @element igc-button
+ * @element igc-button-component
  * @slot - Default slot for button content.
  */
 export default class IgcButtonDMComponent extends LitElement {
-    static readonly tagName = "igc-button";
+    static readonly tagName = "igc-button-component";
     static styles: import("lit").CSSResult[];
     static register(): void;
     /**
@@ -37,6 +37,6 @@ export default class IgcButtonDMComponent extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'igc-button': IgcButtonDMComponent;
+        'igc-button-component': IgcButtonDMComponent;
     }
 }

package/dist/components/button/button-component.js

@@ -33,7 +33,7 @@ class IgcButtonDMComponent extends LitElement {
     `;
     }
 }
-IgcButtonDMComponent.tagName = 'igc-button';
+IgcButtonDMComponent.tagName = 'igc-button-component';
 IgcButtonDMComponent.styles = [styles];
 export default IgcButtonDMComponent;
 __decorate([

package/dist/components/context-menu/context-menu.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const styles = css `:host{position:absolute;display:block;box-sizing:border-box;inset:0;z-index:10002;pointer-events:none}:host igc-icon svg{width:17px;height:17px}:host igc-icon{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));pointer-events:all;box-shadow:0 5px 22px rgba(0,0,0,.08),0 12px 17px 2px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.26);box-sizing:border-box}[part~=menu-item]{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:.75em;line-height:1.7;cursor:pointer;transition:background .25s ease-out,color .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))}`;
+export const styles = css `:host{position:absolute;display:block;box-sizing:border-box;inset: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));pointer-events:all;box-shadow:0 5px 22px rgba(0,0,0,.08),0 12px 17px 2px rgba(0,0,0,.12),0 7px 8px -4px rgba(0,0,0,.26);box-sizing:border-box}[part~=menu-item]{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:.75em;line-height:1.7;cursor:pointer;transition:background .25s ease-out,color .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))}`;

package/dist/components/context-menu/context-menu.js

@@ -171,21 +171,29 @@ class IgcContextMenuComponent extends EventEmitterMixin(LitElement) {
       ${item.iconName === 'close' ? this.renderCloseButton() : nothing}
       ${item.iconName === 'unpin' ? this.renderUnpinButton() : nothing}
       ${item.iconName && item.iconName !== 'close' && item.iconName !== 'unpin'
-            ? html ` <igc-icon name=${item.iconName}></igc-icon> `
+            ? html `
+            <igc-icon-component name=${item.iconName}></igc-icon-component>
+          `
             : nothing}
     `;
     }
     renderCloseButton() {
         return html `
       <slot name="contextMenuCloseButton">
-        <igc-icon part="context-menu-close-button" name="close"></igc-icon>
+        <igc-icon-component
+          part="context-menu-close-button"
+          name="close"
+        ></igc-icon-component>
       </slot>
     `;
     }
     renderUnpinButton() {
         return html `
       <slot name="contextMenuUnpinButton">
-        <igc-icon part="context-menu-unpin-button" name="unpin"></igc-icon>
+        <igc-icon-component
+          part="context-menu-unpin-button"
+          name="unpin"
+        ></igc-icon-component>
       </slot>
     `;
     }

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
+import IgcIconDMComponent from '../../icon/icon-component.js';
 import { IgcDockingIndicatorPosition } from '../dockmanager.interfaces.js';
 import { styles } from './joystick-icon-component.css.js';
 class IgcJoystickIconComponent extends LitElement {
@@ -17,7 +18,7 @@ class IgcJoystickIconComponent extends LitElement {
         this.empty = false;
     }
     static register() {
-        registerComponent(IgcJoystickIconComponent);
+        registerComponent(IgcJoystickIconComponent, IgcIconDMComponent);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -126,61 +127,65 @@ class IgcJoystickIconComponent extends LitElement {
         const host = this.isDocHost;
         if (pos === IgcDockingIndicatorPosition.outerLeft ||
             (pos === IgcDockingIndicatorPosition.left && !host)) {
-            return html `<igc-icon name="chevron_left"></igc-icon>`;
+            return html `<igc-icon-component
+        name="chevron_left"
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.left) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="flip"
         style="transform: rotate(180deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.outerTop ||
             (pos === IgcDockingIndicatorPosition.top && !host)) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="chevron_left"
         style="transform: rotate(90deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.top) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="flip"
         style="transform: rotate(270deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.center) {
-            return html `<igc-icon name="crop_square"></igc-icon>`;
+            return html `<igc-icon-component name="crop_square"></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.outerRight ||
             (pos === IgcDockingIndicatorPosition.right && !host)) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="chevron_left"
         style="transform: rotate(180deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.right) {
-            return html `<igc-icon name="flip"></igc-icon>`;
+            return html `<igc-icon-component name="flip"></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.outerBottom ||
             (pos === IgcDockingIndicatorPosition.bottom && !host)) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="chevron_left"
         style="transform: rotate(270deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.bottom) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="flip"
         style="transform: rotate(90deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.splitterHorizontal) {
-            return html `<igc-icon name="splitter_docking_indicator"></igc-icon>`;
+            return html `<igc-icon-component
+        name="splitter_docking_indicator"
+      ></igc-icon-component>`;
         }
         if (pos === IgcDockingIndicatorPosition.splitterVertical) {
-            return html `<igc-icon
+            return html `<igc-icon-component
         name="splitter_docking_indicator"
         style="transform: rotate(90deg)"
-      ></igc-icon>`;
+      ></igc-icon-component>`;
         }
         return nothing;
     }