tecnualng 21.0.12 → 21.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +112 -1
  2. package/_index.scss +17 -0
  3. package/fesm2022/tecnualng.mjs +693 -75
  4. package/fesm2022/tecnualng.mjs.map +1 -1
  5. package/package.json +40 -5
  6. package/src/lib/styles/_theming.scss +99 -0
  7. package/src/lib/styles/definitions/_aurora-dark.scss +19 -0
  8. package/src/lib/styles/definitions/_aurora.scss +19 -0
  9. package/src/lib/styles/definitions/_dark.scss +19 -0
  10. package/src/lib/styles/definitions/_forest.scss +19 -0
  11. package/src/lib/styles/definitions/_futuristic.scss +36 -0
  12. package/src/lib/styles/definitions/_light.scss +31 -0
  13. package/src/lib/styles/definitions/_monochrome.scss +19 -0
  14. package/src/lib/styles/definitions/_ocean.scss +19 -0
  15. package/src/lib/styles/definitions/_royal.scss +19 -0
  16. package/src/lib/styles/definitions/_sunset.scss +19 -0
  17. package/types/tecnualng.d.ts +186 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tecnualng",
3
- "version": "21.0.12",
3
+ "version": "21.0.17",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.0.0",
6
6
  "@angular/core": "^21.0.0"
@@ -10,13 +10,48 @@
10
10
  },
11
11
  "sideEffects": false,
12
12
  "exports": {
13
- ".": {
14
- "sass": "./_index.scss",
15
- "types": "./types/tecnualng.d.ts",
16
- "default": "./fesm2022/tecnualng.mjs"
13
+ "./styles": {
14
+ "sass": "./_index.scss"
15
+ },
16
+ "./styles/theming": {
17
+ "sass": "./src/lib/styles/_theming.scss"
18
+ },
19
+ "./styles/themes/light": {
20
+ "sass": "./src/lib/styles/definitions/_light.scss"
21
+ },
22
+ "./styles/themes/dark": {
23
+ "sass": "./src/lib/styles/definitions/_dark.scss"
24
+ },
25
+ "./styles/themes/ocean": {
26
+ "sass": "./src/lib/styles/definitions/_ocean.scss"
27
+ },
28
+ "./styles/themes/forest": {
29
+ "sass": "./src/lib/styles/definitions/_forest.scss"
30
+ },
31
+ "./styles/themes/sunset": {
32
+ "sass": "./src/lib/styles/definitions/_sunset.scss"
33
+ },
34
+ "./styles/themes/royal": {
35
+ "sass": "./src/lib/styles/definitions/_royal.scss"
36
+ },
37
+ "./styles/themes/monochrome": {
38
+ "sass": "./src/lib/styles/definitions/_monochrome.scss"
39
+ },
40
+ "./styles/themes/aurora": {
41
+ "sass": "./src/lib/styles/definitions/_aurora.scss"
42
+ },
43
+ "./styles/themes/aurora-dark": {
44
+ "sass": "./src/lib/styles/definitions/_aurora-dark.scss"
45
+ },
46
+ "./styles/themes/futuristic": {
47
+ "sass": "./src/lib/styles/definitions/_futuristic.scss"
17
48
  },
18
49
  "./package.json": {
19
50
  "default": "./package.json"
51
+ },
52
+ ".": {
53
+ "types": "./types/tecnualng.d.ts",
54
+ "default": "./fesm2022/tecnualng.mjs"
20
55
  }
21
56
  },
22
57
  "module": "fesm2022/tecnualng.mjs",
package/src/lib/styles/_theming.scss ADDED
@@ -0,0 +1,99 @@
1
+ // Global Theming System
2
+ @use 'definitions/light' as light;
3
+ @use 'definitions/dark' as dark;
4
+ @use 'definitions/ocean' as ocean;
5
+ @use 'definitions/forest' as forest;
6
+ @use 'definitions/sunset' as sunset;
7
+ @use 'definitions/royal' as royal;
8
+ @use 'definitions/monochrome' as monochrome;
9
+ @use 'definitions/aurora' as aurora;
10
+ @use 'definitions/aurora-dark' as aurora-dark;
11
+ @use 'definitions/futuristic' as futuristic;
12
+
13
+ // Forward mixins for external use
14
+ @forward 'definitions/light';
15
+ @forward 'definitions/dark';
16
+ @forward 'definitions/ocean';
17
+ @forward 'definitions/forest';
18
+ @forward 'definitions/sunset';
19
+ @forward 'definitions/royal';
20
+ @forward 'definitions/monochrome';
21
+ @forward 'definitions/aurora';
22
+ @forward 'definitions/aurora-dark';
23
+ @forward 'definitions/futuristic';
24
+
25
+ // Apply to root if desired, or use a class
26
+ :root {
27
+ @include light.tng-theme-default;
28
+ }
29
+
30
+ // Theme classes
31
+ body.light-theme,
32
+ body[data-theme='light'] {
33
+ @include light.tng-theme-default;
34
+ background-color: var(--tng-background);
35
+ color: var(--tng-text);
36
+ }
37
+
38
+ body.dark-theme,
39
+ body[data-theme='dark'] {
40
+ @include dark.tng-theme-dark;
41
+ background-color: var(--tng-background);
42
+ color: var(--tng-text);
43
+ }
44
+
45
+ body.ocean-theme,
46
+ body[data-theme='ocean'] {
47
+ @include ocean.tng-theme-ocean;
48
+ background-color: var(--tng-background);
49
+ color: var(--tng-text);
50
+ }
51
+
52
+ body.forest-theme,
53
+ body[data-theme='forest'] {
54
+ @include forest.tng-theme-forest;
55
+ background-color: var(--tng-background);
56
+ color: var(--tng-text);
57
+ }
58
+
59
+ body.sunset-theme,
60
+ body[data-theme='sunset'] {
61
+ @include sunset.tng-theme-sunset;
62
+ background-color: var(--tng-background);
63
+ color: var(--tng-text);
64
+ }
65
+
66
+ body.royal-theme,
67
+ body[data-theme='royal'] {
68
+ @include royal.tng-theme-royal;
69
+ background-color: var(--tng-background);
70
+ color: var(--tng-text);
71
+ }
72
+
73
+ body.monochrome-theme,
74
+ body[data-theme='monochrome'] {
75
+ @include monochrome.tng-theme-monochrome;
76
+ background-color: var(--tng-background);
77
+ color: var(--tng-text);
78
+ }
79
+
80
+ body.aurora-theme,
81
+ body[data-theme='aurora'] {
82
+ @include aurora.tng-theme-aurora;
83
+ background-color: var(--tng-background);
84
+ color: var(--tng-text);
85
+ }
86
+
87
+ body.aurora-dark-theme,
88
+ body[data-theme='aurora-dark'] {
89
+ @include aurora-dark.tng-theme-aurora-dark;
90
+ background-color: var(--tng-background);
91
+ color: var(--tng-text);
92
+ }
93
+
94
+ body.futuristic-theme,
95
+ body[data-theme='futuristic'] {
96
+ @include futuristic.tng-theme-futuristic;
97
+ background-color: var(--tng-background);
98
+ color: var(--tng-text);
99
+ }
package/src/lib/styles/definitions/_aurora-dark.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-aurora-dark {
2
+ --tng-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3
+ --tng-primary-hover: #2c3664;
4
+ --tng-primary-contrast: #2e0101;
5
+ --tng-secondary: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
6
+ --tng-secondary-hover: #653c3d;
7
+ --tng-secondary-contrast: #360202;
8
+ --tng-surface: #14171d;
9
+ --tng-background: #1a1a1a;
10
+ --tng-text: #ffffff;
11
+ --tng-text-secondary: #c8c8c8;
12
+ --tng-border: #404040;
13
+ --tng-error: #ff6b6b;
14
+ --tng-warning: #feca57;
15
+ --tng-success: #1dd1a1;
16
+
17
+ --tng-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
18
+ --tng-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
19
+ }
package/src/lib/styles/definitions/_aurora.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-aurora {
2
+ --tng-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3
+ --tng-primary-hover: #2c3664;
4
+ --tng-primary-contrast: #ffffff;
5
+ --tng-secondary: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
6
+ --tng-secondary-hover: #653c3d;
7
+ --tng-secondary-contrast: #ffffff;
8
+ --tng-surface: #fdfbfd;
9
+ --tng-background: #fdfbfd;
10
+ --tng-text: #4a4a4a;
11
+ --tng-text-secondary: #808080;
12
+ --tng-border: #e6e6e6;
13
+ --tng-error: #ff6b6b;
14
+ --tng-warning: #feca57;
15
+ --tng-success: #1dd1a1;
16
+
17
+ --tng-shadow-sm: 0 2px 4px rgba(118, 75, 162, 0.15);
18
+ --tng-shadow-md: 0 4px 8px rgba(118, 75, 162, 0.2);
19
+ }
package/src/lib/styles/definitions/_dark.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-dark {
2
+ // Colors
3
+ --tng-primary: #00f2ff;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #bc13fe;
6
+ --tng-secondary-contrast: #ffffff;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(0, 242, 255, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/src/lib/styles/definitions/_forest.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-forest {
2
+ // Colors
3
+ --tng-primary: #00ff9d;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #ccff00;
6
+ --tng-secondary-contrast: #000000;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(0, 255, 157, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/src/lib/styles/definitions/_futuristic.scss ADDED
@@ -0,0 +1,36 @@
1
+ @mixin tng-theme-futuristic {
2
+ // Colors - Neon accents on dark background
3
+ --tng-primary: #00f2ff;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #bc13fe;
6
+ --tng-secondary-contrast: #ffffff;
7
+
8
+ // Glassmorphism surface
9
+ --tng-surface: rgba(255, 255, 255, 0.03);
10
+
11
+ // Dark background
12
+ --tng-background: #0a0a12;
13
+
14
+ // Text colors
15
+ --tng-text: #ffffff;
16
+ --tng-text-secondary: #a0a0b0;
17
+
18
+ // Border with glassmorphism
19
+ --tng-border: rgba(255, 255, 255, 0.1);
20
+
21
+ // Status colors with neon effect
22
+ --tng-error: #ff3366;
23
+ --tng-warning: #ffaa00;
24
+ --tng-success: #00ff9d;
25
+
26
+ // Shadows with neon glow
27
+ --tng-shadow-sm: 0 4px 15px rgba(0, 242, 255, 0.15);
28
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
29
+
30
+ // Additional neon colors for variety
31
+ --tng-neon-cyan: #00f2ff;
32
+ --tng-neon-purple: #bc13fe;
33
+ --tng-neon-green: #00ff9d;
34
+ --tng-neon-pink: #ff00ff;
35
+ --tng-neon-orange: #ff9900;
36
+ }
package/src/lib/styles/definitions/_light.scss ADDED
@@ -0,0 +1,31 @@
1
+ @mixin tng-theme-default {
2
+ // Colors
3
+ --tng-primary: #00f2ff;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #bc13fe;
6
+ --tng-secondary-contrast: #ffffff;
7
+ --tng-surface: #ffffff;
8
+ --tng-background: #fafafa;
9
+ --tng-text: #333333;
10
+ --tng-text-secondary: #757575;
11
+ --tng-border: #e0e0e0;
12
+ --tng-error: #f44336;
13
+ --tng-warning: #ff9800;
14
+ --tng-success: #4caf50;
15
+
16
+ // Typography
17
+ --tng-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
18
+ --tng-font-size-base: 14px;
19
+ --tng-font-weight-regular: 400;
20
+ --tng-font-weight-medium: 500;
21
+ --tng-font-weight-bold: 700;
22
+
23
+ // Spacing & Layout
24
+ --tng-spacing-unit: 8px;
25
+ --tng-border-radius: 4px;
26
+ --tng-input-height: 40px;
27
+
28
+ // Shadows
29
+ --tng-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
30
+ --tng-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
31
+ }
package/src/lib/styles/definitions/_monochrome.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-monochrome {
2
+ // Colors
3
+ --tng-primary: #ffffff;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #888888;
6
+ --tng-secondary-contrast: #ffffff;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(255, 255, 255, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/src/lib/styles/definitions/_ocean.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-ocean {
2
+ // Colors
3
+ --tng-primary: #00bfff;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #00ffff;
6
+ --tng-secondary-contrast: #000000;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(0, 191, 255, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/src/lib/styles/definitions/_royal.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-royal {
2
+ // Colors
3
+ --tng-primary: #bc13fe;
4
+ --tng-primary-contrast: #ffffff;
5
+ --tng-secondary: #ff00ff;
6
+ --tng-secondary-contrast: #ffffff;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(188, 19, 254, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/src/lib/styles/definitions/_sunset.scss ADDED
@@ -0,0 +1,19 @@
1
+ @mixin tng-theme-sunset {
2
+ // Colors
3
+ --tng-primary: #ff9900;
4
+ --tng-primary-contrast: #000000;
5
+ --tng-secondary: #ffff00;
6
+ --tng-secondary-contrast: #000000;
7
+ --tng-surface: rgba(255, 255, 255, 0.03);
8
+ --tng-background: #0a0a12;
9
+ --tng-text: #ffffff;
10
+ --tng-text-secondary: #a0a0b0;
11
+ --tng-border: rgba(255, 255, 255, 0.1);
12
+ --tng-error: #ef5350;
13
+ --tng-warning: #ffb74d;
14
+ --tng-success: #00ff9d;
15
+
16
+ // Shadows
17
+ --tng-shadow-sm: 0 4px 15px rgba(255, 153, 0, 0.1);
18
+ --tng-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
19
+ }
package/types/tecnualng.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { ElementRef, TemplateRef, AfterViewInit, OnDestroy, NgZone, ApplicationRef, EnvironmentInjector, AfterContentInit, QueryList } from '@angular/core';
3
- import { ControlValueAccessor } from '@angular/forms';
3
+ import { ControlValueAccessor, NgControl } from '@angular/forms';
4
4
 
5
5
  type TngButtonAppearance = 'text' | 'filled' | 'elevated' | 'outlined' | 'tonal';
6
6
  declare class TngButton {
@@ -51,6 +51,43 @@ declare class TecnualInputComponent implements ControlValueAccessor {
51
51
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<TecnualInputComponent, "tng-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
52
52
  }
53
53
 
54
+ declare class TngInputDirective {
55
+ private el;
56
+ private renderer;
57
+ ngControl: NgControl | null;
58
+ disabled: _angular_core.InputSignal<boolean>;
59
+ placeholder: _angular_core.InputSignal<string>;
60
+ focused: _angular_core.WritableSignal<boolean>;
61
+ checked: _angular_core.WritableSignal<boolean>;
62
+ private _value;
63
+ private _inputType;
64
+ hasValue: _angular_core.Signal<boolean>;
65
+ computedPlaceholder: _angular_core.Signal<string>;
66
+ isCheckbox: _angular_core.Signal<boolean>;
67
+ isRadio: _angular_core.Signal<boolean>;
68
+ isTextField: _angular_core.Signal<boolean>;
69
+ constructor();
70
+ onFocus(): void;
71
+ onBlur(): void;
72
+ onInput(): void;
73
+ onChange(): void;
74
+ ngAfterViewInit(): void;
75
+ private detectInputType;
76
+ private updateValue;
77
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngInputDirective, never>;
78
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TngInputDirective, "input[tngInput], textarea[tngInput]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
79
+ }
80
+
81
+ declare class TngFormFieldComponent {
82
+ label: _angular_core.InputSignal<string>;
83
+ inputDirective: _angular_core.Signal<TngInputDirective | undefined>;
84
+ isFocused: _angular_core.Signal<boolean>;
85
+ hasValue: _angular_core.Signal<boolean>;
86
+ isDisabled: _angular_core.Signal<boolean>;
87
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngFormFieldComponent, never>;
88
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngFormFieldComponent, "tng-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, ["inputDirective"], ["*"], true, never>;
89
+ }
90
+
54
91
  interface DateRange {
55
92
  start: Date | null;
56
93
  end: Date | null;
@@ -125,7 +162,7 @@ declare class TecnualTableComponent {
125
162
 
126
163
  type TngToolbarPosition = 'top' | 'bottom' | 'static';
127
164
  type TngToolbarPositionType = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
128
- type TngToolbarColor = 'default' | 'primary' | 'secondary';
165
+ type TngToolbarColor = 'default' | 'primary' | 'secondary' | 'transparent';
129
166
  declare class TngToolbarComponent {
130
167
  position: _angular_core.InputSignal<TngToolbarPosition>;
131
168
  positionType: _angular_core.InputSignal<TngToolbarPositionType>;
@@ -169,7 +206,7 @@ declare class TngTabsComponent implements AfterViewInit, OnDestroy {
169
206
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngTabsComponent, "tng-tabs", never, {}, {}, ["tabs"], never, true, never>;
170
207
  }
171
208
 
172
- type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark';
209
+ type ThemeName = 'light' | 'dark' | 'ocean' | 'forest' | 'sunset' | 'royal' | 'monochrome' | 'aurora' | 'aurora-dark' | 'futuristic';
173
210
  interface Theme {
174
211
  name: ThemeName;
175
212
  displayName: string;
@@ -263,5 +300,149 @@ declare class TngMenuGroupComponent {
263
300
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngMenuGroupComponent, "tng-menu-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
264
301
  }
265
302
 
266
- export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
267
- export type { DateRange, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };
303
+ /**
304
+ * TngSidebar - Componente moderno de barra lateral
305
+ *
306
+ * Características:
307
+ * - Totalmente basado en Signals
308
+ * - Animaciones CSS puras
309
+ * - Posicionamiento configurable (izquierda/derecha)
310
+ * - Proyección de contenido
311
+ * - Responsive y accesible
312
+ */
313
+ declare class TngSidebarComponent {
314
+ /**
315
+ * Controla si el sidebar está abierto o cerrado
316
+ */
317
+ isOpen: _angular_core.WritableSignal<boolean>;
318
+ /**
319
+ * Posición del sidebar: 'left' o 'right'
320
+ */
321
+ position: _angular_core.InputSignal<"left" | "right">;
322
+ /**
323
+ * Ancho del sidebar en píxeles
324
+ */
325
+ width: _angular_core.InputSignal<number>;
326
+ /**
327
+ * Muestra un overlay de fondo cuando está abierto
328
+ */
329
+ showOverlay: _angular_core.InputSignal<boolean>;
330
+ /**
331
+ * Evento emitido cuando el sidebar se cierra
332
+ */
333
+ closed: _angular_core.OutputEmitterRef<void>;
334
+ /**
335
+ * Evento emitido cuando el sidebar se abre
336
+ */
337
+ opened: _angular_core.OutputEmitterRef<void>;
338
+ /**
339
+ * Alterna el estado del sidebar
340
+ */
341
+ toggle(): void;
342
+ /**
343
+ * Abre el sidebar
344
+ */
345
+ open(): void;
346
+ /**
347
+ * Cierra el sidebar
348
+ */
349
+ close(): void;
350
+ /**
351
+ * Maneja el clic en el overlay para cerrar el sidebar
352
+ */
353
+ handleOverlayClick(): void;
354
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSidebarComponent, never>;
355
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSidebarComponent, "tng-sidebar", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "showOverlay": { "alias": "showOverlay"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["*"], true, never>;
356
+ }
357
+
358
+ interface SelectOption {
359
+ value: any;
360
+ label: string;
361
+ disabled?: boolean;
362
+ }
363
+ declare class TngSelectDirective implements AfterViewInit, OnDestroy {
364
+ private el;
365
+ private viewContainerRef;
366
+ ngControl: NgControl | null;
367
+ enableMulti: _angular_core.InputSignal<boolean>;
368
+ multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
369
+ enableSearch: _angular_core.InputSignal<boolean>;
370
+ placeholder: _angular_core.InputSignal<string>;
371
+ customTrigger: _angular_core.InputSignal<boolean>;
372
+ triggerRef: _angular_core.InputSignal<HTMLElement | undefined>;
373
+ selectedValues: _angular_core.ModelSignal<any[]>;
374
+ isOpen: _angular_core.WritableSignal<boolean>;
375
+ searchQuery: _angular_core.WritableSignal<string>;
376
+ private _options;
377
+ private _selectedIndices;
378
+ private panelRef;
379
+ private triggerEl;
380
+ isMulti: _angular_core.Signal<boolean>;
381
+ options: _angular_core.Signal<SelectOption[]>;
382
+ filteredOptions: _angular_core.Signal<SelectOption[]>;
383
+ selectedOptions: _angular_core.Signal<SelectOption[]>;
384
+ displayText: _angular_core.Signal<string>;
385
+ constructor();
386
+ ngAfterViewInit(): void;
387
+ ngOnDestroy(): void;
388
+ onClick(event: Event): void;
389
+ onKeyDown(event: KeyboardEvent): void;
390
+ private createTrigger;
391
+ private loadOptionsFromSelect;
392
+ private loadInitialSelection;
393
+ togglePanel(): void;
394
+ private openPanel;
395
+ private closePanel;
396
+ private positionPanel;
397
+ private onOptionSelected;
398
+ private updateNativeSelect;
399
+ private onDocumentClick;
400
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectDirective, never>;
401
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TngSelectDirective, "select[tngSelect]", never, { "enableMulti": { "alias": "enableMulti"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "customTrigger": { "alias": "customTrigger"; "required": false; "isSignal": true; }; "triggerRef": { "alias": "triggerRef"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; }, { "selectedValues": "selectedValuesChange"; }, never, never, true, never>;
402
+ }
403
+
404
+ declare class TngSelectPanelComponent {
405
+ options: _angular_core.WritableSignal<SelectOption[]>;
406
+ selectedIndices: _angular_core.WritableSignal<number[]>;
407
+ enableMulti: _angular_core.WritableSignal<boolean>;
408
+ enableSearch: _angular_core.WritableSignal<boolean>;
409
+ searchQuery: _angular_core.WritableSignal<string>;
410
+ optionSelected: _angular_core.OutputEmitterRef<number>;
411
+ searchQueryChanged: _angular_core.OutputEmitterRef<string>;
412
+ closeRequested: _angular_core.OutputEmitterRef<void>;
413
+ onSearchInput(event: Event): void;
414
+ isSelected(index: number): boolean;
415
+ onOptionClick(index: number, option: SelectOption): void;
416
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectPanelComponent, never>;
417
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TngSelectPanelComponent, "tng-select-panel", never, {}, { "optionSelected": "optionSelected"; "searchQueryChanged": "searchQueryChanged"; "closeRequested": "closeRequested"; }, never, never, true, never>;
418
+ }
419
+
420
+ declare class TngSelectComponent implements ControlValueAccessor {
421
+ label: _angular_core.InputSignal<string>;
422
+ options: _angular_core.InputSignal<SelectOption[]>;
423
+ enableMulti: _angular_core.InputSignal<boolean>;
424
+ enableSearch: _angular_core.InputSignal<boolean>;
425
+ placeholder: _angular_core.InputSignal<string>;
426
+ disabled: _angular_core.InputSignal<boolean>;
427
+ hint: _angular_core.InputSignal<string>;
428
+ ariaLabel: _angular_core.InputSignal<string>;
429
+ value: _angular_core.ModelSignal<any[]>;
430
+ private cvaDisabled;
431
+ selectDirective: _angular_core.Signal<TngSelectDirective | undefined>;
432
+ selectId: _angular_core.Signal<string>;
433
+ effectiveDisabled: _angular_core.Signal<boolean>;
434
+ displayText: _angular_core.Signal<string>;
435
+ private onChange;
436
+ private onTouched;
437
+ constructor();
438
+ onDisplayClick(event: Event): void;
439
+ writeValue(obj: any): void;
440
+ registerOnChange(fn: any): void;
441
+ registerOnTouched(fn: any): void;
442
+ setDisabledState(isDisabled: boolean): void;
443
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TngSelectComponent, never>;
444
+ 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>;
445
+ }
446
+
447
+ export { TecnualDatepickerComponent, TecnualInputComponent, TecnualTableComponent, ThemeService, TngButton, TngCardComponent, TngExpansionPanelComponent, TngFormFieldComponent, TngInputDirective, TngMenuComponent, TngMenuGroupComponent, TngMenuItemComponent, TngSelectComponent, TngSelectDirective, TngSelectPanelComponent, TngSidebarComponent, TngTabComponent, TngTabsComponent, TngToolbarComponent, TngTooltipComponent, TngTooltipDirective };
448
+ export type { DateRange, SelectOption, TableColumn, Theme, ThemeName, TngButtonAppearance, TngCardVariant, TngToolbarColor, TngToolbarPosition, TngToolbarPositionType };