zt-ui-components
Version:
Enterprise-grade Angular UI component library with advanced theming, accessibility compliance, and modern design patterns. Features reactive forms support, two-way data binding, comprehensive customization options, and toast notifications.
1,469 lines (1,459 loc) • 61 kB
TypeScript
import * as i0 from '@angular/core';
import { OnInit, ElementRef, OnDestroy, EventEmitter, Renderer2, InjectionToken } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { Observable } from 'rxjs';
import * as i1 from '@angular/common';
declare class ZtUiComponents {
static ɵfac: i0.ɵɵFactoryDeclaration<ZtUiComponents, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ZtUiComponents, "lib-zt-ui-components", never, {}, {}, never, never, true, never>;
}
/**
* Theme color palette interface
*/
interface ThemeColors {
textBlack: string;
textWhite: string;
textPrimary: string;
default: string;
defaultHoverBg: string;
defaultHoverBorder: string;
defaultPressed: string;
primary: string;
primaryHoverBg: string;
primaryHoverBorder: string;
primaryPressed: string;
success: string;
successHoverBg: string;
successHoverBorder: string;
successPressed: string;
info: string;
infoHoverBg: string;
infoHoverBorder: string;
infoPressed: string;
warning: string;
warningHoverBg: string;
warningHoverBorder: string;
warningPressed: string;
danger: string;
dangerHoverBg: string;
dangerHoverBorder: string;
dangerPressed: string;
dark: string;
darkHoverBg: string;
darkHoverBorder: string;
darkPressed: string;
link: string;
linkHoverBg: string;
linkHoverBorder: string;
linkPressed: string;
}
/**
* Theme configuration interface
*/
interface ThemeConfig {
name: string;
colors: ThemeColors;
borderRadius: number;
borderSize: number;
fontFamily?: string;
fontSize?: {
small: string;
medium: string;
large: string;
};
spacing?: {
small: string;
medium: string;
large: string;
};
}
/**
* Predefined theme names
*/
type ThemeName = 'light' | 'dark' | 'bootstrap' | 'material';
/**
* Theme context for components
*/
interface ThemeContext {
globalTheme: ThemeConfig;
componentOverrides?: Partial<ThemeConfig>;
}
/**
* Theme validation result
*/
interface ThemeValidationResult {
isValid: boolean;
errors: string[];
warnings: string[];
}
/**
* A customizable button component that supports various styles, sizes, themes, and variants.
* It can be used as a standard button, submit button, or reset button with different visual appearances.
*
* @example
* <zt-button variant="primary" size="zt-md" theme="light">Click me</zt-button>
* <zt-button variant="danger" outline="true" disabled="true">Disabled</zt-button>
*/
declare class ButtonComponent implements OnInit {
private elementRef;
constructor(elementRef: ElementRef);
/**
* The type of the button element.
* @default 'button'
*/
type: 'button' | 'submit' | 'reset';
/**
* Whether the button is disabled.
* @default false
*/
disabled: boolean;
/**
* The visual variant of the button.
* @default 'primary'
*/
variant: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'dark' | 'link' | 'round' | 'floating';
/**
* Whether to display the button as an outline style.
* @default false
*/
outline: boolean;
/**
* The size of the button.
* @default 'zt-md'
*/
size: 'zt-sm' | 'zt-md' | 'zt-lg';
/**
* The theme of the button.
* @default 'light'
* @deprecated Use global theming or ztTheme directive for local overrides
*/
theme: 'light' | 'dark' | 'bootstrap' | 'material';
/**
* Local theme override for this button component.
* Takes precedence over global theme.
*/
ztTheme?: Partial<ThemeConfig>;
/**
* Dynamically applies CSS classes to the button element based on the component's properties.
* @returns A string of CSS classes.
*/
get buttonClass(): string;
/**
* Sets the 'type' attribute on the button element.
* @returns The button type.
*/
get buttonType(): string;
/**
* Sets the 'disabled' attribute on the button element when disabled is true.
* @returns true if disabled, null otherwise.
*/
get isDisabled(): boolean | null;
/**
* Applies theme overrides if specified
*/
ngOnInit(): void;
/**
* Applies local theme override to the component
*/
private applyLocalTheme;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "zt-button", never, { "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "size": { "alias": "size"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "ztTheme": { "alias": "ztTheme"; "required": false; }; }, {}, never, ["*"], true, never>;
}
/**
* A modern, flexible card component that supports various styles, themes, and sizes.
* It provides content projection for header, body, footer, and media sections.
*
* @example
* <zt-card cardStyle="elevated" theme="light" size="md">
* <div class="card-header">Card Title</div>
* <div class="card-body">Card content goes here.</div>
* <div class="card-footer"><button>Action</button></div>
* </zt-card>
*/
declare class CardComponent implements OnInit {
private elementRef;
constructor(elementRef: ElementRef);
/**
* The visual style of the card.
* @default 'elevated'
*/
cardStyle: 'elevated' | 'outlined' | 'flat';
/**
* The theme of the card component.
* @default 'light'
* @deprecated Use global theming or ztTheme directive for local overrides
*/
theme: 'light' | 'dark' | 'material' | 'bootstrap';
/**
* Local theme override for this card component.
* Takes precedence over global theme.
*/
ztTheme?: Partial<ThemeConfig>;
/**
* The size of the card component.
* @default 'md'
*/
size: 'sm' | 'md' | 'lg';
/**
* Whether the card has hover effects.
* @default false
*/
hoverable: boolean;
/**
* The variant of the card that affects its color scheme.
* @default 'default'
*/
variant: 'default' | 'primary' | 'info' | 'danger' | 'warning' | 'dark';
/**
* Dynamically applies CSS classes to the card element based on style, size, theme, hoverable, and variant.
* @returns A string of CSS classes.
*/
get cardClass(): string;
/**
* Applies theme overrides if specified
*/
ngOnInit(): void;
/**
* Applies local theme override to the component
*/
private applyLocalTheme;
static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "zt-card", never, { "cardStyle": { "alias": "cardStyle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "ztTheme": { "alias": "ztTheme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, [".card-header", ".card-media", ".card-body", ".card-footer"], true, never>;
}
/**
* A feature-rich, accessible input component with advanced validation, multiple visual styles, and comprehensive theming support.
*
* ## Key Features
* - 🎨 **Multiple Visual Styles**: ZT (default), Material Design, and Bootstrap styles
* - 📝 **Advanced Validation**: Character limits with real-time feedback and visual indicators
* - ♿ **Full Accessibility**: WCAG 2.1 AA compliant with proper ARIA attributes and keyboard navigation
* - 🔗 **Two-Way Data Binding**: Seamless integration with `[(ngModel)]` and reactive forms
* - 🎯 **ControlValueAccessor**: Native Angular forms support for reactive and template-driven forms
* - 📊 **Character Counter**: Real-time character counting with warning and error states
* - 🎨 **Theme Integration**: Global and local theme overrides with CSS custom properties
* - ⚡ **Performance Optimized**: OnPush change detection and efficient DOM manipulation
* - 🛡️ **Type Safe**: Full TypeScript support with strict typing and IntelliSense
*
* ## Usage Examples
*
* ### Basic Usage
* ```html
* <zt-input
* placeholder="Enter your name"
* size="zt-md">
* </zt-input>
* ```
*
* ### Two-Way Data Binding
* ```html
* <zt-input
* placeholder="Enter name"
* [(ngModel)]="userName"
* [textlength]="50"
* [showCharCounter]="true">
* </zt-input>
* ```
*
* ### Reactive Forms Integration
* ```html
* <zt-input
* formControlName="email"
* placeholder="Email address"
* inputType="email"
* [showCharCounter]="true">
* </zt-input>
* ```
*
* ### Event Handling
* ```html
* <zt-input
* placeholder="Interactive input"
* (valueChange)="onValueChange($event)"
* (focus)="onFocus($event)"
* (blur)="onBlur($event)"
* [textlength]="100"
* [showCharCounter]="true">
* </zt-input>
* ```
*
* ### Advanced Configuration
* ```html
* <zt-input
* placeholder="Advanced input example"
* inputType="text"
* inputStyle="zt"
* size="zt-md"
* [value]="initialValue"
* [textlength]="200"
* [showCharCounter]="true"
* [disabled]="isDisabled"
* [errorMessage]="validationError"
* [ztTheme]="customTheme"
* (valueChange)="onValueChange($event)"
* (blur)="validateInput($event)">
* </zt-input>
* ```
*
* ### Theme Customization
* ```html
* <zt-input
* [ztTheme]="brandInputTheme"
* placeholder="Brand styled input"
* [showCharCounter]="true">
* </zt-input>
* ```
*
* ```typescript
* brandInputTheme: Partial<ThemeConfig> = {
* colors: {
* primary: '#FF6B35', // Brand orange
* textBlack: '#2D3748', // Dark gray text
* default: '#FFFFFF', // White background
* },
* borderRadius: 8, // Rounded corners
* borderSize: 2, // Thicker borders
* fontFamily: '"Inter", sans-serif'
* };
* ```
*
* ## Accessibility Features
* - Unique IDs for proper label association
* - ARIA attributes for screen reader support
* - Keyboard navigation support
* - Focus management with visual indicators
* - Character counter with proper announcements
* - Error states with role="alert"
*
* ## Performance Considerations
* - Uses OnPush change detection strategy
* - Efficient event handling with input events instead of keydown
* - Renderer2 for optimal DOM manipulation
* - CSS custom properties for theme switching without style recalculation
*
* @author ZT-UI-Components Team
* @version 2.0.0
* @since 1.0.0
*/
declare class InputComponent implements OnInit, OnDestroy, ControlValueAccessor {
private elementRef;
private destroy$;
private renderer;
/**
* Reference to the native input element for advanced DOM manipulation if needed.
* Most use cases should use the value property and events instead.
*
* @example
* ```typescript
* // Access native element (advanced usage)
* if (this.textInput) {
* this.textInput.nativeElement.focus();
* }
* ```
*/
textInput?: ElementRef<HTMLInputElement>;
/**
* The current value of the input field. Supports two-way data binding with `[(ngModel)]`.
*
* When used with reactive forms, this property is automatically synchronized with the FormControl value.
*
* @example
* ```html
* <!-- Template-driven form -->
* <zt-input [(ngModel)]="userName" placeholder="Enter name"></zt-input>
*
* <!-- Reactive form -->
* <zt-input formControlName="email" placeholder="Email"></zt-input>
* ```
*
* @default ''
*/
value: string;
/**
* Placeholder text displayed when the input is empty. Provides context about expected input.
*
* For accessibility, ensure placeholder text is not the only way to identify the input's purpose.
* Use proper labeling with `<label>` elements or `aria-labelledby` when possible.
*
* @example
* ```html
* <zt-input placeholder="Enter your full name"></zt-input>
* <zt-input placeholder="user@example.com"></zt-input>
* ```
*
* @default 'Enter text'
*/
placeholder: string;
/**
* Maximum allowed character length for the input. When exceeded, further typing is prevented.
*
* Use with `[showCharCounter]="true"` to provide visual feedback to users about character limits.
* The component automatically handles validation and provides appropriate ARIA attributes.
*
* @example
* ```html
* <!-- Short input for names -->
* <zt-input [textlength]="50" [showCharCounter]="true" placeholder="Name"></zt-input>
*
* <!-- Long input for descriptions -->
* <zt-input [textlength]="500" [showCharCounter]="true" placeholder="Description"></zt-input>
* ```
*
* @default 255
*/
textlength: number;
/**
* The type attribute of the HTML input element, determining input behavior and validation.
*
* - `text`: Standard text input (default)
* - `email`: Email input with built-in validation UI on supported browsers
* - `password`: Password input with text masking
* - `number`: Numeric input with increment/decrement controls on supported browsers
*
* @example
* ```html
* <zt-input inputType="email" placeholder="Email address"></zt-input>
* <zt-input inputType="password" placeholder="Password"></zt-input>
* <zt-input inputType="number" placeholder="Age"></zt-input>
* ```
*
* @default 'text'
*/
inputType: 'text' | 'number' | 'email' | 'password';
/**
* Visual style variant that changes the appearance and behavior of the input.
*
* - `zt`: Default ZT-UI style with floating labels and modern aesthetics
* - `material`: Material Design style with bottom-border focus and label animation
* - `bs`: Bootstrap-style input with traditional form styling
*
* Each style maintains consistent functionality while providing different visual experiences.
*
* @example
* ```html
* <!-- Default ZT style -->
* <zt-input inputStyle="zt" placeholder="ZT Style"></zt-input>
*
* <!-- Material Design style -->
* <zt-input inputStyle="material" placeholder="Material Style"></zt-input>
*
* <!-- Bootstrap style -->
* <zt-input inputStyle="bs" placeholder="Bootstrap Style"></zt-input>
* ```
*
* @default 'zt'
*/
inputStyle: 'zt' | 'material' | 'bs';
/**
* Legacy theme property for backward compatibility.
*
* @deprecated 2.0.0 - Use global theming with `ZTThemeService` or local `ztTheme` overrides instead.
* This property will be removed in a future major version.
*
* @example
* ```typescript
* // ❌ Deprecated - avoid using
* <zt-input theme="dark" placeholder="Dark theme"></zt-input>
*
* // ✅ Recommended approach
* <zt-input [ztTheme]="darkTheme" placeholder="Dark theme"></zt-input>
* ```
*
* @default 'light'
*/
theme: 'light' | 'dark' | 'bootstrap' | 'material';
/**
* Local theme override for this input component. Takes precedence over global theme settings.
*
* Use this for component-specific styling that differs from your global theme.
* For consistent theming across your application, prefer global theme configuration.
*
* @example
* ```html
* <zt-input
* [ztTheme]="brandInputTheme"
* placeholder="Brand styled input">
* </zt-input>
* ```
*
* ```typescript
* brandInputTheme: Partial<ThemeConfig> = {
* colors: {
* primary: '#FF6B35', // Brand orange
* textBlack: '#2D3748', // Dark gray text
* default: '#FFFFFF', // White background
* },
* borderRadius: 8, // Rounded corners
* borderSize: 2, // Thicker borders
* fontFamily: '"Inter", sans-serif'
* };
* ```
*/
ztTheme?: Partial<ThemeConfig>;
/**
* Size variant that controls the overall scale of the input component.
*
* - `zt-sm`: Small size for compact layouts
* - `zt-md`: Medium size (default) for standard forms
* - `zt-lg`: Large size for emphasis or touch interfaces
*
* @example
* ```html
* <zt-input size="zt-sm" placeholder="Small input"></zt-input>
* <zt-input size="zt-md" placeholder="Medium input"></zt-input>
* <zt-input size="zt-lg" placeholder="Large input"></zt-input>
* ```
*
* @default 'zt-md'
*/
size: 'zt-md' | 'zt-sm' | 'zt-lg';
/**
* Error message to display when validation fails or character limit is exceeded.
*
* The message is displayed below the input with appropriate styling and ARIA attributes.
* Use clear, actionable error messages to help users correct their input.
*
* @example
* ```html
* <zt-input
* placeholder="Email"
* inputType="email"
* [errorMessage]="emailError"
* [textlength]="100">
* </zt-input>
* ```
*
* ```typescript
* emailError: string;
*
* validateEmail() {
* if (this.emailFormControl.invalid) {
* if (this.emailFormControl.errors?.['required']) {
* this.emailError = 'Email is required';
* } else if (this.emailFormControl.errors?.['email']) {
* this.emailError = 'Please enter a valid email address';
* }
* } else {
* this.emailError = undefined;
* }
* }
* ```
*/
errorMessage?: string;
/**
* Whether the input is disabled and prevents user interaction.
*
* Disabled inputs cannot be focused, edited, or submitted. They are visually
* distinguished and include appropriate ARIA attributes for accessibility.
*
* @example
* ```html
* <!-- Regular input -->
* <zt-input placeholder="Editable input"></zt-input>
*
* <!-- Disabled input -->
* <zt-input placeholder="Disabled input" [disabled]="true"></zt-input>
*
* <!-- Conditionally disabled -->
* <zt-input
* placeholder="Conditional input"
* [disabled]="isFormDisabled">
* </zt-input>
* ```
*
* @default false
*/
disabled: boolean;
/**
* Whether to show a real-time character counter below the input.
*
* The counter displays current character count vs. maximum allowed characters.
* Visual styling changes based on input state:
* - Normal: Default text color
* - Warning: When > 80% of limit (orange/warning color)
* - Error: When limit exceeded (red/error color)
*
* @example
* ```html
* <!-- Without counter -->
* <zt-input [textlength]="100" placeholder="No counter"></zt-input>
*
* <!-- With counter -->
* <zt-input [textlength]="100" [showCharCounter]="true" placeholder="With counter"></zt-input>
* <!-- Displays: "0/100" -->
* ```
*
* @default false
*/
showCharCounter: boolean;
/**
* Unique identifier for this input instance, used for accessibility and proper label association.
*
* Automatically generated to ensure uniqueness across multiple input instances on the same page.
* Used internally for `id`, `for`, `aria-labelledby`, and `aria-describedby` attributes.
*
* @example
* ```html
* <!-- Input with uniqueId: "zt-input-a1b2c3d4" -->
* <zt-input placeholder="Name"></zt-input>
* <!-- Renders as: <input id="zt-input-a1b2c3d4" ...> -->
* <!-- With label: <label for="zt-input-a1b2c3d4" ...> -->
* ```
*/
readonly uniqueId: string;
/**
* Output event emitted whenever the input value changes.
*
* Used for two-way data binding with `[(ngModel)]` and reactive forms integration.
* Emitted after character validation and limit enforcement.
*
* @example
* ```html
* <zt-input
* placeholder="Name"
* (valueChange)="onNameChange($event)"
* [(ngModel)]="userName">
* </zt-input>
* ```
*
* ```typescript
* onNameChange(newValue: string) {
* console.log('Name changed to:', newValue);
* this.userName = newValue;
* }
* ```
*/
valueChange: EventEmitter<string>;
/**
* Output event emitted when the input loses focus (blur event).
*
* Useful for validation triggers, saving data, or updating UI state.
* Provides the native FocusEvent for advanced use cases.
*
* @example
* ```html
* <zt-input
* placeholder="Email"
* (blur)="validateEmail()"
* inputType="email">
* </zt-input>
* ```
*
* ```typescript
* validateEmail() {
* if (this.emailFormControl.invalid) {
* this.showEmailError = true;
* }
* }
* ```
*/
blur: EventEmitter<FocusEvent>;
/**
* Output event emitted when the input gains focus (focus event).
*
* Useful for showing help text, highlighting related fields, or analytics tracking.
* Provides the native FocusEvent for advanced use cases.
*
* @example
* ```html
* <zt-input
* placeholder="Search"
* (focus)="showSearchHelp = true"
* (blur)="showSearchHelp = false">
* </zt-input>
* ```
*/
focus: EventEmitter<FocusEvent>;
/**
* Current character count of the input value.
*
* Computed property that returns the length of the current value.
* Used by the character counter display and validation logic.
*
* @example
* ```typescript
* // In component class
* get progressPercentage(): number {
* return (this.inputComponent.currentLength / this.inputComponent.textlength) * 100;
* }
* ```
*
* @returns The number of characters in the current value, or 0 if empty
*/
get currentLength(): number;
/**
* Whether the input has exceeded the character limit.
*
* Computed property used for validation states and visual feedback.
* Affects CSS classes, ARIA attributes, and error display logic.
*
* @example
* ```scss
* .my-form {
* .zt-input.error input {
* border-color: red;
* }
* }
* ```
*
* @returns true if current length exceeds textlength limit
*/
get hasError(): boolean;
/**
* CSS class name for the character counter based on current input state.
*
* Returns appropriate class for styling the counter:
* - `''` (empty): Normal state, within limits
* - `'warning'`: Approaching limit (> 80% of textlength)
* - `'error'`: Exceeded limit
*
* @example
* ```html
* <div class="char-counter" [ngClass]="counterClass">
* {{ currentLength }}/{{ textlength }}
* </div>
* ```
*
* @returns CSS class name for current counter state
*/
get counterClass(): string;
/**
* Space-separated list of element IDs that describe this input for accessibility.
*
* Used with `aria-describedby` attribute to associate the input with:
* - Character counter (when `showCharCounter` is true)
* - Error message (when `errorMessage` is provided)
*
* Enables screen readers to provide additional context about the input.
*
* @example
* ```html
* <!-- Input with counter and error message -->
* <zt-input
* [showCharCounter]="true"
* [errorMessage]="validationError"
* aria-describedby="additional-help">
* </zt-input>
* <!-- aria-describedby value: "zt-input-a1b2c3d4-counter zt-input-a1b2c3d4-error additional-help" -->
* ```
*
* @returns Space-separated string of descriptive element IDs
*/
get ariaDescribedBy(): string;
/**
* Dynamically applies CSS classes to the host element for styling and state management.
*
* Combines multiple class sources:
* - Input style variant (`zt-${inputStyle}`)
* - Size variant (`${size}`)
* - Legacy theme class (`theme-${theme}`)
* - Disabled state (`disabled` when `disabled` is true)
* - Error state (`error` when character limit exceeded)
*
* @example
* ```html
* <!-- Input with multiple classes -->
* <zt-input inputStyle="material" size="zt-lg" [disabled]="true"></zt-input>
* <!-- Applied classes: "zt-material zt-lg theme-light disabled" -->
* ```
*
* @returns Space-separated string of CSS classes
*/
get inputClass(): string;
constructor(elementRef: ElementRef, renderer: Renderer2);
/**
* ControlValueAccessor implementation - enables reactive forms support.
* These callbacks are registered by Angular's forms module.
*/
private onChange;
private onTouched;
/**
* ControlValueAccessor: Write a new value to the element.
*
* Called by Angular forms when the FormControl value changes.
* Updates the component's value property and triggers change detection.
*
* @param value - The new value to write (null/undefined becomes empty string)
*
* @example
* ```typescript
* // Angular forms automatically calls this method
* this.form.patchValue({ email: 'user@example.com' });
* // Triggers: writeValue('user@example.com')
* ```
*/
writeValue(value: any): void;
/**
* ControlValueAccessor: Register a callback function to call when the value changes.
*
* Called by Angular forms to register the FormControl's value change listener.
* The registered function is called whenever the input value changes.
*
* @param fn - Callback function to register for value changes
*/
registerOnChange(fn: any): void;
/**
* ControlValueAccessor: Register a callback function to call when the input is touched.
*
* Called by Angular forms to register the FormControl's touch listener.
* The registered function is called when the input loses focus.
*
* @param fn - Callback function to register for touch events
*/
registerOnTouched(fn: any): void;
/**
* ControlValueAccessor: Disable or enable the input element.
*
* Called by Angular forms when the FormControl is disabled/enabled.
* Updates the disabled state and triggers change detection.
*
* @param isDisabled - Whether to disable the input
*
* @example
* ```typescript
* // Angular forms automatically calls this method
* this.form.get('email').disable();
* // Triggers: setDisabledState(true)
* ```
*/
setDisabledState(isDisabled: boolean): void;
/**
* Angular lifecycle hook called after component initialization.
*
* Applies local theme overrides if provided via the `ztTheme` input property.
* Theme application happens after view initialization to ensure DOM elements exist.
*
* @example
* ```typescript
* // Component with local theme override
* <zt-input [ztTheme]="customTheme"></zt-input>
* // Triggers: ngOnInit() -> applyLocalTheme()
* ```
*/
ngOnInit(): void;
/**
* Angular lifecycle hook called before component destruction.
*
* Cleans up subscriptions and prevents memory leaks.
* Completes the destroy subject to signal teardown of any RxJS subscriptions.
*/
ngOnDestroy(): void;
/**
* Handles native input events for character validation and value synchronization.
*
* This method is called on every input event and performs several critical functions:
* - Enforces character limits by truncating input if necessary
* - Updates the component's value property
* - Notifies Angular forms of value changes (ControlValueAccessor)
* - Emits valueChange event for two-way binding
*
* Uses `@HostListener('input')` for better performance than keydown events.
*
* @example
* ```typescript
* // User types "Hello World" in input
* // 1. Input event fires
* // 2. onInput() called
* // 3. Value updated to "Hello World"
* // 4. onChange() callback invoked
* // 5. valueChange.emit('Hello World') fired
* ```
*/
onInput(): void;
/**
* Handles keydown events to prevent input when character limit is reached.
*
* Provides real-time input prevention for better user experience.
* Allows navigation and editing keys (Backspace, Delete, arrows) even at limit.
* Prevents input of regular characters when limit is reached.
*
* @param event - The keyboard event containing information about the pressed key
*
* @example
* ```typescript
* // User types at character limit (textlength = 10)
* // Current value: "Hello Worl" (10 chars)
* // User presses 'd' -> onKeydown() prevents input
* // User presses Backspace -> onKeydown() allows deletion
* ```
*/
onKeydown(event: KeyboardEvent): void;
/**
* Handles focus events for accessibility and user interaction tracking.
*
* Emits the focus event for parent components and marks the control as touched
* for Angular forms validation (triggers validation on blur).
*
* @param event - The native focus event
*
* @example
* ```html
* <zt-input (focus)="onInputFocus($event)"></zt-input>
* ```
*
* ```typescript
* onInputFocus(event: FocusEvent) {
* console.log('Input focused at:', event.timeStamp);
* // Show help text, highlight field, etc.
* }
* ```
*/
onFocus(event: FocusEvent): void;
/**
* Handles blur events for validation triggers and user interaction tracking.
*
* Emits the blur event for parent components. Commonly used to trigger validation,
* save data, or update UI state when user finishes editing.
*
* @param event - The native blur event
*
* @example
* ```html
* <zt-input (blur)="onInputBlur($event)"></zt-input>
* ```
*
* ```typescript
* onInputBlur(event: FocusEvent) {
* console.log('Input blurred at:', event.timeStamp);
* // Validate field, save data, hide help text, etc.
* }
* ```
*/
onBlur(event: FocusEvent): void;
/**
* Applies local theme overrides to the component using Renderer2 for optimal performance.
*
* This method transforms theme configuration into CSS custom properties and applies them
* to the host element. The theme properties cascade down to all child elements,
* enabling efficient theme switching without component recreation.
*
* Features:
* - Batch style application to minimize layout thrashing
* - Automatic CSS custom property name conversion (camelCase to kebab-case)
* - Proper unit handling for dimensional properties
* - Renderer2 for security and Angular Universal compatibility
*
* @example
* ```typescript
* // Define custom theme with all properties
* customTheme: Partial<ThemeConfig> = {
* colors: {
* primary: '#FF6B35',
* textBlack: '#2D3748',
* default: '#FFFFFF'
* },
* borderRadius: 8,
* borderSize: 2,
* fontFamily: 'Inter, sans-serif'
* };
*
* // Apply via input property
* <zt-input [ztTheme]="customTheme"></zt-input>
*
* // Results in these CSS custom properties on the host element:
* // --zt-primary: #FF6B35
* // --zt-text-black: #2D3748
* // --zt-default: #FFFFFF
* // --zt-border-radius: 8px
* // --zt-border-size: 2px
* // --zt-font-family: Inter, sans-serif
* ```
*
* @performance Uses batch style application to minimize layout thrashing
* @security Renderer2 automatically sanitizes CSS values
* @compatibility Works with Angular Universal and server-side rendering
*/
private applyLocalTheme;
/**
* Clears existing theme-related styles from the host element.
* This ensures clean theme application and prevents style conflicts.
*/
private clearExistingThemeStyles;
/**
* Applies theme styles to the host element using CSS custom properties.
*
* @param hostElement - The host element to apply styles to
*/
private applyThemeStyles;
static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "zt-input", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "textlength": { "alias": "textlength"; "required": false; }; "inputType": { "alias": "inputType"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "ztTheme": { "alias": "ztTheme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCharCounter": { "alias": "showCharCounter"; "required": false; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; }, never, never, true, never>;
}
/**
* Modal sizes enumeration
*/
type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
/**
* Modal component for displaying content in an overlay dialog.
*
* @example
* ```typescript
* <zt-modal
* [isOpen]="showModal"
* [size]="'md'"
* [title]="'Confirmation'"
* [closable]="true"
* [backdropClosable]="true"
* (onClose)="handleClose()"
* (onOpen)="handleOpen()">
*
* <div modal-header>
* <h3>Modal Title</h3>
* </div>
*
* <div modal-body>
* <p>Modal content goes here...</p>
* </div>
*
* <div modal-footer>
* <button (click)="closeModal()">Close</button>
* <button (click)="confirmAction()">Confirm</button>
* </div>
*
* </zt-modal>
* ```
*/
declare class ZtModalComponent implements OnInit, OnDestroy {
private elementRef;
/**
* Controls modal visibility
*/
isOpen: boolean;
/**
* Modal title
*/
title: string;
/**
* Modal size
*/
size: ModalSize;
/**
* Modal theme
*/
theme: 'light' | 'dark' | 'bootstrap' | 'material';
/**
* Allow modal to be closed via close button or escape key
*/
closable: boolean;
/**
* Allow modal to be closed by clicking backdrop
*/
backdropClosable: boolean;
/**
* Custom CSS classes for the modal
*/
customClass: string;
/**
* Z-index for the modal overlay
*/
zIndex: number;
/**
* Event emitted when modal is closed
*/
onClose: EventEmitter<void>;
/**
* Event emitted when modal is opened
*/
onOpen: EventEmitter<void>;
/**
* Event emitted before modal is closed
*/
onBeforeClose: EventEmitter<void>;
private previousActiveElement;
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Opens the modal
*/
open(): void;
/**
* Closes the modal
*/
close(): void;
/**
* Handles backdrop click
*/
onBackdropClick(event: Event): void;
/**
* Handles close button click
*/
onCloseClick(): void;
/**
* Handle escape key press
*/
onEscapeKey(event: Event): void;
/**
* Handle tab key for focus trap
*/
onTabKey(event: Event): void;
/**
* Gets the CSS class for modal size
*/
getModalSizeClass(): string;
/**
* Checks if modal has body content
*/
hasBodyContent(): boolean;
/**
* Checks if modal has footer content
*/
hasFooterContent(): boolean;
constructor(elementRef: ElementRef);
static ɵfac: i0.ɵɵFactoryDeclaration<ZtModalComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ZtModalComponent, "zt-modal", never, { "isOpen": { "alias": "isOpen"; "required": false; }; "title": { "alias": "title"; "required": false; }; "size": { "alias": "size"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "backdropClosable": { "alias": "backdropClosable"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; }, { "onClose": "onClose"; "onOpen": "onOpen"; "onBeforeClose": "onBeforeClose"; }, never, ["[modal-body]", "*", "[modal-footer]"], true, never>;
}
/**
* A customizable select dropdown component that supports various styles, themes, and data binding.
* It allows users to select from a list of options with configurable display and value properties.
*
* ## Style-Specific Behaviors:
*
* - **ZT Style** (`inputStyle="zt"`): Traditional select with `value=""` placeholder option
* - **Material Style** (`inputStyle="material"`): Material Design select with `value=""` placeholder option
* - **Bootstrap Style** (`inputStyle="bs"`): Bootstrap-styled select with `[ngValue]="null"` placeholder option
*
* ## Placeholder Handling:
*
* - ZT & Material styles: Use `value=""` for placeholder, clear to `-1`
* - Bootstrap style: Uses `[ngValue]="null"` for placeholder, clears to `null`
*
* @example
* <!-- ZT Style (default) -->
* <zt-select
* [dataSource]="options"
* [key]="'id'"
* [displayValue]="'name'"
* [value]="selectedValue"
* inputStyle="zt"
* placeholder="Choose an option">
* </zt-select>
*
* @example
* <!-- Material Style -->
* <zt-select
* [dataSource]="options"
* [key]="'id'"
* [displayValue]="'name'"
* [value]="selectedValue"
* inputStyle="material"
* placeholder="Choose an option">
* </zt-select>
*
* @example
* <!-- Bootstrap Style (with proper placeholder support) -->
* <zt-select
* [dataSource]="options"
* [key]="'id'"
* [displayValue]="'name'"
* [value]="selectedValue"
* inputStyle="bs"
* placeholder="Choose an option">
* </zt-select>
*/
declare class SelectComponent implements OnInit {
/**
* Default message displayed in the component.
*/
message: string;
/**
* Placeholder text displayed when no option is selected.
*
* **Note**: Only effective with `inputStyle="bs"`. ZT and Material styles
* use the `message` property for their placeholder text display.
*
* @default 'Choose an option'
*/
placeholder?: string | undefined;
/**
* The visual style of the select component.
*
* - `'zt'`: Traditional ZT styling with `value=""` placeholder option
* - `'material'`: Material Design styling with `value=""` placeholder option
* - `'bs'`: Bootstrap styling with `[ngValue]="null"` placeholder option (recommended for placeholder functionality)
*
* @default 'zt'
*/
inputStyle?: 'zt' | 'material' | 'bs';
/**
* The theme of the select component.
* @default 'light'
*/
theme: 'light' | 'dark' | 'bootstrap' | 'material';
/**
* The size of the select component.
* @default 'zt-md'
*/
size: 'zt-md' | 'zt-sm' | 'zt-lg';
/**
* Array of data objects to populate the select options.
* @default []
*/
dataSource: any[];
/**
* The property name in the data objects to use as the unique key/identifier.
* Used for binding the selected value.
*/
key?: any;
/**
* The property name in the data objects to display as the option text.
* @default ''
*/
displayValue: any;
/**
* The currently selected value. Should match the key property of the selected item.
*/
value: any;
/**
* Whether to show a clear button to reset the selection.
* @default true
*/
showClearButton: boolean;
/**
* Event emitted when the selected value changes.
*/
valueChange: EventEmitter<any>;
/**
* Dynamically applies CSS classes to the select element based on size and theme.
* @returns A string of CSS classes.
*/
get selectClass(): string;
/**
* Handles the change event when a user selects an option.
* Updates the value property with the selected option's value.
* @param event The change event from the select element.
*/
onChange(event: any): void;
/**
* Clears the current selection by setting the value to null for bs style, -1 for others.
*/
onClear(): void;
/**
* Initializes the component and ensures placeholder is shown when no value is set.
*/
ngOnInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "zt-select", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "key": { "alias": "key"; "required": false; }; "displayValue": { "alias": "displayValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}
/**
* A customizable textarea component with character counting, length validation, and various styling options.
* Supports different themes, sizes, and input styles with optional character count display.
*
* @example
* <zt-textarea
* placeholder="Enter your message"
* [textlength]="500"
* [rows]="4"
* [showCharCount]="true"
* size="zt-md"
* theme="light">
* </zt-textarea>
*/
declare class TextareaComponent {
/**
* Reference to the textarea element for direct DOM manipulation.
*/
textareaInput?: ElementRef;
/**
* The current value of the textarea.
* @default ''
*/
value?: string | undefined;
/**
* Placeholder text displayed when the textarea is empty.
* @default 'label'
*/
placeholder?: string | undefined;
/**
* Maximum allowed character length for the textarea.
* @default 255
*/
textlength: number;
/**
* The type attribute for the textarea (typically 'text').
* @default 'text'
*/
type?: string | undefined;
/**
* Current length of the text in the textarea.
*/
currentTextLength: number;
/**
* The visible width of the textarea in average character widths.
* Must be a positive integer.
* @default 20
*/
cols?: number | undefined;
/**
* The number of visible text lines for the textarea.
* Must be a positive integer.
* @default 2
*/
rows?: number | undefined;
/**
* The visual style of the textarea.
* @default 'zt'
*/
inputStyle: 'zt' | 'material' | 'bs';
/**
* The theme of the textarea component.
* @default 'light'
*/
theme: 'light' | 'dark' | 'bootstrap' | 'material';
/**
* The size of the textarea component.
* @default 'zt-md'
*/
size: 'zt-md' | 'zt-sm' | 'zt-lg';
/**
* Whether to show the character count below the textarea.
* @default true
*/
showCharCount?: boolean | undefined;
/**
* Dynamically applies CSS classes to the textarea element based on size and theme.
* @returns A string of CSS classes.
*/
get textareaClass(): string;
/**
* Handles keydown events to enforce character length limits and update current text length.
* Updates the value if within the allowed length.
*/
onKeydown(): void;
/**
* Listens to global keyup events to update the current text length, particularly for delete operations.
* @param event The keyboard event.
*/
keyEvent(event: KeyboardEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "zt-textarea", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "textlength": { "alias": "textlength"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showCharCount": { "alias": "showCharCount"; "required": false; }; }, {}, never, never, true, never>;
}
/**
* Enumeration of key codes used in the textarea component.
*/
declare enum KEY_CODE {
DELETE = "Delete"
}
/**
* Toast notification configuration interface
*
* Defines the structure and options for individual toast notifications.
* All properties are optional except for the message and type.
*/
interface ZtToast {
/** Unique identifier for the toast */
id: string;
/** Type of toast that determines styling and icon */
type: 'success' | 'error' | 'info' | 'warning';
/** Optional title for the toast */
title?: string;
/** Main message content */
message: string;
/** Auto-dismiss duration in milliseconds (0 = never auto-dismiss) */
duration?: number;
/** Position on screen where toast appears */
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
/** Whether the toast can be manually dismissed by clicking */
dismissible?: boolean;
/** Whether to show a progress bar indicating time remaining */
showProgress?: boolean;
}
/**
* Toast service providing centralized management of notifications
*
* This service maintains the global state of all active toasts and provides
* convenient methods for displaying different types of notifications.
*
* The service uses BehaviorSubject for reactive state management, allowing
* components to subscribe to toast changes and update their UI accordingly.
*/
declare class ZtToastService {
/** Internal subject managing the current list of active toasts */
private toasts$;
/**
* Observable stream of current toasts
* Components can subscribe to this to reactively display toasts
*/
get toasts(): Observable<ZtToast[]>;
/**
* Display a new toast notification
*
* Creates a unique toast with the provided configuration and adds it to the active toasts.
* Automatically schedules removal based on the duration setting.
*
* @param toast - Toast configuration (id will be auto-generated)
*/
show(toast: Omit<ZtToast, 'id'>): void;
/**
* Remove a specific toast by ID
*
* @param id - Unique identifier of the toast to remove
*/
remove(id: string): void;
/**
* Remove all active toasts
*
* Useful for clearing all notifications at once, such as when navigating away from a page.
*/
clear(): void;
/**
* Show a success toast notification
*
* @param message - Main message content
* @param title - Optional title (defaults to 'Success')
* @param options - Additional toast configuration options
*/
success(message: string, title?: string, options?: Partial<ZtToast>): void;
/**
* Show an error toast notification
*
* @param message - Main message content
* @param title - Optional title (defaults to 'Error')
* @param options - Additional toast configuration options
*/
error(message: string, title?: string, options?: Partial<ZtToast>): void;
/**
* Show an info toast notification
*
* @param message - Main message content
* @param title - Optional title (defaults to 'Info')
* @param options - Additional toast configuration options
*/
info(message: string, title?: string, options?: Partial<ZtToast>): void;
/**
* Show a warning toast notification
*
* @param message - Main message content
* @param title - Optional title (defaults to 'Warning')
* @param options - Additional toast configuration options
*/
warning(message: string, title?: string, options?: Partial<ZtToast>): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ZtToastService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ZtToastService>;
}
/**
* ZT-UI Components Toast Component
*
* A comprehensive toast notification component that displays non-intrusive messages
* to users. Built from scratch without external dependencies, this component provides
* a complete toast notification system with multiple types, positions, and customization options.
*
* Features:
* - Multiple toast types with distinct styling (success, error, info, warning)
* - Six positioning options (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)
* - Configurable duration with auto-dismiss functionality
* - Manual dismissal with close buttons
* - Progress indicators showing time remaining
* - Responsive design for mobile devices
* - Smooth CSS animations for appearance and dismissal
* - Demo buttons for testing in development
* - Accessibility features with ARIA labels
*
* @example
* ```html
* <zt-toast position="top-right" showDemoButtons="true"></zt-toast>
* ```
*
* @example
* ```typescript
* constructor(private toastService: ZtToastService) {}
*
* showNotification() {
* this.toastSer