igniteui-dockmanager 2.1.0-RC.0 → 2.1.1

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/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/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/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/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/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/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/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/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);
     }
@@ -283,7 +285,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             },
             {
                 slot: 'splitterHandle',
-                targetName: 'igc-splitter',
+                targetName: 'igc-splitter-component',
                 targetSlot: 'splitterHandle',
                 targetPart: 'splitter-handle',
             },
@@ -542,7 +544,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             const splitPane = this.panesElementMap.getByValue(splitPaneEl);
             this.splitPaneToResize = splitPane;
             if (this.flyoutPane) {
-                const splitterEl = pathHTMLElements.find((p) => p.tagName.toLowerCase() === 'igc-splitter');
+                const splitterEl = pathHTMLElements.find((p) => p.tagName.toLowerCase() === 'igc-splitter-component');
                 const isFlyoutSplitter = splitterEl?.flyoutLocation !== undefined;
                 if (!isFlyoutSplitter) {
                     this.service.flyoutPane(this.flyoutPane);
@@ -827,7 +829,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
             const splitPaneChildren = Array.from(splitPaneEl.children);
             const paneComponents = splitPaneChildren
                 .filter((c) => c instanceof HTMLElement)
-                .filter((c) => c.tagName.toLowerCase() !== 'igc-splitter');
+                .filter((c) => c.tagName.toLowerCase() !== 'igc-splitter-component');
             const parentPane = this.service.getParent(pane);
             const parentPaneElement = this.panesElementMap.get(parentPane);
             const sizeProperty = parentPane.orientation === 'horizontal'
@@ -860,7 +862,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         if (!splitPane || !parentPane.orientation)
             return;
         const splitPaneChildren = Array.from(splitPane.children);
-        const paneComponents = splitPaneChildren.filter((c) => c.tagName.toLowerCase() !== 'igc-splitter');
+        const paneComponents = splitPaneChildren.filter((c) => c.tagName.toLowerCase() !== 'igc-splitter-component');
         previousPane?.classList.remove('resize-target');
         const sizeProperty = parentPane.orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight';
         const sizeSum = paneComponents.reduce((s, p) => p[sizeProperty] + s, 0);
@@ -1078,7 +1080,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
     renderSplitter(parentPane, pane) {
         const scrollSpeed = this.autoScrollConfig?.scrollSpeed;
         return html `
-      <igc-splitter
+      <igc-splitter-component
         .splitPaneOrientation=${parentPane.orientation}
         .parentUseFixedSize=${parentPane.useFixedSize ?? false}
         .scrollSpeed=${scrollSpeed}
@@ -1086,7 +1088,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         @igcResizeEnd=${this.handleSplitterResizeEnd.bind(this, parentPane, pane)}
         @focus=${this.clearActivePane.bind(this)}
       >
-      </igc-splitter>
+      </igc-splitter-component>
     `;
     }
     removeHoveredPane() {
@@ -1297,13 +1299,13 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         while (parentElement) {
             if (parentElement.previousElementSibling &&
                 parentElement.previousElementSibling?.tagName.toLowerCase() ===
-                    'igc-splitter') {
+                    'igc-splitter-component') {
                 const parentPreviousElementSiblingRect = parentElement.previousElementSibling?.getBoundingClientRect();
                 reducedRect = this.getVisibleRect(reducedRect, parentPreviousElementSiblingRect, parentPreviousElementSiblingRect.width <= 5, true);
             }
             if (parentElement.nextElementSibling &&
                 parentElement.nextElementSibling?.tagName.toLowerCase() ===
-                    'igc-splitter') {
+                    'igc-splitter-component') {
                 const parentNextElementSiblingRect = parentElement.nextElementSibling?.getBoundingClientRect();
                 reducedRect = this.getVisibleRect(reducedRect, parentNextElementSiblingRect, parentNextElementSiblingRect.width <= 5, false);
             }
@@ -1337,7 +1339,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
                 ? elements.filter((e) => e.tagName.toLowerCase() === 'igc-document-host')
                 : [];
             if (docHost.length > 0) {
-                const splitter = docHost[0].querySelector('igc-splitter');
+                const splitter = docHost[0].querySelector('igc-splitter-component');
                 if (splitter) {
                     const splitterRect = splitter.getBoundingClientRect();
                     this.splitterRect = splitterRect;
@@ -1514,7 +1516,7 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         }
         if (!this.allowSplitterDock)
             return;
-        const splitters = this.shadowRoot?.querySelectorAll('igc-splitter');
+        const splitters = this.shadowRoot?.querySelectorAll('igc-splitter-component');
         let splitterFound = false;
         if (!splitters) {
             this.splitterProximityDock = null;
@@ -2813,13 +2815,13 @@ class IgcDockManagerComponent extends EventEmitterMixin(LitElement) {
         style=${styleMap({ zIndex: maximized ? 10002 : 2 })}
       >
         ${this.renderContentPane(this.flyoutPane, false, true)}
-        <igc-splitter
+        <igc-splitter-component
           .flyoutLocation=${location}
           .splitPaneOrientation=${splitPaneOrientation}
           @igcResizeStart=${this.handleSplitterResizeStart.bind(this, this.flyoutPane)}
           @igcResizeEnd=${this.handleFlyoutSplitterResizeEnd.bind(this, this.flyoutPane, splitPaneOrientation)}
         >
-        </igc-splitter>
+        </igc-splitter-component>
       </div>
     `;
     }
@@ -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/dockmanager/dockmanager.service.js

@@ -309,7 +309,7 @@ export class IgcDockManagerService {
         if (!dockManagerElement || !dockManagerElement.shadowRoot) {
             return IGC_DEFAULT_SPLITTER_SIZE;
         }
-        const splitter = dockManagerElement.shadowRoot.querySelector('igc-splitter');
+        const splitter = dockManagerElement.shadowRoot.querySelector('igc-splitter-component');
         if (splitter) {
             const rect = splitter.getBoundingClientRect();
             const thickness = Math.min(rect.width, rect.height);

package/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);

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

@@ -11,7 +11,7 @@ import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../../utils/utils.js';
 import { IGC_DEFAULT_PANE_SIZE, IGC_DEFAULT_UNPIN_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './content-pane-component.base.css.js';
-class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._contentId = '';
@@ -25,6 +25,8 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
         this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
         this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
+    static { this.tagName = 'igc-content-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcContentPaneComponent);
     }
@@ -131,9 +133,6 @@ class IgcContentPaneComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcContentPaneComponent.tagName = 'igc-content-pane';
-IgcContentPaneComponent.styles = [styles];
-export default IgcContentPaneComponent;
 __decorate([
     property({ type: String, attribute: 'content-id' })
 ], IgcContentPaneComponent.prototype, "contentId", null);

package/components/dockmanager/panes/document-host-component.js

@@ -9,12 +9,14 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { IGC_DEFAULT_PANE_SIZE } from '../dockmanager.interfaces.js';
 import { styles } from './document-host-component.base.css.js';
-class IgcDocumentHostComponent extends LitElement {
+export default class IgcDocumentHostComponent extends LitElement {
     constructor() {
         super(...arguments);
         this._size = IGC_DEFAULT_PANE_SIZE;
         this._parentUseFixedSize = false;
     }
+    static { this.tagName = 'igc-document-host'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcDocumentHostComponent);
     }
@@ -48,9 +50,6 @@ class IgcDocumentHostComponent extends LitElement {
         return html ` <slot></slot> `;
     }
 }
-IgcDocumentHostComponent.tagName = 'igc-document-host';
-IgcDocumentHostComponent.styles = [styles];
-export default IgcDocumentHostComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcDocumentHostComponent.prototype, "parentUseFixedSize", null);

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

@@ -11,7 +11,7 @@ import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IGC_DEFAULT_PANE_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './floating-pane-component.css.js';
 import IgcResizerComponent from './resizer-component.js';
-class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._floatingHeight = IGC_DEFAULT_PANE_SIZE;
@@ -52,6 +52,8 @@ class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
             });
         };
     }
+    static { this.tagName = 'igc-floating-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcFloatingPaneComponent, IgcResizerComponent);
     }
@@ -149,9 +151,6 @@ class IgcFloatingPaneComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcFloatingPaneComponent.tagName = 'igc-floating-pane';
-IgcFloatingPaneComponent.styles = [styles];
-export default IgcFloatingPaneComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcFloatingPaneComponent.prototype, "allowResize", void 0);

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

@@ -17,7 +17,9 @@ import IgcButtonDMComponent from '../../button/button-component.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
 import IgcIconDMComponent from '../../icon/icon-component.js';
 import { styles } from './pane-header-component.base.css.js';
-class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
+export default class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-pane-header'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcPaneHeaderComponent, IgcIconDMComponent, IgcButtonDMComponent);
     }
@@ -239,9 +241,6 @@ class IgcPaneHeaderComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcPaneHeaderComponent.tagName = 'igc-pane-header';
-IgcPaneHeaderComponent.styles = [styles];
-export default IgcPaneHeaderComponent;
 __decorate([
     property({ type: Boolean })
 ], IgcPaneHeaderComponent.prototype, "pinned", void 0);

package/components/dockmanager/panes/resizer-component.js

@@ -10,7 +10,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IgcDragService } from '../../drag-drop/drag.service.js';
-class IgcResizerComponent extends EventEmitterMixin(LitElement) {
+export default class IgcResizerComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-resizer'; }
     static register() {
         registerComponent(IgcResizerComponent);
     }
@@ -84,8 +85,6 @@ class IgcResizerComponent extends EventEmitterMixin(LitElement) {
         return html `<div class="resize-container" style=${styleMap(style)}></div>`;
     }
 }
-IgcResizerComponent.tagName = 'igc-resizer';
-export default IgcResizerComponent;
 __decorate([
     property({ type: String })
 ], IgcResizerComponent.prototype, "orientation", void 0);

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

@@ -10,7 +10,7 @@ import { registerComponent } from '../../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../../common/mixins/event-emitter.js';
 import { IGC_DEFAULT_PANE_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './split-pane-component.base.css.js';
-class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
+export default class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._parentUseFixedSize = false;
@@ -18,6 +18,8 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
         this._minResizeWidth = IGC_RESIZING_MIN_SIZE;
         this._minResizeHeight = IGC_RESIZING_MIN_SIZE;
     }
+    static { this.tagName = 'igc-split-pane'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcSplitPaneComponent);
     }
@@ -82,9 +84,6 @@ class IgcSplitPaneComponent extends EventEmitterMixin(LitElement) {
         return html `<slot></slot>`;
     }
 }
-IgcSplitPaneComponent.tagName = 'igc-split-pane';
-IgcSplitPaneComponent.styles = [styles];
-export default IgcSplitPaneComponent;
 __decorate([
     property({ type: String })
 ], IgcSplitPaneComponent.prototype, "orientation", null);

package/components/dockmanager/panes/splitter-component.d.ts

@@ -13,7 +13,7 @@ declare const IgcSplitterComponent_base: Constructor<import("../../../common/mix
  * Represents a splitter element used between panes in the Dock Manager layout.
  * Allows the user to resize adjacent panes by dragging.
  *
- * @element igc-splitter
+ * @element igc-splitter-component
  *
  * @fires igcResizeStart - Emitted when a resize interaction starts.
  * @fires igcResizeEnd - Emitted when the resize ends, passing the final size.
@@ -23,7 +23,7 @@ declare const IgcSplitterComponent_base: Constructor<import("../../../common/mix
  * @part splitter-ghost - The visual indicator (ghost element) shown during drag.
  */
 export default class IgcSplitterComponent extends IgcSplitterComponent_base {
-    static readonly tagName = "igc-splitter";
+    static readonly tagName = "igc-splitter-component";
     static styles: import("lit").CSSResult[];
     static register(): void;
     private _paneSizes;
@@ -92,7 +92,7 @@ export default class IgcSplitterComponent extends IgcSplitterComponent_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'igc-splitter': IgcSplitterComponent;
+        'igc-splitter-component': IgcSplitterComponent;
     }
 }
 export {};

package/components/dockmanager/panes/splitter-component.js

@@ -15,7 +15,9 @@ import { IgcDragService } from '../../drag-drop/drag.service.js';
 import { IGC_DEFAULT_RESIZE, IGC_DEFAULT_SPLITTER_SIZE, IGC_RESIZING_MIN_SIZE, } from '../dockmanager.interfaces.js';
 import { styles } from './splitter-component.css.js';
 const SCROLL_SPEED = 15;
-class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
+export default class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
+    static { this.tagName = 'igc-splitter-component'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcSplitterComponent);
     }
@@ -375,9 +377,6 @@ class IgcSplitterComponent extends EventEmitterMixin(LitElement) {
     `;
     }
 }
-IgcSplitterComponent.tagName = 'igc-splitter';
-IgcSplitterComponent.styles = [styles];
-export default IgcSplitterComponent;
 __decorate([
     state()
 ], IgcSplitterComponent.prototype, "_dragOffset", void 0);

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

@@ -9,12 +9,14 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../../common/definitions/register.js';
 import { partNameMap } from '../../../common/util.js';
 import { styles } from './unpinned-pane-header-component.base.css.js';
-class IgcUnpinnedPaneHeaderComponent extends LitElement {
+export default class IgcUnpinnedPaneHeaderComponent extends LitElement {
     constructor() {
         super(...arguments);
         this._isActive = false;
         this._disabled = false;
     }
+    static { this.tagName = 'igc-unpinned-pane-header'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcUnpinnedPaneHeaderComponent);
     }
@@ -71,9 +73,6 @@ class IgcUnpinnedPaneHeaderComponent extends LitElement {
         return html ` <slot></slot> `;
     }
 }
-IgcUnpinnedPaneHeaderComponent.tagName = 'igc-unpinned-pane-header';
-IgcUnpinnedPaneHeaderComponent.styles = [styles];
-export default IgcUnpinnedPaneHeaderComponent;
 __decorate([
     property({ type: String })
 ], IgcUnpinnedPaneHeaderComponent.prototype, "location", null);

package/components/icon/icon-component.js

@@ -9,11 +9,13 @@ import { property } from 'lit/decorators.js';
 import { registerComponent } from '../../common/definitions/register.js';
 import { styles } from './icon-component.css.js';
 import { icons } from './icons.js';
-class IgcIconDMComponent extends LitElement {
+export default class IgcIconDMComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.name = '';
     }
+    static { this.tagName = 'igc-icon-component'; }
+    static { this.styles = [styles]; }
     static register() {
         registerComponent(IgcIconDMComponent);
     }
@@ -24,9 +26,6 @@ class IgcIconDMComponent extends LitElement {
     `;
     }
 }
-IgcIconDMComponent.tagName = 'igc-icon-component';
-IgcIconDMComponent.styles = [styles];
-export default IgcIconDMComponent;
 __decorate([
     property({ type: String })
 ], IgcIconDMComponent.prototype, "name", void 0);