igniteui-dockmanager 2.0.0-alpha.5 → 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"
+          }
         }
       ]
     },
@@ -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/common/decorators/blazorSuppressComponent.d.ts

@@ -0,0 +1,5 @@
+import type { AbstractConstructor, Constructor } from '../mixins/constructor.js';
+/**
+ * Indicates a class should not be exposed to blazor Blazor.
+ */
+export declare function blazorSuppressComponent(_constructor: Constructor | AbstractConstructor): void;

package/dist/common/decorators/watch.d.ts

@@ -0,0 +1,5 @@
+interface WatchOptions {
+    waitUntilFirstUpdate?: boolean;
+}
+export declare function watch(propName: string, options?: WatchOptions): (protoOrDescriptor: any, name: string) => any;
+export {};

package/dist/common/definitions/defineAllComponents.d.ts

@@ -0,0 +1 @@
+export declare function defineAllComponents(): void;

package/dist/common/definitions/defineComponents.d.ts

@@ -0,0 +1,2 @@
+import type { IgniteComponent } from './register.js';
+export declare function defineComponents(...components: IgniteComponent[]): void;

package/dist/common/definitions/register.d.ts

@@ -0,0 +1,5 @@
+export type IgniteComponent = CustomElementConstructor & {
+    tagName: string;
+    register: () => void;
+};
+export declare function registerComponent(component: IgniteComponent, ...dependencies: IgniteComponent[]): void;

package/dist/common/mixins/constructor.d.ts

@@ -0,0 +1,2 @@
+export type Constructor<T = object> = new (...args: any[]) => T;
+export type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;

package/dist/common/mixins/event-emitter.d.ts

@@ -0,0 +1,12 @@
+import type { LitElement } from 'lit';
+import type { AbstractConstructor, Constructor } from './constructor.js';
+export type UnpackCustomEvent<T> = T extends CustomEvent<infer U> ? U : never;
+export declare class EventEmitterInterface<E> {
+    addEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: M[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M, M extends E & HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: M[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    emitEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(type: K, eventInitDict?: CustomEventInit<D>): boolean;
+    createAndDispatchEvent<K extends keyof E, D extends UnpackCustomEvent<E[K]>>(type: K, detail?: D): CustomEvent<D>;
+}
+export declare function EventEmitterMixin<E, T extends AbstractConstructor<LitElement>>(superClass: T): Constructor<EventEmitterInterface<E>> & T;

package/dist/common/util.d.ts

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

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +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-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

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * A custom button component used within the Dock Manager.
+ *
+ * @element igc-button-component
+ * @slot - Default slot for button content.
+ */
+export default class IgcButtonDMComponent extends LitElement {
+    static readonly tagName = "igc-button-component";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    /**
+     * Indicates whether the button is disabled.
+     *
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * The type attribute of the control.
+     *
+     * @attr
+     * @default submit
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * The name attribute of the control.
+     * @attr
+     */
+    name: string;
+    /**
+     * The value attribute of the control.
+     * @attr
+     */
+    value: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-button-component': IgcButtonDMComponent;
+    }
+}

package/dist/components/context-menu/context-menu.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +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-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.d.ts

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../../common/mixins/constructor.js';
+import { type IgcContextMenuItem, IgcContextMenuOrientation, IgcContextMenuPosition } from '../dockmanager/dockmanager.interfaces.js';
+export interface IgcContextMenuEventMap {
+    igcMenuClosed: CustomEvent<void>;
+}
+declare const IgcContextMenuComponent_base: Constructor<import("../../common/mixins/event-emitter.js").EventEmitterInterface<IgcContextMenuEventMap>> & Constructor<LitElement>;
+/**
+ * Displays a context menu with customizable items and optional icons.
+ * Commonly used in tab headers and panes to provide additional user actions.
+ *
+ * @element igc-context-menu
+ *
+ * @fires igcMenuClosed - Emitted when the context menu is closed.
+ *
+ * @slot contextMenuCloseButton - The close icon.
+ * @slot contextMenuUnpinButton - The unpin icon.
+ *
+ * @csspart context-menu - The outer container of the context menu.
+ * @csspart context-menu-item - A single menu item container.
+ * @csspart context-menu-content - The wrapper for all menu items.
+ * @csspart context-menu-close-button - The default close button icon.
+ * @csspart context-menu-unpin-button - The default unpin button icon.
+ */
+export default class IgcContextMenuComponent extends IgcContextMenuComponent_base {
+    static readonly tagName = "igc-context-menu";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private activeIndex;
+    private menuItemsDiv;
+    orientation: IgcContextMenuOrientation;
+    position: IgcContextMenuPosition;
+    target: HTMLElement;
+    items: IgcContextMenuItem[];
+    constructor();
+    private emitMenuClosed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleResize;
+    private _handleDocumentMouseDown;
+    protected firstUpdated(): void;
+    private focusItemAndSetActiveIndex;
+    private isFloating;
+    private handleKeyboardEvents;
+    private handleMenuItemPointerDown;
+    private renderItemIcon;
+    private renderCloseButton;
+    private renderUnpinButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-context-menu': IgcContextMenuComponent;
+    }
+}
+export {};

package/dist/components/dockmanager/docking/joystick-icon-component.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const styles = css `:host{display:flex;width:30px;height:30px;align-items:center;justify-content:center;color:var(--igc-joystick-icon-color, var(--igc-text-color, rgba(0, 0, 0, 0.72)));background:var(--igc-joystick-background, var(--igc-accent-color, #fff));border:1px solid var(--igc-joystick-border-color, var(--igc-accent-color, #fff))}:host(:hover){background:var(--igc-joystick-background-active, var(--igc-accent-color, #fff));color:var(--igc-joystick-icon-color-active, #000)}:host(.inner-top){border-bottom:none}:host(.inner-start){border-right:none}:host(.inner-end){border-left:none}:host(.inner-bottom){border-top:none}:host(.inner-center){border:1px solid var(--igc-joystick-background, var(--igc-accent-color, #fff))}`;

package/dist/components/dockmanager/docking/joystick-icon-component.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import { IgcDockingIndicatorPosition } from '../dockmanager.interfaces.js';
+/**
+ * The joystick icon component which displays an icon related to docking.
+ *
+ * @element igc-joystick-icon
+ *
+ * @slot - Renders the panel content.
+ *
+ * @csspart docking-indicator - Wrapper of the joystick icon.
+ */
+export default class IgcJoystickIconComponent extends LitElement {
+    static readonly tagName = "igc-joystick-icon";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    /**
+     * Determines whether the icon is in document host.
+     *
+     * * @default false
+     */
+    isDocHost: boolean;
+    /**
+     * Specifies joystick icon position so that the proper icon is displayed.
+     */
+    position: IgcDockingIndicatorPosition;
+    /**
+     * Determines component's direction
+     *
+     * @default ltr
+     */
+    direction: string;
+    /**
+     * Determines whether the icon is empty
+     *
+     * @default false
+     */
+    empty: boolean;
+    connectedCallback(): void;
+    protected updated(): void;
+    private _assignHostClass;
+    private _assignHostStyles;
+    private _resolveIconDivClass;
+    private resolveMargin;
+    private _resolveGridRow;
+    private _resolveGridColumn;
+    private _renderIcon;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-joystick-icon': IgcJoystickIconComponent;
+    }
+}

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();

package/dist/components/dockmanager/docking/joystick-indicator-component.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;