@lesterarte/sefin-ui 0.0.18-dev.0 → 0.0.19-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/lesterarte-sefin-ui.mjs +210 -10
  2. package/fesm2022/lesterarte-sefin-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/lesterarte-sefin-ui.d.ts +68 -2
package/fesm2022/lesterarte-sefin-ui.mjs CHANGED
@@ -2413,6 +2413,11 @@ class ToastComponent {
2413
2413
  }, this.remainingTime);
2414
2414
  }
2415
2415
  }
2416
+ onCloseClick(event) {
2417
+ event.preventDefault();
2418
+ event.stopPropagation();
2419
+ this.dismiss();
2420
+ }
2416
2421
  dismiss() {
2417
2422
  if (this.isExiting) {
2418
2423
  return;
@@ -2421,10 +2426,12 @@ class ToastComponent {
2421
2426
  this.clearExitAnimation();
2422
2427
  this.isExiting = true;
2423
2428
  this.cdr.detectChanges();
2424
- // Wait for exit animation to complete
2429
+ // Emit the dismissed event immediately so parent can handle it
2430
+ // The animation will still play, but the parent can remove it from the array
2431
+ this.dismissed.emit();
2432
+ // Wait for exit animation to complete before hiding
2425
2433
  this.exitAnimationTimeout = setTimeout(() => {
2426
2434
  this.isVisible = false;
2427
- this.dismissed.emit();
2428
2435
  this.cdr.detectChanges();
2429
2436
  this.exitAnimationTimeout = undefined;
2430
2437
  }, 200);
@@ -2452,11 +2459,11 @@ class ToastComponent {
2452
2459
  return iconMap[this.variant];
2453
2460
  }
2454
2461
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2455
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ToastComponent, isStandalone: true, selector: "sefin-toast", inputs: { variant: "variant", position: "position", title: "title", message: "message", duration: "duration", showIcon: "showIcon", dismissible: "dismissible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"dismiss(); $event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:400px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:1}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ToastComponent, isStandalone: true, selector: "sefin-toast", inputs: { variant: "variant", position: "position", title: "title", message: "message", duration: "duration", showIcon: "showIcon", dismissible: "dismissible", class: "class" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:400px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:1}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2456
2463
  }
2457
2464
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, decorators: [{
2458
2465
  type: Component,
2459
- args: [{ selector: 'sefin-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"dismiss(); $event.stopPropagation()\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:400px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:1}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"] }]
2466
+ args: [{ selector: 'sefin-toast', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isVisible\"\n [class]=\"toastClasses\"\n role=\"alert\"\n [attr.aria-live]=\"variant === 'error' ? 'assertive' : 'polite'\"\n (mouseenter)=\"pauseTimer()\"\n (mouseleave)=\"resumeTimer()\"\n>\n <div class=\"sefin-toast__content\">\n <div *ngIf=\"showIcon\" class=\"sefin-toast__icon\" [attr.aria-hidden]=\"true\">\n <sefin-icon [name]=\"iconName\" size=\"sm\" [color]=\"'#ffffff'\"></sefin-icon>\n </div>\n <div class=\"sefin-toast__body\">\n <div *ngIf=\"title\" class=\"sefin-toast__title\">{{ title }}</div>\n <div *ngIf=\"message\" class=\"sefin-toast__message\">{{ message }}</div>\n <ng-content></ng-content>\n </div>\n <button\n *ngIf=\"dismissible\"\n type=\"button\"\n class=\"sefin-toast__close\"\n (click)=\"onCloseClick($event)\"\n aria-label=\"Close toast\"\n >\n <sefin-icon name=\"x\" size=\"sm\"></sefin-icon>\n </button>\n </div>\n</div>\n\n", styles: [".sefin-toast{display:flex;width:400px;box-sizing:border-box;border-radius:var(--sefin-border-radius-md, 8px);border:1px solid transparent;font-family:var(--sefin-font-family-base, sans-serif);box-shadow:var(--sefin-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));padding:var(--sefin-spacing-md, 12px) var(--sefin-spacing-lg, 16px);margin-bottom:var(--sefin-spacing-xs, 4px);will-change:transform,opacity,max-height;overflow:hidden;max-height:200px;opacity:0}.sefin-toast--top-right,.sefin-toast--top-left,.sefin-toast--top-center{transform:translateY(-20px) scale(.95);animation:toast-enter-top .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--top-right.sefin-toast--exiting,.sefin-toast--top-left.sefin-toast--exiting,.sefin-toast--top-center.sefin-toast--exiting{animation:toast-exit-top .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast--bottom-right,.sefin-toast--bottom-left,.sefin-toast--bottom-center{transform:translateY(20px) scale(.95);animation:toast-enter-bottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.sefin-toast--bottom-right.sefin-toast--exiting,.sefin-toast--bottom-left.sefin-toast--exiting,.sefin-toast--bottom-center.sefin-toast--exiting{animation:toast-exit-bottom .2s cubic-bezier(.06,.71,.55,1) forwards}.sefin-toast__content{display:flex;align-items:flex-start;width:100%;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;width:24px;height:24px}.sefin-toast__icon ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center}.sefin-toast__body{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__title{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-tight, 1.4);margin:0 0 var(--sefin-spacing-xs, 4px) 0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__message{font-size:var(--sefin-font-size-base, 14px);line-height:var(--sefin-line-height-normal, 1.5);margin:0;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}.sefin-toast__close{flex-shrink:0;background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--sefin-border-radius-sm, 4px);opacity:.7;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;position:relative;z-index:1}.sefin-toast__close:hover{opacity:1;background-color:#0000000d}.sefin-toast__close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.sefin-toast__close:active{opacity:1}.sefin-toast__close ::ng-deep sefin-icon{display:flex;align-items:center;justify-content:center;pointer-events:none}.sefin-toast--success{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-success, #4caf50);border-left:4px solid var(--sefin-color-success, #4caf50)}.sefin-toast--success .sefin-toast__icon{background-color:var(--sefin-color-success, #4caf50);color:#fff}.sefin-toast--success .sefin-toast__title,.sefin-toast--success .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--success .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--success .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--success .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--warning{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-warning, #ff9800);border-left:4px solid var(--sefin-color-warning, #ff9800)}.sefin-toast--warning .sefin-toast__icon{background-color:var(--sefin-color-warning, #ff9800);color:#fff}.sefin-toast--warning .sefin-toast__title,.sefin-toast--warning .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--warning .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--warning .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--warning .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--error{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-error, #f44336);border-left:4px solid var(--sefin-color-error, #f44336)}.sefin-toast--error .sefin-toast__icon{background-color:var(--sefin-color-error, #f44336);color:#fff}.sefin-toast--error .sefin-toast__title,.sefin-toast--error .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--error .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--error .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--error .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--info{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-primary, #1976d2);border-left:4px solid var(--sefin-color-primary, #1976d2)}.sefin-toast--info .sefin-toast__icon{background-color:var(--sefin-color-primary, #1976d2);color:#fff}.sefin-toast--info .sefin-toast__title{color:var(--sefin-color-text, #1a1a1a);font-weight:var(--sefin-font-weight-semibold, 600)}.sefin-toast--info .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--info .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--info .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--info .sefin-toast__close:hover{background-color:#ffffff1a}.sefin-toast--default{background-color:var(--sefin-color-surface, #ffffff);border-color:var(--sefin-color-border, #e0e0e0);border-left:4px solid var(--sefin-color-border, #e0e0e0)}.sefin-toast--default .sefin-toast__icon{background-color:var(--sefin-color-text-secondary, #666);color:#fff}.sefin-toast--default .sefin-toast__title,.sefin-toast--default .sefin-toast__message{color:var(--sefin-color-text, #1a1a1a)}.sefin-toast--default .sefin-toast__close{color:var(--sefin-color-text-secondary, #666)}.sefin-toast--default .sefin-toast__close:hover{background-color:#0000000d}[data-theme=dark] .sefin-toast--default .sefin-toast__close:hover{background-color:#ffffff1a}@keyframes toast-enter-top{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-enter-bottom{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-exit-top{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(-10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-exit-bottom{0%{opacity:1;transform:translateY(0) scale(1);max-height:200px}to{opacity:0;transform:translateY(10px) scale(.95);max-height:0;padding-top:0;padding-bottom:0}}@keyframes toast-stack-first{to{transform:translateY(0) scale(1);opacity:1}}@keyframes toast-stack-second-right{to{transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-right{to{transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-right{to{transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-left{to{transform:translateY(4px) translate(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-left{to{transform:translateY(8px) translate(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-left{to{transform:translateY(12px) translate(12px) scale(.85);opacity:.7}}@keyframes toast-stack-second-center{to{transform:translateY(4px) scale(.95);opacity:.9}}@keyframes toast-stack-third-center{to{transform:translateY(8px) scale(.9);opacity:.8}}@keyframes toast-stack-fourth-center{to{transform:translateY(12px) scale(.85);opacity:.7}}.sefin-toast-container{position:fixed;z-index:99999;pointer-events:none;display:flex;flex-direction:column;isolation:isolate;gap:var(--sefin-spacing-sm, 8px)}.sefin-toast-container--top-right{top:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--top-left{top:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--top-center{top:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container--bottom-right{bottom:var(--sefin-spacing-lg, 24px);right:var(--sefin-spacing-lg, 24px);align-items:flex-end}.sefin-toast-container--bottom-left{bottom:var(--sefin-spacing-lg, 24px);left:var(--sefin-spacing-lg, 24px);align-items:flex-start}.sefin-toast-container--bottom-center{bottom:var(--sefin-spacing-lg, 24px);left:50%;transform:translate(-50%);align-items:center}.sefin-toast-container .sefin-toast{pointer-events:auto;position:relative;margin-bottom:0;transition:max-height .2s cubic-bezier(.21,1.02,.73,1),padding .2s cubic-bezier(.21,1.02,.73,1),transform .3s cubic-bezier(.21,1.02,.73,1) .4s,opacity .3s cubic-bezier(.21,1.02,.73,1) .4s}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(-4px) scale(.95);opacity:.9}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(-8px) scale(.9);opacity:.8}.sefin-toast-container--top-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-right .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(-12px) scale(.85);opacity:.7}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) translate(4px) scale(.95);opacity:.9}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) translate(8px) scale(.9);opacity:.8}.sefin-toast-container--top-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-left .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) translate(12px) scale(.85);opacity:.7}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(2){transform:translateY(4px) scale(.95);opacity:.9}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(3){transform:translateY(8px) scale(.9);opacity:.8}.sefin-toast-container--top-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4),.sefin-toast-container--bottom-center .sefin-toast.sefin-toast--visible:not(.sefin-toast--exiting):nth-child(n+4){transform:translateY(12px) scale(.85);opacity:.7}.sefin-toast-container .sefin-toast:hover:not(.sefin-toast--exiting){z-index:10!important;transform:translateY(-2px) scale(1)!important;opacity:1!important;box-shadow:var(--sefin-shadow-xl, 0 12px 30px rgba(0, 0, 0, .18))!important;transition:transform .2s cubic-bezier(.21,1.02,.73,1),opacity .2s cubic-bezier(.21,1.02,.73,1),box-shadow .2s cubic-bezier(.21,1.02,.73,1)!important}\n"] }]
2460
2467
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
2461
2468
  type: Input
2462
2469
  }], position: [{
@@ -2848,10 +2855,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
2848
2855
  type: Output
2849
2856
  }] } });
2850
2857
 
2858
+ class ImageComponent {
2859
+ /** Image source URL (required) */
2860
+ src;
2861
+ /** Alt text for the image (required for accessibility) */
2862
+ alt = '';
2863
+ /** Image width (can be a number in pixels or a string like '100%', 'auto', etc.) */
2864
+ width;
2865
+ /** Image height (can be a number in pixels or a string like '100%', 'auto', etc.) */
2866
+ height;
2867
+ /** How the image should be resized to fit its container. Options: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' */
2868
+ fit = 'cover';
2869
+ /** Loading strategy. Options: 'lazy' | 'eager' */
2870
+ loading = 'lazy';
2871
+ /** Whether the image should have rounded corners. Options: 'none' | 'sm' | 'md' | 'lg' | 'full' */
2872
+ rounded = 'none';
2873
+ /** Aspect ratio (e.g., '16/9', '4/3', '1/1') */
2874
+ aspectRatio;
2875
+ /** Placeholder/fallback image URL to show if main image fails to load */
2876
+ fallback;
2877
+ /** Whether the image is disabled (reduced opacity) */
2878
+ disabled = false;
2879
+ /** Additional CSS classes */
2880
+ class = '';
2881
+ /** Sizes attribute for responsive images */
2882
+ sizes;
2883
+ /** Srcset attribute for responsive images */
2884
+ srcset;
2885
+ hasError = false;
2886
+ currentSrc = null;
2887
+ ngOnInit() {
2888
+ this.updateCurrentSrc();
2889
+ }
2890
+ ngOnChanges(changes) {
2891
+ if (changes['src'] || changes['fallback']) {
2892
+ this.updateCurrentSrc();
2893
+ }
2894
+ }
2895
+ updateCurrentSrc() {
2896
+ const srcValue = this.src;
2897
+ if (srcValue && typeof srcValue === 'string' && srcValue.trim() !== '') {
2898
+ this.currentSrc = srcValue;
2899
+ this.hasError = false;
2900
+ }
2901
+ else {
2902
+ this.hasError = true;
2903
+ this.currentSrc = null;
2904
+ }
2905
+ }
2906
+ onImageError(event) {
2907
+ if (this.fallback && this.currentSrc !== this.fallback) {
2908
+ this.currentSrc = this.fallback;
2909
+ this.hasError = false;
2910
+ }
2911
+ else {
2912
+ this.hasError = true;
2913
+ }
2914
+ }
2915
+ onImageLoad() {
2916
+ this.hasError = false;
2917
+ }
2918
+ get imageClasses() {
2919
+ return [
2920
+ 'sefin-image',
2921
+ `sefin-image--fit-${this.fit}`,
2922
+ `sefin-image--rounded-${this.rounded}`,
2923
+ this.disabled ? 'sefin-image--disabled' : '',
2924
+ this.hasError ? 'sefin-image--error' : '',
2925
+ this.class,
2926
+ ]
2927
+ .filter(Boolean)
2928
+ .join(' ');
2929
+ }
2930
+ get imageStyles() {
2931
+ const styles = {};
2932
+ if (this.width !== undefined) {
2933
+ styles['width'] = typeof this.width === 'number' ? `${this.width}px` : this.width;
2934
+ }
2935
+ if (this.height !== undefined) {
2936
+ styles['height'] = typeof this.height === 'number' ? `${this.height}px` : this.height;
2937
+ }
2938
+ if (this.aspectRatio) {
2939
+ styles['aspect-ratio'] = this.aspectRatio;
2940
+ }
2941
+ return styles;
2942
+ }
2943
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2944
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ImageComponent, isStandalone: true, selector: "sefin-image", inputs: { src: "src", alt: "alt", width: "width", height: "height", fit: "fit", loading: "loading", rounded: "rounded", aspectRatio: "aspectRatio", fallback: "fallback", disabled: "disabled", class: "class", sizes: "sizes", srcset: "srcset" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:inline-block;overflow:hidden;font-family:var(--sefin-font-family-base)}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--rounded-none{border-radius:0}.sefin-image--rounded-sm{border-radius:var(--sefin-radius-sm, 4px)}.sefin-image--rounded-md{border-radius:var(--sefin-radius-md, 8px)}.sefin-image--rounded-lg{border-radius:var(--sefin-radius-lg, 12px)}.sefin-image--rounded-full{border-radius:50%}.sefin-image--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-image--error{background-color:var(--sefin-color-surface, #f5f5f5);border:1px dashed var(--sefin-color-border, #e0e0e0);display:flex;align-items:center;justify-content:center;min-height:100px;color:var(--sefin-color-text-secondary, #666)}.sefin-image__img{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.sefin-image__error-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-xs, 4px);padding:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base)}.sefin-image__error-text{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm, 12px);color:var(--sefin-color-text-secondary, #666);text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2945
+ }
2946
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageComponent, decorators: [{
2947
+ type: Component,
2948
+ args: [{ selector: 'sefin-image', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"!hasError && currentSrc\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n>\n <img\n [src]=\"currentSrc\"\n [alt]=\"alt || ''\"\n [loading]=\"loading\"\n [attr.sizes]=\"sizes || null\"\n [attr.srcset]=\"srcset || null\"\n (error)=\"onImageError($event)\"\n (load)=\"onImageLoad()\"\n class=\"sefin-image__img\"\n />\n</div>\n<div\n *ngIf=\"hasError\"\n [class]=\"imageClasses\"\n [ngStyle]=\"imageStyles\"\n class=\"sefin-image__error\"\n>\n <div class=\"sefin-image__error-content\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M21 19V5C21 3.9 20.1 3 19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19ZM8.5 13.5L11 16.51L14.5 12L19 18H5L8.5 13.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n <span *ngIf=\"alt\" class=\"sefin-image__error-text\">{{ alt }}</span>\n </div>\n</div>\n\n", styles: [".sefin-image{position:relative;display:inline-block;overflow:hidden;font-family:var(--sefin-font-family-base)}.sefin-image--fit-cover .sefin-image__img{object-fit:cover}.sefin-image--fit-contain .sefin-image__img{object-fit:contain}.sefin-image--fit-fill .sefin-image__img{object-fit:fill}.sefin-image--fit-none .sefin-image__img{object-fit:none}.sefin-image--fit-scale-down .sefin-image__img{object-fit:scale-down}.sefin-image--rounded-none{border-radius:0}.sefin-image--rounded-sm{border-radius:var(--sefin-radius-sm, 4px)}.sefin-image--rounded-md{border-radius:var(--sefin-radius-md, 8px)}.sefin-image--rounded-lg{border-radius:var(--sefin-radius-lg, 12px)}.sefin-image--rounded-full{border-radius:50%}.sefin-image--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.sefin-image--error{background-color:var(--sefin-color-surface, #f5f5f5);border:1px dashed var(--sefin-color-border, #e0e0e0);display:flex;align-items:center;justify-content:center;min-height:100px;color:var(--sefin-color-text-secondary, #666)}.sefin-image__img{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.sefin-image__error-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-xs, 4px);padding:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base)}.sefin-image__error-text{font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm, 12px);color:var(--sefin-color-text-secondary, #666);text-align:center}\n"] }]
2949
+ }], propDecorators: { src: [{
2950
+ type: Input
2951
+ }], alt: [{
2952
+ type: Input
2953
+ }], width: [{
2954
+ type: Input
2955
+ }], height: [{
2956
+ type: Input
2957
+ }], fit: [{
2958
+ type: Input
2959
+ }], loading: [{
2960
+ type: Input
2961
+ }], rounded: [{
2962
+ type: Input
2963
+ }], aspectRatio: [{
2964
+ type: Input
2965
+ }], fallback: [{
2966
+ type: Input
2967
+ }], disabled: [{
2968
+ type: Input
2969
+ }], class: [{
2970
+ type: Input
2971
+ }], sizes: [{
2972
+ type: Input
2973
+ }], srcset: [{
2974
+ type: Input
2975
+ }] } });
2976
+
2851
2977
  /**
2852
2978
  * Atoms index
2853
2979
  */
2854
2980
 
2981
+ class AccordionItemComponent {
2982
+ /** Title text for the accordion header */
2983
+ title = '';
2984
+ /** Whether the accordion item is expanded */
2985
+ expanded = false;
2986
+ /** Whether the accordion item is disabled */
2987
+ disabled = false;
2988
+ /** Additional CSS classes */
2989
+ class = '';
2990
+ /** Event emitted when the accordion item is toggled */
2991
+ toggle = new EventEmitter();
2992
+ onHeaderClick() {
2993
+ if (!this.disabled) {
2994
+ this.expanded = !this.expanded;
2995
+ this.toggle.emit(this.expanded);
2996
+ }
2997
+ }
2998
+ get accordionClasses() {
2999
+ return [
3000
+ 'sefin-accordion-item',
3001
+ this.expanded ? 'sefin-accordion-item--expanded' : '',
3002
+ this.disabled ? 'sefin-accordion-item--disabled' : '',
3003
+ this.class,
3004
+ ]
3005
+ .filter(Boolean)
3006
+ .join(' ');
3007
+ }
3008
+ get headerClasses() {
3009
+ return [
3010
+ 'sefin-accordion-item__header',
3011
+ this.expanded ? 'sefin-accordion-item__header--expanded' : '',
3012
+ this.disabled ? 'sefin-accordion-item__header--disabled' : '',
3013
+ ]
3014
+ .filter(Boolean)
3015
+ .join(' ');
3016
+ }
3017
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3018
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: AccordionItemComponent, isStandalone: true, selector: "sefin-accordion-item", inputs: { title: "title", expanded: "expanded", disabled: "disabled", class: "class" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);border:1px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface, #ffffff);border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #1a1a1a);text-align:left;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header:focus-visible{outline:2px solid var(--sefin-color-border-focus, #1976d2);outline-offset:-2px}.sefin-accordion-item__header:active:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--disabled{cursor:not-allowed;opacity:.6}.sefin-accordion-item__title{flex:1;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #1a1a1a);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);transition:max-height .3s cubic-bezier(.4,0,.2,1) 0ms,padding .3s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__content--expanded{max-height:2000px;padding:0 var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px)}.sefin-accordion-item__content-inner{padding-top:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1a1a1a);line-height:var(--sefin-line-height-normal, 1.5)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3019
+ }
3020
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
3021
+ type: Component,
3022
+ args: [{ selector: 'sefin-accordion-item', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClasses\">\n <button\n type=\"button\"\n [class]=\"headerClasses\"\n [disabled]=\"disabled\"\n (click)=\"onHeaderClick()\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-disabled]=\"disabled\"\n >\n <span class=\"sefin-accordion-item__title\">{{ title }}</span>\n <sefin-icon\n name=\"chevron-down\"\n size=\"sm\"\n [class]=\"'sefin-accordion-item__icon'\"\n [ngClass]=\"{'sefin-accordion-item__icon--expanded': expanded}\"\n ></sefin-icon>\n </button>\n <div\n class=\"sefin-accordion-item__content\"\n [class.sefin-accordion-item__content--expanded]=\"expanded\"\n [attr.aria-hidden]=\"!expanded\"\n >\n <div class=\"sefin-accordion-item__content-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n", styles: [".sefin-accordion-item{display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base);border:1px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);background-color:var(--sefin-color-surface, #ffffff);border:none;cursor:pointer;outline:none;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #1a1a1a);text-align:left;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:hover:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header:focus-visible{outline:2px solid var(--sefin-color-border-focus, #1976d2);outline-offset:-2px}.sefin-accordion-item__header:active:not(:disabled){background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--expanded{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-accordion-item__header--disabled{cursor:not-allowed;opacity:.6}.sefin-accordion-item__title{flex:1;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-medium, 500);color:var(--sefin-color-text, #1a1a1a);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);transition:max-height .3s cubic-bezier(.4,0,.2,1) 0ms,padding .3s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__content--expanded{max-height:2000px;padding:0 var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px)}.sefin-accordion-item__content-inner{padding-top:var(--sefin-spacing-md, 16px);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1a1a1a);line-height:var(--sefin-line-height-normal, 1.5)}\n"] }]
3023
+ }], propDecorators: { title: [{
3024
+ type: Input
3025
+ }], expanded: [{
3026
+ type: Input
3027
+ }], disabled: [{
3028
+ type: Input
3029
+ }], class: [{
3030
+ type: Input
3031
+ }], toggle: [{
3032
+ type: Output
3033
+ }] } });
3034
+
2855
3035
  class AutocompleteComponent {
2856
3036
  inputRef;
2857
3037
  dropdownRef;
@@ -2871,6 +3051,7 @@ class AutocompleteComponent {
2871
3051
  filteredOptions = [];
2872
3052
  isOpen = false;
2873
3053
  selectedIndex = -1;
3054
+ isSelectingOption = false;
2874
3055
  ngOnInit() {
2875
3056
  if (this.value !== null) {
2876
3057
  const selectedOption = this.options.find((opt) => opt.value === this.value);
@@ -2951,6 +3132,18 @@ class AutocompleteComponent {
2951
3132
  })
2952
3133
  .slice(0, this.maxResults);
2953
3134
  }
3135
+ onOptionMouseDown(event, option) {
3136
+ // Prevenir que el input pierda el foco cuando se hace clic en una opción
3137
+ event.preventDefault();
3138
+ if (!option.disabled) {
3139
+ this.isSelectingOption = true;
3140
+ this.selectOption(option);
3141
+ // Resetear el flag después de un pequeño delay
3142
+ setTimeout(() => {
3143
+ this.isSelectingOption = false;
3144
+ }, 100);
3145
+ }
3146
+ }
2954
3147
  selectOption(option) {
2955
3148
  if (option.disabled)
2956
3149
  return;
@@ -2976,15 +3169,22 @@ class AutocompleteComponent {
2976
3169
  }
2977
3170
  }
2978
3171
  onInputBlur() {
3172
+ // Si se está seleccionando una opción, no hacer nada
3173
+ if (this.isSelectingOption) {
3174
+ return;
3175
+ }
2979
3176
  if (this.disabled || !this.searchText) {
2980
3177
  return;
2981
3178
  }
2982
3179
  const exactMatch = this.options.find((option) => !option.disabled &&
2983
3180
  option.label.toLowerCase().trim() === this.searchText.toLowerCase().trim());
2984
3181
  if (!exactMatch) {
2985
- this.searchText = '';
2986
- this.value = null;
2987
- this.valueChange.emit(null);
3182
+ // Mantener el texto escrito por el usuario
3183
+ // Resetear el value a null ya que no hay una opción seleccionada
3184
+ if (this.value !== null) {
3185
+ this.value = null;
3186
+ this.valueChange.emit(null);
3187
+ }
2988
3188
  this.isOpen = false;
2989
3189
  this.filteredOptions = [];
2990
3190
  this.selectedIndex = -1;
@@ -3068,11 +3268,11 @@ class AutocompleteComponent {
3068
3268
  .join(' ');
3069
3269
  }
3070
3270
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3071
- 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;box-sizing:border-box}.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;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.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;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.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 });
3271
+ 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 (mousedown)=\"onOptionMouseDown($event, option)\"\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;box-sizing:border-box}.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;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.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;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.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 });
3072
3272
  }
3073
3273
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
3074
3274
  type: Component,
3075
- 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;box-sizing:border-box}.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;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.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;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.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"] }]
3275
+ 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 (mousedown)=\"onOptionMouseDown($event, option)\"\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;box-sizing:border-box}.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;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.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;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.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"] }]
3076
3276
  }], propDecorators: { inputRef: [{
3077
3277
  type: ViewChild,
3078
3278
  args: ['inputRef', { static: false }]
@@ -4159,5 +4359,5 @@ const STYLES_PATH = './styles/index.scss';
4159
4359
  * Generated bundle index. Do not edit.
4160
4360
  */
4161
4361
 
4162
- export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
4362
+ export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
4163
4363
  //# sourceMappingURL=lesterarte-sefin-ui.mjs.map