igniteui-dockmanager 2.0.1 → 2.0.2-alpha.2

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

@@ -877,6 +877,9 @@ let SampleComponent = class SampleComponent extends LitElement {
     handleDragStart(event) {
         this.log(event);
     }
+    handlePaneFlyoutToggle(event) {
+        this.log(event);
+    }
     handleDragOver(event) {
         const args = event.detail;
         this.log(args.action);
@@ -1069,6 +1072,7 @@ let SampleComponent = class SampleComponent extends LitElement {
         ${ref(this.dockManagerRef)}
         @paneClose="${this.handlePaneClose}"
         @paneScroll="${this.handlePaneScroll}"
+        @paneFlyoutToggle="${this.handlePaneFlyoutToggle}"
         @panePinnedToggle="${this.handlePinnedToggle}"
         @activePaneChanged="${this.handleActivePaneChanged}"
         @paneDragStart="${this.handleDragStart}"
@@ -1150,6 +1154,7 @@ SampleComponent.styles = css `
       /* --igc-resize-handle-thickness: 10px;
       --igc-resize-handle-size: 150px; */
     }
+
     /*
    igc-dockmanager {
     background-color: rgb(227,230,233);
@@ -1159,6 +1164,8 @@ SampleComponent.styles = css `
     /* igc-dockmanager::part(pane-header) {
       background-color: #fff;
       border-bottom: 2px solid rgb(227, 230, 233);
+      max-height: 15px;
+      min-height: 15px;
     }
 
     igc-dockmanager::part(pane-header active) {

package/custom-elements.json

@@ -647,8 +647,9 @@
               "kind": "field",
               "name": "flyoutPane",
               "type": {
-                "text": "IgcContentPane"
-              }
+                "text": "IgcContentPane | null"
+              },
+              "default": "null"
             },
             {
               "kind": "field",
@@ -864,6 +865,23 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "paneFlyoutToggle",
+              "return": {
+                "type": {
+                  "text": "CustomEvent<IgcPaneFlyoutEventArgs>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "IgcPaneFlyoutEventArgs"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "paneDragStart",
@@ -3066,6 +3084,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "cachedHeaderHeight",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "templatableComponents",
@@ -3554,6 +3581,16 @@
               "name": "removeCustomContentEventListeners",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "restoreDraggedPanes",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "clearDragState",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleCustomContentFocusIn",
@@ -3876,25 +3913,6 @@
               "name": "removeHoveredPane",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "togglePaneHeaderVisibility",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "pane",
-                  "type": {
-                    "text": "IgcContentPane"
-                  }
-                },
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleContentPaneFocus",
@@ -4738,6 +4756,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "paneFlyoutToggle",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "CustomEvent<IgcPaneFlyoutEventArgs>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "IgcPaneFlyoutEventArgs"
+                  }
+                }
+              ],
+              "description": "Emitted when an unpinned pane's flyout state changes (opens or closes).\n\nThis event fires when:\n- An unpinned pane is clicked and its flyout opens to display content\n- An unpinned pane's flyout closes (user clicks elsewhere, switches to another unpinned pane, etc.)\n- Switching between unpinned panes (fires twice: close event for old pane, open event for new pane)\n\nThis event does NOT fire when:\n- A pane is pinned or unpinned using the pin button (use panePinnedToggle for that)\n- A pane is initially unpinned (only subsequent flyout open/close actions)\n\nUse this event to show/hide auxiliary UI, update summary views, or respond to unpinned pane visibility changes."
+            },
             {
               "kind": "method",
               "name": "paneDragStart",
@@ -5278,6 +5315,10 @@
               "description": "Emitted when an `<igc-tab-header>` is disconnected",
               "name": "tabHeaderDisconnected"
             },
+            {
+              "description": "Emitted when an unpinned pane's flyout state changes (opens or closes).",
+              "name": "paneFlyoutToggle"
+            },
             {
               "type": {
                 "text": "CustomEvent"
@@ -5977,6 +6018,14 @@
                 "text": "{ pane: any; index: number }"
               }
             },
+            {
+              "kind": "field",
+              "name": "isPinToggling",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "method",
               "name": "getContent",
@@ -6248,6 +6297,23 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "findPaneById",
+              "return": {
+                "type": {
+                  "text": "IgcDockManagerPane | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "paneId",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getPaneToDock",
@@ -6634,6 +6700,27 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "setFlyoutPane",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "IgcContentPane | null"
+                  },
+                  "description": "The new flyout pane value"
+                },
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "IgcContentPane | null"
+                  },
+                  "description": "The previous flyout pane value"
+                }
+              ],
+              "description": "Sets the flyout pane and emits paneFlyoutToggle event if needed."
+            },
             {
               "kind": "method",
               "name": "maximizePane",
@@ -7935,6 +8022,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handlePaneFlyoutToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleDragOver",

package/igniteui-dockmanager.html-data.json

@@ -0,0 +1,5 @@
+{
+      "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+      "version": 1.1,
+      "tags": [{"name":"igc-button-component","description":"\n---\n\n\n### **Slots:**\n - _default_ - Default slot for button content.","attributes":[{"name":"disabled","description":"Indicates whether the button is disabled.","values":[]},{"name":"type","description":"The type attribute of the control.","values":[{"name":"button"},{"name":"submit"},{"name":"reset"}]},{"name":"name","description":"The name attribute of the control.","values":[]},{"name":"value","description":"The value attribute of the control.","values":[]}],"references":[]},{"name":"igc-context-menu","description":"\n---\n\n\n### **Events:**\n - **igcMenuClosed** - Emitted when the context menu is closed.\n\n### **Slots:**\n - **contextMenuCloseButton** - The close icon.\n- **contextMenuUnpinButton** - The unpin icon.\n\n### **CSS Parts:**\n - **context-menu** - The outer container of the context menu.\n- **context-menu-item** - A single menu item container.\n- **context-menu-content** - The wrapper for all menu items.\n- **context-menu-close-button** - The default close button icon.\n- **context-menu-unpin-button** - The default unpin button icon.","attributes":[{"name":"orientation","values":[{"name":"ContextMenuOrientation"}]},{"name":"position","values":[{"name":"ContextMenuPosition"}]},{"name":"target","values":[{"name":"HTMLElement"}]},{"name":"items","values":[{"name":"IgcContextMenuItem[]"}]}],"references":[]},{"name":"igc-dockmanager","description":"A powerful, flexible dock manager component for laying out, docking,\nundocking, pinning, and floating panes of content.\n---\n\n\n### **Events:**\n - **activePaneChanged** - Emitted when the active content pane changes\n- **floatingPaneResizeStart** - Emitted when a floating pane resize interaction begins\n- **floatingPaneResizeMove** - Emitted while a floating pane is being resized\n- **floatingPaneResizeEnd** - Emitted when a floating pane resize interaction ends\n- **layoutChange** - Emitted after the layout has been programmatically updated\n- **paneDragStart** - Emitted when a pane drag operation begins\n- **paneDragOver** - Emitted repeatedly as a pane is dragged\n- **paneDragEnd** - Emitted when a pane drag operation ends\n- **paneHeaderConnected** - Emitted when an `<igc-pane-header>` is connected\n- **paneHeaderDisconnected** - Emitted when an `<igc-pane-header>` is disconnected\n- **paneClose** - Emitted when a pane is closed\n- **panePinnedToggle** - Emitted when a pane is pinned or unpinned\n- **paneScroll** - Emitted when the user scrolls within a pane’s content\n- **splitterResizeStart** - Emitted when a splitter resize starts\n- **splitterResizeEnd** - Emitted when a splitter resize ends\n- **tabHeaderConnected** - Emitted when an `<igc-tab-header>` is connected\n- **tabHeaderDisconnected** - Emitted when an `<igc-tab-header>` is disconnected\n- **paneFlyoutToggle** - Emitted when an unpinned pane's flyout state changes (opens or closes).\n\n### **Slots:**\n - **paneHeaderCloseButton** - Custom close button for pane headers\n- **tabHeaderCloseButton** - Custom close button for tab headers\n- **closeButton** - Alias for pane/tab close button\n- **moreTabsButton** - Slot for the \"more tabs\" button\n- **maximizeButton** - Slot for maximize buttons\n- **minimizeButton** - Slot for minimize buttons\n- **pinButton** - Slot for pin buttons\n- **unpinButton** - Slot for unpin buttons\n- **moreOptionsButton** - Slot for more-options buttons on tab headers\n- **splitterHandle-** - Slot for custom splitter handle","attributes":[{"name":"enableDragCursor","description":"Enables changing the mouse cursor when hovering over a tab or pane header.\n\nWhen set to `true`, the cursor changes from the default to `pointer`,\nindicating that the header can be dragged (e.g., to dock or float the pane).","values":[]},{"name":"allowInnerDock","description":"Whether docking inside a pane is allowed.","values":[]},{"name":"allowMaximize","description":"Whether maximize action button is displayed for the panes.","values":[]},{"name":"autoScrollConfig","description":"Configuration for edge auto-scrolling behavior during drag & resize operations.\n\n- `edgeThreshold`: Distance in pixels from the container's edge that triggers scrolling.\n- `scrollSpeed`: Number of pixels to scroll per interval (affects scroll rate).","values":[{"name":"{ edgeThreshold: number"},{"name":"scrollSpeed: number }"}]},{"name":"proximityDock","description":"Determines whether docking indicators are displayed while docking","values":[]},{"name":"resourceStrings","description":"The resource strings of the dock manager.","values":[{"name":"IgcDockManagerResourceStrings"}]},{"name":"showPaneHeaders","description":"Determines when to display the pane headers - always or on hover of the pane.","values":[{"name":"always"},{"name":"onHoverOnly"}]},{"name":"unpinBehavior","description":"Determines which panes are affected by particular pane action such as closing or unpinning.","values":[{"name":"PaneActionBehavior"}]},{"name":"allowSplitterDock","description":"Whether docking over splitter is allowed","values":[]},{"name":"allowRootDock","description":"Determines whether docking into the root-level pane is allowed.\n\nWhen set to true (default), panes can be docked directly into the root container.\nThis is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane.","values":[]},{"name":"useFixedSizeOnDock","description":"Specifies which docking orientations should apply the `FixedSize` sizing mode\nwhen panes are dynamically created via docking.\n\nPossible values:\n- `\"none\"`: Do not apply `FixedSize` on docking (default behavior).\n- `\"vertical\"`: Apply `FixedSize` only when panes are docked vertically.\n- `\"horizontal\"`: Apply `FixedSize` only when panes are docked horizontally.\n- `\"both\"`: Apply `FixedSize` for both vertical and horizontal orientation.\n\nThis setting affects only dynamically created panes via user docking actions.\nIt does not apply to programmatically created panes or layout restorations.","values":[{"name":"none"},{"name":"vertical"},{"name":"horizontal"},{"name":"both"}]},{"name":"showHeaderIconOnHover","description":"Which header icons are shown on hover.","values":[{"name":"none"},{"name":"closeOnly"},{"name":"moreOptionsOnly"},{"name":"all"}]},{"name":"allowFloatingPanesResize","description":"Whether floating panes can be resized.","values":[]},{"name":"containedInBoundaries","description":"Whether pane dragging stops when any of the pane's sides goes outside the DockManager’s bounds.","values":[]},{"name":"disableKeyboardNavigation","description":"Disables all keyboard navigation within the dock manager.","values":[]},{"name":"contextMenuPosition","description":"Position to open the context menu.","values":[{"name":"ContextMenuPosition"}]},{"name":"closeBehavior","description":"Which panes get affected by close operations.","values":[{"name":"PaneActionBehavior"}]}],"references":[]},{"name":"igc-icon-component","description":"\n---\n","attributes":[{"name":"name","description":"The name of the icon to draw.","values":[{"name":"IconName"},{"name":"''"}]}],"references":[]},{"name":"sample-component","description":"\n---\n","attributes":[],"references":[]},{"name":"igc-tab-header","description":"\n---\n\n\n### **Events:**\n - **igcDragStarted** - Fired when drag operation has started.\n- **igcDragMoved** - Fired when a header is dragged.\n- **igcDragEnded** - Fired when drag operation has ended.\n- **igcIconClicked** - Fired when the action button is clicked.\n- **igcIconKeyDown** - Fired on key down of the action button.\n- **igcTabPointerDown** - Fired when pointer is down on the header.\n- **igcElementConnected** - Fired when the header is connected.\n- **igcElementDisconnected** - Fired when the header is disconnected.\n\n### **Slots:**\n - _default_ - Renders the title.\n\n### **CSS Parts:**\n - **tab-header** - Wrapper of the panel.\n- **top** - Added when the header is displayed at the top.\n- **active** - Indicates whether the header is active.\n- **selected** - Indicates whether the header is selected.\n- **disabled** - Indicates a disabled stated.\n- **hover-preview-close** - Indicates that close button is displayed on hover.\n- **hover-preview-options** - Indicates that more options button is displayed on hover.\n- **bottom** - Added when the header is displayed at the bottom.","attributes":[{"name":"selected","description":"Determines whether the header is selected.","values":[]},{"name":"hovered","description":"Determines whether the header is hovered.","values":[]},{"name":"position","description":"Sets the header position.","values":[]},{"name":"iconName","description":"Determines which icon to display in the tab header.\nSupported values are `close` and `more`.\nIf not set, no icon is rendered.","values":[{"name":"IconName"},{"name":"''"}]},{"name":"header","description":"Sets the header text.","values":[]},{"name":"isActive","description":"Determines whether the header is active.","values":[]},{"name":"resourceStrings","description":"The resource strings of the header.","values":[{"name":"IgcDockManagerResourceStrings"}]},{"name":"forcedDrag","description":"Determines whether the header is changing position with another header.","values":[]},{"name":"disabled","description":"Disables interaction with the header.","values":[]},{"name":"showHeaderIconOnHover","description":"Determines which buttons are displayed on hover.\n\n*","values":[{"name":""},{"name":"none"},{"name":"closeOnly"},{"name":"moreOptionsOnly"},{"name":"all"}]}],"references":[]},{"name":"igc-tab-panel","description":"\n---\n\n\n### **Events:**\n - **igcSelectedChanged** - Fired when the selected state of the header changes.\n\n### **Slots:**\n - _default_ - Renders the panel content.\n\n### **CSS Parts:**\n - **tab-panel** - Wrapper of the panel.\n- **selected** - Indicates that the tab-panel is selected.\n- **disabled** - Indicates a disabled state.","attributes":[{"name":"selected","description":"Determines whether the panel is selected.","values":[]},{"name":"disabled","description":"Disables interaction with the panel.","values":[]}],"references":[]},{"name":"igc-tabs-component","description":"\n---\n\n\n### **Events:**\n - **igcRendered** - Fired when the component is rendered.\n- **igcHiddenTabSelected** - Fired when a hidden tab is selected.\n- **igcMaximize** - Fired when the maximize button is clicked.\n- **igcMaximizeMinimizeFocus** - Fired when focus is on the minimize/maximize button.\n- **igcSelectedIndexChanged** - Fired when new tab is selected.\n- **igcSelectedTabOutOfView** - Fired when the newly selected tab is not currently in view.\n\n### **Slots:**\n - _default_ - Renders the tab content.\n- **tabHeader** - Renders the tab header.\n\n### **CSS Parts:**\n - **tabs-container-contentIds** - The tabs container.","attributes":[{"name":"size","description":"The default size of the tabs.","values":[]},{"name":"maximized","description":"Whether the component is maximized.","values":[]},{"name":"allowMaximize","description":"Determines whether maximization is allowed.","values":[]},{"name":"tabHeadersPosition","description":"Determines the header position.","values":[]},{"name":"selectedIndex","description":"Determines the index of the selected tab.","values":[]},{"name":"hasHeaders","description":"Whether the headers are displayed.","values":[]},{"name":"showHiddenTabsMenu","description":"Whether to display a button for the hidden headers.","values":[]},{"name":"resourceStrings","description":"The resource strings of the tabs.","values":[{"name":"IgcDockManagerResourceStrings"}]},{"name":"contentIds","description":"An array of identifiers.","values":[{"name":"string[]"}]},{"name":"parentUseFixedSize","values":[]}],"references":[]},{"name":"igc-edge-docking-indicator","description":"\n---\n\n\n### **CSS Parts:**\n - **edge-docking-indicator** - The wrapper container for the edge docking indicator.","attributes":[{"name":"position","description":"The docking indicator position.","values":[{"name":"DockingIndicatorPosition"}]},{"name":"dropTargetPaneInfo","description":"An object that configures the drop target pane.","values":[{"name":"IgcDropTargetPaneInfo"}]}],"references":[]},{"name":"igc-joystick-icon","description":"\n---\n\n\n### **Slots:**\n - _default_ - Renders the panel content.\n\n### **CSS Parts:**\n - **docking-indicator** - Wrapper of the joystick icon.","attributes":[{"name":"isDocHost","description":"Determines whether the icon is in document host.\n\n*","values":[]},{"name":"position","description":"Specifies joystick icon position so that the proper icon is displayed.","values":[{"name":"DockingIndicatorPosition"}]},{"name":"direction","description":"Determines component's direction","values":[]},{"name":"empty","description":"Determines whether the icon is empty","values":[]}],"references":[]},{"name":"igc-joystick-indicator","description":"\n---\n","attributes":[{"name":"dropTargetPaneInfo","description":"An object that configures the drop target pane.","values":[{"name":"IgcDropTargetPaneInfo"}]},{"name":"documentOnlyDrag","description":"Determines whether docking is inside the document.\n\n*","values":[]},{"name":"allowCenterDock","description":"Determines whether docking in the center is allowed.\n\n*","values":[]}],"references":[]},{"name":"igc-root-docking-indicator","description":"\n---\n\n\n### **CSS Parts:**\n - **root-docking-indicator** - The wrapper container for the root docking indicator.","attributes":[{"name":"position","description":"Determines splitter position.","values":[{"name":"DockingIndicatorPosition"}]}],"references":[]},{"name":"igc-splitter-docking-indicator","description":"\n---\n\n\n### **CSS Parts:**\n - **splitter-docking-indicator** - The wrapper container for the splitter docking indicator.","attributes":[{"name":"position","description":"Determines splitter position.","values":[{"name":"DockingIndicatorPosition"}]}],"references":[]},{"name":"igc-pane-navigator","description":"\n---\n\n\n### **Events:**\n - **igcClosed** - Fired when pane navigator is closed.\n\n### **CSS Parts:**\n - **base** - Wrapper of the panel.\n- **header** - The header element which contains the header of the currently selected pane.\n- **body** - The section element where groups of panes and documents are displayed.\n- **group** - The article element which contains all items of the same group - panes or documents.\n- **title** - The header element displayed above the group of panes/documents.","attributes":[{"name":"activeDocuments","description":"Determines currently visible documents.","values":[{"name":"IgcContentPane[]"}]},{"name":"activePanes","description":"Determines currently visible panes.","values":[{"name":"IgcContentPane[]"}]},{"name":"selectedIndex","description":"Determines the index of the selected item.","values":[]},{"name":"previousActivePaneIndex","description":"Determines the index of the previously selected item.","values":[]},{"name":"resourceStrings","description":"The resource strings for the pane navigator.","values":[{"name":"IgcDockManagerResourceStrings"}]}],"references":[]},{"name":"igc-content-pane","description":"\n---\n\n\n### **Events:**\n - **igcRendered** - Emitted after the component has rendered.\n\n### **Slots:**\n - _default_ - Default slot for pane content.\n- **header** - Slot for projecting a custom header for the pane.\n\n### **CSS Parts:**\n - **content-pane** - The main wrapper of the content-pane component.\n- **disabled** - Applied when the pane is disabled.\n- **single-floating** - Applied when the pane is the only one in a floating container.","attributes":[{"name":"content-id","description":"Sets a unique identifier for the content pane.\nUsed for targeting slotted content.","values":[]},{"name":"is-flyout","description":"Indicates whether the pane is currently in a flyout state.","values":[]},{"name":"is-single-floating","description":"Indicates that the pane is a single floating item.","values":[]},{"name":"parent-use-fixed-size","description":"Indicates if the parent uses fixed pixel sizes for its child panes.\nWhen enabled, pane sizes are treated as absolute values instead of relative weights.","values":[]},{"name":"unpinned-size","description":"Specifies the pane's unpinned size when in flyout state.","values":[]},{"name":"header","description":"Defines the header label for the pane.","values":[]},{"name":"disabled","description":"Disables the pane and makes it non-interactive.","values":[]},{"name":"size","description":"Specifies the pane size.\nThis value is relative by default and used as a weight against sibling panes.\nWhen the parent uses fixed size mode, it is treated as an absolute pixel value.","values":[]}],"references":[]},{"name":"igc-floating-pane","description":"\n---\n\n\n### **Events:**\n - **wndResizeStart** - Emitted when a resize interaction begins.\n- **wndResizeMove** - Emitted during the pane resize movement.\n- **wndResizeEnd** - Emitted when the resize interaction ends.\n\n### **Slots:**\n - **header** - Renders the floating pane header content.\n- _default_ - Renders the main content of the floating pane.\n\n### **CSS Parts:**\n - **floating-window** - The root floating pane container.","attributes":[{"name":"allowResize","description":"Indicates whether the floating pane can be resized.","values":[]},{"name":"floatingLocation","description":"The current location of the floating pane.\nDefaults to top-left corner position.","values":[{"name":"IgcDockManagerPoint"}]},{"name":"floatingWidth","description":"The current width of the floating pane.","values":[]},{"name":"floatingHeight","description":"The current height of the floating pane.","values":[]},{"name":"hasHeader","description":"Indicates whether the pane has a header section.","values":[]},{"name":"floatingMinHeight","description":"The minimum height constraint for the floating pane.","values":[]},{"name":"floatingMinWidth","description":"The minimum width constraint for the floating pane.","values":[]},{"name":"floatingId","description":"A unique identifier for the floating pane.","values":[]},{"name":"maximized","description":"Indicates whether the floating pane is currently maximized.","values":[]}],"references":[]},{"name":"igc-pane-header","description":"\n---\n\n\n### **Events:**\n - **igcPaneHeaderDragStart** - Emitted when dragging starts on the header.\n- **igcPaneHeaderDragMoved** - Emitted during header dragging.\n- **igcPaneHeaderDragEnd** - Emitted when dragging ends on the header.\n- **igcPinToggle** - Emitted when the pin button is clicked.\n- **igcMaximize** - Emitted when the maximize button is clicked.\n- **igcClose** - Emitted when the close button is clicked.\n- **elementConnected** - Emitted when the element is connected to the DOM.\n- **elementDisconnected** - Emitted when the element is disconnected from the DOM.\n\n### **Slots:**\n - _default_ - Renders the pane header title.\n- **paneHeaderCloseButton** - Renders a custom close button.\n- **paneHeaderMaximizeButton** - Renders a custom maximize button.\n- **paneHeaderMinimizeButton** - Renders a custom minimize button.\n- **paneHeaderPinButton** - Renders a custom pin button.\n- **paneHeaderUnpinButton** - Renders a custom unpin button.","attributes":[{"name":"is-floating","description":"Indicates whether the header is used in a floating window.","values":[]},{"name":"is-floating-pane-header","description":"Indicates that the header is used in a floating pane context.","values":[]},{"name":"is-active","description":"Marks the header as active.","values":[]},{"name":"forced-drag","description":"Forces drag behavior on the pane header.","values":[]},{"name":"allow-close","description":"Enables or disables closing.","values":[]},{"name":"allow-maximize","description":"Enables or disables maximizing.","values":[]},{"name":"allow-pinning","description":"Enables or disables pinning.","values":[]},{"name":"pinned","description":"Whether the pane is currently pinned.","values":[]},{"name":"maximized","description":"Whether the pane is currently maximized.","values":[]},{"name":"disabled","description":"Disables interaction with the pane header.","values":[]}],"references":[]},{"name":"igc-resizer","description":"\n---\n\n\n### **Events:**\n - **igcResizerDragStart** - Emitted when a drag operation starts on the resizer.\n- **igcResizerMoved** - Emitted during resizer moving.\n- **igcResizerDragEnd** - Emitted when dragging ends on the resizer.","attributes":[{"name":"orientation","description":"Specifies the orientation of the resizer.","values":[{"name":"ResizerLocation"}]}],"references":[]},{"name":"igc-split-pane","description":"\n---\n\n\n### **Events:**\n - **igcRendered** - Emitted when the component is updated and rendered.\n\n### **CSS Parts:**\n - **split-pane** - The root split pane container.","attributes":[{"name":"use-fixed-size","description":"Indicates whether the pane uses a fixed size.","values":[]},{"name":"parent-use-fixed-size","description":"Indicates if the parent pane uses fixed pane sizes.","values":[]},{"name":"orientation","description":"Defines the layout direction of the split pane: `horizontal` or `vertical`.","values":[{"name":"SplitPaneOrientation"}]},{"name":"size","values":[]}],"references":[]},{"name":"igc-splitter","description":"\n---\n\n\n### **Events:**\n - **igcResizeStart** - Emitted when a resize interaction starts.\n- **igcResizeEnd** - Emitted when the resize ends, passing the final size.\n\n### **CSS Parts:**\n - **splitter** - The main container of the splitter.\n- **splitter-base** - The draggable element that users interact with.\n- **splitter-ghost** - The visual indicator (ghost element) shown during drag.","attributes":[{"name":"show-drag-ghost","description":"Indicates whether the drag ghost element is shown while resizing.","values":[]},{"name":"parent-use-fixed-size","description":"Indicates if the parent pane uses fixed pane sizes.","values":[]},{"name":"split-pane-orientation","description":"Defines the orientation of the splitter based on the split pane orientation.","values":[]},{"name":"flyout-location","description":"Indicates the flyout location of the splitter.","values":[{"name":"UnpinnedLocation"}]},{"name":"scrollSpeed","values":[]}],"references":[]},{"name":"igc-unpinned-pane-header","description":"\n---\n\n\n### **Slots:**\n - _default_ - Default slot for the pane header content.\n\n### **CSS Parts:**\n - **unpinned-pane-header** - The main container of the pane header.\n- **horizontal** - Applied when the header is in a horizontal orientation.\n- **vertical** - Applied when the header is in a vertical orientation.\n- **start** - Applied when the header is on the left or top side.\n- **end** - Applied when the header is on the right or bottom side.\n- **active** - Applied when the header is in active state.\n- **disabled** - Applied when the header is disabled.","attributes":[{"name":"is-active","description":"Indicates whether the unpinned pane header is active.","values":[]},{"name":"disabled","description":"Indicates whether the unpinned pane header is disabled.","values":[]},{"name":"location","description":"The location where the unpinned pane is docked.","values":[]},{"name":"isActive","description":"Indicates whether the unpinned pane header is active.","values":[]}],"references":[]}]
+    }

package/package.json

@@ -1,133 +1,57 @@
-{
-  "name": "igniteui-dockmanager",
-  "version": "2.0.1",
-  "description": "Ignite UI Dock Manager Web Component",
-  "type": "module",
-  "files": [
-    "dist/",
-    "custom-elements.json"
-  ],
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "loader": [
-        "./dist/loader.d.ts"
-      ]
-    }
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./loader": {
-      "types": "./dist/loader.d.ts",
-      "import": "./dist/loader.js"
-    },
-    "./themes/*.css": "./dist/styles/*.css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/IgniteUI/igniteui-dockmanager"
-  },
-  "bugs": {
-    "url": "https://github.com/IgniteUI/igniteui-dockmanager/issues"
-  },
-  "keywords": [
-    "web components",
-    "UI components",
-    "dock manager"
-  ],
-  "scripts": {
-    "start": "npm run build:styles && vite",
-    "analyze": "cem analyze --config cem.config.mjs",
-    "build": "npm run analyze && node scripts/build.mjs",
-    "build.prod": "npm run analyze && node scripts/build.mjs",
-    "build.public": "npm run analyze && node scripts/build.mjs",
-    "build:styles": "node scripts/build-styles.mjs",
-    "watch-scss": "node scripts/styles-watcher.mjs",
-    "check-imports": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
-    "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
-    "clean:dist": "rimraf ./dist",
-    "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",
-    "clean:docs": "rimraf ./docs",
-    "test": "npm run build:styles && wtr",
-    "test.watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"wtr --watch\"",
-    "test.coverage": "npm run test -- --coverage",
-    "test.azure": "npm run test.coverage",
-    "lint": "npm run lint:biome && npm run lint:lit-analyzer && npm run lint:prettier && npm run lint:styles && npm run check-imports",
-    "lint:biome": "biome lint",
-    "lint:lit-analyzer": "lit-analyzer",
-    "lint:prettier": "prettier \"**/*.ts\" --check --write --ignore-path .gitignore",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
-    "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "build.docs": "set NODE_ENV=staging && typedoc src",
-    "build:typedoc:export": "node scripts/build-typedoc.js export",
-    "build:typedoc:import": "node scripts/build-typedoc.js import",
-    "build:typedoc:watch": "node scripts/build-typedoc.js watch",
-    "build:typedoc:serve": "node scripts/build-typedoc.js serve && concurrently -k -r \"npm:build:typedoc:watch\"",
-    "build:typedoc:ja": "set NODE_ENV=production && node scripts/build-typedoc.js buildJA",
-    "build:typedoc:en": "set NODE_ENV=production && node scripts/build-typedoc.js buildEN",
-    "prepare": "husky"
-  },
-  "license": "SEE LICENSE IN LICENSE",
-  "dependencies": {
-    "igniteui-i18n-core": "^1.0.1",
-    "igniteui-trial-watermark": "^3.1.0",
-    "lit": "^3.3.0"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "2.0.0",
-    "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@open-wc/testing": "^4.0.0",
-    "@types/mocha": "^10.0.10",
-    "@web/dev-server-esbuild": "^1.0.4",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-playwright": "^0.11.1",
-    "autoprefixer": "^10.4.21",
-    "browser-sync": "^3.0.4",
-    "concurrently": "^9.1.2",
-    "custom-element-jet-brains-integration": "^1.7.0",
-    "custom-element-vs-code-integration": "^1.5.0",
-    "globby": "^14.1.0",
-    "husky": "^9.1.7",
-    "ig-typedoc-theme": "^7.0.1",
-    "lint-staged": "^16.1.2",
-    "lit-analyzer": "^2.0.3",
-    "madge": "^8.0.0",
-    "node-watch": "^0.7.4",
-    "playwright": "^1.53.1",
-    "postcss": "^8.5.6",
-    "prettier": "^3.5.3",
-    "rimraf": "^6.0.1",
-    "sass-embedded": "~1.78.0",
-    "sinon": "^21.0.0",
-    "stylelint": "^16.21.0",
-    "stylelint-config-standard-scss": "^15.0.1",
-    "stylelint-prettier": "^5.0.3",
-    "stylelint-scss": "^6.12.1",
-    "ts-lit-plugin": "^2.0.2",
-    "tslib": "^2.8.1",
-    "typedoc": "^0.28.15",
-    "typedoc-plugin-localization": "^3.0.6",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5"
-  },
-  "peerDependencies": {
-    "igniteui-i18n-resources": "^1.0.1"
-  },
-  "lint-staged": {
-    "*.{js,ts,cjs,mjs,jsx,tsx}": [
-      "biome check --fix --no-errors-on-unmatched",
-      "prettier --write"
-    ]
-  },
-  "madge": {
-    "detectiveOptions": {
-      "ts": {
-        "skipTypeImports": true
-      }
-    }
-  },
-  "customElements": "custom-elements.json"
-}
+{
+    "name":  "igniteui-dockmanager",
+    "version":  "2.0.2-alpha.2",
+    "description":  "Ignite UI Dock Manager Web Component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes.",
+    "author":  "Infragistics",
+    "license":  "SEE LICENSE IN LICENSE",
+    "homepage":  "https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/dock-manager",
+    "typesVersions":  {
+                          "*":  {
+                                    "loader":  [
+                                                   "./loader.d.ts"
+                                               ]
+                                }
+                      },
+    "exports":  {
+                    ".":  {
+                              "types":  "./index.d.ts",
+                              "default":  "./index.js"
+                          },
+                    "./loader":  {
+                                     "types":  "./loader.d.ts",
+                                     "import":  "./loader.js"
+                                 },
+                    "./themes/*.css":  "./styles/*.css"
+                },
+    "type":  "module",
+    "repository":  {
+                       "type":  "git",
+                       "url":  "git+https://github.com/IgniteUI/igniteui-dockmanager.git"
+                   },
+    "bugs":  {
+                 "url":  "https://github.com/IgniteUI/igniteui-dockmanager/issues"
+             },
+    "engines":  {
+                    "node":  "\u003e=20"
+                },
+    "keywords":  [
+                     "dock manager",
+                     "dock manager",
+                     "UI components"
+                 ],
+    "customElements":  "custom-elements.json",
+    "dependencies":  {
+                         "igniteui-i18n-core":  "^1.0.1",
+                         "igniteui-trial-watermark":  "^3.1.0",
+                         "lit":  "^3.3.0"
+                     },
+    "peerDependencies":  {
+                             "igniteui-i18n-resources":  "^1.0.1"
+                         },
+    "peerDependenciesMeta":  {
+                                 "igniteui-i18n-resources":  {
+                                                                 "optional":  true
+                                                             }
+                             },
+    "web-types":  "./web-types.json"
+}

package/{dist/utils → utils}/test-utils.d.ts

@@ -1,5 +1,5 @@
 import type { PaneActionBehavior } from '../components/dockmanager/backfill-types-dockmanager.js';
-import type { IgcContentPane, IgcDockManagerComponentBase, IgcDockManagerLayout, IgcDockManagerResourceStrings, IgcDropTargetPaneInfo, IgcFloatingPaneResizeEventArgs, IgcFloatingPaneResizeMoveEventArgs, IgcPaneCloseEventArgs, IgcPaneDragEndEventArgs, IgcPaneDragOverEventArgs, IgcPaneDragStartEventArgs, IgcPaneNavigatorMetadata, IgcPanePinnedEventArgs, IgcPaneScrollEventArgs, IgcSplitPane, IgcTabGroupPane } from '../components/dockmanager/dockmanager.interfaces.js';
+import type { IgcContentPane, IgcDockManagerComponentBase, IgcDockManagerLayout, IgcDockManagerResourceStrings, IgcDropTargetPaneInfo, IgcFloatingPaneResizeEventArgs, IgcFloatingPaneResizeMoveEventArgs, IgcPaneCloseEventArgs, IgcPaneDragEndEventArgs, IgcPaneDragOverEventArgs, IgcPaneDragStartEventArgs, IgcPaneFlyoutEventArgs, IgcPaneNavigatorMetadata, IgcPanePinnedEventArgs, IgcPaneScrollEventArgs, IgcSplitPane, IgcTabGroupPane } from '../components/dockmanager/dockmanager.interfaces.js';
 import { IgcDockManagerService } from '../components/dockmanager/dockmanager.service.js';
 import { IgcDockManagerKeyboardService } from '../components/dockmanager/keyboard/keyboard.service.js';
 /**
@@ -16,7 +16,7 @@ export declare class IgcDockManagerComponentMock extends EventTarget implements
     allowMaximize: boolean;
     containedInBoundaries: boolean;
     disableKeyboardNavigation: boolean;
-    flyoutPane: IgcContentPane;
+    flyoutPane: IgcContentPane | null;
     maximizedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane;
     navigationPaneMeta: IgcPaneNavigatorMetadata;
     dir: string;
@@ -45,6 +45,7 @@ export declare class IgcDockManagerComponentMock extends EventTarget implements
     paneClose(args: IgcPaneCloseEventArgs): CustomEvent<IgcPaneCloseEventArgs>;
     paneScroll(args: IgcPaneScrollEventArgs): CustomEvent<IgcPaneScrollEventArgs>;
     panePinnedToggle(args: IgcPanePinnedEventArgs): CustomEvent<IgcPanePinnedEventArgs>;
+    paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent<IgcPaneFlyoutEventArgs>;
     paneDragStart(args: IgcPaneDragStartEventArgs): CustomEvent<IgcPaneDragStartEventArgs>;
     paneDragOver(args: IgcPaneDragOverEventArgs): CustomEvent<IgcPaneDragOverEventArgs>;
     paneDragEnd(args: IgcPaneDragEndEventArgs): CustomEvent<IgcPaneDragEndEventArgs>;

package/{dist/utils → utils}/test-utils.js

@@ -10,6 +10,7 @@ export class IgcDockManagerComponentMock extends EventTarget {
         this.allowMaximize = true;
         this.containedInBoundaries = false;
         this.disableKeyboardNavigation = false;
+        this.flyoutPane = null;
         this.dir = '';
         this.floatingPaneZIndicesMap = new Map();
         this.direction = '';
@@ -50,6 +51,9 @@ export class IgcDockManagerComponentMock extends EventTarget {
     panePinnedToggle(args) {
         return this._createAndDispatchEvent('panePinnedToggle', args);
     }
+    paneFlyoutToggle(args) {
+        return this._createAndDispatchEvent('paneFlyoutToggle', args);
+    }
     paneDragStart(args) {
         return this._createAndDispatchEvent('paneDragStart', args);
     }