@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/button/controllers/base.controller.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { ButtonBaseController, ButtonHost, ErrorHandler } from '../interfaces/index.js';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all button component controllers
+ */
+export declare abstract class BaseButtonController extends BaseComponentController<ButtonHost & ReactiveControllerHost> implements ButtonBaseController, ErrorHandler {
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/button/controllers/base.controller.js

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller class that implements common functionality
+ * for all button component controllers
+ */
+export class BaseButtonController extends BaseComponentController {
+}
+//# sourceMappingURL=base.controller.js.map

package/dist/src/components/button/controllers/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseButtonController } from './base.controller.js';
+export { ButtonRippleController } from './ripple.controller.js';
+export { ButtonKeyboardController } from './keyboard.controller.js';
+export { ButtonLinkController } from './link.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/button/controllers/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseButtonController } from './base.controller.js';
+export { ButtonRippleController } from './ripple.controller.js';
+export { ButtonKeyboardController } from './keyboard.controller.js';
+export { ButtonLinkController } from './link.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/button/controllers/keyboard.controller.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { KeyboardController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Keyboard controller manages keyboard interaction capabilities for button components
+ * Handles Enter and Space key activation following ARIA best practices
+ */
+export declare class ButtonKeyboardController extends BaseButtonController implements KeyboardController {
+    /**
+     * Handle keyboard activation (Enter/Space keys)
+     * @param event - The keyboard event
+     */
+    handleKeyboardActivation(event: KeyboardEvent): void;
+    /**
+     * Handle keydown events with proper disabled state checking
+     * @param event - The keyboard event
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Check if the key is an activation key (Enter or Space)
+     */
+    private isActivationKey;
+    /**
+     * Check if the key is allowed when component is disabled
+     */
+    private isReadonlyKeyAllowed;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map

package/dist/src/components/button/controllers/keyboard.controller.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Keyboard controller manages keyboard interaction capabilities for button components
+ * Handles Enter and Space key activation following ARIA best practices
+ */
+export class ButtonKeyboardController extends BaseButtonController {
+    /**
+     * Handle keyboard activation (Enter/Space keys)
+     * @param event - The keyboard event
+     */
+    handleKeyboardActivation(event) {
+        try {
+            if (this.host.disabled)
+                return;
+            const isActivationKey = this.isActivationKey(event);
+            if (isActivationKey) {
+                event.preventDefault();
+                // Trigger click event for consistency
+                this.host.click();
+                // Dispatch custom keyboard activation event
+                this.dispatchEvent(new CustomEvent('keyboard-activation', {
+                    detail: {
+                        key: event.key,
+                        timestamp: Date.now(),
+                        target: this.host
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleKeyboardActivation');
+        }
+    }
+    /**
+     * Handle keydown events with proper disabled state checking
+     * @param event - The keyboard event
+     */
+    handleKeydown(event) {
+        try {
+            if (this.host.disabled) {
+                // Allow readonly navigation keys even when disabled
+                const isNavigationKey = this.isReadonlyKeyAllowed(event);
+                if (!isNavigationKey) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            this.handleKeyboardActivation(event);
+        }
+        catch (error) {
+            this.handleError(error, 'handleKeydown');
+        }
+    }
+    /**
+     * Check if the key is an activation key (Enter or Space)
+     */
+    isActivationKey(event) {
+        return event.key === 'Enter' || event.key === ' ';
+    }
+    /**
+     * Check if the key is allowed when component is disabled
+     */
+    isReadonlyKeyAllowed(event) {
+        const allowedKeys = [
+            'Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown',
+            'ArrowLeft', 'ArrowRight', 'Home', 'End'
+        ];
+        return allowedKeys.includes(event.key);
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

package/dist/src/components/button/controllers/link.controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LinkController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Link controller manages link behavior for button components
+ * Handles the distinction between button and anchor elements
+ */
+export declare class ButtonLinkController extends BaseButtonController implements LinkController {
+    /**
+     * Check if the button should render as a link (has href attribute)
+     */
+    isLinkType(): boolean;
+    /**
+     * Get the appropriate element tag based on button type
+     */
+    getElementTag(): string;
+    /**
+     * Get link-specific attributes for anchor elements
+     */
+    getLinkAttributes(): Record<string, any>;
+    /**
+     * Handle link navigation with proper event dispatching
+     */
+    handleLinkNavigation(event: Event): void;
+}
+//# sourceMappingURL=link.controller.d.ts.map

package/dist/src/components/button/controllers/link.controller.js

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Link controller manages link behavior for button components
+ * Handles the distinction between button and anchor elements
+ */
+export class ButtonLinkController extends BaseButtonController {
+    /**
+     * Check if the button should render as a link (has href attribute)
+     */
+    isLinkType() {
+        return !!this.host.href;
+    }
+    /**
+     * Get the appropriate element tag based on button type
+     */
+    getElementTag() {
+        return this.isLinkType() ? 'a' : 'button';
+    }
+    /**
+     * Get link-specific attributes for anchor elements
+     */
+    getLinkAttributes() {
+        try {
+            const attributes = {};
+            if (this.isLinkType()) {
+                attributes.href = this.host.href;
+                if (this.host.target) {
+                    attributes.target = this.host.target;
+                    // Add security attributes for external links
+                    if (this.host.target === '_blank') {
+                        attributes.rel = 'noopener noreferrer';
+                    }
+                }
+                attributes.role = 'link';
+            }
+            else {
+                attributes.role = 'button';
+            }
+            return attributes;
+        }
+        catch (error) {
+            this.handleError(error, 'getLinkAttributes');
+            return { role: 'button' };
+        }
+    }
+    /**
+     * Handle link navigation with proper event dispatching
+     */
+    handleLinkNavigation(event) {
+        try {
+            if (this.isLinkType()) {
+                // Dispatch custom navigation event
+                this.dispatchEvent(new CustomEvent('link-navigation', {
+                    detail: {
+                        href: this.host.href,
+                        target: this.host.target,
+                        timestamp: Date.now(),
+                        originalEvent: event
+                    },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        catch (error) {
+            this.handleError(error, 'handleLinkNavigation');
+        }
+    }
+}
+//# sourceMappingURL=link.controller.js.map

package/dist/src/components/button/controllers/ripple.controller.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { RippleController } from '../interfaces/index.js';
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Ripple controller manages ripple effect functionality for button components
+ */
+export declare class ButtonRippleController extends BaseButtonController implements RippleController {
+    /**
+     * Creates ripple effect on button click with enhanced animation
+     * @param event - The click event
+     */
+    createRipple(event: MouseEvent): void;
+    /**
+     * Handle click events with ripple effect and dispatch custom event
+     * @param event - The click event
+     */
+    handleRippleClick(event: MouseEvent): void;
+}
+//# sourceMappingURL=ripple.controller.d.ts.map

package/dist/src/components/button/controllers/ripple.controller.js

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseButtonController } from './base.controller.js';
+/**
+ * Ripple controller manages ripple effect functionality for button components
+ */
+export class ButtonRippleController extends BaseButtonController {
+    /**
+     * Creates ripple effect on button click with enhanced animation
+     * @param event - The click event
+     */
+    createRipple(event) {
+        try {
+            if (!this.host.ripple || this.host.disabled)
+                return;
+            const button = event.currentTarget;
+            const rect = button.getBoundingClientRect();
+            // Make ripple larger for more pronounced effect
+            const size = Math.max(rect.width, rect.height) * 2;
+            const x = event.clientX - rect.left - size / 2;
+            const y = event.clientY - rect.top - size / 2;
+            const ripple = document.createElement('span');
+            ripple.className = 'ripple';
+            ripple.style.width = ripple.style.height = size + 'px';
+            ripple.style.left = x + 'px';
+            ripple.style.top = y + 'px';
+            // Remove any existing ripples
+            const existingRipples = button.querySelectorAll('.ripple');
+            existingRipples.forEach(r => r.remove());
+            button.appendChild(ripple);
+            // Remove ripple after animation
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        }
+        catch (error) {
+            this.handleError(error, 'createRipple');
+        }
+    }
+    /**
+     * Handle click events with ripple effect and dispatch custom event
+     * @param event - The click event
+     */
+    handleRippleClick(event) {
+        try {
+            this.createRipple(event);
+            // Dispatch custom button click event if available
+            this.dispatchEvent(new CustomEvent('button-click', {
+                detail: {
+                    disabled: this.host.disabled,
+                    timestamp: Date.now(),
+                    coordinates: {
+                        x: event.clientX,
+                        y: event.clientY
+                    }
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            this.handleError(error, 'handleRippleClick');
+        }
+    }
+}
+//# sourceMappingURL=ripple.controller.js.map

package/dist/src/components/button/interfaces/base-controller.interface.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ButtonType } from '../button.types.js';
+/**
+ * Base controller interface for button component controllers
+ * All controllers should extend this interface for consistency
+ */
+export interface ButtonBaseController {
+    readonly host: ButtonHost;
+    handleError?(error: Error, context: string): void;
+}
+/**
+ * Error handling interface for controllers
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+/**
+ * Host element interface defining the contract between controllers and the button component
+ */
+export interface ButtonHost {
+    disabled: boolean;
+    loading: boolean;
+    type: ButtonType;
+    href: string;
+    target: string;
+    ripple: boolean;
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+    click(): void;
+    focus(): void;
+    blur(): void;
+    contains(element: Element): boolean;
+}
+/**
+ * Ripple controller interface for managing ripple effects
+ */
+export interface RippleController extends ButtonBaseController {
+    createRipple(event: MouseEvent): void;
+    handleRippleClick(event: MouseEvent): void;
+}
+/**
+ * Keyboard controller interface for handling keyboard interactions
+ */
+export interface KeyboardController extends ButtonBaseController {
+    handleKeyboardActivation(event: KeyboardEvent): void;
+    handleKeydown(event: KeyboardEvent): void;
+}
+/**
+ * Link controller interface for managing link behavior
+ */
+export interface LinkController extends ButtonBaseController {
+    isLinkType(): boolean;
+    getElementTag(): string;
+    getLinkAttributes(): Record<string, any>;
+    handleLinkNavigation(event: Event): void;
+}
+//# sourceMappingURL=base-controller.interface.d.ts.map

package/dist/src/components/button/interfaces/base-controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=base-controller.interface.js.map

package/dist/src/components/button/interfaces/index.d.ts

@@ -0,0 +1,2 @@
+export * from './base-controller.interface.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/button/interfaces/index.js

@@ -0,0 +1,2 @@
+export * from './base-controller.interface.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/button/test/nr-button_test.d.ts

@@ -0,0 +1,2 @@
+import '../button.component';
+//# sourceMappingURL=nr-button_test.d.ts.map

package/dist/src/components/button/test/nr-button_test.js

@@ -0,0 +1,91 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { html, fixture, expect } from '@open-wc/testing';
+import { EMPTY_STRING } from '../button.types.js';
+import '../button.component';
+suite('NrButtonElement', () => {
+    test('has default properties', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        const icon = el.shadowRoot.querySelector('nr-icon');
+        expect(el.disabled).to.be.false;
+        expect(el.loading).to.be.false;
+        expect(el.size).to.equal(EMPTY_STRING);
+        expect(el.type).to.equal("default" /* ButtonType.Default */);
+        expect(el.dashed).to.be.false;
+        expect(el.icon).to.equal(EMPTY_STRING);
+        expect(button).to.not.have.class('button-dashed');
+        expect(button).to.not.have.attribute('data-size');
+        expect(button).to.not.have.attribute('data-state');
+        expect(button).to.have.attribute('data-type', "default" /* ButtonType.Default */);
+        expect(button.disabled).to.be.false;
+        expect(icon).to.not.exist;
+    }));
+    test('has a label', () => __awaiter(void 0, void 0, void 0, function* () {
+        const buttonLabel = 'Test content';
+        const el = yield fixture(html `<nr-button>${buttonLabel}</nr-button>`);
+        const slot = el.shadowRoot.querySelector('slot');
+        const assignedNode = slot.assignedNodes();
+        expect(assignedNode[0].textContent).to.equal(buttonLabel);
+    }));
+    test('fires onClick event when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        let eventFired = false;
+        el.addEventListener('click', () => {
+            eventFired = true;
+        });
+        button.click();
+        expect(eventFired).to.be.true;
+    }));
+    test('has a disabled property on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button disabled></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        expect(button.disabled).to.be.true;
+    }));
+    test('does not fire onClick event when disabled', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button disabled></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        let eventFired = false;
+        el.addEventListener('click', () => {
+            eventFired = true;
+        });
+        button.click();
+        expect(eventFired).to.be.false;
+    }));
+    test('renders the icon', () => __awaiter(void 0, void 0, void 0, function* () {
+        const iconName = 'sample-icon';
+        const el = yield fixture(html `<nr-button icon=${iconName}></nr-button>`);
+        const icon = el.shadowRoot.querySelector('nr-icon');
+        expect(icon).to.exist;
+        expect(icon).to.have.attribute('name', iconName);
+    }));
+    test('applies the correct classe for dashed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button dashed></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        expect(button).to.have.class('button-dashed');
+    }));
+    test('reflects the loading property as data-state on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button loading></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        expect(button).to.have.attribute('data-state', 'loading');
+    }));
+    test('reflects the size property as data-size on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button size=${"large" /* ButtonSize.Large */}></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        expect(button).to.have.attribute('data-size', "large" /* ButtonSize.Large */);
+    }));
+    test('reflects the type property as data-type on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-button type=${"primary" /* ButtonType.Primary */}></nr-button>`);
+        const button = el.shadowRoot.querySelector('button');
+        expect(button).to.have.attribute('data-type', "primary" /* ButtonType.Primary */);
+    }));
+});
+//# sourceMappingURL=nr-button_test.js.map

package/dist/src/components/canvas/base-canvas.component.d.ts

@@ -11,7 +11,7 @@ import '../chatbot/chatbot.component.js';
 import { ChatbotCoreController } from '../chatbot/core/chatbot-core.controller.js';
 import { ViewportController, SelectionController, ConnectionController, KeyboardController, DragController, ConfigController, MarqueeController, ClipboardController, UndoController, FrameController, CollaborationController, type MarqueeState } from './controllers/index.js';
 import type { ConnectionState, DragState, CanvasHost, ContextMenuState, CanvasViewport } from './interfaces/index.js';
-declare const BaseCanvasElement_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;
+declare const BaseCanvasElement_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) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Abstract base class for canvas components (workflow & whiteboard).
  *
@@ -22,6 +22,7 @@ declare const BaseCanvasElement_base: (new (...args: any[]) => import("@nuralyui
  * normalization, containment dimensions, note config keys, etc.
  */
 export declare abstract class BaseCanvasElement extends BaseCanvasElement_base implements CanvasHost {
+    static useShadowDom: boolean;
     protected _workflow: Workflow;
     get workflow(): Workflow;
     set workflow(value: Workflow);
@@ -29,6 +30,7 @@ export declare abstract class BaseCanvasElement extends BaseCanvasElement_base i
     disabled: boolean;
     showMinimap: boolean;
     showToolbar: boolean;
+    showZoomControls: boolean;
     showPalette: boolean;
     canvasId: string;
     collaborative: boolean;
@@ -163,7 +165,7 @@ export declare abstract class BaseCanvasElement extends BaseCanvasElement_base i
     toggleChatbotPanel(): void;
     protected renderEdges(): import("lit-html").SVGTemplateResult;
     protected renderToolbar(): typeof nothing | import("lit-html").TemplateResult;
-    protected renderZoomControls(): import("lit-html").TemplateResult;
+    protected renderZoomControls(): typeof nothing | import("lit-html").TemplateResult;
     protected renderContextMenu(): typeof nothing | import("lit-html").TemplateResult;
     protected renderEmptyState(): typeof nothing | import("lit-html").TemplateResult;
     protected renderMarqueeBox(): import("lit-html").TemplateResult<1>;

package/dist/src/components/canvas/base-canvas.component.js

@@ -74,6 +74,7 @@ export class BaseCanvasElement extends NuralyUIBaseMixin(LitElement) {
         this.disabled = false;
         this.showMinimap = true;
         this.showToolbar = true;
+        this.showZoomControls = true;
         this.showPalette = false;
         this.canvasId = '';
         this.collaborative = false;
@@ -665,6 +666,8 @@ export class BaseCanvasElement extends NuralyUIBaseMixin(LitElement) {
         });
     }
     renderZoomControls() {
+        if (!this.showZoomControls)
+            return nothing;
         return renderZoomControlsTemplate({
             zoomPercentage: this.viewportController.getZoomPercentage(),
             onZoomIn: () => this.viewportController.zoomIn(),
@@ -760,6 +763,7 @@ export class BaseCanvasElement extends NuralyUIBaseMixin(LitElement) {
         });
     }
 }
+BaseCanvasElement.useShadowDom = true;
 __decorate([
     property({ type: Object })
 ], BaseCanvasElement.prototype, "workflow", null);
@@ -775,6 +779,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], BaseCanvasElement.prototype, "showToolbar", void 0);
+__decorate([
+    property({ type: Boolean })
+], BaseCanvasElement.prototype, "showZoomControls", void 0);
 __decorate([
     property({ type: Boolean })
 ], BaseCanvasElement.prototype, "showPalette", void 0);