ng-magary 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +63 -0
  2. package/fesm2022/ng-magary.mjs +811 -0
  3. package/fesm2022/ng-magary.mjs.map +1 -0
  4. package/index.d.ts +422 -0
  5. package/index.d.ts.map +1 -0
  6. package/package.json +24 -0
package/fesm2022/ng-magary.mjs ADDED
@@ -0,0 +1,811 @@
1
+ import * as i1 from '@angular/common';
2
+ import { CommonModule } from '@angular/common';
3
+ import * as i0 from '@angular/core';
4
+ import { input, output, computed, Component, NgModule, inject, ElementRef, signal, HostListener, ViewChildren, ViewChild, ContentChildren } from '@angular/core';
5
+ import { FormsModule } from '@angular/forms';
6
+ import * as i2 from '@angular/router';
7
+ import { RouterModule } from '@angular/router';
8
+
9
+ class MagaryButton {
10
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
11
+ icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
12
+ shadow = input(0, ...(ngDevMode ? [{ debugName: "shadow" }] : []));
13
+ rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
14
+ customBackgroundColor = input(...(ngDevMode ? [undefined, { debugName: "customBackgroundColor" }] : []));
15
+ iconPos = input('left', ...(ngDevMode ? [{ debugName: "iconPos" }] : []));
16
+ severity = input(...(ngDevMode ? [undefined, { debugName: "severity" }] : []));
17
+ loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
18
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
19
+ variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
20
+ size = input('normal', ...(ngDevMode ? [{ debugName: "size" }] : []));
21
+ ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
22
+ buttonClick = output();
23
+ isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
24
+ buttonClasses = computed(() => [
25
+ 'p-button',
26
+ `shadow-${this.shadow()}`,
27
+ `p-button-${this.size()}`,
28
+ this.severity() ? `p-button-${this.severity()}` : '',
29
+ this.variant() === 'text' ? 'p-button-text' : '',
30
+ this.variant() === 'outlined' ? 'p-button-outlined' : '',
31
+ this.icon() && !this.label() ? 'p-button-icon-only' : '',
32
+ this.icon() && this.label() && this.iconPos() === 'left'
33
+ ? 'p-button-icon-left'
34
+ : '',
35
+ this.icon() && this.label() && this.iconPos() === 'right'
36
+ ? 'p-button-icon-right'
37
+ : '',
38
+ this.loading() ? 'p-button-loading' : '',
39
+ ].filter(Boolean), ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
40
+ buttonStyles = computed(() => ({
41
+ 'border-radius': this.rounded() ? '22px' : '8px',
42
+ background: this.customBackgroundColor() || undefined,
43
+ }), ...(ngDevMode ? [{ debugName: "buttonStyles" }] : []));
44
+ effectiveAriaLabel = computed(() => this.ariaLabel() || this.label() || 'Button', ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : []));
45
+ onButtonClick(event) {
46
+ if (!this.isDisabled()) {
47
+ this.buttonClick.emit(event);
48
+ }
49
+ }
50
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
51
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryButton, isStandalone: true, selector: "magary-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, customBackgroundColor: { classPropertyName: "customBackgroundColor", publicName: "customBackgroundColor", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [ngStyle]=\"buttonStyles()\"\n [ngClass]=\"buttonClasses()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n (click)=\"onButtonClick($event)\"\n>\n @if (loading()) {\n <span\n class=\"p-button-loading-icon fas fa-spinner fa-spin\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if (icon() && !loading() && iconPos() === \"left\") {\n <span class=\"p-button-icon\" [ngClass]=\"icon()\" aria-hidden=\"true\"> </span>\n }\n @if (label()) {\n <span class=\"p-button-label\">{{ label() }}</span>\n } @else if (!icon()) {\n <span class=\"p-button-label\">&nbsp;</span>\n }\n @if (icon() && !loading() && iconPos() === \"right\") {\n <span class=\"p-button-icon\" [ngClass]=\"icon()\" aria-hidden=\"true\"> </span>\n }\n</button>\n", styles: [".p-button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:6px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;gap:.5rem;background-color:#007bff;color:#fff;min-height:44px;font-size:1rem}.p-button:hover{background-color:#0056b3}.p-button:disabled{opacity:.6;cursor:not-allowed}.p-button.p-button-icon-right{flex-direction:row-reverse}.p-button.p-button-icon-only{padding:10px;min-width:44px}.p-button.p-button-loading{position:relative}.p-button.p-button-loading .p-button-label,.p-button.p-button-loading .p-button-icon{visibility:hidden}.p-button.p-button-loading .p-button-loading-icon{position:absolute;font-size:1.2rem}.p-button.p-button-text{background-color:transparent;border-color:transparent;color:#007bff}.p-button.p-button-text:hover{background-color:#007bff0d}.p-button.p-button-outlined{background-color:transparent;border:2px solid;color:#007bff}.p-button.p-button-outlined:hover{background-color:#007bff;color:#fff}.p-button.p-button-small{padding:.5rem .875rem;font-size:.875rem;min-height:36px;gap:.375rem}.p-button.p-button-small.p-button-icon-only{padding:6px;min-width:36px}.p-button.p-button-normal{padding:.75rem 1.25rem;font-size:1rem;min-height:44px;gap:.5rem}.p-button.p-button-normal.p-button-icon-only{padding:10px;min-width:44px}.p-button.p-button-large{padding:1rem 1.75rem;font-size:1.125rem;min-height:52px;gap:.625rem}.p-button.p-button-large.p-button-icon-only{padding:14px;min-width:52px}@media (max-width: 768px){.p-button.p-button-small{padding:.375rem .75rem;font-size:.8rem;min-height:32px}.p-button.p-button-small.p-button-icon-only{padding:5px;min-width:32px}.p-button.p-button-normal{padding:.625rem 1rem;font-size:.9rem;min-height:40px}.p-button.p-button-normal.p-button-icon-only{padding:8px;min-width:40px}.p-button.p-button-large{padding:.875rem 1.5rem;font-size:1rem;min-height:48px}.p-button.p-button-large.p-button-icon-only{padding:12px;min-width:48px}}@media (max-width: 480px){.p-button.p-button-small{padding:.25rem .625rem;font-size:.75rem;min-height:28px}.p-button.p-button-small.p-button-icon-only{padding:4px;min-width:28px}.p-button.p-button-normal{padding:.5rem .875rem;font-size:.85rem;min-height:36px}.p-button.p-button-normal.p-button-icon-only{padding:6px;min-width:36px}.p-button.p-button-large{padding:.75rem 1.25rem;font-size:.95rem;min-height:44px}.p-button.p-button-large.p-button-icon-only{padding:10px;min-width:44px}}.p-button.p-button-primary{background-color:#020617;color:#fff}.p-button.p-button-primary:hover{background-color:#3b3c3d}.p-button.p-button-text.p-button-primary{background-color:transparent;color:#020617}.p-button.p-button-text.p-button-primary:hover{background-color:#0206171a}.p-button.p-button-outlined.p-button-primary{background-color:transparent;border-color:#020617;color:#020617}.p-button.p-button-outlined.p-button-primary:hover{background-color:#0206171a;color:#020617}.p-button.p-button-secondary{background-color:#d2d3d4;color:#fff}.p-button.p-button-secondary:hover{background-color:#d8dbdd}.p-button.p-button-text.p-button-secondary{background-color:transparent;color:#d2d3d4}.p-button.p-button-text.p-button-secondary:hover{background-color:#d2d3d41a}.p-button.p-button-outlined.p-button-secondary{background-color:transparent;border-color:#d2d3d4;color:#d2d3d4}.p-button.p-button-outlined.p-button-secondary:hover{background-color:#d2d3d41a;color:#d2d3d4}.p-button.p-button-success{background-color:#22c55e;color:#fff}.p-button.p-button-success:hover{background-color:#54cc80}.p-button.p-button-text.p-button-success{background-color:transparent;color:#22c55e}.p-button.p-button-text.p-button-success:hover{background-color:#22c55e1a}.p-button.p-button-outlined.p-button-success{background-color:transparent;border-color:#22c55e;color:#22c55e}.p-button.p-button-outlined.p-button-success:hover{background-color:#22c55e1a;color:#22c55e}.p-button.p-button-danger{background-color:#ef4444;color:#fff}.p-button.p-button-danger:hover{background-color:#ce3c3c}.p-button.p-button-text.p-button-danger{background-color:transparent;color:#ef4444}.p-button.p-button-text.p-button-danger:hover{background-color:#ef44441a}.p-button.p-button-outlined.p-button-danger{background-color:transparent;border-color:#ef4444;color:#ef4444}.p-button.p-button-outlined.p-button-danger:hover{background-color:#ef44441a;color:#ef4444}.p-button.p-button-info{background-color:#0ea5e9;color:#fff}.p-button.p-button-info:hover{background-color:#3d97c0}.p-button.p-button-text.p-button-info{background-color:transparent;color:#0ea5e9}.p-button.p-button-text.p-button-info:hover{background-color:#0ea5e91a}.p-button.p-button-outlined.p-button-info{background-color:transparent;border-color:#0ea5e9;color:#0ea5e9}.p-button.p-button-outlined.p-button-info:hover{background-color:#0ea5e91a;color:#0ea5e9}.p-button.p-button-warning{background-color:#e7c52d;color:#fff}.p-button.p-button-warning:hover{background-color:#c4aa3a}.p-button.p-button-text.p-button-warning{background-color:transparent;color:#e7c52d}.p-button.p-button-text.p-button-warning:hover{background-color:#e7c52d1a}.p-button.p-button-outlined.p-button-warning{background-color:transparent;border-color:#e7c52d;color:#e7c52d}.p-button.p-button-outlined.p-button-warning:hover{background-color:#e7c52d1a;color:#e7c52d}.p-button.p-button-help{background-color:#a855f7;color:#fff}.p-button.p-button-help:hover{background-color:#854dbd}.p-button.p-button-text.p-button-help{background-color:transparent;color:#a855f7}.p-button.p-button-text.p-button-help:hover{background-color:#a855f71a}.p-button.p-button-outlined.p-button-help{background-color:transparent;border-color:#a855f7;color:#a855f7}.p-button.p-button-outlined.p-button-help:hover{background-color:#a855f71a;color:#a855f7}.pi-spin{animation:pi-spin 1s linear infinite}@keyframes pi-spin{to{transform:rotate(360deg)}}.shadow-1{box-shadow:0 4px 6px #00000026}.shadow-2{box-shadow:0 6px 8px #0003}.shadow-3{box-shadow:0 8px 10px #00000040}.shadow-4{box-shadow:0 10px 12px #0000004d}.shadow-5{box-shadow:0 12px 14px #00000059}.shadow-6{box-shadow:0 14px 16px #0006}.shadow-7{box-shadow:0 16px 18px #00000073}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
52
+ }
53
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryButton, decorators: [{
54
+ type: Component,
55
+ args: [{ selector: 'magary-button', imports: [CommonModule], template: "<button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [ngStyle]=\"buttonStyles()\"\n [ngClass]=\"buttonClasses()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n (click)=\"onButtonClick($event)\"\n>\n @if (loading()) {\n <span\n class=\"p-button-loading-icon fas fa-spinner fa-spin\"\n aria-hidden=\"true\"\n >\n </span>\n }\n @if (icon() && !loading() && iconPos() === \"left\") {\n <span class=\"p-button-icon\" [ngClass]=\"icon()\" aria-hidden=\"true\"> </span>\n }\n @if (label()) {\n <span class=\"p-button-label\">{{ label() }}</span>\n } @else if (!icon()) {\n <span class=\"p-button-label\">&nbsp;</span>\n }\n @if (icon() && !loading() && iconPos() === \"right\") {\n <span class=\"p-button-icon\" [ngClass]=\"icon()\" aria-hidden=\"true\"> </span>\n }\n</button>\n", styles: [".p-button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:6px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;gap:.5rem;background-color:#007bff;color:#fff;min-height:44px;font-size:1rem}.p-button:hover{background-color:#0056b3}.p-button:disabled{opacity:.6;cursor:not-allowed}.p-button.p-button-icon-right{flex-direction:row-reverse}.p-button.p-button-icon-only{padding:10px;min-width:44px}.p-button.p-button-loading{position:relative}.p-button.p-button-loading .p-button-label,.p-button.p-button-loading .p-button-icon{visibility:hidden}.p-button.p-button-loading .p-button-loading-icon{position:absolute;font-size:1.2rem}.p-button.p-button-text{background-color:transparent;border-color:transparent;color:#007bff}.p-button.p-button-text:hover{background-color:#007bff0d}.p-button.p-button-outlined{background-color:transparent;border:2px solid;color:#007bff}.p-button.p-button-outlined:hover{background-color:#007bff;color:#fff}.p-button.p-button-small{padding:.5rem .875rem;font-size:.875rem;min-height:36px;gap:.375rem}.p-button.p-button-small.p-button-icon-only{padding:6px;min-width:36px}.p-button.p-button-normal{padding:.75rem 1.25rem;font-size:1rem;min-height:44px;gap:.5rem}.p-button.p-button-normal.p-button-icon-only{padding:10px;min-width:44px}.p-button.p-button-large{padding:1rem 1.75rem;font-size:1.125rem;min-height:52px;gap:.625rem}.p-button.p-button-large.p-button-icon-only{padding:14px;min-width:52px}@media (max-width: 768px){.p-button.p-button-small{padding:.375rem .75rem;font-size:.8rem;min-height:32px}.p-button.p-button-small.p-button-icon-only{padding:5px;min-width:32px}.p-button.p-button-normal{padding:.625rem 1rem;font-size:.9rem;min-height:40px}.p-button.p-button-normal.p-button-icon-only{padding:8px;min-width:40px}.p-button.p-button-large{padding:.875rem 1.5rem;font-size:1rem;min-height:48px}.p-button.p-button-large.p-button-icon-only{padding:12px;min-width:48px}}@media (max-width: 480px){.p-button.p-button-small{padding:.25rem .625rem;font-size:.75rem;min-height:28px}.p-button.p-button-small.p-button-icon-only{padding:4px;min-width:28px}.p-button.p-button-normal{padding:.5rem .875rem;font-size:.85rem;min-height:36px}.p-button.p-button-normal.p-button-icon-only{padding:6px;min-width:36px}.p-button.p-button-large{padding:.75rem 1.25rem;font-size:.95rem;min-height:44px}.p-button.p-button-large.p-button-icon-only{padding:10px;min-width:44px}}.p-button.p-button-primary{background-color:#020617;color:#fff}.p-button.p-button-primary:hover{background-color:#3b3c3d}.p-button.p-button-text.p-button-primary{background-color:transparent;color:#020617}.p-button.p-button-text.p-button-primary:hover{background-color:#0206171a}.p-button.p-button-outlined.p-button-primary{background-color:transparent;border-color:#020617;color:#020617}.p-button.p-button-outlined.p-button-primary:hover{background-color:#0206171a;color:#020617}.p-button.p-button-secondary{background-color:#d2d3d4;color:#fff}.p-button.p-button-secondary:hover{background-color:#d8dbdd}.p-button.p-button-text.p-button-secondary{background-color:transparent;color:#d2d3d4}.p-button.p-button-text.p-button-secondary:hover{background-color:#d2d3d41a}.p-button.p-button-outlined.p-button-secondary{background-color:transparent;border-color:#d2d3d4;color:#d2d3d4}.p-button.p-button-outlined.p-button-secondary:hover{background-color:#d2d3d41a;color:#d2d3d4}.p-button.p-button-success{background-color:#22c55e;color:#fff}.p-button.p-button-success:hover{background-color:#54cc80}.p-button.p-button-text.p-button-success{background-color:transparent;color:#22c55e}.p-button.p-button-text.p-button-success:hover{background-color:#22c55e1a}.p-button.p-button-outlined.p-button-success{background-color:transparent;border-color:#22c55e;color:#22c55e}.p-button.p-button-outlined.p-button-success:hover{background-color:#22c55e1a;color:#22c55e}.p-button.p-button-danger{background-color:#ef4444;color:#fff}.p-button.p-button-danger:hover{background-color:#ce3c3c}.p-button.p-button-text.p-button-danger{background-color:transparent;color:#ef4444}.p-button.p-button-text.p-button-danger:hover{background-color:#ef44441a}.p-button.p-button-outlined.p-button-danger{background-color:transparent;border-color:#ef4444;color:#ef4444}.p-button.p-button-outlined.p-button-danger:hover{background-color:#ef44441a;color:#ef4444}.p-button.p-button-info{background-color:#0ea5e9;color:#fff}.p-button.p-button-info:hover{background-color:#3d97c0}.p-button.p-button-text.p-button-info{background-color:transparent;color:#0ea5e9}.p-button.p-button-text.p-button-info:hover{background-color:#0ea5e91a}.p-button.p-button-outlined.p-button-info{background-color:transparent;border-color:#0ea5e9;color:#0ea5e9}.p-button.p-button-outlined.p-button-info:hover{background-color:#0ea5e91a;color:#0ea5e9}.p-button.p-button-warning{background-color:#e7c52d;color:#fff}.p-button.p-button-warning:hover{background-color:#c4aa3a}.p-button.p-button-text.p-button-warning{background-color:transparent;color:#e7c52d}.p-button.p-button-text.p-button-warning:hover{background-color:#e7c52d1a}.p-button.p-button-outlined.p-button-warning{background-color:transparent;border-color:#e7c52d;color:#e7c52d}.p-button.p-button-outlined.p-button-warning:hover{background-color:#e7c52d1a;color:#e7c52d}.p-button.p-button-help{background-color:#a855f7;color:#fff}.p-button.p-button-help:hover{background-color:#854dbd}.p-button.p-button-text.p-button-help{background-color:transparent;color:#a855f7}.p-button.p-button-text.p-button-help:hover{background-color:#a855f71a}.p-button.p-button-outlined.p-button-help{background-color:transparent;border-color:#a855f7;color:#a855f7}.p-button.p-button-outlined.p-button-help:hover{background-color:#a855f71a;color:#a855f7}.pi-spin{animation:pi-spin 1s linear infinite}@keyframes pi-spin{to{transform:rotate(360deg)}}.shadow-1{box-shadow:0 4px 6px #00000026}.shadow-2{box-shadow:0 6px 8px #0003}.shadow-3{box-shadow:0 8px 10px #00000040}.shadow-4{box-shadow:0 10px 12px #0000004d}.shadow-5{box-shadow:0 12px 14px #00000059}.shadow-6{box-shadow:0 14px 16px #0006}.shadow-7{box-shadow:0 16px 18px #00000073}\n"] }]
56
+ }] });
57
+
58
+ class ButtonModule {
59
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
60
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, MagaryButton], exports: [MagaryButton] });
61
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonModule, imports: [CommonModule, MagaryButton] });
62
+ }
63
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ButtonModule, decorators: [{
64
+ type: NgModule,
65
+ args: [{
66
+ declarations: [],
67
+ imports: [CommonModule, MagaryButton],
68
+ exports: [MagaryButton],
69
+ }]
70
+ }] });
71
+
72
+ class MagarySpeedDial {
73
+ elementRef = inject(ElementRef);
74
+ items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
75
+ icon = input('fas fa-plus', ...(ngDevMode ? [{ debugName: "icon" }] : []));
76
+ activeIcon = input('fas fa-times', ...(ngDevMode ? [{ debugName: "activeIcon" }] : []));
77
+ type = input('linear', ...(ngDevMode ? [{ debugName: "type" }] : []));
78
+ direction = input(...(ngDevMode ? [undefined, { debugName: "direction" }] : []));
79
+ radius = input(80, ...(ngDevMode ? [{ debugName: "radius" }] : []));
80
+ showMask = input(false, ...(ngDevMode ? [{ debugName: "showMask" }] : []));
81
+ background = input('#007bff', ...(ngDevMode ? [{ debugName: "background" }] : []));
82
+ ariaLabel = input('Speed dial menu', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
83
+ isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
84
+ speedDialToggle = output();
85
+ itemSelect = output();
86
+ itemCount = computed(() => this.items().length, ...(ngDevMode ? [{ debugName: "itemCount" }] : []));
87
+ containerClasses = computed(() => [
88
+ 'speed-dial-container',
89
+ this.isOpen() ? 'is-open' : '',
90
+ `type-${this.type()}`,
91
+ this.direction() ? `direction-${this.direction()}` : '',
92
+ ].filter(Boolean), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
93
+ triggerStyles = computed(() => ({
94
+ '--trigger-bg': this.background(),
95
+ }), ...(ngDevMode ? [{ debugName: "triggerStyles" }] : []));
96
+ itemsStyles = computed(() => ({
97
+ '--item-count': this.itemCount().toString(),
98
+ '--radius': `${this.radius()}px`,
99
+ }), ...(ngDevMode ? [{ debugName: "itemsStyles" }] : []));
100
+ currentIcon = computed(() => this.isOpen() ? this.activeIcon() : this.icon(), ...(ngDevMode ? [{ debugName: "currentIcon" }] : []));
101
+ toggleSpeedDial(event) {
102
+ event.stopPropagation();
103
+ const newState = !this.isOpen();
104
+ this.isOpen.set(newState);
105
+ this.speedDialToggle.emit(newState);
106
+ }
107
+ onItemClick(event, item) {
108
+ event.stopPropagation();
109
+ if (item.disabled) {
110
+ return;
111
+ }
112
+ this.itemSelect.emit({ item, event });
113
+ if (item.command) {
114
+ item.command(event);
115
+ }
116
+ this.isOpen.set(false);
117
+ this.speedDialToggle.emit(false);
118
+ }
119
+ closeMask() {
120
+ this.isOpen.set(false);
121
+ this.speedDialToggle.emit(false);
122
+ }
123
+ trackByItem(index, item) {
124
+ return item.id || `${item.icon}-${index}`;
125
+ }
126
+ onDocumentClick(event) {
127
+ if (!this.isOpen()) {
128
+ return;
129
+ }
130
+ const target = event.target;
131
+ const componentElement = this.elementRef.nativeElement;
132
+ if (!componentElement.contains(target)) {
133
+ this.isOpen.set(false);
134
+ this.speedDialToggle.emit(false);
135
+ }
136
+ }
137
+ onEscapeKeydown() {
138
+ if (this.isOpen()) {
139
+ this.isOpen.set(false);
140
+ this.speedDialToggle.emit(false);
141
+ }
142
+ }
143
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagarySpeedDial, deps: [], target: i0.ɵɵFactoryTarget.Component });
144
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagarySpeedDial, isStandalone: true, selector: "magary-speed-dial", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, activeIcon: { classPropertyName: "activeIcon", publicName: "activeIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, showMask: { classPropertyName: "showMask", publicName: "showMask", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { speedDialToggle: "speedDialToggle", itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKeydown()" } }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"triggerStyles()\">\n @if (showMask() && isOpen()) {\n <div class=\"speed-dial-mask\" (click)=\"closeMask()\" aria-hidden=\"true\"></div>\n }\n <ul\n class=\"speed-dial-items\"\n [attr.data-direction]=\"direction()\"\n [ngStyle]=\"itemsStyles()\"\n role=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <li\n [style.--i]=\"$index\"\n [style.--radius.px]=\"radius()\"\n [style.transition-delay]=\"isOpen() ? $index * 50 + 'ms' : '0ms'\"\n [class]=\"'item-' + type()\"\n role=\"presentation\"\n >\n @if (item.tooltip) {\n <div\n class=\"action-tooltip\"\n role=\"tooltip\"\n [attr.id]=\"'tooltip-' + $index\"\n >\n {{ item.tooltip }}\n </div>\n }\n <button\n type=\"button\"\n class=\"action-button\"\n role=\"menuitem\"\n [disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n item.ariaLabel || item.tooltip || 'Speed dial action'\n \"\n [attr.aria-describedby]=\"item.tooltip ? 'tooltip-' + $index : null\"\n [style.background-color]=\"item.backgroundColor\"\n (click)=\"onItemClick($event, item)\"\n >\n <i [ngClass]=\"item.icon\" aria-hidden=\"true\"> </i>\n </button>\n </li>\n }\n </ul>\n <button\n type=\"button\"\n class=\"trigger-button\"\n [attr.aria-label]=\"ariaLabel() + (isOpen() ? ' - Cerrar' : ' - Abrir')\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleSpeedDial($event)\"\n >\n <i [ngClass]=\"currentIcon()\" aria-hidden=\"true\"> </i>\n </button>\n</div>\n", styles: [":host{--speed-dial-trigger-size: 56px;--speed-dial-item-size: 40px;--speed-dial-item-gap: 55px;--speed-dial-transition: .3s ease;--speed-dial-shadow: 0 4px 12px rgba(0, 0, 0, .3);--speed-dial-shadow-item: 0 2px 8px rgba(0, 0, 0, .2);--speed-dial-mask-bg: rgba(0, 0, 0, .4);background:transparent;display:inline-block}.speed-dial-container{position:relative;display:inline-block;background:transparent}.speed-dial-container.is-open .trigger-button{transform:rotate(45deg)}.trigger-button{width:var(--speed-dial-trigger-size);height:var(--speed-dial-trigger-size);border-radius:50%;background-color:var(--trigger-bg, #007bff);color:#fff;border:none;box-shadow:var(--speed-dial-shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;z-index:1001;transition:transform var(--speed-dial-transition),box-shadow var(--speed-dial-transition);min-height:44px}.trigger-button:hover{box-shadow:0 6px 16px #0006}.trigger-button:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.speed-dial-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--speed-dial-mask-bg);z-index:999;cursor:pointer}.speed-dial-items{list-style:none;padding:0;margin:0;position:absolute;top:20%;left:16%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none}.speed-dial-items li{position:absolute;top:0;left:0;transform-origin:center;transition:transform var(--speed-dial-transition),opacity var(--speed-dial-transition);opacity:0}.speed-dial-items .action-button{width:var(--speed-dial-item-size);height:var(--speed-dial-item-size);border-radius:50%;background-color:#6c757d;color:#fff;border:none;box-shadow:var(--speed-dial-shadow-item);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background-color .2s,transform .2s;min-height:44px;min-width:44px}.speed-dial-items .action-button:hover:not(:disabled){background-color:#5a6268;transform:scale(1.1)}.speed-dial-items .action-button:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.speed-dial-items .action-button:disabled{opacity:.4;cursor:not-allowed;background-color:#adb5bd}.speed-dial-items .action-button:disabled:hover{transform:none;background-color:#adb5bd}.speed-dial-items .action-tooltip{position:absolute;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:.8rem;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;right:120%;top:50%;transform:translateY(-50%);z-index:1002}.speed-dial-items .action-tooltip:after{content:\"\";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left-color:#333}.speed-dial-items li:hover .action-tooltip{opacity:1}.is-open .speed-dial-items{pointer-events:auto}.is-open .speed-dial-items li{opacity:1}.is-open .speed-dial-items[data-direction=up] li{transform:translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1))}.is-open .speed-dial-items[data-direction=down] li{transform:translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1)))}.is-open .speed-dial-items[data-direction=left] li{transform:translate(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1))}.is-open .speed-dial-items[data-direction=right] li{transform:translate(calc(var(--speed-dial-item-gap) * (var(--i) + 1)))}.is-open .speed-dial-items .item-circle{--angle: calc(var(--i) * (360deg / var(--item-count)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=left] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) - 180deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) - 180deg) * -1))}.is-open .speed-dial-items[data-direction=right] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=down] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 90deg) * -1))}.is-open .speed-dial-items[data-direction=up] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) - 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) - 90deg) * -1))}.is-open .speed-dial-items[data-direction=up-right] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=down-right] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 90deg) * -1))}.is-open .speed-dial-items[data-direction=down-left] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 180deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 180deg) * -1))}.is-open .speed-dial-items[data-direction=up-left] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 270deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 270deg) * -1))}@media (max-width: 768px){:host{--speed-dial-trigger-size: 52px;--speed-dial-item-size: 36px;--speed-dial-item-gap: 48px}.trigger-button{font-size:1.25rem}.speed-dial-items .action-button{font-size:.9rem}.speed-dial-items .action-tooltip{font-size:.75rem;padding:3px 6px}}@media (max-width: 480px){:host{--speed-dial-trigger-size: 48px;--speed-dial-item-size: 32px;--speed-dial-item-gap: 44px}.trigger-button{font-size:1.1rem}.speed-dial-items .action-button{font-size:.8rem}.speed-dial-items .action-tooltip{font-size:.7rem;padding:2px 4px}}@media (min-width: 1200px){.speed-dial-items .action-tooltip{font-size:.85rem;padding:6px 10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
145
+ }
146
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagarySpeedDial, decorators: [{
147
+ type: Component,
148
+ args: [{ selector: 'magary-speed-dial', imports: [CommonModule], template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"triggerStyles()\">\n @if (showMask() && isOpen()) {\n <div class=\"speed-dial-mask\" (click)=\"closeMask()\" aria-hidden=\"true\"></div>\n }\n <ul\n class=\"speed-dial-items\"\n [attr.data-direction]=\"direction()\"\n [ngStyle]=\"itemsStyles()\"\n role=\"menu\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (item of items(); track trackByItem($index, item)) {\n <li\n [style.--i]=\"$index\"\n [style.--radius.px]=\"radius()\"\n [style.transition-delay]=\"isOpen() ? $index * 50 + 'ms' : '0ms'\"\n [class]=\"'item-' + type()\"\n role=\"presentation\"\n >\n @if (item.tooltip) {\n <div\n class=\"action-tooltip\"\n role=\"tooltip\"\n [attr.id]=\"'tooltip-' + $index\"\n >\n {{ item.tooltip }}\n </div>\n }\n <button\n type=\"button\"\n class=\"action-button\"\n role=\"menuitem\"\n [disabled]=\"item.disabled\"\n [attr.aria-label]=\"\n item.ariaLabel || item.tooltip || 'Speed dial action'\n \"\n [attr.aria-describedby]=\"item.tooltip ? 'tooltip-' + $index : null\"\n [style.background-color]=\"item.backgroundColor\"\n (click)=\"onItemClick($event, item)\"\n >\n <i [ngClass]=\"item.icon\" aria-hidden=\"true\"> </i>\n </button>\n </li>\n }\n </ul>\n <button\n type=\"button\"\n class=\"trigger-button\"\n [attr.aria-label]=\"ariaLabel() + (isOpen() ? ' - Cerrar' : ' - Abrir')\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'menu'\"\n (click)=\"toggleSpeedDial($event)\"\n >\n <i [ngClass]=\"currentIcon()\" aria-hidden=\"true\"> </i>\n </button>\n</div>\n", styles: [":host{--speed-dial-trigger-size: 56px;--speed-dial-item-size: 40px;--speed-dial-item-gap: 55px;--speed-dial-transition: .3s ease;--speed-dial-shadow: 0 4px 12px rgba(0, 0, 0, .3);--speed-dial-shadow-item: 0 2px 8px rgba(0, 0, 0, .2);--speed-dial-mask-bg: rgba(0, 0, 0, .4);background:transparent;display:inline-block}.speed-dial-container{position:relative;display:inline-block;background:transparent}.speed-dial-container.is-open .trigger-button{transform:rotate(45deg)}.trigger-button{width:var(--speed-dial-trigger-size);height:var(--speed-dial-trigger-size);border-radius:50%;background-color:var(--trigger-bg, #007bff);color:#fff;border:none;box-shadow:var(--speed-dial-shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;z-index:1001;transition:transform var(--speed-dial-transition),box-shadow var(--speed-dial-transition);min-height:44px}.trigger-button:hover{box-shadow:0 6px 16px #0006}.trigger-button:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.speed-dial-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--speed-dial-mask-bg);z-index:999;cursor:pointer}.speed-dial-items{list-style:none;padding:0;margin:0;position:absolute;top:20%;left:16%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none}.speed-dial-items li{position:absolute;top:0;left:0;transform-origin:center;transition:transform var(--speed-dial-transition),opacity var(--speed-dial-transition);opacity:0}.speed-dial-items .action-button{width:var(--speed-dial-item-size);height:var(--speed-dial-item-size);border-radius:50%;background-color:#6c757d;color:#fff;border:none;box-shadow:var(--speed-dial-shadow-item);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background-color .2s,transform .2s;min-height:44px;min-width:44px}.speed-dial-items .action-button:hover:not(:disabled){background-color:#5a6268;transform:scale(1.1)}.speed-dial-items .action-button:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.speed-dial-items .action-button:disabled{opacity:.4;cursor:not-allowed;background-color:#adb5bd}.speed-dial-items .action-button:disabled:hover{transform:none;background-color:#adb5bd}.speed-dial-items .action-tooltip{position:absolute;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:.8rem;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;right:120%;top:50%;transform:translateY(-50%);z-index:1002}.speed-dial-items .action-tooltip:after{content:\"\";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left-color:#333}.speed-dial-items li:hover .action-tooltip{opacity:1}.is-open .speed-dial-items{pointer-events:auto}.is-open .speed-dial-items li{opacity:1}.is-open .speed-dial-items[data-direction=up] li{transform:translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1))}.is-open .speed-dial-items[data-direction=down] li{transform:translateY(calc(var(--speed-dial-item-gap) * (var(--i) + 1)))}.is-open .speed-dial-items[data-direction=left] li{transform:translate(calc(var(--speed-dial-item-gap) * (var(--i) + 1) * -1))}.is-open .speed-dial-items[data-direction=right] li{transform:translate(calc(var(--speed-dial-item-gap) * (var(--i) + 1)))}.is-open .speed-dial-items .item-circle{--angle: calc(var(--i) * (360deg / var(--item-count)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=left] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) - 180deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) - 180deg) * -1))}.is-open .speed-dial-items[data-direction=right] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=down] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 90deg) * -1))}.is-open .speed-dial-items[data-direction=up] .item-semicircle{--angle: calc(var(--i) * (180deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) - 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) - 90deg) * -1))}.is-open .speed-dial-items[data-direction=up-right] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.is-open .speed-dial-items[data-direction=down-right] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 90deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 90deg) * -1))}.is-open .speed-dial-items[data-direction=down-left] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 180deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 180deg) * -1))}.is-open .speed-dial-items[data-direction=up-left] .item-quartercircle{--angle: calc(var(--i) * (90deg / (var(--item-count) - 1)));transform:rotate(calc(var(--angle) + 270deg)) translateY(calc(var(--radius) * -1)) rotate(calc((var(--angle) + 270deg) * -1))}@media (max-width: 768px){:host{--speed-dial-trigger-size: 52px;--speed-dial-item-size: 36px;--speed-dial-item-gap: 48px}.trigger-button{font-size:1.25rem}.speed-dial-items .action-button{font-size:.9rem}.speed-dial-items .action-tooltip{font-size:.75rem;padding:3px 6px}}@media (max-width: 480px){:host{--speed-dial-trigger-size: 48px;--speed-dial-item-size: 32px;--speed-dial-item-gap: 44px}.trigger-button{font-size:1.1rem}.speed-dial-items .action-button{font-size:.8rem}.speed-dial-items .action-tooltip{font-size:.7rem;padding:2px 4px}}@media (min-width: 1200px){.speed-dial-items .action-tooltip{font-size:.85rem;padding:6px 10px}}\n"] }]
149
+ }], propDecorators: { onDocumentClick: [{
150
+ type: HostListener,
151
+ args: ['document:click', ['$event']]
152
+ }], onEscapeKeydown: [{
153
+ type: HostListener,
154
+ args: ['document:keydown.escape']
155
+ }] } });
156
+
157
+ class SpeedDialModule {
158
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SpeedDialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
159
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: SpeedDialModule, imports: [CommonModule, MagarySpeedDial], exports: [MagarySpeedDial] });
160
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SpeedDialModule, imports: [CommonModule, MagarySpeedDial] });
161
+ }
162
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SpeedDialModule, decorators: [{
163
+ type: NgModule,
164
+ args: [{
165
+ imports: [CommonModule, MagarySpeedDial],
166
+ exports: [MagarySpeedDial],
167
+ }]
168
+ }] });
169
+
170
+ class CascadeSelect {
171
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
172
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: CascadeSelect, isStandalone: true, selector: "lib-cascade-select", ngImport: i0, template: "<p>cascade-select works!</p>\n", styles: [""] });
173
+ }
174
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelect, decorators: [{
175
+ type: Component,
176
+ args: [{ selector: 'lib-cascade-select', imports: [], template: "<p>cascade-select works!</p>\n" }]
177
+ }] });
178
+
179
+ class CascadeSelectModule {
180
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
181
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, CascadeSelect], exports: [CascadeSelect] });
182
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule] });
183
+ }
184
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CascadeSelectModule, decorators: [{
185
+ type: NgModule,
186
+ args: [{
187
+ imports: [CommonModule, CascadeSelect],
188
+ exports: [CascadeSelect],
189
+ }]
190
+ }] });
191
+
192
+ class MagaryInput {
193
+ value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
194
+ placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
195
+ type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
196
+ size = input('normal', ...(ngDevMode ? [{ debugName: "size" }] : []));
197
+ variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : []));
198
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
199
+ readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
200
+ required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
201
+ loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
202
+ error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
203
+ success = input(false, ...(ngDevMode ? [{ debugName: "success" }] : []));
204
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
205
+ helpText = input('', ...(ngDevMode ? [{ debugName: "helpText" }] : []));
206
+ prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
207
+ suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
208
+ width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
209
+ maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
210
+ valueChange = output();
211
+ inputFocus = output();
212
+ inputBlur = output();
213
+ iconClick = output();
214
+ focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
215
+ showPassword = signal(false, ...(ngDevMode ? [{ debugName: "showPassword" }] : []));
216
+ uniqueId = `magary-input-${Math.random().toString(36).substr(2, 9)}`;
217
+ inputClasses = computed(() => {
218
+ const classes = ['magary-input-field'];
219
+ classes.push(`input-${this.variant()}`);
220
+ classes.push(`input-${this.size()}`);
221
+ if (this.disabled())
222
+ classes.push('input-disabled');
223
+ if (this.readonly())
224
+ classes.push('input-readonly');
225
+ if (this.error())
226
+ classes.push('input-error');
227
+ if (this.success())
228
+ classes.push('input-success');
229
+ if (this.focused())
230
+ classes.push('input-focused');
231
+ if (this.loading())
232
+ classes.push('input-loading');
233
+ return classes.join(' ');
234
+ }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
235
+ containerClasses = computed(() => {
236
+ const classes = ['magary-input-container'];
237
+ if (this.label())
238
+ classes.push('has-label');
239
+ if (this.prefixIcon())
240
+ classes.push('has-prefix');
241
+ if (this.suffixIcon() || this.type() === 'password')
242
+ classes.push('has-suffix');
243
+ return classes.join(' ');
244
+ }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
245
+ inputStyles = computed(() => ({
246
+ width: this.width(),
247
+ }), ...(ngDevMode ? [{ debugName: "inputStyles" }] : []));
248
+ actualType = computed(() => {
249
+ if (this.type() === 'password') {
250
+ return this.showPassword() ? 'text' : 'password';
251
+ }
252
+ return this.type();
253
+ }, ...(ngDevMode ? [{ debugName: "actualType" }] : []));
254
+ passwordIcon = computed(() => {
255
+ return this.showPassword() ? 'fas fa-eye-slash' : 'fas fa-eye';
256
+ }, ...(ngDevMode ? [{ debugName: "passwordIcon" }] : []));
257
+ onInput(event) {
258
+ const target = event.target;
259
+ this.valueChange.emit(target.value);
260
+ }
261
+ onFocus(event) {
262
+ this.focused.set(true);
263
+ this.inputFocus.emit(event);
264
+ }
265
+ onBlur(event) {
266
+ this.focused.set(false);
267
+ this.inputBlur.emit(event);
268
+ }
269
+ onPrefixIconClick() {
270
+ if (!this.disabled()) {
271
+ this.iconClick.emit('prefix');
272
+ }
273
+ }
274
+ onSuffixIconClick() {
275
+ if (!this.disabled()) {
276
+ this.iconClick.emit('suffix');
277
+ }
278
+ }
279
+ togglePasswordVisibility() {
280
+ if (this.type() === 'password') {
281
+ this.showPassword.set(!this.showPassword());
282
+ }
283
+ }
284
+ getId() {
285
+ return this.uniqueId;
286
+ }
287
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
288
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryInput, isStandalone: true, selector: "magary-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", iconClick: "iconClick" }, ngImport: i0, template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"inputStyles()\">\n @if (label()) {\n <label [for]=\"getId()\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-asterisk\">*</span>\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (prefixIcon()) {\n <i\n [class]=\"prefixIcon()\"\n class=\"prefix-icon\"\n (click)=\"onPrefixIconClick()\"\n [class.clickable]=\"!disabled()\"\n ></i>\n }\n\n <input\n [id]=\"getId()\"\n [ngClass]=\"inputClasses()\"\n [type]=\"actualType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n attr.maxlength=\"{{ maxLength() }}\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n @if (loading()) {\n <i class=\"fas fa-spinner fa-spin suffix-icon loading-icon\"></i>\n } @else if (type() === \"password\") {\n <i\n [class]=\"passwordIcon()\"\n class=\"suffix-icon password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n ></i>\n } @else if (suffixIcon()) {\n <i\n [class]=\"suffixIcon()\"\n class=\"suffix-icon\"\n (click)=\"onSuffixIconClick()\"\n [class.clickable]=\"!disabled()\"\n ></i>\n }\n </div>\n\n @if (error() || helpText()) {\n <div class=\"input-message\">\n @if (error()) {\n <span class=\"error-message\">\n <i class=\"fas fa-exclamation-circle\"></i>\n {{ error() }}\n </span>\n } @else if (helpText()) {\n <span class=\"help-message\">{{ helpText() }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{--input-primary: #007bff;--input-success: #28a745;--input-error: #dc3545;--input-border: #ced4da;--input-bg: #ffffff;--input-text: #495057;--input-placeholder: #6c757d;--input-radius: 6px;--input-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)}.magary-input-container{display:flex;flex-direction:column;gap:6px;font-family:inherit}.input-label{font-weight:500;color:var(--input-text);font-size:.875rem;margin-bottom:2px}.input-label .required-asterisk{color:var(--input-error);margin-left:2px}.input-wrapper{position:relative;display:flex;align-items:center}.magary-input-field{width:100%;border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);color:var(--input-text);font-size:1rem;transition:all .15s ease-in-out;outline:none}.magary-input-field::placeholder{color:var(--input-placeholder)}.magary-input-field:focus{border-color:var(--input-primary);box-shadow:var(--input-shadow)}.magary-input-field.input-small{padding:6px 12px;font-size:.875rem}.magary-input-field.input-normal{padding:8px 16px}.magary-input-field.input-large{padding:12px 20px;font-size:1.125rem}.magary-input-field.input-outlined{border:2px solid var(--input-border);background:var(--input-bg)}.magary-input-field.input-filled{border:none;background:#f8f9fa;border-bottom:2px solid var(--input-border);border-radius:var(--input-radius) var(--input-radius) 0 0}.magary-input-field.input-underlined{border:none;border-bottom:1px solid var(--input-border);border-radius:0;background:transparent}.magary-input-field.input-underlined:focus{border-bottom:2px solid var(--input-primary);box-shadow:none}.magary-input-field.input-error{border-color:var(--input-error)}.magary-input-field.input-error:focus{border-color:var(--input-error);box-shadow:0 0 0 .2rem #dc354540}.magary-input-field.input-success{border-color:var(--input-success)}.magary-input-field.input-success:focus{border-color:var(--input-success);box-shadow:0 0 0 .2rem #28a74540}.magary-input-field.input-disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.6}.magary-input-field.input-readonly{background:#f8f9fa;cursor:default}.has-prefix .magary-input-field{padding-left:40px}.has-suffix .magary-input-field{padding-right:40px}.prefix-icon,.suffix-icon{position:absolute;color:var(--input-placeholder);transition:color .15s ease-in-out}.prefix-icon.clickable,.suffix-icon.clickable{cursor:pointer}.prefix-icon.clickable:hover,.suffix-icon.clickable:hover{color:var(--input-primary)}.prefix-icon{left:12px}.suffix-icon{right:12px}.password-toggle{cursor:pointer}.password-toggle:hover,.loading-icon{color:var(--input-primary)}.input-message{margin-top:4px;font-size:.875rem}.input-message .error-message{color:var(--input-error);display:flex;align-items:center;gap:4px}.input-message .help-message{color:var(--input-placeholder)}@media (max-width: 480px){.magary-input-field{font-size:16px}.input-label{font-size:14px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
289
+ }
290
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryInput, decorators: [{
291
+ type: Component,
292
+ args: [{ selector: 'magary-input', imports: [CommonModule, FormsModule], template: "<div [ngClass]=\"containerClasses()\" [ngStyle]=\"inputStyles()\">\n @if (label()) {\n <label [for]=\"getId()\" class=\"input-label\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-asterisk\">*</span>\n }\n </label>\n }\n\n <div class=\"input-wrapper\">\n @if (prefixIcon()) {\n <i\n [class]=\"prefixIcon()\"\n class=\"prefix-icon\"\n (click)=\"onPrefixIconClick()\"\n [class.clickable]=\"!disabled()\"\n ></i>\n }\n\n <input\n [id]=\"getId()\"\n [ngClass]=\"inputClasses()\"\n [type]=\"actualType()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"required()\"\n attr.maxlength=\"{{ maxLength() }}\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n @if (loading()) {\n <i class=\"fas fa-spinner fa-spin suffix-icon loading-icon\"></i>\n } @else if (type() === \"password\") {\n <i\n [class]=\"passwordIcon()\"\n class=\"suffix-icon password-toggle\"\n (click)=\"togglePasswordVisibility()\"\n ></i>\n } @else if (suffixIcon()) {\n <i\n [class]=\"suffixIcon()\"\n class=\"suffix-icon\"\n (click)=\"onSuffixIconClick()\"\n [class.clickable]=\"!disabled()\"\n ></i>\n }\n </div>\n\n @if (error() || helpText()) {\n <div class=\"input-message\">\n @if (error()) {\n <span class=\"error-message\">\n <i class=\"fas fa-exclamation-circle\"></i>\n {{ error() }}\n </span>\n } @else if (helpText()) {\n <span class=\"help-message\">{{ helpText() }}</span>\n }\n </div>\n }\n</div>\n", styles: [":host{--input-primary: #007bff;--input-success: #28a745;--input-error: #dc3545;--input-border: #ced4da;--input-bg: #ffffff;--input-text: #495057;--input-placeholder: #6c757d;--input-radius: 6px;--input-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)}.magary-input-container{display:flex;flex-direction:column;gap:6px;font-family:inherit}.input-label{font-weight:500;color:var(--input-text);font-size:.875rem;margin-bottom:2px}.input-label .required-asterisk{color:var(--input-error);margin-left:2px}.input-wrapper{position:relative;display:flex;align-items:center}.magary-input-field{width:100%;border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);color:var(--input-text);font-size:1rem;transition:all .15s ease-in-out;outline:none}.magary-input-field::placeholder{color:var(--input-placeholder)}.magary-input-field:focus{border-color:var(--input-primary);box-shadow:var(--input-shadow)}.magary-input-field.input-small{padding:6px 12px;font-size:.875rem}.magary-input-field.input-normal{padding:8px 16px}.magary-input-field.input-large{padding:12px 20px;font-size:1.125rem}.magary-input-field.input-outlined{border:2px solid var(--input-border);background:var(--input-bg)}.magary-input-field.input-filled{border:none;background:#f8f9fa;border-bottom:2px solid var(--input-border);border-radius:var(--input-radius) var(--input-radius) 0 0}.magary-input-field.input-underlined{border:none;border-bottom:1px solid var(--input-border);border-radius:0;background:transparent}.magary-input-field.input-underlined:focus{border-bottom:2px solid var(--input-primary);box-shadow:none}.magary-input-field.input-error{border-color:var(--input-error)}.magary-input-field.input-error:focus{border-color:var(--input-error);box-shadow:0 0 0 .2rem #dc354540}.magary-input-field.input-success{border-color:var(--input-success)}.magary-input-field.input-success:focus{border-color:var(--input-success);box-shadow:0 0 0 .2rem #28a74540}.magary-input-field.input-disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.6}.magary-input-field.input-readonly{background:#f8f9fa;cursor:default}.has-prefix .magary-input-field{padding-left:40px}.has-suffix .magary-input-field{padding-right:40px}.prefix-icon,.suffix-icon{position:absolute;color:var(--input-placeholder);transition:color .15s ease-in-out}.prefix-icon.clickable,.suffix-icon.clickable{cursor:pointer}.prefix-icon.clickable:hover,.suffix-icon.clickable:hover{color:var(--input-primary)}.prefix-icon{left:12px}.suffix-icon{right:12px}.password-toggle{cursor:pointer}.password-toggle:hover,.loading-icon{color:var(--input-primary)}.input-message{margin-top:4px;font-size:.875rem}.input-message .error-message{color:var(--input-error);display:flex;align-items:center;gap:4px}.input-message .help-message{color:var(--input-placeholder)}@media (max-width: 480px){.magary-input-field{font-size:16px}.input-label{font-size:14px}}\n"] }]
293
+ }] });
294
+
295
+ class InputModule {
296
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
297
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: InputModule, imports: [CommonModule, MagaryInput], exports: [MagaryInput] });
298
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputModule, imports: [CommonModule, MagaryInput] });
299
+ }
300
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputModule, decorators: [{
301
+ type: NgModule,
302
+ args: [{
303
+ imports: [CommonModule, MagaryInput],
304
+ exports: [MagaryInput],
305
+ }]
306
+ }] });
307
+
308
+ class MagaryPanelmenu {
309
+ title = input('Panel Menu', ...(ngDevMode ? [{ debugName: "title" }] : []));
310
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
311
+ backgroundColor = input('#f9fafb', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
312
+ textColor = input('#1f2937', ...(ngDevMode ? [{ debugName: "textColor" }] : []));
313
+ borderRadius = input('8px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
314
+ shadow = input(0, ...(ngDevMode ? [{ debugName: "shadow" }] : []));
315
+ width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
316
+ hoverColor = input('#007bff', ...(ngDevMode ? [{ debugName: "hoverColor" }] : []));
317
+ allowMultipleExpanded = input(false, ...(ngDevMode ? [{ debugName: "allowMultipleExpanded" }] : []));
318
+ defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen" }] : []));
319
+ menuToggle = output();
320
+ itemClick = output();
321
+ itemExpand = output();
322
+ isOpen = signal(this.defaultOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
323
+ hoveredItem = signal(null, ...(ngDevMode ? [{ debugName: "hoveredItem" }] : []));
324
+ hoveredHeader = signal(false, ...(ngDevMode ? [{ debugName: "hoveredHeader" }] : []));
325
+ expandedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedItems" }] : []));
326
+ panelStyles = computed(() => ({
327
+ '--panel-bg': this.backgroundColor(),
328
+ '--panel-text': this.textColor(),
329
+ '--panel-hover': this.hoverColor(),
330
+ '--panel-radius': this.borderRadius(),
331
+ width: this.width(),
332
+ }), ...(ngDevMode ? [{ debugName: "panelStyles" }] : []));
333
+ constructor() {
334
+ if (this.defaultOpen()) {
335
+ this.isOpen.set(true);
336
+ }
337
+ }
338
+ toggle() {
339
+ const newOpenState = !this.isOpen();
340
+ this.isOpen.set(newOpenState);
341
+ this.menuToggle.emit({
342
+ isOpen: newOpenState,
343
+ menuTitle: this.title(),
344
+ });
345
+ }
346
+ toggleSubItem(itemKey, item) {
347
+ this.expandedItems.update((expanded) => {
348
+ const newSet = new Set(expanded);
349
+ if (!this.allowMultipleExpanded() && !newSet.has(itemKey)) {
350
+ const currentLevel = itemKey.split('/').length;
351
+ for (const key of newSet) {
352
+ if (key.split('/').length === currentLevel) {
353
+ newSet.delete(key);
354
+ }
355
+ }
356
+ }
357
+ const wasExpanded = newSet.has(itemKey);
358
+ if (wasExpanded) {
359
+ newSet.delete(itemKey);
360
+ for (const key of newSet) {
361
+ if (key.startsWith(itemKey + '/')) {
362
+ newSet.delete(key);
363
+ }
364
+ }
365
+ }
366
+ else {
367
+ newSet.add(itemKey);
368
+ }
369
+ if (item) {
370
+ this.itemExpand.emit({
371
+ item,
372
+ expanded: !wasExpanded,
373
+ });
374
+ }
375
+ return newSet;
376
+ });
377
+ }
378
+ onItemClick(item, level = 0, path = []) {
379
+ if (item.disabled)
380
+ return;
381
+ this.itemClick.emit({
382
+ item,
383
+ level,
384
+ path: [...path, item.label],
385
+ });
386
+ }
387
+ isSubItemExpanded(itemKey) {
388
+ return this.expandedItems().has(itemKey);
389
+ }
390
+ hasChildren(item) {
391
+ return !!(item.children && item.children.length > 0);
392
+ }
393
+ onItemHover(itemId) {
394
+ this.hoveredItem.set(itemId);
395
+ }
396
+ onItemLeave() {
397
+ this.hoveredItem.set(null);
398
+ }
399
+ onHeaderHover(isHovering) {
400
+ this.hoveredHeader.set(isHovering);
401
+ }
402
+ getItemId(item, index, parentPath = '') {
403
+ const path = parentPath
404
+ ? `${parentPath}-${item.label}-${index}`
405
+ : `${item.label}-${index}`;
406
+ return path;
407
+ }
408
+ getUniqueItemKey(item, parentPath = '') {
409
+ return parentPath ? `${parentPath}/${item.label}` : item.label;
410
+ }
411
+ isItemHovered(itemId) {
412
+ return this.hoveredItem() === itemId;
413
+ }
414
+ isItemDisabled(item) {
415
+ return item.disabled === true;
416
+ }
417
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryPanelmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
418
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryPanelmenu, isStandalone: true, selector: "magary-panelmenu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, allowMultipleExpanded: { classPropertyName: "allowMultipleExpanded", publicName: "allowMultipleExpanded", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuToggle: "menuToggle", itemClick: "itemClick", itemExpand: "itemExpand" }, ngImport: i0, template: "<div\n class=\"panel-menu\"\n [ngClass]=\"['shadow-' + shadow()]\"\n [class.open]=\"isOpen()\"\n [ngStyle]=\"panelStyles()\"\n>\n <div\n class=\"panel-header\"\n [class.header-hovered]=\"hoveredHeader()\"\n (click)=\"toggle()\"\n (mouseenter)=\"onHeaderHover(true)\"\n (mouseleave)=\"onHeaderHover(false)\"\n >\n {{ title() }}\n <span class=\"arrow\" [class.open]=\"isOpen()\">\n <i class=\"fas fa-chevron-down\"></i>\n </span>\n </div>\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\n @for (item of items(); track getItemId(item, $index)) {\n <li class=\"menu-item\">\n @if (hasChildren(item)) {\n <div\n class=\"category-item\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"\n !isItemDisabled(item) &&\n toggleSubItem(getUniqueItemKey(item), item)\n \"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n <span\n class=\"sub-arrow\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n <i\n class=\"fas\"\n [ngClass]=\"\n isSubItemExpanded(getUniqueItemKey(item))\n ? 'fa-minus'\n : 'fa-plus'\n \"\n ></i>\n </span>\n </div>\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of item.children;\n track subItem.label + \"-\" + $index\n ) {\n <li>\n @if (hasChildren(subItem)) {\n <div\n class=\"sub-category-item\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"\n !isItemDisabled(subItem) &&\n toggleSubItem(\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\n subItem\n )\n \"\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n <span class=\"item-label\">{{ subItem.label }}</span>\n <span\n class=\"sub-arrow\"\n [class.expanded]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n \"\n >\n <i\n class=\"fas\"\n [ngClass]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n ? 'fa-minus'\n : 'fa-plus'\n \"\n ></i>\n </span>\n </div>\n <ul\n class=\"sub-sub-items\"\n [class.expanded]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n \"\n >\n @for (\n subSubItem of subItem.children;\n track subSubItem.label + \"-\" + $index\n ) {\n <li>\n @if (subSubItem.route) {\n <a\n [routerLink]=\"subSubItem.route\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n [class.disabled]=\"isItemDisabled(subSubItem)\"\n (click)=\"\n onItemClick(subSubItem, 2, [\n item.label,\n subItem.label,\n ])\n \"\n (mouseenter)=\"\n onItemHover(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subSubItem.icon) {\n <i\n [class]=\"subSubItem.icon\"\n class=\"item-icon\"\n ></i>\n }\n {{ subSubItem.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n [class.disabled]=\"isItemDisabled(subSubItem)\"\n (click)=\"\n !isItemDisabled(subSubItem) &&\n onItemClick(subSubItem, 2, [\n item.label,\n subItem.label,\n ])\n \"\n (mouseenter)=\"\n onItemHover(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subSubItem.icon) {\n <i\n [class]=\"subSubItem.icon\"\n class=\"item-icon\"\n ></i>\n }\n {{ subSubItem.label }}\n </div>\n }\n </li>\n }\n </ul>\n } @else {\n @if (subItem.route) {\n <a\n [routerLink]=\"subItem.route\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"onItemClick(subItem, 1, [item.label])\"\n (mouseenter)=\"\n onItemHover(subItem.label + '-sub-' + $index)\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n {{ subItem.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"\n !isItemDisabled(subItem) &&\n onItemClick(subItem, 1, [item.label])\n \"\n (mouseenter)=\"\n onItemHover(subItem.label + '-sub-' + $index)\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n {{ subItem.label }}\n </div>\n }\n }\n </li>\n }\n </ul>\n } @else {\n @if (item.route) {\n <a\n [routerLink]=\"item.route\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n {{ item.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n {{ item.label }}\n </div>\n }\n }\n </li>\n }\n </ul>\n</div>\n", styles: [".panel-menu{--panel-bg: var(--magary-panel-bg, #ffffff);--panel-text: var(--magary-panel-text, #1f2937);--panel-hover: var(--magary-panel-hover, #007bff);--panel-radius: var(--magary-panel-radius, 8px);--panel-shadow: var(--magary-panel-shadow, 0 2px 4px rgba(0, 0, 0, .1));--panel-header-bg: var(--magary-panel-header-bg, rgba(0, 0, 0, .02));--panel-header-hover: var(--magary-panel-header-hover, rgba(0, 0, 0, .07));--panel-transition: var(--magary-panel-transition, .2s ease);margin-bottom:1rem;transition:box-shadow .3s;background:var(--panel-bg);color:var(--panel-text);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow)}.panel-header{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;-webkit-user-select:none;user-select:none;border-radius:inherit;background:var(--panel-header-bg);transition:background var(--panel-transition),color var(--panel-transition)}.panel-header:hover{background:var(--panel-header-hover)}.panel-header.header-hovered{background:var(--panel-hover);color:#fff}.panel-header .arrow{transition:transform .3s ease}.panel-header .arrow.open{transform:rotate(180deg)}.panel-items{list-style:none;padding-left:2px;margin-top:0;overflow:hidden;max-height:0;opacity:0;transform:scaleY(.95);transform-origin:top;transition:max-height .3s ease,opacity .3s ease,transform .3s ease,margin-top .3s ease}.panel-items.expanded{opacity:1;transform:scaleY(1);margin-top:.5rem;max-height:1000px}:host-context(.panel-menu:not(.open)) .panel-items{max-height:0;opacity:0;pointer-events:none}.menu-item-base,.category-item,.sub-category-item,.panel-items li a{display:flex;align-items:center;padding:.5rem .75rem;border-radius:6px;transition:background var(--panel-transition),color var(--panel-transition),box-shadow var(--panel-transition);cursor:pointer;text-decoration:none;color:inherit}.menu-item-base:hover,.category-item:hover,.sub-category-item:hover,.panel-items li a:hover,.menu-item-base.item-hovered,.item-hovered.category-item,.item-hovered.sub-category-item,.panel-items li a.item-hovered{color:#fff;background:var(--panel-hover);box-shadow:0 2px 8px #007bff1f}.menu-item-base.disabled,.disabled.category-item,.disabled.sub-category-item,.panel-items li a.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item-base .item-icon,.category-item .item-icon,.sub-category-item .item-icon,.panel-items li a .item-icon{width:16px;text-align:center;margin-right:.5rem;flex-shrink:0}.menu-item-base .item-label,.category-item .item-label,.sub-category-item .item-label,.panel-items li a .item-label{flex:1}.menu-item{padding-bottom:10px}.category-item,.sub-category-item{justify-content:space-between;font-weight:500;padding-left:30px}.category-item .sub-arrow,.sub-category-item .sub-arrow{transition:transform .3s ease;flex-shrink:0}.category-item .sub-arrow.expanded,.sub-category-item .sub-arrow.expanded{transform:rotate(180deg)}.sub-category-item{padding-left:1.5rem;font-weight:400;font-size:.95rem}.item-icon{width:16px;text-align:center;margin-right:.5rem}.sub-items{list-style:none;padding-left:1rem;margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}.sub-items.expanded{max-height:500px;opacity:1;padding-top:.25rem;padding-bottom:.25rem}.sub-items li a{padding-left:1.5rem;font-size:.9rem}.sub-items li a:hover,.sub-items li a.item-hovered{background:#007bff1a;color:var(--panel-hover);box-shadow:none}.sub-sub-items{list-style:none;padding-left:1.5rem;margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}.sub-sub-items.expanded{max-height:300px;opacity:1;padding-top:.25rem;padding-bottom:.25rem}.sub-sub-items li a{padding-left:2rem;font-size:.85rem}.sub-sub-items li a:hover,.sub-sub-items li a.item-hovered{background:#007bff14;color:var(--panel-hover);box-shadow:none}.shadow-1{box-shadow:0 4px 6px #00000026}.shadow-2{box-shadow:0 6px 8px #0003}.shadow-3{box-shadow:0 8px 10px #00000040}.shadow-4{box-shadow:0 10px 12px #0000004d}.shadow-5{box-shadow:0 12px 14px #00000059}.shadow-6{box-shadow:0 14px 16px #0006}.shadow-7{box-shadow:0 16px 18px #00000073}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
419
+ }
420
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryPanelmenu, decorators: [{
421
+ type: Component,
422
+ args: [{ selector: 'magary-panelmenu', imports: [CommonModule, RouterModule], template: "<div\n class=\"panel-menu\"\n [ngClass]=\"['shadow-' + shadow()]\"\n [class.open]=\"isOpen()\"\n [ngStyle]=\"panelStyles()\"\n>\n <div\n class=\"panel-header\"\n [class.header-hovered]=\"hoveredHeader()\"\n (click)=\"toggle()\"\n (mouseenter)=\"onHeaderHover(true)\"\n (mouseleave)=\"onHeaderHover(false)\"\n >\n {{ title() }}\n <span class=\"arrow\" [class.open]=\"isOpen()\">\n <i class=\"fas fa-chevron-down\"></i>\n </span>\n </div>\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\n @for (item of items(); track getItemId(item, $index)) {\n <li class=\"menu-item\">\n @if (hasChildren(item)) {\n <div\n class=\"category-item\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"\n !isItemDisabled(item) &&\n toggleSubItem(getUniqueItemKey(item), item)\n \"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n <span\n class=\"sub-arrow\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n <i\n class=\"fas\"\n [ngClass]=\"\n isSubItemExpanded(getUniqueItemKey(item))\n ? 'fa-minus'\n : 'fa-plus'\n \"\n ></i>\n </span>\n </div>\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of item.children;\n track subItem.label + \"-\" + $index\n ) {\n <li>\n @if (hasChildren(subItem)) {\n <div\n class=\"sub-category-item\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"\n !isItemDisabled(subItem) &&\n toggleSubItem(\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\n subItem\n )\n \"\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n <span class=\"item-label\">{{ subItem.label }}</span>\n <span\n class=\"sub-arrow\"\n [class.expanded]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n \"\n >\n <i\n class=\"fas\"\n [ngClass]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n ? 'fa-minus'\n : 'fa-plus'\n \"\n ></i>\n </span>\n </div>\n <ul\n class=\"sub-sub-items\"\n [class.expanded]=\"\n isSubItemExpanded(\n getUniqueItemKey(subItem, getUniqueItemKey(item))\n )\n \"\n >\n @for (\n subSubItem of subItem.children;\n track subSubItem.label + \"-\" + $index\n ) {\n <li>\n @if (subSubItem.route) {\n <a\n [routerLink]=\"subSubItem.route\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n [class.disabled]=\"isItemDisabled(subSubItem)\"\n (click)=\"\n onItemClick(subSubItem, 2, [\n item.label,\n subItem.label,\n ])\n \"\n (mouseenter)=\"\n onItemHover(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subSubItem.icon) {\n <i\n [class]=\"subSubItem.icon\"\n class=\"item-icon\"\n ></i>\n }\n {{ subSubItem.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n [class.disabled]=\"isItemDisabled(subSubItem)\"\n (click)=\"\n !isItemDisabled(subSubItem) &&\n onItemClick(subSubItem, 2, [\n item.label,\n subItem.label,\n ])\n \"\n (mouseenter)=\"\n onItemHover(\n subSubItem.label + '-subsub-' + $index\n )\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subSubItem.icon) {\n <i\n [class]=\"subSubItem.icon\"\n class=\"item-icon\"\n ></i>\n }\n {{ subSubItem.label }}\n </div>\n }\n </li>\n }\n </ul>\n } @else {\n @if (subItem.route) {\n <a\n [routerLink]=\"subItem.route\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"onItemClick(subItem, 1, [item.label])\"\n (mouseenter)=\"\n onItemHover(subItem.label + '-sub-' + $index)\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n {{ subItem.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\n (click)=\"\n !isItemDisabled(subItem) &&\n onItemClick(subItem, 1, [item.label])\n \"\n (mouseenter)=\"\n onItemHover(subItem.label + '-sub-' + $index)\n \"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (subItem.icon) {\n <i [class]=\"subItem.icon\" class=\"item-icon\"></i>\n }\n {{ subItem.label }}\n </div>\n }\n }\n </li>\n }\n </ul>\n } @else {\n @if (item.route) {\n <a\n [routerLink]=\"item.route\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n {{ item.label }}\n </a>\n } @else {\n <div\n class=\"menu-item-base\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\n (mouseleave)=\"onItemLeave()\"\n >\n @if (item.icon) {\n <i [class]=\"item.icon\" class=\"item-icon\"></i>\n }\n {{ item.label }}\n </div>\n }\n }\n </li>\n }\n </ul>\n</div>\n", styles: [".panel-menu{--panel-bg: var(--magary-panel-bg, #ffffff);--panel-text: var(--magary-panel-text, #1f2937);--panel-hover: var(--magary-panel-hover, #007bff);--panel-radius: var(--magary-panel-radius, 8px);--panel-shadow: var(--magary-panel-shadow, 0 2px 4px rgba(0, 0, 0, .1));--panel-header-bg: var(--magary-panel-header-bg, rgba(0, 0, 0, .02));--panel-header-hover: var(--magary-panel-header-hover, rgba(0, 0, 0, .07));--panel-transition: var(--magary-panel-transition, .2s ease);margin-bottom:1rem;transition:box-shadow .3s;background:var(--panel-bg);color:var(--panel-text);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow)}.panel-header{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 20px;-webkit-user-select:none;user-select:none;border-radius:inherit;background:var(--panel-header-bg);transition:background var(--panel-transition),color var(--panel-transition)}.panel-header:hover{background:var(--panel-header-hover)}.panel-header.header-hovered{background:var(--panel-hover);color:#fff}.panel-header .arrow{transition:transform .3s ease}.panel-header .arrow.open{transform:rotate(180deg)}.panel-items{list-style:none;padding-left:2px;margin-top:0;overflow:hidden;max-height:0;opacity:0;transform:scaleY(.95);transform-origin:top;transition:max-height .3s ease,opacity .3s ease,transform .3s ease,margin-top .3s ease}.panel-items.expanded{opacity:1;transform:scaleY(1);margin-top:.5rem;max-height:1000px}:host-context(.panel-menu:not(.open)) .panel-items{max-height:0;opacity:0;pointer-events:none}.menu-item-base,.category-item,.sub-category-item,.panel-items li a{display:flex;align-items:center;padding:.5rem .75rem;border-radius:6px;transition:background var(--panel-transition),color var(--panel-transition),box-shadow var(--panel-transition);cursor:pointer;text-decoration:none;color:inherit}.menu-item-base:hover,.category-item:hover,.sub-category-item:hover,.panel-items li a:hover,.menu-item-base.item-hovered,.item-hovered.category-item,.item-hovered.sub-category-item,.panel-items li a.item-hovered{color:#fff;background:var(--panel-hover);box-shadow:0 2px 8px #007bff1f}.menu-item-base.disabled,.disabled.category-item,.disabled.sub-category-item,.panel-items li a.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.menu-item-base .item-icon,.category-item .item-icon,.sub-category-item .item-icon,.panel-items li a .item-icon{width:16px;text-align:center;margin-right:.5rem;flex-shrink:0}.menu-item-base .item-label,.category-item .item-label,.sub-category-item .item-label,.panel-items li a .item-label{flex:1}.menu-item{padding-bottom:10px}.category-item,.sub-category-item{justify-content:space-between;font-weight:500;padding-left:30px}.category-item .sub-arrow,.sub-category-item .sub-arrow{transition:transform .3s ease;flex-shrink:0}.category-item .sub-arrow.expanded,.sub-category-item .sub-arrow.expanded{transform:rotate(180deg)}.sub-category-item{padding-left:1.5rem;font-weight:400;font-size:.95rem}.item-icon{width:16px;text-align:center;margin-right:.5rem}.sub-items{list-style:none;padding-left:1rem;margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}.sub-items.expanded{max-height:500px;opacity:1;padding-top:.25rem;padding-bottom:.25rem}.sub-items li a{padding-left:1.5rem;font-size:.9rem}.sub-items li a:hover,.sub-items li a.item-hovered{background:#007bff1a;color:var(--panel-hover);box-shadow:none}.sub-sub-items{list-style:none;padding-left:1.5rem;margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s ease,padding .3s ease}.sub-sub-items.expanded{max-height:300px;opacity:1;padding-top:.25rem;padding-bottom:.25rem}.sub-sub-items li a{padding-left:2rem;font-size:.85rem}.sub-sub-items li a:hover,.sub-sub-items li a.item-hovered{background:#007bff14;color:var(--panel-hover);box-shadow:none}.shadow-1{box-shadow:0 4px 6px #00000026}.shadow-2{box-shadow:0 6px 8px #0003}.shadow-3{box-shadow:0 8px 10px #00000040}.shadow-4{box-shadow:0 10px 12px #0000004d}.shadow-5{box-shadow:0 12px 14px #00000059}.shadow-6{box-shadow:0 14px 16px #0006}.shadow-7{box-shadow:0 16px 18px #00000073}\n"] }]
423
+ }], ctorParameters: () => [] });
424
+
425
+ class PanelmenuModule {
426
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PanelmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
427
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: PanelmenuModule, imports: [CommonModule, MagaryPanelmenu, RouterModule], exports: [MagaryPanelmenu] });
428
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PanelmenuModule, imports: [CommonModule, MagaryPanelmenu, RouterModule] });
429
+ }
430
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PanelmenuModule, decorators: [{
431
+ type: NgModule,
432
+ args: [{
433
+ imports: [CommonModule, MagaryPanelmenu, RouterModule],
434
+ exports: [MagaryPanelmenu],
435
+ }]
436
+ }] });
437
+
438
+ class MagaryAvatar {
439
+ label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
440
+ image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
441
+ icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
442
+ shape = input('square', ...(ngDevMode ? [{ debugName: "shape" }] : []));
443
+ size = input('normal', ...(ngDevMode ? [{ debugName: "size" }] : []));
444
+ badgeValue = input(...(ngDevMode ? [undefined, { debugName: "badgeValue" }] : []));
445
+ badgeSeverity = input('danger', ...(ngDevMode ? [{ debugName: "badgeSeverity" }] : []));
446
+ customStyle = input(...(ngDevMode ? [undefined, { debugName: "customStyle" }] : []));
447
+ alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : []));
448
+ clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
449
+ loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
450
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
451
+ avatarClick = output();
452
+ imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
453
+ displayLabel = computed(() => {
454
+ const label = this.label();
455
+ if (!label)
456
+ return '';
457
+ if (label.includes(' ')) {
458
+ return label
459
+ .split(' ')
460
+ .map((word) => word.charAt(0))
461
+ .join('')
462
+ .toUpperCase()
463
+ .slice(0, 2);
464
+ }
465
+ return label.toUpperCase().slice(0, 2);
466
+ }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : []));
467
+ avatarClasses = computed(() => ({
468
+ [this.size()]: true,
469
+ [this.shape()]: true,
470
+ clickable: this.clickable(),
471
+ loading: this.loading(),
472
+ disabled: this.disabled(),
473
+ 'has-image': !!this.image() && !this.imageError(),
474
+ 'has-icon': !this.image() && !!this.icon(),
475
+ 'has-label': !this.image() && !this.icon() && !!this.label(),
476
+ }), ...(ngDevMode ? [{ debugName: "avatarClasses" }] : []));
477
+ shouldShowImage = computed(() => {
478
+ return this.image() && !this.imageError();
479
+ }, ...(ngDevMode ? [{ debugName: "shouldShowImage" }] : []));
480
+ shouldShowIcon = computed(() => {
481
+ return !this.shouldShowImage() && !!this.icon();
482
+ }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
483
+ shouldShowLabel = computed(() => {
484
+ return (!this.shouldShowImage() && !this.shouldShowIcon() && !!this.displayLabel());
485
+ }, ...(ngDevMode ? [{ debugName: "shouldShowLabel" }] : []));
486
+ onImageError() {
487
+ this.imageError.set(true);
488
+ }
489
+ onImageLoad() {
490
+ this.imageError.set(false);
491
+ }
492
+ onAvatarClick() {
493
+ if (this.disabled() || this.loading())
494
+ return;
495
+ this.avatarClick.emit({
496
+ type: 'avatar',
497
+ data: {
498
+ label: this.label(),
499
+ image: this.image(),
500
+ icon: this.icon(),
501
+ },
502
+ });
503
+ }
504
+ onBadgeClick(event) {
505
+ if (this.disabled() || this.loading())
506
+ return;
507
+ event.stopPropagation();
508
+ this.avatarClick.emit({
509
+ type: 'badge',
510
+ data: {
511
+ value: this.badgeValue(),
512
+ severity: this.badgeSeverity(),
513
+ },
514
+ });
515
+ }
516
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
517
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryAvatar, isStandalone: true, selector: "magary-avatar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badgeValue: { classPropertyName: "badgeValue", publicName: "badgeValue", isSignal: true, isRequired: false, transformFunction: null }, badgeSeverity: { classPropertyName: "badgeSeverity", publicName: "badgeSeverity", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "<div\n class=\"avatar-wrapper\"\n [ngClass]=\"avatarClasses()\"\n [ngStyle]=\"customStyle()\"\n [attr.aria-label]=\"alt()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() && !disabled() ? '0' : null\"\n (click)=\"clickable() && onAvatarClick()\"\n (keydown.enter)=\"clickable() && onAvatarClick()\"\n (keydown.space)=\"clickable() && onAvatarClick()\"\n>\n @if (loading()) {\n <div class=\"avatar-loading\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n } @else {\n @if (shouldShowImage()) {\n <img\n [src]=\"image()\"\n [alt]=\"alt()\"\n class=\"avatar-img\"\n [ngClass]=\"shape()\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n }\n @if (shouldShowIcon()) {\n <i [class]=\"'fas fa-' + icon()\" class=\"avatar-icon\"></i>\n }\n @if (shouldShowLabel()) {\n <span class=\"avatar-label\">{{ displayLabel() }}</span>\n }\n }\n @if (badgeValue()) {\n <div\n class=\"badge\"\n [ngClass]=\"badgeSeverity()\"\n [attr.aria-label]=\"'Badge: ' + badgeValue()\"\n (click)=\"onBadgeClick($event)\"\n >\n {{ badgeValue() }}\n </div>\n }\n</div>\n", styles: [".avatar-wrapper{--avatar-bg: var(--magary-avatar-bg, #6b7280);--avatar-color: var(--magary-avatar-color, #ffffff);--avatar-border: var(--magary-avatar-border, transparent);--avatar-font-weight: var(--magary-avatar-font-weight, 600);--avatar-transition: var(--magary-avatar-transition, all .2s ease);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--avatar-font-weight);color:var(--avatar-color);background-color:var(--avatar-bg);border:2px solid var(--avatar-border);position:relative;z-index:0;transition:var(--avatar-transition);overflow:visible;-webkit-user-select:none;user-select:none}.avatar-wrapper.circle{border-radius:50%}.avatar-wrapper.square{border-radius:6px}.avatar-wrapper.xsmall{width:24px;height:24px;font-size:10px}.avatar-wrapper.xsmall .avatar-icon{font-size:.75rem}.avatar-wrapper.small{width:28px;height:28px;font-size:12px}.avatar-wrapper.small .avatar-icon{font-size:.875rem}.avatar-wrapper.normal{width:32px;height:32px;font-size:14px}.avatar-wrapper.normal .avatar-icon{font-size:1rem}.avatar-wrapper.large{width:48px;height:48px;font-size:18px}.avatar-wrapper.large .avatar-icon{font-size:1.25rem}.avatar-wrapper.xlarge{width:64px;height:64px;font-size:22px}.avatar-wrapper.xlarge .avatar-icon{font-size:1.5rem}.avatar-wrapper.clickable{cursor:pointer}.avatar-wrapper.clickable:hover:not(.disabled){transform:scale(1.05);box-shadow:0 4px 8px #00000026}.avatar-wrapper.clickable:focus{outline:2px solid var(--magary-focus-color, #3b82f6);outline-offset:2px}.avatar-wrapper.clickable:active:not(.disabled){transform:scale(.98)}.avatar-wrapper.loading{opacity:.7;cursor:wait}.avatar-wrapper.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.avatar-wrapper.has-image .avatar-img,.avatar-wrapper.has-icon .avatar-icon,.avatar-wrapper.has-label .avatar-label{opacity:1}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease;overflow:hidden}.avatar-wrapper .avatar-img.circle{border-radius:50%}.avatar-wrapper .avatar-img.square{border-radius:4px}.avatar-wrapper .avatar-icon{opacity:.9;transition:opacity .2s ease}.avatar-wrapper .avatar-label{font-weight:inherit;letter-spacing:.5px;transition:opacity .2s ease}.avatar-wrapper .avatar-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-wrapper .avatar-loading i{font-size:1rem;opacity:.7}.avatar-wrapper .badge{position:absolute;top:-6px;right:-6px;background-color:#ef4444;border:2px solid white;border-radius:999px;color:#fff;padding:0 6px;font-size:10px;font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease;z-index:999}.avatar-wrapper .badge:hover{transform:scale(1.1)}.avatar-wrapper .badge.info{background-color:#3b82f6}.avatar-wrapper .badge.success{background-color:#10b981}.avatar-wrapper .badge.warning{background-color:#f59e0b}.avatar-wrapper .badge.danger{background-color:#ef4444}@media (max-width: 640px){.avatar-wrapper.large{width:40px;height:40px;font-size:16px}.avatar-wrapper.xlarge{width:52px;height:52px;font-size:20px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
518
+ }
519
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryAvatar, decorators: [{
520
+ type: Component,
521
+ args: [{ selector: 'magary-avatar', imports: [CommonModule], template: "<div\n class=\"avatar-wrapper\"\n [ngClass]=\"avatarClasses()\"\n [ngStyle]=\"customStyle()\"\n [attr.aria-label]=\"alt()\"\n [attr.role]=\"clickable() ? 'button' : null\"\n [attr.tabindex]=\"clickable() && !disabled() ? '0' : null\"\n (click)=\"clickable() && onAvatarClick()\"\n (keydown.enter)=\"clickable() && onAvatarClick()\"\n (keydown.space)=\"clickable() && onAvatarClick()\"\n>\n @if (loading()) {\n <div class=\"avatar-loading\">\n <i class=\"fas fa-spinner fa-spin\"></i>\n </div>\n } @else {\n @if (shouldShowImage()) {\n <img\n [src]=\"image()\"\n [alt]=\"alt()\"\n class=\"avatar-img\"\n [ngClass]=\"shape()\"\n (error)=\"onImageError()\"\n (load)=\"onImageLoad()\"\n />\n }\n @if (shouldShowIcon()) {\n <i [class]=\"'fas fa-' + icon()\" class=\"avatar-icon\"></i>\n }\n @if (shouldShowLabel()) {\n <span class=\"avatar-label\">{{ displayLabel() }}</span>\n }\n }\n @if (badgeValue()) {\n <div\n class=\"badge\"\n [ngClass]=\"badgeSeverity()\"\n [attr.aria-label]=\"'Badge: ' + badgeValue()\"\n (click)=\"onBadgeClick($event)\"\n >\n {{ badgeValue() }}\n </div>\n }\n</div>\n", styles: [".avatar-wrapper{--avatar-bg: var(--magary-avatar-bg, #6b7280);--avatar-color: var(--magary-avatar-color, #ffffff);--avatar-border: var(--magary-avatar-border, transparent);--avatar-font-weight: var(--magary-avatar-font-weight, 600);--avatar-transition: var(--magary-avatar-transition, all .2s ease);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--avatar-font-weight);color:var(--avatar-color);background-color:var(--avatar-bg);border:2px solid var(--avatar-border);position:relative;z-index:0;transition:var(--avatar-transition);overflow:visible;-webkit-user-select:none;user-select:none}.avatar-wrapper.circle{border-radius:50%}.avatar-wrapper.square{border-radius:6px}.avatar-wrapper.xsmall{width:24px;height:24px;font-size:10px}.avatar-wrapper.xsmall .avatar-icon{font-size:.75rem}.avatar-wrapper.small{width:28px;height:28px;font-size:12px}.avatar-wrapper.small .avatar-icon{font-size:.875rem}.avatar-wrapper.normal{width:32px;height:32px;font-size:14px}.avatar-wrapper.normal .avatar-icon{font-size:1rem}.avatar-wrapper.large{width:48px;height:48px;font-size:18px}.avatar-wrapper.large .avatar-icon{font-size:1.25rem}.avatar-wrapper.xlarge{width:64px;height:64px;font-size:22px}.avatar-wrapper.xlarge .avatar-icon{font-size:1.5rem}.avatar-wrapper.clickable{cursor:pointer}.avatar-wrapper.clickable:hover:not(.disabled){transform:scale(1.05);box-shadow:0 4px 8px #00000026}.avatar-wrapper.clickable:focus{outline:2px solid var(--magary-focus-color, #3b82f6);outline-offset:2px}.avatar-wrapper.clickable:active:not(.disabled){transform:scale(.98)}.avatar-wrapper.loading{opacity:.7;cursor:wait}.avatar-wrapper.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.avatar-wrapper.has-image .avatar-img,.avatar-wrapper.has-icon .avatar-icon,.avatar-wrapper.has-label .avatar-label{opacity:1}.avatar-wrapper .avatar-img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease;overflow:hidden}.avatar-wrapper .avatar-img.circle{border-radius:50%}.avatar-wrapper .avatar-img.square{border-radius:4px}.avatar-wrapper .avatar-icon{opacity:.9;transition:opacity .2s ease}.avatar-wrapper .avatar-label{font-weight:inherit;letter-spacing:.5px;transition:opacity .2s ease}.avatar-wrapper .avatar-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-wrapper .avatar-loading i{font-size:1rem;opacity:.7}.avatar-wrapper .badge{position:absolute;top:-6px;right:-6px;background-color:#ef4444;border:2px solid white;border-radius:999px;color:#fff;padding:0 6px;font-size:10px;font-weight:700;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease;z-index:999}.avatar-wrapper .badge:hover{transform:scale(1.1)}.avatar-wrapper .badge.info{background-color:#3b82f6}.avatar-wrapper .badge.success{background-color:#10b981}.avatar-wrapper .badge.warning{background-color:#f59e0b}.avatar-wrapper .badge.danger{background-color:#ef4444}@media (max-width: 640px){.avatar-wrapper.large{width:40px;height:40px;font-size:16px}.avatar-wrapper.xlarge{width:52px;height:52px;font-size:20px}}\n"] }]
522
+ }] });
523
+
524
+ class Sidebar {
525
+ sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : []));
526
+ menu = input([], ...(ngDevMode ? [{ debugName: "menu" }] : []));
527
+ menuTitle = input('Menu', ...(ngDevMode ? [{ debugName: "menuTitle" }] : []));
528
+ showUserSection = input(false, ...(ngDevMode ? [{ debugName: "showUserSection" }] : []));
529
+ userName = input('John Doe', ...(ngDevMode ? [{ debugName: "userName" }] : []));
530
+ userEmail = input('user@example.com', ...(ngDevMode ? [{ debugName: "userEmail" }] : []));
531
+ avatarConfig = input({
532
+ type: 'label',
533
+ label: 'U',
534
+ size: 'normal',
535
+ shape: 'circle',
536
+ badgeSeverity: 'danger',
537
+ }, ...(ngDevMode ? [{ debugName: "avatarConfig" }] : []));
538
+ logoSrc = input('assets/logo.svg', ...(ngDevMode ? [{ debugName: "logoSrc" }] : []));
539
+ appTitle = input('PRIMENG', ...(ngDevMode ? [{ debugName: "appTitle" }] : []));
540
+ isMobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMobileOpen" }] : []));
541
+ Logout = output();
542
+ closeSidebar = output();
543
+ toggleMobileSidebar() {
544
+ this.isMobileOpen.update((open) => !open);
545
+ }
546
+ closeMobileSidebar() {
547
+ this.isMobileOpen.set(false);
548
+ }
549
+ logout() {
550
+ this.Logout.emit();
551
+ }
552
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
553
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: Sidebar, isStandalone: true, selector: "magary-sidebar", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null }, menuTitle: { classPropertyName: "menuTitle", publicName: "menuTitle", isSignal: true, isRequired: false, transformFunction: null }, showUserSection: { classPropertyName: "showUserSection", publicName: "showUserSection", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null }, avatarConfig: { classPropertyName: "avatarConfig", publicName: "avatarConfig", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { Logout: "Logout", closeSidebar: "closeSidebar" }, ngImport: i0, template: "<button class=\"hamburger-button\" (click)=\"toggleMobileSidebar()\">\n <i class=\"fas fa-bars\"></i>\n</button>\n<div class=\"sidebar\" [class.open]=\"isMobileOpen()\">\n <div class=\"sidebar-header\">\n <img [src]=\"logoSrc()\" alt=\"Logo\" class=\"logo\" />\n <span class=\"title\">{{ appTitle() }}</span>\n </div>\n <div class=\"sidebar-content\">\n <div class=\"menu-container\">\n @if (sections().length > 0) {\n @for (section of sections(); track $index) {\n <magary-panelmenu\n [title]=\"section.title\"\n [items]=\"section.items\"\n [backgroundColor]=\"section.backgroundColor || '#ffffff'\"\n [textColor]=\"section.textColor || '#374151'\"\n [hoverColor]=\"section.hoverColor || '#3b82f6'\"\n [borderRadius]=\"'12px'\"\n [shadow]=\"2\"\n [width]=\"'100%'\"\n />\n }\n }\n @if (menu().length > 0 && sections().length === 0) {\n <magary-panelmenu\n [title]=\"menuTitle()\"\n [items]=\"menu()\"\n [backgroundColor]=\"'#ffffff'\"\n [textColor]=\"'#374151'\"\n [hoverColor]=\"'#3b82f6'\"\n [borderRadius]=\"'12px'\"\n [shadow]=\"2\"\n [width]=\"'100%'\"\n />\n }\n </div>\n @if (showUserSection()) {\n <div class=\"user-section\">\n <div class=\"user-info\">\n @switch (avatarConfig().type) {\n @case (\"image\") {\n <magary-avatar\n [image]=\"avatarConfig().image || ''\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n @case (\"label\") {\n <magary-avatar\n [label]=\"avatarConfig().label || userName().charAt(0)\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n @case (\"icon\") {\n <magary-avatar\n [icon]=\"avatarConfig().icon || 'user'\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n }\n <div class=\"user-details\">\n <div class=\"username\">{{ userName() }}</div>\n <div class=\"email\">{{ userEmail() }}</div>\n </div>\n </div>\n <button class=\"logout-button\" (click)=\"logout()\">\n <i class=\"fas fa-sign-out-alt\"></i>\n Cerrar sesi\u00F3n\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;height:100vh;width:280px;background:#f8fafc;border-right:1px solid #e2e8f0;box-shadow:2px 0 8px #0000001a}.sidebar-header{display:flex;align-items:center;padding-left:30px;border-bottom:1px solid #e2e8f0;background:#fff;height:60px;gap:12px}.sidebar-header .logo{width:30px;height:30px}.sidebar-header .title{font-size:1.25rem;font-weight:700;color:#1f2937;letter-spacing:-.025em}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:1rem}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}.menu-container{flex:1;overflow-y:auto}.user-section{margin-top:auto;padding:1rem;border-top:1px solid #e2e8f0;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;flex-shrink:0}.user-info{display:flex;align-items:center;margin-bottom:1rem;gap:25px}.user-info .avatar{width:40px;height:40px;border-radius:50%;margin-right:.75rem;border:2px solid #e2e8f0}.user-info .user-details{flex:1}.user-info .user-details .username{font-weight:600;color:#1f2937;font-size:.875rem;margin-bottom:.125rem}.user-info .user-details .email{color:#6b7280;font-size:.75rem}.logout-button{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.logout-button:active{transform:translateY(0)}.logout-button i{font-size:.875rem}.hamburger-button{display:none;position:fixed;top:15px;left:15px;z-index:1100;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem .75rem;box-shadow:0 2px 6px #0000001a;cursor:pointer}.hamburger-button i{font-size:1.25rem;color:#1f2937}@media (max-width: 768px){.hamburger-button{display:block}}@media (max-width: 768px){.sidebar{width:100%;position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}.sidebar-header{padding:20px 20px 20px 90px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: MagaryPanelmenu, selector: "magary-panelmenu", inputs: ["title", "items", "backgroundColor", "textColor", "borderRadius", "shadow", "width", "hoverColor", "allowMultipleExpanded", "defaultOpen"], outputs: ["menuToggle", "itemClick", "itemExpand"] }, { kind: "component", type: MagaryAvatar, selector: "magary-avatar", inputs: ["label", "image", "icon", "shape", "size", "badgeValue", "badgeSeverity", "customStyle", "alt", "clickable", "loading", "disabled"], outputs: ["avatarClick"] }] });
554
+ }
555
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: Sidebar, decorators: [{
556
+ type: Component,
557
+ args: [{ selector: 'magary-sidebar', imports: [CommonModule, RouterModule, MagaryPanelmenu, MagaryAvatar], template: "<button class=\"hamburger-button\" (click)=\"toggleMobileSidebar()\">\n <i class=\"fas fa-bars\"></i>\n</button>\n<div class=\"sidebar\" [class.open]=\"isMobileOpen()\">\n <div class=\"sidebar-header\">\n <img [src]=\"logoSrc()\" alt=\"Logo\" class=\"logo\" />\n <span class=\"title\">{{ appTitle() }}</span>\n </div>\n <div class=\"sidebar-content\">\n <div class=\"menu-container\">\n @if (sections().length > 0) {\n @for (section of sections(); track $index) {\n <magary-panelmenu\n [title]=\"section.title\"\n [items]=\"section.items\"\n [backgroundColor]=\"section.backgroundColor || '#ffffff'\"\n [textColor]=\"section.textColor || '#374151'\"\n [hoverColor]=\"section.hoverColor || '#3b82f6'\"\n [borderRadius]=\"'12px'\"\n [shadow]=\"2\"\n [width]=\"'100%'\"\n />\n }\n }\n @if (menu().length > 0 && sections().length === 0) {\n <magary-panelmenu\n [title]=\"menuTitle()\"\n [items]=\"menu()\"\n [backgroundColor]=\"'#ffffff'\"\n [textColor]=\"'#374151'\"\n [hoverColor]=\"'#3b82f6'\"\n [borderRadius]=\"'12px'\"\n [shadow]=\"2\"\n [width]=\"'100%'\"\n />\n }\n </div>\n @if (showUserSection()) {\n <div class=\"user-section\">\n <div class=\"user-info\">\n @switch (avatarConfig().type) {\n @case (\"image\") {\n <magary-avatar\n [image]=\"avatarConfig().image || ''\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n @case (\"label\") {\n <magary-avatar\n [label]=\"avatarConfig().label || userName().charAt(0)\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n @case (\"icon\") {\n <magary-avatar\n [icon]=\"avatarConfig().icon || 'user'\"\n [size]=\"avatarConfig().size || 'normal'\"\n [shape]=\"avatarConfig().shape || 'circle'\"\n [badgeValue]=\"avatarConfig().badgeValue\"\n [badgeSeverity]=\"avatarConfig().badgeSeverity || 'danger'\"\n class=\"user-avatar\"\n />\n }\n }\n <div class=\"user-details\">\n <div class=\"username\">{{ userName() }}</div>\n <div class=\"email\">{{ userEmail() }}</div>\n </div>\n </div>\n <button class=\"logout-button\" (click)=\"logout()\">\n <i class=\"fas fa-sign-out-alt\"></i>\n Cerrar sesi\u00F3n\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [".sidebar{display:flex;flex-direction:column;height:100vh;width:280px;background:#f8fafc;border-right:1px solid #e2e8f0;box-shadow:2px 0 8px #0000001a}.sidebar-header{display:flex;align-items:center;padding-left:30px;border-bottom:1px solid #e2e8f0;background:#fff;height:60px;gap:12px}.sidebar-header .logo{width:30px;height:30px}.sidebar-header .title{font-size:1.25rem;font-weight:700;color:#1f2937;letter-spacing:-.025em}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:1rem}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#94a3b8}.menu-container{flex:1;overflow-y:auto}.user-section{margin-top:auto;padding:1rem;border-top:1px solid #e2e8f0;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;flex-shrink:0}.user-info{display:flex;align-items:center;margin-bottom:1rem;gap:25px}.user-info .avatar{width:40px;height:40px;border-radius:50%;margin-right:.75rem;border:2px solid #e2e8f0}.user-info .user-details{flex:1}.user-info .user-details .username{font-weight:600;color:#1f2937;font-size:.875rem;margin-bottom:.125rem}.user-info .user-details .email{color:#6b7280;font-size:.75rem}.logout-button{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.logout-button:active{transform:translateY(0)}.logout-button i{font-size:.875rem}.hamburger-button{display:none;position:fixed;top:15px;left:15px;z-index:1100;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem .75rem;box-shadow:0 2px 6px #0000001a;cursor:pointer}.hamburger-button i{font-size:1.25rem;color:#1f2937}@media (max-width: 768px){.hamburger-button{display:block}}@media (max-width: 768px){.sidebar{width:100%;position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}.sidebar-header{padding:20px 20px 20px 90px}}\n"] }]
558
+ }] });
559
+
560
+ class SidebarModule {
561
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
562
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: SidebarModule, imports: [CommonModule, Sidebar, RouterModule], exports: [Sidebar] });
563
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SidebarModule, imports: [CommonModule, Sidebar, RouterModule] });
564
+ }
565
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: SidebarModule, decorators: [{
566
+ type: NgModule,
567
+ args: [{
568
+ imports: [CommonModule, Sidebar, RouterModule],
569
+ exports: [Sidebar],
570
+ }]
571
+ }] });
572
+
573
+ class AvatarModule {
574
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
575
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: AvatarModule, imports: [CommonModule, MagaryAvatar], exports: [MagaryAvatar] });
576
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AvatarModule, imports: [CommonModule, MagaryAvatar] });
577
+ }
578
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AvatarModule, decorators: [{
579
+ type: NgModule,
580
+ args: [{
581
+ imports: [CommonModule, MagaryAvatar],
582
+ exports: [MagaryAvatar],
583
+ }]
584
+ }] });
585
+
586
+ class MagaryCard {
587
+ img = input(...(ngDevMode ? [undefined, { debugName: "img" }] : []));
588
+ positionImage = input('top', ...(ngDevMode ? [{ debugName: "positionImage" }] : []));
589
+ shadow = input(1, ...(ngDevMode ? [{ debugName: "shadow" }] : []));
590
+ width = input('250px', ...(ngDevMode ? [{ debugName: "width" }] : []));
591
+ height = input('auto', ...(ngDevMode ? [{ debugName: "height" }] : []));
592
+ padding = input('1rem', ...(ngDevMode ? [{ debugName: "padding" }] : []));
593
+ gap = input('1rem', ...(ngDevMode ? [{ debugName: "gap" }] : []));
594
+ borderRadius = input('0.75rem', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
595
+ imageSize = input('500px', ...(ngDevMode ? [{ debugName: "imageSize" }] : []));
596
+ backgroundColor = input('#fff', ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
597
+ responsive = input(true, ...(ngDevMode ? [{ debugName: "responsive" }] : []));
598
+ altText = input('Card image', ...(ngDevMode ? [{ debugName: "altText" }] : []));
599
+ imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : []));
600
+ clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
601
+ loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
602
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
603
+ variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
604
+ loadingText = input('Cargando...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
605
+ cardClasses = computed(() => [
606
+ 'card',
607
+ `shadow-${this.shadow()}`,
608
+ `layout-${this.positionImage()}`,
609
+ `variant-${this.variant()}`,
610
+ this.responsive() ? 'responsive' : '',
611
+ this.clickable() ? 'clickable' : '',
612
+ this.loading() ? 'loading' : '',
613
+ this.disabled() ? 'disabled' : '',
614
+ ].filter(Boolean), ...(ngDevMode ? [{ debugName: "cardClasses" }] : []));
615
+ cardStyles = computed(() => ({
616
+ width: this.width(),
617
+ height: this.height(),
618
+ 'border-radius': this.borderRadius(),
619
+ 'background-color': this.backgroundColor(),
620
+ '--border-radius': this.borderRadius(),
621
+ '--gap': this.gap(),
622
+ '--padding': this.padding(),
623
+ cursor: this.clickable() && !this.disabled() ? 'pointer' : 'default',
624
+ opacity: this.disabled() ? '0.6' : '1',
625
+ 'pointer-events': this.disabled() ? 'none' : 'auto',
626
+ }), ...(ngDevMode ? [{ debugName: "cardStyles" }] : []));
627
+ imageWidth = computed(() => {
628
+ if (this.positionImage() === 'left' || this.positionImage() === 'right') {
629
+ return `calc(${this.width()} / 2)`;
630
+ }
631
+ return '100%';
632
+ }, ...(ngDevMode ? [{ debugName: "imageWidth" }] : []));
633
+ imageHeight = computed(() => {
634
+ if (this.positionImage() === 'top' || this.positionImage() === 'bottom') {
635
+ return `calc(${this.imageSize()} / 2)`;
636
+ }
637
+ return '100%';
638
+ }, ...(ngDevMode ? [{ debugName: "imageHeight" }] : []));
639
+ imageClasses = computed(() => [
640
+ 'card-img',
641
+ `img-${this.positionImage()}`,
642
+ ], ...(ngDevMode ? [{ debugName: "imageClasses" }] : []));
643
+ imageBorderRadius = computed(() => {
644
+ const radius = this.borderRadius();
645
+ const pos = this.positionImage();
646
+ const radiusMap = {
647
+ top: {
648
+ 'border-top-left-radius': radius,
649
+ 'border-top-right-radius': radius,
650
+ },
651
+ bottom: {
652
+ 'border-bottom-left-radius': radius,
653
+ 'border-bottom-right-radius': radius,
654
+ },
655
+ left: {
656
+ 'border-top-left-radius': radius,
657
+ 'border-bottom-left-radius': radius,
658
+ },
659
+ right: {
660
+ 'border-top-right-radius': radius,
661
+ 'border-bottom-right-radius': radius,
662
+ },
663
+ };
664
+ return radiusMap[pos] || {};
665
+ }, ...(ngDevMode ? [{ debugName: "imageBorderRadius" }] : []));
666
+ imageStyles = computed(() => ({
667
+ width: this.imageWidth(),
668
+ height: this.imageHeight(),
669
+ 'object-fit': this.imageFit(),
670
+ ...this.imageBorderRadius(),
671
+ }), ...(ngDevMode ? [{ debugName: "imageStyles" }] : []));
672
+ hasImage = computed(() => Boolean(this.img()), ...(ngDevMode ? [{ debugName: "hasImage" }] : []));
673
+ isHorizontalLayout = computed(() => this.positionImage() === 'left' || this.positionImage() === 'right', ...(ngDevMode ? [{ debugName: "isHorizontalLayout" }] : []));
674
+ isInteractive = computed(() => this.clickable() && !this.disabled() && !this.loading(), ...(ngDevMode ? [{ debugName: "isInteractive" }] : []));
675
+ showLoadingOverlay = computed(() => this.loading(), ...(ngDevMode ? [{ debugName: "showLoadingOverlay" }] : []));
676
+ onCardClick(event) {
677
+ if (this.isInteractive()) {
678
+ const cardClickEvent = new CustomEvent('cardClick', {
679
+ detail: { event },
680
+ bubbles: true,
681
+ });
682
+ event.target.dispatchEvent(cardClickEvent);
683
+ }
684
+ }
685
+ onCardKeydown(event) {
686
+ if (this.isInteractive() && (event.key === 'Enter' || event.key === ' ')) {
687
+ event.preventDefault();
688
+ this.onCardClick(event);
689
+ }
690
+ }
691
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
692
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryCard, isStandalone: true, selector: "magary-card", inputs: { img: { classPropertyName: "img", publicName: "img", isSignal: true, isRequired: false, transformFunction: null }, positionImage: { classPropertyName: "positionImage", publicName: "positionImage", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n [ngClass]=\"cardClasses()\"\n [ngStyle]=\"cardStyles()\"\n [attr.role]=\"clickable() ? 'button' : 'region'\"\n [attr.tabindex]=\"isInteractive() ? '0' : null\"\n [attr.aria-label]=\"\n 'Card with ' +\n (hasImage() ? 'image and ' : '') +\n 'content' +\n (clickable() ? '. Clickable' : '') +\n (loading() ? '. Loading' : '') +\n (disabled() ? '. Disabled' : '')\n \"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onCardClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n @if (hasImage()) {\n <div class=\"card-image-container\">\n <img\n [src]=\"img()\"\n [ngClass]=\"imageClasses()\"\n [ngStyle]=\"imageStyles()\"\n [alt]=\"altText()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n <div class=\"card-content\" [attr.aria-label]=\"'Card content'\">\n <div class=\"card-body\">\n @if (true) {\n <header class=\"card-header\" role=\"banner\">\n <ng-content select=\"[slot='header']\"></ng-content>\n </header>\n }\n <main class=\"card-main\" role=\"main\">\n <ng-content></ng-content>\n </main>\n @if (true) {\n <footer class=\"card-footer\" role=\"contentinfo\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n </footer>\n }\n </div>\n </div>\n @if (showLoadingOverlay()) {\n <div\n class=\"card-loading-overlay\"\n role=\"status\"\n [attr.aria-label]=\"loadingText()\"\n >\n <div class=\"loading-spinner\" aria-hidden=\"true\"></div>\n <span class=\"loading-text\">{{ loadingText() }}</span>\n </div>\n }\n</article>\n", styles: [":host{--card-border-radius: .75rem;--card-gap: 1rem;--card-padding: 1rem;--card-transition: all .2s ease;--card-shadow-light: 0 1px 2px rgba(0, 0, 0, .1);--card-shadow-heavy: 0 8px 16px rgba(0, 0, 0, .3);display:block;margin:0;padding:0;border:none}*{box-sizing:border-box}.card{display:flex;flex-direction:column;border-radius:var(--border-radius, var(--card-border-radius));transition:var(--card-transition);overflow:hidden;position:relative;gap:0;padding:0;margin:0}.card.variant-elevated{background:#fff}.card.variant-outlined{border:1px solid rgba(0,0,0,.12);box-shadow:none!important}.card.variant-filled{background-color:#0000000a;box-shadow:none!important}.card.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card.clickable:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-heavy)}.card.clickable:active{transform:translateY(0)}.card.clickable:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.card.loading{pointer-events:none;cursor:not-allowed}.card.disabled{pointer-events:none;cursor:not-allowed;opacity:.6}.card.disabled:hover{transform:none;box-shadow:inherit}.card.layout-left,.card.layout-right{flex-direction:row;align-items:stretch}.card.layout-left{flex-direction:row}.card.layout-right{flex-direction:row-reverse}.card.layout-top{flex-direction:column}.card.layout-bottom{flex-direction:column-reverse}.card:hover:not(.disabled):not(.loading){transform:translateY(-2px);box-shadow:var(--card-shadow-heavy)}.card .card-image-container{overflow:hidden;flex-shrink:0;position:relative;margin:0;padding:0;border:none}.card .card-image-container .card-img{object-fit:cover;transition:transform .3s ease;width:100%;height:100%;display:block;margin:0;padding:0;border:none}.card .card-image-container .card-img:hover{transform:scale(1.05)}.card .card-image-container .card-img.img-top{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.card .card-image-container .card-img.img-bottom{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.card .card-image-container .card-img.img-left{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.card .card-image-container .card-img.img-right{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.card .card-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:var(--padding, var(--card-padding))}.card .card-body{display:grid;gap:var(--gap, var(--card-gap));height:100%}.card .card-header{grid-area:header}.card .card-header:empty{display:none}.card .card-main{grid-area:main;flex:1}.card .card-footer{grid-area:footer;margin-top:auto}.card .card-footer:empty{display:none}.card .card-body{grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}.shadow-0{box-shadow:none}.shadow-1{box-shadow:0 1px 2px #0000001a}.shadow-2{box-shadow:0 2px 4px #00000026}.shadow-3{box-shadow:0 4px 8px #0003}.shadow-4{box-shadow:0 6px 12px #00000040}.shadow-5{box-shadow:0 8px 16px #0000004d}@media (max-width: 768px){.card.responsive.layout-left,.card.responsive.layout-right{flex-direction:column}.card.responsive.layout-left .card-image-container .card-img.img-left,.card.responsive.layout-left .card-image-container .card-img.img-right,.card.responsive.layout-right .card-image-container .card-img.img-left,.card.responsive.layout-right .card-image-container .card-img.img-right{border-radius:var(--border-radius) var(--border-radius) 0 0}.card.responsive .card-content{padding:calc(var(--card-padding) * .75)}.card.responsive .card-body{gap:calc(var(--card-gap) * .75)}}@media (max-width: 480px){.card.responsive.layout-left,.card.responsive.layout-right{flex-direction:column}.card.responsive .card-content{padding:calc(var(--card-padding) * .5)}.card.responsive .card-body{gap:calc(var(--card-gap) * .5)}.card.responsive .card-image-container{max-height:200px}.card.responsive .card-image-container .card-img{object-fit:cover;height:100%}.card.responsive:hover:not(.disabled):not(.loading){transform:none}}@media (min-width: 1200px){.card.responsive:hover:not(.disabled):not(.loading){transform:translateY(-4px);box-shadow:0 12px 24px #00000026}}@media (prefers-reduced-motion: reduce){.card{transition:none}.card:hover:not(.disabled):not(.loading){transform:none}.card .card-img{transition:none}.card .card-img:hover{transform:none}.card .loading-spinner{animation:none}}@media (prefers-contrast: high){.card{border:2px solid currentColor}}@media (prefers-color-scheme: dark){:host{--card-shadow-light: 0 1px 2px rgba(255, 255, 255, .1);--card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, .1)}}.card-loading-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;z-index:10;border-radius:inherit}.card-loading-overlay .loading-spinner{width:32px;height:32px;border:3px solid rgba(0,0,0,.1);border-left:3px solid #0066cc;border-radius:50%;animation:spin 1s linear infinite}.card-loading-overlay .loading-text{font-size:.875rem;color:#000000b3;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){:host{--card-shadow-light: 0 1px 2px rgba(255, 255, 255, .1);--card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, .1)}.card-loading-overlay{background:#000000e6}.card-loading-overlay .loading-text{color:#fffc}.card-loading-overlay .loading-spinner{border:3px solid rgba(255,255,255,.1);border-left:3px solid #66b3ff}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
693
+ }
694
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryCard, decorators: [{
695
+ type: Component,
696
+ args: [{ selector: 'magary-card', standalone: true, imports: [CommonModule], template: "<article\n [ngClass]=\"cardClasses()\"\n [ngStyle]=\"cardStyles()\"\n [attr.role]=\"clickable() ? 'button' : 'region'\"\n [attr.tabindex]=\"isInteractive() ? '0' : null\"\n [attr.aria-label]=\"\n 'Card with ' +\n (hasImage() ? 'image and ' : '') +\n 'content' +\n (clickable() ? '. Clickable' : '') +\n (loading() ? '. Loading' : '') +\n (disabled() ? '. Disabled' : '')\n \"\n [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n [attr.aria-busy]=\"loading() ? 'true' : null\"\n (click)=\"onCardClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n @if (hasImage()) {\n <div class=\"card-image-container\">\n <img\n [src]=\"img()\"\n [ngClass]=\"imageClasses()\"\n [ngStyle]=\"imageStyles()\"\n [alt]=\"altText()\"\n loading=\"lazy\"\n decoding=\"async\"\n />\n </div>\n }\n <div class=\"card-content\" [attr.aria-label]=\"'Card content'\">\n <div class=\"card-body\">\n @if (true) {\n <header class=\"card-header\" role=\"banner\">\n <ng-content select=\"[slot='header']\"></ng-content>\n </header>\n }\n <main class=\"card-main\" role=\"main\">\n <ng-content></ng-content>\n </main>\n @if (true) {\n <footer class=\"card-footer\" role=\"contentinfo\">\n <ng-content select=\"[slot='footer']\"></ng-content>\n </footer>\n }\n </div>\n </div>\n @if (showLoadingOverlay()) {\n <div\n class=\"card-loading-overlay\"\n role=\"status\"\n [attr.aria-label]=\"loadingText()\"\n >\n <div class=\"loading-spinner\" aria-hidden=\"true\"></div>\n <span class=\"loading-text\">{{ loadingText() }}</span>\n </div>\n }\n</article>\n", styles: [":host{--card-border-radius: .75rem;--card-gap: 1rem;--card-padding: 1rem;--card-transition: all .2s ease;--card-shadow-light: 0 1px 2px rgba(0, 0, 0, .1);--card-shadow-heavy: 0 8px 16px rgba(0, 0, 0, .3);display:block;margin:0;padding:0;border:none}*{box-sizing:border-box}.card{display:flex;flex-direction:column;border-radius:var(--border-radius, var(--card-border-radius));transition:var(--card-transition);overflow:hidden;position:relative;gap:0;padding:0;margin:0}.card.variant-elevated{background:#fff}.card.variant-outlined{border:1px solid rgba(0,0,0,.12);box-shadow:none!important}.card.variant-filled{background-color:#0000000a;box-shadow:none!important}.card.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card.clickable:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-heavy)}.card.clickable:active{transform:translateY(0)}.card.clickable:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.card.loading{pointer-events:none;cursor:not-allowed}.card.disabled{pointer-events:none;cursor:not-allowed;opacity:.6}.card.disabled:hover{transform:none;box-shadow:inherit}.card.layout-left,.card.layout-right{flex-direction:row;align-items:stretch}.card.layout-left{flex-direction:row}.card.layout-right{flex-direction:row-reverse}.card.layout-top{flex-direction:column}.card.layout-bottom{flex-direction:column-reverse}.card:hover:not(.disabled):not(.loading){transform:translateY(-2px);box-shadow:var(--card-shadow-heavy)}.card .card-image-container{overflow:hidden;flex-shrink:0;position:relative;margin:0;padding:0;border:none}.card .card-image-container .card-img{object-fit:cover;transition:transform .3s ease;width:100%;height:100%;display:block;margin:0;padding:0;border:none}.card .card-image-container .card-img:hover{transform:scale(1.05)}.card .card-image-container .card-img.img-top{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.card .card-image-container .card-img.img-bottom{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.card .card-image-container .card-img.img-left{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.card .card-image-container .card-img.img-right{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.card .card-content{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:var(--padding, var(--card-padding))}.card .card-body{display:grid;gap:var(--gap, var(--card-gap));height:100%}.card .card-header{grid-area:header}.card .card-header:empty{display:none}.card .card-main{grid-area:main;flex:1}.card .card-footer{grid-area:footer;margin-top:auto}.card .card-footer:empty{display:none}.card .card-body{grid-template-areas:\"header\" \"main\" \"footer\";grid-template-rows:auto 1fr auto}.shadow-0{box-shadow:none}.shadow-1{box-shadow:0 1px 2px #0000001a}.shadow-2{box-shadow:0 2px 4px #00000026}.shadow-3{box-shadow:0 4px 8px #0003}.shadow-4{box-shadow:0 6px 12px #00000040}.shadow-5{box-shadow:0 8px 16px #0000004d}@media (max-width: 768px){.card.responsive.layout-left,.card.responsive.layout-right{flex-direction:column}.card.responsive.layout-left .card-image-container .card-img.img-left,.card.responsive.layout-left .card-image-container .card-img.img-right,.card.responsive.layout-right .card-image-container .card-img.img-left,.card.responsive.layout-right .card-image-container .card-img.img-right{border-radius:var(--border-radius) var(--border-radius) 0 0}.card.responsive .card-content{padding:calc(var(--card-padding) * .75)}.card.responsive .card-body{gap:calc(var(--card-gap) * .75)}}@media (max-width: 480px){.card.responsive.layout-left,.card.responsive.layout-right{flex-direction:column}.card.responsive .card-content{padding:calc(var(--card-padding) * .5)}.card.responsive .card-body{gap:calc(var(--card-gap) * .5)}.card.responsive .card-image-container{max-height:200px}.card.responsive .card-image-container .card-img{object-fit:cover;height:100%}.card.responsive:hover:not(.disabled):not(.loading){transform:none}}@media (min-width: 1200px){.card.responsive:hover:not(.disabled):not(.loading){transform:translateY(-4px);box-shadow:0 12px 24px #00000026}}@media (prefers-reduced-motion: reduce){.card{transition:none}.card:hover:not(.disabled):not(.loading){transform:none}.card .card-img{transition:none}.card .card-img:hover{transform:none}.card .loading-spinner{animation:none}}@media (prefers-contrast: high){.card{border:2px solid currentColor}}@media (prefers-color-scheme: dark){:host{--card-shadow-light: 0 1px 2px rgba(255, 255, 255, .1);--card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, .1)}}.card-loading-overlay{position:absolute;inset:0;background:#ffffffe6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;z-index:10;border-radius:inherit}.card-loading-overlay .loading-spinner{width:32px;height:32px;border:3px solid rgba(0,0,0,.1);border-left:3px solid #0066cc;border-radius:50%;animation:spin 1s linear infinite}.card-loading-overlay .loading-text{font-size:.875rem;color:#000000b3;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){:host{--card-shadow-light: 0 1px 2px rgba(255, 255, 255, .1);--card-shadow-heavy: 0 8px 16px rgba(255, 255, 255, .1)}.card-loading-overlay{background:#000000e6}.card-loading-overlay .loading-text{color:#fffc}.card-loading-overlay .loading-spinner{border:3px solid rgba(255,255,255,.1);border-left:3px solid #66b3ff}}\n"] }]
697
+ }] });
698
+
699
+ class CardModule {
700
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
701
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: CardModule, imports: [CommonModule, MagaryCard], exports: [MagaryCard] });
702
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CardModule, imports: [CommonModule, MagaryCard] });
703
+ }
704
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: CardModule, decorators: [{
705
+ type: NgModule,
706
+ args: [{
707
+ declarations: [],
708
+ imports: [CommonModule, MagaryCard],
709
+ exports: [MagaryCard],
710
+ }]
711
+ }] });
712
+
713
+ class MagaryTab {
714
+ label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
715
+ active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
716
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
717
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryTab, isStandalone: true, selector: "magary-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (active()) {
718
+ <ng-content style="width: 100%;" />
719
+ }`, isInline: true });
720
+ }
721
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryTab, decorators: [{
722
+ type: Component,
723
+ args: [{
724
+ selector: 'magary-tab',
725
+ standalone: true,
726
+ template: `@if (active()) {
727
+ <ng-content style="width: 100%;" />
728
+ }`,
729
+ }]
730
+ }] });
731
+
732
+ class MagaryTabs {
733
+ tabs;
734
+ headersRef;
735
+ buttonsRef;
736
+ activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
737
+ backgroundLine = input('#000', ...(ngDevMode ? [{ debugName: "backgroundLine" }] : []));
738
+ positionContent = input('center', ...(ngDevMode ? [{ debugName: "positionContent" }] : []));
739
+ background = input('#fff', ...(ngDevMode ? [{ debugName: "background" }] : []));
740
+ padding = input('0', ...(ngDevMode ? [{ debugName: "padding" }] : []));
741
+ heightLine = input('5px', ...(ngDevMode ? [{ debugName: "heightLine" }] : []));
742
+ ngOnInit() {
743
+ this.activeIndex.set(0);
744
+ this.updateUnderlinePosition(0);
745
+ }
746
+ ngAfterContentInit() {
747
+ const tabsArray = this.tabs.toArray();
748
+ if (tabsArray.length > 0) {
749
+ tabsArray[0].active.set(true);
750
+ }
751
+ }
752
+ selectTab(index) {
753
+ this.tabs.forEach((tab, i) => tab.active.set(i === index));
754
+ this.activeIndex.set(index);
755
+ this.updateUnderlinePosition(index);
756
+ }
757
+ updateUnderlinePosition(index) {
758
+ setTimeout(() => {
759
+ const activeBtn = this.buttonsRef.toArray()[index]?.nativeElement;
760
+ const headersEl = this.headersRef.nativeElement;
761
+ if (activeBtn && headersEl) {
762
+ const left = activeBtn.offsetLeft;
763
+ const width = activeBtn.offsetWidth;
764
+ headersEl.style.setProperty('--underline-left', `${left}px`);
765
+ headersEl.style.setProperty('--underline-width', `${width}px`);
766
+ }
767
+ }, 0);
768
+ }
769
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
770
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: MagaryTabs, isStandalone: true, selector: "magary-tabs", inputs: { backgroundLine: { classPropertyName: "backgroundLine", publicName: "backgroundLine", isSignal: true, isRequired: false, transformFunction: null }, positionContent: { classPropertyName: "positionContent", publicName: "positionContent", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, heightLine: { classPropertyName: "heightLine", publicName: "heightLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: MagaryTab }], viewQueries: [{ propertyName: "headersRef", first: true, predicate: ["tabHeaders"], descendants: true }, { propertyName: "buttonsRef", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs\">\n <div\n class=\"tab-headers\"\n #tabHeaders\n [style.--background-color-line]=\"backgroundLine()\"\n [style.--height-line]=\"heightLine()\"\n >\n @for (tab of tabs.toArray(); track $index) {\n <button\n #tabButton\n (click)=\"selectTab($index)\"\n [class.active]=\"activeIndex() === $index\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n <div\n class=\"tab-content\"\n [style.--position-content]=\"positionContent()\"\n [style.--background]=\"background()\"\n [style.--padding]=\"padding()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tabs{border:1px solid #ccc;border-radius:8px;overflow:hidden;background:#fff}.tab-headers{display:flex;border-bottom:1px solid #ddd;position:relative}.tab-headers:after{content:\"\";position:absolute;bottom:-1px;height:var(--height-line);background-color:var(--background-color-line);transition:left .4s ease-in-out,width .4s ease-in-out;left:var(--underline-left, 0);width:var(--underline-width, 0)}.tab-headers button{flex:1;padding:1rem;background:none;border:none;cursor:pointer;font-weight:700;transition:background .3s;z-index:1}.tab-headers button:hover{background:#f0f0f0}.tab-headers button.active{background:#f9f9f9;color:#000;height:4px}.tab-content{padding:var(--padding);display:flex;justify-content:var(--position-content);background:var(--background)}.tab-content.animated{animation:slideIn .7s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"] });
771
+ }
772
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: MagaryTabs, decorators: [{
773
+ type: Component,
774
+ args: [{ selector: 'magary-tabs', imports: [], template: "<div class=\"tabs\">\n <div\n class=\"tab-headers\"\n #tabHeaders\n [style.--background-color-line]=\"backgroundLine()\"\n [style.--height-line]=\"heightLine()\"\n >\n @for (tab of tabs.toArray(); track $index) {\n <button\n #tabButton\n (click)=\"selectTab($index)\"\n [class.active]=\"activeIndex() === $index\"\n >\n {{ tab.label() }}\n </button>\n }\n </div>\n <div\n class=\"tab-content\"\n [style.--position-content]=\"positionContent()\"\n [style.--background]=\"background()\"\n [style.--padding]=\"padding()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tabs{border:1px solid #ccc;border-radius:8px;overflow:hidden;background:#fff}.tab-headers{display:flex;border-bottom:1px solid #ddd;position:relative}.tab-headers:after{content:\"\";position:absolute;bottom:-1px;height:var(--height-line);background-color:var(--background-color-line);transition:left .4s ease-in-out,width .4s ease-in-out;left:var(--underline-left, 0);width:var(--underline-width, 0)}.tab-headers button{flex:1;padding:1rem;background:none;border:none;cursor:pointer;font-weight:700;transition:background .3s;z-index:1}.tab-headers button:hover{background:#f0f0f0}.tab-headers button.active{background:#f9f9f9;color:#000;height:4px}.tab-content{padding:var(--padding);display:flex;justify-content:var(--position-content);background:var(--background)}.tab-content.animated{animation:slideIn .7s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}\n"] }]
775
+ }], propDecorators: { tabs: [{
776
+ type: ContentChildren,
777
+ args: [MagaryTab]
778
+ }], headersRef: [{
779
+ type: ViewChild,
780
+ args: ['tabHeaders']
781
+ }], buttonsRef: [{
782
+ type: ViewChildren,
783
+ args: ['tabButton']
784
+ }] } });
785
+
786
+ class TabsModule {
787
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
788
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: TabsModule, imports: [CommonModule, MagaryTabs, MagaryTab], exports: [MagaryTabs, MagaryTab] });
789
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsModule, imports: [CommonModule] });
790
+ }
791
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsModule, decorators: [{
792
+ type: NgModule,
793
+ args: [{
794
+ declarations: [],
795
+ imports: [CommonModule, MagaryTabs, MagaryTab],
796
+ exports: [MagaryTabs, MagaryTab],
797
+ }]
798
+ }] });
799
+
800
+ // 🔘 Button //
801
+
802
+ /*
803
+ * Public API Surface of ng-magary
804
+ */
805
+
806
+ /**
807
+ * Generated bundle index. Do not edit.
808
+ */
809
+
810
+ export { AvatarModule, ButtonModule, CardModule, CascadeSelect, CascadeSelectModule, InputModule, MagaryAvatar, MagaryButton, MagaryCard, MagaryInput, MagaryPanelmenu, MagarySpeedDial, MagaryTab, MagaryTabs, PanelmenuModule, Sidebar, SidebarModule, SpeedDialModule, TabsModule };
811
+ //# sourceMappingURL=ng-magary.mjs.map