@lesterarte/sefin-ui 0.0.3-dev.20 → 0.0.3-dev.21
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,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } 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 {
|
|
6
|
+
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Color design tokens as TypeScript constants
|
|
@@ -551,6 +551,118 @@ class ThemeLoader {
|
|
|
551
551
|
* Shared index
|
|
552
552
|
*/
|
|
553
553
|
|
|
554
|
+
class AvatarComponent {
|
|
555
|
+
/** Avatar size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
|
|
556
|
+
size = 'md';
|
|
557
|
+
/** Image source URL */
|
|
558
|
+
src;
|
|
559
|
+
/** Alt text for the image */
|
|
560
|
+
alt = '';
|
|
561
|
+
/** Initials to display when no image is provided */
|
|
562
|
+
initials;
|
|
563
|
+
/** Whether to show a border/ring around the avatar */
|
|
564
|
+
bordered = false;
|
|
565
|
+
/** Additional CSS classes */
|
|
566
|
+
class = '';
|
|
567
|
+
get avatarClasses() {
|
|
568
|
+
return [
|
|
569
|
+
'sefin-avatar',
|
|
570
|
+
`sefin-avatar--${this.size}`,
|
|
571
|
+
this.bordered ? 'sefin-avatar--bordered' : '',
|
|
572
|
+
this.class,
|
|
573
|
+
]
|
|
574
|
+
.filter(Boolean)
|
|
575
|
+
.join(' ');
|
|
576
|
+
}
|
|
577
|
+
get displayInitials() {
|
|
578
|
+
if (this.initials) {
|
|
579
|
+
return this.initials.toUpperCase().slice(0, 2);
|
|
580
|
+
}
|
|
581
|
+
return '';
|
|
582
|
+
}
|
|
583
|
+
onImageError(event) {
|
|
584
|
+
const img = event.target;
|
|
585
|
+
img.style.display = 'none';
|
|
586
|
+
}
|
|
587
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
588
|
+
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 <svg\n *ngIf=\"!src && !displayInitials\"\n class=\"sefin-avatar__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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{width:60%;height:60%;color:var(--sefin-color-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
589
|
+
}
|
|
590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
591
|
+
type: Component,
|
|
592
|
+
args: [{ selector: 'sefin-avatar', standalone: true, imports: [CommonModule], 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 <svg\n *ngIf=\"!src && !displayInitials\"\n class=\"sefin-avatar__icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\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{width:60%;height:60%;color:var(--sefin-color-text-secondary)}\n"] }]
|
|
593
|
+
}], propDecorators: { size: [{
|
|
594
|
+
type: Input
|
|
595
|
+
}], src: [{
|
|
596
|
+
type: Input
|
|
597
|
+
}], alt: [{
|
|
598
|
+
type: Input
|
|
599
|
+
}], initials: [{
|
|
600
|
+
type: Input
|
|
601
|
+
}], bordered: [{
|
|
602
|
+
type: Input
|
|
603
|
+
}], class: [{
|
|
604
|
+
type: Input
|
|
605
|
+
}] } });
|
|
606
|
+
|
|
607
|
+
class BadgeComponent {
|
|
608
|
+
/** Badge variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
|
|
609
|
+
variant = 'default';
|
|
610
|
+
/** Badge size. Options: 'sm' | 'md' | 'lg' */
|
|
611
|
+
size = 'md';
|
|
612
|
+
/** Whether the badge should be displayed as a dot (no text) */
|
|
613
|
+
dot = false;
|
|
614
|
+
/** Maximum number to show before displaying as "+N" */
|
|
615
|
+
max;
|
|
616
|
+
/** Badge value (number or text) */
|
|
617
|
+
value;
|
|
618
|
+
/** Additional CSS classes */
|
|
619
|
+
class = '';
|
|
620
|
+
get badgeClasses() {
|
|
621
|
+
return [
|
|
622
|
+
'sefin-badge',
|
|
623
|
+
`sefin-badge--${this.variant}`,
|
|
624
|
+
`sefin-badge--${this.size}`,
|
|
625
|
+
this.dot ? 'sefin-badge--dot' : '',
|
|
626
|
+
this.class,
|
|
627
|
+
]
|
|
628
|
+
.filter(Boolean)
|
|
629
|
+
.join(' ');
|
|
630
|
+
}
|
|
631
|
+
get displayValue() {
|
|
632
|
+
if (this.dot) {
|
|
633
|
+
return '';
|
|
634
|
+
}
|
|
635
|
+
if (this.value === undefined || this.value === null) {
|
|
636
|
+
return '';
|
|
637
|
+
}
|
|
638
|
+
if (typeof this.value === 'number') {
|
|
639
|
+
if (this.max !== undefined && this.value > this.max) {
|
|
640
|
+
return `+${this.max}`;
|
|
641
|
+
}
|
|
642
|
+
return String(this.value);
|
|
643
|
+
}
|
|
644
|
+
return String(this.value);
|
|
645
|
+
}
|
|
646
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
647
|
+
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 });
|
|
648
|
+
}
|
|
649
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
650
|
+
type: Component,
|
|
651
|
+
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"] }]
|
|
652
|
+
}], propDecorators: { variant: [{
|
|
653
|
+
type: Input
|
|
654
|
+
}], size: [{
|
|
655
|
+
type: Input
|
|
656
|
+
}], dot: [{
|
|
657
|
+
type: Input
|
|
658
|
+
}], max: [{
|
|
659
|
+
type: Input
|
|
660
|
+
}], value: [{
|
|
661
|
+
type: Input
|
|
662
|
+
}], class: [{
|
|
663
|
+
type: Input
|
|
664
|
+
}] } });
|
|
665
|
+
|
|
554
666
|
class ButtonComponent {
|
|
555
667
|
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
556
668
|
variant = 'primary';
|
|
@@ -656,6 +768,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
656
768
|
type: Output
|
|
657
769
|
}] } });
|
|
658
770
|
|
|
771
|
+
class FabButtonComponent {
|
|
772
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
773
|
+
variant = 'primary';
|
|
774
|
+
/** FAB size. Options: 'sm' | 'md' | 'lg' */
|
|
775
|
+
size = 'md';
|
|
776
|
+
/** Whether the button is disabled */
|
|
777
|
+
disabled = false;
|
|
778
|
+
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
779
|
+
type = 'button';
|
|
780
|
+
/** Additional CSS classes */
|
|
781
|
+
class = '';
|
|
782
|
+
/** Accessibility label for the button */
|
|
783
|
+
ariaLabel = '';
|
|
784
|
+
clicked = new EventEmitter();
|
|
785
|
+
onClick(event) {
|
|
786
|
+
if (!this.disabled) {
|
|
787
|
+
this.clicked.emit(event);
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
get buttonClasses() {
|
|
791
|
+
return [
|
|
792
|
+
'sefin-fab-button',
|
|
793
|
+
`sefin-fab-button--${this.variant}`,
|
|
794
|
+
`sefin-fab-button--${this.size}`,
|
|
795
|
+
this.disabled ? 'sefin-fab-button--disabled' : '',
|
|
796
|
+
this.class,
|
|
797
|
+
]
|
|
798
|
+
.filter(Boolean)
|
|
799
|
+
.join(' ');
|
|
800
|
+
}
|
|
801
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
802
|
+
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{display:block;flex-shrink:0}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
803
|
+
}
|
|
804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, decorators: [{
|
|
805
|
+
type: Component,
|
|
806
|
+
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{display:block;flex-shrink:0}.sefin-fab-button--sm svg{width:20px;height:20px}.sefin-fab-button--md svg{width:24px;height:24px}.sefin-fab-button--lg svg{width:28px;height:28px}\n"] }]
|
|
807
|
+
}], propDecorators: { variant: [{
|
|
808
|
+
type: Input
|
|
809
|
+
}], size: [{
|
|
810
|
+
type: Input
|
|
811
|
+
}], disabled: [{
|
|
812
|
+
type: Input
|
|
813
|
+
}], type: [{
|
|
814
|
+
type: Input
|
|
815
|
+
}], class: [{
|
|
816
|
+
type: Input
|
|
817
|
+
}], ariaLabel: [{
|
|
818
|
+
type: Input
|
|
819
|
+
}], clicked: [{
|
|
820
|
+
type: Output
|
|
821
|
+
}] } });
|
|
822
|
+
|
|
823
|
+
class ChipComponent {
|
|
824
|
+
/** Chip variant style. Options: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' */
|
|
825
|
+
variant = 'default';
|
|
826
|
+
/** Chip size. Options: 'sm' | 'md' | 'lg' */
|
|
827
|
+
size = 'md';
|
|
828
|
+
/** Whether the chip is disabled */
|
|
829
|
+
disabled = false;
|
|
830
|
+
/** Whether the chip can be removed (shows remove button) */
|
|
831
|
+
removable = false;
|
|
832
|
+
/** Whether the chip is selected (for selectable chips) */
|
|
833
|
+
selected = false;
|
|
834
|
+
/** Additional CSS classes */
|
|
835
|
+
class = '';
|
|
836
|
+
removed = new EventEmitter();
|
|
837
|
+
clicked = new EventEmitter();
|
|
838
|
+
onRemove(event) {
|
|
839
|
+
event.stopPropagation();
|
|
840
|
+
if (!this.disabled) {
|
|
841
|
+
this.removed.emit(event);
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
onClick(event) {
|
|
845
|
+
if (!this.disabled) {
|
|
846
|
+
this.clicked.emit(event);
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
get chipClasses() {
|
|
850
|
+
return [
|
|
851
|
+
'sefin-chip',
|
|
852
|
+
`sefin-chip--${this.variant}`,
|
|
853
|
+
`sefin-chip--${this.size}`,
|
|
854
|
+
this.disabled ? 'sefin-chip--disabled' : '',
|
|
855
|
+
this.selected ? 'sefin-chip--selected' : '',
|
|
856
|
+
this.class,
|
|
857
|
+
]
|
|
858
|
+
.filter(Boolean)
|
|
859
|
+
.join(' ');
|
|
860
|
+
}
|
|
861
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
862
|
+
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 });
|
|
863
|
+
}
|
|
864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChipComponent, decorators: [{
|
|
865
|
+
type: Component,
|
|
866
|
+
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"] }]
|
|
867
|
+
}], propDecorators: { variant: [{
|
|
868
|
+
type: Input
|
|
869
|
+
}], size: [{
|
|
870
|
+
type: Input
|
|
871
|
+
}], disabled: [{
|
|
872
|
+
type: Input
|
|
873
|
+
}], removable: [{
|
|
874
|
+
type: Input
|
|
875
|
+
}], selected: [{
|
|
876
|
+
type: Input
|
|
877
|
+
}], class: [{
|
|
878
|
+
type: Input
|
|
879
|
+
}], removed: [{
|
|
880
|
+
type: Output
|
|
881
|
+
}], clicked: [{
|
|
882
|
+
type: Output
|
|
883
|
+
}] } });
|
|
884
|
+
|
|
659
885
|
class LinkComponent {
|
|
660
886
|
/** Link variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
|
|
661
887
|
variant = 'default';
|
|
@@ -771,308 +997,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
771
997
|
type: Input
|
|
772
998
|
}] } });
|
|
773
999
|
|
|
774
|
-
class
|
|
775
|
-
|
|
776
|
-
dropdownRef;
|
|
777
|
-
containerRef;
|
|
778
|
-
options = [];
|
|
779
|
-
placeholder = '';
|
|
780
|
-
disabled = false;
|
|
1000
|
+
class CheckboxComponent {
|
|
1001
|
+
checkboxInput;
|
|
781
1002
|
size = 'md';
|
|
1003
|
+
disabled = false;
|
|
1004
|
+
indeterminate = false;
|
|
782
1005
|
class = '';
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
1006
|
+
label = '';
|
|
1007
|
+
name = '';
|
|
1008
|
+
value = false;
|
|
786
1009
|
valueChange = new EventEmitter();
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
ngOnInit() {
|
|
794
|
-
if (this.value !== null) {
|
|
795
|
-
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
796
|
-
this.searchText = selectedOption?.label || String(this.value);
|
|
1010
|
+
checkedChange = new EventEmitter();
|
|
1011
|
+
onChange = (value) => { };
|
|
1012
|
+
onTouched = () => { };
|
|
1013
|
+
ngAfterViewInit() {
|
|
1014
|
+
if (this.checkboxInput?.nativeElement && this.indeterminate && !this.value) {
|
|
1015
|
+
this.checkboxInput.nativeElement.indeterminate = true;
|
|
797
1016
|
}
|
|
798
1017
|
}
|
|
799
1018
|
ngOnChanges(changes) {
|
|
800
|
-
if (changes['
|
|
801
|
-
|
|
802
|
-
if (this.value !== null) {
|
|
803
|
-
const selectedOption = options.find((opt) => opt.value === this.value);
|
|
804
|
-
if (selectedOption) {
|
|
805
|
-
this.searchText = selectedOption.label;
|
|
806
|
-
}
|
|
807
|
-
else {
|
|
808
|
-
this.searchText = '';
|
|
809
|
-
}
|
|
810
|
-
}
|
|
811
|
-
}
|
|
812
|
-
if (changes['value']) {
|
|
813
|
-
if (this.value !== null) {
|
|
814
|
-
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
815
|
-
this.searchText = selectedOption?.label || String(this.value);
|
|
816
|
-
}
|
|
817
|
-
else {
|
|
818
|
-
this.searchText = '';
|
|
819
|
-
}
|
|
820
|
-
this.filteredOptions = [];
|
|
821
|
-
this.isOpen = false;
|
|
822
|
-
}
|
|
823
|
-
}
|
|
824
|
-
ngOnDestroy() {
|
|
825
|
-
}
|
|
826
|
-
onClickOutside(event) {
|
|
827
|
-
if (this.containerRef?.nativeElement && this.isOpen) {
|
|
828
|
-
const clickedInside = this.containerRef.nativeElement.contains(event.target);
|
|
829
|
-
if (!clickedInside) {
|
|
830
|
-
this.isOpen = false;
|
|
831
|
-
this.selectedIndex = -1;
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
}
|
|
835
|
-
onInputChange(value) {
|
|
836
|
-
this.searchText = value;
|
|
837
|
-
this.inputChange.emit(value);
|
|
838
|
-
if (this.options && this.options.length > 0) {
|
|
839
|
-
this.filterOptions();
|
|
840
|
-
this.isOpen = value.length >= this.minChars;
|
|
841
|
-
}
|
|
842
|
-
else {
|
|
843
|
-
this.isOpen = false;
|
|
844
|
-
this.filteredOptions = [];
|
|
1019
|
+
if (this.checkboxInput?.nativeElement && (changes['indeterminate'] || changes['value'])) {
|
|
1020
|
+
this.checkboxInput.nativeElement.indeterminate = this.indeterminate && !this.value;
|
|
845
1021
|
}
|
|
846
1022
|
}
|
|
847
|
-
|
|
848
|
-
if (
|
|
849
|
-
this.filteredOptions = [];
|
|
1023
|
+
onCheckboxChange(event) {
|
|
1024
|
+
if (this.disabled) {
|
|
850
1025
|
return;
|
|
851
1026
|
}
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
1027
|
+
const target = event.target;
|
|
1028
|
+
this.value = target.checked;
|
|
1029
|
+
this.indeterminate = false;
|
|
1030
|
+
if (this.checkboxInput?.nativeElement) {
|
|
1031
|
+
this.checkboxInput.nativeElement.indeterminate = false;
|
|
856
1032
|
}
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
.
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
return option.label.toLowerCase().includes(searchLower);
|
|
870
|
-
})
|
|
871
|
-
.slice(0, this.maxResults);
|
|
872
|
-
}
|
|
873
|
-
selectOption(option) {
|
|
874
|
-
if (option.disabled)
|
|
875
|
-
return;
|
|
876
|
-
this.searchText = option.label;
|
|
877
|
-
this.value = option.value;
|
|
878
|
-
this.valueChange.emit(option.value);
|
|
879
|
-
this.optionSelected.emit(option);
|
|
880
|
-
this.isOpen = false;
|
|
881
|
-
this.selectedIndex = -1;
|
|
882
|
-
}
|
|
883
|
-
onInputFocus() {
|
|
884
|
-
if (this.disabled)
|
|
885
|
-
return;
|
|
886
|
-
if (this.options &&
|
|
887
|
-
Array.isArray(this.options) &&
|
|
888
|
-
this.options.length > 0) {
|
|
889
|
-
this.filterOptions();
|
|
890
|
-
this.isOpen = this.filteredOptions.length > 0;
|
|
891
|
-
}
|
|
892
|
-
else {
|
|
893
|
-
this.isOpen = false;
|
|
894
|
-
this.filteredOptions = [];
|
|
895
|
-
}
|
|
896
|
-
}
|
|
897
|
-
onInputBlur() {
|
|
898
|
-
if (this.disabled || !this.searchText) {
|
|
899
|
-
return;
|
|
900
|
-
}
|
|
901
|
-
const exactMatch = this.options.find((option) => !option.disabled &&
|
|
902
|
-
option.label.toLowerCase().trim() === this.searchText.toLowerCase().trim());
|
|
903
|
-
if (!exactMatch) {
|
|
904
|
-
this.searchText = '';
|
|
905
|
-
this.value = null;
|
|
906
|
-
this.valueChange.emit(null);
|
|
907
|
-
this.isOpen = false;
|
|
908
|
-
this.filteredOptions = [];
|
|
909
|
-
this.selectedIndex = -1;
|
|
910
|
-
}
|
|
911
|
-
}
|
|
912
|
-
onKeyDown(event) {
|
|
913
|
-
if (!this.isOpen ||
|
|
914
|
-
!this.filteredOptions ||
|
|
915
|
-
this.filteredOptions.length === 0) {
|
|
916
|
-
return;
|
|
917
|
-
}
|
|
918
|
-
switch (event.key) {
|
|
919
|
-
case 'ArrowDown':
|
|
920
|
-
event.preventDefault();
|
|
921
|
-
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredOptions.length - 1);
|
|
922
|
-
setTimeout(() => this.scrollToSelected(), 0);
|
|
923
|
-
break;
|
|
924
|
-
case 'ArrowUp':
|
|
925
|
-
event.preventDefault();
|
|
926
|
-
this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
|
|
927
|
-
setTimeout(() => this.scrollToSelected(), 0);
|
|
928
|
-
break;
|
|
929
|
-
case 'Enter':
|
|
930
|
-
event.preventDefault();
|
|
931
|
-
if (this.selectedIndex >= 0 &&
|
|
932
|
-
this.selectedIndex < this.filteredOptions.length) {
|
|
933
|
-
this.selectOption(this.filteredOptions[this.selectedIndex]);
|
|
934
|
-
}
|
|
935
|
-
break;
|
|
936
|
-
case 'Escape':
|
|
937
|
-
event.preventDefault();
|
|
938
|
-
this.isOpen = false;
|
|
939
|
-
this.selectedIndex = -1;
|
|
940
|
-
break;
|
|
941
|
-
}
|
|
942
|
-
}
|
|
943
|
-
scrollToSelected() {
|
|
944
|
-
try {
|
|
945
|
-
if (this.dropdownRef?.nativeElement && this.selectedIndex >= 0) {
|
|
946
|
-
const selectedElement = this.dropdownRef.nativeElement.querySelector(`[data-index="${this.selectedIndex}"]`);
|
|
947
|
-
if (selectedElement && selectedElement instanceof HTMLElement) {
|
|
948
|
-
selectedElement.scrollIntoView({
|
|
949
|
-
block: 'nearest',
|
|
950
|
-
behavior: 'smooth',
|
|
951
|
-
});
|
|
952
|
-
}
|
|
953
|
-
}
|
|
954
|
-
}
|
|
955
|
-
catch (error) {
|
|
956
|
-
console.warn('Could not scroll to selected option:', error);
|
|
957
|
-
}
|
|
958
|
-
}
|
|
959
|
-
clearValue() {
|
|
960
|
-
this.searchText = '';
|
|
961
|
-
this.value = null;
|
|
962
|
-
this.valueChange.emit(null);
|
|
963
|
-
this.isOpen = false;
|
|
964
|
-
this.filteredOptions = [];
|
|
965
|
-
if (this.inputRef?.nativeElement) {
|
|
966
|
-
this.inputRef.nativeElement.focus();
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
get inputClasses() {
|
|
970
|
-
return [
|
|
971
|
-
'sefin-autocomplete__input',
|
|
972
|
-
`sefin-autocomplete__input--${this.size}`,
|
|
973
|
-
this.disabled ? 'sefin-autocomplete__input--disabled' : '',
|
|
974
|
-
this.class,
|
|
975
|
-
]
|
|
976
|
-
.filter(Boolean)
|
|
977
|
-
.join(' ');
|
|
978
|
-
}
|
|
979
|
-
get containerClasses() {
|
|
980
|
-
return [
|
|
981
|
-
'sefin-autocomplete',
|
|
982
|
-
this.isOpen && this.filteredOptions.length > 0
|
|
983
|
-
? 'sefin-autocomplete--open'
|
|
984
|
-
: '',
|
|
985
|
-
]
|
|
986
|
-
.filter(Boolean)
|
|
987
|
-
.join(' ');
|
|
988
|
-
}
|
|
989
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
990
|
-
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 });
|
|
991
|
-
}
|
|
992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
993
|
-
type: Component,
|
|
994
|
-
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"] }]
|
|
995
|
-
}], propDecorators: { inputRef: [{
|
|
996
|
-
type: ViewChild,
|
|
997
|
-
args: ['inputRef', { static: false }]
|
|
998
|
-
}], dropdownRef: [{
|
|
999
|
-
type: ViewChild,
|
|
1000
|
-
args: ['dropdownRef', { static: false }]
|
|
1001
|
-
}], containerRef: [{
|
|
1002
|
-
type: ViewChild,
|
|
1003
|
-
args: ['containerRef', { static: false }]
|
|
1004
|
-
}], options: [{
|
|
1005
|
-
type: Input
|
|
1006
|
-
}], placeholder: [{
|
|
1007
|
-
type: Input
|
|
1008
|
-
}], disabled: [{
|
|
1009
|
-
type: Input
|
|
1010
|
-
}], size: [{
|
|
1011
|
-
type: Input
|
|
1012
|
-
}], class: [{
|
|
1013
|
-
type: Input
|
|
1014
|
-
}], value: [{
|
|
1015
|
-
type: Input
|
|
1016
|
-
}], minChars: [{
|
|
1017
|
-
type: Input
|
|
1018
|
-
}], maxResults: [{
|
|
1019
|
-
type: Input
|
|
1020
|
-
}], valueChange: [{
|
|
1021
|
-
type: Output
|
|
1022
|
-
}], optionSelected: [{
|
|
1023
|
-
type: Output
|
|
1024
|
-
}], inputChange: [{
|
|
1025
|
-
type: Output
|
|
1026
|
-
}], onClickOutside: [{
|
|
1027
|
-
type: HostListener,
|
|
1028
|
-
args: ['document:click', ['$event']]
|
|
1029
|
-
}] } });
|
|
1030
|
-
|
|
1031
|
-
class CheckboxComponent {
|
|
1032
|
-
checkboxInput;
|
|
1033
|
-
size = 'md';
|
|
1034
|
-
disabled = false;
|
|
1035
|
-
indeterminate = false;
|
|
1036
|
-
class = '';
|
|
1037
|
-
label = '';
|
|
1038
|
-
name = '';
|
|
1039
|
-
value = false;
|
|
1040
|
-
valueChange = new EventEmitter();
|
|
1041
|
-
checkedChange = new EventEmitter();
|
|
1042
|
-
onChange = (value) => { };
|
|
1043
|
-
onTouched = () => { };
|
|
1044
|
-
ngAfterViewInit() {
|
|
1045
|
-
if (this.checkboxInput?.nativeElement && this.indeterminate && !this.value) {
|
|
1046
|
-
this.checkboxInput.nativeElement.indeterminate = true;
|
|
1047
|
-
}
|
|
1048
|
-
}
|
|
1049
|
-
ngOnChanges(changes) {
|
|
1050
|
-
if (this.checkboxInput?.nativeElement && (changes['indeterminate'] || changes['value'])) {
|
|
1051
|
-
this.checkboxInput.nativeElement.indeterminate = this.indeterminate && !this.value;
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
onCheckboxChange(event) {
|
|
1055
|
-
if (this.disabled) {
|
|
1056
|
-
return;
|
|
1057
|
-
}
|
|
1058
|
-
const target = event.target;
|
|
1059
|
-
this.value = target.checked;
|
|
1060
|
-
this.indeterminate = false;
|
|
1061
|
-
if (this.checkboxInput?.nativeElement) {
|
|
1062
|
-
this.checkboxInput.nativeElement.indeterminate = false;
|
|
1063
|
-
}
|
|
1064
|
-
this.onChange(this.value);
|
|
1065
|
-
this.onTouched();
|
|
1066
|
-
this.valueChange.emit(this.value);
|
|
1067
|
-
this.checkedChange.emit(this.value);
|
|
1068
|
-
}
|
|
1069
|
-
writeValue(value) {
|
|
1070
|
-
this.value = value;
|
|
1071
|
-
if (value) {
|
|
1072
|
-
this.indeterminate = false;
|
|
1073
|
-
if (this.checkboxInput?.nativeElement) {
|
|
1074
|
-
this.checkboxInput.nativeElement.indeterminate = false;
|
|
1075
|
-
}
|
|
1033
|
+
this.onChange(this.value);
|
|
1034
|
+
this.onTouched();
|
|
1035
|
+
this.valueChange.emit(this.value);
|
|
1036
|
+
this.checkedChange.emit(this.value);
|
|
1037
|
+
}
|
|
1038
|
+
writeValue(value) {
|
|
1039
|
+
this.value = value;
|
|
1040
|
+
if (value) {
|
|
1041
|
+
this.indeterminate = false;
|
|
1042
|
+
if (this.checkboxInput?.nativeElement) {
|
|
1043
|
+
this.checkboxInput.nativeElement.indeterminate = false;
|
|
1044
|
+
}
|
|
1076
1045
|
}
|
|
1077
1046
|
}
|
|
1078
1047
|
registerOnChange(fn) {
|
|
@@ -1542,6 +1511,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1542
1511
|
* Atoms index
|
|
1543
1512
|
*/
|
|
1544
1513
|
|
|
1514
|
+
class AutocompleteComponent {
|
|
1515
|
+
inputRef;
|
|
1516
|
+
dropdownRef;
|
|
1517
|
+
containerRef;
|
|
1518
|
+
options = [];
|
|
1519
|
+
placeholder = '';
|
|
1520
|
+
disabled = false;
|
|
1521
|
+
size = 'md';
|
|
1522
|
+
class = '';
|
|
1523
|
+
value = null;
|
|
1524
|
+
minChars = 0;
|
|
1525
|
+
maxResults = 10;
|
|
1526
|
+
valueChange = new EventEmitter();
|
|
1527
|
+
optionSelected = new EventEmitter();
|
|
1528
|
+
inputChange = new EventEmitter();
|
|
1529
|
+
searchText = '';
|
|
1530
|
+
filteredOptions = [];
|
|
1531
|
+
isOpen = false;
|
|
1532
|
+
selectedIndex = -1;
|
|
1533
|
+
ngOnInit() {
|
|
1534
|
+
if (this.value !== null) {
|
|
1535
|
+
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
1536
|
+
this.searchText = selectedOption?.label || String(this.value);
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1539
|
+
ngOnChanges(changes) {
|
|
1540
|
+
if (changes['options']) {
|
|
1541
|
+
const options = changes['options'].currentValue || [];
|
|
1542
|
+
if (this.value !== null) {
|
|
1543
|
+
const selectedOption = options.find((opt) => opt.value === this.value);
|
|
1544
|
+
if (selectedOption) {
|
|
1545
|
+
this.searchText = selectedOption.label;
|
|
1546
|
+
}
|
|
1547
|
+
else {
|
|
1548
|
+
this.searchText = '';
|
|
1549
|
+
}
|
|
1550
|
+
}
|
|
1551
|
+
}
|
|
1552
|
+
if (changes['value']) {
|
|
1553
|
+
if (this.value !== null) {
|
|
1554
|
+
const selectedOption = this.options.find((opt) => opt.value === this.value);
|
|
1555
|
+
this.searchText = selectedOption?.label || String(this.value);
|
|
1556
|
+
}
|
|
1557
|
+
else {
|
|
1558
|
+
this.searchText = '';
|
|
1559
|
+
}
|
|
1560
|
+
this.filteredOptions = [];
|
|
1561
|
+
this.isOpen = false;
|
|
1562
|
+
}
|
|
1563
|
+
}
|
|
1564
|
+
ngOnDestroy() {
|
|
1565
|
+
}
|
|
1566
|
+
onClickOutside(event) {
|
|
1567
|
+
if (this.containerRef?.nativeElement && this.isOpen) {
|
|
1568
|
+
const clickedInside = this.containerRef.nativeElement.contains(event.target);
|
|
1569
|
+
if (!clickedInside) {
|
|
1570
|
+
this.isOpen = false;
|
|
1571
|
+
this.selectedIndex = -1;
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1574
|
+
}
|
|
1575
|
+
onInputChange(value) {
|
|
1576
|
+
this.searchText = value;
|
|
1577
|
+
this.inputChange.emit(value);
|
|
1578
|
+
if (this.options && this.options.length > 0) {
|
|
1579
|
+
this.filterOptions();
|
|
1580
|
+
this.isOpen = value.length >= this.minChars;
|
|
1581
|
+
}
|
|
1582
|
+
else {
|
|
1583
|
+
this.isOpen = false;
|
|
1584
|
+
this.filteredOptions = [];
|
|
1585
|
+
}
|
|
1586
|
+
}
|
|
1587
|
+
filterOptions() {
|
|
1588
|
+
if (!this.options || this.options.length === 0) {
|
|
1589
|
+
this.filteredOptions = [];
|
|
1590
|
+
return;
|
|
1591
|
+
}
|
|
1592
|
+
if (this.minChars > 0 &&
|
|
1593
|
+
(!this.searchText || this.searchText.length < this.minChars)) {
|
|
1594
|
+
this.filteredOptions = [];
|
|
1595
|
+
return;
|
|
1596
|
+
}
|
|
1597
|
+
const searchText = this.searchText || '';
|
|
1598
|
+
if (searchText.length === 0) {
|
|
1599
|
+
this.filteredOptions = this.options
|
|
1600
|
+
.filter((option) => !option.disabled)
|
|
1601
|
+
.slice(0, this.maxResults);
|
|
1602
|
+
return;
|
|
1603
|
+
}
|
|
1604
|
+
const searchLower = searchText.toLowerCase();
|
|
1605
|
+
this.filteredOptions = this.options
|
|
1606
|
+
.filter((option) => {
|
|
1607
|
+
if (option.disabled)
|
|
1608
|
+
return false;
|
|
1609
|
+
return option.label.toLowerCase().includes(searchLower);
|
|
1610
|
+
})
|
|
1611
|
+
.slice(0, this.maxResults);
|
|
1612
|
+
}
|
|
1613
|
+
selectOption(option) {
|
|
1614
|
+
if (option.disabled)
|
|
1615
|
+
return;
|
|
1616
|
+
this.searchText = option.label;
|
|
1617
|
+
this.value = option.value;
|
|
1618
|
+
this.valueChange.emit(option.value);
|
|
1619
|
+
this.optionSelected.emit(option);
|
|
1620
|
+
this.isOpen = false;
|
|
1621
|
+
this.selectedIndex = -1;
|
|
1622
|
+
}
|
|
1623
|
+
onInputFocus() {
|
|
1624
|
+
if (this.disabled)
|
|
1625
|
+
return;
|
|
1626
|
+
if (this.options &&
|
|
1627
|
+
Array.isArray(this.options) &&
|
|
1628
|
+
this.options.length > 0) {
|
|
1629
|
+
this.filterOptions();
|
|
1630
|
+
this.isOpen = this.filteredOptions.length > 0;
|
|
1631
|
+
}
|
|
1632
|
+
else {
|
|
1633
|
+
this.isOpen = false;
|
|
1634
|
+
this.filteredOptions = [];
|
|
1635
|
+
}
|
|
1636
|
+
}
|
|
1637
|
+
onInputBlur() {
|
|
1638
|
+
if (this.disabled || !this.searchText) {
|
|
1639
|
+
return;
|
|
1640
|
+
}
|
|
1641
|
+
const exactMatch = this.options.find((option) => !option.disabled &&
|
|
1642
|
+
option.label.toLowerCase().trim() === this.searchText.toLowerCase().trim());
|
|
1643
|
+
if (!exactMatch) {
|
|
1644
|
+
this.searchText = '';
|
|
1645
|
+
this.value = null;
|
|
1646
|
+
this.valueChange.emit(null);
|
|
1647
|
+
this.isOpen = false;
|
|
1648
|
+
this.filteredOptions = [];
|
|
1649
|
+
this.selectedIndex = -1;
|
|
1650
|
+
}
|
|
1651
|
+
}
|
|
1652
|
+
onKeyDown(event) {
|
|
1653
|
+
if (!this.isOpen ||
|
|
1654
|
+
!this.filteredOptions ||
|
|
1655
|
+
this.filteredOptions.length === 0) {
|
|
1656
|
+
return;
|
|
1657
|
+
}
|
|
1658
|
+
switch (event.key) {
|
|
1659
|
+
case 'ArrowDown':
|
|
1660
|
+
event.preventDefault();
|
|
1661
|
+
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredOptions.length - 1);
|
|
1662
|
+
setTimeout(() => this.scrollToSelected(), 0);
|
|
1663
|
+
break;
|
|
1664
|
+
case 'ArrowUp':
|
|
1665
|
+
event.preventDefault();
|
|
1666
|
+
this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
|
|
1667
|
+
setTimeout(() => this.scrollToSelected(), 0);
|
|
1668
|
+
break;
|
|
1669
|
+
case 'Enter':
|
|
1670
|
+
event.preventDefault();
|
|
1671
|
+
if (this.selectedIndex >= 0 &&
|
|
1672
|
+
this.selectedIndex < this.filteredOptions.length) {
|
|
1673
|
+
this.selectOption(this.filteredOptions[this.selectedIndex]);
|
|
1674
|
+
}
|
|
1675
|
+
break;
|
|
1676
|
+
case 'Escape':
|
|
1677
|
+
event.preventDefault();
|
|
1678
|
+
this.isOpen = false;
|
|
1679
|
+
this.selectedIndex = -1;
|
|
1680
|
+
break;
|
|
1681
|
+
}
|
|
1682
|
+
}
|
|
1683
|
+
scrollToSelected() {
|
|
1684
|
+
try {
|
|
1685
|
+
if (this.dropdownRef?.nativeElement && this.selectedIndex >= 0) {
|
|
1686
|
+
const selectedElement = this.dropdownRef.nativeElement.querySelector(`[data-index="${this.selectedIndex}"]`);
|
|
1687
|
+
if (selectedElement && selectedElement instanceof HTMLElement) {
|
|
1688
|
+
selectedElement.scrollIntoView({
|
|
1689
|
+
block: 'nearest',
|
|
1690
|
+
behavior: 'smooth',
|
|
1691
|
+
});
|
|
1692
|
+
}
|
|
1693
|
+
}
|
|
1694
|
+
}
|
|
1695
|
+
catch (error) {
|
|
1696
|
+
console.warn('Could not scroll to selected option:', error);
|
|
1697
|
+
}
|
|
1698
|
+
}
|
|
1699
|
+
clearValue() {
|
|
1700
|
+
this.searchText = '';
|
|
1701
|
+
this.value = null;
|
|
1702
|
+
this.valueChange.emit(null);
|
|
1703
|
+
this.isOpen = false;
|
|
1704
|
+
this.filteredOptions = [];
|
|
1705
|
+
if (this.inputRef?.nativeElement) {
|
|
1706
|
+
this.inputRef.nativeElement.focus();
|
|
1707
|
+
}
|
|
1708
|
+
}
|
|
1709
|
+
get inputClasses() {
|
|
1710
|
+
return [
|
|
1711
|
+
'sefin-autocomplete__input',
|
|
1712
|
+
`sefin-autocomplete__input--${this.size}`,
|
|
1713
|
+
this.disabled ? 'sefin-autocomplete__input--disabled' : '',
|
|
1714
|
+
this.class,
|
|
1715
|
+
]
|
|
1716
|
+
.filter(Boolean)
|
|
1717
|
+
.join(' ');
|
|
1718
|
+
}
|
|
1719
|
+
get containerClasses() {
|
|
1720
|
+
return [
|
|
1721
|
+
'sefin-autocomplete',
|
|
1722
|
+
this.isOpen && this.filteredOptions.length > 0
|
|
1723
|
+
? 'sefin-autocomplete--open'
|
|
1724
|
+
: '',
|
|
1725
|
+
]
|
|
1726
|
+
.filter(Boolean)
|
|
1727
|
+
.join(' ');
|
|
1728
|
+
}
|
|
1729
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1730
|
+
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 });
|
|
1731
|
+
}
|
|
1732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1733
|
+
type: Component,
|
|
1734
|
+
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"] }]
|
|
1735
|
+
}], propDecorators: { inputRef: [{
|
|
1736
|
+
type: ViewChild,
|
|
1737
|
+
args: ['inputRef', { static: false }]
|
|
1738
|
+
}], dropdownRef: [{
|
|
1739
|
+
type: ViewChild,
|
|
1740
|
+
args: ['dropdownRef', { static: false }]
|
|
1741
|
+
}], containerRef: [{
|
|
1742
|
+
type: ViewChild,
|
|
1743
|
+
args: ['containerRef', { static: false }]
|
|
1744
|
+
}], options: [{
|
|
1745
|
+
type: Input
|
|
1746
|
+
}], placeholder: [{
|
|
1747
|
+
type: Input
|
|
1748
|
+
}], disabled: [{
|
|
1749
|
+
type: Input
|
|
1750
|
+
}], size: [{
|
|
1751
|
+
type: Input
|
|
1752
|
+
}], class: [{
|
|
1753
|
+
type: Input
|
|
1754
|
+
}], value: [{
|
|
1755
|
+
type: Input
|
|
1756
|
+
}], minChars: [{
|
|
1757
|
+
type: Input
|
|
1758
|
+
}], maxResults: [{
|
|
1759
|
+
type: Input
|
|
1760
|
+
}], valueChange: [{
|
|
1761
|
+
type: Output
|
|
1762
|
+
}], optionSelected: [{
|
|
1763
|
+
type: Output
|
|
1764
|
+
}], inputChange: [{
|
|
1765
|
+
type: Output
|
|
1766
|
+
}], onClickOutside: [{
|
|
1767
|
+
type: HostListener,
|
|
1768
|
+
args: ['document:click', ['$event']]
|
|
1769
|
+
}] } });
|
|
1770
|
+
|
|
1771
|
+
/**
|
|
1772
|
+
* Molecules index
|
|
1773
|
+
*/
|
|
1774
|
+
|
|
1545
1775
|
/*
|
|
1546
1776
|
* Public API Surface of @lesterarte/sefin-ui
|
|
1547
1777
|
*/
|
|
@@ -1553,5 +1783,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
1553
1783
|
* Generated bundle index. Do not edit.
|
|
1554
1784
|
*/
|
|
1555
1785
|
|
|
1556
|
-
export { AutocompleteComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, CheckboxComponent, DARK_THEME, DESIGN_TOKENS, IconButtonComponent, LIGHT_THEME, LinkComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, ThemeLoader, TypographyComponent };
|
|
1786
|
+
export { AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, DARK_THEME, DESIGN_TOKENS, FabButtonComponent, IconButtonComponent, LIGHT_THEME, LinkComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, ThemeLoader, TypographyComponent };
|
|
1557
1787
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|