@lesterarte/sefin-ui 0.0.19 → 0.0.20-dev.1
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.
|
@@ -2416,7 +2416,9 @@ class ToastComponent {
|
|
|
2416
2416
|
onCloseClick(event) {
|
|
2417
2417
|
event.preventDefault();
|
|
2418
2418
|
event.stopPropagation();
|
|
2419
|
-
this.
|
|
2419
|
+
if (!this.isExiting) {
|
|
2420
|
+
this.dismiss();
|
|
2421
|
+
}
|
|
2420
2422
|
}
|
|
2421
2423
|
dismiss() {
|
|
2422
2424
|
if (this.isExiting) {
|
|
@@ -2459,11 +2461,11 @@ class ToastComponent {
|
|
|
2459
2461
|
return iconMap[this.variant];
|
|
2460
2462
|
}
|
|
2461
2463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
2464
|
+
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 (mousedown)=\"$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:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;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:10;pointer-events:auto}.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 });
|
|
2463
2465
|
}
|
|
2464
2466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastComponent, decorators: [{
|
|
2465
2467
|
type: Component,
|
|
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"] }]
|
|
2468
|
+
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 (mousedown)=\"$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:4px;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;width:28px;height:28px;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:10;pointer-events:auto}.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"] }]
|
|
2467
2469
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
|
|
2468
2470
|
type: Input
|
|
2469
2471
|
}], position: [{
|
|
@@ -3015,11 +3017,11 @@ class AccordionItemComponent {
|
|
|
3015
3017
|
.join(' ');
|
|
3016
3018
|
}
|
|
3017
3019
|
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, #
|
|
3020
|
+
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);background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1) 0ms,border-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item:hover:not(.sefin-accordion-item--disabled){border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--expanded{border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding: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);text-align:left;position:relative;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:transparent;transition:background-color .2s 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, #55C3D8);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--expanded:before{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded:hover:not(:disabled){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, #383838);line-height:var(--sefin-line-height-normal, 1.5);transition:color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header--disabled .sefin-accordion-item__title{color:var(--sefin-color-text-disabled, #9b9b9b)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #686868);transition:transform .3s cubic-bezier(.4,0,.2,1) 0ms,color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg);color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header:hover:not(:disabled) .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);padding:0 var(--sefin-spacing-lg, 24px);transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .35s cubic-bezier(.4,0,.2,1) 0ms,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;padding-bottom:0}.sefin-accordion-item__content--expanded{max-height:2000px;padding-bottom:var(--sefin-spacing-lg, 24px);opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s cubic-bezier(.4,0,.2,1) .1s,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms}.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-secondary, #686868);line-height:var(--sefin-line-height-relaxed, 1.75)}\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
3021
|
}
|
|
3020
3022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
3021
3023
|
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, #
|
|
3024
|
+
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);background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:box-shadow .2s cubic-bezier(.4,0,.2,1) 0ms,border-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item:hover:not(.sefin-accordion-item--disabled){border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--expanded{border-color:var(--sefin-color-primary, #55C3D8);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-accordion-item--disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.sefin-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding: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);text-align:left;position:relative;transition:background-color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background-color:transparent;transition:background-color .2s 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, #55C3D8);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--expanded:before{background-color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded:hover:not(:disabled){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, #383838);line-height:var(--sefin-line-height-normal, 1.5);transition:color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__header--disabled .sefin-accordion-item__title{color:var(--sefin-color-text-disabled, #9b9b9b)}.sefin-accordion-item__icon{flex-shrink:0;margin-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #686868);transition:transform .3s cubic-bezier(.4,0,.2,1) 0ms,color .2s cubic-bezier(.4,0,.2,1) 0ms}.sefin-accordion-item__icon--expanded{transform:rotate(180deg);color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header:hover:not(:disabled) .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__header--expanded .sefin-accordion-item__icon{color:var(--sefin-color-primary, #55C3D8)}.sefin-accordion-item__content{max-height:0;overflow:hidden;background-color:var(--sefin-color-surface, #ffffff);padding:0 var(--sefin-spacing-lg, 24px);transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .35s cubic-bezier(.4,0,.2,1) 0ms,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;padding-bottom:0}.sefin-accordion-item__content--expanded{max-height:2000px;padding-bottom:var(--sefin-spacing-lg, 24px);opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1) 0ms,opacity .3s cubic-bezier(.4,0,.2,1) .1s,padding-bottom .4s cubic-bezier(.4,0,.2,1) 0ms}.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-secondary, #686868);line-height:var(--sefin-line-height-relaxed, 1.75)}\n"] }]
|
|
3023
3025
|
}], propDecorators: { title: [{
|
|
3024
3026
|
type: Input
|
|
3025
3027
|
}], expanded: [{
|