@lesterarte/sefin-ui 0.0.3-dev.0 → 0.0.3-dev.10
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.
- package/README.md +70 -5
- package/fesm2022/lesterarte-sefin-ui.mjs +362 -300
- package/fesm2022/lesterarte-sefin-ui.mjs.map +1 -1
- package/package.json +2 -5
- package/types/lesterarte-sefin-ui.d.ts +167 -128
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component,
|
|
2
|
+
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { FormsModule
|
|
6
|
+
import { FormsModule } from '@angular/forms';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Color design tokens as TypeScript constants
|
|
@@ -341,41 +341,107 @@ const BRAND_THEME = {
|
|
|
341
341
|
class ThemeLoader {
|
|
342
342
|
/**
|
|
343
343
|
* Load a theme and apply it to the document root
|
|
344
|
+
* @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
|
|
345
|
+
* @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
|
|
344
346
|
*/
|
|
345
|
-
static loadTheme(themeName = 'light') {
|
|
346
|
-
|
|
347
|
+
static loadTheme(themeName = 'light', variant) {
|
|
348
|
+
let theme;
|
|
349
|
+
let colors;
|
|
350
|
+
if (typeof themeName === 'string') {
|
|
351
|
+
theme = this.getTheme(themeName);
|
|
352
|
+
colors = theme.colors;
|
|
353
|
+
}
|
|
354
|
+
else {
|
|
355
|
+
theme = themeName;
|
|
356
|
+
// If variant is specified and theme has variants, use variant colors
|
|
357
|
+
if (variant && theme.variants) {
|
|
358
|
+
const variantColors = theme.variants[variant];
|
|
359
|
+
if (variantColors) {
|
|
360
|
+
colors = variantColors;
|
|
361
|
+
}
|
|
362
|
+
else {
|
|
363
|
+
// Fallback to base colors if variant doesn't exist
|
|
364
|
+
colors = theme.colors;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
else {
|
|
368
|
+
// Use base colors if no variant specified or no variants defined
|
|
369
|
+
colors = theme.colors;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
347
372
|
const root = document.documentElement;
|
|
348
373
|
// Apply color tokens
|
|
349
|
-
Object.entries(
|
|
350
|
-
|
|
374
|
+
Object.entries(colors).forEach(([key, value]) => {
|
|
375
|
+
if (value) {
|
|
376
|
+
root.style.setProperty(`--sefin-color-${key}`, value);
|
|
377
|
+
}
|
|
351
378
|
});
|
|
352
|
-
// Apply spacing tokens
|
|
353
|
-
|
|
379
|
+
// Apply spacing tokens (use custom if provided, otherwise use defaults)
|
|
380
|
+
const spacingTokens = typeof themeName === 'object' && themeName.spacing
|
|
381
|
+
? { ...SPACING_TOKENS, ...themeName.spacing }
|
|
382
|
+
: SPACING_TOKENS;
|
|
383
|
+
Object.entries(spacingTokens).forEach(([key, value]) => {
|
|
354
384
|
root.style.setProperty(`--sefin-spacing-${key}`, value);
|
|
355
385
|
});
|
|
356
|
-
// Apply typography tokens
|
|
357
|
-
|
|
386
|
+
// Apply typography tokens (use custom if provided, otherwise use defaults)
|
|
387
|
+
const typographyTokens = typeof themeName === 'object' && themeName.typography
|
|
388
|
+
? {
|
|
389
|
+
fontFamily: { ...TYPOGRAPHY_TOKENS.fontFamily, ...themeName.typography.fontFamily },
|
|
390
|
+
fontSize: { ...TYPOGRAPHY_TOKENS.fontSize, ...themeName.typography.fontSize },
|
|
391
|
+
fontWeight: { ...TYPOGRAPHY_TOKENS.fontWeight, ...themeName.typography.fontWeight },
|
|
392
|
+
lineHeight: { ...TYPOGRAPHY_TOKENS.lineHeight, ...themeName.typography.lineHeight },
|
|
393
|
+
}
|
|
394
|
+
: TYPOGRAPHY_TOKENS;
|
|
395
|
+
Object.entries(typographyTokens.fontFamily).forEach(([key, value]) => {
|
|
358
396
|
root.style.setProperty(`--sefin-font-family-${key}`, value);
|
|
359
397
|
});
|
|
360
|
-
Object.entries(
|
|
398
|
+
Object.entries(typographyTokens.fontSize).forEach(([key, value]) => {
|
|
361
399
|
root.style.setProperty(`--sefin-font-size-${key}`, value);
|
|
362
400
|
});
|
|
363
|
-
Object.entries(
|
|
401
|
+
Object.entries(typographyTokens.fontWeight).forEach(([key, value]) => {
|
|
364
402
|
root.style.setProperty(`--sefin-font-weight-${key}`, String(value));
|
|
365
403
|
});
|
|
366
|
-
Object.entries(
|
|
404
|
+
Object.entries(typographyTokens.lineHeight).forEach(([key, value]) => {
|
|
367
405
|
root.style.setProperty(`--sefin-line-height-${key}`, String(value));
|
|
368
406
|
});
|
|
369
|
-
// Apply border radius tokens
|
|
370
|
-
|
|
407
|
+
// Apply border radius tokens (use custom if provided, otherwise use defaults)
|
|
408
|
+
const borderRadiusTokens = typeof themeName === 'object' && themeName.borderRadius
|
|
409
|
+
? { ...BORDER_RADIUS_TOKENS, ...themeName.borderRadius }
|
|
410
|
+
: BORDER_RADIUS_TOKENS;
|
|
411
|
+
Object.entries(borderRadiusTokens).forEach(([key, value]) => {
|
|
371
412
|
root.style.setProperty(`--sefin-radius-${key}`, value);
|
|
372
413
|
});
|
|
373
|
-
// Apply shadow tokens
|
|
374
|
-
|
|
414
|
+
// Apply shadow tokens (use custom if provided, otherwise use defaults)
|
|
415
|
+
const shadowTokens = typeof themeName === 'object' && themeName.shadow
|
|
416
|
+
? { ...SHADOW_TOKENS, ...themeName.shadow }
|
|
417
|
+
: SHADOW_TOKENS;
|
|
418
|
+
Object.entries(shadowTokens).forEach(([key, value]) => {
|
|
375
419
|
root.style.setProperty(`--sefin-shadow-${key}`, value);
|
|
376
420
|
});
|
|
377
421
|
// Set theme attribute for CSS selectors
|
|
378
|
-
|
|
422
|
+
let themeAttribute;
|
|
423
|
+
if (typeof themeName === 'string') {
|
|
424
|
+
themeAttribute = themeName;
|
|
425
|
+
}
|
|
426
|
+
else {
|
|
427
|
+
themeAttribute = variant
|
|
428
|
+
? `${themeName.name}-${variant}`
|
|
429
|
+
: themeName.name;
|
|
430
|
+
}
|
|
431
|
+
root.setAttribute('data-theme', themeAttribute);
|
|
432
|
+
}
|
|
433
|
+
/**
|
|
434
|
+
* Load a custom theme variant (light or dark)
|
|
435
|
+
* @param customTheme - CustomTheme object with variants support
|
|
436
|
+
* @param variant - Variant to load ('light' or 'dark')
|
|
437
|
+
*/
|
|
438
|
+
static loadThemeVariant(customTheme, variant) {
|
|
439
|
+
if (!customTheme.variants) {
|
|
440
|
+
console.warn(`Theme "${customTheme.name}" does not have variants. Loading base theme.`);
|
|
441
|
+
this.loadTheme(customTheme);
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
this.loadTheme(customTheme, variant);
|
|
379
445
|
}
|
|
380
446
|
/**
|
|
381
447
|
* Get theme configuration by name
|
|
@@ -393,37 +459,79 @@ class ThemeLoader {
|
|
|
393
459
|
}
|
|
394
460
|
/**
|
|
395
461
|
* Get all CSS variables as a string (useful for SSR or static generation)
|
|
462
|
+
* @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
|
|
463
|
+
* @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
|
|
396
464
|
*/
|
|
397
|
-
static getThemeCSS(themeName = 'light') {
|
|
398
|
-
|
|
465
|
+
static getThemeCSS(themeName = 'light', variant) {
|
|
466
|
+
let theme;
|
|
467
|
+
let colors;
|
|
468
|
+
if (typeof themeName === 'string') {
|
|
469
|
+
theme = this.getTheme(themeName);
|
|
470
|
+
colors = theme.colors;
|
|
471
|
+
}
|
|
472
|
+
else {
|
|
473
|
+
theme = themeName;
|
|
474
|
+
// If variant is specified and theme has variants, use variant colors
|
|
475
|
+
if (variant && theme.variants) {
|
|
476
|
+
const variantColors = theme.variants[variant];
|
|
477
|
+
if (variantColors) {
|
|
478
|
+
colors = variantColors;
|
|
479
|
+
}
|
|
480
|
+
else {
|
|
481
|
+
colors = theme.colors;
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
else {
|
|
485
|
+
colors = theme.colors;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
399
488
|
let css = ':root {\n';
|
|
400
489
|
// Color tokens
|
|
401
|
-
Object.entries(
|
|
402
|
-
|
|
490
|
+
Object.entries(colors).forEach(([key, value]) => {
|
|
491
|
+
if (value) {
|
|
492
|
+
css += ` --sefin-color-${key}: ${value};\n`;
|
|
493
|
+
}
|
|
403
494
|
});
|
|
404
495
|
// Spacing tokens
|
|
405
|
-
|
|
496
|
+
const spacingTokens = typeof themeName === 'object' && themeName.spacing
|
|
497
|
+
? { ...SPACING_TOKENS, ...themeName.spacing }
|
|
498
|
+
: SPACING_TOKENS;
|
|
499
|
+
Object.entries(spacingTokens).forEach(([key, value]) => {
|
|
406
500
|
css += ` --sefin-spacing-${key}: ${value};\n`;
|
|
407
501
|
});
|
|
408
502
|
// Typography tokens
|
|
409
|
-
|
|
503
|
+
const typographyTokens = typeof themeName === 'object' && themeName.typography
|
|
504
|
+
? {
|
|
505
|
+
fontFamily: { ...TYPOGRAPHY_TOKENS.fontFamily, ...themeName.typography.fontFamily },
|
|
506
|
+
fontSize: { ...TYPOGRAPHY_TOKENS.fontSize, ...themeName.typography.fontSize },
|
|
507
|
+
fontWeight: { ...TYPOGRAPHY_TOKENS.fontWeight, ...themeName.typography.fontWeight },
|
|
508
|
+
lineHeight: { ...TYPOGRAPHY_TOKENS.lineHeight, ...themeName.typography.lineHeight },
|
|
509
|
+
}
|
|
510
|
+
: TYPOGRAPHY_TOKENS;
|
|
511
|
+
Object.entries(typographyTokens.fontFamily).forEach(([key, value]) => {
|
|
410
512
|
css += ` --sefin-font-family-${key}: ${value};\n`;
|
|
411
513
|
});
|
|
412
|
-
Object.entries(
|
|
514
|
+
Object.entries(typographyTokens.fontSize).forEach(([key, value]) => {
|
|
413
515
|
css += ` --sefin-font-size-${key}: ${value};\n`;
|
|
414
516
|
});
|
|
415
|
-
Object.entries(
|
|
517
|
+
Object.entries(typographyTokens.fontWeight).forEach(([key, value]) => {
|
|
416
518
|
css += ` --sefin-font-weight-${key}: ${value};\n`;
|
|
417
519
|
});
|
|
418
|
-
Object.entries(
|
|
520
|
+
Object.entries(typographyTokens.lineHeight).forEach(([key, value]) => {
|
|
419
521
|
css += ` --sefin-line-height-${key}: ${value};\n`;
|
|
420
522
|
});
|
|
421
523
|
// Border radius tokens
|
|
422
|
-
|
|
524
|
+
const borderRadiusTokens = typeof themeName === 'object' && themeName.borderRadius
|
|
525
|
+
? { ...BORDER_RADIUS_TOKENS, ...themeName.borderRadius }
|
|
526
|
+
: BORDER_RADIUS_TOKENS;
|
|
527
|
+
Object.entries(borderRadiusTokens).forEach(([key, value]) => {
|
|
423
528
|
css += ` --sefin-radius-${key}: ${value};\n`;
|
|
424
529
|
});
|
|
425
530
|
// Shadow tokens
|
|
426
|
-
|
|
531
|
+
const shadowTokens = typeof themeName === 'object' && themeName.shadow
|
|
532
|
+
? { ...SHADOW_TOKENS, ...themeName.shadow }
|
|
533
|
+
: SHADOW_TOKENS;
|
|
534
|
+
Object.entries(shadowTokens).forEach(([key, value]) => {
|
|
427
535
|
css += ` --sefin-shadow-${key}: ${value};\n`;
|
|
428
536
|
});
|
|
429
537
|
css += '}\n';
|
|
@@ -467,11 +575,11 @@ class ButtonComponent {
|
|
|
467
575
|
.join(' ');
|
|
468
576
|
}
|
|
469
577
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
-
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
|
|
578
|
+
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 });
|
|
471
579
|
}
|
|
472
580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
473
581
|
type: Component,
|
|
474
|
-
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
|
|
582
|
+
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"] }]
|
|
475
583
|
}], propDecorators: { variant: [{
|
|
476
584
|
type: Input
|
|
477
585
|
}], size: [{
|
|
@@ -486,191 +594,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
486
594
|
type: Output
|
|
487
595
|
}] } });
|
|
488
596
|
|
|
489
|
-
class
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
return [
|
|
495
|
-
'sefin-icon',
|
|
496
|
-
`sefin-icon--${this.size}`,
|
|
497
|
-
this.class,
|
|
498
|
-
]
|
|
499
|
-
.filter(Boolean)
|
|
500
|
-
.join(' ');
|
|
501
|
-
}
|
|
502
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
503
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: IconComponent, isStandalone: true, selector: "sefin-icon", inputs: { name: "name", size: "size", class: "class" }, ngImport: i0, template: "<span [class]=\"iconClasses\" [attr.aria-label]=\"name\">\n <ng-content></ng-content>\n</span>\n\n", styles: [".sefin-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.sefin-icon--sm{width:16px;height:16px;font-size:16px}.sefin-icon--md{width:24px;height:24px;font-size:24px}.sefin-icon--lg{width:32px;height:32px;font-size:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
504
|
-
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, decorators: [{
|
|
506
|
-
type: Component,
|
|
507
|
-
args: [{ selector: 'sefin-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"iconClasses\" [attr.aria-label]=\"name\">\n <ng-content></ng-content>\n</span>\n\n", styles: [".sefin-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor}.sefin-icon--sm{width:16px;height:16px;font-size:16px}.sefin-icon--md{width:24px;height:24px;font-size:24px}.sefin-icon--lg{width:32px;height:32px;font-size:32px}\n"] }]
|
|
508
|
-
}], propDecorators: { name: [{
|
|
509
|
-
type: Input
|
|
510
|
-
}], size: [{
|
|
511
|
-
type: Input
|
|
512
|
-
}], class: [{
|
|
513
|
-
type: Input
|
|
514
|
-
}] } });
|
|
515
|
-
|
|
516
|
-
class InputComponent {
|
|
517
|
-
type = 'text';
|
|
597
|
+
class AutocompleteComponent {
|
|
598
|
+
inputRef;
|
|
599
|
+
dropdownRef;
|
|
600
|
+
containerRef;
|
|
601
|
+
options = [];
|
|
518
602
|
placeholder = '';
|
|
519
|
-
size = 'md';
|
|
520
603
|
disabled = false;
|
|
521
|
-
|
|
522
|
-
readonly = false;
|
|
604
|
+
size = 'md';
|
|
523
605
|
class = '';
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
606
|
+
value = null;
|
|
607
|
+
minChars = 0;
|
|
608
|
+
maxResults = 10;
|
|
609
|
+
valueChange = new EventEmitter();
|
|
610
|
+
optionSelected = new EventEmitter();
|
|
611
|
+
inputChange = new EventEmitter();
|
|
612
|
+
searchText = '';
|
|
613
|
+
filteredOptions = [];
|
|
614
|
+
isOpen = false;
|
|
615
|
+
selectedIndex = -1;
|
|
616
|
+
ngOnInit() {
|
|
617
|
+
if (this.value !== null) {
|
|
618
|
+
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
619
|
+
this.searchText = selectedOption?.label || String(this.value);
|
|
620
|
+
}
|
|
621
|
+
}
|
|
622
|
+
ngOnChanges(changes) {
|
|
623
|
+
if (changes['options']) {
|
|
624
|
+
const options = changes['options'].currentValue || [];
|
|
625
|
+
if (this.value !== null) {
|
|
626
|
+
const selectedOption = options.find((opt) => opt.value === this.value);
|
|
627
|
+
if (selectedOption) {
|
|
628
|
+
this.searchText = selectedOption.label;
|
|
629
|
+
}
|
|
630
|
+
else {
|
|
631
|
+
this.searchText = '';
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
if (changes['value']) {
|
|
636
|
+
if (this.value !== null) {
|
|
637
|
+
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
638
|
+
this.searchText = selectedOption?.label || String(this.value);
|
|
639
|
+
}
|
|
640
|
+
else {
|
|
641
|
+
this.searchText = '';
|
|
642
|
+
}
|
|
643
|
+
this.filteredOptions = [];
|
|
644
|
+
this.isOpen = false;
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
ngOnDestroy() {
|
|
534
648
|
}
|
|
535
|
-
|
|
536
|
-
this.
|
|
537
|
-
|
|
649
|
+
onClickOutside(event) {
|
|
650
|
+
if (this.containerRef?.nativeElement && this.isOpen) {
|
|
651
|
+
const clickedInside = this.containerRef.nativeElement.contains(event.target);
|
|
652
|
+
if (!clickedInside) {
|
|
653
|
+
this.isOpen = false;
|
|
654
|
+
this.selectedIndex = -1;
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
}
|
|
658
|
+
onInputChange(value) {
|
|
659
|
+
this.searchText = value;
|
|
660
|
+
this.inputChange.emit(value);
|
|
661
|
+
if (this.options && this.options.length > 0) {
|
|
662
|
+
this.filterOptions();
|
|
663
|
+
this.isOpen = value.length >= this.minChars;
|
|
664
|
+
}
|
|
665
|
+
else {
|
|
666
|
+
this.isOpen = false;
|
|
667
|
+
this.filteredOptions = [];
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
filterOptions() {
|
|
671
|
+
if (!this.options || this.options.length === 0) {
|
|
672
|
+
this.filteredOptions = [];
|
|
673
|
+
return;
|
|
674
|
+
}
|
|
675
|
+
if (this.minChars > 0 &&
|
|
676
|
+
(!this.searchText || this.searchText.length < this.minChars)) {
|
|
677
|
+
this.filteredOptions = [];
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
const searchText = this.searchText || '';
|
|
681
|
+
if (searchText.length === 0) {
|
|
682
|
+
this.filteredOptions = this.options
|
|
683
|
+
.filter((option) => !option.disabled)
|
|
684
|
+
.slice(0, this.maxResults);
|
|
685
|
+
return;
|
|
686
|
+
}
|
|
687
|
+
const searchLower = searchText.toLowerCase();
|
|
688
|
+
this.filteredOptions = this.options
|
|
689
|
+
.filter((option) => {
|
|
690
|
+
if (option.disabled)
|
|
691
|
+
return false;
|
|
692
|
+
return option.label.toLowerCase().includes(searchLower);
|
|
693
|
+
})
|
|
694
|
+
.slice(0, this.maxResults);
|
|
538
695
|
}
|
|
539
|
-
|
|
540
|
-
|
|
696
|
+
selectOption(option) {
|
|
697
|
+
if (option.disabled)
|
|
698
|
+
return;
|
|
699
|
+
this.searchText = option.label;
|
|
700
|
+
this.value = option.value;
|
|
701
|
+
this.valueChange.emit(option.value);
|
|
702
|
+
this.optionSelected.emit(option);
|
|
703
|
+
this.isOpen = false;
|
|
704
|
+
this.selectedIndex = -1;
|
|
705
|
+
}
|
|
706
|
+
onInputFocus() {
|
|
707
|
+
if (this.disabled)
|
|
708
|
+
return;
|
|
709
|
+
if (this.options &&
|
|
710
|
+
Array.isArray(this.options) &&
|
|
711
|
+
this.options.length > 0) {
|
|
712
|
+
this.filterOptions();
|
|
713
|
+
this.isOpen = this.filteredOptions.length > 0;
|
|
714
|
+
}
|
|
715
|
+
else {
|
|
716
|
+
this.isOpen = false;
|
|
717
|
+
this.filteredOptions = [];
|
|
718
|
+
}
|
|
541
719
|
}
|
|
542
|
-
|
|
543
|
-
this.
|
|
720
|
+
onInputBlur() {
|
|
721
|
+
if (this.disabled || !this.searchText) {
|
|
722
|
+
return;
|
|
723
|
+
}
|
|
724
|
+
const exactMatch = this.options.find((option) => !option.disabled &&
|
|
725
|
+
option.label.toLowerCase().trim() === this.searchText.toLowerCase().trim());
|
|
726
|
+
if (!exactMatch) {
|
|
727
|
+
this.searchText = '';
|
|
728
|
+
this.value = null;
|
|
729
|
+
this.valueChange.emit(null);
|
|
730
|
+
this.isOpen = false;
|
|
731
|
+
this.filteredOptions = [];
|
|
732
|
+
this.selectedIndex = -1;
|
|
733
|
+
}
|
|
544
734
|
}
|
|
545
|
-
|
|
546
|
-
this.
|
|
735
|
+
onKeyDown(event) {
|
|
736
|
+
if (!this.isOpen ||
|
|
737
|
+
!this.filteredOptions ||
|
|
738
|
+
this.filteredOptions.length === 0) {
|
|
739
|
+
return;
|
|
740
|
+
}
|
|
741
|
+
switch (event.key) {
|
|
742
|
+
case 'ArrowDown':
|
|
743
|
+
event.preventDefault();
|
|
744
|
+
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredOptions.length - 1);
|
|
745
|
+
setTimeout(() => this.scrollToSelected(), 0);
|
|
746
|
+
break;
|
|
747
|
+
case 'ArrowUp':
|
|
748
|
+
event.preventDefault();
|
|
749
|
+
this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
|
|
750
|
+
setTimeout(() => this.scrollToSelected(), 0);
|
|
751
|
+
break;
|
|
752
|
+
case 'Enter':
|
|
753
|
+
event.preventDefault();
|
|
754
|
+
if (this.selectedIndex >= 0 &&
|
|
755
|
+
this.selectedIndex < this.filteredOptions.length) {
|
|
756
|
+
this.selectOption(this.filteredOptions[this.selectedIndex]);
|
|
757
|
+
}
|
|
758
|
+
break;
|
|
759
|
+
case 'Escape':
|
|
760
|
+
event.preventDefault();
|
|
761
|
+
this.isOpen = false;
|
|
762
|
+
this.selectedIndex = -1;
|
|
763
|
+
break;
|
|
764
|
+
}
|
|
547
765
|
}
|
|
548
|
-
|
|
549
|
-
|
|
766
|
+
scrollToSelected() {
|
|
767
|
+
try {
|
|
768
|
+
if (this.dropdownRef?.nativeElement && this.selectedIndex >= 0) {
|
|
769
|
+
const selectedElement = this.dropdownRef.nativeElement.querySelector(`[data-index="${this.selectedIndex}"]`);
|
|
770
|
+
if (selectedElement && selectedElement instanceof HTMLElement) {
|
|
771
|
+
selectedElement.scrollIntoView({
|
|
772
|
+
block: 'nearest',
|
|
773
|
+
behavior: 'smooth',
|
|
774
|
+
});
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
}
|
|
778
|
+
catch (error) {
|
|
779
|
+
console.warn('Could not scroll to selected option:', error);
|
|
780
|
+
}
|
|
550
781
|
}
|
|
551
|
-
|
|
552
|
-
this.
|
|
782
|
+
clearValue() {
|
|
783
|
+
this.searchText = '';
|
|
784
|
+
this.value = null;
|
|
785
|
+
this.valueChange.emit(null);
|
|
786
|
+
this.isOpen = false;
|
|
787
|
+
this.filteredOptions = [];
|
|
788
|
+
if (this.inputRef?.nativeElement) {
|
|
789
|
+
this.inputRef.nativeElement.focus();
|
|
790
|
+
}
|
|
553
791
|
}
|
|
554
792
|
get inputClasses() {
|
|
555
793
|
return [
|
|
556
|
-
'sefin-
|
|
557
|
-
`sefin-
|
|
558
|
-
this.disabled ? 'sefin-
|
|
794
|
+
'sefin-autocomplete__input',
|
|
795
|
+
`sefin-autocomplete__input--${this.size}`,
|
|
796
|
+
this.disabled ? 'sefin-autocomplete__input--disabled' : '',
|
|
559
797
|
this.class,
|
|
560
798
|
]
|
|
561
799
|
.filter(Boolean)
|
|
562
800
|
.join(' ');
|
|
563
801
|
}
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
574
|
-
type: Component,
|
|
575
|
-
args: [{ selector: 'sefin-input', standalone: true, imports: [CommonModule, FormsModule], providers: [
|
|
576
|
-
{
|
|
577
|
-
provide: NG_VALUE_ACCESSOR,
|
|
578
|
-
useExisting: forwardRef(() => InputComponent),
|
|
579
|
-
multi: true,
|
|
580
|
-
},
|
|
581
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n [type]=\"type\"\n [id]=\"id\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n (focus)=\"onFocus($event)\"\n/>\n\n", styles: [".sefin-input{width:100%;font-family:var(--sefin-font-family-base);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md, 8px);transition:all .2s ease-in-out;outline:none}.sefin-input::placeholder{color:var(--sefin-color-text-secondary)}.sefin-input:focus{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px rgba(var(--sefin-color-primary-rgb, 33, 150, 243),.1)}.sefin-input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed}.sefin-input--sm{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-sm, .875rem);min-height:32px}.sefin-input--md{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);min-height:40px}.sefin-input--lg{padding:var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 1.125rem);min-height:48px}\n"] }]
|
|
582
|
-
}], propDecorators: { type: [{
|
|
583
|
-
type: Input
|
|
584
|
-
}], placeholder: [{
|
|
585
|
-
type: Input
|
|
586
|
-
}], size: [{
|
|
587
|
-
type: Input
|
|
588
|
-
}], disabled: [{
|
|
589
|
-
type: Input
|
|
590
|
-
}], required: [{
|
|
591
|
-
type: Input
|
|
592
|
-
}], readonly: [{
|
|
593
|
-
type: Input
|
|
594
|
-
}], class: [{
|
|
595
|
-
type: Input
|
|
596
|
-
}], id: [{
|
|
597
|
-
type: Input
|
|
598
|
-
}], blur: [{
|
|
599
|
-
type: Output
|
|
600
|
-
}], focus: [{
|
|
601
|
-
type: Output
|
|
602
|
-
}] } });
|
|
603
|
-
|
|
604
|
-
/**
|
|
605
|
-
* Atoms index
|
|
606
|
-
*/
|
|
607
|
-
|
|
608
|
-
class FormFieldComponent {
|
|
609
|
-
label = '';
|
|
610
|
-
hint = '';
|
|
611
|
-
error = '';
|
|
612
|
-
required = false;
|
|
613
|
-
disabled = false;
|
|
614
|
-
inputId = '';
|
|
615
|
-
inputType = 'text';
|
|
616
|
-
placeholder = '';
|
|
617
|
-
size = 'md';
|
|
618
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
619
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FormFieldComponent, isStandalone: true, selector: "sefin-form-field", inputs: { label: "label", hint: "hint", error: "error", required: "required", disabled: "disabled", inputId: "inputId", inputType: "inputType", placeholder: "placeholder", size: "size" }, ngImport: i0, template: "<div class=\"sefin-form-field\">\n <label *ngIf=\"label\" [for]=\"inputId\" class=\"sefin-form-field__label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"sefin-form-field__required\">*</span>\n </label>\n <sefin-input\n [id]=\"inputId\"\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [size]=\"size\"\n [class.sefin-form-field__input--error]=\"!!error\"\n ></sefin-input>\n <div *ngIf=\"hint && !error\" class=\"sefin-form-field__hint\">{{ hint }}</div>\n <div *ngIf=\"error\" class=\"sefin-form-field__error\">{{ error }}</div>\n</div>\n\n", styles: [".sefin-form-field{display:flex;flex-direction:column;gap:var(--sefin-spacing-sm, 8px);width:100%}.sefin-form-field__label{font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text)}.sefin-form-field__required{color:var(--sefin-color-error);margin-left:2px}.sefin-form-field__hint{font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary)}.sefin-form-field__error{font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-error)}.sefin-form-field__input--error{border-color:var(--sefin-color-error)!important}.sefin-form-field__input--error:focus{box-shadow:0 0 0 3px #f443361a!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputComponent, selector: "sefin-input", inputs: ["type", "placeholder", "size", "disabled", "required", "readonly", "class", "id"], outputs: ["blur", "focus"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
620
|
-
}
|
|
621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
622
|
-
type: Component,
|
|
623
|
-
args: [{ selector: 'sefin-form-field', standalone: true, imports: [CommonModule, InputComponent, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sefin-form-field\">\n <label *ngIf=\"label\" [for]=\"inputId\" class=\"sefin-form-field__label\">\n {{ label }}\n <span *ngIf=\"required\" class=\"sefin-form-field__required\">*</span>\n </label>\n <sefin-input\n [id]=\"inputId\"\n [type]=\"inputType\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [size]=\"size\"\n [class.sefin-form-field__input--error]=\"!!error\"\n ></sefin-input>\n <div *ngIf=\"hint && !error\" class=\"sefin-form-field__hint\">{{ hint }}</div>\n <div *ngIf=\"error\" class=\"sefin-form-field__error\">{{ error }}</div>\n</div>\n\n", styles: [".sefin-form-field{display:flex;flex-direction:column;gap:var(--sefin-spacing-sm, 8px);width:100%}.sefin-form-field__label{font-size:var(--sefin-font-size-sm, .875rem);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text)}.sefin-form-field__required{color:var(--sefin-color-error);margin-left:2px}.sefin-form-field__hint{font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary)}.sefin-form-field__error{font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-error)}.sefin-form-field__input--error{border-color:var(--sefin-color-error)!important}.sefin-form-field__input--error:focus{box-shadow:0 0 0 3px #f443361a!important}\n"] }]
|
|
624
|
-
}], propDecorators: { label: [{
|
|
625
|
-
type: Input
|
|
626
|
-
}], hint: [{
|
|
627
|
-
type: Input
|
|
628
|
-
}], error: [{
|
|
629
|
-
type: Input
|
|
630
|
-
}], required: [{
|
|
631
|
-
type: Input
|
|
632
|
-
}], disabled: [{
|
|
633
|
-
type: Input
|
|
634
|
-
}], inputId: [{
|
|
635
|
-
type: Input
|
|
636
|
-
}], inputType: [{
|
|
637
|
-
type: Input
|
|
638
|
-
}], placeholder: [{
|
|
639
|
-
type: Input
|
|
640
|
-
}], size: [{
|
|
641
|
-
type: Input
|
|
642
|
-
}] } });
|
|
643
|
-
|
|
644
|
-
class DropdownComponent {
|
|
645
|
-
options = [];
|
|
646
|
-
placeholder = 'Select an option';
|
|
647
|
-
disabled = false;
|
|
648
|
-
size = 'md';
|
|
649
|
-
selectionChange = new EventEmitter();
|
|
650
|
-
isOpen = false;
|
|
651
|
-
selectedOption = null;
|
|
652
|
-
toggle() {
|
|
653
|
-
if (!this.disabled) {
|
|
654
|
-
this.isOpen = !this.isOpen;
|
|
655
|
-
}
|
|
656
|
-
}
|
|
657
|
-
selectOption(option) {
|
|
658
|
-
if (!option.disabled) {
|
|
659
|
-
this.selectedOption = option;
|
|
660
|
-
this.isOpen = false;
|
|
661
|
-
this.selectionChange.emit(option.value);
|
|
662
|
-
}
|
|
663
|
-
}
|
|
664
|
-
get displayText() {
|
|
665
|
-
return this.selectedOption?.label || this.placeholder;
|
|
802
|
+
get containerClasses() {
|
|
803
|
+
return [
|
|
804
|
+
'sefin-autocomplete',
|
|
805
|
+
this.isOpen && this.filteredOptions.length > 0
|
|
806
|
+
? 'sefin-autocomplete--open'
|
|
807
|
+
: '',
|
|
808
|
+
]
|
|
809
|
+
.filter(Boolean)
|
|
810
|
+
.join(' ');
|
|
666
811
|
}
|
|
667
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type:
|
|
812
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
+
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 });
|
|
669
814
|
}
|
|
670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type:
|
|
815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
671
816
|
type: Component,
|
|
672
|
-
args: [{ selector: 'sefin-
|
|
673
|
-
}], propDecorators: {
|
|
817
|
+
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"] }]
|
|
818
|
+
}], propDecorators: { inputRef: [{
|
|
819
|
+
type: ViewChild,
|
|
820
|
+
args: ['inputRef', { static: false }]
|
|
821
|
+
}], dropdownRef: [{
|
|
822
|
+
type: ViewChild,
|
|
823
|
+
args: ['dropdownRef', { static: false }]
|
|
824
|
+
}], containerRef: [{
|
|
825
|
+
type: ViewChild,
|
|
826
|
+
args: ['containerRef', { static: false }]
|
|
827
|
+
}], options: [{
|
|
674
828
|
type: Input
|
|
675
829
|
}], placeholder: [{
|
|
676
830
|
type: Input
|
|
@@ -678,123 +832,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
678
832
|
type: Input
|
|
679
833
|
}], size: [{
|
|
680
834
|
type: Input
|
|
681
|
-
}], selectionChange: [{
|
|
682
|
-
type: Output
|
|
683
|
-
}] } });
|
|
684
|
-
|
|
685
|
-
class CardComponent {
|
|
686
|
-
variant = 'default';
|
|
687
|
-
class = '';
|
|
688
|
-
get cardClasses() {
|
|
689
|
-
return [
|
|
690
|
-
'sefin-card',
|
|
691
|
-
`sefin-card--${this.variant}`,
|
|
692
|
-
this.class,
|
|
693
|
-
]
|
|
694
|
-
.filter(Boolean)
|
|
695
|
-
.join(' ');
|
|
696
|
-
}
|
|
697
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
698
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", class: "class" }, ngImport: i0, template: "<div [class]=\"cardClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{background-color:var(--sefin-color-surface);border-radius:var(--sefin-radius-lg, 12px);padding:var(--sefin-spacing-lg, 24px);transition:all .2s ease-in-out}.sefin-card--default{background-color:var(--sefin-color-surface)}.sefin-card--elevated{background-color:var(--sefin-color-background-elevated);box-shadow:var(--sefin-shadow-md)}.sefin-card--outlined{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
699
|
-
}
|
|
700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CardComponent, decorators: [{
|
|
701
|
-
type: Component,
|
|
702
|
-
args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\">\n <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{background-color:var(--sefin-color-surface);border-radius:var(--sefin-radius-lg, 12px);padding:var(--sefin-spacing-lg, 24px);transition:all .2s ease-in-out}.sefin-card--default{background-color:var(--sefin-color-surface)}.sefin-card--elevated{background-color:var(--sefin-color-background-elevated);box-shadow:var(--sefin-shadow-md)}.sefin-card--outlined{background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border)}\n"] }]
|
|
703
|
-
}], propDecorators: { variant: [{
|
|
704
|
-
type: Input
|
|
705
835
|
}], class: [{
|
|
706
836
|
type: Input
|
|
707
|
-
}]
|
|
708
|
-
|
|
709
|
-
/**
|
|
710
|
-
* Molecules index
|
|
711
|
-
*/
|
|
712
|
-
|
|
713
|
-
class HeaderComponent {
|
|
714
|
-
title = '';
|
|
715
|
-
logo = '';
|
|
716
|
-
showUserMenu = true;
|
|
717
|
-
userName = '';
|
|
718
|
-
logoClick = new EventEmitter();
|
|
719
|
-
menuClick = new EventEmitter();
|
|
720
|
-
userMenuClick = new EventEmitter();
|
|
721
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
722
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: HeaderComponent, isStandalone: true, selector: "sefin-header", inputs: { title: "title", logo: "logo", showUserMenu: "showUserMenu", userName: "userName" }, outputs: { logoClick: "logoClick", menuClick: "menuClick", userMenuClick: "userMenuClick" }, ngImport: i0, template: "<header class=\"sefin-header\">\n <div class=\"sefin-header__left\">\n <div *ngIf=\"logo\" class=\"sefin-header__logo\" (click)=\"logoClick.emit()\">\n <img [src]=\"logo\" [alt]=\"title\" />\n </div>\n <h1 *ngIf=\"title\" class=\"sefin-header__title\">{{ title }}</h1>\n </div>\n <div class=\"sefin-header__right\">\n <sefin-button\n *ngIf=\"showUserMenu\"\n variant=\"ghost\"\n size=\"md\"\n (clicked)=\"userMenuClick.emit()\"\n class=\"sefin-header__user-menu\"\n >\n <sefin-icon name=\"user\" size=\"md\"></sefin-icon>\n <span *ngIf=\"userName\">{{ userName }}</span>\n </sefin-button>\n <sefin-button\n variant=\"ghost\"\n size=\"md\"\n (clicked)=\"menuClick.emit()\"\n class=\"sefin-header__menu-button\"\n >\n <sefin-icon name=\"menu\" size=\"md\">\u2630</sefin-icon>\n </sefin-button>\n </div>\n</header>\n\n", styles: [".sefin-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface);border-bottom:1px solid var(--sefin-color-border);box-shadow:var(--sefin-shadow-sm)}.sefin-header__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 16px)}.sefin-header__logo{cursor:pointer;display:flex;align-items:center}.sefin-header__logo img{height:40px;width:auto}.sefin-header__title{font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);color:var(--sefin-color-text);margin:0}.sefin-header__right,.sefin-header__user-menu{display:flex;align-items:center;gap:var(--sefin-spacing-sm, 8px)}.sefin-header__menu-button{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "type", "class"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
723
|
-
}
|
|
724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
725
|
-
type: Component,
|
|
726
|
-
args: [{ selector: 'sefin-header', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"sefin-header\">\n <div class=\"sefin-header__left\">\n <div *ngIf=\"logo\" class=\"sefin-header__logo\" (click)=\"logoClick.emit()\">\n <img [src]=\"logo\" [alt]=\"title\" />\n </div>\n <h1 *ngIf=\"title\" class=\"sefin-header__title\">{{ title }}</h1>\n </div>\n <div class=\"sefin-header__right\">\n <sefin-button\n *ngIf=\"showUserMenu\"\n variant=\"ghost\"\n size=\"md\"\n (clicked)=\"userMenuClick.emit()\"\n class=\"sefin-header__user-menu\"\n >\n <sefin-icon name=\"user\" size=\"md\"></sefin-icon>\n <span *ngIf=\"userName\">{{ userName }}</span>\n </sefin-button>\n <sefin-button\n variant=\"ghost\"\n size=\"md\"\n (clicked)=\"menuClick.emit()\"\n class=\"sefin-header__menu-button\"\n >\n <sefin-icon name=\"menu\" size=\"md\">\u2630</sefin-icon>\n </sefin-button>\n </div>\n</header>\n\n", styles: [".sefin-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface);border-bottom:1px solid var(--sefin-color-border);box-shadow:var(--sefin-shadow-sm)}.sefin-header__left{display:flex;align-items:center;gap:var(--sefin-spacing-md, 16px)}.sefin-header__logo{cursor:pointer;display:flex;align-items:center}.sefin-header__logo img{height:40px;width:auto}.sefin-header__title{font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);color:var(--sefin-color-text);margin:0}.sefin-header__right,.sefin-header__user-menu{display:flex;align-items:center;gap:var(--sefin-spacing-sm, 8px)}.sefin-header__menu-button{display:flex;align-items:center}\n"] }]
|
|
727
|
-
}], propDecorators: { title: [{
|
|
728
|
-
type: Input
|
|
729
|
-
}], logo: [{
|
|
837
|
+
}], value: [{
|
|
730
838
|
type: Input
|
|
731
|
-
}],
|
|
839
|
+
}], minChars: [{
|
|
732
840
|
type: Input
|
|
733
|
-
}],
|
|
841
|
+
}], maxResults: [{
|
|
734
842
|
type: Input
|
|
735
|
-
}],
|
|
736
|
-
type: Output
|
|
737
|
-
}], menuClick: [{
|
|
843
|
+
}], valueChange: [{
|
|
738
844
|
type: Output
|
|
739
|
-
}],
|
|
740
|
-
type: Output
|
|
741
|
-
}] } });
|
|
742
|
-
|
|
743
|
-
class LoginFormComponent {
|
|
744
|
-
email = '';
|
|
745
|
-
password = '';
|
|
746
|
-
error = '';
|
|
747
|
-
submit = new EventEmitter();
|
|
748
|
-
onSubmit() {
|
|
749
|
-
if (this.email && this.password) {
|
|
750
|
-
this.error = '';
|
|
751
|
-
this.submit.emit({
|
|
752
|
-
email: this.email,
|
|
753
|
-
password: this.password,
|
|
754
|
-
});
|
|
755
|
-
}
|
|
756
|
-
else {
|
|
757
|
-
this.error = 'Please fill in all fields';
|
|
758
|
-
}
|
|
759
|
-
}
|
|
760
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoginFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LoginFormComponent, isStandalone: true, selector: "sefin-login-form", outputs: { submit: "submit" }, ngImport: i0, template: "<sefin-card variant=\"elevated\" class=\"sefin-login-form\">\n <h2 class=\"sefin-login-form__title\">Sign In</h2>\n <form (ngSubmit)=\"onSubmit()\" class=\"sefin-login-form__form\">\n <sefin-form-field\n label=\"Email\"\n inputId=\"email\"\n inputType=\"email\"\n placeholder=\"Enter your email\"\n [required]=\"true\"\n [(ngModel)]=\"email\"\n name=\"email\"\n ></sefin-form-field>\n <sefin-form-field\n label=\"Password\"\n inputId=\"password\"\n inputType=\"password\"\n placeholder=\"Enter your password\"\n [required]=\"true\"\n [(ngModel)]=\"password\"\n name=\"password\"\n ></sefin-form-field>\n <div *ngIf=\"error\" class=\"sefin-login-form__error\">{{ error }}</div>\n <sefin-button\n type=\"submit\"\n variant=\"primary\"\n size=\"lg\"\n class=\"sefin-login-form__submit\"\n >\n Sign In\n </sefin-button>\n </form>\n</sefin-card>\n\n", styles: [".sefin-login-form{max-width:400px;width:100%}.sefin-login-form__title{font-size:var(--sefin-font-size-2xl, 1.5rem);font-weight:var(--sefin-font-weight-semibold, 600);margin-bottom:var(--sefin-spacing-xl, 32px);text-align:center}.sefin-login-form__form{display:flex;flex-direction:column;gap:var(--sefin-spacing-lg, 24px)}.sefin-login-form__error{padding:var(--sefin-spacing-md, 16px);background-color:#f443361a;color:var(--sefin-color-error);border-radius:var(--sefin-radius-md, 8px);font-size:var(--sefin-font-size-sm, .875rem)}.sefin-login-form__submit{width:100%;margin-top:var(--sefin-spacing-md, 16px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "sefin-form-field", inputs: ["label", "hint", "error", "required", "disabled", "inputId", "inputType", "placeholder", "size"] }, { kind: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "type", "class"], outputs: ["clicked"] }, { kind: "component", type: CardComponent, selector: "sefin-card", inputs: ["variant", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
762
|
-
}
|
|
763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoginFormComponent, decorators: [{
|
|
764
|
-
type: Component,
|
|
765
|
-
args: [{ selector: 'sefin-login-form', standalone: true, imports: [CommonModule, FormsModule, FormFieldComponent, ButtonComponent, CardComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sefin-card variant=\"elevated\" class=\"sefin-login-form\">\n <h2 class=\"sefin-login-form__title\">Sign In</h2>\n <form (ngSubmit)=\"onSubmit()\" class=\"sefin-login-form__form\">\n <sefin-form-field\n label=\"Email\"\n inputId=\"email\"\n inputType=\"email\"\n placeholder=\"Enter your email\"\n [required]=\"true\"\n [(ngModel)]=\"email\"\n name=\"email\"\n ></sefin-form-field>\n <sefin-form-field\n label=\"Password\"\n inputId=\"password\"\n inputType=\"password\"\n placeholder=\"Enter your password\"\n [required]=\"true\"\n [(ngModel)]=\"password\"\n name=\"password\"\n ></sefin-form-field>\n <div *ngIf=\"error\" class=\"sefin-login-form__error\">{{ error }}</div>\n <sefin-button\n type=\"submit\"\n variant=\"primary\"\n size=\"lg\"\n class=\"sefin-login-form__submit\"\n >\n Sign In\n </sefin-button>\n </form>\n</sefin-card>\n\n", styles: [".sefin-login-form{max-width:400px;width:100%}.sefin-login-form__title{font-size:var(--sefin-font-size-2xl, 1.5rem);font-weight:var(--sefin-font-weight-semibold, 600);margin-bottom:var(--sefin-spacing-xl, 32px);text-align:center}.sefin-login-form__form{display:flex;flex-direction:column;gap:var(--sefin-spacing-lg, 24px)}.sefin-login-form__error{padding:var(--sefin-spacing-md, 16px);background-color:#f443361a;color:var(--sefin-color-error);border-radius:var(--sefin-radius-md, 8px);font-size:var(--sefin-font-size-sm, .875rem)}.sefin-login-form__submit{width:100%;margin-top:var(--sefin-spacing-md, 16px)}\n"] }]
|
|
766
|
-
}], propDecorators: { submit: [{
|
|
845
|
+
}], optionSelected: [{
|
|
767
846
|
type: Output
|
|
768
|
-
}]
|
|
769
|
-
|
|
770
|
-
class ToolbarComponent {
|
|
771
|
-
title = '';
|
|
772
|
-
actions = [];
|
|
773
|
-
actionClick = new EventEmitter();
|
|
774
|
-
onActionClick(action) {
|
|
775
|
-
action.action();
|
|
776
|
-
this.actionClick.emit(action);
|
|
777
|
-
}
|
|
778
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ToolbarComponent, isStandalone: true, selector: "sefin-toolbar", inputs: { title: "title", actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div class=\"sefin-toolbar\">\n <h2 *ngIf=\"title\" class=\"sefin-toolbar__title\">{{ title }}</h2>\n <div class=\"sefin-toolbar__actions\">\n <sefin-button\n *ngFor=\"let action of actions\"\n [variant]=\"action.variant || 'primary'\"\n size=\"md\"\n (clicked)=\"onActionClick(action)\"\n >\n <sefin-icon *ngIf=\"action.icon\" [name]=\"action.icon\" size=\"sm\"></sefin-icon>\n {{ action.label }}\n </sefin-button>\n </div>\n</div>\n\n", styles: [".sefin-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-background-elevated);border-bottom:1px solid var(--sefin-color-border)}.sefin-toolbar__title{font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);color:var(--sefin-color-text);margin:0}.sefin-toolbar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-md, 16px)}\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: "component", type: ButtonComponent, selector: "sefin-button", inputs: ["variant", "size", "disabled", "type", "class"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
780
|
-
}
|
|
781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
782
|
-
type: Component,
|
|
783
|
-
args: [{ selector: 'sefin-toolbar', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sefin-toolbar\">\n <h2 *ngIf=\"title\" class=\"sefin-toolbar__title\">{{ title }}</h2>\n <div class=\"sefin-toolbar__actions\">\n <sefin-button\n *ngFor=\"let action of actions\"\n [variant]=\"action.variant || 'primary'\"\n size=\"md\"\n (clicked)=\"onActionClick(action)\"\n >\n <sefin-icon *ngIf=\"action.icon\" [name]=\"action.icon\" size=\"sm\"></sefin-icon>\n {{ action.label }}\n </sefin-button>\n </div>\n</div>\n\n", styles: [".sefin-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-background-elevated);border-bottom:1px solid var(--sefin-color-border)}.sefin-toolbar__title{font-size:var(--sefin-font-size-xl, 1.25rem);font-weight:var(--sefin-font-weight-semibold, 600);color:var(--sefin-color-text);margin:0}.sefin-toolbar__actions{display:flex;align-items:center;gap:var(--sefin-spacing-md, 16px)}\n"] }]
|
|
784
|
-
}], propDecorators: { title: [{
|
|
785
|
-
type: Input
|
|
786
|
-
}], actions: [{
|
|
787
|
-
type: Input
|
|
788
|
-
}], actionClick: [{
|
|
847
|
+
}], inputChange: [{
|
|
789
848
|
type: Output
|
|
849
|
+
}], onClickOutside: [{
|
|
850
|
+
type: HostListener,
|
|
851
|
+
args: ['document:click', ['$event']]
|
|
790
852
|
}] } });
|
|
791
853
|
|
|
792
854
|
/**
|
|
793
|
-
*
|
|
855
|
+
* Atoms index
|
|
794
856
|
*/
|
|
795
857
|
|
|
796
858
|
/*
|
|
797
|
-
* Public API Surface of @
|
|
859
|
+
* Public API Surface of @lesterarte/sefin-ui
|
|
798
860
|
*/
|
|
799
861
|
// Design Tokens
|
|
800
862
|
// Styles (for importing in consuming apps)
|
|
@@ -804,5 +866,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
804
866
|
* Generated bundle index. Do not edit.
|
|
805
867
|
*/
|
|
806
868
|
|
|
807
|
-
export { BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS,
|
|
869
|
+
export { AutocompleteComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, DARK_THEME, DESIGN_TOKENS, LIGHT_THEME, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, TYPOGRAPHY_TOKENS, ThemeLoader };
|
|
808
870
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|