@nuralyui/panel 0.0.1 → 0.0.4

package/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './panel.component.js';
+export * from './panel.types.js';
+export * from './controllers/index.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './panel.component.js';
+export * from './panel.types.js';
+export * from './controllers/index.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/panel/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './panel.component.js';\nexport * from './panel.types.js';\nexport * from './controllers/index.js';\n"]}

package/package.json

@@ -1,49 +1,49 @@
 {
-  "name": "@nuralyui/panel",
-  "version": "0.0.1",
-  "description": "Panel component for NuralyUI - transformable panel/window with drag and resize",
-  "main": "index.js",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./index.js"
+    "name": "@nuralyui/panel",
+    "version": "0.0.4",
+    "description": "Panel component for NuralyUI - transformable panel/window with drag and resize",
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
     },
-    "./bundle": {
-      "import": "./bundle.js"
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "panel.bundled.js",
+        "bundle.js"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Nuralyio/NuralyUI.git",
+        "directory": "src/components/panel"
+    },
+    "keywords": [
+        "panel",
+        "window",
+        "draggable",
+        "resizable",
+        "web-components",
+        "lit"
+    ],
+    "author": "Nuraly, Laabidi Aymen",
+    "license": "ISC",
+    "nuralyui": {
+        "requiredComponents": [
+            "nr-icon"
+        ]
+    },
+    "peerDependencies": {
+        "@nuralyui/icon": "^0.0.1",
+        "@nuralyui/common": "^0.0.1"
     }
-  },
-  "files": [
-    "*.js",
-    "*.d.ts",
-    "*.js.map",
-    "panel.bundled.js",
-    "bundle.js"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Nuralyio/NuralyUI.git",
-    "directory": "src/components/panel"
-  },
-  "keywords": [
-    "panel",
-    "window",
-    "draggable",
-    "resizable",
-    "web-components",
-    "lit"
-  ],
-  "author": "Nuraly, Laabidi Aymen",
-  "license": "ISC",
-  "nuralyui": {
-    "requiredComponents": [
-      "nr-icon"
-    ]
-  },
-  "peerDependencies": {
-    "@nuralyui/icon": "^0.0.1",
-    "@nuralyui/common": "^0.0.1"
-  }
 }

package/panel.component.d.ts

@@ -0,0 +1,199 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, type PropertyValues } from 'lit';
+import { PanelMode, PanelSize, PanelPosition, MaximizePosition } from './panel.types.js';
+import '../icon/index.js';
+import '../label/index.js';
+import { PanelDragHost, PanelResizeHost } from './controllers/index.js';
+declare const NrPanelElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile panel component that can transform between panel and window modes.
+ *
+ * Features:
+ * - Transform between panel (docked) and window (floating) modes
+ * - Draggable in window mode
+ * - Resizable panels
+ * - Collapsible content
+ * - Minimizable to compact view
+ * - Theme-aware styling with light/dark mode support
+ * - Multiple size presets
+ * - Positioned docking (left, right, top, bottom)
+ *
+ * @example
+ * ```html
+ * <!-- Panel docked to right side -->
+ * <nr-panel
+ *   title="Settings Panel"
+ *   mode="panel"
+ *   position="right"
+ *   size="medium">
+ *   <p>Panel content here</p>
+ * </nr-panel>
+ *
+ * <!-- Floating draggable window -->
+ * <nr-panel
+ *   title="Tool Window"
+ *   mode="window"
+ *   draggable
+ *   resizable
+ *   size="medium">
+ *   <p>Window content here</p>
+ * </nr-panel>
+ * ```
+ *
+ * @fires panel-mode-change - Panel mode changed
+ * @fires panel-close - Panel closed
+ * @fires panel-minimize - Panel minimized
+ * @fires panel-maximize - Panel maximized/restored
+ * @fires panel-drag-start - Panel drag started
+ * @fires panel-drag-end - Panel drag ended
+ * @fires panel-resize - Panel resized
+ *
+ * @slot default - Panel body content
+ * @slot header - Custom header content
+ * @slot footer - Custom footer content
+ */
+export declare class NrPanelElement extends NrPanelElement_base implements PanelDragHost, PanelResizeHost {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /** Panel mode (panel, window, minimized) */
+    mode: PanelMode;
+    /** Panel size */
+    size: PanelSize;
+    /** Panel position (for panel mode) */
+    position: PanelPosition;
+    /** Position where the window appears when maximizing from embedded mode */
+    maximizePosition: MaximizePosition;
+    /** Whether the panel can be dragged (window mode only) */
+    draggable: boolean;
+    /** Whether the panel is resizable */
+    resizable: boolean;
+    /** Whether the panel content can be collapsed */
+    collapsible: boolean;
+    /** Whether the panel can be minimized */
+    minimizable: boolean;
+    /** Whether the panel can be closed */
+    closable: boolean;
+    /** Whether to enable smooth animations for position/mode changes */
+    animated: boolean;
+    /** Panel title */
+    title: string;
+    /** Header icon */
+    icon: string;
+    /** Custom width */
+    width: string;
+    /** Custom height */
+    height: string;
+    /** Whether the panel is open/visible */
+    open: boolean;
+    /** Collapsed state */
+    private collapsed;
+    /** Dragging state */
+    isDragging: boolean;
+    /** Animation state */
+    private animating;
+    /** Current X offset for dragging */
+    offsetX: number;
+    /** Current Y offset for dragging */
+    offsetY: number;
+    /** Current panel width */
+    panelWidth: number;
+    /** Current panel height */
+    panelHeight: number;
+    /** Original mode before any transformations (for restoration from minimized) */
+    private originalMode;
+    /** Track if panel is maximized from embedded mode */
+    private isMaximizedFromEmbedded;
+    /** Track if this panel was created from a tab pop-out */
+    isTabPopOut: boolean;
+    /** Track if this is the first update to capture initial mode */
+    private isFirstUpdate;
+    /** Original dimensions before maximizing from embedded mode */
+    private originalEmbeddedWidth;
+    /** Original dimensions before maximizing from embedded mode */
+    private originalEmbeddedHeight;
+    private dragController;
+    private _resizeController;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Handle mode change
+     */
+    private handleModeChange;
+    /**
+     * Transform to window mode
+     */
+    transformToWindow(): void;
+    /**
+     * Transform to panel mode
+     */
+    transformToPanel(): void;
+    /**
+     * Restore panel to its original state
+     */
+    restore(): void;
+    /**
+     * Minimize panel
+     */
+    minimize(): void;
+    /**
+     * Maximize embedded panel to floating window
+     */
+    maximizeEmbedded(): void;
+    /**
+     * Set the window position based on maximizePosition with slight randomization
+     */
+    private setMaximizePosition;
+    /**
+     * Restore maximized embedded panel back to embedded mode
+     */
+    restoreEmbedded(): void;
+    /**
+     * Maximize/restore panel
+     */
+    maximize(): void;
+    /**
+     * Close panel
+     */
+    close(): void;
+    /**
+     * Toggle collapsed state
+     */
+    toggleCollapse(): void;
+    /**
+     * Get label size based on panel size
+     */
+    private getLabelSize;
+    /**
+     * Get panel classes
+     */
+    private getPanelClasses;
+    /**
+     * Get panel styles
+     */
+    private getPanelStyles;
+    /**
+     * Render header
+     */
+    private renderHeader;
+    /**
+     * Render footer
+     */
+    private renderFooter;
+    /**
+     * Render resize handles
+     */
+    private renderResizeHandles;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-panel': NrPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=panel.component.d.ts.map