@lesterarte/sefin-ui 0.0.10-dev.0 → 0.0.11

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.
@@ -1,3573 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } from '@angular/core';
3
- import * as i1 from '@angular/common';
4
- import { CommonModule } from '@angular/common';
5
- import { DomSanitizer } from '@angular/platform-browser';
6
- import * as LucideIcons from 'lucide';
7
- import * as i2 from '@angular/forms';
8
- import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
9
- import { Subject } from 'rxjs';
10
-
11
- /**
12
- * Color design tokens as TypeScript constants
13
- * Based on Secretaría de Finanzas brand guidelines
14
- * These values are the source of truth for all color tokens
15
- */
16
- const COLOR_TOKENS = {
17
- // Primary colors - Secretaría de Finanzas brand colors
18
- primary: {
19
- // Light Blue (Azul Claro) - Primary brand color
20
- 50: '#e6f7fb',
21
- 100: '#b3e5f0',
22
- 200: '#80d3e5',
23
- 300: '#4dc1da',
24
- 400: '#2ab0cf',
25
- 500: '#55C3D8', // Primary Light Blue from brand guidelines
26
- 600: '#4aafc4',
27
- 700: '#3f9bb0',
28
- 800: '#34879c',
29
- 900: '#297388',
30
- },
31
- // Secondary colors - Grays from brand guidelines
32
- secondary: {
33
- // Based on Dark Gray and Light Gray from brand
34
- 50: '#f5f5f5',
35
- 100: '#e8e8e8',
36
- 200: '#cecece', // Light Gray from brand guidelines
37
- 300: '#b5b5b5',
38
- 400: '#9b9b9b',
39
- 500: '#828282',
40
- 600: '#686868',
41
- 700: '#4f4f4f',
42
- 800: '#383838', // Dark Gray from brand guidelines
43
- 900: '#2a2a2a',
44
- },
45
- // Neutral colors - Based on brand grays
46
- neutral: {
47
- 50: '#ffffff', // White from brand guidelines
48
- 100: '#f5f5f5',
49
- 200: '#cecece', // Light Gray
50
- 300: '#b5b5b5',
51
- 400: '#9b9b9b',
52
- 500: '#828282',
53
- 600: '#686868',
54
- 700: '#4f4f4f',
55
- 800: '#383838', // Dark Gray
56
- 900: '#2a2a2a',
57
- },
58
- // Semantic colors - Keeping standard semantic colors
59
- success: {
60
- 50: '#e8f5e9',
61
- 100: '#c8e6c9',
62
- 200: '#a5d6a7',
63
- 300: '#81c784',
64
- 400: '#66bb6a',
65
- 500: '#4caf50',
66
- 600: '#43a047',
67
- 700: '#388e3c',
68
- 800: '#2e7d32',
69
- 900: '#1b5e20',
70
- },
71
- warning: {
72
- 50: '#fff3e0',
73
- 100: '#ffe0b2',
74
- 200: '#ffcc80',
75
- 300: '#ffb74d',
76
- 400: '#ffa726',
77
- 500: '#ff9800',
78
- 600: '#fb8c00',
79
- 700: '#f57c00',
80
- 800: '#ef6c00',
81
- 900: '#e65100',
82
- },
83
- error: {
84
- 50: '#ffebee',
85
- 100: '#ffcdd2',
86
- 200: '#ef9a9a',
87
- 300: '#e57373',
88
- 400: '#ef5350',
89
- 500: '#f44336',
90
- 600: '#e53935',
91
- 700: '#d32f2f',
92
- 800: '#c62828',
93
- 900: '#b71c1c',
94
- },
95
- info: {
96
- 50: '#e0f2f1',
97
- 100: '#b2dfdb',
98
- 200: '#80cbc4',
99
- 300: '#4db6ac',
100
- 400: '#26a69a',
101
- 500: '#009688',
102
- 600: '#00897b',
103
- 700: '#00796b',
104
- 800: '#00695c',
105
- 900: '#004d40',
106
- },
107
- // Brand-specific colors
108
- brand: {
109
- darkGray: '#383838', // Dark Gray from brand guidelines
110
- lightGray: '#cecece', // Light Gray from brand guidelines
111
- lightBlue: '#55C3D8', // Light Blue from brand guidelines
112
- white: '#ffffff', // White from brand guidelines
113
- },
114
- };
115
-
116
- var colors = /*#__PURE__*/Object.freeze({
117
- __proto__: null,
118
- COLOR_TOKENS: COLOR_TOKENS
119
- });
120
-
121
- /**
122
- * Spacing design tokens
123
- * Based on 8px grid system
124
- */
125
- const SPACING_TOKENS = {
126
- xs: '4px',
127
- sm: '8px',
128
- md: '16px',
129
- lg: '24px',
130
- xl: '32px',
131
- '2xl': '48px',
132
- '3xl': '64px',
133
- '4xl': '96px',
134
- '5xl': '128px',
135
- };
136
-
137
- var spacing = /*#__PURE__*/Object.freeze({
138
- __proto__: null,
139
- SPACING_TOKENS: SPACING_TOKENS
140
- });
141
-
142
- /**
143
- * Typography design tokens
144
- * Based on Secretaría de Finanzas brand guidelines - Pluto typeface
145
- */
146
- const TYPOGRAPHY_TOKENS = {
147
- fontFamily: {
148
- base: "'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
149
- mono: "'Fira Code', 'Courier New', monospace",
150
- },
151
- fontSize: {
152
- xs: '0.75rem', // 12px
153
- sm: '0.875rem', // 14px
154
- base: '1rem', // 16px
155
- lg: '1.125rem', // 18px
156
- xl: '1.25rem', // 20px
157
- '2xl': '1.5rem', // 24px
158
- '3xl': '1.875rem', // 30px
159
- '4xl': '2.25rem', // 36px
160
- '5xl': '3rem', // 48px
161
- },
162
- fontWeight: {
163
- light: 300, // Pluto-Light
164
- normal: 400, // Pluto-Regular
165
- medium: 500,
166
- semibold: 600,
167
- bold: 700, // Pluto-Bold
168
- },
169
- lineHeight: {
170
- tight: 1.25,
171
- normal: 1.5,
172
- relaxed: 1.75,
173
- },
174
- };
175
-
176
- var typography = /*#__PURE__*/Object.freeze({
177
- __proto__: null,
178
- TYPOGRAPHY_TOKENS: TYPOGRAPHY_TOKENS
179
- });
180
-
181
- /**
182
- * Border radius design tokens
183
- */
184
- const BORDER_RADIUS_TOKENS = {
185
- none: '0',
186
- sm: '4px',
187
- md: '8px',
188
- lg: '12px',
189
- xl: '16px',
190
- '2xl': '24px',
191
- full: '9999px',
192
- };
193
-
194
- var borderRadius = /*#__PURE__*/Object.freeze({
195
- __proto__: null,
196
- BORDER_RADIUS_TOKENS: BORDER_RADIUS_TOKENS
197
- });
198
-
199
- /**
200
- * Shadow design tokens
201
- */
202
- const SHADOW_TOKENS = {
203
- none: 'none',
204
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
205
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
206
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
207
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
208
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
209
- };
210
-
211
- var shadow = /*#__PURE__*/Object.freeze({
212
- __proto__: null,
213
- SHADOW_TOKENS: SHADOW_TOKENS
214
- });
215
-
216
- /**
217
- * Design tokens index
218
- * Central export for all design tokens
219
- */
220
- /**
221
- * All design tokens combined
222
- */
223
- const DESIGN_TOKENS = {
224
- colors: () => Promise.resolve().then(function () { return colors; }).then(m => m.COLOR_TOKENS),
225
- spacing: () => Promise.resolve().then(function () { return spacing; }).then(m => m.SPACING_TOKENS),
226
- typography: () => Promise.resolve().then(function () { return typography; }).then(m => m.TYPOGRAPHY_TOKENS),
227
- borderRadius: () => Promise.resolve().then(function () { return borderRadius; }).then(m => m.BORDER_RADIUS_TOKENS),
228
- shadow: () => Promise.resolve().then(function () { return shadow; }).then(m => m.SHADOW_TOKENS),
229
- };
230
-
231
- /**
232
- * Light theme configuration
233
- * Based on Secretaría de Finanzas brand colors
234
- */
235
- const LIGHT_THEME = {
236
- name: 'light',
237
- colors: {
238
- // Primary color is Light Blue from brand
239
- primary: COLOR_TOKENS.brand.lightBlue,
240
- 'primary-dark': COLOR_TOKENS.primary[700],
241
- 'primary-light': COLOR_TOKENS.primary[300],
242
- // Secondary uses Dark Gray
243
- secondary: COLOR_TOKENS.brand.darkGray,
244
- 'secondary-dark': COLOR_TOKENS.secondary[900],
245
- 'secondary-light': COLOR_TOKENS.secondary[600],
246
- // Background uses White and Light Gray
247
- background: COLOR_TOKENS.brand.white,
248
- 'background-elevated': COLOR_TOKENS.brand.white,
249
- surface: COLOR_TOKENS.brand.white,
250
- 'surface-hover': COLOR_TOKENS.brand.lightGray,
251
- // Text uses Dark Gray
252
- text: COLOR_TOKENS.brand.darkGray,
253
- 'text-secondary': COLOR_TOKENS.secondary[600],
254
- 'text-disabled': COLOR_TOKENS.secondary[400],
255
- // Borders use Light Gray
256
- border: COLOR_TOKENS.brand.lightGray,
257
- 'border-focus': COLOR_TOKENS.brand.lightBlue,
258
- // Semantic colors
259
- success: COLOR_TOKENS.success[500],
260
- warning: COLOR_TOKENS.warning[500],
261
- error: COLOR_TOKENS.error[500],
262
- info: COLOR_TOKENS.info[500],
263
- },
264
- };
265
-
266
- /**
267
- * Dark theme configuration
268
- * Based on Secretaría de Finanzas brand colors (inverted)
269
- */
270
- const DARK_THEME = {
271
- name: 'dark',
272
- colors: {
273
- // Primary color remains Light Blue
274
- primary: COLOR_TOKENS.brand.lightBlue,
275
- 'primary-dark': COLOR_TOKENS.primary[300],
276
- 'primary-light': COLOR_TOKENS.primary[700],
277
- // Secondary uses Light Gray for contrast
278
- secondary: COLOR_TOKENS.brand.lightGray,
279
- 'secondary-dark': COLOR_TOKENS.secondary[400],
280
- 'secondary-light': COLOR_TOKENS.secondary[200],
281
- // Background uses Dark Gray
282
- background: COLOR_TOKENS.brand.darkGray,
283
- 'background-elevated': COLOR_TOKENS.secondary[700],
284
- surface: COLOR_TOKENS.secondary[700],
285
- 'surface-hover': COLOR_TOKENS.secondary[600],
286
- // Text uses White and Light Gray
287
- text: COLOR_TOKENS.brand.white,
288
- 'text-secondary': COLOR_TOKENS.brand.lightGray,
289
- 'text-disabled': COLOR_TOKENS.secondary[500],
290
- // Borders use medium gray
291
- border: COLOR_TOKENS.secondary[600],
292
- 'border-focus': COLOR_TOKENS.brand.lightBlue,
293
- // Semantic colors
294
- success: COLOR_TOKENS.success[400],
295
- warning: COLOR_TOKENS.warning[400],
296
- error: COLOR_TOKENS.error[400],
297
- info: COLOR_TOKENS.info[400],
298
- },
299
- };
300
-
301
- /**
302
- * Brand theme configuration
303
- * Exact colors from Secretaría de Finanzas brand guidelines
304
- */
305
- const BRAND_THEME = {
306
- name: 'brand',
307
- colors: {
308
- // Primary: Light Blue from brand guidelines
309
- primary: COLOR_TOKENS.brand.lightBlue, // #55C3D8
310
- 'primary-dark': COLOR_TOKENS.primary[700],
311
- 'primary-light': COLOR_TOKENS.primary[300],
312
- // Secondary: Dark Gray from brand guidelines
313
- secondary: COLOR_TOKENS.brand.darkGray, // #383838
314
- 'secondary-dark': COLOR_TOKENS.secondary[900],
315
- 'secondary-light': COLOR_TOKENS.secondary[600],
316
- // Background: White from brand guidelines
317
- background: COLOR_TOKENS.brand.white, // #ffffff
318
- 'background-elevated': COLOR_TOKENS.brand.white,
319
- surface: COLOR_TOKENS.brand.white,
320
- 'surface-hover': COLOR_TOKENS.brand.lightGray, // #cecece
321
- // Text: Dark Gray from brand guidelines
322
- text: COLOR_TOKENS.brand.darkGray, // #383838
323
- 'text-secondary': COLOR_TOKENS.secondary[600],
324
- 'text-disabled': COLOR_TOKENS.secondary[400],
325
- // Border: Light Gray from brand guidelines
326
- border: COLOR_TOKENS.brand.lightGray, // #cecece
327
- 'border-focus': COLOR_TOKENS.brand.lightBlue, // #55C3D8
328
- // Semantic colors
329
- success: COLOR_TOKENS.success[500],
330
- warning: COLOR_TOKENS.warning[500],
331
- error: COLOR_TOKENS.error[500],
332
- info: COLOR_TOKENS.info[500],
333
- },
334
- };
335
-
336
- /**
337
- * Themes index
338
- */
339
-
340
- /**
341
- * Theme loader utility
342
- * Generates CSS variables from design tokens
343
- */
344
- class ThemeLoader {
345
- /**
346
- * Load a theme and apply it to the document root
347
- * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
348
- * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
349
- */
350
- static loadTheme(themeName = 'light', variant) {
351
- let theme;
352
- let colors;
353
- if (typeof themeName === 'string') {
354
- theme = this.getTheme(themeName);
355
- colors = theme.colors;
356
- }
357
- else {
358
- theme = themeName;
359
- // If variant is specified and theme has variants, use variant colors
360
- if (variant && theme.variants) {
361
- const variantColors = theme.variants[variant];
362
- if (variantColors) {
363
- colors = variantColors;
364
- }
365
- else {
366
- // Fallback to base colors if variant doesn't exist
367
- colors = theme.colors;
368
- }
369
- }
370
- else {
371
- // Use base colors if no variant specified or no variants defined
372
- colors = theme.colors;
373
- }
374
- }
375
- const root = document.documentElement;
376
- // Apply color tokens
377
- Object.entries(colors).forEach(([key, value]) => {
378
- if (value) {
379
- root.style.setProperty(`--sefin-color-${key}`, value);
380
- }
381
- });
382
- // Apply spacing tokens (use custom if provided, otherwise use defaults)
383
- const spacingTokens = typeof themeName === 'object' && themeName.spacing
384
- ? { ...SPACING_TOKENS, ...themeName.spacing }
385
- : SPACING_TOKENS;
386
- Object.entries(spacingTokens).forEach(([key, value]) => {
387
- root.style.setProperty(`--sefin-spacing-${key}`, value);
388
- });
389
- // Apply typography tokens (use custom if provided, otherwise use defaults)
390
- const typographyTokens = typeof themeName === 'object' && themeName.typography
391
- ? {
392
- fontFamily: { ...TYPOGRAPHY_TOKENS.fontFamily, ...themeName.typography.fontFamily },
393
- fontSize: { ...TYPOGRAPHY_TOKENS.fontSize, ...themeName.typography.fontSize },
394
- fontWeight: { ...TYPOGRAPHY_TOKENS.fontWeight, ...themeName.typography.fontWeight },
395
- lineHeight: { ...TYPOGRAPHY_TOKENS.lineHeight, ...themeName.typography.lineHeight },
396
- }
397
- : TYPOGRAPHY_TOKENS;
398
- Object.entries(typographyTokens.fontFamily).forEach(([key, value]) => {
399
- root.style.setProperty(`--sefin-font-family-${key}`, value);
400
- });
401
- Object.entries(typographyTokens.fontSize).forEach(([key, value]) => {
402
- root.style.setProperty(`--sefin-font-size-${key}`, value);
403
- });
404
- Object.entries(typographyTokens.fontWeight).forEach(([key, value]) => {
405
- root.style.setProperty(`--sefin-font-weight-${key}`, String(value));
406
- });
407
- Object.entries(typographyTokens.lineHeight).forEach(([key, value]) => {
408
- root.style.setProperty(`--sefin-line-height-${key}`, String(value));
409
- });
410
- // Apply border radius tokens (use custom if provided, otherwise use defaults)
411
- const borderRadiusTokens = typeof themeName === 'object' && themeName.borderRadius
412
- ? { ...BORDER_RADIUS_TOKENS, ...themeName.borderRadius }
413
- : BORDER_RADIUS_TOKENS;
414
- Object.entries(borderRadiusTokens).forEach(([key, value]) => {
415
- root.style.setProperty(`--sefin-radius-${key}`, value);
416
- });
417
- // Apply shadow tokens (use custom if provided, otherwise use defaults)
418
- const shadowTokens = typeof themeName === 'object' && themeName.shadow
419
- ? { ...SHADOW_TOKENS, ...themeName.shadow }
420
- : SHADOW_TOKENS;
421
- Object.entries(shadowTokens).forEach(([key, value]) => {
422
- root.style.setProperty(`--sefin-shadow-${key}`, value);
423
- });
424
- // Set theme attribute for CSS selectors
425
- let themeAttribute;
426
- if (typeof themeName === 'string') {
427
- themeAttribute = themeName;
428
- }
429
- else {
430
- themeAttribute = variant
431
- ? `${themeName.name}-${variant}`
432
- : themeName.name;
433
- }
434
- root.setAttribute('data-theme', themeAttribute);
435
- }
436
- /**
437
- * Load a custom theme variant (light or dark)
438
- * @param customTheme - CustomTheme object with variants support
439
- * @param variant - Variant to load ('light' or 'dark')
440
- */
441
- static loadThemeVariant(customTheme, variant) {
442
- if (!customTheme.variants) {
443
- console.warn(`Theme "${customTheme.name}" does not have variants. Loading base theme.`);
444
- this.loadTheme(customTheme);
445
- return;
446
- }
447
- this.loadTheme(customTheme, variant);
448
- }
449
- /**
450
- * Get theme configuration by name
451
- */
452
- static getTheme(themeName) {
453
- switch (themeName) {
454
- case 'dark':
455
- return DARK_THEME;
456
- case 'brand':
457
- return BRAND_THEME;
458
- case 'light':
459
- default:
460
- return LIGHT_THEME;
461
- }
462
- }
463
- /**
464
- * Get all CSS variables as a string (useful for SSR or static generation)
465
- * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
466
- * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
467
- */
468
- static getThemeCSS(themeName = 'light', variant) {
469
- let theme;
470
- let colors;
471
- if (typeof themeName === 'string') {
472
- theme = this.getTheme(themeName);
473
- colors = theme.colors;
474
- }
475
- else {
476
- theme = themeName;
477
- // If variant is specified and theme has variants, use variant colors
478
- if (variant && theme.variants) {
479
- const variantColors = theme.variants[variant];
480
- if (variantColors) {
481
- colors = variantColors;
482
- }
483
- else {
484
- colors = theme.colors;
485
- }
486
- }
487
- else {
488
- colors = theme.colors;
489
- }
490
- }
491
- let css = ':root {\n';
492
- // Color tokens
493
- Object.entries(colors).forEach(([key, value]) => {
494
- if (value) {
495
- css += ` --sefin-color-${key}: ${value};\n`;
496
- }
497
- });
498
- // Spacing tokens
499
- const spacingTokens = typeof themeName === 'object' && themeName.spacing
500
- ? { ...SPACING_TOKENS, ...themeName.spacing }
501
- : SPACING_TOKENS;
502
- Object.entries(spacingTokens).forEach(([key, value]) => {
503
- css += ` --sefin-spacing-${key}: ${value};\n`;
504
- });
505
- // Typography tokens
506
- const typographyTokens = typeof themeName === 'object' && themeName.typography
507
- ? {
508
- fontFamily: { ...TYPOGRAPHY_TOKENS.fontFamily, ...themeName.typography.fontFamily },
509
- fontSize: { ...TYPOGRAPHY_TOKENS.fontSize, ...themeName.typography.fontSize },
510
- fontWeight: { ...TYPOGRAPHY_TOKENS.fontWeight, ...themeName.typography.fontWeight },
511
- lineHeight: { ...TYPOGRAPHY_TOKENS.lineHeight, ...themeName.typography.lineHeight },
512
- }
513
- : TYPOGRAPHY_TOKENS;
514
- Object.entries(typographyTokens.fontFamily).forEach(([key, value]) => {
515
- css += ` --sefin-font-family-${key}: ${value};\n`;
516
- });
517
- Object.entries(typographyTokens.fontSize).forEach(([key, value]) => {
518
- css += ` --sefin-font-size-${key}: ${value};\n`;
519
- });
520
- Object.entries(typographyTokens.fontWeight).forEach(([key, value]) => {
521
- css += ` --sefin-font-weight-${key}: ${value};\n`;
522
- });
523
- Object.entries(typographyTokens.lineHeight).forEach(([key, value]) => {
524
- css += ` --sefin-line-height-${key}: ${value};\n`;
525
- });
526
- // Border radius tokens
527
- const borderRadiusTokens = typeof themeName === 'object' && themeName.borderRadius
528
- ? { ...BORDER_RADIUS_TOKENS, ...themeName.borderRadius }
529
- : BORDER_RADIUS_TOKENS;
530
- Object.entries(borderRadiusTokens).forEach(([key, value]) => {
531
- css += ` --sefin-radius-${key}: ${value};\n`;
532
- });
533
- // Shadow tokens
534
- const shadowTokens = typeof themeName === 'object' && themeName.shadow
535
- ? { ...SHADOW_TOKENS, ...themeName.shadow }
536
- : SHADOW_TOKENS;
537
- Object.entries(shadowTokens).forEach(([key, value]) => {
538
- css += ` --sefin-shadow-${key}: ${value};\n`;
539
- });
540
- css += '}\n';
541
- return css;
542
- }
543
- }
544
-
545
- /**
546
- * Utilities index
547
- */
548
-
549
- /**
550
- * Shared types and interfaces
551
- */
552
-
553
- /**
554
- * Shared index
555
- */
556
-
557
- const SIZE_MAP = {
558
- xs: 12,
559
- sm: 16,
560
- md: 24,
561
- lg: 32,
562
- xl: 48,
563
- };
564
- const ICON_COMPONENT_MAP = {
565
- home: LucideIcons.Home,
566
- menu: LucideIcons.Menu,
567
- 'x': LucideIcons.X,
568
- 'arrow-left': LucideIcons.ArrowLeft,
569
- 'arrow-right': LucideIcons.ArrowRight,
570
- 'arrow-up': LucideIcons.ArrowUp,
571
- 'arrow-down': LucideIcons.ArrowDown,
572
- 'chevron-left': LucideIcons.ChevronLeft,
573
- 'chevron-right': LucideIcons.ChevronRight,
574
- 'chevron-up': LucideIcons.ChevronUp,
575
- 'chevron-down': LucideIcons.ChevronDown,
576
- 'plus': LucideIcons.Plus,
577
- 'minus': LucideIcons.Minus,
578
- 'edit': LucideIcons.Edit,
579
- 'trash-2': LucideIcons.Trash2,
580
- 'save': LucideIcons.Save,
581
- 'search': LucideIcons.Search,
582
- 'filter': LucideIcons.Filter,
583
- 'more-vertical': LucideIcons.MoreVertical,
584
- 'more-horizontal': LucideIcons.MoreHorizontal,
585
- 'check': LucideIcons.Check,
586
- 'check-circle': LucideIcons.CheckCircle,
587
- 'x-circle': LucideIcons.XCircle,
588
- 'info': LucideIcons.Info,
589
- 'alert-triangle': LucideIcons.AlertTriangle,
590
- 'alert-circle': LucideIcons.AlertCircle,
591
- 'star': LucideIcons.Star,
592
- 'mail': LucideIcons.Mail,
593
- 'bell': LucideIcons.Bell,
594
- 'share-2': LucideIcons.Share2,
595
- 'file': LucideIcons.File,
596
- 'folder': LucideIcons.Folder,
597
- 'download': LucideIcons.Download,
598
- 'upload': LucideIcons.Upload,
599
- 'settings': LucideIcons.Settings,
600
- 'refresh-cw': LucideIcons.RefreshCw,
601
- 'lock': LucideIcons.Lock,
602
- 'unlock': LucideIcons.Unlock,
603
- 'eye': LucideIcons.Eye,
604
- 'eye-off': LucideIcons.EyeOff,
605
- 'user': LucideIcons.User,
606
- 'user-circle': LucideIcons.UserCircle,
607
- 'log-out': LucideIcons.LogOut,
608
- 'log-in': LucideIcons.LogIn,
609
- };
610
- const ICON_NAME_MAP = {
611
- home: 'home',
612
- menu: 'menu',
613
- close: 'x',
614
- arrow_back: 'arrow-left',
615
- arrow_forward: 'arrow-right',
616
- arrow_up: 'arrow-up',
617
- arrow_down: 'arrow-down',
618
- chevron_left: 'chevron-left',
619
- chevron_right: 'chevron-right',
620
- chevron_up: 'chevron-up',
621
- chevron_down: 'chevron-down',
622
- add: 'plus',
623
- remove: 'minus',
624
- edit: 'edit',
625
- delete: 'trash-2',
626
- save: 'save',
627
- search: 'search',
628
- filter: 'filter',
629
- more_vert: 'more-vertical',
630
- more_horiz: 'more-horizontal',
631
- check: 'check',
632
- check_circle: 'check-circle',
633
- cancel: 'x-circle',
634
- info: 'info',
635
- warning: 'alert-triangle',
636
- error: 'alert-circle',
637
- star: 'star',
638
- star_filled: 'star',
639
- mail: 'mail',
640
- notification: 'bell',
641
- share: 'share-2',
642
- file: 'file',
643
- folder: 'folder',
644
- download: 'download',
645
- upload: 'upload',
646
- settings: 'settings',
647
- refresh: 'refresh-cw',
648
- lock: 'lock',
649
- unlock: 'unlock',
650
- visibility: 'eye',
651
- visibility_off: 'eye-off',
652
- person: 'user',
653
- account_circle: 'user-circle',
654
- logout: 'log-out',
655
- login: 'log-in',
656
- };
657
- class IconComponent {
658
- injector;
659
- sanitizer = null;
660
- constructor(injector) {
661
- this.injector = injector;
662
- try {
663
- this.sanitizer = this.injector.get(DomSanitizer, null);
664
- }
665
- catch (e) {
666
- this.sanitizer = null;
667
- }
668
- }
669
- /** Icon name from Lucide Angular (e.g., 'home', 'search', 'user') */
670
- name;
671
- /** Icon size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
672
- size = 'md';
673
- /** Custom color for the icon */
674
- color;
675
- /** Whether the icon should be rotated 180 degrees */
676
- rotate = false;
677
- /** Whether the icon should be flipped horizontally */
678
- flipH = false;
679
- /** Whether the icon should be flipped vertically */
680
- flipV = false;
681
- /** Additional CSS classes */
682
- class = '';
683
- get iconClasses() {
684
- return [
685
- 'sefin-icon',
686
- `sefin-icon--${this.size}`,
687
- this.rotate ? 'sefin-icon--rotate' : '',
688
- this.flipH ? 'sefin-icon--flip-h' : '',
689
- this.flipV ? 'sefin-icon--flip-v' : '',
690
- this.class,
691
- ]
692
- .filter(Boolean)
693
- .join(' ');
694
- }
695
- get sizeValue() {
696
- return SIZE_MAP[this.size];
697
- }
698
- get lucideIconName() {
699
- if (!this.name) {
700
- return undefined;
701
- }
702
- return ICON_NAME_MAP[this.name] || this.name;
703
- }
704
- get iconSvgHtml() {
705
- const iconName = this.lucideIconName;
706
- if (!iconName) {
707
- return '';
708
- }
709
- let iconData = ICON_COMPONENT_MAP[iconName];
710
- if (!iconData) {
711
- const pascalCaseName = iconName
712
- .split('-')
713
- .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
714
- .join('');
715
- iconData = LucideIcons[pascalCaseName];
716
- }
717
- if (!iconData || !Array.isArray(iconData)) {
718
- return '';
719
- }
720
- try {
721
- const size = this.sizeValue;
722
- const color = this.color || 'currentColor';
723
- const transform = this.getTransform();
724
- const paths = iconData
725
- .map((item) => {
726
- if (!Array.isArray(item) || item.length < 2) {
727
- return '';
728
- }
729
- const tag = item[0];
730
- const attrs = item[1] || {};
731
- if (tag === 'path') {
732
- const d = attrs.d || '';
733
- return `<path d="${d}"></path>`;
734
- }
735
- if (tag === 'circle') {
736
- return `<circle cx="${attrs.cx || 0}" cy="${attrs.cy || 0}" r="${attrs.r || 0}"></circle>`;
737
- }
738
- if (tag === 'line') {
739
- return `<line x1="${attrs.x1 || 0}" y1="${attrs.y1 || 0}" x2="${attrs.x2 || 0}" y2="${attrs.y2 || 0}"></line>`;
740
- }
741
- if (tag === 'polyline') {
742
- const points = attrs.points || '';
743
- return `<polyline points="${points}"></polyline>`;
744
- }
745
- if (tag === 'rect') {
746
- return `<rect x="${attrs.x || 0}" y="${attrs.y || 0}" width="${attrs.width || 0}" height="${attrs.height || 0}"></rect>`;
747
- }
748
- if (tag === 'polygon') {
749
- const points = attrs.points || '';
750
- return `<polygon points="${points}"></polygon>`;
751
- }
752
- return '';
753
- })
754
- .filter(Boolean)
755
- .join('');
756
- if (!paths) {
757
- return '';
758
- }
759
- const transformAttr = transform ? ` style="transform: ${transform}"` : '';
760
- const safeColor = color.includes('"') ? color.replace(/"/g, '&quot;') : color;
761
- const svgHtml = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${safeColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${transformAttr}>${paths}</svg>`;
762
- if (this.sanitizer) {
763
- return this.sanitizer.bypassSecurityTrustHtml(svgHtml);
764
- }
765
- return svgHtml;
766
- }
767
- catch (error) {
768
- return '';
769
- }
770
- }
771
- escapeHtml(text) {
772
- if (typeof document === 'undefined') {
773
- return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
774
- }
775
- const div = document.createElement('div');
776
- div.textContent = text;
777
- return div.innerHTML;
778
- }
779
- getTransform() {
780
- const transforms = [];
781
- if (this.rotate)
782
- transforms.push('rotate(180)');
783
- if (this.flipH)
784
- transforms.push('scaleX(-1)');
785
- if (this.flipV)
786
- transforms.push('scaleY(-1)');
787
- return transforms.length > 0 ? transforms.join(' ') : '';
788
- }
789
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
790
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: IconComponent, isStandalone: true, selector: "sefin-icon", inputs: { name: "name", size: "size", color: "color", rotate: "rotate", flipH: "flipH", flipV: "flipV", class: "class" }, ngImport: i0, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n style=\"display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%;\"\n>\n <span [innerHTML]=\"iconSvgHtml\" style=\"display: inline-block; width: 100%; height: 100%;\"></span>\n</span>\n\n", styles: [".sefin-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;box-sizing:border-box;color:currentColor;line-height:1}.sefin-icon--xs{width:12px;height:12px;font-size:12px}.sefin-icon--xs ::ng-deep svg{width:12px;height:12px}.sefin-icon--sm{width:16px;height:16px;font-size:16px}.sefin-icon--sm ::ng-deep svg{width:16px;height:16px}.sefin-icon--md{width:24px;height:24px;font-size:24px}.sefin-icon--md ::ng-deep svg{width:24px;height:24px}.sefin-icon--lg{width:32px;height:32px;font-size:32px}.sefin-icon--lg ::ng-deep svg{width:32px;height:32px}.sefin-icon--xl{width:48px;height:48px;font-size:48px}.sefin-icon--xl ::ng-deep svg{width:48px;height:48px}.sefin-icon--rotate{transform:rotate(180deg)}.sefin-icon--flip-h{transform:scaleX(-1)}.sefin-icon--flip-v{transform:scaleY(-1)}.sefin-icon--flip-h.sefin-icon--flip-v{transform:scale(-1)}.sefin-icon ::ng-deep svg{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%}.sefin-icon>*{display:inline-block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
791
- }
792
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, decorators: [{
793
- type: Component,
794
- args: [{ selector: 'sefin-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"iconClasses\"\n [attr.aria-hidden]=\"true\"\n role=\"img\"\n style=\"display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%;\"\n>\n <span [innerHTML]=\"iconSvgHtml\" style=\"display: inline-block; width: 100%; height: 100%;\"></span>\n</span>\n\n", styles: [".sefin-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;box-sizing:border-box;color:currentColor;line-height:1}.sefin-icon--xs{width:12px;height:12px;font-size:12px}.sefin-icon--xs ::ng-deep svg{width:12px;height:12px}.sefin-icon--sm{width:16px;height:16px;font-size:16px}.sefin-icon--sm ::ng-deep svg{width:16px;height:16px}.sefin-icon--md{width:24px;height:24px;font-size:24px}.sefin-icon--md ::ng-deep svg{width:24px;height:24px}.sefin-icon--lg{width:32px;height:32px;font-size:32px}.sefin-icon--lg ::ng-deep svg{width:32px;height:32px}.sefin-icon--xl{width:48px;height:48px;font-size:48px}.sefin-icon--xl ::ng-deep svg{width:48px;height:48px}.sefin-icon--rotate{transform:rotate(180deg)}.sefin-icon--flip-h{transform:scaleX(-1)}.sefin-icon--flip-v{transform:scaleY(-1)}.sefin-icon--flip-h.sefin-icon--flip-v{transform:scale(-1)}.sefin-icon ::ng-deep svg{display:block!important;width:100%!important;height:100%!important;max-width:100%;max-height:100%}.sefin-icon>*{display:inline-block;width:100%;height:100%}\n"] }]
795
- }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { name: [{
796
- type: Input
797
- }], size: [{
798
- type: Input
799
- }], color: [{
800
- type: Input
801
- }], rotate: [{
802
- type: Input
803
- }], flipH: [{
804
- type: Input
805
- }], flipV: [{
806
- type: Input
807
- }], class: [{
808
- type: Input
809
- }] } });
810
-
811
- class AvatarComponent {
812
- /** Avatar size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
813
- size = 'md';
814
- /** Image source URL */
815
- src;
816
- /** Alt text for the image */
817
- alt = '';
818
- /** Initials to display when no image is provided */
819
- initials;
820
- /** Whether to show a border/ring around the avatar */
821
- bordered = false;
822
- /** Additional CSS classes */
823
- class = '';
824
- get avatarClasses() {
825
- return [
826
- 'sefin-avatar',
827
- `sefin-avatar--${this.size}`,
828
- this.bordered ? 'sefin-avatar--bordered' : '',
829
- this.class,
830
- ]
831
- .filter(Boolean)
832
- .join(' ');
833
- }
834
- get displayInitials() {
835
- if (this.initials) {
836
- return this.initials.toUpperCase().slice(0, 2);
837
- }
838
- return '';
839
- }
840
- onImageError(event) {
841
- const img = event.target;
842
- img.style.display = 'none';
843
- }
844
- get iconSize() {
845
- // Map avatar size to icon size
846
- const sizeMap = {
847
- xs: 'xs',
848
- sm: 'xs',
849
- md: 'sm',
850
- lg: 'md',
851
- xl: 'lg',
852
- };
853
- return sizeMap[this.size];
854
- }
855
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
856
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AvatarComponent, isStandalone: true, selector: "sefin-avatar", inputs: { size: "size", src: "src", alt: "alt", initials: "initials", bordered: "bordered", class: "class" }, ngImport: i0, template: "<div [class]=\"avatarClasses\">\n <img\n *ngIf=\"src\"\n [src]=\"src\"\n [alt]=\"alt || 'Avatar'\"\n (error)=\"onImageError($event)\"\n class=\"sefin-avatar__image\"\n />\n <span *ngIf=\"!src && displayInitials\" class=\"sefin-avatar__initials\">\n {{ displayInitials }}\n </span>\n <sefin-icon\n *ngIf=\"!src && !displayInitials\"\n name=\"user\"\n [size]=\"iconSize\"\n class=\"sefin-avatar__icon\"\n ></sefin-icon>\n</div>\n\n", styles: [".sefin-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden;background-color:var(--sefin-color-surface);color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);-webkit-user-select:none;user-select:none}.sefin-avatar--xs{width:24px;height:24px;font-size:var(--sefin-font-size-xs, 10px)}.sefin-avatar--sm{width:32px;height:32px;font-size:var(--sefin-font-size-xs, 11px)}.sefin-avatar--md{width:40px;height:40px;font-size:var(--sefin-font-size-sm, 13px)}.sefin-avatar--lg{width:56px;height:56px;font-size:var(--sefin-font-size-base, 16px)}.sefin-avatar--xl{width:80px;height:80px;font-size:var(--sefin-font-size-lg, 20px)}.sefin-avatar--bordered{border:2px solid var(--sefin-color-border);box-shadow:0 0 0 2px var(--sefin-color-surface)}.sefin-avatar__image{width:100%;height:100%;object-fit:cover;display:block}.sefin-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sefin-color-text);background-color:var(--sefin-color-primary);background:linear-gradient(135deg,var(--sefin-color-primary) 0%,var(--sefin-color-primary-dark, var(--sefin-color-primary)) 100%);color:#fff;font-weight:var(--sefin-font-weight-semibold);line-height:1}.sefin-avatar__icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary)}.sefin-avatar__icon sefin-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
857
- }
858
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
859
- type: Component,
860
- args: [{ selector: 'sefin-avatar', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"avatarClasses\">\n <img\n *ngIf=\"src\"\n [src]=\"src\"\n [alt]=\"alt || 'Avatar'\"\n (error)=\"onImageError($event)\"\n class=\"sefin-avatar__image\"\n />\n <span *ngIf=\"!src && displayInitials\" class=\"sefin-avatar__initials\">\n {{ displayInitials }}\n </span>\n <sefin-icon\n *ngIf=\"!src && !displayInitials\"\n name=\"user\"\n [size]=\"iconSize\"\n class=\"sefin-avatar__icon\"\n ></sefin-icon>\n</div>\n\n", styles: [".sefin-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;overflow:hidden;background-color:var(--sefin-color-surface);color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);-webkit-user-select:none;user-select:none}.sefin-avatar--xs{width:24px;height:24px;font-size:var(--sefin-font-size-xs, 10px)}.sefin-avatar--sm{width:32px;height:32px;font-size:var(--sefin-font-size-xs, 11px)}.sefin-avatar--md{width:40px;height:40px;font-size:var(--sefin-font-size-sm, 13px)}.sefin-avatar--lg{width:56px;height:56px;font-size:var(--sefin-font-size-base, 16px)}.sefin-avatar--xl{width:80px;height:80px;font-size:var(--sefin-font-size-lg, 20px)}.sefin-avatar--bordered{border:2px solid var(--sefin-color-border);box-shadow:0 0 0 2px var(--sefin-color-surface)}.sefin-avatar__image{width:100%;height:100%;object-fit:cover;display:block}.sefin-avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--sefin-color-text);background-color:var(--sefin-color-primary);background:linear-gradient(135deg,var(--sefin-color-primary) 0%,var(--sefin-color-primary-dark, var(--sefin-color-primary)) 100%);color:#fff;font-weight:var(--sefin-font-weight-semibold);line-height:1}.sefin-avatar__icon{display:flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary)}.sefin-avatar__icon sefin-icon{color:inherit}\n"] }]
861
- }], propDecorators: { size: [{
862
- type: Input
863
- }], src: [{
864
- type: Input
865
- }], alt: [{
866
- type: Input
867
- }], initials: [{
868
- type: Input
869
- }], bordered: [{
870
- type: Input
871
- }], class: [{
872
- type: Input
873
- }] } });
874
-
875
- class BadgeComponent {
876
- /** Badge variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
877
- variant = 'default';
878
- /** Badge size. Options: 'sm' | 'md' | 'lg' */
879
- size = 'md';
880
- /** Whether the badge should be displayed as a dot (no text) */
881
- dot = false;
882
- /** Maximum number to show before displaying as "+N" */
883
- max;
884
- /** Badge value (number or text) */
885
- value;
886
- /** Additional CSS classes */
887
- class = '';
888
- get badgeClasses() {
889
- return [
890
- 'sefin-badge',
891
- `sefin-badge--${this.variant}`,
892
- `sefin-badge--${this.size}`,
893
- this.dot ? 'sefin-badge--dot' : '',
894
- this.class,
895
- ]
896
- .filter(Boolean)
897
- .join(' ');
898
- }
899
- get displayValue() {
900
- if (this.dot) {
901
- return '';
902
- }
903
- if (this.value === undefined || this.value === null) {
904
- return '';
905
- }
906
- if (typeof this.value === 'number') {
907
- if (this.max !== undefined && this.value > this.max) {
908
- return `+${this.max}`;
909
- }
910
- return String(this.value);
911
- }
912
- return String(this.value);
913
- }
914
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
915
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BadgeComponent, isStandalone: true, selector: "sefin-badge", inputs: { variant: "variant", size: "size", dot: "dot", max: "max", value: "value", class: "class" }, ngImport: i0, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-border-radius-full, 9999px);white-space:nowrap;vertical-align:middle;box-sizing:border-box}.sefin-badge--sm{min-width:16px;height:16px;padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 10px)}.sefin-badge--sm:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-xs, 4px)}.sefin-badge--md{min-width:20px;height:20px;padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 11px)}.sefin-badge--md:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-sm, 6px)}.sefin-badge--lg{min-width:24px;height:24px;padding:0 var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-badge--lg:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-md, 8px)}.sefin-badge--dot{width:8px;height:8px;min-width:8px;padding:0;border-radius:50%!important}.sefin-badge--dot.sefin-badge--sm{width:6px;height:6px;min-width:6px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--md{width:8px;height:8px;min-width:8px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--lg{width:10px;height:10px;min-width:10px;border-radius:50%!important}.sefin-badge--default{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-badge--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-badge--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-badge--success{background-color:var(--sefin-color-success);color:#fff}.sefin-badge--warning{background-color:var(--sefin-color-warning);color:#fff}.sefin-badge--error{background-color:var(--sefin-color-error);color:#fff}.sefin-badge__content{display:inline-block;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
916
- }
917
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BadgeComponent, decorators: [{
918
- type: Component,
919
- args: [{ selector: 'sefin-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClasses\" [attr.aria-label]=\"displayValue || 'Badge'\">\n <span *ngIf=\"!dot\" class=\"sefin-badge__content\">{{ displayValue }}</span>\n</span>", styles: [".sefin-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:1;border-radius:var(--sefin-border-radius-full, 9999px);white-space:nowrap;vertical-align:middle;box-sizing:border-box}.sefin-badge--sm{min-width:16px;height:16px;padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 10px)}.sefin-badge--sm:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-xs, 4px)}.sefin-badge--md{min-width:20px;height:20px;padding:0 var(--sefin-spacing-xs, 4px);font-size:var(--sefin-font-size-xs, 11px)}.sefin-badge--md:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-sm, 6px)}.sefin-badge--lg{min-width:24px;height:24px;padding:0 var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-badge--lg:not(.sefin-badge--dot){padding:0 var(--sefin-spacing-md, 8px)}.sefin-badge--dot{width:8px;height:8px;min-width:8px;padding:0;border-radius:50%!important}.sefin-badge--dot.sefin-badge--sm{width:6px;height:6px;min-width:6px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--md{width:8px;height:8px;min-width:8px;border-radius:50%!important}.sefin-badge--dot.sefin-badge--lg{width:10px;height:10px;min-width:10px;border-radius:50%!important}.sefin-badge--default{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-badge--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-badge--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-badge--success{background-color:var(--sefin-color-success);color:#fff}.sefin-badge--warning{background-color:var(--sefin-color-warning);color:#fff}.sefin-badge--error{background-color:var(--sefin-color-error);color:#fff}.sefin-badge__content{display:inline-block;line-height:1}\n"] }]
920
- }], propDecorators: { variant: [{
921
- type: Input
922
- }], size: [{
923
- type: Input
924
- }], dot: [{
925
- type: Input
926
- }], max: [{
927
- type: Input
928
- }], value: [{
929
- type: Input
930
- }], class: [{
931
- type: Input
932
- }] } });
933
-
934
- class ButtonComponent {
935
- /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
936
- variant = 'primary';
937
- /** Button size. Options: 'sm' | 'md' | 'lg' */
938
- size = 'md';
939
- /** Whether the button is disabled */
940
- disabled = false;
941
- /** Button type. Options: 'button' | 'submit' | 'reset' */
942
- type = 'button';
943
- /** Additional CSS classes */
944
- class = '';
945
- clicked = new EventEmitter();
946
- onClick(event) {
947
- if (!this.disabled) {
948
- this.clicked.emit(event);
949
- }
950
- }
951
- get buttonClasses() {
952
- return [
953
- 'sefin-button',
954
- `sefin-button--${this.variant}`,
955
- `sefin-button--${this.size}`,
956
- this.disabled ? 'sefin-button--disabled' : '',
957
- this.class,
958
- ]
959
- .filter(Boolean)
960
- .join(' ');
961
- }
962
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
963
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "sefin-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
964
- }
965
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
966
- type: Component,
967
- args: [{ selector: 'sefin-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type\" [disabled]=\"disabled\" [class]=\"buttonClasses\" (click)=\"onClick($event)\">\n <ng-content></ng-content>\n</button>\n", styles: [".sefin-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent}.sefin-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
968
- }], propDecorators: { variant: [{
969
- type: Input
970
- }], size: [{
971
- type: Input
972
- }], disabled: [{
973
- type: Input
974
- }], type: [{
975
- type: Input
976
- }], class: [{
977
- type: Input
978
- }], clicked: [{
979
- type: Output
980
- }] } });
981
-
982
- /**
983
- * Icon exports
984
- */
985
- // export * from './lucide-icon-map'; // Disabled - lucide-angular removed
986
-
987
- class IconButtonComponent {
988
- /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
989
- variant = 'primary';
990
- /** Button size. Options: 'sm' | 'md' | 'lg' */
991
- size = 'md';
992
- /** Whether the button is disabled */
993
- disabled = false;
994
- /** Button type. Options: 'button' | 'submit' | 'reset' */
995
- type = 'button';
996
- /** Additional CSS classes */
997
- class = '';
998
- /** Accessibility label for the button */
999
- ariaLabel = '';
1000
- /** Whether the button should be rounded (circular) */
1001
- rounded = false;
1002
- clicked = new EventEmitter();
1003
- onClick(event) {
1004
- if (!this.disabled) {
1005
- this.clicked.emit(event);
1006
- }
1007
- }
1008
- get buttonClasses() {
1009
- return [
1010
- 'sefin-icon-button',
1011
- `sefin-icon-button--${this.variant}`,
1012
- `sefin-icon-button--${this.size}`,
1013
- this.disabled ? 'sefin-icon-button--disabled' : '',
1014
- this.rounded ? 'sefin-icon-button--rounded' : '',
1015
- this.class,
1016
- ]
1017
- .filter(Boolean)
1018
- .join(' ');
1019
- }
1020
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1021
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: IconButtonComponent, isStandalone: true, selector: "sefin-icon-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel", rounded: "rounded" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-icon-button--sm{width:32px;height:32px;min-width:32px;min-height:32px}.sefin-icon-button--md{width:40px;height:40px;min-width:40px;min-height:40px}.sefin-icon-button--lg{width:48px;height:48px;min-width:48px;min-height:48px}.sefin-icon-button--rounded{border-radius:50%}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:16px;height:16px}.sefin-icon-button--md svg{width:20px;height:20px}.sefin-icon-button--lg svg{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1022
- }
1023
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconButtonComponent, decorators: [{
1024
- type: Component,
1025
- args: [{ selector: 'sefin-icon-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-icon-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0}.sefin-icon-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-icon-button--sm{width:32px;height:32px;min-width:32px;min-height:32px}.sefin-icon-button--md{width:40px;height:40px;min-width:40px;min-height:40px}.sefin-icon-button--lg{width:48px;height:48px;min-width:48px;min-height:48px}.sefin-icon-button--rounded{border-radius:50%}.sefin-icon-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-icon-button--primary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-icon-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-icon-button--secondary:active:not(:disabled){transform:translateY(1px)}.sefin-icon-button--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-icon-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-icon-button--ghost{background-color:transparent;color:var(--sefin-color-primary)}.sefin-icon-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-icon-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-icon-button--danger:hover:not(:disabled){background-color:var(--sefin-color-error);opacity:.9}.sefin-icon-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-icon-button svg{width:100%;height:100%;display:block}.sefin-icon-button--sm svg{width:16px;height:16px}.sefin-icon-button--md svg{width:20px;height:20px}.sefin-icon-button--lg svg{width:24px;height:24px}\n"] }]
1026
- }], propDecorators: { variant: [{
1027
- type: Input
1028
- }], size: [{
1029
- type: Input
1030
- }], disabled: [{
1031
- type: Input
1032
- }], type: [{
1033
- type: Input
1034
- }], class: [{
1035
- type: Input
1036
- }], ariaLabel: [{
1037
- type: Input
1038
- }], rounded: [{
1039
- type: Input
1040
- }], clicked: [{
1041
- type: Output
1042
- }] } });
1043
-
1044
- class FabButtonComponent {
1045
- /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
1046
- variant = 'primary';
1047
- /** FAB size. Options: 'sm' | 'md' | 'lg' */
1048
- size = 'md';
1049
- /** Whether the button is disabled */
1050
- disabled = false;
1051
- /** Button type. Options: 'button' | 'submit' | 'reset' */
1052
- type = 'button';
1053
- /** Additional CSS classes */
1054
- class = '';
1055
- /** Accessibility label for the button */
1056
- ariaLabel = '';
1057
- clicked = new EventEmitter();
1058
- onClick(event) {
1059
- if (!this.disabled) {
1060
- this.clicked.emit(event);
1061
- }
1062
- }
1063
- get buttonClasses() {
1064
- return [
1065
- 'sefin-fab-button',
1066
- `sefin-fab-button--${this.variant}`,
1067
- `sefin-fab-button--${this.size}`,
1068
- this.disabled ? 'sefin-fab-button--disabled' : '',
1069
- this.class,
1070
- ]
1071
- .filter(Boolean)
1072
- .join(' ');
1073
- }
1074
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1075
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FabButtonComponent, isStandalone: true, selector: "sefin-fab-button", inputs: { variant: "variant", size: "size", disabled: "disabled", type: "type", class: "class", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:50%;transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-shadow:var(--sefin-shadow-lg);position:relative}.sefin-fab-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-fab-button--sm{width:40px;height:40px;min-width:40px;min-height:40px;box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--md{width:56px;height:56px;min-width:56px;min-height:56px;box-shadow:var(--sefin-shadow-lg)}.sefin-fab-button--lg{width:64px;height:64px;min-width:64px;min-height:64px;box-shadow:var(--sefin-shadow-xl)}.sefin-fab-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-fab-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-fab-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff;box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--outline:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--ghost:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-fab-button--danger:hover:not(:disabled){opacity:.9;box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--danger:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button svg,.sefin-fab-button sefin-icon{display:block;flex-shrink:0}.sefin-fab-button--sm sefin-icon{width:20px;height:20px}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md sefin-icon{width:24px;height:24px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg sefin-icon{width:28px;height:28px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1076
- }
1077
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, decorators: [{
1078
- type: Component,
1079
- args: [{ selector: 'sefin-fab-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n [type]=\"type\" \n [disabled]=\"disabled\" \n [class]=\"buttonClasses\" \n (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel || null\"\n>\n <ng-content></ng-content>\n</button>\n\n", styles: [".sefin-fab-button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);border-radius:50%;transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;padding:0;aspect-ratio:1;flex-shrink:0;box-shadow:var(--sefin-shadow-lg);position:relative}.sefin-fab-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-fab-button--sm{width:40px;height:40px;min-width:40px;min-height:40px;box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--md{width:56px;height:56px;min-width:56px;min-height:56px;box-shadow:var(--sefin-shadow-lg)}.sefin-fab-button--lg{width:64px;height:64px;min-width:64px;min-height:64px;box-shadow:var(--sefin-shadow-xl)}.sefin-fab-button--primary{background-color:var(--sefin-color-primary);color:#fff}.sefin-fab-button--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--secondary{background-color:var(--sefin-color-secondary);color:#fff}.sefin-fab-button--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark);box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--secondary:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff;box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--outline:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost{background-color:var(--sefin-color-surface);color:var(--sefin-color-primary);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);box-shadow:var(--sefin-shadow-lg);transform:translateY(-2px)}.sefin-fab-button--ghost:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button--danger{background-color:var(--sefin-color-error);color:#fff}.sefin-fab-button--danger:hover:not(:disabled){opacity:.9;box-shadow:var(--sefin-shadow-xl);transform:translateY(-2px)}.sefin-fab-button--danger:active:not(:disabled){transform:translateY(0);box-shadow:var(--sefin-shadow-md)}.sefin-fab-button--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:var(--sefin-shadow-sm)}.sefin-fab-button svg,.sefin-fab-button sefin-icon{display:block;flex-shrink:0}.sefin-fab-button--sm sefin-icon{width:20px;height:20px}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md sefin-icon{width:24px;height:24px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg sefin-icon{width:28px;height:28px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"] }]
1080
- }], propDecorators: { variant: [{
1081
- type: Input
1082
- }], size: [{
1083
- type: Input
1084
- }], disabled: [{
1085
- type: Input
1086
- }], type: [{
1087
- type: Input
1088
- }], class: [{
1089
- type: Input
1090
- }], ariaLabel: [{
1091
- type: Input
1092
- }], clicked: [{
1093
- type: Output
1094
- }] } });
1095
-
1096
- class ChipComponent {
1097
- /** Chip variant style. Options: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' */
1098
- variant = 'default';
1099
- /** Chip size. Options: 'sm' | 'md' | 'lg' */
1100
- size = 'md';
1101
- /** Whether the chip is disabled */
1102
- disabled = false;
1103
- /** Whether the chip can be removed (shows remove button) */
1104
- removable = false;
1105
- /** Whether the chip is selected (for selectable chips) */
1106
- selected = false;
1107
- /** Additional CSS classes */
1108
- class = '';
1109
- removed = new EventEmitter();
1110
- clicked = new EventEmitter();
1111
- onRemove(event) {
1112
- event.stopPropagation();
1113
- if (!this.disabled) {
1114
- this.removed.emit(event);
1115
- }
1116
- }
1117
- onClick(event) {
1118
- if (!this.disabled) {
1119
- this.clicked.emit(event);
1120
- }
1121
- }
1122
- get chipClasses() {
1123
- return [
1124
- 'sefin-chip',
1125
- `sefin-chip--${this.variant}`,
1126
- `sefin-chip--${this.size}`,
1127
- this.disabled ? 'sefin-chip--disabled' : '',
1128
- this.selected ? 'sefin-chip--selected' : '',
1129
- this.class,
1130
- ]
1131
- .filter(Boolean)
1132
- .join(' ');
1133
- }
1134
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1135
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ChipComponent, isStandalone: true, selector: "sefin-chip", inputs: { variant: "variant", size: "size", disabled: "disabled", removable: "removable", selected: "selected", class: "class" }, outputs: { removed: "removed", clicked: "clicked" }, ngImport: i0, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-full);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none}.sefin-chip:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-chip--sm{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-xs, 12px);min-height:24px}.sefin-chip--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-chip--lg{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-chip--default{background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-chip--default:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--default.sefin-chip--selected,.sefin-chip--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-chip--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-chip--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-chip--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-chip--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-chip--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--outline.sefin-chip--selected{background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--ghost{background-color:transparent;color:var(--sefin-color-text)}.sefin-chip--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--ghost.sefin-chip--selected{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-chip--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-chip__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-chip__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out;border-radius:50%;width:16px;height:16px;flex-shrink:0}.sefin-chip__remove:hover{opacity:1;background-color:#0000001a}.sefin-chip__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-chip__remove svg{display:block;width:12px;height:12px}.sefin-chip ::ng-deep svg,.sefin-chip ::ng-deep sefin-icon{flex-shrink:0}.sefin-chip--sm ::ng-deep svg{width:12px;height:12px}.sefin-chip--md ::ng-deep svg{width:14px;height:14px}.sefin-chip--lg ::ng-deep svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1136
- }
1137
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChipComponent, decorators: [{
1138
- type: Component,
1139
- args: [{ selector: 'sefin-chip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"chipClasses\"\n (click)=\"onClick($event)\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-selected]=\"selected\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span class=\"sefin-chip__content\">\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-chip__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove\"\n tabindex=\"-1\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</div>\n\n", styles: [".sefin-chip{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-radius-full);transition:all .2s ease-in-out;cursor:pointer;outline:none;border:1px solid transparent;white-space:nowrap;-webkit-user-select:none;user-select:none}.sefin-chip:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-chip--sm{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-xs, 12px);min-height:24px}.sefin-chip--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-chip--lg{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-chip--default{background-color:var(--sefin-color-surface);color:var(--sefin-color-text);border-color:var(--sefin-color-border)}.sefin-chip--default:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--default.sefin-chip--selected,.sefin-chip--primary{background-color:var(--sefin-color-primary);color:#fff;border-color:var(--sefin-color-primary)}.sefin-chip--primary:hover:not(:disabled){background-color:var(--sefin-color-primary-dark)}.sefin-chip--secondary{background-color:var(--sefin-color-secondary);color:#fff;border-color:var(--sefin-color-secondary)}.sefin-chip--secondary:hover:not(:disabled){background-color:var(--sefin-color-secondary-dark)}.sefin-chip--outline{background-color:transparent;color:var(--sefin-color-primary);border-color:var(--sefin-color-primary)}.sefin-chip--outline:hover:not(:disabled){background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--outline.sefin-chip--selected{background-color:var(--sefin-color-primary);color:#fff}.sefin-chip--ghost{background-color:transparent;color:var(--sefin-color-text)}.sefin-chip--ghost:hover:not(:disabled){background-color:var(--sefin-color-surface-hover)}.sefin-chip--ghost.sefin-chip--selected{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-primary)}.sefin-chip--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-chip__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-chip__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out;border-radius:50%;width:16px;height:16px;flex-shrink:0}.sefin-chip__remove:hover{opacity:1;background-color:#0000001a}.sefin-chip__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-chip__remove svg{display:block;width:12px;height:12px}.sefin-chip ::ng-deep svg,.sefin-chip ::ng-deep sefin-icon{flex-shrink:0}.sefin-chip--sm ::ng-deep svg{width:12px;height:12px}.sefin-chip--md ::ng-deep svg{width:14px;height:14px}.sefin-chip--lg ::ng-deep svg{width:16px;height:16px}\n"] }]
1140
- }], propDecorators: { variant: [{
1141
- type: Input
1142
- }], size: [{
1143
- type: Input
1144
- }], disabled: [{
1145
- type: Input
1146
- }], removable: [{
1147
- type: Input
1148
- }], selected: [{
1149
- type: Input
1150
- }], class: [{
1151
- type: Input
1152
- }], removed: [{
1153
- type: Output
1154
- }], clicked: [{
1155
- type: Output
1156
- }] } });
1157
-
1158
- class TagComponent {
1159
- /** Tag variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' */
1160
- variant = 'default';
1161
- /** Tag size. Options: 'sm' | 'md' | 'lg' */
1162
- size = 'md';
1163
- /** Icon name to display before the tag content */
1164
- icon;
1165
- /** Whether the tag can be removed (shows remove button) */
1166
- removable = false;
1167
- /** Whether the tag is disabled */
1168
- disabled = false;
1169
- /** Additional CSS classes */
1170
- class = '';
1171
- /** Event emitted when the tag is removed */
1172
- removed = new EventEmitter();
1173
- onRemove(event) {
1174
- event.stopPropagation();
1175
- if (!this.disabled) {
1176
- this.removed.emit(event);
1177
- }
1178
- }
1179
- get tagClasses() {
1180
- return [
1181
- 'sefin-tag',
1182
- `sefin-tag--${this.variant}`,
1183
- `sefin-tag--${this.size}`,
1184
- this.disabled ? 'sefin-tag--disabled' : '',
1185
- this.class,
1186
- ]
1187
- .filter(Boolean)
1188
- .join(' ');
1189
- }
1190
- get iconSize() {
1191
- if (this.size === 'sm')
1192
- return 'xs';
1193
- if (this.size === 'lg')
1194
- return 'sm';
1195
- return 'sm';
1196
- }
1197
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1198
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TagComponent, isStandalone: true, selector: "sefin-tag", inputs: { variant: "variant", size: "size", icon: "icon", removable: "removable", disabled: "disabled", class: "class" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-border-radius-sm, 4px);white-space:nowrap;vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sefin-tag--sm{padding:var(--sefin-spacing-xs, 2px) var(--sefin-spacing-sm, 6px);font-size:var(--sefin-font-size-xs, 10px);min-height:20px}.sefin-tag--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px);min-height:24px}.sefin-tag--lg{padding:var(--sefin-spacing-sm, 6px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-base, 14px);min-height:28px}.sefin-tag--default{background-color:var(--sefin-color-surface-hover, #f0f0f0);color:var(--sefin-color-text, #333);border:1px solid var(--sefin-color-border, #e0e0e0)}.sefin-tag--primary{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-primary-dark, #0d47a1);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--secondary{background-color:var(--sefin-color-secondary-light, #fce4ec);color:var(--sefin-color-secondary-dark, #880e4f);border:1px solid var(--sefin-color-secondary, #dc004e)}.sefin-tag--success{background-color:var(--sefin-color-success-light, #e8f5e9);color:var(--sefin-color-success-dark, #2e7d32);border:1px solid var(--sefin-color-success, #4caf50)}.sefin-tag--warning{background-color:var(--sefin-color-warning-light, #fff3e0);color:var(--sefin-color-warning-dark, #e65100);border:1px solid var(--sefin-color-warning, #ff9800)}.sefin-tag--error{background-color:var(--sefin-color-error-light, #ffebee);color:var(--sefin-color-error-dark, #c62828);border:1px solid var(--sefin-color-error, #f44336)}.sefin-tag--info{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-text, #1a1a1a);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tag__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-tag__icon{flex-shrink:0;display:inline-flex;align-items:center}.sefin-tag__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);width:16px;height:16px;flex-shrink:0}.sefin-tag__remove:hover{opacity:1;background-color:#0000001a}.sefin-tag__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-tag__remove svg{display:block;width:12px;height:12px}.sefin-tag ::ng-deep svg,.sefin-tag ::ng-deep sefin-icon{flex-shrink:0}.sefin-tag--sm ::ng-deep svg{width:10px;height:10px}.sefin-tag--md ::ng-deep svg{width:12px;height:12px}.sefin-tag--lg ::ng-deep svg{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1199
- }
1200
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TagComponent, decorators: [{
1201
- type: Component,
1202
- args: [{ selector: 'sefin-tag', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [class]=\"tagClasses\"\n [attr.aria-disabled]=\"disabled\"\n role=\"status\"\n>\n <span class=\"sefin-tag__content\">\n <sefin-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"iconSize\"\n class=\"sefin-tag__icon\"\n ></sefin-icon>\n <ng-content></ng-content>\n </span>\n <button\n *ngIf=\"removable && !disabled\"\n type=\"button\"\n class=\"sefin-tag__remove\"\n (click)=\"onRemove($event)\"\n aria-label=\"Remove tag\"\n tabindex=\"-1\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n</span>\n\n", styles: [".sefin-tag{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border-radius:var(--sefin-border-radius-sm, 4px);white-space:nowrap;vertical-align:middle;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sefin-tag--sm{padding:var(--sefin-spacing-xs, 2px) var(--sefin-spacing-sm, 6px);font-size:var(--sefin-font-size-xs, 10px);min-height:20px}.sefin-tag--md{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 12px);min-height:24px}.sefin-tag--lg{padding:var(--sefin-spacing-sm, 6px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-base, 14px);min-height:28px}.sefin-tag--default{background-color:var(--sefin-color-surface-hover, #f0f0f0);color:var(--sefin-color-text, #333);border:1px solid var(--sefin-color-border, #e0e0e0)}.sefin-tag--primary{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-primary-dark, #0d47a1);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--secondary{background-color:var(--sefin-color-secondary-light, #fce4ec);color:var(--sefin-color-secondary-dark, #880e4f);border:1px solid var(--sefin-color-secondary, #dc004e)}.sefin-tag--success{background-color:var(--sefin-color-success-light, #e8f5e9);color:var(--sefin-color-success-dark, #2e7d32);border:1px solid var(--sefin-color-success, #4caf50)}.sefin-tag--warning{background-color:var(--sefin-color-warning-light, #fff3e0);color:var(--sefin-color-warning-dark, #e65100);border:1px solid var(--sefin-color-warning, #ff9800)}.sefin-tag--error{background-color:var(--sefin-color-error-light, #ffebee);color:var(--sefin-color-error-dark, #c62828);border:1px solid var(--sefin-color-error, #f44336)}.sefin-tag--info{background-color:var(--sefin-color-primary-light, #e3f2fd);color:var(--sefin-color-text, #1a1a1a);border:1px solid var(--sefin-color-primary, #1976d2)}.sefin-tag--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-tag__content{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-tag__icon{flex-shrink:0;display:inline-flex;align-items:center}.sefin-tag__remove{display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:var(--sefin-spacing-xs, 4px);background:none;border:none;cursor:pointer;outline:none;color:currentColor;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);width:16px;height:16px;flex-shrink:0}.sefin-tag__remove:hover{opacity:1;background-color:#0000001a}.sefin-tag__remove:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-tag__remove svg{display:block;width:12px;height:12px}.sefin-tag ::ng-deep svg,.sefin-tag ::ng-deep sefin-icon{flex-shrink:0}.sefin-tag--sm ::ng-deep svg{width:10px;height:10px}.sefin-tag--md ::ng-deep svg{width:12px;height:12px}.sefin-tag--lg ::ng-deep svg{width:14px;height:14px}\n"] }]
1203
- }], propDecorators: { variant: [{
1204
- type: Input
1205
- }], size: [{
1206
- type: Input
1207
- }], icon: [{
1208
- type: Input
1209
- }], removable: [{
1210
- type: Input
1211
- }], disabled: [{
1212
- type: Input
1213
- }], class: [{
1214
- type: Input
1215
- }], removed: [{
1216
- type: Output
1217
- }] } });
1218
-
1219
- class LinkComponent {
1220
- /** Link variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
1221
- variant = 'default';
1222
- /** Link size. Options: 'sm' | 'md' | 'lg' */
1223
- size = 'md';
1224
- /** Whether the link is disabled */
1225
- disabled = false;
1226
- /** Link URL */
1227
- href;
1228
- /** Link target attribute (e.g., '_blank') */
1229
- target;
1230
- /** Link rel attribute */
1231
- rel;
1232
- /** Additional CSS classes */
1233
- class = '';
1234
- /** Whether to show underline */
1235
- underline = false;
1236
- get linkClasses() {
1237
- return [
1238
- 'sefin-link',
1239
- `sefin-link--${this.variant}`,
1240
- `sefin-link--${this.size}`,
1241
- this.disabled ? 'sefin-link--disabled' : '',
1242
- this.underline ? 'sefin-link--underline' : '',
1243
- this.class,
1244
- ]
1245
- .filter(Boolean)
1246
- .join(' ');
1247
- }
1248
- onClick(event) {
1249
- if (this.disabled) {
1250
- event.preventDefault();
1251
- event.stopPropagation();
1252
- }
1253
- }
1254
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1255
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LinkComponent, isStandalone: true, selector: "sefin-link", inputs: { variant: "variant", size: "size", disabled: "disabled", href: "href", target: "target", rel: "rel", class: "class", underline: "underline" }, ngImport: i0, template: "<a\n [class]=\"linkClasses\"\n [href]=\"disabled ? null : (href || '#')\"\n [attr.target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ng-content></ng-content>\n</a>\n\n", styles: [".sefin-link{display:inline-flex;align-items:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;outline:none}.sefin-link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:2px}.sefin-link--sm{font-size:var(--sefin-font-size-sm)}.sefin-link--md{font-size:var(--sefin-font-size-base)}.sefin-link--lg{font-size:var(--sefin-font-size-lg)}.sefin-link--default{color:var(--sefin-color-text);text-decoration:none}.sefin-link--default:hover:not(.sefin-link--default--disabled){color:var(--sefin-color-primary)}.sefin-link--primary{color:var(--sefin-color-primary);text-decoration:none}.sefin-link--primary:hover:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--primary:active:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--secondary{color:var(--sefin-color-text-secondary);text-decoration:none}.sefin-link--secondary:hover:not(.sefin-link--secondary--disabled){color:var(--sefin-color-primary)}.sefin-link--underline{color:var(--sefin-color-primary);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline:hover:not(.sefin-link--underline--disabled){color:var(--sefin-color-primary-dark);text-decoration-thickness:2px}.sefin-link--underline.sefin-link--default{color:var(--sefin-color-text);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline.sefin-link--default:hover:not(.sefin-link--underline.sefin-link--default--disabled){color:var(--sefin-color-primary);text-decoration-thickness:2px}.sefin-link--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled)}.sefin-link--disabled:hover{color:var(--sefin-color-text-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.Default });
1256
- }
1257
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LinkComponent, decorators: [{
1258
- type: Component,
1259
- args: [{ selector: 'sefin-link', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<a\n [class]=\"linkClasses\"\n [href]=\"disabled ? null : (href || '#')\"\n [attr.target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? true : null\"\n (click)=\"onClick($event)\"\n>\n <ng-content></ng-content>\n</a>\n\n", styles: [".sefin-link{display:inline-flex;align-items:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);text-decoration:none;transition:all .2s ease-in-out;cursor:pointer;outline:none}.sefin-link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:2px}.sefin-link--sm{font-size:var(--sefin-font-size-sm)}.sefin-link--md{font-size:var(--sefin-font-size-base)}.sefin-link--lg{font-size:var(--sefin-font-size-lg)}.sefin-link--default{color:var(--sefin-color-text);text-decoration:none}.sefin-link--default:hover:not(.sefin-link--default--disabled){color:var(--sefin-color-primary)}.sefin-link--primary{color:var(--sefin-color-primary);text-decoration:none}.sefin-link--primary:hover:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--primary:active:not(.sefin-link--primary--disabled){color:var(--sefin-color-primary-dark)}.sefin-link--secondary{color:var(--sefin-color-text-secondary);text-decoration:none}.sefin-link--secondary:hover:not(.sefin-link--secondary--disabled){color:var(--sefin-color-primary)}.sefin-link--underline{color:var(--sefin-color-primary);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline:hover:not(.sefin-link--underline--disabled){color:var(--sefin-color-primary-dark);text-decoration-thickness:2px}.sefin-link--underline.sefin-link--default{color:var(--sefin-color-text);text-decoration:underline;text-underline-offset:2px}.sefin-link--underline.sefin-link--default:hover:not(.sefin-link--underline.sefin-link--default--disabled){color:var(--sefin-color-primary);text-decoration-thickness:2px}.sefin-link--disabled{opacity:.6;cursor:not-allowed;pointer-events:none;color:var(--sefin-color-text-disabled)}.sefin-link--disabled:hover{color:var(--sefin-color-text-disabled)}\n"] }]
1260
- }], propDecorators: { variant: [{
1261
- type: Input
1262
- }], size: [{
1263
- type: Input
1264
- }], disabled: [{
1265
- type: Input
1266
- }], href: [{
1267
- type: Input
1268
- }], target: [{
1269
- type: Input
1270
- }], rel: [{
1271
- type: Input
1272
- }], class: [{
1273
- type: Input
1274
- }], underline: [{
1275
- type: Input
1276
- }] } });
1277
-
1278
- class StackComponent {
1279
- direction = 'column';
1280
- spacing = 'md';
1281
- align = 'stretch';
1282
- justify = 'start';
1283
- wrap = false;
1284
- class = '';
1285
- get stackClasses() {
1286
- return [
1287
- 'sefin-stack',
1288
- `sefin-stack--${this.direction}`,
1289
- `sefin-stack--spacing-${this.spacing}`,
1290
- `sefin-stack--align-${this.align}`,
1291
- `sefin-stack--justify-${this.justify}`,
1292
- this.wrap ? 'sefin-stack--wrap' : '',
1293
- this.class,
1294
- ]
1295
- .filter(Boolean)
1296
- .join(' ');
1297
- }
1298
- get spacingValue() {
1299
- const spacingMap = {
1300
- 'xs': '4px',
1301
- 'sm': '8px',
1302
- 'md': '16px',
1303
- 'lg': '24px',
1304
- 'xl': '32px',
1305
- '2xl': '48px',
1306
- };
1307
- return spacingMap[this.spacing] || spacingMap['md'];
1308
- }
1309
- get stackStyles() {
1310
- return {
1311
- gap: this.spacingValue,
1312
- };
1313
- }
1314
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1315
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: StackComponent, isStandalone: true, selector: "sefin-stack", inputs: { direction: "direction", spacing: "spacing", align: "align", justify: "justify", wrap: "wrap", class: "class" }, ngImport: i0, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:var(--sefin-spacing-md, 16px)}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
1316
- }
1317
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: StackComponent, decorators: [{
1318
- type: Component,
1319
- args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:var(--sefin-spacing-md, 16px)}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"] }]
1320
- }], propDecorators: { direction: [{
1321
- type: Input
1322
- }], spacing: [{
1323
- type: Input
1324
- }], align: [{
1325
- type: Input
1326
- }], justify: [{
1327
- type: Input
1328
- }], wrap: [{
1329
- type: Input
1330
- }], class: [{
1331
- type: Input
1332
- }] } });
1333
-
1334
- class ContainerComponent {
1335
- /** Container size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */
1336
- size = 'md';
1337
- /** Container variant. Options: 'default' | 'fluid' | 'fixed' */
1338
- variant = 'default';
1339
- /** Whether the container has padding */
1340
- padding = true;
1341
- /** Additional CSS classes */
1342
- class = '';
1343
- get containerClasses() {
1344
- return [
1345
- 'sefin-container',
1346
- `sefin-container--${this.size}`,
1347
- `sefin-container--${this.variant}`,
1348
- this.padding ? 'sefin-container--padded' : '',
1349
- this.class,
1350
- ]
1351
- .filter(Boolean)
1352
- .join(' ');
1353
- }
1354
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1355
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ContainerComponent, isStandalone: true, selector: "sefin-container", inputs: { size: "size", variant: "variant", padding: "padding", class: "class" }, ngImport: i0, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1356
- }
1357
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContainerComponent, decorators: [{
1358
- type: Component,
1359
- args: [{ selector: 'sefin-container', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"containerClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"] }]
1360
- }], propDecorators: { size: [{
1361
- type: Input
1362
- }], variant: [{
1363
- type: Input
1364
- }], padding: [{
1365
- type: Input
1366
- }], class: [{
1367
- type: Input
1368
- }] } });
1369
-
1370
- class CheckboxComponent {
1371
- checkboxInput;
1372
- size = 'md';
1373
- disabled = false;
1374
- indeterminate = false;
1375
- class = '';
1376
- label = '';
1377
- name = '';
1378
- value = false;
1379
- valueChange = new EventEmitter();
1380
- checkedChange = new EventEmitter();
1381
- onChange = (value) => { };
1382
- onTouched = () => { };
1383
- ngAfterViewInit() {
1384
- if (this.checkboxInput?.nativeElement && this.indeterminate && !this.value) {
1385
- this.checkboxInput.nativeElement.indeterminate = true;
1386
- }
1387
- }
1388
- ngOnChanges(changes) {
1389
- if (this.checkboxInput?.nativeElement && (changes['indeterminate'] || changes['value'])) {
1390
- this.checkboxInput.nativeElement.indeterminate = this.indeterminate && !this.value;
1391
- }
1392
- }
1393
- onCheckboxChange(event) {
1394
- if (this.disabled) {
1395
- return;
1396
- }
1397
- const target = event.target;
1398
- this.value = target.checked;
1399
- this.indeterminate = false;
1400
- if (this.checkboxInput?.nativeElement) {
1401
- this.checkboxInput.nativeElement.indeterminate = false;
1402
- }
1403
- this.onChange(this.value);
1404
- this.onTouched();
1405
- this.valueChange.emit(this.value);
1406
- this.checkedChange.emit(this.value);
1407
- }
1408
- writeValue(value) {
1409
- this.value = value;
1410
- if (value) {
1411
- this.indeterminate = false;
1412
- if (this.checkboxInput?.nativeElement) {
1413
- this.checkboxInput.nativeElement.indeterminate = false;
1414
- }
1415
- }
1416
- }
1417
- registerOnChange(fn) {
1418
- this.onChange = fn;
1419
- }
1420
- registerOnTouched(fn) {
1421
- this.onTouched = fn;
1422
- }
1423
- setDisabledState(isDisabled) {
1424
- this.disabled = isDisabled;
1425
- }
1426
- get wrapperClasses() {
1427
- return [
1428
- 'sefin-checkbox__wrapper',
1429
- this.disabled ? 'sefin-checkbox__wrapper--disabled' : '',
1430
- this.class,
1431
- ]
1432
- .filter(Boolean)
1433
- .join(' ');
1434
- }
1435
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1436
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CheckboxComponent, isStandalone: true, selector: "sefin-checkbox", inputs: { size: "size", disabled: "disabled", indeterminate: "indeterminate", class: "class", label: "label", name: "name", value: "value" }, outputs: { valueChange: "valueChange", checkedChange: "checkedChange" }, providers: [
1437
- {
1438
- provide: NG_VALUE_ACCESSOR,
1439
- useExisting: forwardRef(() => CheckboxComponent),
1440
- multi: true,
1441
- },
1442
- ], viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"checkbox\"\n class=\"sefin-checkbox\"\n [class.sefin-checkbox--sm]=\"size === 'sm'\"\n [class.sefin-checkbox--md]=\"size === 'md'\"\n [class.sefin-checkbox--lg]=\"size === 'lg'\"\n [class.sefin-checkbox--disabled]=\"disabled\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (change)=\"onCheckboxChange($event)\"\n #checkboxInput\n />\n <span \n class=\"sefin-checkbox__checkmark\" \n [class.sefin-checkbox__checkmark--sm]=\"size === 'sm'\" \n [class.sefin-checkbox__checkmark--md]=\"size === 'md'\" \n [class.sefin-checkbox__checkmark--lg]=\"size === 'lg'\" \n [class.sefin-checkbox__checkmark--checked]=\"value\" \n [class.sefin-checkbox__checkmark--indeterminate]=\"indeterminate && !value\"\n >\n <svg\n *ngIf=\"value\"\n class=\"sefin-checkbox__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.3333 4L6 11.3333L2.66667 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"indeterminate && !value\"\n class=\"sefin-checkbox__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 8H12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n <span *ngIf=\"label\" class=\"sefin-checkbox__label\" [class.sefin-checkbox__label--sm]=\"size === 'sm'\" [class.sefin-checkbox__label--md]=\"size === 'md'\" [class.sefin-checkbox__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n\n", styles: [".sefin-checkbox__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-checkbox__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-checkbox{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-checkbox__checkmark{display:flex;align-items:center;justify-content:center;border:2px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);border-radius:var(--sefin-radius-sm);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out;flex-shrink:0;color:transparent;box-sizing:border-box}.sefin-checkbox__checkmark--checked,.sefin-checkbox__checkmark--indeterminate{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff}.sefin-checkbox__checkmark--sm{width:16px;height:16px;min-width:16px;min-height:16px}.sefin-checkbox__checkmark--md{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-checkbox__checkmark--lg{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-checkbox__wrapper:hover .sefin-checkbox__checkmark{border-color:var(--sefin-color-border-focus)}.sefin-checkbox__wrapper--disabled:hover .sefin-checkbox__checkmark{border-color:var(--sefin-color-border)}.sefin-checkbox__wrapper:focus-within .sefin-checkbox__checkmark{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-checkbox__wrapper:focus-within{outline:none}.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark{background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border);cursor:not-allowed}.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark--checked,.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark--indeterminate{background-color:var(--sefin-color-border);border-color:var(--sefin-color-border);opacity:.6}.sefin-checkbox__icon{width:12px;height:12px;stroke-width:2;flex-shrink:0}.sefin-checkbox__checkmark--sm .sefin-checkbox__icon{width:10px;height:10px}.sefin-checkbox__checkmark--md .sefin-checkbox__icon{width:12px;height:12px}.sefin-checkbox__checkmark--lg .sefin-checkbox__icon{width:14px;height:14px}.sefin-checkbox__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-checkbox__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-checkbox__label--md{font-size:var(--sefin-font-size-base)}.sefin-checkbox__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-checkbox__wrapper--disabled .sefin-checkbox__label{color:var(--sefin-color-text-disabled)}.sefin-checkbox--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
1443
- }
1444
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CheckboxComponent, decorators: [{
1445
- type: Component,
1446
- args: [{ selector: 'sefin-checkbox', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, providers: [
1447
- {
1448
- provide: NG_VALUE_ACCESSOR,
1449
- useExisting: forwardRef(() => CheckboxComponent),
1450
- multi: true,
1451
- },
1452
- ], template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"checkbox\"\n class=\"sefin-checkbox\"\n [class.sefin-checkbox--sm]=\"size === 'sm'\"\n [class.sefin-checkbox--md]=\"size === 'md'\"\n [class.sefin-checkbox--lg]=\"size === 'lg'\"\n [class.sefin-checkbox--disabled]=\"disabled\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (change)=\"onCheckboxChange($event)\"\n #checkboxInput\n />\n <span \n class=\"sefin-checkbox__checkmark\" \n [class.sefin-checkbox__checkmark--sm]=\"size === 'sm'\" \n [class.sefin-checkbox__checkmark--md]=\"size === 'md'\" \n [class.sefin-checkbox__checkmark--lg]=\"size === 'lg'\" \n [class.sefin-checkbox__checkmark--checked]=\"value\" \n [class.sefin-checkbox__checkmark--indeterminate]=\"indeterminate && !value\"\n >\n <svg\n *ngIf=\"value\"\n class=\"sefin-checkbox__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.3333 4L6 11.3333L2.66667 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n <svg\n *ngIf=\"indeterminate && !value\"\n class=\"sefin-checkbox__icon\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 8H12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>\n </span>\n <span *ngIf=\"label\" class=\"sefin-checkbox__label\" [class.sefin-checkbox__label--sm]=\"size === 'sm'\" [class.sefin-checkbox__label--md]=\"size === 'md'\" [class.sefin-checkbox__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n\n", styles: [".sefin-checkbox__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-checkbox__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-checkbox{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-checkbox__checkmark{display:flex;align-items:center;justify-content:center;border:2px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);border-radius:var(--sefin-radius-sm);transition:background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out;flex-shrink:0;color:transparent;box-sizing:border-box}.sefin-checkbox__checkmark--checked,.sefin-checkbox__checkmark--indeterminate{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff}.sefin-checkbox__checkmark--sm{width:16px;height:16px;min-width:16px;min-height:16px}.sefin-checkbox__checkmark--md{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-checkbox__checkmark--lg{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-checkbox__wrapper:hover .sefin-checkbox__checkmark{border-color:var(--sefin-color-border-focus)}.sefin-checkbox__wrapper--disabled:hover .sefin-checkbox__checkmark{border-color:var(--sefin-color-border)}.sefin-checkbox__wrapper:focus-within .sefin-checkbox__checkmark{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-checkbox__wrapper:focus-within{outline:none}.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark{background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border);cursor:not-allowed}.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark--checked,.sefin-checkbox__wrapper--disabled .sefin-checkbox__checkmark--indeterminate{background-color:var(--sefin-color-border);border-color:var(--sefin-color-border);opacity:.6}.sefin-checkbox__icon{width:12px;height:12px;stroke-width:2;flex-shrink:0}.sefin-checkbox__checkmark--sm .sefin-checkbox__icon{width:10px;height:10px}.sefin-checkbox__checkmark--md .sefin-checkbox__icon{width:12px;height:12px}.sefin-checkbox__checkmark--lg .sefin-checkbox__icon{width:14px;height:14px}.sefin-checkbox__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-checkbox__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-checkbox__label--md{font-size:var(--sefin-font-size-base)}.sefin-checkbox__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-checkbox__wrapper--disabled .sefin-checkbox__label{color:var(--sefin-color-text-disabled)}.sefin-checkbox--disabled{cursor:not-allowed}\n"] }]
1453
- }], propDecorators: { checkboxInput: [{
1454
- type: ViewChild,
1455
- args: ['checkboxInput', { static: false }]
1456
- }], size: [{
1457
- type: Input
1458
- }], disabled: [{
1459
- type: Input
1460
- }], indeterminate: [{
1461
- type: Input
1462
- }], class: [{
1463
- type: Input
1464
- }], label: [{
1465
- type: Input
1466
- }], name: [{
1467
- type: Input
1468
- }], value: [{
1469
- type: Input
1470
- }], valueChange: [{
1471
- type: Output
1472
- }], checkedChange: [{
1473
- type: Output
1474
- }] } });
1475
-
1476
- class RadioComponent {
1477
- radioInput;
1478
- size = 'md';
1479
- disabled = false;
1480
- class = '';
1481
- label = '';
1482
- name = '';
1483
- value = '';
1484
- checked = false;
1485
- valueChange = new EventEmitter();
1486
- checkedChange = new EventEmitter();
1487
- onChange = (value) => { };
1488
- onTouched = () => { };
1489
- onRadioChange(event) {
1490
- if (this.disabled) {
1491
- return;
1492
- }
1493
- const target = event.target;
1494
- this.checked = target.checked;
1495
- this.onChange(this.value);
1496
- this.onTouched();
1497
- this.valueChange.emit(this.value);
1498
- this.checkedChange.emit(this.checked);
1499
- }
1500
- writeValue(value) {
1501
- // For radio buttons, the value is managed by the form control
1502
- // The checked state is determined by comparing the value
1503
- if (value === this.value) {
1504
- this.checked = true;
1505
- }
1506
- else {
1507
- this.checked = false;
1508
- }
1509
- }
1510
- registerOnChange(fn) {
1511
- this.onChange = fn;
1512
- }
1513
- registerOnTouched(fn) {
1514
- this.onTouched = fn;
1515
- }
1516
- setDisabledState(isDisabled) {
1517
- this.disabled = isDisabled;
1518
- }
1519
- get wrapperClasses() {
1520
- return [
1521
- 'sefin-radio__wrapper',
1522
- this.disabled ? 'sefin-radio__wrapper--disabled' : '',
1523
- this.class,
1524
- ]
1525
- .filter(Boolean)
1526
- .join(' ');
1527
- }
1528
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1529
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: RadioComponent, isStandalone: true, selector: "sefin-radio", inputs: { size: "size", disabled: "disabled", class: "class", label: "label", name: "name", value: "value", checked: "checked" }, outputs: { valueChange: "valueChange", checkedChange: "checkedChange" }, providers: [
1530
- {
1531
- provide: NG_VALUE_ACCESSOR,
1532
- useExisting: forwardRef(() => RadioComponent),
1533
- multi: true,
1534
- },
1535
- ], viewQueries: [{ propertyName: "radioInput", first: true, predicate: ["radioInput"], descendants: true }], ngImport: i0, template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"radio\"\n class=\"sefin-radio\"\n [class.sefin-radio--sm]=\"size === 'sm'\"\n [class.sefin-radio--md]=\"size === 'md'\"\n [class.sefin-radio--lg]=\"size === 'lg'\"\n [class.sefin-radio--disabled]=\"disabled\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n (change)=\"onRadioChange($event)\"\n #radioInput\n />\n <span \n class=\"sefin-radio__circle\" \n [class.sefin-radio__circle--sm]=\"size === 'sm'\" \n [class.sefin-radio__circle--md]=\"size === 'md'\" \n [class.sefin-radio__circle--lg]=\"size === 'lg'\" \n [class.sefin-radio__circle--checked]=\"checked\"\n >\n <span *ngIf=\"checked\" class=\"sefin-radio__dot\"></span>\n </span>\n <span *ngIf=\"label\" class=\"sefin-radio__label\" [class.sefin-radio__label--sm]=\"size === 'sm'\" [class.sefin-radio__label--md]=\"size === 'md'\" [class.sefin-radio__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n", styles: [".sefin-radio__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-radio__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-radio{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-radio__circle{display:flex;align-items:center;justify-content:center;border:2px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);border-radius:50%;transition:background-color .2s ease-in-out,border-color .2s ease-in-out;flex-shrink:0;box-sizing:border-box}.sefin-radio__circle--checked{border-color:var(--sefin-color-primary)}.sefin-radio__circle--sm{width:16px;height:16px;min-width:16px;min-height:16px}.sefin-radio__circle--md{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-radio__circle--lg{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-radio__dot{width:8px;height:8px;border-radius:50%;background-color:var(--sefin-color-primary);transition:transform .2s ease-in-out;transform:scale(0);animation:radio-dot-appear .2s ease-in-out forwards}.sefin-radio__circle--sm .sefin-radio__dot{width:6px;height:6px}.sefin-radio__circle--md .sefin-radio__dot{width:8px;height:8px}.sefin-radio__circle--lg .sefin-radio__dot{width:10px;height:10px}.sefin-radio__wrapper:hover .sefin-radio__circle{border-color:var(--sefin-color-border-focus)}.sefin-radio__wrapper--disabled:hover .sefin-radio__circle{border-color:var(--sefin-color-border)}.sefin-radio__wrapper:focus-within .sefin-radio__circle{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-radio__wrapper:focus-within{outline:none}.sefin-radio__wrapper--disabled .sefin-radio__circle{background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border);cursor:not-allowed}.sefin-radio__wrapper--disabled .sefin-radio__circle--checked{border-color:var(--sefin-color-border);opacity:.6}.sefin-radio__wrapper--disabled .sefin-radio__dot{background-color:var(--sefin-color-text-disabled)}.sefin-radio__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-radio__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-radio__label--md{font-size:var(--sefin-font-size-base)}.sefin-radio__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-radio__wrapper--disabled .sefin-radio__label{color:var(--sefin-color-text-disabled)}.sefin-radio--disabled{cursor:not-allowed}@keyframes radio-dot-appear{0%{transform:scale(0)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
1536
- }
1537
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RadioComponent, decorators: [{
1538
- type: Component,
1539
- args: [{ selector: 'sefin-radio', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, providers: [
1540
- {
1541
- provide: NG_VALUE_ACCESSOR,
1542
- useExisting: forwardRef(() => RadioComponent),
1543
- multi: true,
1544
- },
1545
- ], template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"radio\"\n class=\"sefin-radio\"\n [class.sefin-radio--sm]=\"size === 'sm'\"\n [class.sefin-radio--md]=\"size === 'md'\"\n [class.sefin-radio--lg]=\"size === 'lg'\"\n [class.sefin-radio--disabled]=\"disabled\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n (change)=\"onRadioChange($event)\"\n #radioInput\n />\n <span \n class=\"sefin-radio__circle\" \n [class.sefin-radio__circle--sm]=\"size === 'sm'\" \n [class.sefin-radio__circle--md]=\"size === 'md'\" \n [class.sefin-radio__circle--lg]=\"size === 'lg'\" \n [class.sefin-radio__circle--checked]=\"checked\"\n >\n <span *ngIf=\"checked\" class=\"sefin-radio__dot\"></span>\n </span>\n <span *ngIf=\"label\" class=\"sefin-radio__label\" [class.sefin-radio__label--sm]=\"size === 'sm'\" [class.sefin-radio__label--md]=\"size === 'md'\" [class.sefin-radio__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n", styles: [".sefin-radio__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-radio__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-radio{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-radio__circle{display:flex;align-items:center;justify-content:center;border:2px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);border-radius:50%;transition:background-color .2s ease-in-out,border-color .2s ease-in-out;flex-shrink:0;box-sizing:border-box}.sefin-radio__circle--checked{border-color:var(--sefin-color-primary)}.sefin-radio__circle--sm{width:16px;height:16px;min-width:16px;min-height:16px}.sefin-radio__circle--md{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-radio__circle--lg{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-radio__dot{width:8px;height:8px;border-radius:50%;background-color:var(--sefin-color-primary);transition:transform .2s ease-in-out;transform:scale(0);animation:radio-dot-appear .2s ease-in-out forwards}.sefin-radio__circle--sm .sefin-radio__dot{width:6px;height:6px}.sefin-radio__circle--md .sefin-radio__dot{width:8px;height:8px}.sefin-radio__circle--lg .sefin-radio__dot{width:10px;height:10px}.sefin-radio__wrapper:hover .sefin-radio__circle{border-color:var(--sefin-color-border-focus)}.sefin-radio__wrapper--disabled:hover .sefin-radio__circle{border-color:var(--sefin-color-border)}.sefin-radio__wrapper:focus-within .sefin-radio__circle{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-radio__wrapper:focus-within{outline:none}.sefin-radio__wrapper--disabled .sefin-radio__circle{background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border);cursor:not-allowed}.sefin-radio__wrapper--disabled .sefin-radio__circle--checked{border-color:var(--sefin-color-border);opacity:.6}.sefin-radio__wrapper--disabled .sefin-radio__dot{background-color:var(--sefin-color-text-disabled)}.sefin-radio__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-radio__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-radio__label--md{font-size:var(--sefin-font-size-base)}.sefin-radio__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-radio__wrapper--disabled .sefin-radio__label{color:var(--sefin-color-text-disabled)}.sefin-radio--disabled{cursor:not-allowed}@keyframes radio-dot-appear{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
1546
- }], propDecorators: { radioInput: [{
1547
- type: ViewChild,
1548
- args: ['radioInput', { static: false }]
1549
- }], size: [{
1550
- type: Input
1551
- }], disabled: [{
1552
- type: Input
1553
- }], class: [{
1554
- type: Input
1555
- }], label: [{
1556
- type: Input
1557
- }], name: [{
1558
- type: Input
1559
- }], value: [{
1560
- type: Input
1561
- }], checked: [{
1562
- type: Input
1563
- }], valueChange: [{
1564
- type: Output
1565
- }], checkedChange: [{
1566
- type: Output
1567
- }] } });
1568
-
1569
- class SelectComponent {
1570
- containerRef;
1571
- dropdownRef;
1572
- buttonRef;
1573
- options = [];
1574
- placeholder = 'Seleccionar...';
1575
- disabled = false;
1576
- size = 'md';
1577
- class = '';
1578
- value = null;
1579
- valueChange = new EventEmitter();
1580
- optionSelected = new EventEmitter();
1581
- isOpen = false;
1582
- selectedIndex = -1;
1583
- onChange = (value) => { };
1584
- onTouched = () => { };
1585
- ngOnInit() {
1586
- this.updateSelectedIndex();
1587
- }
1588
- ngOnChanges(changes) {
1589
- if (changes['value'] || changes['options']) {
1590
- this.updateSelectedIndex();
1591
- }
1592
- }
1593
- ngOnDestroy() { }
1594
- onClickOutside(event) {
1595
- if (this.containerRef?.nativeElement && this.isOpen) {
1596
- const clickedInside = this.containerRef.nativeElement.contains(event.target);
1597
- if (!clickedInside) {
1598
- this.closeDropdown();
1599
- }
1600
- }
1601
- }
1602
- onEscapeKey(event) {
1603
- const keyboardEvent = event;
1604
- if (this.isOpen) {
1605
- keyboardEvent.preventDefault();
1606
- this.closeDropdown();
1607
- this.buttonRef?.nativeElement?.focus();
1608
- }
1609
- }
1610
- toggleDropdown() {
1611
- if (this.disabled)
1612
- return;
1613
- if (this.isOpen) {
1614
- this.closeDropdown();
1615
- }
1616
- else {
1617
- this.openDropdown();
1618
- }
1619
- }
1620
- openDropdown() {
1621
- if (this.disabled || !this.options || this.options.length === 0)
1622
- return;
1623
- this.isOpen = true;
1624
- this.updateSelectedIndex();
1625
- // If no selection, focus first enabled option
1626
- if (this.selectedIndex < 0) {
1627
- const enabledOptions = this.options.filter((opt) => !opt.disabled);
1628
- if (enabledOptions.length > 0) {
1629
- this.selectedIndex = this.options.indexOf(enabledOptions[0]);
1630
- }
1631
- }
1632
- // Scroll to selected option when opening
1633
- setTimeout(() => {
1634
- this.scrollToSelected();
1635
- }, 0);
1636
- }
1637
- closeDropdown() {
1638
- this.isOpen = false;
1639
- this.selectedIndex = -1;
1640
- }
1641
- selectOption(option) {
1642
- if (option.disabled)
1643
- return;
1644
- this.value = option.value;
1645
- this.onChange(this.value);
1646
- this.onTouched();
1647
- this.valueChange.emit(this.value);
1648
- this.optionSelected.emit(option);
1649
- this.closeDropdown();
1650
- this.buttonRef?.nativeElement?.focus();
1651
- }
1652
- onKeyDown(event) {
1653
- if (this.disabled)
1654
- return;
1655
- if (!this.isOpen) {
1656
- if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
1657
- event.preventDefault();
1658
- this.openDropdown();
1659
- }
1660
- return;
1661
- }
1662
- if (!this.options || this.options.length === 0)
1663
- return;
1664
- const enabledOptions = this.options.filter((opt) => !opt.disabled);
1665
- switch (event.key) {
1666
- case 'ArrowDown':
1667
- event.preventDefault();
1668
- if (enabledOptions.length === 0)
1669
- return;
1670
- let nextIndex = this.selectedIndex + 1;
1671
- while (nextIndex < this.options.length && this.options[nextIndex].disabled) {
1672
- nextIndex++;
1673
- }
1674
- if (nextIndex < this.options.length) {
1675
- this.selectedIndex = nextIndex;
1676
- }
1677
- else {
1678
- // Wrap to first enabled option
1679
- this.selectedIndex = this.options.indexOf(enabledOptions[0]);
1680
- }
1681
- setTimeout(() => this.scrollToSelected(), 0);
1682
- break;
1683
- case 'ArrowUp':
1684
- event.preventDefault();
1685
- if (enabledOptions.length === 0)
1686
- return;
1687
- let prevIndex = this.selectedIndex - 1;
1688
- while (prevIndex >= 0 && this.options[prevIndex].disabled) {
1689
- prevIndex--;
1690
- }
1691
- if (prevIndex >= 0) {
1692
- this.selectedIndex = prevIndex;
1693
- }
1694
- else {
1695
- // Wrap to last enabled option
1696
- const lastOption = enabledOptions[enabledOptions.length - 1];
1697
- this.selectedIndex = this.options.indexOf(lastOption);
1698
- }
1699
- setTimeout(() => this.scrollToSelected(), 0);
1700
- break;
1701
- case 'Enter':
1702
- event.preventDefault();
1703
- if (this.selectedIndex >= 0 && this.selectedIndex < this.options.length) {
1704
- const option = this.options[this.selectedIndex];
1705
- if (!option.disabled) {
1706
- this.selectOption(option);
1707
- }
1708
- }
1709
- break;
1710
- case 'Escape':
1711
- event.preventDefault();
1712
- this.closeDropdown();
1713
- this.buttonRef?.nativeElement?.focus();
1714
- break;
1715
- case 'Home':
1716
- event.preventDefault();
1717
- if (enabledOptions.length > 0) {
1718
- this.selectedIndex = this.options.indexOf(enabledOptions[0]);
1719
- setTimeout(() => this.scrollToSelected(), 0);
1720
- }
1721
- break;
1722
- case 'End':
1723
- event.preventDefault();
1724
- if (enabledOptions.length > 0) {
1725
- const lastOption = enabledOptions[enabledOptions.length - 1];
1726
- this.selectedIndex = this.options.indexOf(lastOption);
1727
- setTimeout(() => this.scrollToSelected(), 0);
1728
- }
1729
- break;
1730
- }
1731
- }
1732
- updateSelectedIndex() {
1733
- if (this.value === null || !this.options) {
1734
- this.selectedIndex = -1;
1735
- return;
1736
- }
1737
- const index = this.options.findIndex((opt) => opt.value === this.value);
1738
- this.selectedIndex = index >= 0 ? index : -1;
1739
- }
1740
- scrollToSelected() {
1741
- try {
1742
- if (this.dropdownRef?.nativeElement &&
1743
- this.selectedIndex >= 0 &&
1744
- this.selectedIndex < this.options.length) {
1745
- const selectedElement = this.dropdownRef.nativeElement.querySelector(`[data-index="${this.selectedIndex}"]`);
1746
- if (selectedElement && selectedElement instanceof HTMLElement) {
1747
- selectedElement.scrollIntoView({
1748
- block: 'nearest',
1749
- behavior: 'smooth',
1750
- });
1751
- }
1752
- }
1753
- }
1754
- catch (error) {
1755
- console.warn('Could not scroll to selected option:', error);
1756
- }
1757
- }
1758
- getSelectedLabel() {
1759
- if (this.value === null || !this.options) {
1760
- return '';
1761
- }
1762
- const selectedOption = this.options.find((opt) => opt.value === this.value);
1763
- return selectedOption?.label || '';
1764
- }
1765
- writeValue(value) {
1766
- this.value = value;
1767
- this.updateSelectedIndex();
1768
- }
1769
- registerOnChange(fn) {
1770
- this.onChange = fn;
1771
- }
1772
- registerOnTouched(fn) {
1773
- this.onTouched = fn;
1774
- }
1775
- setDisabledState(isDisabled) {
1776
- this.disabled = isDisabled;
1777
- if (isDisabled && this.isOpen) {
1778
- this.closeDropdown();
1779
- }
1780
- }
1781
- get buttonClasses() {
1782
- return [
1783
- 'sefin-select__button',
1784
- `sefin-select__button--${this.size}`,
1785
- this.disabled ? 'sefin-select__button--disabled' : '',
1786
- this.isOpen ? 'sefin-select__button--open' : '',
1787
- this.class,
1788
- ]
1789
- .filter(Boolean)
1790
- .join(' ');
1791
- }
1792
- get containerClasses() {
1793
- return [
1794
- 'sefin-select',
1795
- this.isOpen ? 'sefin-select--open' : '',
1796
- ]
1797
- .filter(Boolean)
1798
- .join(' ');
1799
- }
1800
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1801
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SelectComponent, isStandalone: true, selector: "sefin-select", inputs: { options: "options", placeholder: "placeholder", disabled: "disabled", size: "size", class: "class", value: "value" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown.escape": "onEscapeKey($event)" } }, providers: [
1802
- {
1803
- provide: NG_VALUE_ACCESSOR,
1804
- useExisting: forwardRef(() => SelectComponent),
1805
- multi: true,
1806
- },
1807
- ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm)}.sefin-select__button:focus-visible{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button:hover:not(.sefin-select__button--disabled){border-color:var(--sefin-color-border-focus)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-select__button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:16px;height:16px}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
1808
- }
1809
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectComponent, decorators: [{
1810
- type: Component,
1811
- args: [{ selector: 'sefin-select', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, providers: [
1812
- {
1813
- provide: NG_VALUE_ACCESSOR,
1814
- useExisting: forwardRef(() => SelectComponent),
1815
- multi: true,
1816
- },
1817
- ], template: "<div [class]=\"containerClasses\" #containerRef>\n <button\n #buttonRef\n type=\"button\"\n [class]=\"buttonClasses\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-haspopup]=\"true\"\n aria-label=\"Select option\"\n >\n <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n {{ getSelectedLabel() || placeholder }}\n </span>\n <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </button>\n <div\n *ngIf=\"isOpen && options && options.length > 0\"\n #dropdownRef\n class=\"sefin-select__dropdown\"\n role=\"listbox\"\n >\n <ul class=\"sefin-select__list\">\n <li\n *ngFor=\"let option of options; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-select__option]=\"true\"\n [class.sefin-select__option--selected]=\"i === selectedIndex\"\n [class.sefin-select__option--disabled]=\"option.disabled\"\n [class.sefin-select__option--active]=\"option.value === value\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"option.value === value\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"isOpen && (!options || options.length === 0)\"\n class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n >\n <div class=\"sefin-select__no-options\">\n No hay opciones disponibles\n </div>\n </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm)}.sefin-select__button:focus-visible{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button:hover:not(.sefin-select__button--disabled){border-color:var(--sefin-color-border-focus)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-select__button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:16px;height:16px}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}\n"] }]
1818
- }], propDecorators: { containerRef: [{
1819
- type: ViewChild,
1820
- args: ['containerRef', { static: false }]
1821
- }], dropdownRef: [{
1822
- type: ViewChild,
1823
- args: ['dropdownRef', { static: false }]
1824
- }], buttonRef: [{
1825
- type: ViewChild,
1826
- args: ['buttonRef', { static: false }]
1827
- }], options: [{
1828
- type: Input
1829
- }], placeholder: [{
1830
- type: Input
1831
- }], disabled: [{
1832
- type: Input
1833
- }], size: [{
1834
- type: Input
1835
- }], class: [{
1836
- type: Input
1837
- }], value: [{
1838
- type: Input
1839
- }], valueChange: [{
1840
- type: Output
1841
- }], optionSelected: [{
1842
- type: Output
1843
- }], onClickOutside: [{
1844
- type: HostListener,
1845
- args: ['document:click', ['$event']]
1846
- }], onEscapeKey: [{
1847
- type: HostListener,
1848
- args: ['document:keydown.escape', ['$event']]
1849
- }] } });
1850
-
1851
- class SwitchComponent {
1852
- size = 'md';
1853
- disabled = false;
1854
- class = '';
1855
- label = '';
1856
- name = '';
1857
- value = false;
1858
- valueChange = new EventEmitter();
1859
- checkedChange = new EventEmitter();
1860
- onChange = (value) => { };
1861
- onTouched = () => { };
1862
- onSwitchChange(event) {
1863
- if (this.disabled) {
1864
- return;
1865
- }
1866
- const target = event.target;
1867
- this.value = target.checked;
1868
- this.onChange(this.value);
1869
- this.onTouched();
1870
- this.valueChange.emit(this.value);
1871
- this.checkedChange.emit(this.value);
1872
- }
1873
- writeValue(value) {
1874
- this.value = value;
1875
- }
1876
- registerOnChange(fn) {
1877
- this.onChange = fn;
1878
- }
1879
- registerOnTouched(fn) {
1880
- this.onTouched = fn;
1881
- }
1882
- setDisabledState(isDisabled) {
1883
- this.disabled = isDisabled;
1884
- }
1885
- get wrapperClasses() {
1886
- return [
1887
- 'sefin-switch__wrapper',
1888
- this.disabled ? 'sefin-switch__wrapper--disabled' : '',
1889
- this.class,
1890
- ]
1891
- .filter(Boolean)
1892
- .join(' ');
1893
- }
1894
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1895
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SwitchComponent, isStandalone: true, selector: "sefin-switch", inputs: { size: "size", disabled: "disabled", class: "class", label: "label", name: "name", value: "value" }, outputs: { valueChange: "valueChange", checkedChange: "checkedChange" }, providers: [
1896
- {
1897
- provide: NG_VALUE_ACCESSOR,
1898
- useExisting: forwardRef(() => SwitchComponent),
1899
- multi: true,
1900
- },
1901
- ], ngImport: i0, template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"checkbox\"\n class=\"sefin-switch\"\n [class.sefin-switch--sm]=\"size === 'sm'\"\n [class.sefin-switch--md]=\"size === 'md'\"\n [class.sefin-switch--lg]=\"size === 'lg'\"\n [class.sefin-switch--disabled]=\"disabled\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (change)=\"onSwitchChange($event)\"\n />\n <span \n class=\"sefin-switch__track\" \n [class.sefin-switch__track--sm]=\"size === 'sm'\" \n [class.sefin-switch__track--md]=\"size === 'md'\" \n [class.sefin-switch__track--lg]=\"size === 'lg'\" \n [class.sefin-switch__track--checked]=\"value\" \n >\n <span \n class=\"sefin-switch__thumb\"\n [class.sefin-switch__thumb--sm]=\"size === 'sm'\"\n [class.sefin-switch__thumb--md]=\"size === 'md'\"\n [class.sefin-switch__thumb--lg]=\"size === 'lg'\"\n ></span>\n </span>\n <span *ngIf=\"label\" class=\"sefin-switch__label\" [class.sefin-switch__label--sm]=\"size === 'sm'\" [class.sefin-switch__label--md]=\"size === 'md'\" [class.sefin-switch__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n", styles: [".sefin-switch__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-switch__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-switch{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-switch__track{position:relative;display:inline-block;background-color:var(--sefin-color-border);border-radius:9999px;transition:background-color .2s ease-in-out;flex-shrink:0;box-sizing:border-box}.sefin-switch__track--checked{background-color:var(--sefin-color-primary)}.sefin-switch__track--sm{width:32px;height:18px}.sefin-switch__track--md{width:40px;height:22px}.sefin-switch__track--lg{width:48px;height:26px}.sefin-switch__thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);background-color:#fff;border-radius:50%;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;box-shadow:0 2px 4px #0003;box-sizing:border-box}.sefin-switch__thumb--sm{width:14px;height:14px}.sefin-switch__thumb--md{width:18px;height:18px}.sefin-switch__thumb--lg{width:22px;height:22px}.sefin-switch__track--sm.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(14px)}.sefin-switch__track--md.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(18px)}.sefin-switch__track--lg.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(22px)}.sefin-switch__wrapper:hover .sefin-switch__track:not(.sefin-switch__track--checked){background-color:var(--sefin-color-border-focus)}.sefin-switch__wrapper--disabled:hover .sefin-switch__track{background-color:var(--sefin-color-border)}.sefin-switch__wrapper:focus-within .sefin-switch__track{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-switch__wrapper:focus-within{outline:none}.sefin-switch__wrapper--disabled .sefin-switch__track{background-color:var(--sefin-color-border);cursor:not-allowed}.sefin-switch__wrapper--disabled .sefin-switch__track--checked{background-color:var(--sefin-color-border);opacity:.6}.sefin-switch__wrapper--disabled .sefin-switch__thumb{box-shadow:0 1px 2px #0000001a}.sefin-switch__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-switch__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-switch__label--md{font-size:var(--sefin-font-size-base)}.sefin-switch__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-switch__wrapper--disabled .sefin-switch__label{color:var(--sefin-color-text-disabled)}.sefin-switch--disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
1902
- }
1903
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SwitchComponent, decorators: [{
1904
- type: Component,
1905
- args: [{ selector: 'sefin-switch', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, providers: [
1906
- {
1907
- provide: NG_VALUE_ACCESSOR,
1908
- useExisting: forwardRef(() => SwitchComponent),
1909
- multi: true,
1910
- },
1911
- ], template: "<label [class]=\"wrapperClasses\">\n <input\n type=\"checkbox\"\n class=\"sefin-switch\"\n [class.sefin-switch--sm]=\"size === 'sm'\"\n [class.sefin-switch--md]=\"size === 'md'\"\n [class.sefin-switch--lg]=\"size === 'lg'\"\n [class.sefin-switch--disabled]=\"disabled\"\n [checked]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n (change)=\"onSwitchChange($event)\"\n />\n <span \n class=\"sefin-switch__track\" \n [class.sefin-switch__track--sm]=\"size === 'sm'\" \n [class.sefin-switch__track--md]=\"size === 'md'\" \n [class.sefin-switch__track--lg]=\"size === 'lg'\" \n [class.sefin-switch__track--checked]=\"value\" \n >\n <span \n class=\"sefin-switch__thumb\"\n [class.sefin-switch__thumb--sm]=\"size === 'sm'\"\n [class.sefin-switch__thumb--md]=\"size === 'md'\"\n [class.sefin-switch__thumb--lg]=\"size === 'lg'\"\n ></span>\n </span>\n <span *ngIf=\"label\" class=\"sefin-switch__label\" [class.sefin-switch__label--sm]=\"size === 'sm'\" [class.sefin-switch__label--md]=\"size === 'md'\" [class.sefin-switch__label--lg]=\"size === 'lg'\">{{ label }}</span>\n</label>\n\n", styles: [".sefin-switch__wrapper{display:inline-flex;align-items:center;gap:var(--sefin-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.sefin-switch__wrapper--disabled{cursor:not-allowed;opacity:.6}.sefin-switch{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.sefin-switch__track{position:relative;display:inline-block;background-color:var(--sefin-color-border);border-radius:9999px;transition:background-color .2s ease-in-out;flex-shrink:0;box-sizing:border-box}.sefin-switch__track--checked{background-color:var(--sefin-color-primary)}.sefin-switch__track--sm{width:32px;height:18px}.sefin-switch__track--md{width:40px;height:22px}.sefin-switch__track--lg{width:48px;height:26px}.sefin-switch__thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);background-color:#fff;border-radius:50%;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;box-shadow:0 2px 4px #0003;box-sizing:border-box}.sefin-switch__thumb--sm{width:14px;height:14px}.sefin-switch__thumb--md{width:18px;height:18px}.sefin-switch__thumb--lg{width:22px;height:22px}.sefin-switch__track--sm.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(14px)}.sefin-switch__track--md.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(18px)}.sefin-switch__track--lg.sefin-switch__track--checked .sefin-switch__thumb{transform:translateY(-50%) translate(22px)}.sefin-switch__wrapper:hover .sefin-switch__track:not(.sefin-switch__track--checked){background-color:var(--sefin-color-border-focus)}.sefin-switch__wrapper--disabled:hover .sefin-switch__track{background-color:var(--sefin-color-border)}.sefin-switch__wrapper:focus-within .sefin-switch__track{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-switch__wrapper:focus-within{outline:none}.sefin-switch__wrapper--disabled .sefin-switch__track{background-color:var(--sefin-color-border);cursor:not-allowed}.sefin-switch__wrapper--disabled .sefin-switch__track--checked{background-color:var(--sefin-color-border);opacity:.6}.sefin-switch__wrapper--disabled .sefin-switch__thumb{box-shadow:0 1px 2px #0000001a}.sefin-switch__label{font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);-webkit-user-select:none;user-select:none}.sefin-switch__label--sm{font-size:var(--sefin-font-size-sm)}.sefin-switch__label--md{font-size:var(--sefin-font-size-base)}.sefin-switch__label--lg{font-size:var(--sefin-font-size-lg)}.sefin-switch__wrapper--disabled .sefin-switch__label{color:var(--sefin-color-text-disabled)}.sefin-switch--disabled{cursor:not-allowed}\n"] }]
1912
- }], propDecorators: { size: [{
1913
- type: Input
1914
- }], disabled: [{
1915
- type: Input
1916
- }], class: [{
1917
- type: Input
1918
- }], label: [{
1919
- type: Input
1920
- }], name: [{
1921
- type: Input
1922
- }], value: [{
1923
- type: Input
1924
- }], valueChange: [{
1925
- type: Output
1926
- }], checkedChange: [{
1927
- type: Output
1928
- }] } });
1929
-
1930
- class TypographyComponent {
1931
- variant = 'p';
1932
- size;
1933
- weight;
1934
- color = 'text';
1935
- lineHeight;
1936
- class = '';
1937
- text;
1938
- get typographyClasses() {
1939
- return [
1940
- 'sefin-typography',
1941
- `sefin-typography--${this.variant}`,
1942
- this.size ? `sefin-typography--${this.size}` : '',
1943
- this.weight ? `sefin-typography--${this.weight}` : '',
1944
- `sefin-typography--${this.color}`,
1945
- this.lineHeight ? `sefin-typography--line-height-${this.lineHeight}` : '',
1946
- this.class,
1947
- ]
1948
- .filter(Boolean)
1949
- .join(' ');
1950
- }
1951
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1952
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TypographyComponent, isStandalone: true, selector: "sefin-typography", inputs: { variant: "variant", size: "size", weight: "weight", color: "color", lineHeight: "lineHeight", class: "class", text: "text" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"variant\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h1>\n <h2 *ngSwitchCase=\"'h2'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h2>\n <h3 *ngSwitchCase=\"'h3'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h3>\n <h4 *ngSwitchCase=\"'h4'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h4>\n <h5 *ngSwitchCase=\"'h5'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h5>\n <h6 *ngSwitchCase=\"'h6'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h6>\n <p *ngSwitchCase=\"'p'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></p>\n <span *ngSwitchDefault [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></span>\n</ng-container>\n", styles: [".sefin-typography{font-family:var(--sefin-font-family-base);margin:0;padding:0}.sefin-typography--h1{font-size:var(--sefin-font-size-4xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h2{font-size:var(--sefin-font-size-3xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h3{font-size:var(--sefin-font-size-2xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h4{font-size:var(--sefin-font-size-xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h5{font-size:var(--sefin-font-size-lg);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h6{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--p,.sefin-typography--span{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal)}.sefin-typography--xs{font-size:var(--sefin-font-size-xs)}.sefin-typography--sm{font-size:var(--sefin-font-size-sm)}.sefin-typography--base{font-size:var(--sefin-font-size-base)}.sefin-typography--lg{font-size:var(--sefin-font-size-lg)}.sefin-typography--xl{font-size:var(--sefin-font-size-xl)}.sefin-typography--2xl{font-size:var(--sefin-font-size-2xl)}.sefin-typography--3xl{font-size:var(--sefin-font-size-3xl)}.sefin-typography--4xl{font-size:var(--sefin-font-size-4xl)}.sefin-typography--5xl{font-size:var(--sefin-font-size-5xl)}.sefin-typography--light{font-weight:var(--sefin-font-weight-light)}.sefin-typography--normal{font-weight:var(--sefin-font-weight-normal)}.sefin-typography--medium{font-weight:var(--sefin-font-weight-medium)}.sefin-typography--semibold{font-weight:var(--sefin-font-weight-semibold)}.sefin-typography--bold{font-weight:var(--sefin-font-weight-bold)}.sefin-typography--text{color:var(--sefin-color-text)}.sefin-typography--text-secondary{color:var(--sefin-color-text-secondary)}.sefin-typography--text-disabled{color:var(--sefin-color-text-disabled)}.sefin-typography--primary{color:var(--sefin-color-primary)}.sefin-typography--secondary{color:var(--sefin-color-secondary)}.sefin-typography--success{color:var(--sefin-color-success)}.sefin-typography--warning{color:var(--sefin-color-warning)}.sefin-typography--error{color:var(--sefin-color-error)}.sefin-typography--line-height-tight{line-height:var(--sefin-line-height-tight)}.sefin-typography--line-height-normal{line-height:var(--sefin-line-height-normal)}.sefin-typography--line-height-relaxed{line-height:var(--sefin-line-height-relaxed)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
1953
- }
1954
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypographyComponent, decorators: [{
1955
- type: Component,
1956
- args: [{ selector: 'sefin-typography', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<ng-container [ngSwitch]=\"variant\">\n <h1 *ngSwitchCase=\"'h1'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h1>\n <h2 *ngSwitchCase=\"'h2'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h2>\n <h3 *ngSwitchCase=\"'h3'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h3>\n <h4 *ngSwitchCase=\"'h4'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h4>\n <h5 *ngSwitchCase=\"'h5'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h5>\n <h6 *ngSwitchCase=\"'h6'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></h6>\n <p *ngSwitchCase=\"'p'\" [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></p>\n <span *ngSwitchDefault [class]=\"typographyClasses\">{{ text }}<ng-content></ng-content></span>\n</ng-container>\n", styles: [".sefin-typography{font-family:var(--sefin-font-family-base);margin:0;padding:0}.sefin-typography--h1{font-size:var(--sefin-font-size-4xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h2{font-size:var(--sefin-font-size-3xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h3{font-size:var(--sefin-font-size-2xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h4{font-size:var(--sefin-font-size-xl);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h5{font-size:var(--sefin-font-size-lg);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--h6{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-bold);line-height:var(--sefin-line-height-tight)}.sefin-typography--p,.sefin-typography--span{font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal)}.sefin-typography--xs{font-size:var(--sefin-font-size-xs)}.sefin-typography--sm{font-size:var(--sefin-font-size-sm)}.sefin-typography--base{font-size:var(--sefin-font-size-base)}.sefin-typography--lg{font-size:var(--sefin-font-size-lg)}.sefin-typography--xl{font-size:var(--sefin-font-size-xl)}.sefin-typography--2xl{font-size:var(--sefin-font-size-2xl)}.sefin-typography--3xl{font-size:var(--sefin-font-size-3xl)}.sefin-typography--4xl{font-size:var(--sefin-font-size-4xl)}.sefin-typography--5xl{font-size:var(--sefin-font-size-5xl)}.sefin-typography--light{font-weight:var(--sefin-font-weight-light)}.sefin-typography--normal{font-weight:var(--sefin-font-weight-normal)}.sefin-typography--medium{font-weight:var(--sefin-font-weight-medium)}.sefin-typography--semibold{font-weight:var(--sefin-font-weight-semibold)}.sefin-typography--bold{font-weight:var(--sefin-font-weight-bold)}.sefin-typography--text{color:var(--sefin-color-text)}.sefin-typography--text-secondary{color:var(--sefin-color-text-secondary)}.sefin-typography--text-disabled{color:var(--sefin-color-text-disabled)}.sefin-typography--primary{color:var(--sefin-color-primary)}.sefin-typography--secondary{color:var(--sefin-color-secondary)}.sefin-typography--success{color:var(--sefin-color-success)}.sefin-typography--warning{color:var(--sefin-color-warning)}.sefin-typography--error{color:var(--sefin-color-error)}.sefin-typography--line-height-tight{line-height:var(--sefin-line-height-tight)}.sefin-typography--line-height-normal{line-height:var(--sefin-line-height-normal)}.sefin-typography--line-height-relaxed{line-height:var(--sefin-line-height-relaxed)}\n"] }]
1957
- }], propDecorators: { variant: [{
1958
- type: Input
1959
- }], size: [{
1960
- type: Input
1961
- }], weight: [{
1962
- type: Input
1963
- }], color: [{
1964
- type: Input
1965
- }], lineHeight: [{
1966
- type: Input
1967
- }], class: [{
1968
- type: Input
1969
- }], text: [{
1970
- type: Input
1971
- }] } });
1972
-
1973
- class DividerComponent {
1974
- /** Divider orientation. Options: 'horizontal' | 'vertical' */
1975
- orientation = 'horizontal';
1976
- /** Divider variant style. Options: 'solid' | 'dashed' | 'dotted' */
1977
- variant = 'solid';
1978
- /** Spacing around the divider (margin) */
1979
- spacing = 'md';
1980
- /** Thickness of the divider */
1981
- thickness = 'thin';
1982
- /** Additional CSS classes */
1983
- class = '';
1984
- get dividerClasses() {
1985
- return [
1986
- 'sefin-divider',
1987
- `sefin-divider--${this.orientation}`,
1988
- `sefin-divider--${this.variant}`,
1989
- `sefin-divider--spacing-${this.spacing}`,
1990
- `sefin-divider--${this.thickness}`,
1991
- this.class,
1992
- ]
1993
- .filter(Boolean)
1994
- .join(' ');
1995
- }
1996
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1997
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DividerComponent, isStandalone: true, selector: "sefin-divider", inputs: { orientation: "orientation", variant: "variant", spacing: "spacing", thickness: "thickness", class: "class" }, ngImport: i0, template: "<hr [class]=\"dividerClasses\" [attr.aria-orientation]=\"orientation\" />\n\n", styles: [".sefin-divider{border:none;margin:0;padding:0;box-sizing:border-box}.sefin-divider--horizontal{width:100%;height:0;border-top-width:1px;border-top-style:solid;border-top-color:var(--sefin-color-border, #e0e0e0)}.sefin-divider--vertical{width:0;height:100%;min-height:1em;border-left-width:1px;border-left-style:solid;border-left-color:var(--sefin-color-border, #e0e0e0);align-self:stretch}.sefin-divider--solid.sefin-divider--horizontal{border-top-style:solid}.sefin-divider--solid.sefin-divider--vertical{border-left-style:solid}.sefin-divider--dashed.sefin-divider--horizontal{border-top-style:dashed}.sefin-divider--dashed.sefin-divider--vertical{border-left-style:dashed}.sefin-divider--dotted.sefin-divider--horizontal{border-top-style:dotted}.sefin-divider--dotted.sefin-divider--vertical{border-left-style:dotted}.sefin-divider--thin.sefin-divider--horizontal{border-top-width:1px}.sefin-divider--thin.sefin-divider--vertical{border-left-width:1px}.sefin-divider--medium.sefin-divider--horizontal{border-top-width:2px}.sefin-divider--medium.sefin-divider--vertical{border-left-width:2px}.sefin-divider--thick.sefin-divider--horizontal{border-top-width:3px}.sefin-divider--thick.sefin-divider--vertical{border-left-width:3px}.sefin-divider--spacing-none{margin:0}.sefin-divider--spacing-xs.sefin-divider--horizontal{margin-top:var(--sefin-spacing-xs, 4px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-divider--spacing-xs.sefin-divider--vertical{margin-left:var(--sefin-spacing-xs, 4px);margin-right:var(--sefin-spacing-xs, 4px)}.sefin-divider--spacing-sm.sefin-divider--horizontal{margin-top:var(--sefin-spacing-sm, 8px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-divider--spacing-sm.sefin-divider--vertical{margin-left:var(--sefin-spacing-sm, 8px);margin-right:var(--sefin-spacing-sm, 8px)}.sefin-divider--spacing-md.sefin-divider--horizontal{margin-top:var(--sefin-spacing-md, 16px);margin-bottom:var(--sefin-spacing-md, 16px)}.sefin-divider--spacing-md.sefin-divider--vertical{margin-left:var(--sefin-spacing-md, 16px);margin-right:var(--sefin-spacing-md, 16px)}.sefin-divider--spacing-lg.sefin-divider--horizontal{margin-top:var(--sefin-spacing-lg, 24px);margin-bottom:var(--sefin-spacing-lg, 24px)}.sefin-divider--spacing-lg.sefin-divider--vertical{margin-left:var(--sefin-spacing-lg, 24px);margin-right:var(--sefin-spacing-lg, 24px)}.sefin-divider--spacing-xl.sefin-divider--horizontal{margin-top:var(--sefin-spacing-xl, 32px);margin-bottom:var(--sefin-spacing-xl, 32px)}.sefin-divider--spacing-xl.sefin-divider--vertical{margin-left:var(--sefin-spacing-xl, 32px);margin-right:var(--sefin-spacing-xl, 32px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1998
- }
1999
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DividerComponent, decorators: [{
2000
- type: Component,
2001
- args: [{ selector: 'sefin-divider', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<hr [class]=\"dividerClasses\" [attr.aria-orientation]=\"orientation\" />\n\n", styles: [".sefin-divider{border:none;margin:0;padding:0;box-sizing:border-box}.sefin-divider--horizontal{width:100%;height:0;border-top-width:1px;border-top-style:solid;border-top-color:var(--sefin-color-border, #e0e0e0)}.sefin-divider--vertical{width:0;height:100%;min-height:1em;border-left-width:1px;border-left-style:solid;border-left-color:var(--sefin-color-border, #e0e0e0);align-self:stretch}.sefin-divider--solid.sefin-divider--horizontal{border-top-style:solid}.sefin-divider--solid.sefin-divider--vertical{border-left-style:solid}.sefin-divider--dashed.sefin-divider--horizontal{border-top-style:dashed}.sefin-divider--dashed.sefin-divider--vertical{border-left-style:dashed}.sefin-divider--dotted.sefin-divider--horizontal{border-top-style:dotted}.sefin-divider--dotted.sefin-divider--vertical{border-left-style:dotted}.sefin-divider--thin.sefin-divider--horizontal{border-top-width:1px}.sefin-divider--thin.sefin-divider--vertical{border-left-width:1px}.sefin-divider--medium.sefin-divider--horizontal{border-top-width:2px}.sefin-divider--medium.sefin-divider--vertical{border-left-width:2px}.sefin-divider--thick.sefin-divider--horizontal{border-top-width:3px}.sefin-divider--thick.sefin-divider--vertical{border-left-width:3px}.sefin-divider--spacing-none{margin:0}.sefin-divider--spacing-xs.sefin-divider--horizontal{margin-top:var(--sefin-spacing-xs, 4px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-divider--spacing-xs.sefin-divider--vertical{margin-left:var(--sefin-spacing-xs, 4px);margin-right:var(--sefin-spacing-xs, 4px)}.sefin-divider--spacing-sm.sefin-divider--horizontal{margin-top:var(--sefin-spacing-sm, 8px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-divider--spacing-sm.sefin-divider--vertical{margin-left:var(--sefin-spacing-sm, 8px);margin-right:var(--sefin-spacing-sm, 8px)}.sefin-divider--spacing-md.sefin-divider--horizontal{margin-top:var(--sefin-spacing-md, 16px);margin-bottom:var(--sefin-spacing-md, 16px)}.sefin-divider--spacing-md.sefin-divider--vertical{margin-left:var(--sefin-spacing-md, 16px);margin-right:var(--sefin-spacing-md, 16px)}.sefin-divider--spacing-lg.sefin-divider--horizontal{margin-top:var(--sefin-spacing-lg, 24px);margin-bottom:var(--sefin-spacing-lg, 24px)}.sefin-divider--spacing-lg.sefin-divider--vertical{margin-left:var(--sefin-spacing-lg, 24px);margin-right:var(--sefin-spacing-lg, 24px)}.sefin-divider--spacing-xl.sefin-divider--horizontal{margin-top:var(--sefin-spacing-xl, 32px);margin-bottom:var(--sefin-spacing-xl, 32px)}.sefin-divider--spacing-xl.sefin-divider--vertical{margin-left:var(--sefin-spacing-xl, 32px);margin-right:var(--sefin-spacing-xl, 32px)}\n"] }]
2002
- }], propDecorators: { orientation: [{
2003
- type: Input
2004
- }], variant: [{
2005
- type: Input
2006
- }], spacing: [{
2007
- type: Input
2008
- }], thickness: [{
2009
- type: Input
2010
- }], class: [{
2011
- type: Input
2012
- }] } });
2013
-
2014
- class SpinnerComponent {
2015
- /** Spinner size. Options: 'sm' | 'md' | 'lg' */
2016
- size = 'md';
2017
- /** Spinner variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' */
2018
- variant = 'primary';
2019
- /** Whether the spinner should be displayed inline (smaller margins) */
2020
- inline = false;
2021
- /** Additional CSS classes */
2022
- class = '';
2023
- get spinnerClasses() {
2024
- return [
2025
- 'sefin-spinner',
2026
- `sefin-spinner--${this.size}`,
2027
- `sefin-spinner--${this.variant}`,
2028
- this.inline ? 'sefin-spinner--inline' : '',
2029
- this.class,
2030
- ]
2031
- .filter(Boolean)
2032
- .join(' ');
2033
- }
2034
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2035
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SpinnerComponent, isStandalone: true, selector: "sefin-spinner", inputs: { size: "size", variant: "variant", inline: "inline", class: "class" }, ngImport: i0, template: "<div [class]=\"spinnerClasses\" role=\"status\" [attr.aria-label]=\"'Loading'\">\n <div class=\"sefin-spinner__circle\"></div>\n <span class=\"sr-only\">Loading...</span>\n</div>\n\n", styles: [".sefin-spinner{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.sefin-spinner--inline{margin:0}.sefin-spinner:not(.sefin-spinner--inline){padding:var(--sefin-spacing-lg, 24px)}.sefin-spinner--sm .sefin-spinner__circle{width:16px;height:16px;border-width:2px}.sefin-spinner--md .sefin-spinner__circle{width:32px;height:32px;border-width:3px}.sefin-spinner--lg .sefin-spinner__circle{width:48px;height:48px;border-width:4px}.sefin-spinner--primary .sefin-spinner__circle{border-color:var(--sefin-color-primary, #1976d2);border-top-color:transparent}.sefin-spinner--secondary .sefin-spinner__circle{border-color:var(--sefin-color-secondary, #dc004e);border-top-color:transparent}.sefin-spinner--success .sefin-spinner__circle{border-color:var(--sefin-color-success, #4caf50);border-top-color:transparent}.sefin-spinner--warning .sefin-spinner__circle{border-color:var(--sefin-color-warning, #ff9800);border-top-color:transparent}.sefin-spinner--error .sefin-spinner__circle{border-color:var(--sefin-color-error, #f44336);border-top-color:transparent}.sefin-spinner--default .sefin-spinner__circle{border-color:var(--sefin-color-text-secondary, #666);border-top-color:transparent}.sefin-spinner__circle{border-style:solid;border-radius:50%;animation:sefin-spinner-rotate .8s linear infinite;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes sefin-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2036
- }
2037
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpinnerComponent, decorators: [{
2038
- type: Component,
2039
- args: [{ selector: 'sefin-spinner', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"spinnerClasses\" role=\"status\" [attr.aria-label]=\"'Loading'\">\n <div class=\"sefin-spinner__circle\"></div>\n <span class=\"sr-only\">Loading...</span>\n</div>\n\n", styles: [".sefin-spinner{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.sefin-spinner--inline{margin:0}.sefin-spinner:not(.sefin-spinner--inline){padding:var(--sefin-spacing-lg, 24px)}.sefin-spinner--sm .sefin-spinner__circle{width:16px;height:16px;border-width:2px}.sefin-spinner--md .sefin-spinner__circle{width:32px;height:32px;border-width:3px}.sefin-spinner--lg .sefin-spinner__circle{width:48px;height:48px;border-width:4px}.sefin-spinner--primary .sefin-spinner__circle{border-color:var(--sefin-color-primary, #1976d2);border-top-color:transparent}.sefin-spinner--secondary .sefin-spinner__circle{border-color:var(--sefin-color-secondary, #dc004e);border-top-color:transparent}.sefin-spinner--success .sefin-spinner__circle{border-color:var(--sefin-color-success, #4caf50);border-top-color:transparent}.sefin-spinner--warning .sefin-spinner__circle{border-color:var(--sefin-color-warning, #ff9800);border-top-color:transparent}.sefin-spinner--error .sefin-spinner__circle{border-color:var(--sefin-color-error, #f44336);border-top-color:transparent}.sefin-spinner--default .sefin-spinner__circle{border-color:var(--sefin-color-text-secondary, #666);border-top-color:transparent}.sefin-spinner__circle{border-style:solid;border-radius:50%;animation:sefin-spinner-rotate .8s linear infinite;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes sefin-spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
2040
- }], propDecorators: { size: [{
2041
- type: Input
2042
- }], variant: [{
2043
- type: Input
2044
- }], inline: [{
2045
- type: Input
2046
- }], class: [{
2047
- type: Input
2048
- }] } });
2049
-
2050
- class ProgressBarComponent {
2051
- /** Progress value (0-100) */
2052
- value = 0;
2053
- /** Progress bar variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
2054
- variant = 'primary';
2055
- /** Progress bar size. Options: 'sm' | 'md' | 'lg' */
2056
- size = 'md';
2057
- /** Whether to show the progress percentage label */
2058
- showLabel = false;
2059
- /** Whether the progress bar is in indeterminate state (animated) */
2060
- indeterminate = false;
2061
- /** Additional CSS classes */
2062
- class = '';
2063
- get progressBarClasses() {
2064
- return [
2065
- 'sefin-progress-bar',
2066
- `sefin-progress-bar--${this.size}`,
2067
- `sefin-progress-bar--${this.variant}`,
2068
- this.indeterminate ? 'sefin-progress-bar--indeterminate' : '',
2069
- this.class,
2070
- ]
2071
- .filter(Boolean)
2072
- .join(' ');
2073
- }
2074
- get clampedValue() {
2075
- return Math.min(Math.max(this.value, 0), 100);
2076
- }
2077
- get percentageText() {
2078
- return `${Math.round(this.clampedValue)}%`;
2079
- }
2080
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2081
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ProgressBarComponent, isStandalone: true, selector: "sefin-progress-bar", inputs: { value: "value", variant: "variant", size: "size", showLabel: "showLabel", indeterminate: "indeterminate", class: "class" }, ngImport: i0, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-border-radius-full, 9999px);overflow:hidden;box-sizing:border-box}.sefin-progress-bar__fill{height:100%;background-color:var(--sefin-color-primary, #1976d2);border-radius:var(--sefin-border-radius-full, 9999px);transition:width .3s ease-in-out;box-sizing:border-box}.sefin-progress-bar--primary .sefin-progress-bar__fill{background-color:var(--sefin-color-primary, #1976d2)}.sefin-progress-bar--secondary .sefin-progress-bar__fill{background-color:var(--sefin-color-secondary, #dc004e)}.sefin-progress-bar--success .sefin-progress-bar__fill{background-color:var(--sefin-color-success, #4caf50)}.sefin-progress-bar--warning .sefin-progress-bar__fill{background-color:var(--sefin-color-warning, #ff9800)}.sefin-progress-bar--error .sefin-progress-bar__fill{background-color:var(--sefin-color-error, #f44336)}.sefin-progress-bar--indeterminate .sefin-progress-bar__fill{width:30%!important;animation:sefin-progress-bar-indeterminate 1.5s ease-in-out infinite}.sefin-progress-bar__label{font-family:var(--sefin-font-family-base, sans-serif);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #333);line-height:1;text-align:left}@keyframes sefin-progress-bar-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(400%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2082
- }
2083
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
2084
- type: Component,
2085
- args: [{ selector: 'sefin-progress-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"progressBarClasses\" role=\"progressbar\" [attr.aria-valuenow]=\"indeterminate ? null : clampedValue\" [attr.aria-valuemin]=\"0\" [attr.aria-valuemax]=\"100\" [attr.aria-label]=\"indeterminate ? 'Loading progress' : percentageText + ' complete'\">\n <div class=\"sefin-progress-bar__track\">\n <div \n class=\"sefin-progress-bar__fill\" \n [style.width.%]=\"indeterminate ? undefined : clampedValue\"\n ></div>\n </div>\n <span *ngIf=\"showLabel && !indeterminate\" class=\"sefin-progress-bar__label\">{{ percentageText }}</span>\n</div>\n\n", styles: [".sefin-progress-bar{display:flex;flex-direction:column;gap:var(--sefin-spacing-xs, 4px);width:100%;box-sizing:border-box}.sefin-progress-bar--sm .sefin-progress-bar__track{height:4px}.sefin-progress-bar--sm .sefin-progress-bar__label{font-size:var(--sefin-font-size-xs, 10px)}.sefin-progress-bar--md .sefin-progress-bar__track{height:8px}.sefin-progress-bar--md .sefin-progress-bar__label{font-size:var(--sefin-font-size-sm, 12px)}.sefin-progress-bar--lg .sefin-progress-bar__track{height:12px}.sefin-progress-bar--lg .sefin-progress-bar__label{font-size:var(--sefin-font-size-base, 14px)}.sefin-progress-bar__track{position:relative;width:100%;background-color:var(--sefin-color-surface-hover, #f0f0f0);border-radius:var(--sefin-border-radius-full, 9999px);overflow:hidden;box-sizing:border-box}.sefin-progress-bar__fill{height:100%;background-color:var(--sefin-color-primary, #1976d2);border-radius:var(--sefin-border-radius-full, 9999px);transition:width .3s ease-in-out;box-sizing:border-box}.sefin-progress-bar--primary .sefin-progress-bar__fill{background-color:var(--sefin-color-primary, #1976d2)}.sefin-progress-bar--secondary .sefin-progress-bar__fill{background-color:var(--sefin-color-secondary, #dc004e)}.sefin-progress-bar--success .sefin-progress-bar__fill{background-color:var(--sefin-color-success, #4caf50)}.sefin-progress-bar--warning .sefin-progress-bar__fill{background-color:var(--sefin-color-warning, #ff9800)}.sefin-progress-bar--error .sefin-progress-bar__fill{background-color:var(--sefin-color-error, #f44336)}.sefin-progress-bar--indeterminate .sefin-progress-bar__fill{width:30%!important;animation:sefin-progress-bar-indeterminate 1.5s ease-in-out infinite}.sefin-progress-bar__label{font-family:var(--sefin-font-family-base, sans-serif);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #333);line-height:1;text-align:left}@keyframes sefin-progress-bar-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(400%)}}\n"] }]
2086
- }], propDecorators: { value: [{
2087
- type: Input
2088
- }], variant: [{
2089
- type: Input
2090
- }], size: [{
2091
- type: Input
2092
- }], showLabel: [{
2093
- type: Input
2094
- }], indeterminate: [{
2095
- type: Input
2096
- }], class: [{
2097
- type: Input
2098
- }] } });
2099
-
2100
- class TooltipComponent {
2101
- cdr;
2102
- /** Tooltip text content */
2103
- text = '';
2104
- /** Tooltip position. Options: 'top' | 'bottom' | 'left' | 'right' */
2105
- position = 'top';
2106
- /** Trigger event. Options: 'hover' | 'click' | 'focus' */
2107
- trigger = 'hover';
2108
- /** Delay before showing tooltip (in milliseconds) */
2109
- delay = 200;
2110
- /** Whether the tooltip is disabled */
2111
- disabled = false;
2112
- /** Additional CSS classes */
2113
- class = '';
2114
- tooltipContent;
2115
- tooltipTrigger;
2116
- isVisible = false;
2117
- showTimeout;
2118
- hideTimeout;
2119
- constructor(cdr) {
2120
- this.cdr = cdr;
2121
- }
2122
- ngAfterViewInit() {
2123
- if (this.trigger === 'click') {
2124
- document.addEventListener('click', this.handleOutsideClick);
2125
- }
2126
- }
2127
- ngOnDestroy() {
2128
- this.clearTimeouts();
2129
- if (this.trigger === 'click') {
2130
- document.removeEventListener('click', this.handleOutsideClick);
2131
- }
2132
- }
2133
- onMouseEnter(event) {
2134
- if (this.trigger === 'hover' && !this.disabled) {
2135
- this.show();
2136
- }
2137
- }
2138
- onMouseLeave(event) {
2139
- if (this.trigger === 'hover' && !this.disabled) {
2140
- this.hide();
2141
- }
2142
- }
2143
- onClick(event) {
2144
- if (this.trigger === 'click' && !this.disabled) {
2145
- event.stopPropagation();
2146
- this.toggle();
2147
- }
2148
- }
2149
- onFocus(event) {
2150
- if (this.trigger === 'focus' && !this.disabled) {
2151
- this.show();
2152
- }
2153
- }
2154
- onBlur(event) {
2155
- if (this.trigger === 'focus' && !this.disabled) {
2156
- this.hide();
2157
- }
2158
- }
2159
- show() {
2160
- this.clearTimeouts();
2161
- this.showTimeout = setTimeout(() => {
2162
- this.isVisible = true;
2163
- this.cdr.markForCheck();
2164
- }, this.delay);
2165
- }
2166
- hide() {
2167
- this.clearTimeouts();
2168
- this.hideTimeout = setTimeout(() => {
2169
- this.isVisible = false;
2170
- this.cdr.markForCheck();
2171
- }, 50);
2172
- }
2173
- toggle() {
2174
- if (this.isVisible) {
2175
- this.hide();
2176
- }
2177
- else {
2178
- this.show();
2179
- }
2180
- }
2181
- clearTimeouts() {
2182
- if (this.showTimeout) {
2183
- clearTimeout(this.showTimeout);
2184
- this.showTimeout = undefined;
2185
- }
2186
- if (this.hideTimeout) {
2187
- clearTimeout(this.hideTimeout);
2188
- this.hideTimeout = undefined;
2189
- }
2190
- }
2191
- handleOutsideClick = (event) => {
2192
- if (this.isVisible && this.tooltipTrigger?.nativeElement) {
2193
- const target = event.target;
2194
- const clickedInside = this.tooltipTrigger.nativeElement.contains(target);
2195
- if (!clickedInside) {
2196
- this.hide();
2197
- }
2198
- }
2199
- };
2200
- get tooltipClasses() {
2201
- return [
2202
- 'sefin-tooltip',
2203
- `sefin-tooltip--${this.position}`,
2204
- this.isVisible ? 'sefin-tooltip--visible' : '',
2205
- this.class,
2206
- ]
2207
- .filter(Boolean)
2208
- .join(' ');
2209
- }
2210
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TooltipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2211
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TooltipComponent, isStandalone: true, selector: "sefin-tooltip", inputs: { text: "text", position: "position", trigger: "trigger", delay: "delay", disabled: "disabled", class: "class" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave($event)", "click": "onClick($event)", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, viewQueries: [{ propertyName: "tooltipContent", first: true, predicate: ["tooltipContent"], descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: ["tooltipTrigger"], descendants: true }], ngImport: i0, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:inline-block;position:relative}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-border-radius-sm, 4px);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2212
- }
2213
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TooltipComponent, decorators: [{
2214
- type: Component,
2215
- args: [{ selector: 'sefin-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #tooltipTrigger class=\"sefin-tooltip__wrapper\">\n <ng-content></ng-content>\n <div\n #tooltipContent\n [class]=\"tooltipClasses\"\n role=\"tooltip\"\n [attr.aria-hidden]=\"!isVisible\"\n *ngIf=\"text && !disabled\"\n >\n <div class=\"sefin-tooltip__content\">{{ text }}</div>\n <div class=\"sefin-tooltip__arrow\"></div>\n </div>\n</div>\n\n", styles: [".sefin-tooltip__wrapper{display:inline-block;position:relative}.sefin-tooltip{position:absolute;z-index:1000;pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .2s ease-in-out,transform .2s ease-in-out;white-space:nowrap}.sefin-tooltip--visible{opacity:1;transform:scale(1);pointer-events:auto}.sefin-tooltip__content{background-color:var(--sefin-color-surface-inverse, #333);color:var(--sefin-color-text-inverse, #ffffff);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 12px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);padding:var(--sefin-spacing-xs, 6px) var(--sefin-spacing-sm, 10px);border-radius:var(--sefin-border-radius-sm, 4px);box-shadow:var(--sefin-shadow-md, 0 4px 6px rgba(0, 0, 0, .1));max-width:200px;white-space:normal;word-wrap:break-word;box-sizing:border-box}.sefin-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.sefin-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--top.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--top .sefin-tooltip__arrow{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--sefin-color-surface-inverse, #333) transparent transparent transparent}.sefin-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%) scale(.95)}.sefin-tooltip--bottom.sefin-tooltip--visible{transform:translate(-50%) scale(1)}.sefin-tooltip--bottom .sefin-tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--sefin-color-surface-inverse, #333) transparent}.sefin-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--left.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--left .sefin-tooltip__arrow{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--sefin-color-surface-inverse, #333)}.sefin-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%) scale(.95)}.sefin-tooltip--right.sefin-tooltip--visible{transform:translateY(-50%) scale(1)}.sefin-tooltip--right .sefin-tooltip__arrow{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--sefin-color-surface-inverse, #333) transparent transparent}\n"] }]
2216
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
2217
- type: Input
2218
- }], position: [{
2219
- type: Input
2220
- }], trigger: [{
2221
- type: Input
2222
- }], delay: [{
2223
- type: Input
2224
- }], disabled: [{
2225
- type: Input
2226
- }], class: [{
2227
- type: Input
2228
- }], tooltipContent: [{
2229
- type: ViewChild,
2230
- args: ['tooltipContent', { static: false }]
2231
- }], tooltipTrigger: [{
2232
- type: ViewChild,
2233
- args: ['tooltipTrigger', { static: false }]
2234
- }], onMouseEnter: [{
2235
- type: HostListener,
2236
- args: ['mouseenter', ['$event']]
2237
- }], onMouseLeave: [{
2238
- type: HostListener,
2239
- args: ['mouseleave', ['$event']]
2240
- }], onClick: [{
2241
- type: HostListener,
2242
- args: ['click', ['$event']]
2243
- }], onFocus: [{
2244
- type: HostListener,
2245
- args: ['focus', ['$event']]
2246
- }], onBlur: [{
2247
- type: HostListener,
2248
- args: ['blur', ['$event']]
2249
- }] } });
2250
-
2251
- class AlertComponent {
2252
- /** Alert variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
2253
- variant = 'default';
2254
- /** Alert size. Options: 'sm' | 'md' | 'lg' */
2255
- size = 'md';
2256
- /** Alert title (optional) */
2257
- title;
2258
- /** Whether the alert can be dismissed (shows close button) */
2259
- dismissible = false;
2260
- /** Whether to show an icon */
2261
- showIcon = true;
2262
- /** Whether the alert is visible */
2263
- visible = true;
2264
- /** Additional CSS classes */
2265
- class = '';
2266
- /** Event emitted when the alert is dismissed */
2267
- dismissed = new EventEmitter();
2268
- onDismiss() {
2269
- this.visible = false;
2270
- this.dismissed.emit();
2271
- }
2272
- get alertClasses() {
2273
- return [
2274
- 'sefin-alert',
2275
- `sefin-alert--${this.variant}`,
2276
- `sefin-alert--${this.size}`,
2277
- !this.visible ? 'sefin-alert--hidden' : '',
2278
- this.class,
2279
- ]
2280
- .filter(Boolean)
2281
- .join(' ');
2282
- }
2283
- get iconName() {
2284
- const iconMap = {
2285
- success: 'check-circle',
2286
- warning: 'alert-triangle',
2287
- error: 'alert-circle',
2288
- info: 'info',
2289
- default: 'info',
2290
- };
2291
- return iconMap[this.variant];
2292
- }
2293
- get iconSize() {
2294
- // Icon size should be smaller than container to show rounded background
2295
- // Container sizes: sm=20px, md=24px, lg=28px
2296
- // Icon sizes: xs=12px, sm=16px, md=24px
2297
- const sizeMap = {
2298
- sm: 'xs', // 12px icon in 20px container (4px margin on each side)
2299
- md: 'sm', // 16px icon in 24px container (4px margin on each side)
2300
- lg: 'md', // 24px icon in 28px container (2px margin on each side)
2301
- };
2302
- return sizeMap[this.size];
2303
- }
2304
- get iconColor() {
2305
- return '#ffffff';
2306
- }
2307
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2308
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AlertComponent, isStandalone: true, selector: "sefin-alert", inputs: { variant: "variant", size: "size", title: "title", dismissible: "dismissible", showIcon: "showIcon", visible: "visible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title,.sefin-alert--success .sefin-alert__message,.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title,.sefin-alert--warning .sefin-alert__message,.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title,.sefin-alert--error .sefin-alert__message,.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-alert--info .sefin-alert__message,.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title,.sefin-alert--default .sefin-alert__message,.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2309
- }
2310
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertComponent, decorators: [{
2311
- type: Component,
2312
- args: [{ selector: 'sefin-alert', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"visible\"\n [class]=\"alertClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n>\n <div class=\"sefin-alert__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-alert__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\"></sefin-icon>\n </div>\n <div class=\"sefin-alert__body\">\n <div *ngIf=\"title\" class=\"sefin-alert__title\">{{ title }}</div>\n <div class=\"sefin-alert__message\">\n <ng-content></ng-content>\n </div>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-alert__close\"\n (click)=\"onDismiss()\"\n aria-label=\"Close alert\"\n >\n <span aria-hidden=\"true\">\u00D7</span>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-alert{display:flex;width:100%;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.sefin-alert--hidden{display:none}.sefin-alert--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 12px);font-size:var(--sefin-font-size-sm, 12px)}.sefin-alert--sm .sefin-alert__icon{width:20px;height:20px;min-width:20px;min-height:20px}.sefin-alert--sm .sefin-alert__icon sefin-icon{width:12px;height:12px}.sefin-alert--sm .sefin-alert__title{font-size:var(--sefin-font-size-sm, 12px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--md{padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);font-size:var(--sefin-font-size-base, 14px)}.sefin-alert--md .sefin-alert__icon{width:24px;height:24px;min-width:24px;min-height:24px}.sefin-alert--md .sefin-alert__icon sefin-icon{width:16px;height:16px}.sefin-alert--md .sefin-alert__title{font-size:var(--sefin-font-size-base, 14px);margin-bottom:var(--sefin-spacing-xs, 4px)}.sefin-alert--lg{padding:var(--sefin-spacing-lg, 16px) var(--sefin-spacing-xl, 20px);font-size:var(--sefin-font-size-lg, 16px)}.sefin-alert--lg .sefin-alert__icon{width:28px;height:28px;min-width:28px;min-height:28px}.sefin-alert--lg .sefin-alert__icon sefin-icon{width:20px;height:20px}.sefin-alert--lg .sefin-alert__title{font-size:var(--sefin-font-size-lg, 16px);margin-bottom:var(--sefin-spacing-sm, 8px)}.sefin-alert__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;box-sizing:border-box;position:relative}.sefin-alert__icon sefin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:auto}.sefin-alert__body{flex:1;min-width:0}.sefin-alert__title{font-weight:var(--sefin-font-weight-semibold, 600);line-height:var(--sefin-line-height-tight, 1.4);margin:0}.sefin-alert__message{line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-alert__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);font-size:20px;line-height:1;opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-alert__close:hover{opacity:1;background-color:#0000000d}.sefin-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-alert__close span{display:block;line-height:1}.sefin-alert--success{background-color:var(--sefin-color-success-light, #e8f5e9);border-color:var(--sefin-color-success, #4caf50);color:var(--sefin-color-success-dark, #2e7d32)}.sefin-alert--success .sefin-alert__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-alert--success .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--success .sefin-alert__title,.sefin-alert--success .sefin-alert__message,.sefin-alert--success .sefin-alert__close{color:var(--sefin-color-success-dark, #2e7d32)}.sefin-alert--warning{background-color:var(--sefin-color-warning-light, #fff3e0);border-color:var(--sefin-color-warning, #ff9800);color:var(--sefin-color-warning-dark, #e65100)}.sefin-alert--warning .sefin-alert__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-alert--warning .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--warning .sefin-alert__title,.sefin-alert--warning .sefin-alert__message,.sefin-alert--warning .sefin-alert__close{color:var(--sefin-color-warning-dark, #e65100)}.sefin-alert--error{background-color:var(--sefin-color-error-light, #ffebee);border-color:var(--sefin-color-error, #f44336);color:var(--sefin-color-error-dark, #c62828)}.sefin-alert--error .sefin-alert__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-alert--error .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--error .sefin-alert__title,.sefin-alert--error .sefin-alert__message,.sefin-alert--error .sefin-alert__close{color:var(--sefin-color-error-dark, #c62828)}.sefin-alert--info{background-color:var(--sefin-color-primary-light, #e3f2fd);border-color:var(--sefin-color-primary, #1976d2);color:var(--sefin-color-text, #1a1a1a)}.sefin-alert--info .sefin-alert__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff;border:none}.sefin-alert--info .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--info .sefin-alert__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-alert--info .sefin-alert__message,.sefin-alert--info .sefin-alert__close{color:var(--sefin-color-text, #1a1a1a)}.sefin-alert--default{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);color:var(--sefin-color-text, #333)}.sefin-alert--default .sefin-alert__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-alert--default .sefin-alert__icon sefin-icon{color:#fff}.sefin-alert--default .sefin-alert__title,.sefin-alert--default .sefin-alert__message,.sefin-alert--default .sefin-alert__close{color:var(--sefin-color-text, #333)}\n"] }]
2313
- }], propDecorators: { variant: [{
2314
- type: Input
2315
- }], size: [{
2316
- type: Input
2317
- }], title: [{
2318
- type: Input
2319
- }], dismissible: [{
2320
- type: Input
2321
- }], showIcon: [{
2322
- type: Input
2323
- }], visible: [{
2324
- type: Input
2325
- }], class: [{
2326
- type: Input
2327
- }], dismissed: [{
2328
- type: Output
2329
- }] } });
2330
-
2331
- class ToastComponent {
2332
- cdr;
2333
- /** Toast variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
2334
- variant = 'default';
2335
- /** Toast position. Options: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' */
2336
- position = 'top-right';
2337
- /** Toast title (optional) */
2338
- title;
2339
- /** Toast message */
2340
- message = '';
2341
- /** Duration in milliseconds before auto-dismiss (0 = no auto-dismiss) */
2342
- duration = 5000;
2343
- /** Whether to show an icon */
2344
- showIcon = true;
2345
- /** Whether the toast can be dismissed manually */
2346
- dismissible = true;
2347
- /** Additional CSS classes */
2348
- class = '';
2349
- /** Event emitted when the toast is dismissed */
2350
- dismissed = new EventEmitter();
2351
- isVisible = true;
2352
- isExiting = false;
2353
- isPaused = false;
2354
- dismissTimeout;
2355
- remainingTime = 0;
2356
- startTime = 0;
2357
- constructor(cdr) {
2358
- this.cdr = cdr;
2359
- }
2360
- ngOnInit() {
2361
- if (this.duration > 0) {
2362
- this.startTimer();
2363
- }
2364
- }
2365
- ngOnDestroy() {
2366
- this.clearTimer();
2367
- }
2368
- startTimer() {
2369
- if (this.duration <= 0)
2370
- return;
2371
- this.startTime = Date.now();
2372
- this.remainingTime = this.duration;
2373
- this.dismissTimeout = setTimeout(() => {
2374
- if (!this.isPaused) {
2375
- this.dismiss();
2376
- }
2377
- }, this.remainingTime);
2378
- }
2379
- clearTimer() {
2380
- if (this.dismissTimeout) {
2381
- clearTimeout(this.dismissTimeout);
2382
- this.dismissTimeout = undefined;
2383
- }
2384
- }
2385
- pauseTimer() {
2386
- if (this.duration <= 0 || this.isPaused || this.isExiting)
2387
- return;
2388
- this.isPaused = true;
2389
- this.clearTimer();
2390
- if (this.startTime > 0) {
2391
- const elapsed = Date.now() - this.startTime;
2392
- this.remainingTime = Math.max(0, this.remainingTime - elapsed);
2393
- }
2394
- }
2395
- resumeTimer() {
2396
- if (this.duration <= 0 || !this.isPaused || this.isExiting)
2397
- return;
2398
- this.isPaused = false;
2399
- this.startTime = Date.now();
2400
- if (this.remainingTime > 0) {
2401
- this.dismissTimeout = setTimeout(() => {
2402
- if (!this.isPaused) {
2403
- this.dismiss();
2404
- }
2405
- }, this.remainingTime);
2406
- }
2407
- }
2408
- dismiss() {
2409
- if (this.isExiting) {
2410
- return;
2411
- }
2412
- this.clearTimer();
2413
- this.isExiting = true;
2414
- this.cdr.markForCheck();
2415
- // Wait for exit animation to complete
2416
- setTimeout(() => {
2417
- this.isVisible = false;
2418
- this.dismissed.emit();
2419
- this.cdr.markForCheck();
2420
- }, 200);
2421
- }
2422
- get toastClasses() {
2423
- return [
2424
- 'sefin-toast',
2425
- `sefin-toast--${this.variant}`,
2426
- `sefin-toast--${this.position}`,
2427
- this.isExiting ? 'sefin-toast--exiting' : '',
2428
- this.isVisible ? 'sefin-toast--visible' : '',
2429
- this.class,
2430
- ]
2431
- .filter(Boolean)
2432
- .join(' ');
2433
- }
2434
- get iconName() {
2435
- const iconMap = {
2436
- success: 'check-circle',
2437
- warning: 'warning',
2438
- error: 'error',
2439
- info: 'info',
2440
- default: 'info',
2441
- };
2442
- return iconMap[this.variant];
2443
- }
2444
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2445
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ToastComponent, isStandalone: true, selector: "sefin-toast", inputs: { variant: "variant", position: "position", title: "title", message: "message", duration: "duration", showIcon: "showIcon", dismissible: "dismissible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"dismiss()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;min-width:300px;max-width:500px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast--success{background-color:#fff;border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning{background-color:#fff;border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error{background-color:#fff;border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info{background-color:#fff;border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default{background-color:#fff;border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2446
- }
2447
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, decorators: [{
2448
- type: Component,
2449
- args: [{ selector: 'sefin-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"dismiss()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;min-width:300px;max-width:500px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast--success{background-color:#fff;border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning{background-color:#fff;border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error{background-color:#fff;border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info{background-color:#fff;border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default{background-color:#fff;border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"] }]
2450
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
2451
- type: Input
2452
- }], position: [{
2453
- type: Input
2454
- }], title: [{
2455
- type: Input
2456
- }], message: [{
2457
- type: Input
2458
- }], duration: [{
2459
- type: Input
2460
- }], showIcon: [{
2461
- type: Input
2462
- }], dismissible: [{
2463
- type: Input
2464
- }], class: [{
2465
- type: Input
2466
- }], dismissed: [{
2467
- type: Output
2468
- }] } });
2469
-
2470
- class TextFieldComponent {
2471
- inputRef;
2472
- /** TextField variant style. Options: 'outlined' | 'filled' | 'standard' */
2473
- variant = 'outlined';
2474
- /** TextField size. Options: 'sm' | 'md' | 'lg' */
2475
- size = 'md';
2476
- /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' */
2477
- type = 'text';
2478
- /** Placeholder text */
2479
- placeholder = '';
2480
- /** Helper text shown below the input */
2481
- hint = '';
2482
- /** Error message to display */
2483
- errorMessage = '';
2484
- /** Whether the field is required */
2485
- required = false;
2486
- /** Whether the field is disabled */
2487
- disabled = false;
2488
- /** Whether the field is readonly */
2489
- readonly = false;
2490
- /** Maximum length of the input */
2491
- maxLength;
2492
- /** Minimum length of the input */
2493
- minLength;
2494
- /** Pattern for validation (regex string) */
2495
- pattern;
2496
- /** Leading icon name */
2497
- leadingIcon;
2498
- /** Trailing icon name */
2499
- trailingIcon;
2500
- /** Whether to show character counter */
2501
- showCounter = false;
2502
- /** Autocomplete attribute */
2503
- autocomplete;
2504
- /** Input name attribute */
2505
- name = '';
2506
- /** Input id attribute */
2507
- id = '';
2508
- /** Additional CSS classes */
2509
- class = '';
2510
- /** Custom validation function */
2511
- customValidator;
2512
- /** Event emitted when the value changes */
2513
- valueChange = new EventEmitter();
2514
- /** Event emitted when the input is focused */
2515
- focused = new EventEmitter();
2516
- /** Event emitted when the input is blurred */
2517
- blurred = new EventEmitter();
2518
- /** Event emitted when trailing icon is clicked */
2519
- trailingIconClick = new EventEmitter();
2520
- value = '';
2521
- isFocused = false;
2522
- hasError = false;
2523
- internalErrorMessage = '';
2524
- onChange = (value) => { };
2525
- onTouched = () => { };
2526
- destroy$ = new Subject();
2527
- control;
2528
- ngOnInit() {
2529
- this.generateIdIfNeeded();
2530
- }
2531
- ngAfterViewInit() {
2532
- if (this.inputRef?.nativeElement) {
2533
- // Set initial value if provided
2534
- if (this.value) {
2535
- this.inputRef.nativeElement.value = this.value;
2536
- }
2537
- // Ocultar botón nativo de mostrar/ocultar contraseña del navegador
2538
- if (this.type === 'password') {
2539
- const input = this.inputRef.nativeElement;
2540
- // Intentar ocultar el botón nativo usando estilos inline
2541
- input.style.setProperty('-webkit-appearance', 'none', 'important');
2542
- // Agregar un atributo para ayudar con el CSS
2543
- input.setAttribute('data-password-field', 'true');
2544
- }
2545
- }
2546
- }
2547
- ngOnDestroy() {
2548
- this.destroy$.next();
2549
- this.destroy$.complete();
2550
- }
2551
- generateIdIfNeeded() {
2552
- if (!this.id) {
2553
- this.id = `sefin-textfield-${Math.random().toString(36).substr(2, 9)}`;
2554
- }
2555
- }
2556
- onInput(event) {
2557
- const target = event.target;
2558
- this.value = target.value;
2559
- this.onChange(this.value);
2560
- this.valueChange.emit(this.value);
2561
- this.validateField();
2562
- }
2563
- onFocus(event) {
2564
- this.isFocused = true;
2565
- this.focused.emit(event);
2566
- }
2567
- onBlur(event) {
2568
- this.isFocused = false;
2569
- this.onTouched();
2570
- this.blurred.emit(event);
2571
- this.validateField();
2572
- }
2573
- onTrailingIconClick(event) {
2574
- event.stopPropagation();
2575
- if (!this.disabled) {
2576
- this.trailingIconClick.emit(event);
2577
- }
2578
- }
2579
- validateField() {
2580
- this.hasError = false;
2581
- this.internalErrorMessage = '';
2582
- if (this.disabled || this.readonly) {
2583
- return;
2584
- }
2585
- const value = this.value || '';
2586
- // Required validation
2587
- if (this.required && !value.trim()) {
2588
- this.hasError = true;
2589
- this.internalErrorMessage = 'Este campo es requerido';
2590
- return;
2591
- }
2592
- // Skip other validations if field is empty and not required
2593
- if (!value.trim()) {
2594
- return;
2595
- }
2596
- // Min length validation
2597
- if (this.minLength && value.length < this.minLength) {
2598
- this.hasError = true;
2599
- this.internalErrorMessage = `Mínimo ${this.minLength} caracteres`;
2600
- return;
2601
- }
2602
- // Max length validation
2603
- if (this.maxLength && value.length > this.maxLength) {
2604
- this.hasError = true;
2605
- this.internalErrorMessage = `Máximo ${this.maxLength} caracteres`;
2606
- return;
2607
- }
2608
- // Pattern validation
2609
- if (this.pattern) {
2610
- try {
2611
- const regex = new RegExp(this.pattern);
2612
- if (!regex.test(value)) {
2613
- this.hasError = true;
2614
- this.internalErrorMessage = 'El formato no es válido';
2615
- return;
2616
- }
2617
- }
2618
- catch (e) {
2619
- console.warn('Invalid pattern:', this.pattern);
2620
- }
2621
- }
2622
- // Type-specific validation
2623
- if (this.type === 'email' && value) {
2624
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2625
- if (!emailRegex.test(value)) {
2626
- this.hasError = true;
2627
- this.internalErrorMessage = 'Ingresa un email válido';
2628
- return;
2629
- }
2630
- }
2631
- if (this.type === 'url' && value) {
2632
- try {
2633
- new URL(value);
2634
- }
2635
- catch {
2636
- this.hasError = true;
2637
- this.internalErrorMessage = 'Ingresa una URL válida';
2638
- return;
2639
- }
2640
- }
2641
- // Custom validator
2642
- if (this.customValidator) {
2643
- const customError = this.customValidator(value);
2644
- if (customError) {
2645
- this.hasError = true;
2646
- this.internalErrorMessage = customError;
2647
- return;
2648
- }
2649
- }
2650
- }
2651
- get displayError() {
2652
- return this.hasError && (!!this.errorMessage || !!this.internalErrorMessage);
2653
- }
2654
- get displayErrorMessage() {
2655
- return this.errorMessage || this.internalErrorMessage;
2656
- }
2657
- get characterCount() {
2658
- return this.value?.length || 0;
2659
- }
2660
- get textFieldClasses() {
2661
- return [
2662
- 'sefin-textfield',
2663
- `sefin-textfield--${this.variant}`,
2664
- `sefin-textfield--${this.size}`,
2665
- this.isFocused ? 'sefin-textfield--focused' : '',
2666
- this.hasError ? 'sefin-textfield--error' : '',
2667
- this.disabled ? 'sefin-textfield--disabled' : '',
2668
- this.readonly ? 'sefin-textfield--readonly' : '',
2669
- this.leadingIcon ? 'sefin-textfield--with-leading-icon' : '',
2670
- this.trailingIcon ? 'sefin-textfield--with-trailing-icon' : '',
2671
- 'sefin-textfield--no-label',
2672
- this.class,
2673
- ]
2674
- .filter(Boolean)
2675
- .join(' ');
2676
- }
2677
- // ControlValueAccessor implementation
2678
- writeValue(value) {
2679
- this.value = value || '';
2680
- if (this.inputRef?.nativeElement) {
2681
- this.inputRef.nativeElement.value = this.value;
2682
- }
2683
- this.validateField();
2684
- }
2685
- registerOnChange(fn) {
2686
- this.onChange = fn;
2687
- }
2688
- registerOnTouched(fn) {
2689
- this.onTouched = fn;
2690
- }
2691
- setDisabledState(isDisabled) {
2692
- this.disabled = isDisabled;
2693
- }
2694
- // Validator implementation
2695
- validate(control) {
2696
- this.control = control;
2697
- const value = control.value || '';
2698
- if (this.disabled || this.readonly) {
2699
- return null;
2700
- }
2701
- // Required validation
2702
- if (this.required && !value.trim()) {
2703
- return { required: true };
2704
- }
2705
- // Skip other validations if field is empty and not required
2706
- if (!value.trim()) {
2707
- return null;
2708
- }
2709
- const errors = {};
2710
- // Min length validation
2711
- if (this.minLength && value.length < this.minLength) {
2712
- errors['minlength'] = {
2713
- requiredLength: this.minLength,
2714
- actualLength: value.length,
2715
- };
2716
- }
2717
- // Max length validation
2718
- if (this.maxLength && value.length > this.maxLength) {
2719
- errors['maxlength'] = {
2720
- requiredLength: this.maxLength,
2721
- actualLength: value.length,
2722
- };
2723
- }
2724
- // Pattern validation
2725
- if (this.pattern) {
2726
- try {
2727
- const regex = new RegExp(this.pattern);
2728
- if (!regex.test(value)) {
2729
- errors['pattern'] = { requiredPattern: this.pattern, actualValue: value };
2730
- }
2731
- }
2732
- catch (e) {
2733
- console.warn('Invalid pattern:', this.pattern);
2734
- }
2735
- }
2736
- // Type-specific validation
2737
- if (this.type === 'email' && value) {
2738
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
2739
- if (!emailRegex.test(value)) {
2740
- errors['email'] = true;
2741
- }
2742
- }
2743
- if (this.type === 'url' && value) {
2744
- try {
2745
- new URL(value);
2746
- }
2747
- catch {
2748
- errors['url'] = true;
2749
- }
2750
- }
2751
- // Custom validator
2752
- if (this.customValidator) {
2753
- const customError = this.customValidator(value);
2754
- if (customError) {
2755
- errors['custom'] = { message: customError };
2756
- }
2757
- }
2758
- return Object.keys(errors).length > 0 ? errors : null;
2759
- }
2760
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2761
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TextFieldComponent, isStandalone: true, selector: "sefin-textfield", inputs: { variant: "variant", size: "size", type: "type", placeholder: "placeholder", hint: "hint", errorMessage: "errorMessage", required: "required", disabled: "disabled", readonly: "readonly", maxLength: "maxLength", minLength: "minLength", pattern: "pattern", leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", showCounter: "showCounter", autocomplete: "autocomplete", name: "name", id: "id", class: "class", customValidator: "customValidator" }, outputs: { valueChange: "valueChange", focused: "focused", blurred: "blurred", trailingIconClick: "trailingIconClick" }, providers: [
2762
- {
2763
- provide: NG_VALUE_ACCESSOR,
2764
- useExisting: forwardRef(() => TextFieldComponent),
2765
- multi: true,
2766
- },
2767
- {
2768
- provide: NG_VALIDATORS,
2769
- useExisting: forwardRef(() => TextFieldComponent),
2770
- multi: true,
2771
- },
2772
- ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon [name]=\"leadingIcon\" [size]=\"size === 'sm' ? 'sm' : 'md'\"></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon [name]=\"trailingIcon\" [size]=\"size === 'sm' ? 'sm' : 'md'\"></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - 32px);z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:#e0e0e0!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:40px}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:56px}.sefin-textfield--lg .sefin-textfield__input-container{min-height:64px}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
2773
- }
2774
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TextFieldComponent, decorators: [{
2775
- type: Component,
2776
- args: [{ selector: 'sefin-textfield', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.Default, providers: [
2777
- {
2778
- provide: NG_VALUE_ACCESSOR,
2779
- useExisting: forwardRef(() => TextFieldComponent),
2780
- multi: true,
2781
- },
2782
- {
2783
- provide: NG_VALIDATORS,
2784
- useExisting: forwardRef(() => TextFieldComponent),
2785
- multi: true,
2786
- },
2787
- ], template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon [name]=\"leadingIcon\" [size]=\"size === 'sm' ? 'sm' : 'md'\"></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon [name]=\"trailingIcon\" [size]=\"size === 'sm' ? 'sm' : 'md'\"></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n >\n {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n </span>\n </div>\n</div>\n\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:56px;overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - 32px);z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:#e0e0e0!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-border-radius-sm, 4px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:20px;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-border-radius-md, 8px) var(--sefin-border-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:40px}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:56px}.sefin-textfield--lg .sefin-textfield__input-container{min-height:64px}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
2788
- }], propDecorators: { inputRef: [{
2789
- type: ViewChild,
2790
- args: ['inputRef', { static: false }]
2791
- }], variant: [{
2792
- type: Input
2793
- }], size: [{
2794
- type: Input
2795
- }], type: [{
2796
- type: Input
2797
- }], placeholder: [{
2798
- type: Input
2799
- }], hint: [{
2800
- type: Input
2801
- }], errorMessage: [{
2802
- type: Input
2803
- }], required: [{
2804
- type: Input
2805
- }], disabled: [{
2806
- type: Input
2807
- }], readonly: [{
2808
- type: Input
2809
- }], maxLength: [{
2810
- type: Input
2811
- }], minLength: [{
2812
- type: Input
2813
- }], pattern: [{
2814
- type: Input
2815
- }], leadingIcon: [{
2816
- type: Input
2817
- }], trailingIcon: [{
2818
- type: Input
2819
- }], showCounter: [{
2820
- type: Input
2821
- }], autocomplete: [{
2822
- type: Input
2823
- }], name: [{
2824
- type: Input
2825
- }], id: [{
2826
- type: Input
2827
- }], class: [{
2828
- type: Input
2829
- }], customValidator: [{
2830
- type: Input
2831
- }], valueChange: [{
2832
- type: Output
2833
- }], focused: [{
2834
- type: Output
2835
- }], blurred: [{
2836
- type: Output
2837
- }], trailingIconClick: [{
2838
- type: Output
2839
- }] } });
2840
-
2841
- /**
2842
- * Atoms index
2843
- */
2844
-
2845
- class AutocompleteComponent {
2846
- inputRef;
2847
- dropdownRef;
2848
- containerRef;
2849
- options = [];
2850
- placeholder = '';
2851
- disabled = false;
2852
- size = 'md';
2853
- class = '';
2854
- value = null;
2855
- minChars = 0;
2856
- maxResults = 10;
2857
- valueChange = new EventEmitter();
2858
- optionSelected = new EventEmitter();
2859
- inputChange = new EventEmitter();
2860
- searchText = '';
2861
- filteredOptions = [];
2862
- isOpen = false;
2863
- selectedIndex = -1;
2864
- ngOnInit() {
2865
- if (this.value !== null) {
2866
- const selectedOption = this.options.find((opt) => opt.value === this.value);
2867
- this.searchText = selectedOption?.label || String(this.value);
2868
- }
2869
- }
2870
- ngOnChanges(changes) {
2871
- if (changes['options']) {
2872
- const options = changes['options'].currentValue || [];
2873
- if (this.value !== null) {
2874
- const selectedOption = options.find((opt) => opt.value === this.value);
2875
- if (selectedOption) {
2876
- this.searchText = selectedOption.label;
2877
- }
2878
- else {
2879
- this.searchText = '';
2880
- }
2881
- }
2882
- }
2883
- if (changes['value']) {
2884
- if (this.value !== null) {
2885
- const selectedOption = this.options.find((opt) => opt.value === this.value);
2886
- this.searchText = selectedOption?.label || String(this.value);
2887
- }
2888
- else {
2889
- this.searchText = '';
2890
- }
2891
- this.filteredOptions = [];
2892
- this.isOpen = false;
2893
- }
2894
- }
2895
- ngOnDestroy() {
2896
- }
2897
- onClickOutside(event) {
2898
- if (this.containerRef?.nativeElement && this.isOpen) {
2899
- const clickedInside = this.containerRef.nativeElement.contains(event.target);
2900
- if (!clickedInside) {
2901
- this.isOpen = false;
2902
- this.selectedIndex = -1;
2903
- }
2904
- }
2905
- }
2906
- onInputChange(value) {
2907
- this.searchText = value;
2908
- this.inputChange.emit(value);
2909
- if (this.options && this.options.length > 0) {
2910
- this.filterOptions();
2911
- this.isOpen = value.length >= this.minChars;
2912
- }
2913
- else {
2914
- this.isOpen = false;
2915
- this.filteredOptions = [];
2916
- }
2917
- }
2918
- filterOptions() {
2919
- if (!this.options || this.options.length === 0) {
2920
- this.filteredOptions = [];
2921
- return;
2922
- }
2923
- if (this.minChars > 0 &&
2924
- (!this.searchText || this.searchText.length < this.minChars)) {
2925
- this.filteredOptions = [];
2926
- return;
2927
- }
2928
- const searchText = this.searchText || '';
2929
- if (searchText.length === 0) {
2930
- this.filteredOptions = this.options
2931
- .filter((option) => !option.disabled)
2932
- .slice(0, this.maxResults);
2933
- return;
2934
- }
2935
- const searchLower = searchText.toLowerCase();
2936
- this.filteredOptions = this.options
2937
- .filter((option) => {
2938
- if (option.disabled)
2939
- return false;
2940
- return option.label.toLowerCase().includes(searchLower);
2941
- })
2942
- .slice(0, this.maxResults);
2943
- }
2944
- selectOption(option) {
2945
- if (option.disabled)
2946
- return;
2947
- this.searchText = option.label;
2948
- this.value = option.value;
2949
- this.valueChange.emit(option.value);
2950
- this.optionSelected.emit(option);
2951
- this.isOpen = false;
2952
- this.selectedIndex = -1;
2953
- }
2954
- onInputFocus() {
2955
- if (this.disabled)
2956
- return;
2957
- if (this.options &&
2958
- Array.isArray(this.options) &&
2959
- this.options.length > 0) {
2960
- this.filterOptions();
2961
- this.isOpen = this.filteredOptions.length > 0;
2962
- }
2963
- else {
2964
- this.isOpen = false;
2965
- this.filteredOptions = [];
2966
- }
2967
- }
2968
- onInputBlur() {
2969
- if (this.disabled || !this.searchText) {
2970
- return;
2971
- }
2972
- const exactMatch = this.options.find((option) => !option.disabled &&
2973
- option.label.toLowerCase().trim() === this.searchText.toLowerCase().trim());
2974
- if (!exactMatch) {
2975
- this.searchText = '';
2976
- this.value = null;
2977
- this.valueChange.emit(null);
2978
- this.isOpen = false;
2979
- this.filteredOptions = [];
2980
- this.selectedIndex = -1;
2981
- }
2982
- }
2983
- onKeyDown(event) {
2984
- if (!this.isOpen ||
2985
- !this.filteredOptions ||
2986
- this.filteredOptions.length === 0) {
2987
- return;
2988
- }
2989
- switch (event.key) {
2990
- case 'ArrowDown':
2991
- event.preventDefault();
2992
- this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredOptions.length - 1);
2993
- setTimeout(() => this.scrollToSelected(), 0);
2994
- break;
2995
- case 'ArrowUp':
2996
- event.preventDefault();
2997
- this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
2998
- setTimeout(() => this.scrollToSelected(), 0);
2999
- break;
3000
- case 'Enter':
3001
- event.preventDefault();
3002
- if (this.selectedIndex >= 0 &&
3003
- this.selectedIndex < this.filteredOptions.length) {
3004
- this.selectOption(this.filteredOptions[this.selectedIndex]);
3005
- }
3006
- break;
3007
- case 'Escape':
3008
- event.preventDefault();
3009
- this.isOpen = false;
3010
- this.selectedIndex = -1;
3011
- break;
3012
- }
3013
- }
3014
- scrollToSelected() {
3015
- try {
3016
- if (this.dropdownRef?.nativeElement && this.selectedIndex >= 0) {
3017
- const selectedElement = this.dropdownRef.nativeElement.querySelector(`[data-index="${this.selectedIndex}"]`);
3018
- if (selectedElement && selectedElement instanceof HTMLElement) {
3019
- selectedElement.scrollIntoView({
3020
- block: 'nearest',
3021
- behavior: 'smooth',
3022
- });
3023
- }
3024
- }
3025
- }
3026
- catch (error) {
3027
- console.warn('Could not scroll to selected option:', error);
3028
- }
3029
- }
3030
- clearValue() {
3031
- this.searchText = '';
3032
- this.value = null;
3033
- this.valueChange.emit(null);
3034
- this.isOpen = false;
3035
- this.filteredOptions = [];
3036
- if (this.inputRef?.nativeElement) {
3037
- this.inputRef.nativeElement.focus();
3038
- }
3039
- }
3040
- get inputClasses() {
3041
- return [
3042
- 'sefin-autocomplete__input',
3043
- `sefin-autocomplete__input--${this.size}`,
3044
- this.disabled ? 'sefin-autocomplete__input--disabled' : '',
3045
- this.class,
3046
- ]
3047
- .filter(Boolean)
3048
- .join(' ');
3049
- }
3050
- get containerClasses() {
3051
- return [
3052
- 'sefin-autocomplete',
3053
- this.isOpen && this.filteredOptions.length > 0
3054
- ? 'sefin-autocomplete--open'
3055
- : '',
3056
- ]
3057
- .filter(Boolean)
3058
- .join(' ');
3059
- }
3060
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3061
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", disabled: "disabled", size: "size", class: "class", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
3062
- }
3063
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
3064
- type: Component,
3065
- args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:32px}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:40px}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:48px}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}\n"] }]
3066
- }], propDecorators: { inputRef: [{
3067
- type: ViewChild,
3068
- args: ['inputRef', { static: false }]
3069
- }], dropdownRef: [{
3070
- type: ViewChild,
3071
- args: ['dropdownRef', { static: false }]
3072
- }], containerRef: [{
3073
- type: ViewChild,
3074
- args: ['containerRef', { static: false }]
3075
- }], options: [{
3076
- type: Input
3077
- }], placeholder: [{
3078
- type: Input
3079
- }], disabled: [{
3080
- type: Input
3081
- }], size: [{
3082
- type: Input
3083
- }], class: [{
3084
- type: Input
3085
- }], value: [{
3086
- type: Input
3087
- }], minChars: [{
3088
- type: Input
3089
- }], maxResults: [{
3090
- type: Input
3091
- }], valueChange: [{
3092
- type: Output
3093
- }], optionSelected: [{
3094
- type: Output
3095
- }], inputChange: [{
3096
- type: Output
3097
- }], onClickOutside: [{
3098
- type: HostListener,
3099
- args: ['document:click', ['$event']]
3100
- }] } });
3101
-
3102
- class DatepickerComponent {
3103
- cdr;
3104
- ngZone;
3105
- containerRef;
3106
- calendarRef;
3107
- textfieldRef;
3108
- value = null;
3109
- placeholder = 'Selecciona una fecha';
3110
- disabled = false;
3111
- size = 'md';
3112
- class = '';
3113
- format = 'DD/MM/YYYY';
3114
- mode = 'single';
3115
- minDate;
3116
- maxDate;
3117
- showTodayButton = true;
3118
- showClearButton = true;
3119
- locale = 'es-ES';
3120
- firstDayOfWeek = 1; // 0 = Sunday, 1 = Monday
3121
- valueChange = new EventEmitter();
3122
- dateSelected = new EventEmitter();
3123
- isOpen = false;
3124
- currentMonth = new Date();
3125
- selectedDate = null;
3126
- rangeStart = null;
3127
- rangeEnd = null;
3128
- displayValue = '';
3129
- hoveredDate = null;
3130
- monthsES = [
3131
- 'Enero',
3132
- 'Febrero',
3133
- 'Marzo',
3134
- 'Abril',
3135
- 'Mayo',
3136
- 'Junio',
3137
- 'Julio',
3138
- 'Agosto',
3139
- 'Septiembre',
3140
- 'Octubre',
3141
- 'Noviembre',
3142
- 'Diciembre',
3143
- ];
3144
- daysES = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'];
3145
- daysESFull = [
3146
- 'Domingo',
3147
- 'Lunes',
3148
- 'Martes',
3149
- 'Miércoles',
3150
- 'Jueves',
3151
- 'Viernes',
3152
- 'Sábado',
3153
- ];
3154
- constructor(cdr, ngZone) {
3155
- this.cdr = cdr;
3156
- this.ngZone = ngZone;
3157
- }
3158
- ngOnInit() {
3159
- this.initializeDates();
3160
- this.updateDisplayValue();
3161
- }
3162
- ngOnChanges(changes) {
3163
- if (changes['value']) {
3164
- this.initializeDates();
3165
- this.updateDisplayValue();
3166
- }
3167
- if (changes['mode']) {
3168
- this.initializeDates();
3169
- this.updateDisplayValue();
3170
- }
3171
- }
3172
- ngOnDestroy() { }
3173
- onClickOutside(event) {
3174
- if (this.containerRef?.nativeElement && this.isOpen) {
3175
- const clickedInside = this.containerRef.nativeElement.contains(event.target);
3176
- if (!clickedInside) {
3177
- this.closeCalendar();
3178
- }
3179
- }
3180
- }
3181
- onKeyDown(event) {
3182
- if (event.key === 'Escape' && this.isOpen) {
3183
- this.closeCalendar();
3184
- }
3185
- }
3186
- initializeDates() {
3187
- if (this.mode === 'single') {
3188
- this.selectedDate = this.value instanceof Date ? new Date(this.value) : null;
3189
- this.rangeStart = null;
3190
- this.rangeEnd = null;
3191
- if (this.selectedDate) {
3192
- this.currentMonth = new Date(this.selectedDate);
3193
- }
3194
- }
3195
- else {
3196
- const range = this.value;
3197
- this.selectedDate = null;
3198
- this.rangeStart = range?.start ? new Date(range.start) : null;
3199
- this.rangeEnd = range?.end ? new Date(range.end) : null;
3200
- if (this.rangeStart) {
3201
- this.currentMonth = new Date(this.rangeStart);
3202
- }
3203
- else if (this.rangeEnd) {
3204
- this.currentMonth = new Date(this.rangeEnd);
3205
- }
3206
- }
3207
- }
3208
- toggleCalendar() {
3209
- if (this.disabled)
3210
- return;
3211
- this.isOpen = !this.isOpen;
3212
- if (this.isOpen && !this.currentMonth) {
3213
- this.currentMonth = new Date();
3214
- }
3215
- }
3216
- closeCalendar() {
3217
- this.isOpen = false;
3218
- this.hoveredDate = null;
3219
- }
3220
- onInputClick() {
3221
- if (!this.disabled) {
3222
- this.toggleCalendar();
3223
- }
3224
- }
3225
- onInputFocus() {
3226
- if (!this.disabled) {
3227
- this.toggleCalendar();
3228
- }
3229
- }
3230
- getDaysInMonth(date) {
3231
- return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
3232
- }
3233
- getFirstDayOfMonth(date) {
3234
- const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
3235
- return this.firstDayOfWeek === 1 ? (firstDay === 0 ? 6 : firstDay - 1) : firstDay;
3236
- }
3237
- getCalendarDays() {
3238
- const days = [];
3239
- const daysInMonth = this.getDaysInMonth(this.currentMonth);
3240
- const firstDay = this.getFirstDayOfMonth(this.currentMonth);
3241
- // Add empty cells for days before the first day of the month
3242
- for (let i = 0; i < firstDay; i++) {
3243
- days.push(null);
3244
- }
3245
- // Add days of the month
3246
- for (let day = 1; day <= daysInMonth; day++) {
3247
- days.push(new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth(), day));
3248
- }
3249
- return days;
3250
- }
3251
- isToday(date) {
3252
- const today = new Date();
3253
- return (date.getDate() === today.getDate() &&
3254
- date.getMonth() === today.getMonth() &&
3255
- date.getFullYear() === today.getFullYear());
3256
- }
3257
- isSelected(date) {
3258
- if (this.mode === 'single') {
3259
- if (!this.selectedDate)
3260
- return false;
3261
- return (date.getDate() === this.selectedDate.getDate() &&
3262
- date.getMonth() === this.selectedDate.getMonth() &&
3263
- date.getFullYear() === this.selectedDate.getFullYear());
3264
- }
3265
- else {
3266
- if (!this.rangeStart && !this.rangeEnd)
3267
- return false;
3268
- if (this.rangeStart && this.rangeEnd) {
3269
- return ((date >= this.rangeStart && date <= this.rangeEnd) ||
3270
- (date >= this.rangeEnd && date <= this.rangeStart));
3271
- }
3272
- if (this.rangeStart) {
3273
- return (date.getDate() === this.rangeStart.getDate() &&
3274
- date.getMonth() === this.rangeStart.getMonth() &&
3275
- date.getFullYear() === this.rangeStart.getFullYear());
3276
- }
3277
- return false;
3278
- }
3279
- }
3280
- isInRange(date) {
3281
- if (this.mode !== 'range')
3282
- return false;
3283
- if (!this.rangeStart || !this.rangeEnd) {
3284
- if (this.rangeStart && this.hoveredDate) {
3285
- const start = this.rangeStart < this.hoveredDate ? this.rangeStart : this.hoveredDate;
3286
- const end = this.rangeStart < this.hoveredDate ? this.hoveredDate : this.rangeStart;
3287
- return date >= start && date <= end;
3288
- }
3289
- return false;
3290
- }
3291
- const start = this.rangeStart < this.rangeEnd ? this.rangeStart : this.rangeEnd;
3292
- const end = this.rangeStart < this.rangeEnd ? this.rangeEnd : this.rangeStart;
3293
- return date >= start && date <= end;
3294
- }
3295
- isDisabled(date) {
3296
- if (this.minDate) {
3297
- const min = new Date(this.minDate);
3298
- min.setHours(0, 0, 0, 0);
3299
- const dateCompare = new Date(date);
3300
- dateCompare.setHours(0, 0, 0, 0);
3301
- if (dateCompare < min)
3302
- return true;
3303
- }
3304
- if (this.maxDate) {
3305
- const max = new Date(this.maxDate);
3306
- max.setHours(23, 59, 59, 999);
3307
- const dateCompare = new Date(date);
3308
- dateCompare.setHours(23, 59, 59, 999);
3309
- if (dateCompare > max)
3310
- return true;
3311
- }
3312
- return false;
3313
- }
3314
- onDayClick(date, event) {
3315
- if (!date)
3316
- return;
3317
- event.preventDefault();
3318
- event.stopPropagation();
3319
- if (!this.isDisabled(date)) {
3320
- this.selectDate(date);
3321
- }
3322
- }
3323
- selectDate(date) {
3324
- if (this.isDisabled(date))
3325
- return;
3326
- if (this.mode === 'single') {
3327
- this.selectedDate = new Date(date);
3328
- this.value = new Date(date);
3329
- // Calculate and set display value
3330
- const formattedDate = this.formatDate(this.selectedDate);
3331
- // Update displayValue
3332
- this.displayValue = formattedDate;
3333
- // Update textfield using writeValue (ControlValueAccessor method)
3334
- if (this.textfieldRef) {
3335
- this.textfieldRef.writeValue(formattedDate);
3336
- }
3337
- // Force change detection
3338
- this.cdr.detectChanges();
3339
- // One more update after Angular processes the change
3340
- setTimeout(() => {
3341
- if (this.textfieldRef) {
3342
- this.textfieldRef.writeValue(formattedDate);
3343
- }
3344
- this.cdr.detectChanges();
3345
- }, 10);
3346
- // Emit events
3347
- this.valueChange.emit(this.value);
3348
- this.dateSelected.emit(this.value);
3349
- // Close calendar after a delay to ensure value is updated and visible
3350
- setTimeout(() => {
3351
- this.closeCalendar();
3352
- }, 100);
3353
- }
3354
- else {
3355
- if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {
3356
- // Start new range
3357
- this.rangeStart = new Date(date);
3358
- this.rangeEnd = null;
3359
- this.hoveredDate = null;
3360
- const formattedDate = this.formatDate(this.rangeStart);
3361
- const displayText = `${formattedDate} - ...`;
3362
- this.displayValue = displayText;
3363
- this.updateTextField(displayText);
3364
- }
3365
- else {
3366
- // Complete range
3367
- this.rangeEnd = new Date(date);
3368
- const range = {
3369
- start: this.rangeStart,
3370
- end: this.rangeEnd,
3371
- };
3372
- this.value = range;
3373
- const formattedValue = `${this.formatDate(range.start)} - ${this.formatDate(range.end)}`;
3374
- this.displayValue = formattedValue;
3375
- this.updateTextField(formattedValue);
3376
- this.valueChange.emit(this.value);
3377
- this.dateSelected.emit(this.value);
3378
- // Close calendar after a delay to ensure value is updated
3379
- setTimeout(() => {
3380
- this.closeCalendar();
3381
- }, 100);
3382
- }
3383
- }
3384
- }
3385
- updateTextField(value) {
3386
- // This method is kept for compatibility but the main update is done in selectDate
3387
- // Update displayValue
3388
- this.displayValue = value;
3389
- // Update via writeValue
3390
- if (this.textfieldRef) {
3391
- this.textfieldRef.writeValue(value);
3392
- }
3393
- // Force change detection
3394
- this.cdr.detectChanges();
3395
- }
3396
- onDateHover(date) {
3397
- if (this.mode === 'range' && this.rangeStart && !this.rangeEnd) {
3398
- this.hoveredDate = new Date(date);
3399
- }
3400
- }
3401
- previousMonth() {
3402
- this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1, 1);
3403
- }
3404
- nextMonth() {
3405
- this.currentMonth = new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1, 1);
3406
- }
3407
- goToToday() {
3408
- const today = new Date();
3409
- if (!this.isDisabled(today)) {
3410
- this.selectDate(today);
3411
- }
3412
- }
3413
- clearValue() {
3414
- if (this.mode === 'single') {
3415
- this.selectedDate = null;
3416
- this.value = null;
3417
- }
3418
- else {
3419
- this.rangeStart = null;
3420
- this.rangeEnd = null;
3421
- this.value = null;
3422
- }
3423
- this.updateDisplayValue();
3424
- this.valueChange.emit(null);
3425
- this.dateSelected.emit(null);
3426
- this.closeCalendar();
3427
- }
3428
- formatDate(date) {
3429
- if (!date)
3430
- return '';
3431
- const day = String(date.getDate()).padStart(2, '0');
3432
- const month = String(date.getMonth() + 1).padStart(2, '0');
3433
- const year = date.getFullYear();
3434
- switch (this.format) {
3435
- case 'DD/MM/YYYY':
3436
- return `${day}/${month}/${year}`;
3437
- case 'MM/DD/YYYY':
3438
- return `${month}/${day}/${year}`;
3439
- case 'YYYY-MM-DD':
3440
- return `${year}-${month}-${day}`;
3441
- case 'DD-MM-YYYY':
3442
- return `${day}-${month}-${year}`;
3443
- default:
3444
- return `${day}/${month}/${year}`;
3445
- }
3446
- }
3447
- updateDisplayValue() {
3448
- const newValue = this.mode === 'single'
3449
- ? (this.selectedDate ? this.formatDate(this.selectedDate) : '')
3450
- : (() => {
3451
- const range = this.value;
3452
- if (range?.start && range?.end) {
3453
- return `${this.formatDate(range.start)} - ${this.formatDate(range.end)}`;
3454
- }
3455
- else if (range?.start) {
3456
- return `${this.formatDate(range.start)} - ...`;
3457
- }
3458
- else {
3459
- return '';
3460
- }
3461
- })();
3462
- // Update displayValue (for internal use)
3463
- this.displayValue = newValue;
3464
- // Update textfield using writeValue (ControlValueAccessor method)
3465
- // Use setTimeout to ensure ViewChild is available
3466
- setTimeout(() => {
3467
- if (this.textfieldRef) {
3468
- this.textfieldRef.writeValue(newValue);
3469
- }
3470
- this.cdr.detectChanges();
3471
- }, 0);
3472
- }
3473
- getMonthName() {
3474
- return this.monthsES[this.currentMonth.getMonth()];
3475
- }
3476
- getYear() {
3477
- return this.currentMonth.getFullYear();
3478
- }
3479
- getDayNames() {
3480
- const days = [...this.daysES];
3481
- if (this.firstDayOfWeek === 1) {
3482
- // Move Sunday to the end
3483
- const sunday = days.shift();
3484
- if (sunday)
3485
- days.push(sunday);
3486
- }
3487
- return days;
3488
- }
3489
- get containerClasses() {
3490
- return [
3491
- 'sefin-datepicker',
3492
- this.isOpen ? 'sefin-datepicker--open' : '',
3493
- this.class,
3494
- ]
3495
- .filter(Boolean)
3496
- .join(' ');
3497
- }
3498
- get todayDate() {
3499
- return new Date();
3500
- }
3501
- isTodayDisabled() {
3502
- return this.isDisabled(this.todayDate);
3503
- }
3504
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
3505
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatepickerComponent, isStandalone: true, selector: "sefin-datepicker", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", class: "class", format: "format", mode: "mode", minDate: "minDate", maxDate: "maxDate", showTodayButton: "showTodayButton", showClearButton: "showClearButton", locale: "locale", firstDayOfWeek: "firstDayOfWeek" }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected" }, host: { listeners: { "document:click": "onClickOutside($event)", "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true }, { propertyName: "textfieldRef", first: true, predicate: ["textfieldRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"'calendar'\"\n (click)=\"onInputClick()\"\n (focus)=\"onInputFocus()\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n <div class=\"sefin-datepicker__actions\">\n <button\n *ngIf=\"displayValue && showClearButton && !disabled\"\n type=\"button\"\n class=\"sefin-datepicker__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Limpiar fecha\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Mes anterior\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-datepicker__month-year\">\n <span class=\"sefin-datepicker__month\">{{ getMonthName() }}</span>\n <span class=\"sefin-datepicker__year\">{{ getYear() }}</span>\n </div>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Mes siguiente\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <div class=\"sefin-datepicker__calendar-body\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let dayName of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ dayName }}\n </div>\n </div>\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); let i = index\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (click)=\"day && !isDisabled(day) && selectDate(day); $event.stopPropagation(); $event.preventDefault()\"\n (mouseenter)=\"day && onDateHover(day)\"\n [attr.aria-label]=\"day ? formatDate(day) : ''\"\n >\n <span *ngIf=\"day\">{{ day.getDate() }}</span>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showTodayButton\" class=\"sefin-datepicker__calendar-footer\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__today-button\"\n (click)=\"goToToday()\"\n [disabled]=\"isTodayDisabled()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-datepicker{position:relative;width:100%}.sefin-datepicker__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer}.sefin-datepicker__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs);z-index:1;pointer-events:none}.sefin-datepicker__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out;pointer-events:all}.sefin-datepicker__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-datepicker__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__clear svg{width:16px;height:16px}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px}.sefin-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md)}.sefin-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__nav-button:hover{background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__nav-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav-button svg{width:16px;height:16px}.sefin-datepicker__month-year{display:flex;align-items:center;gap:var(--sefin-spacing-xs);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text)}.sefin-datepicker__month{text-transform:capitalize}.sefin-datepicker__year{color:var(--sefin-color-text-secondary)}.sefin-datepicker__calendar-body{margin-bottom:var(--sefin-spacing-sm)}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--in-range{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__calendar-footer{display:flex;align-items:center;justify-content:center;padding-top:var(--sefin-spacing-sm);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today-button{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus)}.sefin-datepicker__today-button:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield__input{border-color:var(--sefin-color-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextFieldComponent, selector: "sefin-textfield", inputs: ["variant", "size", "type", "placeholder", "hint", "errorMessage", "required", "disabled", "readonly", "maxLength", "minLength", "pattern", "leadingIcon", "trailingIcon", "showCounter", "autocomplete", "name", "id", "class", "customValidator"], outputs: ["valueChange", "focused", "blurred", "trailingIconClick"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
3506
- }
3507
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatepickerComponent, decorators: [{
3508
- type: Component,
3509
- args: [{ selector: 'sefin-datepicker', standalone: true, imports: [CommonModule, FormsModule, TextFieldComponent, IconComponent], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-datepicker__wrapper\">\n <sefin-textfield\n #textfieldRef\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [readonly]=\"true\"\n [trailingIcon]=\"'calendar'\"\n (click)=\"onInputClick()\"\n (focus)=\"onInputFocus()\"\n class=\"sefin-datepicker__input\"\n ></sefin-textfield>\n <div class=\"sefin-datepicker__actions\">\n <button\n *ngIf=\"displayValue && showClearButton && !disabled\"\n type=\"button\"\n class=\"sefin-datepicker__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Limpiar fecha\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <div\n *ngIf=\"isOpen\"\n #calendarRef\n class=\"sefin-datepicker__calendar\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"sefin-datepicker__calendar-header\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav-button\"\n (click)=\"previousMonth()\"\n aria-label=\"Mes anterior\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-datepicker__month-year\">\n <span class=\"sefin-datepicker__month\">{{ getMonthName() }}</span>\n <span class=\"sefin-datepicker__year\">{{ getYear() }}</span>\n </div>\n <button\n type=\"button\"\n class=\"sefin-datepicker__nav-button\"\n (click)=\"nextMonth()\"\n aria-label=\"Mes siguiente\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <div class=\"sefin-datepicker__calendar-body\">\n <div class=\"sefin-datepicker__weekdays\">\n <div\n *ngFor=\"let dayName of getDayNames()\"\n class=\"sefin-datepicker__weekday\"\n >\n {{ dayName }}\n </div>\n </div>\n <div class=\"sefin-datepicker__days\">\n <button\n *ngFor=\"let day of getCalendarDays(); let i = index\"\n type=\"button\"\n class=\"sefin-datepicker__day\"\n [class.sefin-datepicker__day--today]=\"day && isToday(day)\"\n [class.sefin-datepicker__day--selected]=\"day && isSelected(day)\"\n [class.sefin-datepicker__day--in-range]=\"day && isInRange(day)\"\n [class.sefin-datepicker__day--disabled]=\"day && isDisabled(day)\"\n [class.sefin-datepicker__day--empty]=\"!day\"\n [disabled]=\"!day || (day && isDisabled(day))\"\n (click)=\"day && !isDisabled(day) && selectDate(day); $event.stopPropagation(); $event.preventDefault()\"\n (mouseenter)=\"day && onDateHover(day)\"\n [attr.aria-label]=\"day ? formatDate(day) : ''\"\n >\n <span *ngIf=\"day\">{{ day.getDate() }}</span>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"showTodayButton\" class=\"sefin-datepicker__calendar-footer\">\n <button\n type=\"button\"\n class=\"sefin-datepicker__today-button\"\n (click)=\"goToToday()\"\n [disabled]=\"isTodayDisabled()\"\n >\n Hoy\n </button>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-datepicker{position:relative;width:100%}.sefin-datepicker__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-datepicker__input{width:100%;cursor:pointer}.sefin-datepicker__input ::ng-deep .sefin-textfield__input{cursor:pointer}.sefin-datepicker__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs);z-index:1;pointer-events:none}.sefin-datepicker__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out;pointer-events:all}.sefin-datepicker__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-datepicker__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__clear svg{width:16px;height:16px}.sefin-datepicker__calendar{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);padding:var(--sefin-spacing-md);min-width:300px;max-width:320px}.sefin-datepicker__calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sefin-spacing-md)}.sefin-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__nav-button:hover{background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__nav-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__nav-button svg{width:16px;height:16px}.sefin-datepicker__month-year{display:flex;align-items:center;gap:var(--sefin-spacing-xs);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-semibold);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text)}.sefin-datepicker__month{text-transform:capitalize}.sefin-datepicker__year{color:var(--sefin-color-text-secondary)}.sefin-datepicker__calendar-body{margin-bottom:var(--sefin-spacing-sm)}.sefin-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs);margin-bottom:var(--sefin-spacing-xs)}.sefin-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:32px;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.sefin-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sefin-spacing-xs)}.sefin-datepicker__day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .15s ease-in-out;position:relative}.sefin-datepicker__day:hover:not(.sefin-datepicker__day--disabled):not(.sefin-datepicker__day--empty){background-color:var(--sefin-color-surface-hover)}.sefin-datepicker__day--today{font-weight:var(--sefin-font-weight-semibold);color:var(--sefin-color-primary)}.sefin-datepicker__day--today:before{content:\"\";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;background-color:var(--sefin-color-primary);border-radius:50%}.sefin-datepicker__day--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-surface);font-weight:var(--sefin-font-weight-semibold)}.sefin-datepicker__day--selected:before{display:none}.sefin-datepicker__day--in-range{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary)}.sefin-datepicker__day--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sefin-datepicker__day--empty{cursor:default;pointer-events:none}.sefin-datepicker__day:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker__calendar-footer{display:flex;align-items:center;justify-content:center;padding-top:var(--sefin-spacing-sm);border-top:1px solid var(--sefin-color-border)}.sefin-datepicker__today-button{padding:var(--sefin-spacing-xs) var(--sefin-spacing-md);background:transparent;border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-sm);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;transition:all .2s ease-in-out}.sefin-datepicker__today-button:hover:not(:disabled){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-border-focus)}.sefin-datepicker__today-button:disabled{opacity:.5;cursor:not-allowed}.sefin-datepicker__today-button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-datepicker--open .sefin-datepicker__input ::ng-deep .sefin-textfield__input{border-color:var(--sefin-color-border-focus)}\n"] }]
3510
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { containerRef: [{
3511
- type: ViewChild,
3512
- args: ['containerRef', { static: false }]
3513
- }], calendarRef: [{
3514
- type: ViewChild,
3515
- args: ['calendarRef', { static: false }]
3516
- }], textfieldRef: [{
3517
- type: ViewChild,
3518
- args: ['textfieldRef', { static: false }]
3519
- }], value: [{
3520
- type: Input
3521
- }], placeholder: [{
3522
- type: Input
3523
- }], disabled: [{
3524
- type: Input
3525
- }], size: [{
3526
- type: Input
3527
- }], class: [{
3528
- type: Input
3529
- }], format: [{
3530
- type: Input
3531
- }], mode: [{
3532
- type: Input
3533
- }], minDate: [{
3534
- type: Input
3535
- }], maxDate: [{
3536
- type: Input
3537
- }], showTodayButton: [{
3538
- type: Input
3539
- }], showClearButton: [{
3540
- type: Input
3541
- }], locale: [{
3542
- type: Input
3543
- }], firstDayOfWeek: [{
3544
- type: Input
3545
- }], valueChange: [{
3546
- type: Output
3547
- }], dateSelected: [{
3548
- type: Output
3549
- }], onClickOutside: [{
3550
- type: HostListener,
3551
- args: ['document:click', ['$event']]
3552
- }], onKeyDown: [{
3553
- type: HostListener,
3554
- args: ['document:keydown', ['$event']]
3555
- }] } });
3556
-
3557
- /**
3558
- * Molecules index
3559
- */
3560
-
3561
- /*
3562
- * Public API Surface of @lesterarte/sefin-ui
3563
- */
3564
- // Design Tokens
3565
- // Styles (for importing in consuming apps)
3566
- const STYLES_PATH = './styles/index.scss';
3567
-
3568
- /**
3569
- * Generated bundle index. Do not edit.
3570
- */
3571
-
3572
- export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
3573
- //# sourceMappingURL=lesterarte-sefin-ui.mjs.map