@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/dropdown/templates/nr-dropdown-menu.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { styles } from './nr-dropdown-menu.style.js';
+let HyDropdownMenu = class HyDropdownMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.showChildren = false;
+        this.onMouseEnterMenu = () => {
+            if (!this.disabled)
+                this.showChildren = true;
+        };
+        this.onMouseLeaveMenu = () => {
+            if (!this.disabled)
+                this.showChildren = false;
+        };
+    }
+    firstUpdated() {
+        this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);
+        this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);
+    }
+    onClickMenu(menuClickEvent) {
+        menuClickEvent.stopPropagation();
+    }
+    disconnectedCallback() {
+        this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);
+        this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);
+    }
+    render() {
+        return html `<div @mousedown=${this.onClickMenu}>
+      ${this.icon ? html `<nr-icon name=${this.icon}></nr-icon>` : nothing}
+      <nr-label class="menu-label"> ${this.label}</nr-label>
+      <nr-icon
+        name="${this.direction === "right" /* DropDownDirection.Right */ ? 'caret-right' : 'caret-left'}"
+        id="caret-icon"
+      ></nr-icon>
+      <slot style="display:${this.showChildren ? 'block' : 'none'}"></slot>
+    </div>`;
+    }
+};
+HyDropdownMenu.styles = styles;
+__decorate([
+    query('div')
+], HyDropdownMenu.prototype, "menuOption", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HyDropdownMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], HyDropdownMenu.prototype, "icon", void 0);
+__decorate([
+    property()
+], HyDropdownMenu.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HyDropdownMenu.prototype, "direction", void 0);
+__decorate([
+    state()
+], HyDropdownMenu.prototype, "showChildren", void 0);
+HyDropdownMenu = __decorate([
+    customElement('nr-dropdown-menu')
+], HyDropdownMenu);
+export { HyDropdownMenu };
+//# sourceMappingURL=nr-dropdown-menu.js.map

package/dist/src/components/dropdown/templates/nr-dropdown-menu.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=nr-dropdown-menu.style.d.ts.map

package/dist/src/components/dropdown/templates/nr-dropdown-menu.style.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+const dropdownMenuStyle = css `
+  div {
+    padding: 0;
+    position: relative;
+    cursor: pointer;
+    background-color: #ffffff;
+    display: flex;
+    align-items: center;
+  }
+  nr-icon {
+    display: flex;
+  }
+  #caret-icon {
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+
+  :host(:not([disabled])) div:hover {
+    background-color: #f4f4f4;
+  }
+  :host([disabled]) div {
+    cursor: not-allowed;
+    background-color: #f4f4f4;
+    color: #c6c6c6;
+  }
+
+  ::slotted(*) {
+    z-index: 1000;
+    top: 0;
+    cursor: pointer;
+  }
+  :host([direction='left']) ::slotted(*) {
+    right: calc(200px - 0px);
+  }
+
+  :host([direction='right']) ::slotted(*) {
+    left: calc(200px - 0px);
+  }
+
+  :host(:not([icon])) .menu-label {
+    padding-left: 1rem;
+  }
+  :host([icon]) .menu-label {
+    padding-left: 0.5rem;
+  }
+`;
+export const styles = [dropdownMenuStyle];
+//# sourceMappingURL=nr-dropdown-menu.style.js.map

package/dist/src/components/file-upload/demo/file-upload-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import "../file-upload.component";
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    uploadProcesses: Map<string, number>;
+    firstUpdated(): void;
+    private _handleFileSelect;
+    private _handleFileRemove;
+    private _handleFileExceed;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+//# sourceMappingURL=file-upload-demo.d.ts.map

package/dist/src/components/file-upload/demo/file-upload-demo.js

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import "../file-upload.component";
+let ElMeenuElement = class ElMeenuElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.float = 'left';
+        this.uploadProcesses = new Map();
+    }
+    firstUpdated() {
+        var _a;
+        // Get reference to the file upload component
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (fileUpload) {
+            // Add event listeners to the component
+            fileUpload.addEventListener('file-select', this._handleFileSelect.bind(this));
+            fileUpload.addEventListener('file-remove', this._handleFileRemove.bind(this));
+            fileUpload.addEventListener('file-exceed', this._handleFileExceed.bind(this));
+        }
+    }
+    _handleFileSelect(event) {
+        var _a;
+        const { files } = event.detail;
+        const fileUpload = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nr-file-upload');
+        if (!fileUpload)
+            return;
+        files.forEach((file) => {
+            // Update status to 'uploading'
+            fileUpload.updateFileStatus(file.uid, 'uploading', 0);
+            // Simulate upload process with interval
+            const intervalId = window.setInterval(() => {
+                const currentPercentage = file.percentage || 0;
+                const percentage = Math.min(100, currentPercentage + 10);
+                fileUpload.updateFileStatus(file.uid, 'uploading', percentage);
+                if (percentage === 100) {
+                    window.clearInterval(intervalId);
+                    // Set file as successfully uploaded after a small delay
+                    setTimeout(() => {
+                        fileUpload.updateFileStatus(file.uid, 'success');
+                    }, 300);
+                    // Remove from tracking
+                    this.uploadProcesses.delete(file.uid);
+                }
+            }, 500);
+            // Store the interval ID for potential cancellation
+            this.uploadProcesses.set(file.uid, intervalId);
+        });
+    }
+    _handleFileRemove(event) {
+        const { file } = event.detail;
+        console.log(`File removed: ${file.name}`);
+        // Cancel upload process if it's still running
+        if (this.uploadProcesses.has(file.uid)) {
+            window.clearInterval(this.uploadProcesses.get(file.uid));
+            this.uploadProcesses.delete(file.uid);
+        }
+    }
+    _handleFileExceed(event) {
+        const { files } = event.detail;
+        console.warn(`Upload limit exceeded. Tried to upload ${files.length} additional files.`);
+        // Could show a notification or alert here
+    }
+    render() {
+        return html `
+      <div class="demo-container">
+        <h2>File Upload Demo</h2>
+        <nr-file-upload
+          accept="image/*"
+          multiple
+          drag
+          limit="5"
+          tip="JPG/PNG files up to 500kb">
+        </nr-file-upload>
+        
+        <div class="usage-info">
+          <h3>Usage:</h3>
+          <ul>
+            <li>Drag & drop files here</li>
+            <li>Or click to select files</li>
+            <li>Files will automatically start uploading</li>
+            <li>Use the X button to remove files</li>
+            <li>Click on eye icon to preview images</li>
+          </ul>
+        </div>
+      </div>
+    `;
+    }
+};
+ElMeenuElement.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: sans-serif;
+      }
+      
+      .demo-container {
+        width: 100%;
+        max-width: 700px;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        background-color: #fff;
+      }
+      
+      h2 {
+        color: #333;
+        margin-top: 0;
+      }
+      
+      .usage-info {
+        margin-top: 30px;
+        padding: 15px;
+        background-color: #f5f5f5;
+        border-radius: 6px;
+      }
+      
+      .usage-info h3 {
+        margin-top: 0;
+        color: #555;
+      }
+      
+      ul {
+        padding-left: 20px;
+      }
+      
+      li {
+        margin-bottom: 8px;
+        color: #666;
+      }
+    `,
+];
+__decorate([
+    state()
+], ElMeenuElement.prototype, "float", void 0);
+__decorate([
+    state()
+], ElMeenuElement.prototype, "uploadProcesses", void 0);
+ElMeenuElement = __decorate([
+    customElement('hy-file-demo')
+], ElMeenuElement);
+export { ElMeenuElement };
+//# sourceMappingURL=file-upload-demo.js.map

package/dist/src/components/form/controllers/submission.controller.d.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FormSubmissionData, FormSubmissionState } from '../form.types.js';
+/**
+ * Controller that handles form submission logic
+ */
+export declare class FormSubmissionController {
+    private host;
+    private submissionState;
+    private lastSubmissionData;
+    constructor(host: any);
+    /**
+     * Get current submission state
+     */
+    getSubmissionState(): FormSubmissionState;
+    /**
+     * Check if form is currently submitting
+     */
+    isSubmitting(): boolean;
+    /**
+     * Collect form data from all registered fields
+     */
+    collectFormData(): FormSubmissionData;
+    /**
+     * Submit form with validation
+     */
+    submitForm(customData?: Record<string, any>): Promise<FormSubmissionData>;
+    /**
+     * Reset submission state
+     */
+    resetSubmission(): void;
+    /**
+     * Get last submission data
+     */
+    getLastSubmissionData(): FormSubmissionData | null;
+    /**
+     * Get all form field elements from the host
+     */
+    private getFormFields;
+    /**
+     * Set submission state and update host
+     */
+    private setSubmissionState;
+    /**
+     * Dispatch submit attempt event
+     */
+    private dispatchSubmitAttemptEvent;
+    /**
+     * Dispatch submit success event
+     */
+    private dispatchSubmitSuccessEvent;
+    /**
+     * Dispatch submit error event
+     */
+    private dispatchSubmitErrorEvent;
+}
+//# sourceMappingURL=submission.controller.d.ts.map

package/dist/src/components/form/controllers/submission.controller.js

@@ -0,0 +1,220 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { FormSubmissionState, FORM_EVENTS } from '../form.types.js';
+/**
+ * Controller that handles form submission logic
+ */
+export class FormSubmissionController {
+    constructor(host) {
+        this.host = host;
+        this.submissionState = FormSubmissionState.Idle;
+        this.lastSubmissionData = null;
+    }
+    /**
+     * Get current submission state
+     */
+    getSubmissionState() {
+        return this.submissionState;
+    }
+    /**
+     * Check if form is currently submitting
+     */
+    isSubmitting() {
+        return this.submissionState === FormSubmissionState.Submitting;
+    }
+    /**
+     * Collect form data from all registered fields
+     */
+    collectFormData() {
+        const formData = new FormData();
+        const jsonData = {};
+        const fields = {};
+        // Get all form field elements
+        const formFields = this.getFormFields();
+        formFields.forEach(element => {
+            const name = element.name || element.getAttribute('name');
+            if (!name)
+                return;
+            const value = element.value;
+            // Add to FormData
+            if (value !== null && value !== undefined) {
+                formData.append(name, String(value));
+            }
+            // Add to JSON data
+            jsonData[name] = value;
+            fields[name] = {
+                element,
+                value,
+                name,
+                type: element.tagName.toLowerCase(),
+                required: element.required || false,
+                disabled: element.disabled || false
+            };
+        });
+        return {
+            formData,
+            jsonData,
+            fields
+        };
+    }
+    /**
+     * Submit form with validation
+     */
+    submitForm(customData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isSubmitting()) {
+                throw new Error('Form is already submitting');
+            }
+            try {
+                this.setSubmissionState(FormSubmissionState.Submitting);
+                // Validate form first
+                const validationController = this.host.validationController;
+                if (validationController) {
+                    const validationResult = yield validationController.validateForm();
+                    if (!validationResult.isValid) {
+                        // Focus first invalid field
+                        validationController.focusFirstInvalidField();
+                        // Dispatch submit attempt event
+                        this.dispatchSubmitAttemptEvent(validationResult);
+                        throw new Error(`Form validation failed: ${validationResult.summary}`);
+                    }
+                }
+                // Collect form data
+                const submissionData = this.collectFormData();
+                // Merge custom data if provided
+                if (customData) {
+                    Object.assign(submissionData.jsonData, customData);
+                    Object.entries(customData).forEach(([key, value]) => {
+                        submissionData.formData.append(key, String(value));
+                    });
+                }
+                this.lastSubmissionData = submissionData;
+                // Dispatch submit success event
+                this.dispatchSubmitSuccessEvent(submissionData);
+                this.setSubmissionState(FormSubmissionState.Success);
+                return submissionData;
+            }
+            catch (error) {
+                this.setSubmissionState(FormSubmissionState.Error);
+                // Dispatch submit error event
+                this.dispatchSubmitErrorEvent(error);
+                throw error;
+            }
+        });
+    }
+    /**
+     * Reset submission state
+     */
+    resetSubmission() {
+        this.submissionState = FormSubmissionState.Idle;
+        this.lastSubmissionData = null;
+    }
+    /**
+     * Get last submission data
+     */
+    getLastSubmissionData() {
+        return this.lastSubmissionData;
+    }
+    /**
+     * Get all form field elements from the host
+     */
+    getFormFields() {
+        var _a;
+        const host = this.host;
+        const fields = [];
+        // Query for all potential form field elements
+        const selectors = [
+            'nr-input',
+            'nr-select',
+            'nr-radio',
+            'nr-checkbox',
+            'nr-textarea',
+            'nr-timepicker',
+            'nr-datepicker',
+            'input',
+            'select',
+            'textarea'
+        ];
+        // Search in light DOM
+        selectors.forEach(selector => {
+            const elements = host.querySelectorAll(selector);
+            elements.forEach((element) => {
+                if (element.name || element.getAttribute('name')) {
+                    fields.push(element);
+                }
+            });
+        });
+        // Search in slotted content
+        const slots = ((_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [];
+        slots.forEach((slot) => {
+            const assignedElements = slot.assignedElements({ flatten: true });
+            assignedElements.forEach(element => {
+                selectors.forEach(selector => {
+                    if (element.matches && element.matches(selector)) {
+                        const fieldElement = element;
+                        if (fieldElement.name || fieldElement.getAttribute('name')) {
+                            fields.push(fieldElement);
+                        }
+                    }
+                    // Also search within the element
+                    const nestedFields = element.querySelectorAll(selector);
+                    nestedFields.forEach((nested) => {
+                        const fieldElement = nested;
+                        if (fieldElement.name || fieldElement.getAttribute('name')) {
+                            fields.push(fieldElement);
+                        }
+                    });
+                });
+            });
+        });
+        return fields;
+    }
+    /**
+     * Set submission state and update host
+     */
+    setSubmissionState(state) {
+        var _a, _b;
+        this.submissionState = state;
+        (_b = (_a = this.host).requestUpdate) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    /**
+     * Dispatch submit attempt event
+     */
+    dispatchSubmitAttemptEvent(validationResult) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_ATTEMPT, {
+            validationResult
+        });
+    }
+    /**
+     * Dispatch submit success event
+     */
+    dispatchSubmitSuccessEvent(data) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_SUCCESS, {
+            formData: data
+        });
+    }
+    /**
+     * Dispatch submit error event
+     */
+    dispatchSubmitErrorEvent(error) {
+        var _a, _b;
+        (_b = (_a = this.host).dispatchCustomEvent) === null || _b === void 0 ? void 0 : _b.call(_a, FORM_EVENTS.SUBMIT_ERROR, {
+            error
+        });
+    }
+}
+//# sourceMappingURL=submission.controller.js.map

package/dist/src/components/form/controllers/validation.controller.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { FormField, FormValidationResult, FormValidationState } from '../form.types.js';
+import { ValidatableComponent } from '@nuralyui/common/mixins';
+/**
+ * Controller that coordinates validation across all form fields
+ * This does NOT perform validation - it coordinates existing component validations
+ */
+export declare class FormValidationController {
+    private host;
+    private fields;
+    private validationState;
+    private validationPromise;
+    constructor(host: any);
+    /**
+     * Register a form field for validation coordination
+     */
+    registerField(element: HTMLElement & ValidatableComponent): void;
+    /**
+     * Unregister a form field
+     */
+    unregisterField(name: string): void;
+    /**
+     * Add event listeners to a form field
+     */
+    private addFieldListeners;
+    /**
+     * Remove event listeners from a form field
+     */
+    private removeFieldListeners;
+    /**
+     * Handle field validation event
+     */
+    private handleFieldValidation;
+    /**
+     * Update form validation state based on current field states
+     */
+    private updateFormValidationState;
+    /**
+     * Build validation errors object from current field states
+     */
+    private buildValidationErrors;
+    /**
+     * Validate all form fields (coordinates existing validations)
+     */
+    validateForm(): Promise<FormValidationResult>;
+    /**
+     * Perform the actual validation coordination
+     */
+    private performValidation;
+    /**
+     * Get current validation state
+     */
+    getValidationState(): FormValidationState;
+    /**
+     * Get all registered fields
+     */
+    getFields(): FormField[];
+    /**
+     * Get invalid fields
+     */
+    getInvalidFields(): FormField[];
+    /**
+     * Check if form is valid
+     */
+    isValid(): boolean;
+    /**
+     * Focus first invalid field
+     */
+    focusFirstInvalidField(): boolean;
+    /**
+     * Reset all fields
+     */
+    reset(): void;
+    /**
+     * Dispatch validation event
+     */
+    private dispatchValidationEvent;
+    /**
+     * Dispatch reset event
+     */
+    private dispatchResetEvent;
+}
+//# sourceMappingURL=validation.controller.d.ts.map