@nuralyui/textarea 0.1.0

package/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrTextareaElement } from './textarea.component.js';
+export type { TEXTAREA_STATE, TEXTAREA_SIZE, TEXTAREA_VARIANT, TEXTAREA_RESIZE, ValidationRule, TextareaValidationResult, TextareaChangeEvent, TextareaResizeEvent, FocusOptions, BlurOptions } from './textarea.types.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { NrTextareaElement } from './textarea.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport { NrTextareaElement } from './textarea.component.js';\nexport type {\n  TEXTAREA_STATE,\n  TEXTAREA_SIZE,\n  TEXTAREA_VARIANT,\n  TEXTAREA_RESIZE,\n  ValidationRule,\n  TextareaValidationResult,\n  TextareaChangeEvent,\n  TextareaResizeEvent,\n  FocusOptions,\n  BlurOptions\n} from './textarea.types.js';"]}

package/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@nuralyui/textarea",
+    "version": "0.1.0",
+    "description": "Textarea component for Nuraly UI Library with validation, resize options, and interactive features",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "MIT",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ],
+    "keywords": [
+        "textarea",
+        "web-components",
+        "lit-element",
+        "ui-library",
+        "validation",
+        "form-control"
+    ]
+}

package/react.d.ts

@@ -0,0 +1,9 @@
+import { NrTextareaElement } from './textarea.component.js';
+export declare const NrTextarea: import("@lit-labs/react").ReactWebComponent<NrTextareaElement, {
+    nrTextareaChange: string;
+    nrFocus: string;
+    nrBlur: string;
+    nrClear: string;
+    nrResize: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.js

@@ -0,0 +1,16 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTextareaElement } from './textarea.component.js';
+export const NrTextarea = createComponent({
+    tagName: 'nr-textarea',
+    elementClass: NrTextareaElement,
+    react: React,
+    events: {
+        nrTextareaChange: 'nr-textarea-change',
+        nrFocus: 'nr-focus',
+        nrBlur: 'nr-blur',
+        nrClear: 'nr-clear',
+        nrResize: 'nr-resize'
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/textarea/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,gBAAgB,EAAE,oBAAoB;QACtC,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,WAAW;KACtB;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrTextareaElement } from './textarea.component.js';\n\nexport const NrTextarea = createComponent({\n  tagName: 'nr-textarea',\n  elementClass: NrTextareaElement,\n  react: React,\n  events: {\n    nrTextareaChange: 'nr-textarea-change',\n    nrFocus: 'nr-focus',\n    nrBlur: 'nr-blur',\n    nrClear: 'nr-clear',\n    nrResize: 'nr-resize'\n  },\n});"]}

package/textarea.component.d.ts

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValues } from 'lit';
+import '../icon/icon.component.js';
+import { TEXTAREA_STATE, TEXTAREA_SIZE, TEXTAREA_VARIANT, TEXTAREA_RESIZE, ValidationRule, TextareaValidationResult, FocusOptions } from './textarea.types.js';
+import { ValidatableComponent, ValidationStatus } from '../../shared/validation.types.js';
+import { type TextareaValidationHost, type TextareaEventHost } from './controllers/index.js';
+declare const NrTextareaElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile textarea component with validation, resize options, and interactive features.
+ *
+ * @example
+ * ```html
+ * <nr-textarea placeholder="Enter your message"></nr-textarea>
+ * <nr-textarea rows="5" resize="vertical"></nr-textarea>
+ * <nr-textarea max-length="500" show-count></nr-textarea>
+ * ```
+ *
+ * @fires nr-textarea-change - Value changes
+ * @fires nr-focus - Textarea focused
+ * @fires nr-blur - Textarea blurred
+ * @fires nr-clear - Clear button clicked
+ * @fires nr-resize - Textarea resized
+ *
+ * @slot label - Textarea label
+ * @slot helper-text - Helper text
+ * @slot addon-before - Content before textarea
+ * @slot addon-after - Content after textarea
+ */
+export declare class NrTextareaElement extends NrTextareaElement_base implements TextareaValidationHost, TextareaEventHost, ValidatableComponent {
+    static styles: import("lit").CSSResult;
+    private textareaElement;
+    private validationController;
+    private eventController;
+    /** Disables the textarea */
+    disabled: boolean;
+    /** Makes the textarea read-only */
+    readonly: boolean;
+    /** Visual state (default, success, warning, error) */
+    state: TEXTAREA_STATE;
+    /** Current textarea value */
+    value: string;
+    /** Textarea size (small, medium, large) */
+    size: TEXTAREA_SIZE;
+    /** Visual variant (outlined, underlined, filled) */
+    variant: TEXTAREA_VARIANT;
+    /** Resize behavior (none, vertical, horizontal, both) */
+    resize: TEXTAREA_RESIZE;
+    /** Number of visible text lines */
+    rows: 3;
+    /** Number of visible character columns */
+    cols: 50;
+    /** Placeholder text */
+    placeholder: string;
+    /** HTML autocomplete attribute */
+    autocomplete: string;
+    /** Field name for form submission */
+    name?: string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Shows clear button */
+    allowClear: boolean;
+    /** Clearable alias for controller interface compatibility */
+    get clearable(): boolean;
+    /** Shows character counter */
+    showCount: boolean;
+    /** Maximum character limit */
+    maxLength?: number;
+    /** Minimum height for auto-resize */
+    minHeight?: number;
+    /** Maximum height for auto-resize */
+    maxHeight?: number;
+    /** Auto-resize textarea based on content */
+    autoResize: boolean;
+    /** Array of validation rules */
+    rules: ValidationRule[];
+    /** Validate on change */
+    validateOnChange: boolean;
+    /** Validate on blur */
+    validateOnBlur: boolean;
+    /** Show validation status icon */
+    hasFeedback: boolean;
+    /** Custom validation message */
+    validationMessage?: string;
+    private isFocused;
+    private validationResult?;
+    private characterCount;
+    private resizeObserver?;
+    constructor();
+    /**
+     * Setup controller event listeners
+     */
+    private setupControllerListeners;
+    /**
+     * Handle input from controller
+     */
+    private handleControllerInput;
+    /**
+     * Handle clear from controller
+     */
+    private handleControllerClear;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private cleanupResizeObserver;
+    private updateTextareaValue;
+    private autoResizeIfNeeded;
+    /**
+     * Handle input event (now delegated to event controller via addEventListener)
+     */
+    private handleInput;
+    /**
+     * Handle focus event (now delegated to event controller)
+     */
+    private handleFocus;
+    /**
+     * Handle blur event (now delegated to event controller)
+     */
+    private handleBlur;
+    /**
+     * Handle clear event (now delegated to event controller)
+     */
+    private handleClear;
+    private dispatchChangeEvent;
+    private dispatchResizeEvent;
+    /**
+     * Focus the textarea with optional configuration
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Blur the textarea
+     */
+    blur(): void;
+    /**
+     * Get validation status
+     */
+    getValidationResult(): TextareaValidationResult | undefined;
+    /**
+     * Trigger validation manually (ValidatableComponent interface)
+     */
+    validate(): Promise<boolean>;
+    /**
+     * Clear validation state
+     */
+    clearValidation(): void;
+    /**
+     * Clear the textarea value
+     */
+    clear(): void;
+    /**
+     * Add a validation rule (ValidatableComponent interface)
+     */
+    addRule(rule: ValidationRule): void;
+    /**
+     * Remove validation rules matching predicate (ValidatableComponent interface)
+     */
+    removeRule(predicate: (rule: ValidationRule) => boolean): void;
+    /**
+     * Clear all validation rules (ValidatableComponent interface)
+     */
+    clearRules(): void;
+    /**
+     * Get current validation status (ValidatableComponent interface)
+     */
+    getValidationStatus(): ValidationStatus;
+    /**
+     * Check if the textarea value is valid
+     */
+    isValid(): boolean;
+    /**
+     * Check validity (HTML form API compatibility)
+     */
+    checkValidity(): boolean;
+    /**
+     * Report validity (HTML form API compatibility)
+     */
+    reportValidity(): boolean;
+    /**
+     * Set custom validity message (HTML form API compatibility)
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Trigger validation manually (enhanced version)
+     */
+    validateTextarea(): Promise<boolean>;
+    /**
+     * Set validation state externally (for form integration)
+     */
+    setValidationStatus(result: TextareaValidationResult): void;
+    private renderLabel;
+    private renderTextarea;
+    private renderValidationIcon;
+    private renderClearButton;
+    private renderCharacterCount;
+    private renderHelperText;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=textarea.component.d.ts.map