@edmicro/olkit 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/edmicro-olkit.mjs +72 -364
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/types/edmicro-olkit.d.ts +2 -1
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
|
@@ -5,7 +5,6 @@ import { CommonModule, NgStyle } from '@angular/common';
|
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
6
|
import { of, from } from 'rxjs';
|
|
7
7
|
import { tap, shareReplay, map, catchError } from 'rxjs/operators';
|
|
8
|
-
import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
|
|
9
8
|
import * as i1$1 from '@angular/router';
|
|
10
9
|
import { RouterModule } from '@angular/router';
|
|
11
10
|
import * as i1$2 from '@angular/forms';
|
|
@@ -4364,48 +4363,48 @@ class IconComponent {
|
|
|
4364
4363
|
}, /* @ts-ignore */
|
|
4365
4364
|
...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
|
|
4366
4365
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4367
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: IconComponent, isStandalone: true, selector: "ol-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center justify-center shrink-0 leading-none align-middle" }, ngImport: i0, template: `
|
|
4368
|
-
@if (svgContent(); as svg) {
|
|
4369
|
-
<span
|
|
4370
|
-
[class]="containerClasses()"
|
|
4371
|
-
[style.width]="customPixelSize()"
|
|
4372
|
-
[style.height]="customPixelSize()"
|
|
4373
|
-
[style.stroke-width]="strokeWidth()"
|
|
4374
|
-
[style.color]="isCustomColor() ? color() : null"
|
|
4375
|
-
[innerHTML]="svg"
|
|
4376
|
-
></span>
|
|
4377
|
-
} @else {
|
|
4378
|
-
<!-- Fallback / Loading placeholder -->
|
|
4379
|
-
<span
|
|
4380
|
-
[class]="containerClasses()"
|
|
4381
|
-
[style.width]="customPixelSize()"
|
|
4382
|
-
[style.height]="customPixelSize()"
|
|
4383
|
-
[style.color]="isCustomColor() ? color() : null"
|
|
4384
|
-
></span>
|
|
4385
|
-
}
|
|
4366
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: IconComponent, isStandalone: true, selector: "ol-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex items-center justify-center shrink-0 leading-none align-middle" }, ngImport: i0, template: `
|
|
4367
|
+
@if (svgContent(); as svg) {
|
|
4368
|
+
<span
|
|
4369
|
+
[class]="containerClasses()"
|
|
4370
|
+
[style.width]="customPixelSize()"
|
|
4371
|
+
[style.height]="customPixelSize()"
|
|
4372
|
+
[style.stroke-width]="strokeWidth()"
|
|
4373
|
+
[style.color]="isCustomColor() ? color() : null"
|
|
4374
|
+
[innerHTML]="svg"
|
|
4375
|
+
></span>
|
|
4376
|
+
} @else {
|
|
4377
|
+
<!-- Fallback / Loading placeholder -->
|
|
4378
|
+
<span
|
|
4379
|
+
[class]="containerClasses()"
|
|
4380
|
+
[style.width]="customPixelSize()"
|
|
4381
|
+
[style.height]="customPixelSize()"
|
|
4382
|
+
[style.color]="isCustomColor() ? color() : null"
|
|
4383
|
+
></span>
|
|
4384
|
+
}
|
|
4386
4385
|
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;flex-shrink:0}:host ::ng-deep svg{width:100%;height:100%;display:block;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4387
4386
|
}
|
|
4388
4387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: IconComponent, decorators: [{
|
|
4389
4388
|
type: Component,
|
|
4390
|
-
args: [{ selector: 'ol-icon', standalone: true, imports: [CommonModule], template: `
|
|
4391
|
-
@if (svgContent(); as svg) {
|
|
4392
|
-
<span
|
|
4393
|
-
[class]="containerClasses()"
|
|
4394
|
-
[style.width]="customPixelSize()"
|
|
4395
|
-
[style.height]="customPixelSize()"
|
|
4396
|
-
[style.stroke-width]="strokeWidth()"
|
|
4397
|
-
[style.color]="isCustomColor() ? color() : null"
|
|
4398
|
-
[innerHTML]="svg"
|
|
4399
|
-
></span>
|
|
4400
|
-
} @else {
|
|
4401
|
-
<!-- Fallback / Loading placeholder -->
|
|
4402
|
-
<span
|
|
4403
|
-
[class]="containerClasses()"
|
|
4404
|
-
[style.width]="customPixelSize()"
|
|
4405
|
-
[style.height]="customPixelSize()"
|
|
4406
|
-
[style.color]="isCustomColor() ? color() : null"
|
|
4407
|
-
></span>
|
|
4408
|
-
}
|
|
4389
|
+
args: [{ selector: 'ol-icon', standalone: true, imports: [CommonModule], template: `
|
|
4390
|
+
@if (svgContent(); as svg) {
|
|
4391
|
+
<span
|
|
4392
|
+
[class]="containerClasses()"
|
|
4393
|
+
[style.width]="customPixelSize()"
|
|
4394
|
+
[style.height]="customPixelSize()"
|
|
4395
|
+
[style.stroke-width]="strokeWidth()"
|
|
4396
|
+
[style.color]="isCustomColor() ? color() : null"
|
|
4397
|
+
[innerHTML]="svg"
|
|
4398
|
+
></span>
|
|
4399
|
+
} @else {
|
|
4400
|
+
<!-- Fallback / Loading placeholder -->
|
|
4401
|
+
<span
|
|
4402
|
+
[class]="containerClasses()"
|
|
4403
|
+
[style.width]="customPixelSize()"
|
|
4404
|
+
[style.height]="customPixelSize()"
|
|
4405
|
+
[style.color]="isCustomColor() ? color() : null"
|
|
4406
|
+
></span>
|
|
4407
|
+
}
|
|
4409
4408
|
`, host: {
|
|
4410
4409
|
class: 'inline-flex items-center justify-center shrink-0 leading-none align-middle',
|
|
4411
4410
|
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;flex-shrink:0}:host ::ng-deep svg{width:100%;height:100%;display:block;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}\n"] }]
|
|
@@ -4861,31 +4860,13 @@ class OlAlertComponent {
|
|
|
4861
4860
|
}, 300);
|
|
4862
4861
|
}
|
|
4863
4862
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4864
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlAlertComponent, isStandalone: true, selector: "ol-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (visible()) {\n <div\n [class]=\"alertClasses()\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'danger' ? 'assertive' : 'polite'\"\n
|
|
4865
|
-
trigger('fadeOut', [
|
|
4866
|
-
transition(':leave', [
|
|
4867
|
-
animate('300ms ease-out', style({
|
|
4868
|
-
opacity: 0,
|
|
4869
|
-
transform: 'translateY(-8px)',
|
|
4870
|
-
})),
|
|
4871
|
-
]),
|
|
4872
|
-
]),
|
|
4873
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4863
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlAlertComponent, isStandalone: true, selector: "ol-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, host: { classAttribute: "block w-full" }, ngImport: i0, template: "@if (visible()) {\n <div\n [class]=\"alertClasses()\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'danger' ? 'assertive' : 'polite'\"\n animate.leave=\"alert-fade-out\">\n <div class=\"flex items-start gap-3\">\n <!-- Leading Icon -->\n @if (showIcon()) {\n <ol-icon\n [name]=\"iconName()\"\n [class]=\"iconClasses()\"\n [size]=\"20\" />\n }\n\n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n <!-- Title -->\n @if (title()) {\n <h4 class=\"font-semibold mb-1 text-sm\">{{ title() }}</h4>\n }\n\n <!-- Body Content (ng-content) -->\n <div class=\"text-sm leading-relaxed\">\n <ng-content />\n </div>\n\n <!-- Action Buttons Slot -->\n <div class=\"mt-3 flex items-center gap-2\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n <!-- Dismiss Button -->\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"closeButtonClasses()\"\n (click)=\"dismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <span class=\"sr-only\">\u0110\u00F3ng</span>\n <ol-icon name=\"close\" [size]=\"16\" />\n </button>\n }\n </div>\n </div>\n}\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4874
4864
|
}
|
|
4875
4865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlAlertComponent, decorators: [{
|
|
4876
4866
|
type: Component,
|
|
4877
4867
|
args: [{ selector: 'ol-alert', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4878
4868
|
class: 'block w-full',
|
|
4879
|
-
},
|
|
4880
|
-
trigger('fadeOut', [
|
|
4881
|
-
transition(':leave', [
|
|
4882
|
-
animate('300ms ease-out', style({
|
|
4883
|
-
opacity: 0,
|
|
4884
|
-
transform: 'translateY(-8px)',
|
|
4885
|
-
})),
|
|
4886
|
-
]),
|
|
4887
|
-
]),
|
|
4888
|
-
], template: "@if (visible()) {\n <div\n [class]=\"alertClasses()\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'danger' ? 'assertive' : 'polite'\"\n @fadeOut>\n <div class=\"flex items-start gap-3\">\n <!-- Leading Icon -->\n @if (showIcon()) {\n <ol-icon\n [name]=\"iconName()\"\n [class]=\"iconClasses()\"\n [size]=\"20\" />\n }\n\n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n <!-- Title -->\n @if (title()) {\n <h4 class=\"font-semibold mb-1 text-sm\">{{ title() }}</h4>\n }\n\n <!-- Body Content (ng-content) -->\n <div class=\"text-sm leading-relaxed\">\n <ng-content />\n </div>\n\n <!-- Action Buttons Slot -->\n <div class=\"mt-3 flex items-center gap-2\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n <!-- Dismiss Button -->\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"closeButtonClasses()\"\n (click)=\"dismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <span class=\"sr-only\">\u0110\u00F3ng</span>\n <ol-icon name=\"close\" [size]=\"16\" />\n </button>\n }\n </div>\n </div>\n}\n" }]
|
|
4869
|
+
}, template: "@if (visible()) {\n <div\n [class]=\"alertClasses()\"\n role=\"alert\"\n [attr.aria-live]=\"type() === 'danger' ? 'assertive' : 'polite'\"\n animate.leave=\"alert-fade-out\">\n <div class=\"flex items-start gap-3\">\n <!-- Leading Icon -->\n @if (showIcon()) {\n <ol-icon\n [name]=\"iconName()\"\n [class]=\"iconClasses()\"\n [size]=\"20\" />\n }\n\n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n <!-- Title -->\n @if (title()) {\n <h4 class=\"font-semibold mb-1 text-sm\">{{ title() }}</h4>\n }\n\n <!-- Body Content (ng-content) -->\n <div class=\"text-sm leading-relaxed\">\n <ng-content />\n </div>\n\n <!-- Action Buttons Slot -->\n <div class=\"mt-3 flex items-center gap-2\">\n <ng-content select=\"[alertActions]\" />\n </div>\n </div>\n\n <!-- Dismiss Button -->\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"closeButtonClasses()\"\n (click)=\"dismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <span class=\"sr-only\">\u0110\u00F3ng</span>\n <ol-icon name=\"close\" [size]=\"16\" />\n </button>\n }\n </div>\n </div>\n}\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"] }]
|
|
4889
4870
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
|
|
4890
4871
|
|
|
4891
4872
|
class AlertComponent {
|
|
@@ -5039,11 +5020,11 @@ class AvatarComponent {
|
|
|
5039
5020
|
this.remove.emit(event);
|
|
5040
5021
|
}
|
|
5041
5022
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvatarComponent, isStandalone: true, selector: "ol-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusPosition: { classPropertyName: "statusPosition", publicName: "statusPosition", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, showHelper: { classPropertyName: "showHelper", publicName: "showHelper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"inline-flex items-center\" [class.gap-1.5]=\"size() === '2xs'\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\r\n <!-- Avatar Icon/Image Node -->\r\n <div class=\"relative inline-block shrink-0 leading-none select-none\">\r\n @if (src()) {\r\n <img\r\n [src]=\"src()\"\r\n [alt]=\"alt()\"\r\n class=\"object-cover\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-3.5]=\"size() === '2xs'\"\r\n [class.h-3.5]=\"size() === '2xs'\"\r\n [class.w-4]=\"size() === 'xs'\"\r\n [class.h-4]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-11]=\"size() === 'lg'\"\r\n [class.h-11]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n />\r\n } @else if (initials() || text()) {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 font-semibold uppercase\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-3.5]=\"size() === '2xs'\"\r\n [class.h-3.5]=\"size() === '2xs'\"\r\n [class.text-[8px]]=\"size() === '2xs'\"\r\n [class.w-4]=\"size() === 'xs'\"\r\n [class.h-4]=\"size() === 'xs'\"\r\n [class.text-[9px]]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-11]=\"size() === 'lg'\"\r\n [class.h-11]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.text-xl]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.text-2xl]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n {{ initials() || text() }}\r\n </div>\r\n } @else {\r\n <div\r\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-400 font-semibold\"\r\n [class.rounded-full]=\"shape() === 'circle'\"\r\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\r\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\r\n [class.w-3.5]=\"size() === '2xs'\"\r\n [class.h-3.5]=\"size() === '2xs'\"\r\n [class.w-4]=\"size() === 'xs'\"\r\n [class.h-4]=\"size() === 'xs'\"\r\n [class.w-6]=\"size() === 'sm'\"\r\n [class.h-6]=\"size() === 'sm'\"\r\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-11]=\"size() === 'lg'\"\r\n [class.h-11]=\"size() === 'lg'\"\r\n [class.w-14]=\"size() === 'xl'\"\r\n [class.h-14]=\"size() === 'xl'\"\r\n [class.w-16]=\"size() === '2xl'\"\r\n [class.h-16]=\"size() === '2xl'\"\r\n [class.ring-2]=\"bordered()\"\r\n [class.ring-white]=\"bordered()\"\r\n [class.dark:ring-neutral-900]=\"bordered()\"\r\n >\r\n <ng-content>\r\n <!-- Default Figma User Placeholder Icon -->\r\n <svg\r\n class=\"w-full h-full p-1 fill-current opacity-80\"\r\n viewBox=\"0 0 20 20\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n fill-rule=\"evenodd\"\r\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\r\n clip-rule=\"evenodd\"\r\n ></path>\r\n </svg>\r\n </ng-content>\r\n </div>\r\n }\r\n\r\n <!-- Status Dot -->\r\n @if (status()) {\r\n <span\r\n class=\"absolute rounded-full ring-2 ring-white dark:ring-neutral-900 shrink-0\"\r\n [class.bottom-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.right-0]=\"statusPosition() === 'bottom-right'\"\r\n [class.top-0]=\"statusPosition() === 'top-right'\"\r\n [class.w-1.5]=\"size() === 'xs'\"\r\n [class.h-1.5]=\"size() === 'xs'\"\r\n [class.w-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-2.5]=\"size() === 'sm'\"\r\n [class.h-2.5]=\"size() === 'sm'\"\r\n [class.w-3]=\"size() === 'lg'\"\r\n [class.h-3]=\"size() === 'lg'\"\r\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\r\n [class.bg-[#007A55]]=\"status() === 'online'\"\r\n [class.bg-[#C70036]]=\"status() === 'offline'\"\r\n [class.bg-[#D1D5DB]]=\"status() === 'alternative'\"\r\n [class.dark:bg-neutral-500]=\"status() === 'alternative'\"\r\n [class.bg-red-500]=\"status() === 'busy'\"\r\n [class.bg-amber-400]=\"status() === 'away'\"\r\n ></span>\r\n }\r\n\r\n <!-- Remove Button -->\r\n @if (removable()) {\r\n <button\r\n type=\"button\"\r\n (click)=\"onRemoveClick($event)\"\r\n class=\"absolute -top-1 -right-1 z-10 inline-flex items-center justify-center rounded-full bg-[#F3F4F6] hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-[#4A5565] dark:text-neutral-200 shadow-sm border border-white dark:border-neutral-900 cursor-pointer transition-transform active:scale-95\"\r\n [class.w-3]=\"size() === 'xs'\"\r\n [class.h-3]=\"size() === 'xs'\"\r\n [class.w-3.5]=\"size() === 'sm'\"\r\n [class.h-3.5]=\"size() === 'sm'\"\r\n [class.w-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-4]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n aria-label=\"Remove avatar\"\r\n >\r\n <svg\r\n class=\"shrink-0\"\r\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.w-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.h-2.5]=\"size() === 'base' || size() === 'md'\"\r\n [class.w-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n [class.h-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"2.5\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n </svg>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Label Details (Name & Helper Text) -->\r\n @if (name()) {\r\n <div class=\"flex flex-col min-w-0\">\r\n <span\r\n class=\"font-medium text-heading truncate\"\r\n [class.text-xs]=\"size() === 'xs' || size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-base]=\"size() === 'lg'\"\r\n [class.text-lg]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ name() }}\r\n </span>\r\n @if (helper() && showHelper()) {\r\n <span\r\n class=\"text-[#4A5565] dark:text-neutral-400 truncate\"\r\n [class.text-2xs]=\"size() === 'xs'\"\r\n [class.text-xs]=\"size() === 'sm'\"\r\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\r\n [class.text-sm]=\"size() === 'lg'\"\r\n [class.text-base]=\"size() === 'xl' || size() === '2xl'\"\r\n >\r\n {{ helper() }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5023
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvatarComponent, isStandalone: true, selector: "ol-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, statusPosition: { classPropertyName: "statusPosition", publicName: "statusPosition", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, showHelper: { classPropertyName: "showHelper", publicName: "showHelper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"inline-flex items-center\" [class.gap-1.5]=\"size() === '2xs'\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\n <!-- Avatar Icon/Image Node -->\n <div class=\"relative inline-block shrink-0 leading-none select-none\">\n @if (src()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n class=\"object-cover\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n />\n } @else if (initials() || text()) {\n <div\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 font-semibold uppercase\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.text-[8px]]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.text-[9px]]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.text-lg]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.text-xl]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.text-2xl]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n >\n {{ initials() || text() }}\n </div>\n } @else {\n <div\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-400 font-semibold\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n >\n <ng-content>\n <!-- Default Figma User Placeholder Icon -->\n <svg\n class=\"w-full h-full p-1 fill-current opacity-80\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n </ng-content>\n </div>\n }\n\n <!-- Status Dot -->\n @if (status()) {\n <span\n class=\"absolute rounded-full ring-2 ring-white dark:ring-neutral-900 shrink-0\"\n [class.bottom-0]=\"statusPosition() === 'bottom-right'\"\n [class.right-0]=\"statusPosition() === 'bottom-right'\"\n [class.top-0]=\"statusPosition() === 'top-right'\"\n [class.w-1.5]=\"size() === 'xs'\"\n [class.h-1.5]=\"size() === 'xs'\"\n [class.w-2]=\"size() === 'base' || size() === 'md'\"\n [class.h-2]=\"size() === 'base' || size() === 'md'\"\n [class.w-2.5]=\"size() === 'sm'\"\n [class.h-2.5]=\"size() === 'sm'\"\n [class.w-3]=\"size() === 'lg'\"\n [class.h-3]=\"size() === 'lg'\"\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\n [class.bg-[#007A55]]=\"status() === 'online'\"\n [class.bg-[#C70036]]=\"status() === 'offline'\"\n [class.bg-[#D1D5DB]]=\"status() === 'alternative'\"\n [class.dark:bg-neutral-500]=\"status() === 'alternative'\"\n [class.bg-red-500]=\"status() === 'busy'\"\n [class.bg-amber-400]=\"status() === 'away'\"\n ></span>\n }\n\n <!-- Remove Button -->\n @if (removable()) {\n <button\n type=\"button\"\n (click)=\"onRemoveClick($event)\"\n class=\"absolute -top-1 -right-1 z-10 inline-flex items-center justify-center rounded-full bg-[#F3F4F6] hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-[#4A5565] dark:text-neutral-200 shadow-sm border border-white dark:border-neutral-900 cursor-pointer transition-transform active:scale-95\"\n [class.w-3]=\"size() === 'xs'\"\n [class.h-3]=\"size() === 'xs'\"\n [class.w-3.5]=\"size() === 'sm'\"\n [class.h-3.5]=\"size() === 'sm'\"\n [class.w-4]=\"size() === 'base' || size() === 'md'\"\n [class.h-4]=\"size() === 'base' || size() === 'md'\"\n [class.w-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n [class.h-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n aria-label=\"Remove avatar\"\n >\n <svg\n class=\"shrink-0\"\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.w-2.5]=\"size() === 'base' || size() === 'md'\"\n [class.h-2.5]=\"size() === 'base' || size() === 'md'\"\n [class.w-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n [class.h-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"2.5\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <!-- Label Details (Name & Helper Text) -->\n @if (name()) {\n <div class=\"flex flex-col min-w-0\">\n <span\n class=\"font-medium text-heading truncate\"\n [class.text-xs]=\"size() === 'xs' || size() === 'sm'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.text-base]=\"size() === 'lg'\"\n [class.text-lg]=\"size() === 'xl' || size() === '2xl'\"\n >\n {{ name() }}\n </span>\n @if (helper() && showHelper()) {\n <span\n class=\"text-[#4A5565] dark:text-neutral-400 truncate\"\n [class.text-2xs]=\"size() === 'xs'\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.text-sm]=\"size() === 'lg'\"\n [class.text-base]=\"size() === 'xl' || size() === '2xl'\"\n >\n {{ helper() }}\n </span>\n }\n </div>\n }\n</div>\n\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5043
5024
|
}
|
|
5044
5025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
5045
5026
|
type: Component,
|
|
5046
|
-
args: [{ selector: 'ol-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-flex items-center\" [class.gap-1.5]=\"size() === '2xs'\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\
|
|
5027
|
+
args: [{ selector: 'ol-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-flex items-center\" [class.gap-1.5]=\"size() === '2xs'\" [class.gap-2]=\"size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md'\" [class.gap-2.5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\">\n <!-- Avatar Icon/Image Node -->\n <div class=\"relative inline-block shrink-0 leading-none select-none\">\n @if (src()) {\n <img\n [src]=\"src()\"\n [alt]=\"alt()\"\n class=\"object-cover\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n />\n } @else if (initials() || text()) {\n <div\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-300 font-semibold uppercase\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.text-[8px]]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.text-[9px]]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.text-lg]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.text-xl]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.text-2xl]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n >\n {{ initials() || text() }}\n </div>\n } @else {\n <div\n class=\"relative inline-flex items-center justify-center overflow-hidden bg-[#F3F4F6] dark:bg-neutral-800 text-[#4A5565] dark:text-neutral-400 font-semibold\"\n [class.rounded-full]=\"shape() === 'circle'\"\n [class.rounded-lg]=\"shape() === 'rounded' && (size() === 'lg' || size() === 'xl' || size() === '2xl')\"\n [class.rounded-md]=\"shape() === 'rounded' && (size() === '2xs' || size() === 'xs' || size() === 'sm' || size() === 'base' || size() === 'md')\"\n [class.w-3.5]=\"size() === '2xs'\"\n [class.h-3.5]=\"size() === '2xs'\"\n [class.w-4]=\"size() === 'xs'\"\n [class.h-4]=\"size() === 'xs'\"\n [class.w-6]=\"size() === 'sm'\"\n [class.h-6]=\"size() === 'sm'\"\n [class.w-8]=\"size() === 'base' || size() === 'md'\"\n [class.h-8]=\"size() === 'base' || size() === 'md'\"\n [class.w-11]=\"size() === 'lg'\"\n [class.h-11]=\"size() === 'lg'\"\n [class.w-14]=\"size() === 'xl'\"\n [class.h-14]=\"size() === 'xl'\"\n [class.w-16]=\"size() === '2xl'\"\n [class.h-16]=\"size() === '2xl'\"\n [class.ring-2]=\"bordered()\"\n [class.ring-white]=\"bordered()\"\n [class.dark:ring-neutral-900]=\"bordered()\"\n >\n <ng-content>\n <!-- Default Figma User Placeholder Icon -->\n <svg\n class=\"w-full h-full p-1 fill-current opacity-80\"\n viewBox=\"0 0 20 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n d=\"M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z\"\n clip-rule=\"evenodd\"\n ></path>\n </svg>\n </ng-content>\n </div>\n }\n\n <!-- Status Dot -->\n @if (status()) {\n <span\n class=\"absolute rounded-full ring-2 ring-white dark:ring-neutral-900 shrink-0\"\n [class.bottom-0]=\"statusPosition() === 'bottom-right'\"\n [class.right-0]=\"statusPosition() === 'bottom-right'\"\n [class.top-0]=\"statusPosition() === 'top-right'\"\n [class.w-1.5]=\"size() === 'xs'\"\n [class.h-1.5]=\"size() === 'xs'\"\n [class.w-2]=\"size() === 'base' || size() === 'md'\"\n [class.h-2]=\"size() === 'base' || size() === 'md'\"\n [class.w-2.5]=\"size() === 'sm'\"\n [class.h-2.5]=\"size() === 'sm'\"\n [class.w-3]=\"size() === 'lg'\"\n [class.h-3]=\"size() === 'lg'\"\n [class.w-4]=\"size() === 'xl' || size() === '2xl'\"\n [class.h-4]=\"size() === 'xl' || size() === '2xl'\"\n [class.bg-[#007A55]]=\"status() === 'online'\"\n [class.bg-[#C70036]]=\"status() === 'offline'\"\n [class.bg-[#D1D5DB]]=\"status() === 'alternative'\"\n [class.dark:bg-neutral-500]=\"status() === 'alternative'\"\n [class.bg-red-500]=\"status() === 'busy'\"\n [class.bg-amber-400]=\"status() === 'away'\"\n ></span>\n }\n\n <!-- Remove Button -->\n @if (removable()) {\n <button\n type=\"button\"\n (click)=\"onRemoveClick($event)\"\n class=\"absolute -top-1 -right-1 z-10 inline-flex items-center justify-center rounded-full bg-[#F3F4F6] hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-[#4A5565] dark:text-neutral-200 shadow-sm border border-white dark:border-neutral-900 cursor-pointer transition-transform active:scale-95\"\n [class.w-3]=\"size() === 'xs'\"\n [class.h-3]=\"size() === 'xs'\"\n [class.w-3.5]=\"size() === 'sm'\"\n [class.h-3.5]=\"size() === 'sm'\"\n [class.w-4]=\"size() === 'base' || size() === 'md'\"\n [class.h-4]=\"size() === 'base' || size() === 'md'\"\n [class.w-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n [class.h-5]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n aria-label=\"Remove avatar\"\n >\n <svg\n class=\"shrink-0\"\n [class.w-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.h-2]=\"size() === 'xs' || size() === 'sm'\"\n [class.w-2.5]=\"size() === 'base' || size() === 'md'\"\n [class.h-2.5]=\"size() === 'base' || size() === 'md'\"\n [class.w-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n [class.h-3]=\"size() === 'lg' || size() === 'xl' || size() === '2xl'\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"2.5\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n </div>\n\n <!-- Label Details (Name & Helper Text) -->\n @if (name()) {\n <div class=\"flex flex-col min-w-0\">\n <span\n class=\"font-medium text-heading truncate\"\n [class.text-xs]=\"size() === 'xs' || size() === 'sm'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.text-base]=\"size() === 'lg'\"\n [class.text-lg]=\"size() === 'xl' || size() === '2xl'\"\n >\n {{ name() }}\n </span>\n @if (helper() && showHelper()) {\n <span\n class=\"text-[#4A5565] dark:text-neutral-400 truncate\"\n [class.text-2xs]=\"size() === 'xs'\"\n [class.text-xs]=\"size() === 'sm'\"\n [class.text-sm]=\"size() === 'base' || size() === 'md'\"\n [class.text-sm]=\"size() === 'lg'\"\n [class.text-base]=\"size() === 'xl' || size() === '2xl'\"\n >\n {{ helper() }}\n </span>\n }\n </div>\n }\n</div>\n\n\n" }]
|
|
5047
5028
|
}], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusPosition", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], showHelper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHelper", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
|
|
5048
5029
|
|
|
5049
5030
|
class AvatarGroupComponent {
|
|
@@ -5225,15 +5206,6 @@ const BADGE_CLASSES = {
|
|
|
5225
5206
|
dark: 'bg-white/10 text-white',
|
|
5226
5207
|
subtle: 'bg-gray-200 text-gray-900 dark:bg-slate-700 dark:text-slate-100',
|
|
5227
5208
|
};
|
|
5228
|
-
const slideDown = trigger('slideDown', [
|
|
5229
|
-
transition(':enter', [
|
|
5230
|
-
style({ transform: 'translateY(-100%)', opacity: 0 }),
|
|
5231
|
-
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)', style({ transform: 'translateY(0)', opacity: 1 })),
|
|
5232
|
-
]),
|
|
5233
|
-
transition(':leave', [
|
|
5234
|
-
animate('300ms cubic-bezier(0.4, 0, 0.6, 1)', style({ transform: 'translateY(-100%)', opacity: 0 })),
|
|
5235
|
-
]),
|
|
5236
|
-
]);
|
|
5237
5209
|
/**
|
|
5238
5210
|
* Banner Component - Full-width announcement component
|
|
5239
5211
|
*
|
|
@@ -5350,11 +5322,11 @@ class OlBannerComponent {
|
|
|
5350
5322
|
}
|
|
5351
5323
|
}
|
|
5352
5324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlBannerComponent, isStandalone: true, selector: "ol-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, ngImport: i0, template: "@if (visible()) {\n <div\n [class]=\"bannerClasses()\"\n role=\"banner\"\n aria-live=\"polite\"\n aria-label=\"Th\u00F4ng b\u00E1o h\u1EC7 th\u1ED1ng\"\n
|
|
5325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlBannerComponent, isStandalone: true, selector: "ol-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDismiss: "onDismiss" }, ngImport: i0, template: "@if (visible()) {\n <div\n [class]=\"bannerClasses()\"\n role=\"banner\"\n aria-live=\"polite\"\n aria-label=\"Th\u00F4ng b\u00E1o h\u1EC7 th\u1ED1ng\"\n animate.enter=\"slide-down-enter\"\n animate.leave=\"slide-down-leave\">\n \n <div class=\"container mx-auto px-4 py-3\">\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4\">\n \n <!-- Left: Icon + Badge + Content -->\n <div class=\"flex items-center gap-3 flex-1 min-w-0 w-full sm:w-auto\">\n \n <!-- Icon -->\n @if (icon()) {\n <ol-icon\n [name]=\"icon()\"\n [size]=\"20\"\n class=\"flex-shrink-0\" />\n }\n \n <!-- Badge -->\n @if (showBadge()) {\n <span [class]=\"badgeClasses()\">\n {{ badgeText() }}\n </span>\n }\n \n <!-- Content (ng-content) -->\n <div class=\"flex-1 min-w-0 text-sm sm:text-base\">\n <ng-content />\n </div>\n </div>\n \n <!-- Right: CTA + Dismiss -->\n <div class=\"flex items-center gap-3 flex-shrink-0 w-full sm:w-auto justify-end\">\n \n <!-- CTA Slot -->\n <ng-content select=\"[bannerCta]\" />\n \n <!-- Dismiss Button -->\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"'inline-flex items-center justify-center w-8 h-8 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 ' + dismissButtonClasses()\"\n (click)=\"dismiss()\"\n aria-label=\"\u0110\u00F3ng banner\">\n <ol-icon name=\"close\" [size]=\"16\" />\n </button>\n }\n </div>\n \n </div>\n </div>\n </div>\n}\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5354
5326
|
}
|
|
5355
5327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlBannerComponent, decorators: [{
|
|
5356
5328
|
type: Component,
|
|
5357
|
-
args: [{ selector: 'ol-banner', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
5329
|
+
args: [{ selector: 'ol-banner', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible()) {\n <div\n [class]=\"bannerClasses()\"\n role=\"banner\"\n aria-live=\"polite\"\n aria-label=\"Th\u00F4ng b\u00E1o h\u1EC7 th\u1ED1ng\"\n animate.enter=\"slide-down-enter\"\n animate.leave=\"slide-down-leave\">\n \n <div class=\"container mx-auto px-4 py-3\">\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4\">\n \n <!-- Left: Icon + Badge + Content -->\n <div class=\"flex items-center gap-3 flex-1 min-w-0 w-full sm:w-auto\">\n \n <!-- Icon -->\n @if (icon()) {\n <ol-icon\n [name]=\"icon()\"\n [size]=\"20\"\n class=\"flex-shrink-0\" />\n }\n \n <!-- Badge -->\n @if (showBadge()) {\n <span [class]=\"badgeClasses()\">\n {{ badgeText() }}\n </span>\n }\n \n <!-- Content (ng-content) -->\n <div class=\"flex-1 min-w-0 text-sm sm:text-base\">\n <ng-content />\n </div>\n </div>\n \n <!-- Right: CTA + Dismiss -->\n <div class=\"flex items-center gap-3 flex-shrink-0 w-full sm:w-auto justify-end\">\n \n <!-- CTA Slot -->\n <ng-content select=\"[bannerCta]\" />\n \n <!-- Dismiss Button -->\n @if (dismissible()) {\n <button\n type=\"button\"\n [class]=\"'inline-flex items-center justify-center w-8 h-8 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 ' + dismissButtonClasses()\"\n (click)=\"dismiss()\"\n aria-label=\"\u0110\u00F3ng banner\">\n <ol-icon name=\"close\" [size]=\"16\" />\n </button>\n }\n </div>\n \n </div>\n </div>\n </div>\n}\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"] }]
|
|
5358
5330
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], showBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadge", required: false }] }], badgeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeText", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }] } });
|
|
5359
5331
|
|
|
5360
5332
|
class BreadcrumbComponent {
|
|
@@ -6444,11 +6416,11 @@ class DayViewComponent {
|
|
|
6444
6416
|
return classes;
|
|
6445
6417
|
}
|
|
6446
6418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DayViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6447
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DayViewComponent, isStandalone: true, selector: "ol-day-view", inputs: { customMatrix: { classPropertyName: "customMatrix", publicName: "customMatrix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect" }, ngImport: i0, template: "<div class=\"w-full\" (mouseleave)=\"onMouseLeave()\">\
|
|
6419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DayViewComponent, isStandalone: true, selector: "ol-day-view", inputs: { customMatrix: { classPropertyName: "customMatrix", publicName: "customMatrix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daySelect: "daySelect" }, ngImport: i0, template: "<div class=\"w-full\" (mouseleave)=\"onMouseLeave()\">\n <!-- Weekdays Header -->\n <div class=\"grid grid-cols-7 mb-1 text-center\">\n @for (day of weekdays; track $index) {\n <span class=\"w-9 h-6 flex items-center justify-center text-[11px] font-semibold text-gray-500 dark:text-gray-400\">\n {{ day }}\n </span>\n }\n </div>\n\n <!-- Days Grid (6 rows x 7 days) -->\n <div class=\"flex flex-col gap-1\">\n @for (row of (customMatrix() || state.dayMatrix()); track $index) {\n <div class=\"grid grid-cols-7\">\n @for (cell of row; track cell.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"getCellClasses(cell)\"\n [disabled]=\"cell.isDisabled\"\n (click)=\"onCellClick(cell)\"\n (mouseenter)=\"onCellMouseEnter(cell)\"\n >\n {{ cell.dayNumber }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6448
6420
|
}
|
|
6449
6421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DayViewComponent, decorators: [{
|
|
6450
6422
|
type: Component,
|
|
6451
|
-
args: [{ selector: 'ol-day-view', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\" (mouseleave)=\"onMouseLeave()\">\
|
|
6423
|
+
args: [{ selector: 'ol-day-view', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\" (mouseleave)=\"onMouseLeave()\">\n <!-- Weekdays Header -->\n <div class=\"grid grid-cols-7 mb-1 text-center\">\n @for (day of weekdays; track $index) {\n <span class=\"w-9 h-6 flex items-center justify-center text-[11px] font-semibold text-gray-500 dark:text-gray-400\">\n {{ day }}\n </span>\n }\n </div>\n\n <!-- Days Grid (6 rows x 7 days) -->\n <div class=\"flex flex-col gap-1\">\n @for (row of (customMatrix() || state.dayMatrix()); track $index) {\n <div class=\"grid grid-cols-7\">\n @for (cell of row; track cell.date.getTime()) {\n <button\n type=\"button\"\n [class]=\"getCellClasses(cell)\"\n [disabled]=\"cell.isDisabled\"\n (click)=\"onCellClick(cell)\"\n (mouseenter)=\"onCellMouseEnter(cell)\"\n >\n {{ cell.dayNumber }}\n </button>\n }\n </div>\n }\n </div>\n</div>\n" }]
|
|
6452
6424
|
}], propDecorators: { customMatrix: [{ type: i0.Input, args: [{ isSignal: true, alias: "customMatrix", required: false }] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }] } });
|
|
6453
6425
|
|
|
6454
6426
|
class MonthViewComponent {
|
|
@@ -7353,13 +7325,13 @@ class DropdownComponent {
|
|
|
7353
7325
|
}
|
|
7354
7326
|
}
|
|
7355
7327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7356
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DropdownComponent, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block text-left" }, viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\
|
|
7328
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DropdownComponent, isStandalone: true, selector: "ol-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, menuClass: { classPropertyName: "menuClass", publicName: "menuClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block text-left" }, viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <!-- Custom Slot Trigger or Default Button -->\n <div (click)=\"toggle()\">\n <ng-content select=\"[slot=trigger], [trigger]\" />\n @if (label()) {\n <button\n #triggerButton\n type=\"button\"\n [id]=\"buttonId\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [class]=\"\n triggerClass()\n ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n triggerClass()\n : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:bg-slate-800 dark:text-gray-200 dark:border-slate-700 dark:hover:bg-slate-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n \"\n >\n <ng-content select=\"[triggerIcon]\" />\n <span>{{ label() }}</span>\n <ol-icon\n name=\"chevron-down\"\n size=\"xs\"\n class=\"transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n ></ol-icon>\n </button>\n } @else if (!label() && triggerClass()) {\n <button\n #triggerButton\n type=\"button\"\n [id]=\"buttonId\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n >\n <ng-content select=\"[triggerIcon]\" />\n </button>\n }\n </div>\n\n <div\n #menu\n [id]=\"menuId\"\n role=\"menu\"\n [attr.aria-labelledby]=\"buttonId\"\n [class]=\"\n 'z-50 absolute min-w-48 bg-white dark:bg-slate-900 rounded-md shadow-xl border border-gray-200 dark:border-slate-800 p-1.5 focus:outline-none transition-all duration-150 ' +\n menuPlacementClasses() +\n (menuClass() ? ' ' + menuClass() : '')\n \"\n [class.hidden]=\"!isOpen()\"\n >\n <ng-content />\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7357
7329
|
}
|
|
7358
7330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
7359
7331
|
type: Component,
|
|
7360
7332
|
args: [{ selector: 'ol-dropdown', standalone: true, imports: [CommonModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7361
7333
|
class: 'relative inline-block text-left',
|
|
7362
|
-
}, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\
|
|
7334
|
+
}, template: "<div (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n <!-- Custom Slot Trigger or Default Button -->\n <div (click)=\"toggle()\">\n <ng-content select=\"[slot=trigger], [trigger]\" />\n @if (label()) {\n <button\n #triggerButton\n type=\"button\"\n [id]=\"buttonId\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [class]=\"\n triggerClass()\n ? 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium cursor-pointer ' +\n triggerClass()\n : 'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:bg-slate-800 dark:text-gray-200 dark:border-slate-700 dark:hover:bg-slate-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'\n \"\n >\n <ng-content select=\"[triggerIcon]\" />\n <span>{{ label() }}</span>\n <ol-icon\n name=\"chevron-down\"\n size=\"xs\"\n class=\"transition-transform duration-200\"\n [class.rotate-180]=\"isOpen()\"\n ></ol-icon>\n </button>\n } @else if (!label() && triggerClass()) {\n <button\n #triggerButton\n type=\"button\"\n [id]=\"buttonId\"\n [disabled]=\"disabled()\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"menuId\"\n [class]=\"'inline-flex items-center justify-center p-2.5 cursor-pointer ' + triggerClass()\"\n >\n <ng-content select=\"[triggerIcon]\" />\n </button>\n }\n </div>\n\n <div\n #menu\n [id]=\"menuId\"\n role=\"menu\"\n [attr.aria-labelledby]=\"buttonId\"\n [class]=\"\n 'z-50 absolute min-w-48 bg-white dark:bg-slate-900 rounded-md shadow-xl border border-gray-200 dark:border-slate-800 p-1.5 focus:outline-none transition-all duration-150 ' +\n menuPlacementClasses() +\n (menuClass() ? ' ' + menuClass() : '')\n \"\n [class.hidden]=\"!isOpen()\"\n >\n <ng-content />\n </div>\n</div>\n" }]
|
|
7363
7335
|
}], ctorParameters: () => [], propDecorators: { triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], triggerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerClass", required: false }] }], menuClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuClass", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], onDocumentClick: [{
|
|
7364
7336
|
type: HostListener,
|
|
7365
7337
|
args: ['document:click', ['$event']]
|
|
@@ -8848,11 +8820,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
8848
8820
|
|
|
8849
8821
|
class ListGroupComponent {
|
|
8850
8822
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ListGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8851
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: ListGroupComponent, isStandalone: true, selector: "ol-list-group", ngImport: i0, template: "<ul class=\"w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white\">\
|
|
8823
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: ListGroupComponent, isStandalone: true, selector: "ol-list-group", ngImport: i0, template: "<ul class=\"w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white\">\n <ng-content />\n</ul>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8852
8824
|
}
|
|
8853
8825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ListGroupComponent, decorators: [{
|
|
8854
8826
|
type: Component,
|
|
8855
|
-
args: [{ selector: 'ol-list-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white\">\
|
|
8827
|
+
args: [{ selector: 'ol-list-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white\">\n <ng-content />\n</ul>\n" }]
|
|
8856
8828
|
}] });
|
|
8857
8829
|
|
|
8858
8830
|
class ListGroupItemComponent {
|
|
@@ -8867,11 +8839,11 @@ class ListGroupItemComponent {
|
|
|
8867
8839
|
// Logic to be implemented
|
|
8868
8840
|
}
|
|
8869
8841
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ListGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ListGroupItemComponent, isStandalone: true, selector: "ol-list-group-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<li\
|
|
8842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ListGroupItemComponent, isStandalone: true, selector: "ol-list-group-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<li\n (click)=\"handleClick($event)\"\n class=\"w-full px-4 py-2 border-b border-gray-200 last:border-b-0 dark:border-gray-600\"\n [class.bg-blue-700]=\"active()\"\n [class.text-white]=\"active()\"\n [class.dark:bg-gray-600]=\"active()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.text-gray-400]=\"disabled()\"\n>\n <ng-content />\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8871
8843
|
}
|
|
8872
8844
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ListGroupItemComponent, decorators: [{
|
|
8873
8845
|
type: Component,
|
|
8874
|
-
args: [{ selector: 'ol-list-group-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li\
|
|
8846
|
+
args: [{ selector: 'ol-list-group-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li\n (click)=\"handleClick($event)\"\n class=\"w-full px-4 py-2 border-b border-gray-200 last:border-b-0 dark:border-gray-600\"\n [class.bg-blue-700]=\"active()\"\n [class.text-white]=\"active()\"\n [class.dark:bg-gray-600]=\"active()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.text-gray-400]=\"disabled()\"\n>\n <ng-content />\n</li>\n" }]
|
|
8875
8847
|
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
8876
8848
|
|
|
8877
8849
|
class ModalComponent {
|
|
@@ -9624,226 +9596,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
9624
9596
|
}]
|
|
9625
9597
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
|
|
9626
9598
|
|
|
9627
|
-
/**
|
|
9628
|
-
* Timing functions cho animations
|
|
9629
|
-
*/
|
|
9630
|
-
const timingFunctions = {
|
|
9631
|
-
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
9632
|
-
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
9633
|
-
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
9634
|
-
linear: 'linear',
|
|
9635
|
-
spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
9636
|
-
};
|
|
9637
|
-
/**
|
|
9638
|
-
* Animation duration presets (ms)
|
|
9639
|
-
*/
|
|
9640
|
-
const durations = {
|
|
9641
|
-
fast: 150,
|
|
9642
|
-
normal: 300,
|
|
9643
|
-
slow: 500,
|
|
9644
|
-
};
|
|
9645
|
-
/**
|
|
9646
|
-
* Fade In Animation
|
|
9647
|
-
* @param duration Animation duration (ms)
|
|
9648
|
-
* @param timing Timing function
|
|
9649
|
-
*/
|
|
9650
|
-
function fadeIn(duration = durations.normal, timing = timingFunctions.easeOut) {
|
|
9651
|
-
return trigger('fadeIn', [
|
|
9652
|
-
transition(':enter', [
|
|
9653
|
-
style({ opacity: 0 }),
|
|
9654
|
-
animate(`${duration}ms ${timing}`, style({ opacity: 1 })),
|
|
9655
|
-
]),
|
|
9656
|
-
]);
|
|
9657
|
-
}
|
|
9658
|
-
/**
|
|
9659
|
-
* Fade Out Animation
|
|
9660
|
-
* @param duration Animation duration (ms)
|
|
9661
|
-
* @param timing Timing function
|
|
9662
|
-
*/
|
|
9663
|
-
function fadeOut(duration = durations.normal, timing = timingFunctions.easeIn) {
|
|
9664
|
-
return trigger('fadeOut', [
|
|
9665
|
-
transition(':leave', [
|
|
9666
|
-
animate(`${duration}ms ${timing}`, style({ opacity: 0 })),
|
|
9667
|
-
]),
|
|
9668
|
-
]);
|
|
9669
|
-
}
|
|
9670
|
-
/**
|
|
9671
|
-
* Slide In Up Animation (từ dưới lên)
|
|
9672
|
-
* @param duration Animation duration (ms)
|
|
9673
|
-
* @param distance Khoảng cách slide (px)
|
|
9674
|
-
*/
|
|
9675
|
-
function slideInUp(duration = durations.normal, distance = 20) {
|
|
9676
|
-
return trigger('slideInUp', [
|
|
9677
|
-
transition(':enter', [
|
|
9678
|
-
style({ opacity: 0, transform: `translateY(${distance}px)` }),
|
|
9679
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'translateY(0)' })),
|
|
9680
|
-
]),
|
|
9681
|
-
]);
|
|
9682
|
-
}
|
|
9683
|
-
/**
|
|
9684
|
-
* Slide In Down Animation (từ trên xuống)
|
|
9685
|
-
* @param duration Animation duration (ms)
|
|
9686
|
-
* @param distance Khoảng cách slide (px)
|
|
9687
|
-
*/
|
|
9688
|
-
function slideInDown(duration = durations.normal, distance = 20) {
|
|
9689
|
-
return trigger('slideInDown', [
|
|
9690
|
-
transition(':enter', [
|
|
9691
|
-
style({ opacity: 0, transform: `translateY(-${distance}px)` }),
|
|
9692
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'translateY(0)' })),
|
|
9693
|
-
]),
|
|
9694
|
-
]);
|
|
9695
|
-
}
|
|
9696
|
-
/**
|
|
9697
|
-
* Slide In Left Animation (từ phải sang trái)
|
|
9698
|
-
* @param duration Animation duration (ms)
|
|
9699
|
-
* @param distance Khoảng cách slide (px)
|
|
9700
|
-
*/
|
|
9701
|
-
function slideInLeft(duration = durations.normal, distance = 20) {
|
|
9702
|
-
return trigger('slideInLeft', [
|
|
9703
|
-
transition(':enter', [
|
|
9704
|
-
style({ opacity: 0, transform: `translateX(${distance}px)` }),
|
|
9705
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'translateX(0)' })),
|
|
9706
|
-
]),
|
|
9707
|
-
]);
|
|
9708
|
-
}
|
|
9709
|
-
/**
|
|
9710
|
-
* Slide In Right Animation (từ trái sang phải)
|
|
9711
|
-
* @param duration Animation duration (ms)
|
|
9712
|
-
* @param distance Khoảng cách slide (px)
|
|
9713
|
-
*/
|
|
9714
|
-
function slideInRight(duration = durations.normal, distance = 20) {
|
|
9715
|
-
return trigger('slideInRight', [
|
|
9716
|
-
transition(':enter', [
|
|
9717
|
-
style({ opacity: 0, transform: `translateX(-${distance}px)` }),
|
|
9718
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'translateX(0)' })),
|
|
9719
|
-
]),
|
|
9720
|
-
]);
|
|
9721
|
-
}
|
|
9722
|
-
/**
|
|
9723
|
-
* Scale In Animation (zoom in)
|
|
9724
|
-
* @param duration Animation duration (ms)
|
|
9725
|
-
* @param initialScale Scale ban đầu (0-1)
|
|
9726
|
-
*/
|
|
9727
|
-
function scaleIn(duration = durations.normal, initialScale = 0.95) {
|
|
9728
|
-
return trigger('scaleIn', [
|
|
9729
|
-
transition(':enter', [
|
|
9730
|
-
style({ opacity: 0, transform: `scale(${initialScale})` }),
|
|
9731
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'scale(1)' })),
|
|
9732
|
-
]),
|
|
9733
|
-
]);
|
|
9734
|
-
}
|
|
9735
|
-
/**
|
|
9736
|
-
* Scale Out Animation (zoom out)
|
|
9737
|
-
* @param duration Animation duration (ms)
|
|
9738
|
-
* @param finalScale Scale cuối cùng (0-1)
|
|
9739
|
-
*/
|
|
9740
|
-
function scaleOut(duration = durations.normal, finalScale = 0.95) {
|
|
9741
|
-
return trigger('scaleOut', [
|
|
9742
|
-
transition(':leave', [
|
|
9743
|
-
animate(`${duration}ms ${timingFunctions.easeIn}`, style({ opacity: 0, transform: `scale(${finalScale})` })),
|
|
9744
|
-
]),
|
|
9745
|
-
]);
|
|
9746
|
-
}
|
|
9747
|
-
/**
|
|
9748
|
-
* Combined Fade + Scale In/Out Animation
|
|
9749
|
-
* Thường dùng cho Modal, Dialog
|
|
9750
|
-
*/
|
|
9751
|
-
const fadeScaleAnimation = trigger('fadeScale', [
|
|
9752
|
-
transition(':enter', [
|
|
9753
|
-
style({ opacity: 0, transform: 'scale(0.95)' }),
|
|
9754
|
-
animate(`${durations.normal}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'scale(1)' })),
|
|
9755
|
-
]),
|
|
9756
|
-
transition(':leave', [
|
|
9757
|
-
animate(`${durations.normal}ms ${timingFunctions.easeIn}`, style({ opacity: 0, transform: 'scale(0.95)' })),
|
|
9758
|
-
]),
|
|
9759
|
-
]);
|
|
9760
|
-
/**
|
|
9761
|
-
* Slide Fade Animation - Slide + Fade combined
|
|
9762
|
-
* Thường dùng cho Drawer, Side Panel
|
|
9763
|
-
*/
|
|
9764
|
-
function slideFade(direction = 'up', duration = durations.normal, distance = 20) {
|
|
9765
|
-
const transforms = {
|
|
9766
|
-
up: `translateY(${distance}px)`,
|
|
9767
|
-
down: `translateY(-${distance}px)`,
|
|
9768
|
-
left: `translateX(${distance}px)`,
|
|
9769
|
-
right: `translateX(-${distance}px)`,
|
|
9770
|
-
};
|
|
9771
|
-
const initialTransform = transforms[direction];
|
|
9772
|
-
return trigger('slideFade', [
|
|
9773
|
-
transition(':enter', [
|
|
9774
|
-
style({ opacity: 0, transform: initialTransform }),
|
|
9775
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style({ opacity: 1, transform: 'translate(0)' })),
|
|
9776
|
-
]),
|
|
9777
|
-
transition(':leave', [
|
|
9778
|
-
animate(`${duration}ms ${timingFunctions.easeIn}`, style({ opacity: 0, transform: initialTransform })),
|
|
9779
|
-
]),
|
|
9780
|
-
]);
|
|
9781
|
-
}
|
|
9782
|
-
/**
|
|
9783
|
-
* Stagger Children Helper
|
|
9784
|
-
* Animate children elements với delay giữa mỗi element
|
|
9785
|
-
* @param duration Duration cho mỗi element animation (ms)
|
|
9786
|
-
* @param staggerDelay Delay giữa các elements (ms)
|
|
9787
|
-
* @param animationStyle Style animation cho mỗi element
|
|
9788
|
-
*/
|
|
9789
|
-
function staggerChildren(duration = durations.normal, staggerDelay = 50, animationStyle = 'fade') {
|
|
9790
|
-
const styles = {
|
|
9791
|
-
fade: { opacity: 0 },
|
|
9792
|
-
slide: { opacity: 0, transform: 'translateY(20px)' },
|
|
9793
|
-
scale: { opacity: 0, transform: 'scale(0.8)' },
|
|
9794
|
-
};
|
|
9795
|
-
const finalStyle = {
|
|
9796
|
-
fade: { opacity: 1 },
|
|
9797
|
-
slide: { opacity: 1, transform: 'translateY(0)' },
|
|
9798
|
-
scale: { opacity: 1, transform: 'scale(1)' },
|
|
9799
|
-
};
|
|
9800
|
-
return trigger('staggerChildren', [
|
|
9801
|
-
transition(':enter', [
|
|
9802
|
-
query(':enter', [
|
|
9803
|
-
style(styles[animationStyle]),
|
|
9804
|
-
stagger(staggerDelay, [
|
|
9805
|
-
animate(`${duration}ms ${timingFunctions.easeOut}`, style(finalStyle[animationStyle])),
|
|
9806
|
-
]),
|
|
9807
|
-
], { optional: true }),
|
|
9808
|
-
]),
|
|
9809
|
-
]);
|
|
9810
|
-
}
|
|
9811
|
-
/**
|
|
9812
|
-
* Rotate Animation
|
|
9813
|
-
* @param duration Animation duration (ms)
|
|
9814
|
-
*/
|
|
9815
|
-
const rotateAnimation = trigger('rotate', [
|
|
9816
|
-
transition('* => *', [
|
|
9817
|
-
animate(`${durations.normal}ms ${timingFunctions.easeInOut}`),
|
|
9818
|
-
]),
|
|
9819
|
-
]);
|
|
9820
|
-
/**
|
|
9821
|
-
* Height Expand/Collapse Animation
|
|
9822
|
-
* Thường dùng cho Accordion, Collapse
|
|
9823
|
-
*/
|
|
9824
|
-
const expandCollapseAnimation = trigger('expandCollapse', [
|
|
9825
|
-
transition(':enter', [
|
|
9826
|
-
style({ height: 0, opacity: 0, overflow: 'hidden' }),
|
|
9827
|
-
animate(`${durations.normal}ms ${timingFunctions.easeOut}`, style({ height: '*', opacity: 1 })),
|
|
9828
|
-
]),
|
|
9829
|
-
transition(':leave', [
|
|
9830
|
-
style({ overflow: 'hidden' }),
|
|
9831
|
-
animate(`${durations.normal}ms ${timingFunctions.easeIn}`, style({ height: 0, opacity: 0 })),
|
|
9832
|
-
]),
|
|
9833
|
-
]);
|
|
9834
|
-
/**
|
|
9835
|
-
* Backdrop Animation (cho modal/drawer backdrops)
|
|
9836
|
-
*/
|
|
9837
|
-
const backdropAnimation = trigger('backdrop', [
|
|
9838
|
-
transition(':enter', [
|
|
9839
|
-
style({ opacity: 0 }),
|
|
9840
|
-
animate(`${durations.normal}ms ${timingFunctions.easeOut}`),
|
|
9841
|
-
]),
|
|
9842
|
-
transition(':leave', [
|
|
9843
|
-
animate(`${durations.normal}ms ${timingFunctions.easeIn}`, style({ opacity: 0 })),
|
|
9844
|
-
]),
|
|
9845
|
-
]);
|
|
9846
|
-
|
|
9847
9599
|
/**
|
|
9848
9600
|
* Internal Tooltip Component
|
|
9849
9601
|
* Renders the actual tooltip content with theme and arrow support
|
|
@@ -9894,34 +9646,28 @@ class OlTooltipComponent {
|
|
|
9894
9646
|
[class]="tooltipClasses()"
|
|
9895
9647
|
role="tooltip"
|
|
9896
9648
|
[id]="tooltipId()"
|
|
9897
|
-
|
|
9649
|
+
animate.enter="tooltip-fade-enter">
|
|
9898
9650
|
{{ content() }}
|
|
9899
9651
|
@if (arrow()) {
|
|
9900
9652
|
<div [class]="arrowClasses()" #arrowEl></div>
|
|
9901
9653
|
}
|
|
9902
9654
|
</div>
|
|
9903
|
-
`, isInline: true,
|
|
9655
|
+
`, isInline: true, styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9904
9656
|
}
|
|
9905
9657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlTooltipComponent, decorators: [{
|
|
9906
9658
|
type: Component,
|
|
9907
|
-
args: [{
|
|
9908
|
-
selector: 'ol-tooltip-internal',
|
|
9909
|
-
standalone: true,
|
|
9910
|
-
template: `
|
|
9659
|
+
args: [{ selector: 'ol-tooltip-internal', standalone: true, template: `
|
|
9911
9660
|
<div
|
|
9912
9661
|
[class]="tooltipClasses()"
|
|
9913
9662
|
role="tooltip"
|
|
9914
9663
|
[id]="tooltipId()"
|
|
9915
|
-
|
|
9664
|
+
animate.enter="tooltip-fade-enter">
|
|
9916
9665
|
{{ content() }}
|
|
9917
9666
|
@if (arrow()) {
|
|
9918
9667
|
<div [class]="arrowClasses()" #arrowEl></div>
|
|
9919
9668
|
}
|
|
9920
9669
|
</div>
|
|
9921
|
-
`,
|
|
9922
|
-
animations: [fadeIn(150)],
|
|
9923
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
9924
|
-
}]
|
|
9670
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"] }]
|
|
9925
9671
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: false }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: false }] }] } });
|
|
9926
9672
|
|
|
9927
9673
|
/**
|
|
@@ -10562,31 +10308,11 @@ class OlSpeedDialComponent {
|
|
|
10562
10308
|
}
|
|
10563
10309
|
}
|
|
10564
10310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSpeedDialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlSpeedDialComponent, isStandalone: true, selector: "ol-speed-dial", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onOpen: "onOpen", onClose: "onClose", actionClick: "actionClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Optional Backdrop -->\n@if (backdrop() && isOpen()) {\n <div \n class=\"fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-xs z-40 transition-opacity\"\n (click)=\"close()\"\n (mouseenter)=\"onBackdropMouseEnter()\"\n ></div>\n}\n\n<div \n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Action Items List / Menu -->\n @if (isOpen()) {\n <div \n [@menuAnimation]\n [class]=\"itemsContainerClasses()\"\n role=\"menu\"\n [attr.aria-orientation]=\"direction() === 'left' || direction() === 'right' ? 'horizontal' : 'vertical'\"\n >\n @if (actions().length > 0) {\n @for (action of actions(); track action.id || action.label) {\n @if (type() === 'menu') {\n <!-- Menu Item (Icon + Text) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed text-left cursor-pointer\"\n [class]=\"action.class || ''\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"sm\" class=\"shrink-0 text-gray-500 dark:text-gray-400\"></ol-icon>\n }\n <span class=\"truncate flex-1\">{{ action.label }}</span>\n </button>\n } @else {\n <!-- Floating Button Item (Circle / Rounded Square) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n [olTooltip]=\"action.tooltip || action.label\"\n [tooltipPosition]=\"tooltipPositionForItems()\"\n class=\"flex items-center justify-center w-12 h-12 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-slate-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 hover:text-brand-600 dark:hover:text-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed group relative cursor-pointer\"\n [class.rounded-xl]=\"type() === 'default'\"\n [class.rounded-full]=\"type() === 'rounded'\"\n [class]=\"action.class || ''\"\n [attr.aria-label]=\"action.label\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"md\" class=\"transition-transform group-hover:scale-110\"></ol-icon>\n }\n </button>\n }\n }\n } @else {\n <!-- Content Projection for manual items -->\n <ng-content />\n }\n </div>\n }\n\n <!-- Main Trigger Button -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [disabled]=\"disabled()\"\n [class]=\"triggerButtonClasses()\"\n [olTooltip]=\"tooltip() || ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n class=\"cursor-pointer\"\n >\n <ol-icon \n [name]=\"icon()\" \n size=\"md\" \n class=\"transition-transform duration-200\"\n [class.rotate-45]=\"isOpen() && icon() === 'plus'\"\n ></ol-icon>\n </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "directive", type: OlTooltipDirective, selector: "[olTooltip]", inputs: ["olTooltip", "tooltipPosition", "tooltipTheme", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }], animations: [
|
|
10566
|
-
trigger('menuAnimation', [
|
|
10567
|
-
transition(':enter', [
|
|
10568
|
-
style({ opacity: 0, transform: 'scale(0.85)' }),
|
|
10569
|
-
animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'scale(1)' })),
|
|
10570
|
-
]),
|
|
10571
|
-
transition(':leave', [
|
|
10572
|
-
animate('100ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'scale(0.85)' })),
|
|
10573
|
-
]),
|
|
10574
|
-
]),
|
|
10575
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlSpeedDialComponent, isStandalone: true, selector: "ol-speed-dial", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onOpen: "onOpen", onClose: "onClose", actionClick: "actionClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Optional Backdrop -->\n@if (backdrop() && isOpen()) {\n <div \n class=\"fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-xs z-40 transition-opacity\"\n (click)=\"close()\"\n (mouseenter)=\"onBackdropMouseEnter()\"\n ></div>\n}\n\n<div \n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Action Items List / Menu -->\n @if (isOpen()) {\n <div \n animate.enter=\"menu-scale-enter\"\n animate.leave=\"menu-scale-leave\"\n [class]=\"itemsContainerClasses()\"\n role=\"menu\"\n [attr.aria-orientation]=\"direction() === 'left' || direction() === 'right' ? 'horizontal' : 'vertical'\"\n >\n @if (actions().length > 0) {\n @for (action of actions(); track action.id || action.label) {\n @if (type() === 'menu') {\n <!-- Menu Item (Icon + Text) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed text-left cursor-pointer\"\n [class]=\"action.class || ''\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"sm\" class=\"shrink-0 text-gray-500 dark:text-gray-400\"></ol-icon>\n }\n <span class=\"truncate flex-1\">{{ action.label }}</span>\n </button>\n } @else {\n <!-- Floating Button Item (Circle / Rounded Square) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n [olTooltip]=\"action.tooltip || action.label\"\n [tooltipPosition]=\"tooltipPositionForItems()\"\n class=\"flex items-center justify-center w-12 h-12 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-slate-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 hover:text-brand-600 dark:hover:text-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed group relative cursor-pointer\"\n [class.rounded-xl]=\"type() === 'default'\"\n [class.rounded-full]=\"type() === 'rounded'\"\n [class]=\"action.class || ''\"\n [attr.aria-label]=\"action.label\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"md\" class=\"transition-transform group-hover:scale-110\"></ol-icon>\n }\n </button>\n }\n }\n } @else {\n <!-- Content Projection for manual items -->\n <ng-content />\n }\n </div>\n }\n\n <!-- Main Trigger Button -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [disabled]=\"disabled()\"\n [class]=\"triggerButtonClasses()\"\n [olTooltip]=\"tooltip() || ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n class=\"cursor-pointer\"\n >\n <ol-icon \n [name]=\"icon()\" \n size=\"md\" \n class=\"transition-transform duration-200\"\n [class.rotate-45]=\"isOpen() && icon() === 'plus'\"\n ></ol-icon>\n </button>\n</div>\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "directive", type: OlTooltipDirective, selector: "[olTooltip]", inputs: ["olTooltip", "tooltipPosition", "tooltipTheme", "tooltipDelay", "tooltipDisabled", "tooltipArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10576
10312
|
}
|
|
10577
10313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlSpeedDialComponent, decorators: [{
|
|
10578
10314
|
type: Component,
|
|
10579
|
-
args: [{ selector: 'ol-speed-dial', standalone: true, imports: [CommonModule, IconComponent, OlTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
10580
|
-
trigger('menuAnimation', [
|
|
10581
|
-
transition(':enter', [
|
|
10582
|
-
style({ opacity: 0, transform: 'scale(0.85)' }),
|
|
10583
|
-
animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'scale(1)' })),
|
|
10584
|
-
]),
|
|
10585
|
-
transition(':leave', [
|
|
10586
|
-
animate('100ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 0, transform: 'scale(0.85)' })),
|
|
10587
|
-
]),
|
|
10588
|
-
]),
|
|
10589
|
-
], template: "<!-- Optional Backdrop -->\n@if (backdrop() && isOpen()) {\n <div \n class=\"fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-xs z-40 transition-opacity\"\n (click)=\"close()\"\n (mouseenter)=\"onBackdropMouseEnter()\"\n ></div>\n}\n\n<div \n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Action Items List / Menu -->\n @if (isOpen()) {\n <div \n [@menuAnimation]\n [class]=\"itemsContainerClasses()\"\n role=\"menu\"\n [attr.aria-orientation]=\"direction() === 'left' || direction() === 'right' ? 'horizontal' : 'vertical'\"\n >\n @if (actions().length > 0) {\n @for (action of actions(); track action.id || action.label) {\n @if (type() === 'menu') {\n <!-- Menu Item (Icon + Text) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed text-left cursor-pointer\"\n [class]=\"action.class || ''\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"sm\" class=\"shrink-0 text-gray-500 dark:text-gray-400\"></ol-icon>\n }\n <span class=\"truncate flex-1\">{{ action.label }}</span>\n </button>\n } @else {\n <!-- Floating Button Item (Circle / Rounded Square) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n [olTooltip]=\"action.tooltip || action.label\"\n [tooltipPosition]=\"tooltipPositionForItems()\"\n class=\"flex items-center justify-center w-12 h-12 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-slate-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 hover:text-brand-600 dark:hover:text-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed group relative cursor-pointer\"\n [class.rounded-xl]=\"type() === 'default'\"\n [class.rounded-full]=\"type() === 'rounded'\"\n [class]=\"action.class || ''\"\n [attr.aria-label]=\"action.label\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"md\" class=\"transition-transform group-hover:scale-110\"></ol-icon>\n }\n </button>\n }\n }\n } @else {\n <!-- Content Projection for manual items -->\n <ng-content />\n }\n </div>\n }\n\n <!-- Main Trigger Button -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [disabled]=\"disabled()\"\n [class]=\"triggerButtonClasses()\"\n [olTooltip]=\"tooltip() || ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n class=\"cursor-pointer\"\n >\n <ol-icon \n [name]=\"icon()\" \n size=\"md\" \n class=\"transition-transform duration-200\"\n [class.rotate-45]=\"isOpen() && icon() === 'plus'\"\n ></ol-icon>\n </button>\n</div>\n" }]
|
|
10315
|
+
args: [{ selector: 'ol-speed-dial', standalone: true, imports: [CommonModule, IconComponent, OlTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Optional Backdrop -->\n@if (backdrop() && isOpen()) {\n <div \n class=\"fixed inset-0 bg-black/20 dark:bg-black/40 backdrop-blur-xs z-40 transition-opacity\"\n (click)=\"close()\"\n (mouseenter)=\"onBackdropMouseEnter()\"\n ></div>\n}\n\n<div \n [class]=\"containerClasses()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <!-- Action Items List / Menu -->\n @if (isOpen()) {\n <div \n animate.enter=\"menu-scale-enter\"\n animate.leave=\"menu-scale-leave\"\n [class]=\"itemsContainerClasses()\"\n role=\"menu\"\n [attr.aria-orientation]=\"direction() === 'left' || direction() === 'right' ? 'horizontal' : 'vertical'\"\n >\n @if (actions().length > 0) {\n @for (action of actions(); track action.id || action.label) {\n @if (type() === 'menu') {\n <!-- Menu Item (Icon + Text) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n class=\"w-full flex items-center gap-2.5 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed text-left cursor-pointer\"\n [class]=\"action.class || ''\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"sm\" class=\"shrink-0 text-gray-500 dark:text-gray-400\"></ol-icon>\n }\n <span class=\"truncate flex-1\">{{ action.label }}</span>\n </button>\n } @else {\n <!-- Floating Button Item (Circle / Rounded Square) -->\n <button\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled\"\n (click)=\"handleAction(action, $event)\"\n [olTooltip]=\"action.tooltip || action.label\"\n [tooltipPosition]=\"tooltipPositionForItems()\"\n class=\"flex items-center justify-center w-12 h-12 bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-slate-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 hover:text-brand-600 dark:hover:text-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed group relative cursor-pointer\"\n [class.rounded-xl]=\"type() === 'default'\"\n [class.rounded-full]=\"type() === 'rounded'\"\n [class]=\"action.class || ''\"\n [attr.aria-label]=\"action.label\"\n >\n @if (action.icon) {\n <ol-icon [name]=\"action.icon\" size=\"md\" class=\"transition-transform group-hover:scale-110\"></ol-icon>\n }\n </button>\n }\n }\n } @else {\n <!-- Content Projection for manual items -->\n <ng-content />\n }\n </div>\n }\n\n <!-- Main Trigger Button -->\n <button\n type=\"button\"\n (click)=\"toggle()\"\n [disabled]=\"disabled()\"\n [class]=\"triggerButtonClasses()\"\n [olTooltip]=\"tooltip() || ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n class=\"cursor-pointer\"\n >\n <ol-icon \n [name]=\"icon()\" \n size=\"md\" \n class=\"transition-transform duration-200\"\n [class.rotate-45]=\"isOpen() && icon() === 'plus'\"\n ></ol-icon>\n </button>\n</div>\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"] }]
|
|
10590
10316
|
}], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], onDocumentClick: [{
|
|
10591
10317
|
type: HostListener,
|
|
10592
10318
|
args: ['document:click', ['$event']]
|
|
@@ -10933,6 +10659,8 @@ class TabItemComponent {
|
|
|
10933
10659
|
...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
|
|
10934
10660
|
displaySubtitle = computed(() => this.subtitle() || this.helper() || '', /* @ts-ignore */
|
|
10935
10661
|
...(ngDevMode ? [{ debugName: "displaySubtitle" }] : /* istanbul ignore next */ []));
|
|
10662
|
+
hostClass = computed(() => this.isActive() ? 'flex min-h-0 w-full flex-1 flex-col' : 'contents', /* @ts-ignore */
|
|
10663
|
+
...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
|
|
10936
10664
|
parentTabs = inject(forwardRef(() => TabsComponent), { optional: true });
|
|
10937
10665
|
isActive = computed(() => {
|
|
10938
10666
|
if (!this.parentTabs)
|
|
@@ -10943,13 +10671,13 @@ class TabItemComponent {
|
|
|
10943
10671
|
}, /* @ts-ignore */
|
|
10944
10672
|
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
10945
10673
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10946
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabItemComponent, isStandalone: true, selector: "ol-tab-item", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTheme: { classPropertyName: "badgeTheme", publicName: "badgeTheme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: {
|
|
10674
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabItemComponent, isStandalone: true, selector: "ol-tab-item", inputs: { tabId: { classPropertyName: "tabId", publicName: "tabId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTheme: { classPropertyName: "badgeTheme", publicName: "badgeTheme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabId()\"\n class=\"flex min-h-0 flex-1 flex-col focus:outline-none animate-in fade-in duration-150\"\n >\n <ng-content />\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10947
10675
|
}
|
|
10948
10676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
10949
10677
|
type: Component,
|
|
10950
10678
|
args: [{ selector: 'ol-tab-item', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
10951
|
-
class: '
|
|
10952
|
-
}, template: "@if (isActive()) {\n <div
|
|
10679
|
+
'[class]': 'hostClass()',
|
|
10680
|
+
}, template: "@if (isActive()) {\n <div\n role=\"tabpanel\"\n [attr.aria-labelledby]=\"tabId()\"\n class=\"flex min-h-0 flex-1 flex-col focus:outline-none animate-in fade-in duration-150\"\n >\n <ng-content />\n </div>\n}\n" }]
|
|
10953
10681
|
}], propDecorators: { tabId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTheme", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
10954
10682
|
|
|
10955
10683
|
class TabsComponent {
|
|
@@ -11071,22 +10799,22 @@ class TabsComponent {
|
|
|
11071
10799
|
}
|
|
11072
10800
|
}
|
|
11073
10801
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11074
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabsComponent, isStandalone: true, selector: "ol-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null }, mobileDropdown: { classPropertyName: "mobileDropdown", publicName: "mobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", activeTab: "activeTabChange", tabChange: "tabChange" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "items", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "<!-- 1. Mobile Dropdown View (Type=Default / Pills / Border bottom, Mobile=True - Figma #1149:80537, #1149:80539, #1149:80541) -->\r\n@if (isMobileDropdown()) {\r\n <div class=\"w-full max-w-md\">\r\n <div class=\"relative\">\r\n <select\r\n [value]=\"currentIndex()\"\r\n (change)=\"selectTab($any($event.target).selectedIndex)\"\r\n class=\"w-full appearance-none rounded-lg border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-900 py-2.5 pl-3.5 pr-10 text-sm font-medium text-gray-900 dark:text-white shadow-xs focus:border-brand-500 focus:outline-hidden focus:ring-1 focus:ring-brand-500 cursor-pointer\"\r\n >\r\n @for (item of items(); track item.tabId(); let i = $index) {\r\n <option [value]=\"i\" [disabled]=\"item.disabled()\">\r\n {{ item.displayLabel() }}\r\n </option>\r\n }\r\n </select>\r\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400\">\r\n <ol-icon name=\"angle-down\" size=\"xs\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Content Area -->\r\n <div class=\"pt-4 w-full\">\r\n <ng-content />\r\n </div>\r\n </div>\r\n} @else {\r\n <!-- 2. Standard / Desktop / Vertical Stack View -->\r\n <div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-6 items-start w-full' : 'w-full'\">\r\n <!-- Tab Headers Navigation -->\r\n <div\r\n [class]=\"\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs w-full max-w-md'\r\n : mobile() && variant() === 'button-group'\r\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs divide-y divide-gray-200 dark:divide-slate-800 overflow-hidden w-full max-w-md'\r\n : isVertical()\r\n ? (variant() === 'vertical-list' ? 'w-full md:w-64 shrink-0' : 'w-full md:w-44 shrink-0')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex max-w-full overflow-x-auto'\r\n : variant() === 'button-group'\r\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex divide-x divide-gray-200 dark:divide-slate-800 overflow-hidden max-w-full overflow-x-auto'\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? 'border-b border-gray-200 dark:border-slate-800 w-full'\r\n : 'w-full'\r\n \"\r\n >\r\n <div\r\n [class]=\"\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? 'flex flex-col gap-1 w-full'\r\n : mobile() && variant() === 'button-group'\r\n ? 'flex flex-col w-full'\r\n : isVertical()\r\n ? (variant() === 'vertical-list'\r\n ? 'flex flex-col gap-1 p-2 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs'\r\n : 'flex flex-col gap-2.5')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? 'flex items-center gap-1 ' + (fullWidth() ? 'w-full' : '')\r\n : variant() === 'button-group'\r\n ? 'flex items-center ' + (fullWidth() ? 'w-full' : '')\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? 'flex items-center gap-6 overflow-x-auto -mb-px ' + (fullWidth() ? 'justify-between' : '')\r\n : 'flex items-center gap-6 overflow-x-auto ' + (fullWidth() ? 'justify-between' : '')\r\n \"\r\n role=\"tablist\"\r\n >\r\n @for (item of items(); track item.tabId(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [id]=\"item.tabId()\"\r\n [disabled]=\"item.disabled()\"\r\n [attr.aria-selected]=\"i === currentIndex()\"\r\n (click)=\"selectTab(i)\"\r\n [class]=\"\r\n 'inline-flex items-center font-medium transition-all duration-150 select-none whitespace-nowrap ' +\r\n sizeClasses() +\r\n ' ' +\r\n (fullWidth() || mobile() ? 'w-full justify-start ' : '') +\r\n (item.disabled() ? 'opacity-40 cursor-not-allowed ' : 'cursor-pointer ') +\r\n (\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : mobile() && variant() === 'button-group'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'default'\r\n ? (i === currentIndex()\r\n ? 'text-brand-600 dark:text-blue-400 font-semibold'\r\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white')\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? (i === currentIndex()\r\n ? 'border-b-2 border-brand-600 text-brand-600 font-semibold dark:border-blue-400 dark:text-blue-300 pb-3 -mb-px'\r\n : 'border-b-2 border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300 dark:text-gray-400 dark:hover:text-white pb-3 -mb-px')\r\n : variant() === 'pills'\r\n ? (i === currentIndex()\r\n ? 'bg-brand-600 text-white font-medium rounded-full shadow-xs dark:bg-blue-600'\r\n : 'text-gray-600 hover:bg-gray-100 rounded-full dark:text-gray-300 dark:hover:bg-slate-800')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'button-group'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'vertical-pills' || variant() === 'vertical'\r\n ? (i === currentIndex()\r\n ? 'bg-brand-600 text-white font-medium rounded-xl shadow-xs justify-start w-full'\r\n : 'text-gray-600 hover:bg-gray-100 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800 justify-start w-full')\r\n : variant() === 'vertical-list'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-50 text-brand-600 font-semibold rounded-xl dark:bg-slate-800 dark:text-blue-300 justify-between w-full'\r\n : 'text-gray-700 hover:bg-gray-50 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800/60 justify-between w-full')\r\n : ''\r\n )\r\n \"\r\n >\r\n <!-- User select format with Avatar (Figma #1149:80606) -->\r\n @if (item.avatar()) {\r\n <div class=\"inline-flex items-center gap-3 min-w-0 text-left\">\r\n <img [src]=\"item.avatar()!\" alt=\"\" class=\"w-8 h-8 rounded-full object-cover shrink-0 border border-gray-200 dark:border-slate-700\" />\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"truncate font-medium text-xs leading-tight text-gray-900 dark:text-white\">{{ item.displayLabel() }}</span>\r\n @if (item.helper()) {\r\n <span class=\"truncate text-[11px] text-gray-500 dark:text-gray-400 font-normal leading-tight\">{{ item.helper() }}</span>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"inline-flex items-center gap-2 min-w-0\">\r\n @if (item.icon()) {\r\n <ol-icon [name]=\"item.icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\r\n }\r\n <span class=\"truncate\">{{ item.displayLabel() }}</span>\r\n </div>\r\n }\r\n\r\n @if (item.badge() !== null && item.badge() !== undefined && item.badge() !== '') {\r\n <ol-badge\r\n [theme]=\"i === currentIndex() && (variant() === 'pills' || variant() === 'vertical-pills') ? 'white' : item.badgeTheme()\"\r\n size=\"xs\"\r\n shape=\"pill\"\r\n class=\"ml-auto\"\r\n >\r\n {{ item.badge() }}\r\n </ol-badge>\r\n }\r\n\r\n @if (variant() === 'vertical-list' && !item.avatar()) {\r\n @if (i === currentIndex()) {\r\n <ol-icon name=\"check-circle\" size=\"xs\" class=\"text-brand-600 shrink-0 ml-auto\"></ol-icon>\r\n } @else {\r\n <ol-icon name=\"angle-down\" size=\"xs\" class=\"text-gray-400 shrink-0 -rotate-90 ml-auto\"></ol-icon>\r\n }\r\n }\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Content Area -->\r\n <div [class]=\"isVertical() ? 'flex-1 min-w-0 w-full' : 'pt-4 w-full'\">\r\n <ng-content />\r\n </div>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: BadgeComponent, selector: "ol-badge", inputs: ["theme", "color", "size", "shape", "rounded", "type", "dot", "leftIcon", "rightIcon", "avatar", "avatarText", "secondaryText", "loading", "removable", "href"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TabsComponent, isStandalone: true, selector: "ol-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: true, isRequired: false, transformFunction: null }, mobileDropdown: { classPropertyName: "mobileDropdown", publicName: "mobileDropdown", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", activeTab: "activeTabChange", tabChange: "tabChange" }, host: { classAttribute: "block w-full" }, queries: [{ propertyName: "items", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "<!-- 1. Mobile Dropdown View (Type=Default / Pills / Border bottom, Mobile=True - Figma #1149:80537, #1149:80539, #1149:80541) -->\n@if (isMobileDropdown()) {\n <div class=\"w-full max-w-md\">\n <div class=\"relative\">\n <select\n [value]=\"currentIndex()\"\n (change)=\"selectTab($any($event.target).selectedIndex)\"\n class=\"w-full appearance-none rounded-lg border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-900 py-2.5 pl-3.5 pr-10 text-sm font-medium text-gray-900 dark:text-white shadow-xs focus:border-brand-500 focus:outline-hidden focus:ring-1 focus:ring-brand-500 cursor-pointer\"\n >\n @for (item of items(); track item.tabId(); let i = $index) {\n <option [value]=\"i\" [disabled]=\"item.disabled()\">\n {{ item.displayLabel() }}\n </option>\n }\n </select>\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400\">\n <ol-icon name=\"angle-down\" size=\"xs\" />\n </div>\n </div>\n\n <!-- Tab Content Area -->\n <div class=\"pt-4 w-full\">\n <ng-content />\n </div>\n </div>\n} @else {\n <!-- 2. Standard / Desktop / Vertical Stack View -->\n <div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-6 items-start w-full' : 'flex w-full flex-col min-h-0'\">\n <!-- Tab Headers Navigation -->\n <div\n [class]=\"\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs w-full max-w-md'\n : mobile() && variant() === 'button-group'\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs divide-y divide-gray-200 dark:divide-slate-800 overflow-hidden w-full max-w-md'\n : isVertical()\n ? (variant() === 'vertical-list' ? 'w-full md:w-64 shrink-0' : 'w-full md:w-44 shrink-0')\n : variant() === 'button' || variant() === 'boxed'\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex max-w-full overflow-x-auto'\n : variant() === 'button-group'\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex divide-x divide-gray-200 dark:divide-slate-800 overflow-hidden max-w-full overflow-x-auto'\n : variant() === 'border-bottom' || variant() === 'underline'\n ? 'border-b border-gray-200 dark:border-slate-800 w-full'\n : 'w-full'\n \"\n >\n <div\n [class]=\"\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? 'flex flex-col gap-1 w-full'\n : mobile() && variant() === 'button-group'\n ? 'flex flex-col w-full'\n : isVertical()\n ? (variant() === 'vertical-list'\n ? 'flex flex-col gap-1 p-2 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs'\n : 'flex flex-col gap-2.5')\n : variant() === 'button' || variant() === 'boxed'\n ? 'flex items-center gap-1 ' + (fullWidth() ? 'w-full' : '')\n : variant() === 'button-group'\n ? 'flex items-center ' + (fullWidth() ? 'w-full' : '')\n : variant() === 'border-bottom' || variant() === 'underline'\n ? 'flex items-center gap-6 overflow-x-auto -mb-px ' + (fullWidth() ? 'justify-between' : '')\n : 'flex items-center gap-6 overflow-x-auto ' + (fullWidth() ? 'justify-between' : '')\n \"\n role=\"tablist\"\n >\n @for (item of items(); track item.tabId(); let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"item.tabId()\"\n [disabled]=\"item.disabled()\"\n [attr.aria-selected]=\"i === currentIndex()\"\n (click)=\"selectTab(i)\"\n [class]=\"\n 'inline-flex items-center font-medium transition-all duration-150 select-none whitespace-nowrap ' +\n sizeClasses() +\n ' ' +\n (fullWidth() || mobile() ? 'w-full justify-start ' : '') +\n (item.disabled() ? 'opacity-40 cursor-not-allowed ' : 'cursor-pointer ') +\n (\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : mobile() && variant() === 'button-group'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'default'\n ? (i === currentIndex()\n ? 'text-brand-600 dark:text-blue-400 font-semibold'\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white')\n : variant() === 'border-bottom' || variant() === 'underline'\n ? (i === currentIndex()\n ? 'border-b-2 border-brand-600 text-brand-600 font-semibold dark:border-blue-400 dark:text-blue-300 pb-3 -mb-px'\n : 'border-b-2 border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300 dark:text-gray-400 dark:hover:text-white pb-3 -mb-px')\n : variant() === 'pills'\n ? (i === currentIndex()\n ? 'bg-brand-600 text-white font-medium rounded-full shadow-xs dark:bg-blue-600'\n : 'text-gray-600 hover:bg-gray-100 rounded-full dark:text-gray-300 dark:hover:bg-slate-800')\n : variant() === 'button' || variant() === 'boxed'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'button-group'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'vertical-pills' || variant() === 'vertical'\n ? (i === currentIndex()\n ? 'bg-brand-600 text-white font-medium rounded-xl shadow-xs justify-start w-full'\n : 'text-gray-600 hover:bg-gray-100 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800 justify-start w-full')\n : variant() === 'vertical-list'\n ? (i === currentIndex()\n ? 'bg-gray-50 text-brand-600 font-semibold rounded-xl dark:bg-slate-800 dark:text-blue-300 justify-between w-full'\n : 'text-gray-700 hover:bg-gray-50 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800/60 justify-between w-full')\n : ''\n )\n \"\n >\n <!-- User select format with Avatar (Figma #1149:80606) -->\n @if (item.avatar()) {\n <div class=\"inline-flex items-center gap-3 min-w-0 text-left\">\n <img [src]=\"item.avatar()!\" alt=\"\" class=\"w-8 h-8 rounded-full object-cover shrink-0 border border-gray-200 dark:border-slate-700\" />\n <div class=\"flex flex-col min-w-0\">\n <span class=\"truncate font-medium text-xs leading-tight text-gray-900 dark:text-white\">{{ item.displayLabel() }}</span>\n @if (item.helper()) {\n <span class=\"truncate text-[11px] text-gray-500 dark:text-gray-400 font-normal leading-tight\">{{ item.helper() }}</span>\n }\n </div>\n </div>\n } @else {\n <div class=\"inline-flex items-center gap-2 min-w-0\">\n @if (item.icon()) {\n <ol-icon [name]=\"item.icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n }\n <span class=\"truncate\">{{ item.displayLabel() }}</span>\n </div>\n }\n\n @if (item.badge() !== null && item.badge() !== undefined && item.badge() !== '') {\n <ol-badge\n [theme]=\"i === currentIndex() && (variant() === 'pills' || variant() === 'vertical-pills') ? 'white' : item.badgeTheme()\"\n size=\"xs\"\n shape=\"pill\"\n class=\"ml-auto\"\n >\n {{ item.badge() }}\n </ol-badge>\n }\n\n @if (variant() === 'vertical-list' && !item.avatar()) {\n @if (i === currentIndex()) {\n <ol-icon name=\"check-circle\" size=\"xs\" class=\"text-brand-600 shrink-0 ml-auto\"></ol-icon>\n } @else {\n <ol-icon name=\"angle-down\" size=\"xs\" class=\"text-gray-400 shrink-0 -rotate-90 ml-auto\"></ol-icon>\n }\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Tab Content Area -->\n <div [class]=\"isVertical() ? 'flex-1 min-w-0 w-full' : 'flex min-h-0 flex-1 flex-col pt-4 w-full'\">\n <ng-content />\n </div>\n </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "ol-icon", inputs: ["name", "size", "color", "variant", "strokeWidth"] }, { kind: "component", type: BadgeComponent, selector: "ol-badge", inputs: ["theme", "color", "size", "shape", "rounded", "type", "dot", "leftIcon", "rightIcon", "avatar", "avatarText", "secondaryText", "loading", "removable", "href"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11075
10803
|
}
|
|
11076
10804
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabsComponent, decorators: [{
|
|
11077
10805
|
type: Component,
|
|
11078
10806
|
args: [{ selector: 'ol-tabs', standalone: true, imports: [CommonModule, IconComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
11079
10807
|
class: 'block w-full',
|
|
11080
|
-
}, template: "<!-- 1. Mobile Dropdown View (Type=Default / Pills / Border bottom, Mobile=True - Figma #1149:80537, #1149:80539, #1149:80541) -->\r\n@if (isMobileDropdown()) {\r\n <div class=\"w-full max-w-md\">\r\n <div class=\"relative\">\r\n <select\r\n [value]=\"currentIndex()\"\r\n (change)=\"selectTab($any($event.target).selectedIndex)\"\r\n class=\"w-full appearance-none rounded-lg border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-900 py-2.5 pl-3.5 pr-10 text-sm font-medium text-gray-900 dark:text-white shadow-xs focus:border-brand-500 focus:outline-hidden focus:ring-1 focus:ring-brand-500 cursor-pointer\"\r\n >\r\n @for (item of items(); track item.tabId(); let i = $index) {\r\n <option [value]=\"i\" [disabled]=\"item.disabled()\">\r\n {{ item.displayLabel() }}\r\n </option>\r\n }\r\n </select>\r\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400\">\r\n <ol-icon name=\"angle-down\" size=\"xs\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Content Area -->\r\n <div class=\"pt-4 w-full\">\r\n <ng-content />\r\n </div>\r\n </div>\r\n} @else {\r\n <!-- 2. Standard / Desktop / Vertical Stack View -->\r\n <div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-6 items-start w-full' : 'w-full'\">\r\n <!-- Tab Headers Navigation -->\r\n <div\r\n [class]=\"\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs w-full max-w-md'\r\n : mobile() && variant() === 'button-group'\r\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs divide-y divide-gray-200 dark:divide-slate-800 overflow-hidden w-full max-w-md'\r\n : isVertical()\r\n ? (variant() === 'vertical-list' ? 'w-full md:w-64 shrink-0' : 'w-full md:w-44 shrink-0')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex max-w-full overflow-x-auto'\r\n : variant() === 'button-group'\r\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex divide-x divide-gray-200 dark:divide-slate-800 overflow-hidden max-w-full overflow-x-auto'\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? 'border-b border-gray-200 dark:border-slate-800 w-full'\r\n : 'w-full'\r\n \"\r\n >\r\n <div\r\n [class]=\"\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? 'flex flex-col gap-1 w-full'\r\n : mobile() && variant() === 'button-group'\r\n ? 'flex flex-col w-full'\r\n : isVertical()\r\n ? (variant() === 'vertical-list'\r\n ? 'flex flex-col gap-1 p-2 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs'\r\n : 'flex flex-col gap-2.5')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? 'flex items-center gap-1 ' + (fullWidth() ? 'w-full' : '')\r\n : variant() === 'button-group'\r\n ? 'flex items-center ' + (fullWidth() ? 'w-full' : '')\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? 'flex items-center gap-6 overflow-x-auto -mb-px ' + (fullWidth() ? 'justify-between' : '')\r\n : 'flex items-center gap-6 overflow-x-auto ' + (fullWidth() ? 'justify-between' : '')\r\n \"\r\n role=\"tablist\"\r\n >\r\n @for (item of items(); track item.tabId(); let i = $index) {\r\n <button\r\n type=\"button\"\r\n role=\"tab\"\r\n [id]=\"item.tabId()\"\r\n [disabled]=\"item.disabled()\"\r\n [attr.aria-selected]=\"i === currentIndex()\"\r\n (click)=\"selectTab(i)\"\r\n [class]=\"\r\n 'inline-flex items-center font-medium transition-all duration-150 select-none whitespace-nowrap ' +\r\n sizeClasses() +\r\n ' ' +\r\n (fullWidth() || mobile() ? 'w-full justify-start ' : '') +\r\n (item.disabled() ? 'opacity-40 cursor-not-allowed ' : 'cursor-pointer ') +\r\n (\r\n mobile() && (variant() === 'button' || variant() === 'boxed')\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : mobile() && variant() === 'button-group'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'default'\r\n ? (i === currentIndex()\r\n ? 'text-brand-600 dark:text-blue-400 font-semibold'\r\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white')\r\n : variant() === 'border-bottom' || variant() === 'underline'\r\n ? (i === currentIndex()\r\n ? 'border-b-2 border-brand-600 text-brand-600 font-semibold dark:border-blue-400 dark:text-blue-300 pb-3 -mb-px'\r\n : 'border-b-2 border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300 dark:text-gray-400 dark:hover:text-white pb-3 -mb-px')\r\n : variant() === 'pills'\r\n ? (i === currentIndex()\r\n ? 'bg-brand-600 text-white font-medium rounded-full shadow-xs dark:bg-blue-600'\r\n : 'text-gray-600 hover:bg-gray-100 rounded-full dark:text-gray-300 dark:hover:bg-slate-800')\r\n : variant() === 'button' || variant() === 'boxed'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'button-group'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\r\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\r\n : variant() === 'vertical-pills' || variant() === 'vertical'\r\n ? (i === currentIndex()\r\n ? 'bg-brand-600 text-white font-medium rounded-xl shadow-xs justify-start w-full'\r\n : 'text-gray-600 hover:bg-gray-100 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800 justify-start w-full')\r\n : variant() === 'vertical-list'\r\n ? (i === currentIndex()\r\n ? 'bg-gray-50 text-brand-600 font-semibold rounded-xl dark:bg-slate-800 dark:text-blue-300 justify-between w-full'\r\n : 'text-gray-700 hover:bg-gray-50 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800/60 justify-between w-full')\r\n : ''\r\n )\r\n \"\r\n >\r\n <!-- User select format with Avatar (Figma #1149:80606) -->\r\n @if (item.avatar()) {\r\n <div class=\"inline-flex items-center gap-3 min-w-0 text-left\">\r\n <img [src]=\"item.avatar()!\" alt=\"\" class=\"w-8 h-8 rounded-full object-cover shrink-0 border border-gray-200 dark:border-slate-700\" />\r\n <div class=\"flex flex-col min-w-0\">\r\n <span class=\"truncate font-medium text-xs leading-tight text-gray-900 dark:text-white\">{{ item.displayLabel() }}</span>\r\n @if (item.helper()) {\r\n <span class=\"truncate text-[11px] text-gray-500 dark:text-gray-400 font-normal leading-tight\">{{ item.helper() }}</span>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"inline-flex items-center gap-2 min-w-0\">\r\n @if (item.icon()) {\r\n <ol-icon [name]=\"item.icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\r\n }\r\n <span class=\"truncate\">{{ item.displayLabel() }}</span>\r\n </div>\r\n }\r\n\r\n @if (item.badge() !== null && item.badge() !== undefined && item.badge() !== '') {\r\n <ol-badge\r\n [theme]=\"i === currentIndex() && (variant() === 'pills' || variant() === 'vertical-pills') ? 'white' : item.badgeTheme()\"\r\n size=\"xs\"\r\n shape=\"pill\"\r\n class=\"ml-auto\"\r\n >\r\n {{ item.badge() }}\r\n </ol-badge>\r\n }\r\n\r\n @if (variant() === 'vertical-list' && !item.avatar()) {\r\n @if (i === currentIndex()) {\r\n <ol-icon name=\"check-circle\" size=\"xs\" class=\"text-brand-600 shrink-0 ml-auto\"></ol-icon>\r\n } @else {\r\n <ol-icon name=\"angle-down\" size=\"xs\" class=\"text-gray-400 shrink-0 -rotate-90 ml-auto\"></ol-icon>\r\n }\r\n }\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Content Area -->\r\n <div [class]=\"isVertical() ? 'flex-1 min-w-0 w-full' : 'pt-4 w-full'\">\r\n <ng-content />\r\n </div>\r\n </div>\r\n}\r\n" }]
|
|
10808
|
+
}, template: "<!-- 1. Mobile Dropdown View (Type=Default / Pills / Border bottom, Mobile=True - Figma #1149:80537, #1149:80539, #1149:80541) -->\n@if (isMobileDropdown()) {\n <div class=\"w-full max-w-md\">\n <div class=\"relative\">\n <select\n [value]=\"currentIndex()\"\n (change)=\"selectTab($any($event.target).selectedIndex)\"\n class=\"w-full appearance-none rounded-lg border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-900 py-2.5 pl-3.5 pr-10 text-sm font-medium text-gray-900 dark:text-white shadow-xs focus:border-brand-500 focus:outline-hidden focus:ring-1 focus:ring-brand-500 cursor-pointer\"\n >\n @for (item of items(); track item.tabId(); let i = $index) {\n <option [value]=\"i\" [disabled]=\"item.disabled()\">\n {{ item.displayLabel() }}\n </option>\n }\n </select>\n <div class=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400\">\n <ol-icon name=\"angle-down\" size=\"xs\" />\n </div>\n </div>\n\n <!-- Tab Content Area -->\n <div class=\"pt-4 w-full\">\n <ng-content />\n </div>\n </div>\n} @else {\n <!-- 2. Standard / Desktop / Vertical Stack View -->\n <div [class]=\"isVertical() ? 'flex flex-col md:flex-row gap-6 items-start w-full' : 'flex w-full flex-col min-h-0'\">\n <!-- Tab Headers Navigation -->\n <div\n [class]=\"\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs w-full max-w-md'\n : mobile() && variant() === 'button-group'\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs divide-y divide-gray-200 dark:divide-slate-800 overflow-hidden w-full max-w-md'\n : isVertical()\n ? (variant() === 'vertical-list' ? 'w-full md:w-64 shrink-0' : 'w-full md:w-44 shrink-0')\n : variant() === 'button' || variant() === 'boxed'\n ? 'p-3 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex max-w-full overflow-x-auto'\n : variant() === 'button-group'\n ? 'bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs inline-flex divide-x divide-gray-200 dark:divide-slate-800 overflow-hidden max-w-full overflow-x-auto'\n : variant() === 'border-bottom' || variant() === 'underline'\n ? 'border-b border-gray-200 dark:border-slate-800 w-full'\n : 'w-full'\n \"\n >\n <div\n [class]=\"\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? 'flex flex-col gap-1 w-full'\n : mobile() && variant() === 'button-group'\n ? 'flex flex-col w-full'\n : isVertical()\n ? (variant() === 'vertical-list'\n ? 'flex flex-col gap-1 p-2 bg-white dark:bg-slate-900 rounded-2xl border border-gray-200 dark:border-slate-800 shadow-xs'\n : 'flex flex-col gap-2.5')\n : variant() === 'button' || variant() === 'boxed'\n ? 'flex items-center gap-1 ' + (fullWidth() ? 'w-full' : '')\n : variant() === 'button-group'\n ? 'flex items-center ' + (fullWidth() ? 'w-full' : '')\n : variant() === 'border-bottom' || variant() === 'underline'\n ? 'flex items-center gap-6 overflow-x-auto -mb-px ' + (fullWidth() ? 'justify-between' : '')\n : 'flex items-center gap-6 overflow-x-auto ' + (fullWidth() ? 'justify-between' : '')\n \"\n role=\"tablist\"\n >\n @for (item of items(); track item.tabId(); let i = $index) {\n <button\n type=\"button\"\n role=\"tab\"\n [id]=\"item.tabId()\"\n [disabled]=\"item.disabled()\"\n [attr.aria-selected]=\"i === currentIndex()\"\n (click)=\"selectTab(i)\"\n [class]=\"\n 'inline-flex items-center font-medium transition-all duration-150 select-none whitespace-nowrap ' +\n sizeClasses() +\n ' ' +\n (fullWidth() || mobile() ? 'w-full justify-start ' : '') +\n (item.disabled() ? 'opacity-40 cursor-not-allowed ' : 'cursor-pointer ') +\n (\n mobile() && (variant() === 'button' || variant() === 'boxed')\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : mobile() && variant() === 'button-group'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'default'\n ? (i === currentIndex()\n ? 'text-brand-600 dark:text-blue-400 font-semibold'\n : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white')\n : variant() === 'border-bottom' || variant() === 'underline'\n ? (i === currentIndex()\n ? 'border-b-2 border-brand-600 text-brand-600 font-semibold dark:border-blue-400 dark:text-blue-300 pb-3 -mb-px'\n : 'border-b-2 border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300 dark:text-gray-400 dark:hover:text-white pb-3 -mb-px')\n : variant() === 'pills'\n ? (i === currentIndex()\n ? 'bg-brand-600 text-white font-medium rounded-full shadow-xs dark:bg-blue-600'\n : 'text-gray-600 hover:bg-gray-100 rounded-full dark:text-gray-300 dark:hover:bg-slate-800')\n : variant() === 'button' || variant() === 'boxed'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium rounded-xl shadow-2xs dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-xl dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'button-group'\n ? (i === currentIndex()\n ? 'bg-gray-100 text-gray-900 font-medium dark:bg-slate-800 dark:text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-white dark:hover:bg-slate-800/60')\n : variant() === 'vertical-pills' || variant() === 'vertical'\n ? (i === currentIndex()\n ? 'bg-brand-600 text-white font-medium rounded-xl shadow-xs justify-start w-full'\n : 'text-gray-600 hover:bg-gray-100 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800 justify-start w-full')\n : variant() === 'vertical-list'\n ? (i === currentIndex()\n ? 'bg-gray-50 text-brand-600 font-semibold rounded-xl dark:bg-slate-800 dark:text-blue-300 justify-between w-full'\n : 'text-gray-700 hover:bg-gray-50 rounded-xl dark:text-gray-300 dark:hover:bg-slate-800/60 justify-between w-full')\n : ''\n )\n \"\n >\n <!-- User select format with Avatar (Figma #1149:80606) -->\n @if (item.avatar()) {\n <div class=\"inline-flex items-center gap-3 min-w-0 text-left\">\n <img [src]=\"item.avatar()!\" alt=\"\" class=\"w-8 h-8 rounded-full object-cover shrink-0 border border-gray-200 dark:border-slate-700\" />\n <div class=\"flex flex-col min-w-0\">\n <span class=\"truncate font-medium text-xs leading-tight text-gray-900 dark:text-white\">{{ item.displayLabel() }}</span>\n @if (item.helper()) {\n <span class=\"truncate text-[11px] text-gray-500 dark:text-gray-400 font-normal leading-tight\">{{ item.helper() }}</span>\n }\n </div>\n </div>\n } @else {\n <div class=\"inline-flex items-center gap-2 min-w-0\">\n @if (item.icon()) {\n <ol-icon [name]=\"item.icon()!\" size=\"sm\" class=\"shrink-0\"></ol-icon>\n }\n <span class=\"truncate\">{{ item.displayLabel() }}</span>\n </div>\n }\n\n @if (item.badge() !== null && item.badge() !== undefined && item.badge() !== '') {\n <ol-badge\n [theme]=\"i === currentIndex() && (variant() === 'pills' || variant() === 'vertical-pills') ? 'white' : item.badgeTheme()\"\n size=\"xs\"\n shape=\"pill\"\n class=\"ml-auto\"\n >\n {{ item.badge() }}\n </ol-badge>\n }\n\n @if (variant() === 'vertical-list' && !item.avatar()) {\n @if (i === currentIndex()) {\n <ol-icon name=\"check-circle\" size=\"xs\" class=\"text-brand-600 shrink-0 ml-auto\"></ol-icon>\n } @else {\n <ol-icon name=\"angle-down\" size=\"xs\" class=\"text-gray-400 shrink-0 -rotate-90 ml-auto\"></ol-icon>\n }\n }\n </button>\n }\n </div>\n </div>\n\n <!-- Tab Content Area -->\n <div [class]=\"isVertical() ? 'flex-1 min-w-0 w-full' : 'flex min-h-0 flex-1 flex-col pt-4 w-full'\">\n <ng-content />\n </div>\n </div>\n}\n" }]
|
|
11081
10809
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], mobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobile", required: false }] }], mobileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileDropdown", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabItemComponent), { isSignal: true }] }] } });
|
|
11082
10810
|
|
|
11083
10811
|
class TimelineComponent {
|
|
11084
10812
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11085
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TimelineComponent, isStandalone: true, selector: "ol-timeline", ngImport: i0, template: "<ol class=\"relative border-s border-gray-200 dark:border-gray-700\">\
|
|
10813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TimelineComponent, isStandalone: true, selector: "ol-timeline", ngImport: i0, template: "<ol class=\"relative border-s border-gray-200 dark:border-gray-700\">\n <ng-content />\n</ol>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11086
10814
|
}
|
|
11087
10815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
11088
10816
|
type: Component,
|
|
11089
|
-
args: [{ selector: 'ol-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"relative border-s border-gray-200 dark:border-gray-700\">\
|
|
10817
|
+
args: [{ selector: 'ol-timeline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ol class=\"relative border-s border-gray-200 dark:border-gray-700\">\n <ng-content />\n</ol>\n" }]
|
|
11090
10818
|
}] });
|
|
11091
10819
|
|
|
11092
10820
|
class TimelineItemComponent {
|
|
@@ -11095,11 +10823,11 @@ class TimelineItemComponent {
|
|
|
11095
10823
|
title = input('', /* @ts-ignore */
|
|
11096
10824
|
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
11097
10825
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11098
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimelineItemComponent, isStandalone: true, selector: "ol-timeline-item", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li class=\"mb-10 ms-4\">\
|
|
10826
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimelineItemComponent, isStandalone: true, selector: "ol-timeline-item", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li class=\"mb-10 ms-4\">\n <div class=\"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -inset-s-1.5 border border-white dark:border-gray-900 dark:bg-gray-700\"></div>\n @if (date()) {\n <time class=\"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500\">{{ date() }}</time>\n }\n @if (title()) {\n <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">{{ title() }}</h3>\n }\n <p class=\"mb-4 text-base font-normal text-gray-500 dark:text-gray-400\">\n <ng-content />\n </p>\n</li>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11099
10827
|
}
|
|
11100
10828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineItemComponent, decorators: [{
|
|
11101
10829
|
type: Component,
|
|
11102
|
-
args: [{ selector: 'ol-timeline-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"mb-10 ms-4\">\
|
|
10830
|
+
args: [{ selector: 'ol-timeline-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"mb-10 ms-4\">\n <div class=\"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -inset-s-1.5 border border-white dark:border-gray-900 dark:bg-gray-700\"></div>\n @if (date()) {\n <time class=\"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500\">{{ date() }}</time>\n }\n @if (title()) {\n <h3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">{{ title() }}</h3>\n }\n <p class=\"mb-4 text-base font-normal text-gray-500 dark:text-gray-400\">\n <ng-content />\n </p>\n</li>\n" }]
|
|
11103
10831
|
}], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
11104
10832
|
|
|
11105
10833
|
class ToastComponent {
|
|
@@ -11361,31 +11089,11 @@ class OlToastComponent {
|
|
|
11361
11089
|
}, interval);
|
|
11362
11090
|
}
|
|
11363
11091
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11364
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlToastComponent, isStandalone: true, selector: "ol-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n [class]=\"toastClasses()\"\n
|
|
11365
|
-
trigger('slideIn', [
|
|
11366
|
-
transition(':enter', [
|
|
11367
|
-
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
11368
|
-
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
11369
|
-
]),
|
|
11370
|
-
transition(':leave', [
|
|
11371
|
-
animate('200ms cubic-bezier(0.4, 0, 0.6, 1)', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
11372
|
-
]),
|
|
11373
|
-
]),
|
|
11374
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11092
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OlToastComponent, isStandalone: true, selector: "ol-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div\n [class]=\"toastClasses()\"\n animate.enter=\"toast-slide-enter\"\n animate.leave=\"toast-slide-leave\"\n role=\"alert\"\n [attr.aria-live]=\"config().type === 'danger' ? 'assertive' : 'polite'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\">\n \n <div class=\"flex items-start gap-3 p-4\">\n <!-- Avatar or Icon -->\n @if (config().avatar) {\n <img \n [src]=\"config().avatar\" \n class=\"w-10 h-10 rounded-full object-cover shrink-0\" \n alt=\"\" />\n } @else if (showIcon()) {\n <svg \n [class]=\"'w-5 h-5 shrink-0 ' + iconClasses()\" \n fill=\"currentColor\" \n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\">\n @switch (iconName()) {\n @case ('check-circle') {\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-triangle') {\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('info-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\" />\n }\n }\n </svg>\n }\n \n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n @if (config().title) {\n <h4 class=\"font-semibold text-sm mb-1\">{{ config().title }}</h4>\n }\n <p class=\"text-sm\">{{ config().message }}</p>\n \n @if (config().actionLabel) {\n <button\n type=\"button\"\n class=\"mt-2 text-sm font-medium underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current rounded\"\n (click)=\"handleAction()\">\n {{ config().actionLabel }}\n </button>\n }\n </div>\n \n <!-- Dismiss Button -->\n @if (config().dismissible) {\n <button\n type=\"button\"\n class=\"shrink-0 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current transition-colors\"\n (click)=\"handleDismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n </div>\n \n <!-- Progress Bar -->\n @if (config().showProgress && (config().duration ?? 0) > 0) {\n <div class=\"absolute bottom-0 inset-x-0 h-0.5 bg-black/5 dark:bg-white/5 pointer-events-none\">\n <div\n class=\"h-full transition-all duration-75 ease-linear rounded-r-full\"\n [class]=\"progressBarClasses()\"\n [style.width.%]=\"progress()\">\n </div>\n </div>\n }\n</div>\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11375
11093
|
}
|
|
11376
11094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OlToastComponent, decorators: [{
|
|
11377
11095
|
type: Component,
|
|
11378
|
-
args: [{ selector: 'ol-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule],
|
|
11379
|
-
trigger('slideIn', [
|
|
11380
|
-
transition(':enter', [
|
|
11381
|
-
style({ transform: 'translateX(100%)', opacity: 0 }),
|
|
11382
|
-
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)', style({ transform: 'translateX(0)', opacity: 1 })),
|
|
11383
|
-
]),
|
|
11384
|
-
transition(':leave', [
|
|
11385
|
-
animate('200ms cubic-bezier(0.4, 0, 0.6, 1)', style({ transform: 'translateX(100%)', opacity: 0 })),
|
|
11386
|
-
]),
|
|
11387
|
-
]),
|
|
11388
|
-
], template: "<div\n [class]=\"toastClasses()\"\n [@slideIn]\n role=\"alert\"\n [attr.aria-live]=\"config().type === 'danger' ? 'assertive' : 'polite'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\">\n \n <div class=\"flex items-start gap-3 p-4\">\n <!-- Avatar or Icon -->\n @if (config().avatar) {\n <img \n [src]=\"config().avatar\" \n class=\"w-10 h-10 rounded-full object-cover shrink-0\" \n alt=\"\" />\n } @else if (showIcon()) {\n <svg \n [class]=\"'w-5 h-5 shrink-0 ' + iconClasses()\" \n fill=\"currentColor\" \n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\">\n @switch (iconName()) {\n @case ('check-circle') {\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-triangle') {\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('info-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\" />\n }\n }\n </svg>\n }\n \n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n @if (config().title) {\n <h4 class=\"font-semibold text-sm mb-1\">{{ config().title }}</h4>\n }\n <p class=\"text-sm\">{{ config().message }}</p>\n \n @if (config().actionLabel) {\n <button\n type=\"button\"\n class=\"mt-2 text-sm font-medium underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current rounded\"\n (click)=\"handleAction()\">\n {{ config().actionLabel }}\n </button>\n }\n </div>\n \n <!-- Dismiss Button -->\n @if (config().dismissible) {\n <button\n type=\"button\"\n class=\"shrink-0 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current transition-colors\"\n (click)=\"handleDismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n </div>\n \n <!-- Progress Bar -->\n @if (config().showProgress && (config().duration ?? 0) > 0) {\n <div class=\"absolute bottom-0 inset-x-0 h-0.5 bg-black/5 dark:bg-white/5 pointer-events-none\">\n <div\n class=\"h-full transition-all duration-75 ease-linear rounded-r-full\"\n [class]=\"progressBarClasses()\"\n [style.width.%]=\"progress()\">\n </div>\n </div>\n }\n</div>\n" }]
|
|
11096
|
+
args: [{ selector: 'ol-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div\n [class]=\"toastClasses()\"\n animate.enter=\"toast-slide-enter\"\n animate.leave=\"toast-slide-leave\"\n role=\"alert\"\n [attr.aria-live]=\"config().type === 'danger' ? 'assertive' : 'polite'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\">\n \n <div class=\"flex items-start gap-3 p-4\">\n <!-- Avatar or Icon -->\n @if (config().avatar) {\n <img \n [src]=\"config().avatar\" \n class=\"w-10 h-10 rounded-full object-cover shrink-0\" \n alt=\"\" />\n } @else if (showIcon()) {\n <svg \n [class]=\"'w-5 h-5 shrink-0 ' + iconClasses()\" \n fill=\"currentColor\" \n viewBox=\"0 0 20 20\"\n aria-hidden=\"true\">\n @switch (iconName()) {\n @case ('check-circle') {\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('exclamation-triangle') {\n <path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\" />\n }\n @case ('info-circle') {\n <path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\" />\n }\n }\n </svg>\n }\n \n <!-- Content -->\n <div class=\"flex-1 min-w-0\">\n @if (config().title) {\n <h4 class=\"font-semibold text-sm mb-1\">{{ config().title }}</h4>\n }\n <p class=\"text-sm\">{{ config().message }}</p>\n \n @if (config().actionLabel) {\n <button\n type=\"button\"\n class=\"mt-2 text-sm font-medium underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current rounded\"\n (click)=\"handleAction()\">\n {{ config().actionLabel }}\n </button>\n }\n </div>\n \n <!-- Dismiss Button -->\n @if (config().dismissible) {\n <button\n type=\"button\"\n class=\"shrink-0 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current transition-colors\"\n (click)=\"handleDismiss()\"\n [attr.aria-label]=\"'\u0110\u00F3ng th\u00F4ng b\u00E1o'\">\n <svg class=\"w-4 h-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n </svg>\n </button>\n }\n </div>\n \n <!-- Progress Bar -->\n @if (config().showProgress && (config().duration ?? 0) > 0) {\n <div class=\"absolute bottom-0 inset-x-0 h-0.5 bg-black/5 dark:bg-white/5 pointer-events-none\">\n <div\n class=\"h-full transition-all duration-75 ease-linear rounded-r-full\"\n [class]=\"progressBarClasses()\"\n [style.width.%]=\"progress()\">\n </div>\n </div>\n }\n</div>\n", styles: [".fade-in{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-in-fast{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.slide-down-enter{animation:slideDown var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.slide-down-leave{opacity:0;transform:translateY(-100%);transition:all var(--anim-duration-normal, .3s) cubic-bezier(.4,0,.6,1)}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.toast-slide-enter{animation:toastSlideIn var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1)) forwards}.toast-slide-leave{opacity:0;transform:translate(100%);transition:all .2s cubic-bezier(.4,0,.6,1)}@keyframes toastSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-up{animation:slideInUp var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-down{animation:slideInDown var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-right{animation:slideInRight var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.scale-out{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.menu-scale-enter{animation:menuScaleIn var(--anim-duration-fast, .15s) var(--anim-ease-out, cubic-bezier(0, 0, .2, 1)) forwards}.menu-scale-leave{opacity:0;transform:scale(.85);transition:all .1s cubic-bezier(.4,0,1,1)}@keyframes menuScaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.fade-scale-enter{animation:fadeScaleIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.fade-scale-leave{opacity:0;transform:scale(.95);transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.alert-fade-out{opacity:0;transform:translateY(-8px);transition:all var(--anim-duration-normal, .3s) ease-out}.tooltip-fade-enter{animation:fadeIn var(--anim-duration-fast, .15s) var(--anim-ease-out, ease-out) forwards}.backdrop-enter{animation:fadeIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.backdrop-leave{opacity:0;transition:opacity var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}.expand-enter{animation:expandIn var(--anim-duration-normal, .3s) var(--anim-ease-out, ease-out) forwards}.collapse-leave{overflow:hidden;height:0;opacity:0;transition:all var(--anim-duration-normal, .3s) var(--anim-ease-in, ease-in)}@keyframes expandIn{0%{height:0;opacity:0;overflow:hidden}to{height:auto;opacity:1}}.rotate{transition:transform var(--anim-duration-normal, .3s) var(--anim-ease-in-out, cubic-bezier(.4, 0, .2, 1))}.stagger-delay-1{animation-delay:50ms}.stagger-delay-2{animation-delay:.1s}.stagger-delay-3{animation-delay:.15s}.stagger-delay-4{animation-delay:.2s}.stagger-delay-5{animation-delay:.25s}.anim-forwards{animation-fill-mode:forwards}.anim-backwards{animation-fill-mode:backwards}.anim-both{animation-fill-mode:both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}\n"] }]
|
|
11389
11097
|
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
11390
11098
|
|
|
11391
11099
|
class OlToastContainerComponent {
|