angular-tailwind-components 1.1.3 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tailwind-components",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "files": [
     "fesm2022",
     "types",

package/types/angular-tailwind-components.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, AfterViewInit, ElementRef, OnInit, Type, InjectionToken } from '@angular/core';
+import { OnDestroy, ElementRef, AfterViewInit, OnInit, Type, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /** Common types used across all components */
@@ -141,6 +141,170 @@ declare class TailwindInput extends TailwindComponent implements ControlValueAcc
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindInput, "tailwind-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
+declare class TailwindTextarea extends TailwindComponent implements ControlValueAccessor {
+    /** Label text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder text */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Visible row count */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Optional maximum width in columns */
+    readonly cols: _angular_core.InputSignal<number | undefined>;
+    /** Maximum character length (HTML maxlength) */
+    readonly maxlength: _angular_core.InputSignal<number | undefined>;
+    /** Resize behavior */
+    readonly resize: _angular_core.InputSignal<"vertical" | "none" | "both" | "horizontal">;
+    /** Size variant */
+    readonly size: _angular_core.InputSignal<TailwindSize>;
+    /** Whether the textarea is readonly */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Helper text shown below field */
+    readonly helperText: _angular_core.InputSignal<string>;
+    /** Error text shown when hasError is true */
+    readonly errorText: _angular_core.InputSignal<string>;
+    /** Whether the textarea is in error state */
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    /** Two-way bound value */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Internal disabled state */
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    /** Computed textarea classes */
+    readonly textareaClasses: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    onInputChange(event: Event): void;
+    onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTextarea, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindTextarea, "tailwind-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare class TailwindUpload extends TailwindComponent implements ControlValueAccessor {
+    private static nextId;
+    private readonly fallbackFileId;
+    readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /** Visual layout: compact button or drop zone */
+    readonly variant: _angular_core.InputSignal<"button" | "area">;
+    /** Field label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Button label when `variant` is `button` */
+    readonly buttonLabel: _angular_core.InputSignal<string>;
+    /** Drop zone title when `variant` is `area` */
+    readonly areaTitle: _angular_core.InputSignal<string>;
+    /** Drop zone hint when `variant` is `area` */
+    readonly areaHint: _angular_core.InputSignal<string>;
+    /** Accepted MIME types / extensions (native `accept`) */
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    /** Allow multiple files */
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** Max size per file (bytes); if any file exceeds it, selection is rejected */
+    readonly maxFileSizeBytes: _angular_core.InputSignal<number | undefined>;
+    /** Button / control size */
+    readonly size: _angular_core.InputSignal<TailwindSize>;
+    /** Show a clear control when there is a value */
+    readonly showClear: _angular_core.InputSignal<boolean>;
+    /** Label for the clear action (i18n) */
+    readonly clearText: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly errorText: _angular_core.InputSignal<string>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    /** Data URL (`data:<mime>;base64,...`) — forms / `[(value)]`; with `multiple`, only the first file is stored here */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Raw files after a successful selection */
+    readonly filesSelected: _angular_core.OutputEmitterRef<File[]>;
+    /** Human-readable validation message when selection is rejected */
+    readonly validationError: _angular_core.OutputEmitterRef<string>;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    readonly isDragOver: _angular_core.WritableSignal<boolean>;
+    readonly selectedNames: _angular_core.WritableSignal<string[]>;
+    private dragDepth;
+    private onChange;
+    private onTouched;
+    readonly fileInputId: _angular_core.Signal<string>;
+    readonly areaClasses: _angular_core.Signal<string>;
+    writeValue(obj: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    triggerPicker(event?: Event): void;
+    onKeydownArea(event: KeyboardEvent): void;
+    onDragEnter(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDragOver(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    onNativeChange(event: Event): void;
+    clear(event?: Event): void;
+    blurHost(): void;
+    private validate;
+    private handleFiles;
+    private readAsDataUrl;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindUpload, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindUpload, "tailwind-upload", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "areaTitle": { "alias": "areaTitle"; "required": false; "isSignal": true; }; "areaHint": { "alias": "areaHint"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFileSizeBytes": { "alias": "maxFileSizeBytes"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "clearText": { "alias": "clearText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "filesSelected": "filesSelected"; "validationError": "validationError"; }, never, never, true, never>;
+}
+
+declare class TailwindInputOtp extends TailwindComponent implements ControlValueAccessor {
+    /** Label text */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Number of character slots */
+    readonly length: _angular_core.InputSignal<number>;
+    /** Allow only digits */
+    readonly integerOnly: _angular_core.InputSignal<boolean>;
+    /** Mask digits (password bullets) */
+    readonly mask: _angular_core.InputSignal<boolean>;
+    /** Size variant */
+    readonly size: _angular_core.InputSignal<TailwindSize>;
+    /** Slots are read-only (navigation still allowed) */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Helper text shown below */
+    readonly helperText: _angular_core.InputSignal<string>;
+    /** Error text when hasError is true */
+    readonly errorText: _angular_core.InputSignal<string>;
+    /** Error state styling */
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the group (used when label is empty) */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Separator string; empty hides */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** 0-based slot index after which the separator is rendered */
+    readonly separatorAfterIndex: _angular_core.InputSignal<number | null>;
+    /** Hint for browsers / SMS autofill (first slot only) */
+    readonly autocomplete: _angular_core.InputSignal<string>;
+    /** Two-way bound full code string */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Emitted when all slots are filled */
+    readonly completed: _angular_core.OutputEmitterRef<string>;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    readonly slotIndexes: _angular_core.Signal<number[]>;
+    readonly otpInputs: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
+    readonly cellClasses: _angular_core.Signal<string>;
+    readonly groupAriaLabel: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    maxSlots(): number;
+    digitAt(index: number): string;
+    showSeparatorAfter(index: number): boolean;
+    inputType(): string;
+    inputMode(): 'numeric' | 'text';
+    autocompleteForSlot(index: number): string | null;
+    cellId(index: number): string;
+    onSlotFocus(index: number): void;
+    onInput(event: Event, index: number): void;
+    onPaste(event: ClipboardEvent, index: number): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    private commit;
+    private normalizeIncoming;
+    private focusSlot;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindInputOtp, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindInputOtp, "tailwind-input-otp", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "integerOnly": { "alias": "integerOnly"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "separatorAfterIndex": { "alias": "separatorAfterIndex"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+}
+
 declare class TailwindCheckbox extends TailwindComponent implements ControlValueAccessor {
     /** Label text */
     readonly label: _angular_core.InputSignal<string>;
@@ -178,7 +342,7 @@ declare class TailwindRadioGroup<T = unknown> extends TailwindComponent implemen
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Currently selected value */
     readonly value: _angular_core.ModelSignal<T | null>;
     /** Internal disabled state */
@@ -365,7 +529,7 @@ declare class TailwindSpinner extends TailwindComponent {
     /** Aria label for accessibility */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     readonly containerClasses: _angular_core.Signal<string>;
     readonly spinnerClasses: _angular_core.Signal<string>;
     readonly labelClasses: _angular_core.Signal<string>;
@@ -896,7 +1060,7 @@ declare class TailwindToolbar extends TailwindComponent {
     /** Applies a stronger drop shadow. */
     readonly elevated: _angular_core.InputSignal<boolean>;
     /** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Navigation / actions rendered between logo and end slots. */
     readonly menu: _angular_core.InputSignal<TailwindMenuItem[]>;
     /** Emitted when a non-disabled, non-divider menu entry is activated. */
@@ -912,7 +1076,7 @@ declare class TailwindToolbar extends TailwindComponent {
 
 declare class TailwindDivider extends TailwindComponent {
     /** Rule direction */
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Adds horizontal margin to the rule (horizontal orientation only). */
     readonly inset: _angular_core.InputSignal<boolean>;
     /** Border style for the rule */
@@ -979,7 +1143,7 @@ declare class TailwindSlider extends TailwindComponent implements ControlValueAc
     /** Two-thumb range mode */
     readonly range: _angular_core.InputSignal<boolean>;
     /** Layout */
-    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Tick marks at each step */
     readonly showTicks: _angular_core.InputSignal<boolean>;
     /** Control size */
@@ -1051,5 +1215,5 @@ declare class TailwindModalRef<R = any> {
     _getResult(): R | undefined;
 }
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective };
+export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload };
 export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindSolarIcon, TailwindTableColumn, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };