tecnualng 21.0.26 → 21.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecnualng",
-  "version": "21.0.26",
+  "version": "21.0.28",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0"

package/src/lib/styles/_theming.scss

@@ -9,6 +9,7 @@
 @use 'definitions/aurora' as aurora;
 @use 'definitions/aurora-dark' as aurora-dark;
 @use 'definitions/futuristic' as futuristic;
+@use 'definitions/futuristic-light' as futuristic-light;
 
 // Forward mixins for external use
 @forward 'definitions/light';
@@ -21,6 +22,7 @@
 @forward 'definitions/aurora';
 @forward 'definitions/aurora-dark';
 @forward 'definitions/futuristic';
+@forward 'definitions/futuristic-light';
 
 // Apply to root if desired, or use a class
 :root {
@@ -95,5 +97,13 @@ body.futuristic-theme,
 body[data-theme='futuristic'] {
   @include futuristic.tng-theme-futuristic;
   background-color: var(--tng-background);
+  background-color: var(--tng-background);
+  color: var(--tng-text);
+}
+
+body.futuristic-light-theme,
+body[data-theme='futuristic-light'] {
+  @include futuristic-light.tng-theme-futuristic-light;
+  background-color: var(--tng-background);
   color: var(--tng-text);
 }

package/src/lib/styles/definitions/_futuristic-light.scss

@@ -0,0 +1,36 @@
+@mixin tng-theme-futuristic-light {
+  // Colors - Neon accents on light background
+  --tng-primary: #00c2cc; // Slightly darker cyan for visibility on light
+  --tng-primary-contrast: #ffffff;
+  --tng-secondary: #9c27b0; // Purple
+  --tng-secondary-contrast: #ffffff;
+  
+  // Glassmorphism surface
+  --tng-surface: #ffffffcc; // White with transparency
+  
+  // Light background
+  --tng-background: #f0f2f5;
+  
+  // Text colors
+  --tng-text: #1a1a2e; // Dark blue-gray
+  --tng-text-secondary: #606070;
+  
+  // Border with glassmorphism
+  --tng-border: rgba(0, 0, 0, 0.1);
+  
+  // Status colors with neon effect
+  --tng-error: #ff3366;
+  --tng-warning: #ffaa00;
+  --tng-success: #00c853; // Darker green for visibility
+
+  // Shadows with neon glow - muted for light theme
+  --tng-shadow-sm: 0 4px 15px rgba(0, 194, 204, 0.15);
+  --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+  
+  // Additional neon colors for variety
+  --tng-neon-cyan: #00c2cc;
+  --tng-neon-purple: #9c27b0;
+  --tng-neon-green: #00c853;
+  --tng-neon-pink: #e91e63;
+  --tng-neon-orange: #ff9800;
+}

package/types/tecnualng.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, TemplateRef, AfterViewInit, OnDestroy, NgZone, ApplicationRef, EnvironmentInjector, AfterContentInit, QueryList } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import * as tecnualng from 'tecnualng';
 
 type TngButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
 declare class TngButton {
@@ -253,7 +254,7 @@ declare class TngTabsComponent implements AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngTabsComponent, "tng-tabs", never, {}, {}, ["tabs"], never, true, never>;
 }
 
-type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark' | 'futuristic';
+type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark' | 'futuristic' | 'futuristic-light';
 interface Theme {
     name: ThemeName;
     displayName: string;
@@ -493,5 +494,118 @@ declare class TngSelectComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSelectComponent, "tng-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "enableMulti": { "alias": "enableMulti"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
-export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngTextareaComponent, TngTextareaDirective, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
-export type { DateRange, SelectOption, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };
+declare class TngSliderComponent implements ControlValueAccessor {
+    min: _angular_core.InputSignal<number>;
+    max: _angular_core.InputSignal<number>;
+    step: _angular_core.InputSignal<number>;
+    label: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    value: _angular_core.ModelSignal<number>;
+    isDragging: _angular_core.WritableSignal<boolean>;
+    track: _angular_core.Signal<ElementRef<HTMLElement>>;
+    percentage: _angular_core.Signal<number>;
+    private onChange;
+    private onTouched;
+    constructor();
+    writeValue(value: number): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onStart(event: MouseEvent | TouchEvent): void;
+    onMove(event: MouseEvent | TouchEvent): void;
+    onEnd(): void;
+    private updateValueFromEvent;
+    private getClientX;
+    private getClientY;
+    private clampAndStep;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSliderComponent, "tng-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+type TngLoaderType = 'spinner' | 'bar' | 'dots' | 'pulse';
+type TngLoaderSize = 'sm' | 'md' | 'lg' | 'xl';
+type TngLoaderColor = 'primary' | 'secondary' | 'accent' | 'warn';
+declare class TngLoaderComponent {
+    type: _angular_core.InputSignal<TngLoaderType>;
+    size: _angular_core.InputSignal<TngLoaderSize>;
+    duration: _angular_core.InputSignal<string | null>;
+    label: _angular_core.InputSignal<string>;
+    progress: _angular_core.InputSignal<number | null>;
+    fullscreen: _angular_core.InputSignal<boolean>;
+    inline: _angular_core.InputSignal<boolean>;
+    hidden: _angular_core.InputSignal<boolean>;
+    color: _angular_core.InputSignal<TngLoaderColor | null>;
+    hostClasses: _angular_core.Signal<string>;
+    containerStyles: _angular_core.Signal<Record<string, string>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngLoaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngLoaderComponent, "tng-loader", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type TngNotificationType = 'success' | 'error' | 'warning' | 'info' | 'default';
+type TngNotificationPosition = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+interface TngNotificationConfig {
+    id: string;
+    message: string;
+    type: TngNotificationType;
+    duration?: number;
+    position?: TngNotificationPosition;
+    clipboard?: string;
+    closable?: boolean;
+    icon?: string;
+    pauseOnHover?: boolean;
+}
+type TngNotificationOptions = Omit<TngNotificationConfig, 'id' | 'message' | 'type'> & {
+    type?: TngNotificationType;
+};
+
+declare class TngNotificationService {
+    private notifications;
+    private timers;
+    private remainingTimes;
+    private startTimes;
+    readonly activeNotifications: _angular_core.Signal<TngNotificationConfig[]>;
+    show(message: string, options?: Partial<TngNotificationConfig>): string;
+    success(message: string, options?: TngNotificationOptions): string;
+    error(message: string, options?: TngNotificationOptions): string;
+    warning(message: string, options?: TngNotificationOptions): string;
+    info(message: string, options?: TngNotificationOptions): string;
+    remove(id: string): void;
+    clear(): void;
+    pauseTimer(id: string): void;
+    resumeTimer(id: string): void;
+    private startTimer;
+    private clearTimer;
+    private generateId;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngNotificationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TngNotificationService>;
+}
+
+declare class TngNotificationContainerComponent {
+    private service;
+    notifications: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    topLeft: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    topRight: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    topCenter: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    bottomLeft: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    bottomRight: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    bottomCenter: _angular_core.Signal<tecnualng.TngNotificationConfig[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngNotificationContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngNotificationContainerComponent, "tng-notification-container", never, {}, {}, never, never, true, never>;
+}
+
+declare class TngToastComponent {
+    config: _angular_core.InputSignal<TngNotificationConfig>;
+    private service;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    close(): void;
+    showCopiedTooltip: _angular_core.WritableSignal<boolean>;
+    copyToClipboard(): void;
+    get iconClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngToastComponent, "tng-toast", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngLoaderComponent, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngNotificationContainerComponent, TngNotificationService, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngSliderComponent, TngTabComponent, TngTabsComponent, TngTextareaComponent, TngTextareaDirective, TngToastComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
+export type { DateRange, SelectOption, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngLoaderColor, TngLoaderSize, TngLoaderType, TngNotificationConfig, TngNotificationOptions, TngNotificationPosition, TngNotificationType, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };