ng-magary 0.0.21 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ng-magary.mjs +85 -38
- package/fesm2022/ng-magary.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/magary-core.scss +161 -0
- package/types/ng-magary.d.ts +11 -4
package/fesm2022/ng-magary.mjs
CHANGED
|
@@ -79,11 +79,11 @@ class MagaryButton {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
82
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", 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: { onClick: "onClick", buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n [disabled]=\"isDisabled()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n [ngClass]=\"buttonClasses()\"\r\n [attr.aria-label]=\"effectiveAriaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n>\r\n @if (loading()) {\r\n <lucide-icon\r\n name=\"loader\"\r\n class=\"p-button-loading-icon spin\"\r\n aria-hidden=\"true\"\r\n [size]=\"iconSize()\"\r\n [style.width.px]=\"iconSize()\"\r\n ></lucide-icon>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"left\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\n }\n @if (label()) {\r\n <span class=\"p-button-label\">{{ label() }}</span>\r\n } @else if (!icon()) {\r\n <span class=\"p-button-label\"> </span>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"right\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\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:var(--primary-500);color:#fff}.p-button.p-button-primary:hover{background-color:var(--primary-600)}.p-button.p-button-text.p-button-primary{background-color:transparent;color:var(--primary-500)}.p-button.p-button-text.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent)}.p-button.p-button-outlined.p-button-primary{background-color:transparent;border-color:var(--primary-500);color:var(--primary-500)}.p-button.p-button-outlined.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent);color:var(--primary-500)}.p-button.p-button-secondary{background-color:#64748b;color:#fff}.p-button.p-button-secondary:hover{background-color:#475569}.p-button.p-button-text.p-button-secondary{background-color:transparent;color:#64748b}.p-button.p-button-text.p-button-secondary:hover{background-color:color-mix(in srgb,#64748b 10%,transparent)}.p-button.p-button-outlined.p-button-secondary{background-color:transparent;border-color:#64748b;color:#64748b}.p-button.p-button-outlined.p-button-secondary:hover{background-color:color-mix(in srgb,#64748b 10%,transparent);color:#64748b}.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:color-mix(in srgb,#22c55e 10%,transparent)}.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:color-mix(in srgb,#22c55e 10%,transparent);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:color-mix(in srgb,#ef4444 10%,transparent)}.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:color-mix(in srgb,#ef4444 10%,transparent);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:color-mix(in srgb,#0ea5e9 10%,transparent)}.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:color-mix(in srgb,#0ea5e9 10%,transparent);color:#0ea5e9}.p-button.p-button-warning{background-color:#e7c52d;color:#1f2937}.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:color-mix(in srgb,#e7c52d 10%,transparent)}.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:color-mix(in srgb,#e7c52d 10%,transparent);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:color-mix(in srgb,#a855f7 10%,transparent)}.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:color-mix(in srgb,#a855f7 10%,transparent);color:#a855f7}.spin{animation:pi-spin 1s linear infinite}@keyframes pi-spin{to{transform:rotate(360deg)}}.shadow-0{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: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
82
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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 }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", 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: { onClick: "onClick", buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n [disabled]=\"isDisabled()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n [ngClass]=\"buttonClasses()\"\r\n [attr.aria-label]=\"effectiveAriaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n>\r\n @if (loading()) {\r\n <lucide-icon\r\n name=\"loader\"\r\n class=\"p-button-loading-icon spin\"\r\n aria-hidden=\"true\"\r\n [size]=\"iconSize()\"\r\n [style.width.px]=\"iconSize()\"\r\n ></lucide-icon>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"left\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\n }\n @if (label()) {\r\n <span class=\"p-button-label\">{{ label() }}</span>\r\n } @else if (!icon()) {\r\n <span class=\"p-button-label\"> </span>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"right\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\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:var(--primary-500, #007bff);color:var(--text-primary-invert, #ffffff);min-height:44px;font-size:1rem}.p-button:hover{background-color:var(--primary-600, #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:var(--primary-500, #007bff)}.p-button.p-button-text:hover{background-color:color-mix(in srgb,var(--primary-500, #007bff) 10%,transparent)}.p-button.p-button-outlined{background-color:transparent;border:2px solid;color:var(--primary-500, #007bff)}.p-button.p-button-outlined:hover{background-color:var(--primary-500, #007bff);color:var(--text-primary-invert, #ffffff)}.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:var(--primary-500);color:var(--text-primary-invert, #ffffff)}.p-button.p-button-primary:hover{background-color:var(--primary-600)}.p-button.p-button-text.p-button-primary{background-color:transparent;color:var(--primary-500)}.p-button.p-button-text.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent)}.p-button.p-button-outlined.p-button-primary{background-color:transparent;border-color:var(--primary-500);color:var(--primary-500)}.p-button.p-button-outlined.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent);color:var(--primary-500)}.p-button.p-button-secondary{background-color:var(--surface-500, #64748b);color:#fff}.p-button.p-button-secondary:hover{background-color:var(--surface-600, #475569)}.p-button.p-button-text.p-button-secondary{background-color:transparent;color:var(--surface-500, #64748b)}.p-button.p-button-text.p-button-secondary:hover{background-color:color-mix(in srgb,var(--surface-500, #64748b) 10%,transparent)}.p-button.p-button-outlined.p-button-secondary{background-color:transparent;border-color:var(--surface-500, #64748b);color:var(--surface-500, #64748b)}.p-button.p-button-outlined.p-button-secondary:hover{background-color:color-mix(in srgb,var(--surface-500, #64748b) 10%,transparent);color:var(--surface-500, #64748b)}.p-button.p-button-success{background-color:var(--green-500, #22c55e);color:#fff}.p-button.p-button-success:hover{background-color:var(--green-600, #16a34a)}.p-button.p-button-text.p-button-success{background-color:transparent;color:var(--green-500, #22c55e)}.p-button.p-button-text.p-button-success:hover{background-color:color-mix(in srgb,var(--green-500, #22c55e) 10%,transparent)}.p-button.p-button-outlined.p-button-success{background-color:transparent;border-color:var(--green-500, #22c55e);color:var(--green-500, #22c55e)}.p-button.p-button-outlined.p-button-success:hover{background-color:color-mix(in srgb,var(--green-500, #22c55e) 10%,transparent);color:var(--green-500, #22c55e)}.p-button.p-button-danger{background-color:var(--red-500, #ef4444);color:#fff}.p-button.p-button-danger:hover{background-color:var(--red-600, #dc2626)}.p-button.p-button-text.p-button-danger{background-color:transparent;color:var(--red-500, #ef4444)}.p-button.p-button-text.p-button-danger:hover{background-color:color-mix(in srgb,var(--red-500, #ef4444) 10%,transparent)}.p-button.p-button-outlined.p-button-danger{background-color:transparent;border-color:var(--red-500, #ef4444);color:var(--red-500, #ef4444)}.p-button.p-button-outlined.p-button-danger:hover{background-color:color-mix(in srgb,var(--red-500, #ef4444) 10%,transparent);color:var(--red-500, #ef4444)}.p-button.p-button-info{background-color:var(--blue-500, #3b82f6);color:#fff}.p-button.p-button-info:hover{background-color:var(--blue-600, #2563eb)}.p-button.p-button-text.p-button-info{background-color:transparent;color:var(--blue-500, #3b82f6)}.p-button.p-button-text.p-button-info:hover{background-color:color-mix(in srgb,var(--blue-500, #3b82f6) 10%,transparent)}.p-button.p-button-outlined.p-button-info{background-color:transparent;border-color:var(--blue-500, #3b82f6);color:var(--blue-500, #3b82f6)}.p-button.p-button-outlined.p-button-info:hover{background-color:color-mix(in srgb,var(--blue-500, #3b82f6) 10%,transparent);color:var(--blue-500, #3b82f6)}.p-button.p-button-warning{background-color:var(--orange-500, #f97316);color:#1f2937}.p-button.p-button-warning:hover{background-color:var(--orange-600, #ea580c)}.p-button.p-button-text.p-button-warning{background-color:transparent;color:var(--orange-500, #f97316)}.p-button.p-button-text.p-button-warning:hover{background-color:color-mix(in srgb,var(--orange-500, #f97316) 10%,transparent)}.p-button.p-button-outlined.p-button-warning{background-color:transparent;border-color:var(--orange-500, #f97316);color:var(--orange-500, #f97316)}.p-button.p-button-outlined.p-button-warning:hover{background-color:color-mix(in srgb,var(--orange-500, #f97316) 10%,transparent);color:var(--orange-500, #f97316)}.p-button.p-button-help{background-color:var(--help, #8b5cf6);color:#fff}.p-button.p-button-help:hover{background-color:var(--primary-600, #7c3aed)}.p-button.p-button-text.p-button-help{background-color:transparent;color:var(--help, #8b5cf6)}.p-button.p-button-text.p-button-help:hover{background-color:color-mix(in srgb,var(--help, #8b5cf6) 10%,transparent)}.p-button.p-button-outlined.p-button-help{background-color:transparent;border-color:var(--help, #8b5cf6);color:var(--help, #8b5cf6)}.p-button.p-button-outlined.p-button-help:hover{background-color:color-mix(in srgb,var(--help, #8b5cf6) 10%,transparent);color:var(--help, #8b5cf6)}.p-button.p-button-premium{background-color:var(--premium-500);color:#1f2937}.p-button.p-button-premium:hover{background-color:var(--premium-600)}.p-button.p-button-text.p-button-premium{background-color:transparent;color:var(--premium-500)}.p-button.p-button-text.p-button-premium:hover{background-color:color-mix(in srgb,var(--premium-500) 10%,transparent)}.p-button.p-button-outlined.p-button-premium{background-color:transparent;border-color:var(--premium-500);color:var(--premium-500)}.p-button.p-button-outlined.p-button-premium:hover{background-color:color-mix(in srgb,var(--premium-500) 10%,transparent);color:var(--premium-500)}.spin{animation:pi-spin 1s linear infinite}@keyframes pi-spin{to{transform:rotate(360deg)}}.shadow-0{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: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryButton, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
|
-
args: [{ selector: 'magary-button', standalone: true, imports: [CommonModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n type=\"button\"\r\n [disabled]=\"isDisabled()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n [ngClass]=\"buttonClasses()\"\r\n [attr.aria-label]=\"effectiveAriaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n>\r\n @if (loading()) {\r\n <lucide-icon\r\n name=\"loader\"\r\n class=\"p-button-loading-icon spin\"\r\n aria-hidden=\"true\"\r\n [size]=\"iconSize()\"\r\n [style.width.px]=\"iconSize()\"\r\n ></lucide-icon>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"left\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\n }\n @if (label()) {\r\n <span class=\"p-button-label\">{{ label() }}</span>\r\n } @else if (!icon()) {\r\n <span class=\"p-button-label\"> </span>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"right\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\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
|
|
86
|
+
args: [{ selector: 'magary-button', standalone: true, imports: [CommonModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n type=\"button\"\r\n [disabled]=\"isDisabled()\"\r\n [ngStyle]=\"buttonStyles()\"\r\n [ngClass]=\"buttonClasses()\"\r\n [attr.aria-label]=\"effectiveAriaLabel()\"\r\n [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\r\n (click)=\"onButtonClick($event)\"\r\n>\r\n @if (loading()) {\r\n <lucide-icon\r\n name=\"loader\"\r\n class=\"p-button-loading-icon spin\"\r\n aria-hidden=\"true\"\r\n [size]=\"iconSize()\"\r\n [style.width.px]=\"iconSize()\"\r\n ></lucide-icon>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"left\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\n }\n @if (label()) {\r\n <span class=\"p-button-label\">{{ label() }}</span>\r\n } @else if (!icon()) {\r\n <span class=\"p-button-label\"> </span>\r\n }\r\n @if (icon() && !loading() && iconPos() === \"right\") {\n <lucide-icon\n [name]=\"icon()\"\n class=\"p-button-icon\"\n aria-hidden=\"true\"\n [size]=\"iconSize()\"\n [style.width.px]=\"iconSize()\"\n ></lucide-icon>\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:var(--primary-500, #007bff);color:var(--text-primary-invert, #ffffff);min-height:44px;font-size:1rem}.p-button:hover{background-color:var(--primary-600, #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:var(--primary-500, #007bff)}.p-button.p-button-text:hover{background-color:color-mix(in srgb,var(--primary-500, #007bff) 10%,transparent)}.p-button.p-button-outlined{background-color:transparent;border:2px solid;color:var(--primary-500, #007bff)}.p-button.p-button-outlined:hover{background-color:var(--primary-500, #007bff);color:var(--text-primary-invert, #ffffff)}.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:var(--primary-500);color:var(--text-primary-invert, #ffffff)}.p-button.p-button-primary:hover{background-color:var(--primary-600)}.p-button.p-button-text.p-button-primary{background-color:transparent;color:var(--primary-500)}.p-button.p-button-text.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent)}.p-button.p-button-outlined.p-button-primary{background-color:transparent;border-color:var(--primary-500);color:var(--primary-500)}.p-button.p-button-outlined.p-button-primary:hover{background-color:color-mix(in srgb,var(--primary-500) 10%,transparent);color:var(--primary-500)}.p-button.p-button-secondary{background-color:var(--surface-500, #64748b);color:#fff}.p-button.p-button-secondary:hover{background-color:var(--surface-600, #475569)}.p-button.p-button-text.p-button-secondary{background-color:transparent;color:var(--surface-500, #64748b)}.p-button.p-button-text.p-button-secondary:hover{background-color:color-mix(in srgb,var(--surface-500, #64748b) 10%,transparent)}.p-button.p-button-outlined.p-button-secondary{background-color:transparent;border-color:var(--surface-500, #64748b);color:var(--surface-500, #64748b)}.p-button.p-button-outlined.p-button-secondary:hover{background-color:color-mix(in srgb,var(--surface-500, #64748b) 10%,transparent);color:var(--surface-500, #64748b)}.p-button.p-button-success{background-color:var(--green-500, #22c55e);color:#fff}.p-button.p-button-success:hover{background-color:var(--green-600, #16a34a)}.p-button.p-button-text.p-button-success{background-color:transparent;color:var(--green-500, #22c55e)}.p-button.p-button-text.p-button-success:hover{background-color:color-mix(in srgb,var(--green-500, #22c55e) 10%,transparent)}.p-button.p-button-outlined.p-button-success{background-color:transparent;border-color:var(--green-500, #22c55e);color:var(--green-500, #22c55e)}.p-button.p-button-outlined.p-button-success:hover{background-color:color-mix(in srgb,var(--green-500, #22c55e) 10%,transparent);color:var(--green-500, #22c55e)}.p-button.p-button-danger{background-color:var(--red-500, #ef4444);color:#fff}.p-button.p-button-danger:hover{background-color:var(--red-600, #dc2626)}.p-button.p-button-text.p-button-danger{background-color:transparent;color:var(--red-500, #ef4444)}.p-button.p-button-text.p-button-danger:hover{background-color:color-mix(in srgb,var(--red-500, #ef4444) 10%,transparent)}.p-button.p-button-outlined.p-button-danger{background-color:transparent;border-color:var(--red-500, #ef4444);color:var(--red-500, #ef4444)}.p-button.p-button-outlined.p-button-danger:hover{background-color:color-mix(in srgb,var(--red-500, #ef4444) 10%,transparent);color:var(--red-500, #ef4444)}.p-button.p-button-info{background-color:var(--blue-500, #3b82f6);color:#fff}.p-button.p-button-info:hover{background-color:var(--blue-600, #2563eb)}.p-button.p-button-text.p-button-info{background-color:transparent;color:var(--blue-500, #3b82f6)}.p-button.p-button-text.p-button-info:hover{background-color:color-mix(in srgb,var(--blue-500, #3b82f6) 10%,transparent)}.p-button.p-button-outlined.p-button-info{background-color:transparent;border-color:var(--blue-500, #3b82f6);color:var(--blue-500, #3b82f6)}.p-button.p-button-outlined.p-button-info:hover{background-color:color-mix(in srgb,var(--blue-500, #3b82f6) 10%,transparent);color:var(--blue-500, #3b82f6)}.p-button.p-button-warning{background-color:var(--orange-500, #f97316);color:#1f2937}.p-button.p-button-warning:hover{background-color:var(--orange-600, #ea580c)}.p-button.p-button-text.p-button-warning{background-color:transparent;color:var(--orange-500, #f97316)}.p-button.p-button-text.p-button-warning:hover{background-color:color-mix(in srgb,var(--orange-500, #f97316) 10%,transparent)}.p-button.p-button-outlined.p-button-warning{background-color:transparent;border-color:var(--orange-500, #f97316);color:var(--orange-500, #f97316)}.p-button.p-button-outlined.p-button-warning:hover{background-color:color-mix(in srgb,var(--orange-500, #f97316) 10%,transparent);color:var(--orange-500, #f97316)}.p-button.p-button-help{background-color:var(--help, #8b5cf6);color:#fff}.p-button.p-button-help:hover{background-color:var(--primary-600, #7c3aed)}.p-button.p-button-text.p-button-help{background-color:transparent;color:var(--help, #8b5cf6)}.p-button.p-button-text.p-button-help:hover{background-color:color-mix(in srgb,var(--help, #8b5cf6) 10%,transparent)}.p-button.p-button-outlined.p-button-help{background-color:transparent;border-color:var(--help, #8b5cf6);color:var(--help, #8b5cf6)}.p-button.p-button-outlined.p-button-help:hover{background-color:color-mix(in srgb,var(--help, #8b5cf6) 10%,transparent);color:var(--help, #8b5cf6)}.p-button.p-button-premium{background-color:var(--premium-500);color:#1f2937}.p-button.p-button-premium:hover{background-color:var(--premium-600)}.p-button.p-button-text.p-button-premium{background-color:transparent;color:var(--premium-500)}.p-button.p-button-text.p-button-premium:hover{background-color:color-mix(in srgb,var(--premium-500) 10%,transparent)}.p-button.p-button-outlined.p-button-premium{background-color:transparent;border-color:var(--premium-500);color:var(--premium-500)}.p-button.p-button-outlined.p-button-premium:hover{background-color:color-mix(in srgb,var(--premium-500) 10%,transparent);color:var(--premium-500)}.spin{animation:pi-spin 1s linear infinite}@keyframes pi-spin{to{transform:rotate(360deg)}}.shadow-0{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"] }]
|
|
87
87
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], customBackgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customBackgroundColor", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
88
88
|
|
|
89
89
|
class MagarySpeedDial {
|
|
@@ -6648,6 +6648,9 @@ class MagaryGalleria {
|
|
|
6648
6648
|
templates = contentChildren(TemplateRef, ...(ngDevMode ? [{ debugName: "templates" }] : []));
|
|
6649
6649
|
containerRef = viewChild('galleriaContainer', ...(ngDevMode ? [{ debugName: "containerRef" }] : []));
|
|
6650
6650
|
currentImageRef = viewChild('currentImage', ...(ngDevMode ? [{ debugName: "currentImageRef" }] : []));
|
|
6651
|
+
previewDialog = viewChild('previewDialog', ...(ngDevMode ? [{ debugName: "previewDialog" }] : []));
|
|
6652
|
+
thumbItems = viewChildren('thumbItem', ...(ngDevMode ? [{ debugName: "thumbItems" }] : []));
|
|
6653
|
+
previewThumbItems = viewChildren('previewThumbItem', ...(ngDevMode ? [{ debugName: "previewThumbItems" }] : []));
|
|
6651
6654
|
// Templates Inputs
|
|
6652
6655
|
itemTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "itemTemplateRef" }] : []));
|
|
6653
6656
|
thumbnailTemplateRef = input(...(ngDevMode ? [undefined, { debugName: "thumbnailTemplateRef" }] : []));
|
|
@@ -6689,6 +6692,11 @@ class MagaryGalleria {
|
|
|
6689
6692
|
}
|
|
6690
6693
|
ngAfterViewInit() {
|
|
6691
6694
|
this.applyTheme();
|
|
6695
|
+
requestAnimationFrame(() => {
|
|
6696
|
+
requestAnimationFrame(() => {
|
|
6697
|
+
this.scrollThumbIntoView(this.activeIndex());
|
|
6698
|
+
});
|
|
6699
|
+
});
|
|
6692
6700
|
}
|
|
6693
6701
|
// Computed properties
|
|
6694
6702
|
activeItem = computed(() => {
|
|
@@ -6744,6 +6752,43 @@ class MagaryGalleria {
|
|
|
6744
6752
|
// Model automatically emits activeIndexChange to parent if bound
|
|
6745
6753
|
this.resetProgress();
|
|
6746
6754
|
this.preloadNearbyImages(index);
|
|
6755
|
+
queueMicrotask(() => {
|
|
6756
|
+
requestAnimationFrame(() => this.scrollThumbIntoView(index));
|
|
6757
|
+
});
|
|
6758
|
+
}
|
|
6759
|
+
scrollThumbIntoView(index) {
|
|
6760
|
+
// Scroll main galleria thumbnail
|
|
6761
|
+
const thumb = this.thumbItems()?.[index]?.nativeElement;
|
|
6762
|
+
if (thumb) {
|
|
6763
|
+
this.scrollElementInContainer(thumb);
|
|
6764
|
+
}
|
|
6765
|
+
// Scroll preview dialog thumbnail
|
|
6766
|
+
const previewThumb = this.previewThumbItems()?.[index]?.nativeElement;
|
|
6767
|
+
if (previewThumb) {
|
|
6768
|
+
this.scrollElementInContainer(previewThumb);
|
|
6769
|
+
}
|
|
6770
|
+
}
|
|
6771
|
+
scrollElementInContainer(el) {
|
|
6772
|
+
const container = el.closest('.galleria-thumbnail-wrapper, .galleria-thumbnail-container, .galleria-preview-thumbnails');
|
|
6773
|
+
if (!container)
|
|
6774
|
+
return;
|
|
6775
|
+
const cRect = container.getBoundingClientRect();
|
|
6776
|
+
const eRect = el.getBoundingClientRect();
|
|
6777
|
+
// si el contenedor realmente puede scrollear verticalmente, usa top
|
|
6778
|
+
const canScrollY = container.scrollHeight > container.clientHeight + 1;
|
|
6779
|
+
const canScrollX = container.scrollWidth > container.clientWidth + 1;
|
|
6780
|
+
if (canScrollY && !canScrollX) {
|
|
6781
|
+
const delta = ((eRect.top + eRect.bottom) / 2) - ((cRect.top + cRect.bottom) / 2);
|
|
6782
|
+
const target = container.scrollTop + delta;
|
|
6783
|
+
const max = container.scrollHeight - container.clientHeight;
|
|
6784
|
+
container.scrollTo({ top: Math.max(0, Math.min(max, target)), behavior: 'smooth' });
|
|
6785
|
+
return;
|
|
6786
|
+
}
|
|
6787
|
+
// default horizontal
|
|
6788
|
+
const delta = ((eRect.left + eRect.right) / 2) - ((cRect.left + cRect.right) / 2);
|
|
6789
|
+
const target = container.scrollLeft + delta;
|
|
6790
|
+
const max = container.scrollWidth - container.clientWidth;
|
|
6791
|
+
container.scrollTo({ left: Math.max(0, Math.min(max, target)), behavior: 'smooth' });
|
|
6747
6792
|
}
|
|
6748
6793
|
onThumbnailClick(index) {
|
|
6749
6794
|
const wasPlaying = this.isPlaying();
|
|
@@ -6812,37 +6857,41 @@ class MagaryGalleria {
|
|
|
6812
6857
|
resetProgress() {
|
|
6813
6858
|
this.progressValue.set(0);
|
|
6814
6859
|
}
|
|
6815
|
-
// Fullscreen
|
|
6860
|
+
// Fullscreen (Preview Dialog Overlay)
|
|
6816
6861
|
toggleFullScreen() {
|
|
6817
6862
|
if (isPlatformBrowser(this.platformId)) {
|
|
6818
6863
|
const newState = !this.isFullscreen();
|
|
6819
6864
|
this.isFullscreen.set(newState);
|
|
6820
6865
|
this.onFullScreenChange.emit(newState);
|
|
6821
6866
|
if (newState) {
|
|
6822
|
-
|
|
6823
|
-
if (elem?.requestFullscreen) {
|
|
6824
|
-
elem.requestFullscreen();
|
|
6825
|
-
}
|
|
6826
|
-
else if (elem?.webkitRequestFullscreen) {
|
|
6827
|
-
elem.webkitRequestFullscreen();
|
|
6828
|
-
}
|
|
6829
|
-
else if (elem?.mozRequestFullScreen) {
|
|
6830
|
-
elem.mozRequestFullScreen();
|
|
6831
|
-
}
|
|
6867
|
+
this.openPreviewDialog();
|
|
6832
6868
|
}
|
|
6833
6869
|
else {
|
|
6834
|
-
|
|
6835
|
-
document.exitFullscreen();
|
|
6836
|
-
}
|
|
6837
|
-
else if (document.webkitExitFullscreen) {
|
|
6838
|
-
document.webkitExitFullscreen?.();
|
|
6839
|
-
}
|
|
6840
|
-
else if (document.mozCancelFullScreen) {
|
|
6841
|
-
document.mozCancelFullScreen?.();
|
|
6842
|
-
}
|
|
6870
|
+
this.closePreviewDialog();
|
|
6843
6871
|
}
|
|
6844
6872
|
}
|
|
6845
6873
|
}
|
|
6874
|
+
openPreviewDialog() {
|
|
6875
|
+
const dialog = this.previewDialog()?.nativeElement;
|
|
6876
|
+
if (dialog && !dialog.open) {
|
|
6877
|
+
dialog.showModal();
|
|
6878
|
+
}
|
|
6879
|
+
}
|
|
6880
|
+
closePreviewDialog() {
|
|
6881
|
+
const dialog = this.previewDialog()?.nativeElement;
|
|
6882
|
+
if (dialog?.open) {
|
|
6883
|
+
dialog.close();
|
|
6884
|
+
}
|
|
6885
|
+
if (this.isFullscreen()) {
|
|
6886
|
+
this.isFullscreen.set(false);
|
|
6887
|
+
this.onFullScreenChange.emit(false);
|
|
6888
|
+
}
|
|
6889
|
+
if (this.presentationMode()) {
|
|
6890
|
+
this.presentationMode.set(false);
|
|
6891
|
+
this.stopSlideShow();
|
|
6892
|
+
}
|
|
6893
|
+
this.resetZoom();
|
|
6894
|
+
}
|
|
6846
6895
|
// Presentation mode
|
|
6847
6896
|
togglePresentationMode() {
|
|
6848
6897
|
if (!this.allowPresentationMode())
|
|
@@ -6986,13 +7035,11 @@ class MagaryGalleria {
|
|
|
6986
7035
|
break;
|
|
6987
7036
|
}
|
|
6988
7037
|
}
|
|
6989
|
-
|
|
6990
|
-
|
|
6991
|
-
this.isFullscreen
|
|
6992
|
-
|
|
6993
|
-
|
|
6994
|
-
this.presentationMode.set(false);
|
|
6995
|
-
this.stopSlideShow();
|
|
7038
|
+
// Keyboard listener for dialog overlay
|
|
7039
|
+
onDocumentKeyDown(event) {
|
|
7040
|
+
if (event.key === 'Escape' && this.isFullscreen()) {
|
|
7041
|
+
event.preventDefault();
|
|
7042
|
+
this.closePreviewDialog();
|
|
6996
7043
|
}
|
|
6997
7044
|
}
|
|
6998
7045
|
// Touch/Swipe support
|
|
@@ -7150,7 +7197,7 @@ class MagaryGalleria {
|
|
|
7150
7197
|
this.stopSlideShow();
|
|
7151
7198
|
}
|
|
7152
7199
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryGalleria, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
7153
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MagaryGalleria, isStandalone: true, selector: "magary-galleria", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: true, isRequired: false, transformFunction: null }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigatorsOnHover: { classPropertyName: "showItemNavigatorsOnHover", publicName: "showItemNavigatorsOnHover", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, thumbnailsPosition: { classPropertyName: "thumbnailsPosition", publicName: "thumbnailsPosition", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, showIndicatorsOnItem: { classPropertyName: "showIndicatorsOnItem", publicName: "showIndicatorsOnItem", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, transitionInterval: { classPropertyName: "transitionInterval", publicName: "transitionInterval", isSignal: true, isRequired: false, transformFunction: null }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: true, isRequired: false, transformFunction: null }, showFullScreenButton: { classPropertyName: "showFullScreenButton", publicName: "showFullScreenButton", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showShareButton: { classPropertyName: "showShareButton", publicName: "showShareButton", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, showImageCounter: { classPropertyName: "showImageCounter", publicName: "showImageCounter", isSignal: true, isRequired: false, transformFunction: null }, showPlayPauseButton: { classPropertyName: "showPlayPauseButton", publicName: "showPlayPauseButton", isSignal: true, isRequired: false, transformFunction: null }, enableZoom: { classPropertyName: "enableZoom", publicName: "enableZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoomLevel: { classPropertyName: "maxZoomLevel", publicName: "maxZoomLevel", isSignal: true, isRequired: false, transformFunction: null }, enableSwipe: { classPropertyName: "enableSwipe", publicName: "enableSwipe", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardNavigation: { classPropertyName: "enableKeyboardNavigation", publicName: "enableKeyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, enableDoubleClickZoom: { classPropertyName: "enableDoubleClickZoom", publicName: "enableDoubleClickZoom", isSignal: true, isRequired: false, transformFunction: null }, enablePinchZoom: { classPropertyName: "enablePinchZoom", publicName: "enablePinchZoom", isSignal: true, isRequired: false, transformFunction: null }, transitionEffect: { classPropertyName: "transitionEffect", publicName: "transitionEffect", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, preloadRange: { classPropertyName: "preloadRange", publicName: "preloadRange", isSignal: true, isRequired: false, transformFunction: null }, showLoadingSpinner: { classPropertyName: "showLoadingSpinner", publicName: "showLoadingSpinner", isSignal: true, isRequired: false, transformFunction: null }, captionPosition: { classPropertyName: "captionPosition", publicName: "captionPosition", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, allowPresentationMode: { classPropertyName: "allowPresentationMode", publicName: "allowPresentationMode", isSignal: true, isRequired: false, transformFunction: null }, presentationAutoPlay: { classPropertyName: "presentationAutoPlay", publicName: "presentationAutoPlay", isSignal: true, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateRef: { classPropertyName: "itemTemplateRef", publicName: "itemTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, thumbnailTemplateRef: { classPropertyName: "thumbnailTemplateRef", publicName: "thumbnailTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, captionTemplateRef: { classPropertyName: "captionTemplateRef", publicName: "captionTemplateRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", onImageClick: "onImageClick", onFullScreenChange: "onFullScreenChange", onImageLoad: "onImageLoad", onImageError: "onImageError", onShare: "onShare", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:keydown": "handleKeyboardEvent($event)", "document:fullscreenchange": "onFullScreenChangeHandler()" }, properties: { "class.magary-galleria-thumbnails-left": "thumbnailsPosition() === \"left\"", "class.magary-galleria-thumbnails-right": "thumbnailsPosition() === \"right\"", "class.magary-galleria-thumbnails-top": "thumbnailsPosition() === \"top\"", "class.magary-galleria-thumbnails-bottom": "thumbnailsPosition() === \"bottom\"", "class.magary-galleria-fullscreen": "isFullscreen()", "class.magary-galleria-presentation-mode": "presentationMode()", "style.width": "\"100%\"", "style.max-width": "width()" }, classAttribute: "magary-galleria" }, queries: [{ propertyName: "templates", predicate: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["galleriaContainer"], descendants: true, isSignal: true }, { propertyName: "currentImageRef", first: true, predicate: ["currentImage"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #galleriaContainer class=\"galleria-container\" [ngStyle]=\"containerStyle()\">\r\n <!-- Main Item Display -->\r\n <div\r\n class=\"galleria-item-wrapper\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (touchmove)=\"onTouchMove($event)\"\r\n (touchend)=\"onTouchEnd($event)\"\r\n >\r\n <!-- Progress Bar -->\r\n @if (showProgressBar() && isPlaying()) {\r\n <div class=\"galleria-progress\">\r\n <div\r\n class=\"galleria-progress-bar\"\r\n [style.width.%]=\"progressValue()\"\r\n ></div>\r\n </div>\r\n }\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter() && !presentationMode()) {\r\n <div class=\"galleria-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Control Buttons -->\r\n @if (!presentationMode()) {\r\n <div class=\"galleria-controls\">\r\n <!-- Play/Pause -->\r\n @if (showPlayPauseButton() && autoPlay()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n [class.playing]=\"isPlaying()\"\r\n (click)=\"togglePlayPause()\"\r\n [attr.aria-label]=\"isPlaying() ? 'Pause' : 'Play'\"\r\n >\r\n @if (isPlaying()) {\r\n <lucide-icon name=\"pause\"></lucide-icon>\r\n }\r\n @if (!isPlaying()) {\r\n <lucide-icon name=\"play\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- Presentation Mode -->\r\n @if (allowPresentationMode()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"togglePresentationMode()\"\r\n aria-label=\"Presentation mode\"\r\n title=\"Presentation mode (P)\"\r\n >\r\n <lucide-icon name=\"monitor-play\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Share -->\r\n @if (showShareButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"shareImage()\"\r\n aria-label=\"Share\"\r\n title=\"Share image\"\r\n >\r\n <lucide-icon name=\"share-2\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Download -->\r\n @if (showDownloadButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"downloadImage()\"\r\n aria-label=\"Download\"\r\n title=\"Download image\"\r\n >\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Fullscreen -->\r\n @if (showFullScreenButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"toggleFullScreen()\"\r\n [attr.aria-label]=\"\r\n isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'\r\n \"\r\n title=\"Fullscreen (F)\"\r\n >\r\n @if (isFullscreen()) {\r\n <lucide-icon name=\"minimize\"></lucide-icon>\r\n }\r\n @if (!isFullscreen()) {\r\n <lucide-icon name=\"maximize\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Zoom Controls -->\r\n @if (enableZoom() && isZoomed()) {\r\n <div class=\"galleria-zoom-controls\">\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomIn()\"\r\n [disabled]=\"zoomLevel() >= maxZoomLevel()\"\r\n aria-label=\"Zoom in\"\r\n title=\"Zoom in (+)\"\r\n >\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomOut()\"\r\n [disabled]=\"zoomLevel() <= 1\"\r\n aria-label=\"Zoom out\"\r\n title=\"Zoom out (-)\"\r\n >\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"resetZoom()\"\r\n aria-label=\"Reset zoom\"\r\n title=\"Reset zoom (0)\"\r\n >\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Item Container -->\r\n <div class=\"galleria-item-container\">\r\n <!-- Loading Spinner -->\r\n @if (isLoading()) {\r\n <div class=\"galleria-loading\"></div>\r\n }\r\n\r\n <!-- Navigation Buttons -->\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-prev\"\r\n (click)=\"prev()\"\r\n [disabled]=\"!canGoPrev()\"\r\n aria-label=\"Previous\"\r\n >\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-next\"\r\n (click)=\"next()\"\r\n [disabled]=\"!canGoNext()\"\r\n aria-label=\"Next\"\r\n >\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Item Display -->\r\n <div\r\n class=\"galleria-item\"\r\n [class.transition-fade]=\"transitionEffect() === 'fade'\"\r\n [class.transition-slide]=\"transitionEffect() === 'slide'\"\r\n [class.transition-zoom]=\"transitionEffect() === 'zoom'\"\r\n [class.transition-flip]=\"transitionEffect() === 'flip'\"\r\n >\r\n <!-- Custom Template -->\r\n @if (itemTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n <!-- Default Image/Video Display -->\r\n @if (!itemTemplateRef() && activeItem()) {\r\n <ng-container>\r\n <!-- Image -->\r\n @if (!activeItem()?.type || activeItem()?.type === \"image\") {\r\n <img\r\n #currentImage\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"\r\n activeItem()?.alt || activeItem()?.title || 'Gallery image'\r\n \"\r\n [class.zoomed]=\"isZoomed()\"\r\n [style.transform]=\"transformStyle()\"\r\n (click)=\"onItemClick(activeItem())\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (load)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n draggable=\"false\"\r\n />\r\n }\r\n\r\n <!-- Video -->\r\n @if (activeItem()?.type === \"video\") {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n (loadeddata)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n ></video>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n\r\n <!-- Caption Overlay -->\r\n <!-- Complex condition simplified logic: activeItem is verified -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() !== \"outside\"\r\n ) {\r\n <div\r\n class=\"galleria-caption\"\r\n [class.caption-overlay]=\"captionPosition() === 'overlay'\"\r\n >\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators on Item -->\r\n @if (showIndicators() && showIndicatorsOnItem()) {\r\n <ul class=\"galleria-indicators\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Caption Outside -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() === \"outside\"\r\n ) {\r\n <div class=\"galleria-caption caption-outside\">\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators Below Item -->\r\n @if (showIndicators() && !showIndicatorsOnItem()) {\r\n <ul\r\n class=\"galleria-indicators\"\r\n [style.position]=\"'relative'\"\r\n [style.bottom]=\"'auto'\"\r\n [style.padding]=\"'1rem'\"\r\n [style.background]=\"'var(--surface-50, #f9fafb)'\"\r\n >\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-thumbnail-wrapper\">\r\n <div class=\"galleria-thumbnail-container\">\r\n <div class=\"galleria-thumbnail-items\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n class=\"galleria-thumbnail-item\"\r\n [class.galleria-thumbnail-item-active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n [attr.aria-label]=\"'Thumbnail ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n >\r\n @if (thumbnailTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n thumbnailTemplateRef();\r\n context: { $implicit: item, index: i }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!thumbnailTemplateRef()) {\r\n <div class=\"galleria-thumbnail-content\">\r\n @if (\r\n shouldLoadImage(i) && (!item.type || item.type === \"image\")\r\n ) {\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || item.title || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (shouldLoadImage(i) && item.type === \"video\") {\r\n <video\r\n [poster]=\"item.thumbnail || item.src\"\r\n draggable=\"false\"\r\n ></video>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".magary-galleria{display:flex;flex-direction:column;position:relative;box-shadow:0 10px 40px #00000026,0 0 0 1px #0000000d;border-radius:16px;overflow:hidden;background:var(--surface-0, #fff);transition:all .4s cubic-bezier(.4,0,.2,1);--galleria-accent-color: #3b82f6}.magary-galleria:hover{box-shadow:0 20px 60px #0003,0 0 0 1px #00000014;transform:translateY(-2px)}.magary-galleria.magary-galleria-fullscreen{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;transform:none}.magary-galleria.magary-galleria-fullscreen .galleria-item-wrapper{min-height:100vh;border-radius:0}.magary-galleria.magary-galleria-fullscreen .galleria-item img{max-height:calc(100vh - 100px)}.magary-galleria.magary-galleria-fullscreen .galleria-thumbnail-wrapper{max-height:150px}.magary-galleria.magary-galleria-presentation-mode .galleria-controls,.magary-galleria.magary-galleria-presentation-mode .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-presentation-mode .galleria-counter{opacity:0;pointer-events:none;transition:opacity .3s ease}.magary-galleria.magary-galleria-presentation-mode:hover .galleria-controls,.magary-galleria.magary-galleria-presentation-mode:hover .galleria-counter{opacity:1;pointer-events:auto}.magary-galleria.magary-galleria-thumbnails-left{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:-1;border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-left .galleria-item-wrapper{border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-right{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:1;border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-right .galleria-item-wrapper{border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-top .galleria-thumbnail-wrapper{order:-1;border-radius:16px 16px 0 0}.magary-galleria.magary-galleria-thumbnails-top .galleria-item-wrapper,.magary-galleria.magary-galleria-thumbnails-bottom .galleria-thumbnail-wrapper{border-radius:0 0 16px 16px}.magary-galleria .galleria-container{display:flex;flex-direction:column;flex-grow:1;position:relative}.magary-galleria.magary-galleria-thumbnails-left .galleria-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-container{flex-direction:row}.magary-galleria .galleria-item-wrapper{display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f0f,#1e1e1e,#0f0f0f);min-height:500px;border-radius:16px 16px 0 0}.magary-galleria .galleria-item-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;-webkit-user-select:none;user-select:none}.magary-galleria .galleria-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--galleria-accent-color);border-radius:50%;animation:spin .8s linear infinite;z-index:5}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.magary-galleria .galleria-item{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .3s ease}.magary-galleria .galleria-item.transition-fade{animation:fadeEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-slide{animation:slideEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-zoom{animation:zoomEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-flip{animation:flipEffect .7s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1);border-radius:4px}.magary-galleria .galleria-item img.zoomed,.magary-galleria .galleria-item video.zoomed{cursor:move}.magary-galleria .galleria-item img:not(.zoomed),.magary-galleria .galleria-item video:not(.zoomed){cursor:zoom-in}.magary-galleria .galleria-item video{max-width:90%}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}@keyframes slideEffect{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes zoomEffect{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes flipEffect{0%{opacity:0;transform:perspective(1000px) rotateY(90deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}.magary-galleria .galleria-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:15;transition:opacity .3s ease}.magary-galleria .galleria-control-button{background:#000000b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.15)}.magary-galleria .galleria-control-button lucide-icon{width:1.25rem;height:1.25rem;stroke-width:2px}.magary-galleria .galleria-control-button:hover{background:#000000d9;transform:scale(1.1);box-shadow:0 4px 12px #0006}.magary-galleria .galleria-control-button:active{transform:scale(.95)}.magary-galleria .galleria-control-button.playing{background:rgba(var(--galleria-accent-color),.9)}.magary-galleria .galleria-zoom-controls{position:absolute;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:15;opacity:0;transition:opacity .3s ease}.magary-galleria:hover .magary-galleria .galleria-zoom-controls{opacity:1}.magary-galleria .galleria-item-nav{background:#ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fffffff2;width:4rem;height:4rem;margin:0 1.5rem;border-radius:50%;transition:all .35s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.15);position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0003}.magary-galleria .galleria-item-nav:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#fff3,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease}.magary-galleria .galleria-item-nav:hover{background:#ffffff2e;color:#fff;transform:translateY(-50%) scale(1.15);border-color:#ffffff4d;box-shadow:0 8px 24px #0000004d}.magary-galleria .galleria-item-nav:hover:before{opacity:1}.magary-galleria .galleria-item-nav:active{transform:translateY(-50%) scale(1.05)}.magary-galleria .galleria-item-nav:disabled{opacity:0;cursor:default;pointer-events:none}.magary-galleria .galleria-item-nav lucide-icon{width:2rem;height:2rem;stroke-width:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.magary-galleria .galleria-item-prev{left:0}.magary-galleria .galleria-item-next{right:0}.magary-galleria .galleria-counter{position:absolute;top:1rem;left:1rem;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:.625rem 1.25rem;border-radius:24px;font-size:.9375rem;font-weight:600;z-index:15;letter-spacing:.5px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d;transition:all .3s ease}.magary-galleria .galleria-counter:hover{background:#000000d9;transform:scale(1.05)}.magary-galleria .galleria-progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#ffffff26;z-index:15;overflow:hidden}.magary-galleria .galleria-progress:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.magary-galleria .galleria-progress .galleria-progress-bar{height:100%;background:linear-gradient(90deg,var(--galleria-accent-color) 0%,color-mix(in srgb,var(--galleria-accent-color) 80%,white) 100%);transition:width .05s linear;box-shadow:0 0 20px var(--galleria-accent-color),0 0 40px color-mix(in srgb,var(--galleria-accent-color) 50%,transparent);position:relative}.magary-galleria .galleria-progress .galleria-progress-bar:after{content:\"\";position:absolute;right:0;top:0;width:100px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}.magary-galleria .galleria-caption{position:absolute;bottom:0;left:0;width:100%;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 50%,transparent 100%);color:#fff;z-index:10;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-caption.caption-outside{position:relative;background:var(--surface-50, #f9fafb);color:var(--text-color, #1f2937);padding:1.5rem}.magary-galleria .galleria-caption .caption-title{font-size:1.375rem;font-weight:700;margin-bottom:.625rem;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:-.02em}.magary-galleria .galleria-caption .caption-description{font-size:.9375rem;opacity:.95;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.5)}.magary-galleria .galleria-indicators{margin:0;padding:1.25rem;list-style-type:none;display:flex;align-items:center;justify-content:center;position:absolute;bottom:1.5rem;left:0;width:100%;z-index:10;gap:.625rem}.magary-galleria .galleria-indicators .galleria-indicator-button{background-color:#ffffff59;width:10px;height:10px;border-radius:50%;transition:all .4s cubic-bezier(.4,0,.2,1);border:none;padding:0;cursor:pointer;position:relative;box-shadow:0 2px 4px #0003}.magary-galleria .galleria-indicators .galleria-indicator-button:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .3s ease}.magary-galleria .galleria-indicators .galleria-indicator-button:hover{background-color:#ffffffb3;transform:scale(1.3)}.magary-galleria .galleria-indicators .galleria-indicator-button:hover:before{border-color:#ffffff4d}.magary-galleria .galleria-indicators li.galleria-indicator-active .galleria-indicator-button{background-color:#fff;width:28px;border-radius:6px;transform:scale(1);box-shadow:0 0 12px #fff9,0 0 24px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0;background:linear-gradient(135deg,#18181b,#27272a,#18181b);padding:1.25rem;justify-content:center;border-top:1px solid rgba(255,255,255,.05)}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar{width:10px;height:10px}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-track{background:#ffffff08;border-radius:5px;margin:.5rem}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff3,#ffffff26);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background .3s ease}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff59,#ffffff40);background-clip:padding-box}.magary-galleria .galleria-thumbnail-container{display:flex;flex-direction:row;width:100%;height:100%}.magary-galleria .galleria-thumbnail-items{display:flex;gap:1rem;justify-content:center;align-items:center;width:100%}.magary-galleria .galleria-thumbnail-item{overflow:hidden;cursor:pointer;opacity:.4;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:10px;border:3px solid transparent;flex-shrink:0;position:relative;background:#0000004d}.magary-galleria .galleria-thumbnail-item:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#00000080,#0003);opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:1}.magary-galleria .galleria-thumbnail-item:after{content:\"\";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff1a;pointer-events:none;z-index:2}.magary-galleria .galleria-thumbnail-item:hover{opacity:.75;transform:translateY(-6px) scale(1.05);border-color:#fff3}.magary-galleria .galleria-thumbnail-item:hover:before{opacity:.3}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active{opacity:1;border-color:var(--galleria-accent-color);transform:translateY(-6px) scale(1.1);box-shadow:0 8px 24px #0006,0 0 0 1px var(--galleria-accent-color),0 0 20px color-mix(in srgb,var(--galleria-accent-color) 40%,transparent)}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:before{opacity:0}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:after{box-shadow:inset 0 0 0 2px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{display:flex;align-items:center;justify-content:center;width:100px;height:70px;position:relative}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content img,.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content video{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:1024px){.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:500px}}@media(max-width:768px){.magary-galleria{border-radius:12px}.magary-galleria .galleria-item-wrapper{min-height:350px;border-radius:12px 12px 0 0}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:400px}.magary-galleria .galleria-item-nav{width:3rem;height:3rem;margin:0 .75rem}.magary-galleria .galleria-item-nav-icon{font-size:1.25rem}.magary-galleria .galleria-counter{font-size:.8125rem;padding:.5rem 1rem}.magary-galleria .galleria-control-button{width:2.5rem;height:2.5rem;font-size:1rem}.magary-galleria .galleria-controls{top:.75rem;right:.75rem;gap:.375rem}.magary-galleria .galleria-caption{padding:1.25rem}.magary-galleria .galleria-caption .caption-title{font-size:1.125rem}.magary-galleria .galleria-caption .caption-description{font-size:.8125rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:75px;height:55px}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{width:100px}}@media(max-width:480px){.magary-galleria{border-radius:8px}.magary-galleria .galleria-item-wrapper{min-height:280px}.magary-galleria .galleria-item img{max-height:300px}.magary-galleria .galleria-item-nav{width:2.5rem;height:2.5rem;margin:0 .5rem}.magary-galleria .galleria-thumbnail-wrapper{padding:.75rem}.magary-galleria .galleria-thumbnail-items{gap:.5rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:60px;height:45px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: GalleriaIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7200
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MagaryGalleria, isStandalone: true, selector: "magary-galleria", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, responsiveOptions: { classPropertyName: "responsiveOptions", publicName: "responsiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigators: { classPropertyName: "showItemNavigators", publicName: "showItemNavigators", isSignal: true, isRequired: false, transformFunction: null }, showThumbnailNavigators: { classPropertyName: "showThumbnailNavigators", publicName: "showThumbnailNavigators", isSignal: true, isRequired: false, transformFunction: null }, showItemNavigatorsOnHover: { classPropertyName: "showItemNavigatorsOnHover", publicName: "showItemNavigatorsOnHover", isSignal: true, isRequired: false, transformFunction: null }, showThumbnails: { classPropertyName: "showThumbnails", publicName: "showThumbnails", isSignal: true, isRequired: false, transformFunction: null }, thumbnailsPosition: { classPropertyName: "thumbnailsPosition", publicName: "thumbnailsPosition", isSignal: true, isRequired: false, transformFunction: null }, showIndicators: { classPropertyName: "showIndicators", publicName: "showIndicators", isSignal: true, isRequired: false, transformFunction: null }, showIndicatorsOnItem: { classPropertyName: "showIndicatorsOnItem", publicName: "showIndicatorsOnItem", isSignal: true, isRequired: false, transformFunction: null }, indicatorPosition: { classPropertyName: "indicatorPosition", publicName: "indicatorPosition", isSignal: true, isRequired: false, transformFunction: null }, circular: { classPropertyName: "circular", publicName: "circular", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, transitionInterval: { classPropertyName: "transitionInterval", publicName: "transitionInterval", isSignal: true, isRequired: false, transformFunction: null }, changeItemOnIndicatorHover: { classPropertyName: "changeItemOnIndicatorHover", publicName: "changeItemOnIndicatorHover", isSignal: true, isRequired: false, transformFunction: null }, showFullScreenButton: { classPropertyName: "showFullScreenButton", publicName: "showFullScreenButton", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showShareButton: { classPropertyName: "showShareButton", publicName: "showShareButton", isSignal: true, isRequired: false, transformFunction: null }, showProgressBar: { classPropertyName: "showProgressBar", publicName: "showProgressBar", isSignal: true, isRequired: false, transformFunction: null }, showImageCounter: { classPropertyName: "showImageCounter", publicName: "showImageCounter", isSignal: true, isRequired: false, transformFunction: null }, showPlayPauseButton: { classPropertyName: "showPlayPauseButton", publicName: "showPlayPauseButton", isSignal: true, isRequired: false, transformFunction: null }, enableZoom: { classPropertyName: "enableZoom", publicName: "enableZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoomLevel: { classPropertyName: "maxZoomLevel", publicName: "maxZoomLevel", isSignal: true, isRequired: false, transformFunction: null }, enableSwipe: { classPropertyName: "enableSwipe", publicName: "enableSwipe", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardNavigation: { classPropertyName: "enableKeyboardNavigation", publicName: "enableKeyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, enableDoubleClickZoom: { classPropertyName: "enableDoubleClickZoom", publicName: "enableDoubleClickZoom", isSignal: true, isRequired: false, transformFunction: null }, enablePinchZoom: { classPropertyName: "enablePinchZoom", publicName: "enablePinchZoom", isSignal: true, isRequired: false, transformFunction: null }, transitionEffect: { classPropertyName: "transitionEffect", publicName: "transitionEffect", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, preloadRange: { classPropertyName: "preloadRange", publicName: "preloadRange", isSignal: true, isRequired: false, transformFunction: null }, showLoadingSpinner: { classPropertyName: "showLoadingSpinner", publicName: "showLoadingSpinner", isSignal: true, isRequired: false, transformFunction: null }, captionPosition: { classPropertyName: "captionPosition", publicName: "captionPosition", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, allowPresentationMode: { classPropertyName: "allowPresentationMode", publicName: "allowPresentationMode", isSignal: true, isRequired: false, transformFunction: null }, presentationAutoPlay: { classPropertyName: "presentationAutoPlay", publicName: "presentationAutoPlay", isSignal: true, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, accentColor: { classPropertyName: "accentColor", publicName: "accentColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateRef: { classPropertyName: "itemTemplateRef", publicName: "itemTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, thumbnailTemplateRef: { classPropertyName: "thumbnailTemplateRef", publicName: "thumbnailTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, captionTemplateRef: { classPropertyName: "captionTemplateRef", publicName: "captionTemplateRef", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange", onImageClick: "onImageClick", onFullScreenChange: "onFullScreenChange", onImageLoad: "onImageLoad", onImageError: "onImageError", onShare: "onShare", onDownload: "onDownload" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class.magary-galleria-thumbnails-left": "thumbnailsPosition() === \"left\"", "class.magary-galleria-thumbnails-right": "thumbnailsPosition() === \"right\"", "class.magary-galleria-thumbnails-top": "thumbnailsPosition() === \"top\"", "class.magary-galleria-thumbnails-bottom": "thumbnailsPosition() === \"bottom\"", "class.magary-galleria-fullscreen": "isFullscreen()", "class.magary-galleria-presentation-mode": "presentationMode()", "style.width": "\"100%\"", "style.max-width": "width()" }, classAttribute: "magary-galleria" }, queries: [{ propertyName: "templates", predicate: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["galleriaContainer"], descendants: true, isSignal: true }, { propertyName: "currentImageRef", first: true, predicate: ["currentImage"], descendants: true, isSignal: true }, { propertyName: "previewDialog", first: true, predicate: ["previewDialog"], descendants: true, isSignal: true }, { propertyName: "thumbItems", predicate: ["thumbItem"], descendants: true, isSignal: true }, { propertyName: "previewThumbItems", predicate: ["previewThumbItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #galleriaContainer class=\"galleria-container\" [ngStyle]=\"containerStyle()\">\r\n <!-- Main Item Display -->\r\n <div\r\n class=\"galleria-item-wrapper\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (touchmove)=\"onTouchMove($event)\"\r\n (touchend)=\"onTouchEnd($event)\"\r\n >\r\n <!-- Progress Bar -->\r\n @if (showProgressBar() && isPlaying()) {\r\n <div class=\"galleria-progress\">\r\n <div\r\n class=\"galleria-progress-bar\"\r\n [style.width.%]=\"progressValue()\"\r\n ></div>\r\n </div>\r\n }\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter() && !presentationMode()) {\r\n <div class=\"galleria-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Control Buttons -->\r\n @if (!presentationMode()) {\r\n <div class=\"galleria-controls\">\r\n <!-- Play/Pause -->\r\n @if (showPlayPauseButton() && autoPlay()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n [class.playing]=\"isPlaying()\"\r\n (click)=\"togglePlayPause()\"\r\n [attr.aria-label]=\"isPlaying() ? 'Pause' : 'Play'\"\r\n >\r\n @if (isPlaying()) {\r\n <lucide-icon name=\"pause\"></lucide-icon>\r\n }\r\n @if (!isPlaying()) {\r\n <lucide-icon name=\"play\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- Presentation Mode -->\r\n @if (allowPresentationMode()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"togglePresentationMode()\"\r\n aria-label=\"Presentation mode\"\r\n title=\"Presentation mode (P)\"\r\n >\r\n <lucide-icon name=\"monitor-play\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Share -->\r\n @if (showShareButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"shareImage()\"\r\n aria-label=\"Share\"\r\n title=\"Share image\"\r\n >\r\n <lucide-icon name=\"share-2\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Download -->\r\n @if (showDownloadButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"downloadImage()\"\r\n aria-label=\"Download\"\r\n title=\"Download image\"\r\n >\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Fullscreen -->\r\n @if (showFullScreenButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"toggleFullScreen()\"\r\n [attr.aria-label]=\"\r\n isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'\r\n \"\r\n title=\"Fullscreen (F)\"\r\n >\r\n @if (isFullscreen()) {\r\n <lucide-icon name=\"minimize\"></lucide-icon>\r\n }\r\n @if (!isFullscreen()) {\r\n <lucide-icon name=\"maximize\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Zoom Controls -->\r\n @if (enableZoom() && isZoomed()) {\r\n <div class=\"galleria-zoom-controls\">\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomIn()\"\r\n [disabled]=\"zoomLevel() >= maxZoomLevel()\"\r\n aria-label=\"Zoom in\"\r\n title=\"Zoom in (+)\"\r\n >\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomOut()\"\r\n [disabled]=\"zoomLevel() <= 1\"\r\n aria-label=\"Zoom out\"\r\n title=\"Zoom out (-)\"\r\n >\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"resetZoom()\"\r\n aria-label=\"Reset zoom\"\r\n title=\"Reset zoom (0)\"\r\n >\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Item Container -->\r\n <div class=\"galleria-item-container\">\r\n <!-- Loading Spinner -->\r\n @if (isLoading()) {\r\n <div class=\"galleria-loading\"></div>\r\n }\r\n\r\n <!-- Navigation Buttons -->\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-prev\"\r\n (click)=\"prev()\"\r\n [disabled]=\"!canGoPrev()\"\r\n aria-label=\"Previous\"\r\n >\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-next\"\r\n (click)=\"next()\"\r\n [disabled]=\"!canGoNext()\"\r\n aria-label=\"Next\"\r\n >\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Item Display -->\r\n <div\r\n class=\"galleria-item\"\r\n [class.transition-fade]=\"transitionEffect() === 'fade'\"\r\n [class.transition-slide]=\"transitionEffect() === 'slide'\"\r\n [class.transition-zoom]=\"transitionEffect() === 'zoom'\"\r\n [class.transition-flip]=\"transitionEffect() === 'flip'\"\r\n >\r\n <!-- Custom Template -->\r\n @if (itemTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n <!-- Default Image/Video Display -->\r\n @if (!itemTemplateRef() && activeItem()) {\r\n <ng-container>\r\n <!-- Image -->\r\n @if (!activeItem()?.type || activeItem()?.type === \"image\") {\r\n <img\r\n #currentImage\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"\r\n activeItem()?.alt || activeItem()?.title || 'Gallery image'\r\n \"\r\n [class.zoomed]=\"isZoomed()\"\r\n [style.transform]=\"transformStyle()\"\r\n (click)=\"onItemClick(activeItem())\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (load)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n draggable=\"false\"\r\n />\r\n }\r\n\r\n <!-- Video -->\r\n @if (activeItem()?.type === \"video\") {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n (loadeddata)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n ></video>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n\r\n <!-- Caption Overlay -->\r\n <!-- Complex condition simplified logic: activeItem is verified -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() !== \"outside\"\r\n ) {\r\n <div\r\n class=\"galleria-caption\"\r\n [class.caption-overlay]=\"captionPosition() === 'overlay'\"\r\n >\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators on Item -->\r\n @if (showIndicators() && showIndicatorsOnItem()) {\r\n <ul class=\"galleria-indicators\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Caption Outside -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() === \"outside\"\r\n ) {\r\n <div class=\"galleria-caption caption-outside\">\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators Below Item -->\r\n @if (showIndicators() && !showIndicatorsOnItem()) {\r\n <ul\r\n class=\"galleria-indicators\"\r\n [style.position]=\"'relative'\"\r\n [style.bottom]=\"'auto'\"\r\n [style.padding]=\"'1rem'\"\r\n [style.background]=\"'var(--surface-50, #f9fafb)'\"\r\n >\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-thumbnail-wrapper\">\r\n <div class=\"galleria-thumbnail-container\">\r\n <div class=\"galleria-thumbnail-items\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n #thumbItem\r\n class=\"galleria-thumbnail-item\"\r\n [class.galleria-thumbnail-item-active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n [attr.aria-label]=\"'Thumbnail ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n >\r\n @if (thumbnailTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n thumbnailTemplateRef();\r\n context: { $implicit: item, index: i }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!thumbnailTemplateRef()) {\r\n <div class=\"galleria-thumbnail-content\">\r\n @if (\r\n shouldLoadImage(i) && (!item.type || item.type === \"image\")\r\n ) {\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || item.title || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (shouldLoadImage(i) && item.type === \"video\") {\r\n <video\r\n [poster]=\"item.thumbnail || item.src\"\r\n draggable=\"false\"\r\n ></video>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Preview Dialog Overlay (replaces native fullscreen) -->\r\n<dialog\r\n #previewDialog\r\n class=\"galleria-preview-dialog\"\r\n (click)=\"closePreviewDialog()\"\r\n (cancel)=\"closePreviewDialog()\"\r\n>\r\n <!-- Toolbar -->\r\n <div class=\"galleria-preview-toolbar\" (click)=\"$event.stopPropagation()\">\r\n @if (enableZoom()) {\r\n <button class=\"galleria-preview-action\" (click)=\"zoomOut()\" aria-label=\"Zoom out\">\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button class=\"galleria-preview-action\" (click)=\"zoomIn()\" aria-label=\"Zoom in\">\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n }\r\n @if (isZoomed()) {\r\n <button class=\"galleria-preview-action\" (click)=\"resetZoom()\" aria-label=\"Reset zoom\">\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n }\r\n @if (showDownloadButton()) {\r\n <button class=\"galleria-preview-action\" (click)=\"downloadImage()\" aria-label=\"Download\">\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n <button class=\"galleria-preview-action\" (click)=\"closePreviewDialog()\" aria-label=\"Close\">\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Gallery Content -->\r\n <div class=\"galleria-preview-content\" (click)=\"$event.stopPropagation()\">\r\n <!-- Image Area -->\r\n <div class=\"galleria-preview-item-area\">\r\n <!-- Navigation: Prev -->\r\n @if (showItemNavigators() && canGoPrev()) {\r\n <button class=\"galleria-preview-nav galleria-preview-prev\" (click)=\"prev()\" aria-label=\"Previous\">\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Image -->\r\n @if (activeItem()) {\r\n @if (!activeItem()?.type || activeItem()?.type === 'image') {\r\n <img\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"activeItem()?.alt || activeItem()?.title || 'Gallery image'\"\r\n class=\"galleria-preview-image\"\r\n [style.transform]=\"transformStyle()\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (activeItem()?.type === 'video') {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n class=\"galleria-preview-image\"\r\n ></video>\r\n }\r\n }\r\n\r\n <!-- Navigation: Next -->\r\n @if (showItemNavigators() && canGoNext()) {\r\n <button class=\"galleria-preview-nav galleria-preview-next\" (click)=\"next()\" aria-label=\"Next\">\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter()) {\r\n <div class=\"galleria-preview-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-preview-thumbnails\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n #previewThumbItem\r\n class=\"galleria-preview-thumb\"\r\n [class.active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n >\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</dialog>\r\n", styles: ["@charset \"UTF-8\";.magary-galleria{display:flex;flex-direction:column;position:relative;box-shadow:0 10px 40px #00000026,0 0 0 1px #0000000d;border-radius:16px;overflow:hidden;background:var(--surface-0, #fff);transition:all .4s cubic-bezier(.4,0,.2,1);--galleria-accent-color: #3b82f6}.magary-galleria:hover{box-shadow:0 20px 60px #0003,0 0 0 1px #00000014;transform:translateY(-2px)}.magary-galleria.magary-galleria-fullscreen{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;transform:none}.magary-galleria.magary-galleria-fullscreen .galleria-item-wrapper{min-height:100vh;border-radius:0}.magary-galleria.magary-galleria-fullscreen .galleria-item img{max-height:calc(100vh - 100px)}.magary-galleria.magary-galleria-fullscreen .galleria-thumbnail-wrapper{max-height:150px}.magary-galleria.magary-galleria-presentation-mode .galleria-controls,.magary-galleria.magary-galleria-presentation-mode .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-presentation-mode .galleria-counter{opacity:0;pointer-events:none;transition:opacity .3s ease}.magary-galleria.magary-galleria-presentation-mode:hover .galleria-controls,.magary-galleria.magary-galleria-presentation-mode:hover .galleria-counter{opacity:1;pointer-events:auto}.magary-galleria.magary-galleria-thumbnails-left{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:-1;border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-left .galleria-item-wrapper{border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-right{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:1;border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-right .galleria-item-wrapper{border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item:hover,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item:hover{transform:scale(1.05)}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item-active,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item-active{transform:scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{padding-top:1.5rem;padding-bottom:1.75rem;scroll-padding-top:1.5rem;scroll-padding-bottom:1.75rem}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{justify-content:flex-start}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item-active{transform:translate(2px) scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item-active{transform:translate(-2px) scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-top .galleria-thumbnail-wrapper{order:-1;border-radius:16px 16px 0 0}.magary-galleria.magary-galleria-thumbnails-top .galleria-item-wrapper,.magary-galleria.magary-galleria-thumbnails-bottom .galleria-thumbnail-wrapper{border-radius:0 0 16px 16px}.magary-galleria .galleria-container{display:flex;flex-direction:column;flex-grow:1;position:relative}.magary-galleria.magary-galleria-thumbnails-left .galleria-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-container{flex-direction:row}.magary-galleria .galleria-item-wrapper{display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f0f,#1e1e1e,#0f0f0f);min-height:auto;border-radius:16px 16px 0 0}.magary-galleria .galleria-item-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;-webkit-user-select:none;user-select:none}.magary-galleria .galleria-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--galleria-accent-color);border-radius:50%;animation:spin .8s linear infinite;z-index:5}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.magary-galleria .galleria-item{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .3s ease}.magary-galleria .galleria-item.transition-fade{animation:fadeEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-slide{animation:slideEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-zoom{animation:zoomEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-flip{animation:flipEffect .7s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1);border-radius:4px}.magary-galleria .galleria-item img.zoomed,.magary-galleria .galleria-item video.zoomed{cursor:move}.magary-galleria .galleria-item img:not(.zoomed),.magary-galleria .galleria-item video:not(.zoomed){cursor:zoom-in}.magary-galleria .galleria-item video{max-width:90%}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}@keyframes slideEffect{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes zoomEffect{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes flipEffect{0%{opacity:0;transform:perspective(1000px) rotateY(90deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}.magary-galleria .galleria-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:15;transition:opacity .3s ease}.magary-galleria .galleria-control-button{background:#000000b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.15)}.magary-galleria .galleria-control-button lucide-icon{width:1.25rem;height:1.25rem;stroke-width:2px}.magary-galleria .galleria-control-button:hover{background:#000000d9;transform:scale(1.1);box-shadow:0 4px 12px #0006}.magary-galleria .galleria-control-button:active{transform:scale(.95)}.magary-galleria .galleria-control-button.playing{background:rgba(var(--galleria-accent-color),.9)}.magary-galleria .galleria-zoom-controls{position:absolute;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:15;opacity:0;transition:opacity .3s ease}.magary-galleria:hover .magary-galleria .galleria-zoom-controls{opacity:1}.magary-galleria .galleria-item-nav{background:#ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fffffff2;width:4rem;height:4rem;margin:0 1.5rem;border-radius:50%;transition:all .35s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.15);position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0003}.magary-galleria .galleria-item-nav:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#fff3,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease}.magary-galleria .galleria-item-nav:hover{background:#ffffff2e;color:#fff;transform:translateY(-50%) scale(1.15);border-color:#ffffff4d;box-shadow:0 8px 24px #0000004d}.magary-galleria .galleria-item-nav:hover:before{opacity:1}.magary-galleria .galleria-item-nav:active{transform:translateY(-50%) scale(1.05)}.magary-galleria .galleria-item-nav:disabled{opacity:0;cursor:default;pointer-events:none}.magary-galleria .galleria-item-nav lucide-icon{width:2rem;height:2rem;stroke-width:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.magary-galleria .galleria-item-prev{left:0}.magary-galleria .galleria-item-next{right:0}.magary-galleria .galleria-counter{position:absolute;top:1rem;left:1rem;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:.625rem 1.25rem;border-radius:24px;font-size:.9375rem;font-weight:600;z-index:15;letter-spacing:.5px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d;transition:all .3s ease}.magary-galleria .galleria-counter:hover{background:#000000d9;transform:scale(1.05)}.magary-galleria .galleria-progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#ffffff26;z-index:15;overflow:hidden}.magary-galleria .galleria-progress:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.magary-galleria .galleria-progress .galleria-progress-bar{height:100%;background:linear-gradient(90deg,var(--galleria-accent-color) 0%,color-mix(in srgb,var(--galleria-accent-color) 80%,white) 100%);transition:width .05s linear;box-shadow:0 0 20px var(--galleria-accent-color),0 0 40px color-mix(in srgb,var(--galleria-accent-color) 50%,transparent);position:relative}.magary-galleria .galleria-progress .galleria-progress-bar:after{content:\"\";position:absolute;right:0;top:0;width:100px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}.magary-galleria .galleria-caption{position:absolute;bottom:0;left:0;width:100%;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 50%,transparent 100%);color:#fff;z-index:10;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-caption.caption-outside{position:relative;background:var(--surface-50, #f9fafb);color:var(--text-color, #1f2937);padding:1.5rem}.magary-galleria .galleria-caption .caption-title{font-size:1.375rem;font-weight:700;margin-bottom:.625rem;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:-.02em}.magary-galleria .galleria-caption .caption-description{font-size:.9375rem;opacity:.95;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.5)}.magary-galleria .galleria-indicators{margin:0;padding:1.25rem;list-style-type:none;display:flex;align-items:center;justify-content:center;position:absolute;bottom:1.5rem;left:0;width:100%;z-index:10;gap:.625rem}.magary-galleria .galleria-indicators .galleria-indicator-button{background-color:#ffffff59;width:10px;height:10px;border-radius:50%;transition:all .4s cubic-bezier(.4,0,.2,1);border:none;padding:0;cursor:pointer;position:relative;box-shadow:0 2px 4px #0003}.magary-galleria .galleria-indicators .galleria-indicator-button:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .3s ease}.magary-galleria .galleria-indicators .galleria-indicator-button:hover{background-color:#ffffffb3;transform:scale(1.3)}.magary-galleria .galleria-indicators .galleria-indicator-button:hover:before{border-color:#ffffff4d}.magary-galleria .galleria-indicators li.galleria-indicator-active .galleria-indicator-button{background-color:#fff;width:28px;border-radius:6px;transform:scale(1);box-shadow:0 0 12px #fff9,0 0 24px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#18181b,#27272a,#18181b);padding:1.25rem;justify-content:center;border-top:1px solid rgba(255,255,255,.05)}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar{width:10px;height:10px}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-track{background:#ffffff08;border-radius:5px;margin:.5rem}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff3,#ffffff26);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background .3s ease}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff59,#ffffff40);background-clip:padding-box}.magary-galleria .galleria-thumbnail-container{display:flex;flex-direction:row;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;padding:.75rem 1.25rem;scroll-padding-left:.75rem;scroll-padding-right:.75rem;-webkit-overflow-scrolling:touch}.magary-galleria .galleria-thumbnail-items{display:flex;gap:1rem;justify-content:flex-start;align-items:center;width:max-content;padding:0}.magary-galleria .galleria-thumbnail-item{overflow:hidden;cursor:pointer;opacity:.4;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:10px;border:3px solid transparent;flex-shrink:0;position:relative;background:#0000004d}.magary-galleria .galleria-thumbnail-item:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#00000080,#0003);opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:1}.magary-galleria .galleria-thumbnail-item:after{content:\"\";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff1a;pointer-events:none;z-index:2}.magary-galleria .galleria-thumbnail-item:hover{opacity:.75;transform:translateY(-6px) scale(1.05);border-color:#fff3}.magary-galleria .galleria-thumbnail-item:hover:before{opacity:.3}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active{opacity:1;border-color:var(--galleria-accent-color);transform:translateY(-6px) scale(1.1);box-shadow:0 8px 24px #0006,0 0 0 1px var(--galleria-accent-color),0 0 20px color-mix(in srgb,var(--galleria-accent-color) 40%,transparent)}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:before{opacity:0}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:after{box-shadow:inset 0 0 0 2px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{display:flex;align-items:center;justify-content:center;width:100px;height:70px;position:relative}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content img,.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content video{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:1024px){.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:500px}}@media(max-width:768px){.magary-galleria .galleria-item-wrapper{min-height:350px;border-radius:12px 12px 0 0}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:400px}.magary-galleria .galleria-item-nav{width:3rem;height:3rem;margin:0 .75rem}.magary-galleria .galleria-item-nav-icon{font-size:1.25rem}.magary-galleria .galleria-counter{font-size:.8125rem;padding:.5rem 1rem}.magary-galleria .galleria-control-button{width:2.5rem;height:2.5rem;font-size:1rem}.magary-galleria .galleria-controls{top:.75rem;right:.75rem;gap:.375rem}.magary-galleria .galleria-caption{padding:1.25rem}.magary-galleria .galleria-caption .caption-title{font-size:1.125rem}.magary-galleria .galleria-caption .caption-description{font-size:.8125rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:75px;height:55px}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{width:100px}}@media(max-width:480px){.magary-galleria .galleria-item-wrapper{min-height:auto}.magary-galleria .galleria-item img{max-height:300px}.magary-galleria .galleria-item-nav{width:2.5rem;height:2.5rem;margin:0 .5rem}.magary-galleria .galleria-thumbnail-wrapper{padding:.75rem}.magary-galleria .galleria-thumbnail-items{gap:.5rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:60px;height:45px}.magary-galleria.magary-galleria-thumbnails-left .galleria-controls,.magary-galleria.magary-galleria-thumbnails-right .galleria-controls{flex-direction:column;gap:.4rem;top:.75rem;right:.75rem}.magary-galleria.magary-galleria-thumbnails-left .galleria-control-button,.magary-galleria.magary-galleria-thumbnails-right .galleria-control-button{width:2.25rem;height:2.25rem}}.galleria-preview-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;background-color:transparent;border:none;padding:0;margin:0!important;overflow:hidden}.galleria-preview-dialog::backdrop{background-color:#000000eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.galleria-preview-dialog{display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10000}.galleria-preview-dialog[open]{display:flex}.galleria-preview-toolbar{position:absolute;top:1.5rem;right:1.5rem;display:flex;gap:.5rem;z-index:10001;background:#ffffff1f;padding:.5rem;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d;border:1px solid rgba(255,255,255,.1)}.galleria-preview-action{background:transparent;color:#fff;border:none;width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.galleria-preview-action:hover{background-color:#fff3;transform:scale(1.1)}.galleria-preview-action:active{transform:scale(.95);background-color:#ffffff40}.galleria-preview-action lucide-icon{width:1.25rem;height:1.25rem}.galleria-preview-content{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:1rem;overflow:hidden}.galleria-preview-item-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;position:relative;overflow:hidden;padding:0 3.5rem}.galleria-preview-item-area .galleria-preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 0 40px #0006;-webkit-user-select:none;user-select:none;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.galleria-preview-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffffe6;border:1px solid rgba(255,255,255,.1);width:3rem;height:3rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease;z-index:5}.galleria-preview-nav:hover{background:#fff3;transform:translateY(-50%) scale(1.1)}.galleria-preview-nav:active{transform:translateY(-50%) scale(.95)}.galleria-preview-nav lucide-icon{width:1.5rem;height:1.5rem}.galleria-preview-prev{left:.5rem}.galleria-preview-next{right:.5rem}.galleria-preview-counter{color:#ffffffb3;font-size:.85rem;padding:.5rem 0;letter-spacing:.05em}.galleria-preview-thumbnails{display:flex;gap:.5rem;padding:.75rem;overflow-x:auto;max-width:90vw;justify-content:center;flex-wrap:nowrap}.galleria-preview-thumbnails::-webkit-scrollbar{height:4px}.galleria-preview-thumbnails::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.galleria-preview-thumb{width:70px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .2s ease;flex-shrink:0}.galleria-preview-thumb:hover{opacity:.8;transform:scale(1.05)}.galleria-preview-thumb.active{opacity:1;border-color:var(--galleria-accent-color, #3b82f6);box-shadow:0 0 12px color-mix(in srgb,var(--galleria-accent-color, #3b82f6) 40%,transparent)}.galleria-preview-thumb img{width:100%;height:100%;object-fit:cover}@media(max-width:768px){.galleria-preview-toolbar{top:.75rem;right:.75rem;padding:.375rem;gap:.25rem}.galleria-preview-action{width:2rem;height:2rem}.galleria-preview-action lucide-icon{width:1rem;height:1rem}.galleria-preview-item-area{padding:0 2.5rem}.galleria-preview-nav{width:2rem;height:2rem}.galleria-preview-nav lucide-icon{width:1.25rem;height:1.25rem}.galleria-preview-prev{left:.25rem}.galleria-preview-next{right:.25rem}.galleria-preview-thumb{width:55px;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: GalleriaIconsModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
7154
7201
|
}
|
|
7155
7202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryGalleria, decorators: [{
|
|
7156
7203
|
type: Component,
|
|
@@ -7164,11 +7211,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7164
7211
|
'[class.magary-galleria-presentation-mode]': 'presentationMode()',
|
|
7165
7212
|
'[style.width]': '"100%"',
|
|
7166
7213
|
'[style.max-width]': 'width()',
|
|
7167
|
-
}, template: "<div #galleriaContainer class=\"galleria-container\" [ngStyle]=\"containerStyle()\">\r\n <!-- Main Item Display -->\r\n <div\r\n class=\"galleria-item-wrapper\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (touchmove)=\"onTouchMove($event)\"\r\n (touchend)=\"onTouchEnd($event)\"\r\n >\r\n <!-- Progress Bar -->\r\n @if (showProgressBar() && isPlaying()) {\r\n <div class=\"galleria-progress\">\r\n <div\r\n class=\"galleria-progress-bar\"\r\n [style.width.%]=\"progressValue()\"\r\n ></div>\r\n </div>\r\n }\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter() && !presentationMode()) {\r\n <div class=\"galleria-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Control Buttons -->\r\n @if (!presentationMode()) {\r\n <div class=\"galleria-controls\">\r\n <!-- Play/Pause -->\r\n @if (showPlayPauseButton() && autoPlay()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n [class.playing]=\"isPlaying()\"\r\n (click)=\"togglePlayPause()\"\r\n [attr.aria-label]=\"isPlaying() ? 'Pause' : 'Play'\"\r\n >\r\n @if (isPlaying()) {\r\n <lucide-icon name=\"pause\"></lucide-icon>\r\n }\r\n @if (!isPlaying()) {\r\n <lucide-icon name=\"play\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- Presentation Mode -->\r\n @if (allowPresentationMode()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"togglePresentationMode()\"\r\n aria-label=\"Presentation mode\"\r\n title=\"Presentation mode (P)\"\r\n >\r\n <lucide-icon name=\"monitor-play\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Share -->\r\n @if (showShareButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"shareImage()\"\r\n aria-label=\"Share\"\r\n title=\"Share image\"\r\n >\r\n <lucide-icon name=\"share-2\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Download -->\r\n @if (showDownloadButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"downloadImage()\"\r\n aria-label=\"Download\"\r\n title=\"Download image\"\r\n >\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Fullscreen -->\r\n @if (showFullScreenButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"toggleFullScreen()\"\r\n [attr.aria-label]=\"\r\n isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'\r\n \"\r\n title=\"Fullscreen (F)\"\r\n >\r\n @if (isFullscreen()) {\r\n <lucide-icon name=\"minimize\"></lucide-icon>\r\n }\r\n @if (!isFullscreen()) {\r\n <lucide-icon name=\"maximize\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Zoom Controls -->\r\n @if (enableZoom() && isZoomed()) {\r\n <div class=\"galleria-zoom-controls\">\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomIn()\"\r\n [disabled]=\"zoomLevel() >= maxZoomLevel()\"\r\n aria-label=\"Zoom in\"\r\n title=\"Zoom in (+)\"\r\n >\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomOut()\"\r\n [disabled]=\"zoomLevel() <= 1\"\r\n aria-label=\"Zoom out\"\r\n title=\"Zoom out (-)\"\r\n >\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"resetZoom()\"\r\n aria-label=\"Reset zoom\"\r\n title=\"Reset zoom (0)\"\r\n >\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Item Container -->\r\n <div class=\"galleria-item-container\">\r\n <!-- Loading Spinner -->\r\n @if (isLoading()) {\r\n <div class=\"galleria-loading\"></div>\r\n }\r\n\r\n <!-- Navigation Buttons -->\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-prev\"\r\n (click)=\"prev()\"\r\n [disabled]=\"!canGoPrev()\"\r\n aria-label=\"Previous\"\r\n >\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-next\"\r\n (click)=\"next()\"\r\n [disabled]=\"!canGoNext()\"\r\n aria-label=\"Next\"\r\n >\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Item Display -->\r\n <div\r\n class=\"galleria-item\"\r\n [class.transition-fade]=\"transitionEffect() === 'fade'\"\r\n [class.transition-slide]=\"transitionEffect() === 'slide'\"\r\n [class.transition-zoom]=\"transitionEffect() === 'zoom'\"\r\n [class.transition-flip]=\"transitionEffect() === 'flip'\"\r\n >\r\n <!-- Custom Template -->\r\n @if (itemTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n <!-- Default Image/Video Display -->\r\n @if (!itemTemplateRef() && activeItem()) {\r\n <ng-container>\r\n <!-- Image -->\r\n @if (!activeItem()?.type || activeItem()?.type === \"image\") {\r\n <img\r\n #currentImage\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"\r\n activeItem()?.alt || activeItem()?.title || 'Gallery image'\r\n \"\r\n [class.zoomed]=\"isZoomed()\"\r\n [style.transform]=\"transformStyle()\"\r\n (click)=\"onItemClick(activeItem())\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (load)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n draggable=\"false\"\r\n />\r\n }\r\n\r\n <!-- Video -->\r\n @if (activeItem()?.type === \"video\") {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n (loadeddata)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n ></video>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n\r\n <!-- Caption Overlay -->\r\n <!-- Complex condition simplified logic: activeItem is verified -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() !== \"outside\"\r\n ) {\r\n <div\r\n class=\"galleria-caption\"\r\n [class.caption-overlay]=\"captionPosition() === 'overlay'\"\r\n >\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators on Item -->\r\n @if (showIndicators() && showIndicatorsOnItem()) {\r\n <ul class=\"galleria-indicators\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Caption Outside -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() === \"outside\"\r\n ) {\r\n <div class=\"galleria-caption caption-outside\">\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators Below Item -->\r\n @if (showIndicators() && !showIndicatorsOnItem()) {\r\n <ul\r\n class=\"galleria-indicators\"\r\n [style.position]=\"'relative'\"\r\n [style.bottom]=\"'auto'\"\r\n [style.padding]=\"'1rem'\"\r\n [style.background]=\"'var(--surface-50, #f9fafb)'\"\r\n >\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-thumbnail-wrapper\">\r\n <div class=\"galleria-thumbnail-container\">\r\n <div class=\"galleria-thumbnail-items\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n class=\"galleria-thumbnail-item\"\r\n [class.galleria-thumbnail-item-active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n [attr.aria-label]=\"'Thumbnail ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n >\r\n @if (thumbnailTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n thumbnailTemplateRef();\r\n context: { $implicit: item, index: i }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!thumbnailTemplateRef()) {\r\n <div class=\"galleria-thumbnail-content\">\r\n @if (\r\n shouldLoadImage(i) && (!item.type || item.type === \"image\")\r\n ) {\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || item.title || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (shouldLoadImage(i) && item.type === \"video\") {\r\n <video\r\n [poster]=\"item.thumbnail || item.src\"\r\n draggable=\"false\"\r\n ></video>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".magary-galleria{display:flex;flex-direction:column;position:relative;box-shadow:0 10px 40px #00000026,0 0 0 1px #0000000d;border-radius:16px;overflow:hidden;background:var(--surface-0, #fff);transition:all .4s cubic-bezier(.4,0,.2,1);--galleria-accent-color: #3b82f6}.magary-galleria:hover{box-shadow:0 20px 60px #0003,0 0 0 1px #00000014;transform:translateY(-2px)}.magary-galleria.magary-galleria-fullscreen{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;transform:none}.magary-galleria.magary-galleria-fullscreen .galleria-item-wrapper{min-height:100vh;border-radius:0}.magary-galleria.magary-galleria-fullscreen .galleria-item img{max-height:calc(100vh - 100px)}.magary-galleria.magary-galleria-fullscreen .galleria-thumbnail-wrapper{max-height:150px}.magary-galleria.magary-galleria-presentation-mode .galleria-controls,.magary-galleria.magary-galleria-presentation-mode .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-presentation-mode .galleria-counter{opacity:0;pointer-events:none;transition:opacity .3s ease}.magary-galleria.magary-galleria-presentation-mode:hover .galleria-controls,.magary-galleria.magary-galleria-presentation-mode:hover .galleria-counter{opacity:1;pointer-events:auto}.magary-galleria.magary-galleria-thumbnails-left{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:-1;border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-left .galleria-item-wrapper{border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-right{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:1;border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-right .galleria-item-wrapper{border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-top .galleria-thumbnail-wrapper{order:-1;border-radius:16px 16px 0 0}.magary-galleria.magary-galleria-thumbnails-top .galleria-item-wrapper,.magary-galleria.magary-galleria-thumbnails-bottom .galleria-thumbnail-wrapper{border-radius:0 0 16px 16px}.magary-galleria .galleria-container{display:flex;flex-direction:column;flex-grow:1;position:relative}.magary-galleria.magary-galleria-thumbnails-left .galleria-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-container{flex-direction:row}.magary-galleria .galleria-item-wrapper{display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f0f,#1e1e1e,#0f0f0f);min-height:500px;border-radius:16px 16px 0 0}.magary-galleria .galleria-item-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;-webkit-user-select:none;user-select:none}.magary-galleria .galleria-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--galleria-accent-color);border-radius:50%;animation:spin .8s linear infinite;z-index:5}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.magary-galleria .galleria-item{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .3s ease}.magary-galleria .galleria-item.transition-fade{animation:fadeEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-slide{animation:slideEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-zoom{animation:zoomEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-flip{animation:flipEffect .7s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1);border-radius:4px}.magary-galleria .galleria-item img.zoomed,.magary-galleria .galleria-item video.zoomed{cursor:move}.magary-galleria .galleria-item img:not(.zoomed),.magary-galleria .galleria-item video:not(.zoomed){cursor:zoom-in}.magary-galleria .galleria-item video{max-width:90%}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}@keyframes slideEffect{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes zoomEffect{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes flipEffect{0%{opacity:0;transform:perspective(1000px) rotateY(90deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}.magary-galleria .galleria-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:15;transition:opacity .3s ease}.magary-galleria .galleria-control-button{background:#000000b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.15)}.magary-galleria .galleria-control-button lucide-icon{width:1.25rem;height:1.25rem;stroke-width:2px}.magary-galleria .galleria-control-button:hover{background:#000000d9;transform:scale(1.1);box-shadow:0 4px 12px #0006}.magary-galleria .galleria-control-button:active{transform:scale(.95)}.magary-galleria .galleria-control-button.playing{background:rgba(var(--galleria-accent-color),.9)}.magary-galleria .galleria-zoom-controls{position:absolute;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:15;opacity:0;transition:opacity .3s ease}.magary-galleria:hover .magary-galleria .galleria-zoom-controls{opacity:1}.magary-galleria .galleria-item-nav{background:#ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fffffff2;width:4rem;height:4rem;margin:0 1.5rem;border-radius:50%;transition:all .35s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.15);position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0003}.magary-galleria .galleria-item-nav:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#fff3,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease}.magary-galleria .galleria-item-nav:hover{background:#ffffff2e;color:#fff;transform:translateY(-50%) scale(1.15);border-color:#ffffff4d;box-shadow:0 8px 24px #0000004d}.magary-galleria .galleria-item-nav:hover:before{opacity:1}.magary-galleria .galleria-item-nav:active{transform:translateY(-50%) scale(1.05)}.magary-galleria .galleria-item-nav:disabled{opacity:0;cursor:default;pointer-events:none}.magary-galleria .galleria-item-nav lucide-icon{width:2rem;height:2rem;stroke-width:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.magary-galleria .galleria-item-prev{left:0}.magary-galleria .galleria-item-next{right:0}.magary-galleria .galleria-counter{position:absolute;top:1rem;left:1rem;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:.625rem 1.25rem;border-radius:24px;font-size:.9375rem;font-weight:600;z-index:15;letter-spacing:.5px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d;transition:all .3s ease}.magary-galleria .galleria-counter:hover{background:#000000d9;transform:scale(1.05)}.magary-galleria .galleria-progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#ffffff26;z-index:15;overflow:hidden}.magary-galleria .galleria-progress:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.magary-galleria .galleria-progress .galleria-progress-bar{height:100%;background:linear-gradient(90deg,var(--galleria-accent-color) 0%,color-mix(in srgb,var(--galleria-accent-color) 80%,white) 100%);transition:width .05s linear;box-shadow:0 0 20px var(--galleria-accent-color),0 0 40px color-mix(in srgb,var(--galleria-accent-color) 50%,transparent);position:relative}.magary-galleria .galleria-progress .galleria-progress-bar:after{content:\"\";position:absolute;right:0;top:0;width:100px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}.magary-galleria .galleria-caption{position:absolute;bottom:0;left:0;width:100%;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 50%,transparent 100%);color:#fff;z-index:10;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-caption.caption-outside{position:relative;background:var(--surface-50, #f9fafb);color:var(--text-color, #1f2937);padding:1.5rem}.magary-galleria .galleria-caption .caption-title{font-size:1.375rem;font-weight:700;margin-bottom:.625rem;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:-.02em}.magary-galleria .galleria-caption .caption-description{font-size:.9375rem;opacity:.95;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.5)}.magary-galleria .galleria-indicators{margin:0;padding:1.25rem;list-style-type:none;display:flex;align-items:center;justify-content:center;position:absolute;bottom:1.5rem;left:0;width:100%;z-index:10;gap:.625rem}.magary-galleria .galleria-indicators .galleria-indicator-button{background-color:#ffffff59;width:10px;height:10px;border-radius:50%;transition:all .4s cubic-bezier(.4,0,.2,1);border:none;padding:0;cursor:pointer;position:relative;box-shadow:0 2px 4px #0003}.magary-galleria .galleria-indicators .galleria-indicator-button:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .3s ease}.magary-galleria .galleria-indicators .galleria-indicator-button:hover{background-color:#ffffffb3;transform:scale(1.3)}.magary-galleria .galleria-indicators .galleria-indicator-button:hover:before{border-color:#ffffff4d}.magary-galleria .galleria-indicators li.galleria-indicator-active .galleria-indicator-button{background-color:#fff;width:28px;border-radius:6px;transform:scale(1);box-shadow:0 0 12px #fff9,0 0 24px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:auto;flex-shrink:0;background:linear-gradient(135deg,#18181b,#27272a,#18181b);padding:1.25rem;justify-content:center;border-top:1px solid rgba(255,255,255,.05)}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar{width:10px;height:10px}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-track{background:#ffffff08;border-radius:5px;margin:.5rem}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff3,#ffffff26);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background .3s ease}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff59,#ffffff40);background-clip:padding-box}.magary-galleria .galleria-thumbnail-container{display:flex;flex-direction:row;width:100%;height:100%}.magary-galleria .galleria-thumbnail-items{display:flex;gap:1rem;justify-content:center;align-items:center;width:100%}.magary-galleria .galleria-thumbnail-item{overflow:hidden;cursor:pointer;opacity:.4;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:10px;border:3px solid transparent;flex-shrink:0;position:relative;background:#0000004d}.magary-galleria .galleria-thumbnail-item:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#00000080,#0003);opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:1}.magary-galleria .galleria-thumbnail-item:after{content:\"\";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff1a;pointer-events:none;z-index:2}.magary-galleria .galleria-thumbnail-item:hover{opacity:.75;transform:translateY(-6px) scale(1.05);border-color:#fff3}.magary-galleria .galleria-thumbnail-item:hover:before{opacity:.3}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active{opacity:1;border-color:var(--galleria-accent-color);transform:translateY(-6px) scale(1.1);box-shadow:0 8px 24px #0006,0 0 0 1px var(--galleria-accent-color),0 0 20px color-mix(in srgb,var(--galleria-accent-color) 40%,transparent)}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:before{opacity:0}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:after{box-shadow:inset 0 0 0 2px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{display:flex;align-items:center;justify-content:center;width:100px;height:70px;position:relative}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content img,.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content video{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:1024px){.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:500px}}@media(max-width:768px){.magary-galleria{border-radius:12px}.magary-galleria .galleria-item-wrapper{min-height:350px;border-radius:12px 12px 0 0}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:400px}.magary-galleria .galleria-item-nav{width:3rem;height:3rem;margin:0 .75rem}.magary-galleria .galleria-item-nav-icon{font-size:1.25rem}.magary-galleria .galleria-counter{font-size:.8125rem;padding:.5rem 1rem}.magary-galleria .galleria-control-button{width:2.5rem;height:2.5rem;font-size:1rem}.magary-galleria .galleria-controls{top:.75rem;right:.75rem;gap:.375rem}.magary-galleria .galleria-caption{padding:1.25rem}.magary-galleria .galleria-caption .caption-title{font-size:1.125rem}.magary-galleria .galleria-caption .caption-description{font-size:.8125rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:75px;height:55px}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{width:100px}}@media(max-width:480px){.magary-galleria{border-radius:8px}.magary-galleria .galleria-item-wrapper{min-height:280px}.magary-galleria .galleria-item img{max-height:300px}.magary-galleria .galleria-item-nav{width:2.5rem;height:2.5rem;margin:0 .5rem}.magary-galleria .galleria-thumbnail-wrapper{padding:.75rem}.magary-galleria .galleria-thumbnail-items{gap:.5rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:60px;height:45px}}\n"] }]
|
|
7214
|
+
}, template: "<div #galleriaContainer class=\"galleria-container\" [ngStyle]=\"containerStyle()\">\r\n <!-- Main Item Display -->\r\n <div\r\n class=\"galleria-item-wrapper\"\r\n (mouseenter)=\"onMouseEnter()\"\r\n (mouseleave)=\"onMouseLeave()\"\r\n (touchstart)=\"onTouchStart($event)\"\r\n (touchmove)=\"onTouchMove($event)\"\r\n (touchend)=\"onTouchEnd($event)\"\r\n >\r\n <!-- Progress Bar -->\r\n @if (showProgressBar() && isPlaying()) {\r\n <div class=\"galleria-progress\">\r\n <div\r\n class=\"galleria-progress-bar\"\r\n [style.width.%]=\"progressValue()\"\r\n ></div>\r\n </div>\r\n }\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter() && !presentationMode()) {\r\n <div class=\"galleria-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Control Buttons -->\r\n @if (!presentationMode()) {\r\n <div class=\"galleria-controls\">\r\n <!-- Play/Pause -->\r\n @if (showPlayPauseButton() && autoPlay()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n [class.playing]=\"isPlaying()\"\r\n (click)=\"togglePlayPause()\"\r\n [attr.aria-label]=\"isPlaying() ? 'Pause' : 'Play'\"\r\n >\r\n @if (isPlaying()) {\r\n <lucide-icon name=\"pause\"></lucide-icon>\r\n }\r\n @if (!isPlaying()) {\r\n <lucide-icon name=\"play\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n\r\n <!-- Presentation Mode -->\r\n @if (allowPresentationMode()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"togglePresentationMode()\"\r\n aria-label=\"Presentation mode\"\r\n title=\"Presentation mode (P)\"\r\n >\r\n <lucide-icon name=\"monitor-play\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Share -->\r\n @if (showShareButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"shareImage()\"\r\n aria-label=\"Share\"\r\n title=\"Share image\"\r\n >\r\n <lucide-icon name=\"share-2\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Download -->\r\n @if (showDownloadButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"downloadImage()\"\r\n aria-label=\"Download\"\r\n title=\"Download image\"\r\n >\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Fullscreen -->\r\n @if (showFullScreenButton()) {\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"toggleFullScreen()\"\r\n [attr.aria-label]=\"\r\n isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'\r\n \"\r\n title=\"Fullscreen (F)\"\r\n >\r\n @if (isFullscreen()) {\r\n <lucide-icon name=\"minimize\"></lucide-icon>\r\n }\r\n @if (!isFullscreen()) {\r\n <lucide-icon name=\"maximize\"></lucide-icon>\r\n }\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Zoom Controls -->\r\n @if (enableZoom() && isZoomed()) {\r\n <div class=\"galleria-zoom-controls\">\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomIn()\"\r\n [disabled]=\"zoomLevel() >= maxZoomLevel()\"\r\n aria-label=\"Zoom in\"\r\n title=\"Zoom in (+)\"\r\n >\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"zoomOut()\"\r\n [disabled]=\"zoomLevel() <= 1\"\r\n aria-label=\"Zoom out\"\r\n title=\"Zoom out (-)\"\r\n >\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button\r\n class=\"galleria-control-button\"\r\n (click)=\"resetZoom()\"\r\n aria-label=\"Reset zoom\"\r\n title=\"Reset zoom (0)\"\r\n >\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n <!-- Item Container -->\r\n <div class=\"galleria-item-container\">\r\n <!-- Loading Spinner -->\r\n @if (isLoading()) {\r\n <div class=\"galleria-loading\"></div>\r\n }\r\n\r\n <!-- Navigation Buttons -->\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-prev\"\r\n (click)=\"prev()\"\r\n [disabled]=\"!canGoPrev()\"\r\n aria-label=\"Previous\"\r\n >\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n @if (\r\n showItemNavigators() && (!showItemNavigatorsOnHover() || isHovering())\r\n ) {\r\n <button\r\n class=\"galleria-item-nav galleria-item-next\"\r\n (click)=\"next()\"\r\n [disabled]=\"!canGoNext()\"\r\n aria-label=\"Next\"\r\n >\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Item Display -->\r\n <div\r\n class=\"galleria-item\"\r\n [class.transition-fade]=\"transitionEffect() === 'fade'\"\r\n [class.transition-slide]=\"transitionEffect() === 'slide'\"\r\n [class.transition-zoom]=\"transitionEffect() === 'zoom'\"\r\n [class.transition-flip]=\"transitionEffect() === 'flip'\"\r\n >\r\n <!-- Custom Template -->\r\n @if (itemTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n itemTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n <!-- Default Image/Video Display -->\r\n @if (!itemTemplateRef() && activeItem()) {\r\n <ng-container>\r\n <!-- Image -->\r\n @if (!activeItem()?.type || activeItem()?.type === \"image\") {\r\n <img\r\n #currentImage\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"\r\n activeItem()?.alt || activeItem()?.title || 'Gallery image'\r\n \"\r\n [class.zoomed]=\"isZoomed()\"\r\n [style.transform]=\"transformStyle()\"\r\n (click)=\"onItemClick(activeItem())\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (load)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n draggable=\"false\"\r\n />\r\n }\r\n\r\n <!-- Video -->\r\n @if (activeItem()?.type === \"video\") {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n (loadeddata)=\"onImageLoadSuccess(activeIndex())\"\r\n (error)=\"onImageLoadError(activeIndex())\"\r\n ></video>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n\r\n <!-- Caption Overlay -->\r\n <!-- Complex condition simplified logic: activeItem is verified -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() !== \"outside\"\r\n ) {\r\n <div\r\n class=\"galleria-caption\"\r\n [class.caption-overlay]=\"captionPosition() === 'overlay'\"\r\n >\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators on Item -->\r\n @if (showIndicators() && showIndicatorsOnItem()) {\r\n <ul class=\"galleria-indicators\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Caption Outside -->\r\n @if (\r\n showCaption() &&\r\n activeItem() &&\r\n (activeItem()?.title || activeItem()?.description) &&\r\n captionPosition() === \"outside\"\r\n ) {\r\n <div class=\"galleria-caption caption-outside\">\r\n @if (captionTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n captionTemplateRef();\r\n context: { $implicit: activeItem(), index: activeIndex() }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!captionTemplateRef()) {\r\n <ng-container>\r\n @if (activeItem()?.title) {\r\n <div class=\"caption-title\">\r\n {{ activeItem()?.title }}\r\n </div>\r\n }\r\n @if (activeItem()?.description) {\r\n <div class=\"caption-description\">\r\n {{ activeItem()?.description }}\r\n </div>\r\n }\r\n </ng-container>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- Indicators Below Item -->\r\n @if (showIndicators() && !showIndicatorsOnItem()) {\r\n <ul\r\n class=\"galleria-indicators\"\r\n [style.position]=\"'relative'\"\r\n [style.bottom]=\"'auto'\"\r\n [style.padding]=\"'1rem'\"\r\n [style.background]=\"'var(--surface-50, #f9fafb)'\"\r\n >\r\n @for (item of value(); track $index; let i = $index) {\r\n <li\r\n [class.galleria-indicator-active]=\"i === activeIndex()\"\r\n (click)=\"onIndicatorClick(i)\"\r\n (mouseenter)=\"\r\n changeItemOnIndicatorHover() ? onIndicatorClick(i) : null\r\n \"\r\n >\r\n <button\r\n class=\"galleria-indicator-button\"\r\n [attr.aria-label]=\"'Go to image ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n ></button>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-thumbnail-wrapper\">\r\n <div class=\"galleria-thumbnail-container\">\r\n <div class=\"galleria-thumbnail-items\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n #thumbItem\r\n class=\"galleria-thumbnail-item\"\r\n [class.galleria-thumbnail-item-active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n [attr.aria-label]=\"'Thumbnail ' + (i + 1)\"\r\n [attr.aria-current]=\"i === activeIndex() ? 'true' : 'false'\"\r\n >\r\n @if (thumbnailTemplateRef()) {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n thumbnailTemplateRef();\r\n context: { $implicit: item, index: i }\r\n \"\r\n ></ng-container>\r\n }\r\n\r\n @if (!thumbnailTemplateRef()) {\r\n <div class=\"galleria-thumbnail-content\">\r\n @if (\r\n shouldLoadImage(i) && (!item.type || item.type === \"image\")\r\n ) {\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || item.title || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (shouldLoadImage(i) && item.type === \"video\") {\r\n <video\r\n [poster]=\"item.thumbnail || item.src\"\r\n draggable=\"false\"\r\n ></video>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Preview Dialog Overlay (replaces native fullscreen) -->\r\n<dialog\r\n #previewDialog\r\n class=\"galleria-preview-dialog\"\r\n (click)=\"closePreviewDialog()\"\r\n (cancel)=\"closePreviewDialog()\"\r\n>\r\n <!-- Toolbar -->\r\n <div class=\"galleria-preview-toolbar\" (click)=\"$event.stopPropagation()\">\r\n @if (enableZoom()) {\r\n <button class=\"galleria-preview-action\" (click)=\"zoomOut()\" aria-label=\"Zoom out\">\r\n <lucide-icon name=\"zoom-out\"></lucide-icon>\r\n </button>\r\n <button class=\"galleria-preview-action\" (click)=\"zoomIn()\" aria-label=\"Zoom in\">\r\n <lucide-icon name=\"zoom-in\"></lucide-icon>\r\n </button>\r\n }\r\n @if (isZoomed()) {\r\n <button class=\"galleria-preview-action\" (click)=\"resetZoom()\" aria-label=\"Reset zoom\">\r\n <lucide-icon name=\"rotate-ccw\"></lucide-icon>\r\n </button>\r\n }\r\n @if (showDownloadButton()) {\r\n <button class=\"galleria-preview-action\" (click)=\"downloadImage()\" aria-label=\"Download\">\r\n <lucide-icon name=\"download\"></lucide-icon>\r\n </button>\r\n }\r\n <button class=\"galleria-preview-action\" (click)=\"closePreviewDialog()\" aria-label=\"Close\">\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Gallery Content -->\r\n <div class=\"galleria-preview-content\" (click)=\"$event.stopPropagation()\">\r\n <!-- Image Area -->\r\n <div class=\"galleria-preview-item-area\">\r\n <!-- Navigation: Prev -->\r\n @if (showItemNavigators() && canGoPrev()) {\r\n <button class=\"galleria-preview-nav galleria-preview-prev\" (click)=\"prev()\" aria-label=\"Previous\">\r\n <lucide-icon name=\"chevron-left\"></lucide-icon>\r\n </button>\r\n }\r\n\r\n <!-- Active Image -->\r\n @if (activeItem()) {\r\n @if (!activeItem()?.type || activeItem()?.type === 'image') {\r\n <img\r\n [src]=\"activeItem()?.src\"\r\n [alt]=\"activeItem()?.alt || activeItem()?.title || 'Gallery image'\"\r\n class=\"galleria-preview-image\"\r\n [style.transform]=\"transformStyle()\"\r\n (dblclick)=\"onImageDoubleClick()\"\r\n draggable=\"false\"\r\n />\r\n }\r\n @if (activeItem()?.type === 'video') {\r\n <video\r\n [src]=\"activeItem()?.videoUrl || activeItem()?.src\"\r\n controls\r\n [poster]=\"activeItem()?.thumbnail || activeItem()?.src\"\r\n class=\"galleria-preview-image\"\r\n ></video>\r\n }\r\n }\r\n\r\n <!-- Navigation: Next -->\r\n @if (showItemNavigators() && canGoNext()) {\r\n <button class=\"galleria-preview-nav galleria-preview-next\" (click)=\"next()\" aria-label=\"Next\">\r\n <lucide-icon name=\"chevron-right\"></lucide-icon>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- Image Counter -->\r\n @if (showImageCounter()) {\r\n <div class=\"galleria-preview-counter\">\r\n {{ imageCounter() }}\r\n </div>\r\n }\r\n\r\n <!-- Thumbnails -->\r\n @if (showThumbnails() && value() && value().length > 1) {\r\n <div class=\"galleria-preview-thumbnails\">\r\n @for (item of value(); track $index; let i = $index) {\r\n <div\r\n #previewThumbItem\r\n class=\"galleria-preview-thumb\"\r\n [class.active]=\"i === activeIndex()\"\r\n (click)=\"onThumbnailClick(i)\"\r\n >\r\n <img\r\n [src]=\"item.thumbnail || item.src\"\r\n [alt]=\"item.alt || 'Thumbnail ' + (i + 1)\"\r\n draggable=\"false\"\r\n />\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</dialog>\r\n", styles: ["@charset \"UTF-8\";.magary-galleria{display:flex;flex-direction:column;position:relative;box-shadow:0 10px 40px #00000026,0 0 0 1px #0000000d;border-radius:16px;overflow:hidden;background:var(--surface-0, #fff);transition:all .4s cubic-bezier(.4,0,.2,1);--galleria-accent-color: #3b82f6}.magary-galleria:hover{box-shadow:0 20px 60px #0003,0 0 0 1px #00000014;transform:translateY(-2px)}.magary-galleria.magary-galleria-fullscreen{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999;border-radius:0;transform:none}.magary-galleria.magary-galleria-fullscreen .galleria-item-wrapper{min-height:100vh;border-radius:0}.magary-galleria.magary-galleria-fullscreen .galleria-item img{max-height:calc(100vh - 100px)}.magary-galleria.magary-galleria-fullscreen .galleria-thumbnail-wrapper{max-height:150px}.magary-galleria.magary-galleria-presentation-mode .galleria-controls,.magary-galleria.magary-galleria-presentation-mode .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-presentation-mode .galleria-counter{opacity:0;pointer-events:none;transition:opacity .3s ease}.magary-galleria.magary-galleria-presentation-mode:hover .galleria-controls,.magary-galleria.magary-galleria-presentation-mode:hover .galleria-counter{opacity:1;pointer-events:auto}.magary-galleria.magary-galleria-thumbnails-left{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:-1;border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-left .galleria-item-wrapper{border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-right{flex-direction:row}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{flex-direction:column;width:140px;order:1;border-radius:0 16px 16px 0}.magary-galleria.magary-galleria-thumbnails-right .galleria-item-wrapper{border-radius:16px 0 0 16px}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{flex-direction:column;height:100%}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item:hover,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item:hover{transform:scale(1.05)}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item-active,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item-active{transform:scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{padding-top:1.5rem;padding-bottom:1.75rem;scroll-padding-top:1.5rem;scroll-padding-bottom:1.75rem}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-items,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-items{justify-content:flex-start}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-item-active{transform:translate(2px) scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-item-active{transform:translate(-2px) scale(1.08)!important}.magary-galleria.magary-galleria-thumbnails-top .galleria-thumbnail-wrapper{order:-1;border-radius:16px 16px 0 0}.magary-galleria.magary-galleria-thumbnails-top .galleria-item-wrapper,.magary-galleria.magary-galleria-thumbnails-bottom .galleria-thumbnail-wrapper{border-radius:0 0 16px 16px}.magary-galleria .galleria-container{display:flex;flex-direction:column;flex-grow:1;position:relative}.magary-galleria.magary-galleria-thumbnails-left .galleria-container,.magary-galleria.magary-galleria-thumbnails-right .galleria-container{flex-direction:row}.magary-galleria .galleria-item-wrapper{display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f0f,#1e1e1e,#0f0f0f);min-height:auto;border-radius:16px 16px 0 0}.magary-galleria .galleria-item-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;-webkit-user-select:none;user-select:none}.magary-galleria .galleria-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--galleria-accent-color);border-radius:50%;animation:spin .8s linear infinite;z-index:5}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.magary-galleria .galleria-item{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .3s ease}.magary-galleria .galleria-item.transition-fade{animation:fadeEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-slide{animation:slideEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-zoom{animation:zoomEffect .6s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item.transition-flip{animation:flipEffect .7s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1);border-radius:4px}.magary-galleria .galleria-item img.zoomed,.magary-galleria .galleria-item video.zoomed{cursor:move}.magary-galleria .galleria-item img:not(.zoomed),.magary-galleria .galleria-item video:not(.zoomed){cursor:zoom-in}.magary-galleria .galleria-item video{max-width:90%}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}@keyframes slideEffect{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes zoomEffect{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes flipEffect{0%{opacity:0;transform:perspective(1000px) rotateY(90deg)}to{opacity:1;transform:perspective(1000px) rotateY(0)}}.magary-galleria .galleria-controls{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem;z-index:15;transition:opacity .3s ease}.magary-galleria .galleria-control-button{background:#000000b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(255,255,255,.15)}.magary-galleria .galleria-control-button lucide-icon{width:1.25rem;height:1.25rem;stroke-width:2px}.magary-galleria .galleria-control-button:hover{background:#000000d9;transform:scale(1.1);box-shadow:0 4px 12px #0006}.magary-galleria .galleria-control-button:active{transform:scale(.95)}.magary-galleria .galleria-control-button.playing{background:rgba(var(--galleria-accent-color),.9)}.magary-galleria .galleria-zoom-controls{position:absolute;bottom:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:15;opacity:0;transition:opacity .3s ease}.magary-galleria:hover .magary-galleria .galleria-zoom-controls{opacity:1}.magary-galleria .galleria-item-nav{background:#ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fffffff2;width:4rem;height:4rem;margin:0 1.5rem;border-radius:50%;transition:all .35s cubic-bezier(.4,0,.2,1);border:2px solid rgba(255,255,255,.15);position:absolute;top:50%;transform:translateY(-50%);z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0003}.magary-galleria .galleria-item-nav:before{content:\"\";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,#fff3,#ffffff0d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease}.magary-galleria .galleria-item-nav:hover{background:#ffffff2e;color:#fff;transform:translateY(-50%) scale(1.15);border-color:#ffffff4d;box-shadow:0 8px 24px #0000004d}.magary-galleria .galleria-item-nav:hover:before{opacity:1}.magary-galleria .galleria-item-nav:active{transform:translateY(-50%) scale(1.05)}.magary-galleria .galleria-item-nav:disabled{opacity:0;cursor:default;pointer-events:none}.magary-galleria .galleria-item-nav lucide-icon{width:2rem;height:2rem;stroke-width:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.magary-galleria .galleria-item-prev{left:0}.magary-galleria .galleria-item-next{right:0}.magary-galleria .galleria-counter{position:absolute;top:1rem;left:1rem;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:.625rem 1.25rem;border-radius:24px;font-size:.9375rem;font-weight:600;z-index:15;letter-spacing:.5px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 12px #0000004d;transition:all .3s ease}.magary-galleria .galleria-counter:hover{background:#000000d9;transform:scale(1.05)}.magary-galleria .galleria-progress{position:absolute;top:0;left:0;width:100%;height:4px;background:#ffffff26;z-index:15;overflow:hidden}.magary-galleria .galleria-progress:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)}.magary-galleria .galleria-progress .galleria-progress-bar{height:100%;background:linear-gradient(90deg,var(--galleria-accent-color) 0%,color-mix(in srgb,var(--galleria-accent-color) 80%,white) 100%);transition:width .05s linear;box-shadow:0 0 20px var(--galleria-accent-color),0 0 40px color-mix(in srgb,var(--galleria-accent-color) 50%,transparent);position:relative}.magary-galleria .galleria-progress .galleria-progress-bar:after{content:\"\";position:absolute;right:0;top:0;width:100px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}.magary-galleria .galleria-caption{position:absolute;bottom:0;left:0;width:100%;padding:2rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 50%,transparent 100%);color:#fff;z-index:10;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1)}.magary-galleria .galleria-caption.caption-outside{position:relative;background:var(--surface-50, #f9fafb);color:var(--text-color, #1f2937);padding:1.5rem}.magary-galleria .galleria-caption .caption-title{font-size:1.375rem;font-weight:700;margin-bottom:.625rem;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:-.02em}.magary-galleria .galleria-caption .caption-description{font-size:.9375rem;opacity:.95;line-height:1.6;text-shadow:0 1px 4px rgba(0,0,0,.5)}.magary-galleria .galleria-indicators{margin:0;padding:1.25rem;list-style-type:none;display:flex;align-items:center;justify-content:center;position:absolute;bottom:1.5rem;left:0;width:100%;z-index:10;gap:.625rem}.magary-galleria .galleria-indicators .galleria-indicator-button{background-color:#ffffff59;width:10px;height:10px;border-radius:50%;transition:all .4s cubic-bezier(.4,0,.2,1);border:none;padding:0;cursor:pointer;position:relative;box-shadow:0 2px 4px #0003}.magary-galleria .galleria-indicators .galleria-indicator-button:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;transition:border-color .3s ease}.magary-galleria .galleria-indicators .galleria-indicator-button:hover{background-color:#ffffffb3;transform:scale(1.3)}.magary-galleria .galleria-indicators .galleria-indicator-button:hover:before{border-color:#ffffff4d}.magary-galleria .galleria-indicators li.galleria-indicator-active .galleria-indicator-button{background-color:#fff;width:28px;border-radius:6px;transform:scale(1);box-shadow:0 0 12px #fff9,0 0 24px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-wrapper{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#18181b,#27272a,#18181b);padding:1.25rem;justify-content:center;border-top:1px solid rgba(255,255,255,.05)}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar{width:10px;height:10px}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-track{background:#ffffff08;border-radius:5px;margin:.5rem}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#fff3,#ffffff26);border-radius:5px;border:2px solid transparent;background-clip:padding-box;transition:background .3s ease}.magary-galleria .galleria-thumbnail-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ffffff59,#ffffff40);background-clip:padding-box}.magary-galleria .galleria-thumbnail-container{display:flex;flex-direction:row;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;padding:.75rem 1.25rem;scroll-padding-left:.75rem;scroll-padding-right:.75rem;-webkit-overflow-scrolling:touch}.magary-galleria .galleria-thumbnail-items{display:flex;gap:1rem;justify-content:flex-start;align-items:center;width:max-content;padding:0}.magary-galleria .galleria-thumbnail-item{overflow:hidden;cursor:pointer;opacity:.4;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:10px;border:3px solid transparent;flex-shrink:0;position:relative;background:#0000004d}.magary-galleria .galleria-thumbnail-item:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,#00000080,#0003);opacity:1;transition:opacity .3s ease;pointer-events:none;z-index:1}.magary-galleria .galleria-thumbnail-item:after{content:\"\";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff1a;pointer-events:none;z-index:2}.magary-galleria .galleria-thumbnail-item:hover{opacity:.75;transform:translateY(-6px) scale(1.05);border-color:#fff3}.magary-galleria .galleria-thumbnail-item:hover:before{opacity:.3}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active{opacity:1;border-color:var(--galleria-accent-color);transform:translateY(-6px) scale(1.1);box-shadow:0 8px 24px #0006,0 0 0 1px var(--galleria-accent-color),0 0 20px color-mix(in srgb,var(--galleria-accent-color) 40%,transparent)}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:before{opacity:0}.magary-galleria .galleria-thumbnail-item.galleria-thumbnail-item-active:after{box-shadow:inset 0 0 0 2px var(--galleria-accent-color)}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{display:flex;align-items:center;justify-content:center;width:100px;height:70px;position:relative}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content img,.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content video{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:1024px){.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:500px}}@media(max-width:768px){.magary-galleria .galleria-item-wrapper{min-height:350px;border-radius:12px 12px 0 0}.magary-galleria .galleria-item img,.magary-galleria .galleria-item video{max-height:400px}.magary-galleria .galleria-item-nav{width:3rem;height:3rem;margin:0 .75rem}.magary-galleria .galleria-item-nav-icon{font-size:1.25rem}.magary-galleria .galleria-counter{font-size:.8125rem;padding:.5rem 1rem}.magary-galleria .galleria-control-button{width:2.5rem;height:2.5rem;font-size:1rem}.magary-galleria .galleria-controls{top:.75rem;right:.75rem;gap:.375rem}.magary-galleria .galleria-caption{padding:1.25rem}.magary-galleria .galleria-caption .caption-title{font-size:1.125rem}.magary-galleria .galleria-caption .caption-description{font-size:.8125rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:75px;height:55px}.magary-galleria.magary-galleria-thumbnails-left .galleria-thumbnail-wrapper,.magary-galleria.magary-galleria-thumbnails-right .galleria-thumbnail-wrapper{width:100px}}@media(max-width:480px){.magary-galleria .galleria-item-wrapper{min-height:auto}.magary-galleria .galleria-item img{max-height:300px}.magary-galleria .galleria-item-nav{width:2.5rem;height:2.5rem;margin:0 .5rem}.magary-galleria .galleria-thumbnail-wrapper{padding:.75rem}.magary-galleria .galleria-thumbnail-items{gap:.5rem}.magary-galleria .galleria-thumbnail-item .galleria-thumbnail-content{width:60px;height:45px}.magary-galleria.magary-galleria-thumbnails-left .galleria-controls,.magary-galleria.magary-galleria-thumbnails-right .galleria-controls{flex-direction:column;gap:.4rem;top:.75rem;right:.75rem}.magary-galleria.magary-galleria-thumbnails-left .galleria-control-button,.magary-galleria.magary-galleria-thumbnails-right .galleria-control-button{width:2.25rem;height:2.25rem}}.galleria-preview-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;background-color:transparent;border:none;padding:0;margin:0!important;overflow:hidden}.galleria-preview-dialog::backdrop{background-color:#000000eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.galleria-preview-dialog{display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10000}.galleria-preview-dialog[open]{display:flex}.galleria-preview-toolbar{position:absolute;top:1.5rem;right:1.5rem;display:flex;gap:.5rem;z-index:10001;background:#ffffff1f;padding:.5rem;border-radius:999px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px #0000004d;border:1px solid rgba(255,255,255,.1)}.galleria-preview-action{background:transparent;color:#fff;border:none;width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.galleria-preview-action:hover{background-color:#fff3;transform:scale(1.1)}.galleria-preview-action:active{transform:scale(.95);background-color:#ffffff40}.galleria-preview-action lucide-icon{width:1.25rem;height:1.25rem}.galleria-preview-content{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:1rem;overflow:hidden}.galleria-preview-item-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;position:relative;overflow:hidden;padding:0 3.5rem}.galleria-preview-item-area .galleria-preview-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 0 40px #0006;-webkit-user-select:none;user-select:none;transition:transform .3s cubic-bezier(.25,.8,.25,1)}.galleria-preview-nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffffe6;border:1px solid rgba(255,255,255,.1);width:3rem;height:3rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease;z-index:5}.galleria-preview-nav:hover{background:#fff3;transform:translateY(-50%) scale(1.1)}.galleria-preview-nav:active{transform:translateY(-50%) scale(.95)}.galleria-preview-nav lucide-icon{width:1.5rem;height:1.5rem}.galleria-preview-prev{left:.5rem}.galleria-preview-next{right:.5rem}.galleria-preview-counter{color:#ffffffb3;font-size:.85rem;padding:.5rem 0;letter-spacing:.05em}.galleria-preview-thumbnails{display:flex;gap:.5rem;padding:.75rem;overflow-x:auto;max-width:90vw;justify-content:center;flex-wrap:nowrap}.galleria-preview-thumbnails::-webkit-scrollbar{height:4px}.galleria-preview-thumbnails::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.galleria-preview-thumb{width:70px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .2s ease;flex-shrink:0}.galleria-preview-thumb:hover{opacity:.8;transform:scale(1.05)}.galleria-preview-thumb.active{opacity:1;border-color:var(--galleria-accent-color, #3b82f6);box-shadow:0 0 12px color-mix(in srgb,var(--galleria-accent-color, #3b82f6) 40%,transparent)}.galleria-preview-thumb img{width:100%;height:100%;object-fit:cover}@media(max-width:768px){.galleria-preview-toolbar{top:.75rem;right:.75rem;padding:.375rem;gap:.25rem}.galleria-preview-action{width:2rem;height:2rem}.galleria-preview-action lucide-icon{width:1rem;height:1rem}.galleria-preview-item-area{padding:0 2.5rem}.galleria-preview-nav{width:2rem;height:2rem}.galleria-preview-nav lucide-icon{width:1.25rem;height:1.25rem}.galleria-preview-prev{left:.25rem}.galleria-preview-next{right:.25rem}.galleria-preview-thumb{width:55px;height:40px}}\n"] }]
|
|
7168
7215
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
7169
7216
|
type: Inject,
|
|
7170
7217
|
args: [PLATFORM_ID]
|
|
7171
|
-
}] }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], showItemNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigators", required: false }] }], showThumbnailNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnailNavigators", required: false }] }], showItemNavigatorsOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigatorsOnHover", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], thumbnailsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailsPosition", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], showIndicatorsOnItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicatorsOnItem", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], transitionInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionInterval", required: false }] }], changeItemOnIndicatorHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeItemOnIndicatorHover", required: false }] }], showFullScreenButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullScreenButton", required: false }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], showShareButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showShareButton", required: false }] }], showProgressBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgressBar", required: false }] }], showImageCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImageCounter", required: false }] }], showPlayPauseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlayPauseButton", required: false }] }], enableZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableZoom", required: false }] }], maxZoomLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoomLevel", required: false }] }], enableSwipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSwipe", required: false }] }], enableKeyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardNavigation", required: false }] }], enableDoubleClickZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDoubleClickZoom", required: false }] }], enablePinchZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePinchZoom", required: false }] }], transitionEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionEffect", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], preloadRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "preloadRange", required: false }] }], showLoadingSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingSpinner", required: false }] }], captionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionPosition", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], allowPresentationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPresentationMode", required: false }] }], presentationAutoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentationAutoPlay", required: false }] }], containerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerStyle", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onImageClick: [{ type: i0.Output, args: ["onImageClick"] }], onFullScreenChange: [{ type: i0.Output, args: ["onFullScreenChange"] }], onImageLoad: [{ type: i0.Output, args: ["onImageLoad"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }], onShare: [{ type: i0.Output, args: ["onShare"] }], onDownload: [{ type: i0.Output, args: ["onDownload"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['galleriaContainer', { isSignal: true }] }], currentImageRef: [{ type: i0.ViewChild, args: ['currentImage', { isSignal: true }] }], itemTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplateRef", required: false }] }], thumbnailTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailTemplateRef", required: false }] }], captionTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplateRef", required: false }] }], onMouseMove: [{
|
|
7218
|
+
}] }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], responsiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsiveOptions", required: false }] }], showItemNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigators", required: false }] }], showThumbnailNavigators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnailNavigators", required: false }] }], showItemNavigatorsOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemNavigatorsOnHover", required: false }] }], showThumbnails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThumbnails", required: false }] }], thumbnailsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailsPosition", required: false }] }], showIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicators", required: false }] }], showIndicatorsOnItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIndicatorsOnItem", required: false }] }], indicatorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorPosition", required: false }] }], circular: [{ type: i0.Input, args: [{ isSignal: true, alias: "circular", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], transitionInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionInterval", required: false }] }], changeItemOnIndicatorHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeItemOnIndicatorHover", required: false }] }], showFullScreenButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullScreenButton", required: false }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], showShareButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showShareButton", required: false }] }], showProgressBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgressBar", required: false }] }], showImageCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImageCounter", required: false }] }], showPlayPauseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPlayPauseButton", required: false }] }], enableZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableZoom", required: false }] }], maxZoomLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoomLevel", required: false }] }], enableSwipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSwipe", required: false }] }], enableKeyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardNavigation", required: false }] }], enableDoubleClickZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDoubleClickZoom", required: false }] }], enablePinchZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePinchZoom", required: false }] }], transitionEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionEffect", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], lazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoad", required: false }] }], preloadRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "preloadRange", required: false }] }], showLoadingSpinner: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingSpinner", required: false }] }], captionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionPosition", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], allowPresentationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowPresentationMode", required: false }] }], presentationAutoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentationAutoPlay", required: false }] }], containerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerStyle", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], accentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentColor", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], onImageClick: [{ type: i0.Output, args: ["onImageClick"] }], onFullScreenChange: [{ type: i0.Output, args: ["onFullScreenChange"] }], onImageLoad: [{ type: i0.Output, args: ["onImageLoad"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }], onShare: [{ type: i0.Output, args: ["onShare"] }], onDownload: [{ type: i0.Output, args: ["onDownload"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['galleriaContainer', { isSignal: true }] }], currentImageRef: [{ type: i0.ViewChild, args: ['currentImage', { isSignal: true }] }], previewDialog: [{ type: i0.ViewChild, args: ['previewDialog', { isSignal: true }] }], thumbItems: [{ type: i0.ViewChildren, args: ['thumbItem', { isSignal: true }] }], previewThumbItems: [{ type: i0.ViewChildren, args: ['previewThumbItem', { isSignal: true }] }], itemTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplateRef", required: false }] }], thumbnailTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnailTemplateRef", required: false }] }], captionTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplateRef", required: false }] }], onMouseMove: [{
|
|
7172
7219
|
type: HostListener,
|
|
7173
7220
|
args: ['document:mousemove', ['$event']]
|
|
7174
7221
|
}], onMouseUp: [{
|
|
@@ -7177,9 +7224,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7177
7224
|
}], handleKeyboardEvent: [{
|
|
7178
7225
|
type: HostListener,
|
|
7179
7226
|
args: ['document:keydown', ['$event']]
|
|
7180
|
-
}],
|
|
7227
|
+
}], onDocumentKeyDown: [{
|
|
7181
7228
|
type: HostListener,
|
|
7182
|
-
args: ['document:
|
|
7229
|
+
args: ['document:keydown', ['$event']]
|
|
7183
7230
|
}] } });
|
|
7184
7231
|
|
|
7185
7232
|
class CarouselIconsModule {
|
|
@@ -8889,11 +8936,11 @@ class MagaryPanelmenu {
|
|
|
8889
8936
|
return item.disabled === true;
|
|
8890
8937
|
}
|
|
8891
8938
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryPanelmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8892
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MagaryPanelmenu, isStandalone: true, selector: "magary-panelmenu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", 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 }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuToggle: "menuToggle", itemClick: "itemClick", itemExpand: "itemExpand", expandSidebar: "expandSidebar" }, ngImport: i0, template: "<div\r\n class=\"panel-menu\"\r\n [ngClass]=\"['shadow-' + shadow()]\"\r\n [class.open]=\"isOpen()\"\r\n [class.collapsed]=\"collapsed()\"\r\n [ngStyle]=\"panelStyles()\"\r\n>\r\n <div\r\n class=\"panel-header\"\r\n [class.header-hovered]=\"hoveredHeader()\"\r\n (click)=\"toggle()\"\r\n (mouseenter)=\"onHeaderHover(true)\"\r\n (mouseleave)=\"onHeaderHover(false)\"\r\n >\r\n @if (icon()) {\r\n <span class=\"header-icon {{ iconClass() || '' }}\">\r\n <lucide-icon [name]=\"icon()\"></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"header-title\">{{ title() }}</span>\r\n <span class=\"arrow\" [class.open]=\"isOpen()\">\r\n <lucide-icon name=\"chevron-down\"></lucide-icon>\r\n </span>\r\n </div>\r\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\r\n @for (item of items(); track getItemId(item, $index)) {\r\n <li class=\"menu-item\" [ngClass]=\"item.styleClass\">\r\n @if (hasChildren(item)) {\r\n <div\r\n class=\"category-item\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"\r\n !isItemDisabled(item) &&\r\n toggleSubItem(getUniqueItemKey(item), item)\r\n \"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(getUniqueItemKey(item)) ? 'minus' : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of getChildren(item);\n track subItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subItem.styleClass\">\r\n @if (hasChildren(subItem)) {\r\n <div\r\n class=\"sub-category-item\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n toggleSubItem(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\r\n subItem\r\n )\r\n \"\r\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n \"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n ? 'minus'\r\n : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\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 getChildren(subItem);\n track subSubItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subSubItem.styleClass\">\r\n @if (hasRoute(subSubItem)) {\n <a\n [routerLink]=\"getRouterLink(subSubItem)\"\n [queryParams]=\"subSubItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n !isItemDisabled(subSubItem) &&\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(subItem)) {\n <a\n [routerLink]=\"getRouterLink(subItem)\"\n [queryParams]=\"subItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"onItemClick(subItem, 1, [item.label || ''])\"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n @if (subItem.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (subItem.badgeSeverity || 'info')\"\r\n >{{ subItem.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n onItemClick(subItem, 1, [item.label || ''])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(item)) {\n <a\n [routerLink]=\"getRouterLink(item)\"\n [queryParams]=\"item.queryParams || undefined\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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;gap:10px;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 .header-icon{margin-right:.75rem;width:16px;text-align:center}.panel-header .header-title{flex:1}.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:15px;text-align:center;margin-right:.75rem;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:15px;text-align:center;margin-right:.75rem}.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}.menu-badge{display:inline-flex;align-items:center;justify-content:center;padding:.25em .5em;font-size:.75em;font-weight:700;line-height:1;border-radius:.25rem;margin-left:.5rem;color:#fff;white-space:nowrap}.menu-badge.badge-info{background-color:var(--info)}.menu-badge.badge-success{background-color:var(--success)}.menu-badge.badge-warning{background-color:var(--warning)}.menu-badge.badge-danger{background-color:var(--danger)}.menu-badge.badge-contrast{background-color:var(--surface-900);color:var(--surface-0)}.panel-menu.collapsed .panel-header{padding:10px 0;justify-content:center}.panel-menu.collapsed .panel-header .header-title,.panel-menu.collapsed .panel-header .arrow{display:none}.panel-menu.collapsed .panel-header .header-icon{margin-right:.5rem;font-size:1.2rem}.panel-menu.collapsed .panel-items{display:none}.panel-menu.collapsed .menu-item-base,.panel-items li .panel-menu.collapsed a,.panel-menu.collapsed .category-item,.panel-menu.collapsed .sub-category-item,.panel-menu.collapsed .panel-items li a{justify-content:center;padding:.75rem .5rem;background:transparent!important;box-shadow:none!important}.panel-menu.collapsed .menu-item-base:hover,.panel-items li .panel-menu.collapsed a:hover,.panel-menu.collapsed .category-item:hover,.panel-menu.collapsed .sub-category-item:hover,.panel-menu.collapsed .panel-items li a:hover{background:var(--panel-hover)!important;color:#fff}.panel-menu.collapsed .menu-item-base .item-label,.panel-items li .panel-menu.collapsed a .item-label,.panel-menu.collapsed .menu-item-base .sub-arrow,.panel-items li .panel-menu.collapsed a .sub-arrow,.panel-menu.collapsed .menu-item-base .menu-badge,.panel-items li .panel-menu.collapsed a .menu-badge,.panel-menu.collapsed .category-item .item-label,.panel-menu.collapsed .category-item .sub-arrow,.panel-menu.collapsed .category-item .menu-badge,.panel-menu.collapsed .sub-category-item .item-label,.panel-menu.collapsed .sub-category-item .sub-arrow,.panel-menu.collapsed .sub-category-item .menu-badge,.panel-menu.collapsed .panel-items li a .item-label,.panel-menu.collapsed .panel-items li a .sub-arrow,.panel-menu.collapsed .panel-items li a .menu-badge{display:none}.panel-menu.collapsed .menu-item-base .item-icon,.panel-items li .panel-menu.collapsed a .item-icon,.panel-menu.collapsed .category-item .item-icon,.panel-menu.collapsed .sub-category-item .item-icon,.panel-menu.collapsed .panel-items li a .item-icon{margin-right:0;font-size:1.2rem;width:auto}.panel-menu.collapsed .sub-items,.panel-menu.collapsed .sub-sub-items{display:none!important}\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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8939
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MagaryPanelmenu, isStandalone: true, selector: "magary-panelmenu", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", 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 }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuToggle: "menuToggle", itemClick: "itemClick", itemExpand: "itemExpand", expandSidebar: "expandSidebar" }, ngImport: i0, template: "<div\r\n class=\"panel-menu\"\r\n [ngClass]=\"['shadow-' + shadow()]\"\r\n [class.open]=\"isOpen()\"\r\n [class.collapsed]=\"collapsed()\"\r\n [ngStyle]=\"panelStyles()\"\r\n>\r\n <div\r\n class=\"panel-header\"\r\n [class.header-hovered]=\"hoveredHeader()\"\r\n (click)=\"toggle()\"\r\n (mouseenter)=\"onHeaderHover(true)\"\r\n (mouseleave)=\"onHeaderHover(false)\"\r\n >\r\n @if (icon()) {\r\n <span class=\"header-icon {{ iconClass() || '' }}\">\r\n <lucide-icon [name]=\"icon()\"></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"header-title\">{{ title() }}</span>\r\n <span class=\"arrow\" [class.open]=\"isOpen()\">\r\n <lucide-icon name=\"chevron-down\"></lucide-icon>\r\n </span>\r\n </div>\r\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\r\n @for (item of items(); track getItemId(item, $index)) {\r\n <li class=\"menu-item\" [ngClass]=\"item.styleClass\">\r\n @if (hasChildren(item)) {\r\n <div\r\n class=\"category-item\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"\r\n !isItemDisabled(item) &&\r\n toggleSubItem(getUniqueItemKey(item), item)\r\n \"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(getUniqueItemKey(item)) ? 'minus' : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of getChildren(item);\n track subItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subItem.styleClass\">\r\n @if (hasChildren(subItem)) {\r\n <div\r\n class=\"sub-category-item\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n toggleSubItem(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\r\n subItem\r\n )\r\n \"\r\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n \"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n ? 'minus'\r\n : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\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 getChildren(subItem);\n track subSubItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subSubItem.styleClass\">\r\n @if (hasRoute(subSubItem)) {\n <a\n [routerLink]=\"getRouterLink(subSubItem)\"\n [queryParams]=\"subSubItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n !isItemDisabled(subSubItem) &&\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(subItem)) {\n <a\n [routerLink]=\"getRouterLink(subItem)\"\n [queryParams]=\"subItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"onItemClick(subItem, 1, [item.label || ''])\"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n @if (subItem.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (subItem.badgeSeverity || 'info')\"\r\n >{{ subItem.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n onItemClick(subItem, 1, [item.label || ''])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(item)) {\n <a\n [routerLink]=\"getRouterLink(item)\"\n [queryParams]=\"item.queryParams || undefined\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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;gap:10px;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:var(--panel-hover-text, #ffffff)}.panel-header .header-icon{margin-right:.75rem;width:16px;text-align:center}.panel-header .header-title{flex:1}.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:var(--panel-hover-text, #ffffff);background:var(--panel-hover);box-shadow:0 2px 8px #0000000d}.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:15px;text-align:center;margin-right:.75rem;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:15px;text-align:center;margin-right:.75rem}.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 4 px 6 px #00000026}.shadow-2{box-shadow:0 6 px 8 px #0003}.shadow-3{box-shadow:0 8 px 10 px #00000040}.shadow-4{box-shadow:0 10 px 12 px #0000004d}.shadow-5{box-shadow:0 12 px 14 px #00000059}.shadow-6{box-shadow:0 14 px 16 px #0006}.shadow-7{box-shadow:0 16 px 18 px #00000073}.menu-badge{display:inline-flex;align-items:center;justify-content:center;padding:.25em .5em;font-size:.75em;font-weight:700;line-height:1;border-radius:.25rem;margin-left:.5rem;color:#fff;white-space:nowrap}.menu-badge.badge-info{background-color:var(--info)}.menu-badge.badge-success{background-color:var(--success)}.menu-badge.badge-warning{background-color:var(--warning)}.menu-badge.badge-danger{background-color:var(--danger)}.menu-badge.badge-contrast{background-color:var(--surface-900);color:var(--surface-0)}.panel-menu.collapsed .panel-header{padding:10px 0;justify-content:center}.panel-menu.collapsed .panel-header .header-title,.panel-menu.collapsed .panel-header .arrow{display:none}.panel-menu.collapsed .panel-header .header-icon{margin-right:.5rem;font-size:1.2rem}.panel-menu.collapsed .panel-items{display:none}.panel-menu.collapsed .menu-item-base,.panel-items li .panel-menu.collapsed a,.panel-menu.collapsed .category-item,.panel-menu.collapsed .sub-category-item,.panel-menu.collapsed .panel-items li a{justify-content:center;padding:.75rem .5rem;background:transparent!important;box-shadow:none!important}.panel-menu.collapsed .menu-item-base:hover,.panel-items li .panel-menu.collapsed a:hover,.panel-menu.collapsed .category-item:hover,.panel-menu.collapsed .sub-category-item:hover,.panel-menu.collapsed .panel-items li a:hover{background:var(--panel-hover)!important;color:var(--panel-hover-text, #ffffff)}.panel-menu.collapsed .menu-item-base .item-label,.panel-items li .panel-menu.collapsed a .item-label,.panel-menu.collapsed .menu-item-base .sub-arrow,.panel-items li .panel-menu.collapsed a .sub-arrow,.panel-menu.collapsed .menu-item-base .menu-badge,.panel-items li .panel-menu.collapsed a .menu-badge,.panel-menu.collapsed .category-item .item-label,.panel-menu.collapsed .category-item .sub-arrow,.panel-menu.collapsed .category-item .menu-badge,.panel-menu.collapsed .sub-category-item .item-label,.panel-menu.collapsed .sub-category-item .sub-arrow,.panel-menu.collapsed .sub-category-item .menu-badge,.panel-menu.collapsed .panel-items li a .item-label,.panel-menu.collapsed .panel-items li a .sub-arrow,.panel-menu.collapsed .panel-items li a .menu-badge{display:none}.panel-menu.collapsed .menu-item-base .item-icon,.panel-items li .panel-menu.collapsed a .item-icon,.panel-menu.collapsed .category-item .item-icon,.panel-menu.collapsed .sub-category-item .item-icon,.panel-menu.collapsed .panel-items li a .item-icon{margin-right:0;font-size:1.2rem;width:auto}.panel-menu.collapsed .sub-items,.panel-menu.collapsed .sub-sub-items{display:none!important}\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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8893
8940
|
}
|
|
8894
8941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MagaryPanelmenu, decorators: [{
|
|
8895
8942
|
type: Component,
|
|
8896
|
-
args: [{ selector: 'magary-panelmenu', imports: [CommonModule, RouterModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"panel-menu\"\r\n [ngClass]=\"['shadow-' + shadow()]\"\r\n [class.open]=\"isOpen()\"\r\n [class.collapsed]=\"collapsed()\"\r\n [ngStyle]=\"panelStyles()\"\r\n>\r\n <div\r\n class=\"panel-header\"\r\n [class.header-hovered]=\"hoveredHeader()\"\r\n (click)=\"toggle()\"\r\n (mouseenter)=\"onHeaderHover(true)\"\r\n (mouseleave)=\"onHeaderHover(false)\"\r\n >\r\n @if (icon()) {\r\n <span class=\"header-icon {{ iconClass() || '' }}\">\r\n <lucide-icon [name]=\"icon()\"></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"header-title\">{{ title() }}</span>\r\n <span class=\"arrow\" [class.open]=\"isOpen()\">\r\n <lucide-icon name=\"chevron-down\"></lucide-icon>\r\n </span>\r\n </div>\r\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\r\n @for (item of items(); track getItemId(item, $index)) {\r\n <li class=\"menu-item\" [ngClass]=\"item.styleClass\">\r\n @if (hasChildren(item)) {\r\n <div\r\n class=\"category-item\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"\r\n !isItemDisabled(item) &&\r\n toggleSubItem(getUniqueItemKey(item), item)\r\n \"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(getUniqueItemKey(item)) ? 'minus' : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of getChildren(item);\n track subItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subItem.styleClass\">\r\n @if (hasChildren(subItem)) {\r\n <div\r\n class=\"sub-category-item\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n toggleSubItem(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\r\n subItem\r\n )\r\n \"\r\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n \"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n ? 'minus'\r\n : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\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 getChildren(subItem);\n track subSubItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subSubItem.styleClass\">\r\n @if (hasRoute(subSubItem)) {\n <a\n [routerLink]=\"getRouterLink(subSubItem)\"\n [queryParams]=\"subSubItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n !isItemDisabled(subSubItem) &&\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(subItem)) {\n <a\n [routerLink]=\"getRouterLink(subItem)\"\n [queryParams]=\"subItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"onItemClick(subItem, 1, [item.label || ''])\"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n @if (subItem.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (subItem.badgeSeverity || 'info')\"\r\n >{{ subItem.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n onItemClick(subItem, 1, [item.label || ''])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(item)) {\n <a\n [routerLink]=\"getRouterLink(item)\"\n [queryParams]=\"item.queryParams || undefined\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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;gap:10px;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 .header-icon{margin-right:.75rem;width:16px;text-align:center}.panel-header .header-title{flex:1}.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:15px;text-align:center;margin-right:.75rem;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:15px;text-align:center;margin-right:.75rem}.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}.menu-badge{display:inline-flex;align-items:center;justify-content:center;padding:.25em .5em;font-size:.75em;font-weight:700;line-height:1;border-radius:.25rem;margin-left:.5rem;color:#fff;white-space:nowrap}.menu-badge.badge-info{background-color:var(--info)}.menu-badge.badge-success{background-color:var(--success)}.menu-badge.badge-warning{background-color:var(--warning)}.menu-badge.badge-danger{background-color:var(--danger)}.menu-badge.badge-contrast{background-color:var(--surface-900);color:var(--surface-0)}.panel-menu.collapsed .panel-header{padding:10px 0;justify-content:center}.panel-menu.collapsed .panel-header .header-title,.panel-menu.collapsed .panel-header .arrow{display:none}.panel-menu.collapsed .panel-header .header-icon{margin-right:.5rem;font-size:1.2rem}.panel-menu.collapsed .panel-items{display:none}.panel-menu.collapsed .menu-item-base,.panel-items li .panel-menu.collapsed a,.panel-menu.collapsed .category-item,.panel-menu.collapsed .sub-category-item,.panel-menu.collapsed .panel-items li a{justify-content:center;padding:.75rem .5rem;background:transparent!important;box-shadow:none!important}.panel-menu.collapsed .menu-item-base:hover,.panel-items li .panel-menu.collapsed a:hover,.panel-menu.collapsed .category-item:hover,.panel-menu.collapsed .sub-category-item:hover,.panel-menu.collapsed .panel-items li a:hover{background:var(--panel-hover)!important;color:#fff}.panel-menu.collapsed .menu-item-base .item-label,.panel-items li .panel-menu.collapsed a .item-label,.panel-menu.collapsed .menu-item-base .sub-arrow,.panel-items li .panel-menu.collapsed a .sub-arrow,.panel-menu.collapsed .menu-item-base .menu-badge,.panel-items li .panel-menu.collapsed a .menu-badge,.panel-menu.collapsed .category-item .item-label,.panel-menu.collapsed .category-item .sub-arrow,.panel-menu.collapsed .category-item .menu-badge,.panel-menu.collapsed .sub-category-item .item-label,.panel-menu.collapsed .sub-category-item .sub-arrow,.panel-menu.collapsed .sub-category-item .menu-badge,.panel-menu.collapsed .panel-items li a .item-label,.panel-menu.collapsed .panel-items li a .sub-arrow,.panel-menu.collapsed .panel-items li a .menu-badge{display:none}.panel-menu.collapsed .menu-item-base .item-icon,.panel-items li .panel-menu.collapsed a .item-icon,.panel-menu.collapsed .category-item .item-icon,.panel-menu.collapsed .sub-category-item .item-icon,.panel-menu.collapsed .panel-items li a .item-icon{margin-right:0;font-size:1.2rem;width:auto}.panel-menu.collapsed .sub-items,.panel-menu.collapsed .sub-sub-items{display:none!important}\n"] }]
|
|
8943
|
+
args: [{ selector: 'magary-panelmenu', imports: [CommonModule, RouterModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"panel-menu\"\r\n [ngClass]=\"['shadow-' + shadow()]\"\r\n [class.open]=\"isOpen()\"\r\n [class.collapsed]=\"collapsed()\"\r\n [ngStyle]=\"panelStyles()\"\r\n>\r\n <div\r\n class=\"panel-header\"\r\n [class.header-hovered]=\"hoveredHeader()\"\r\n (click)=\"toggle()\"\r\n (mouseenter)=\"onHeaderHover(true)\"\r\n (mouseleave)=\"onHeaderHover(false)\"\r\n >\r\n @if (icon()) {\r\n <span class=\"header-icon {{ iconClass() || '' }}\">\r\n <lucide-icon [name]=\"icon()\"></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"header-title\">{{ title() }}</span>\r\n <span class=\"arrow\" [class.open]=\"isOpen()\">\r\n <lucide-icon name=\"chevron-down\"></lucide-icon>\r\n </span>\r\n </div>\r\n <ul class=\"panel-items\" [class.expanded]=\"isOpen()\">\r\n @for (item of items(); track getItemId(item, $index)) {\r\n <li class=\"menu-item\" [ngClass]=\"item.styleClass\">\r\n @if (hasChildren(item)) {\r\n <div\r\n class=\"category-item\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"\r\n !isItemDisabled(item) &&\r\n toggleSubItem(getUniqueItemKey(item), item)\r\n \"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(getUniqueItemKey(item)) ? 'minus' : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\n <ul\n class=\"sub-items\"\n [class.expanded]=\"isSubItemExpanded(getUniqueItemKey(item))\"\n >\n @for (\n subItem of getChildren(item);\n track subItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subItem.styleClass\">\r\n @if (hasChildren(subItem)) {\r\n <div\r\n class=\"sub-category-item\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n toggleSubItem(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item)),\r\n subItem\r\n )\r\n \"\r\n (mouseenter)=\"onItemHover(subItem.label + '-sub-' + $index)\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n <span\r\n class=\"sub-arrow\"\r\n [class.expanded]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n \"\r\n >\r\n <lucide-icon\r\n [name]=\"\r\n isSubItemExpanded(\r\n getUniqueItemKey(subItem, getUniqueItemKey(item))\r\n )\r\n ? 'minus'\r\n : 'plus'\r\n \"\r\n ></lucide-icon>\r\n </span>\r\n </div>\r\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 getChildren(subItem);\n track subSubItem.label + \"-\" + $index\n ) {\n <li [ngClass]=\"subSubItem.styleClass\">\r\n @if (hasRoute(subSubItem)) {\n <a\n [routerLink]=\"getRouterLink(subSubItem)\"\n [queryParams]=\"subSubItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(\n subSubItem.label + '-subsub-' + $index\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n [class.disabled]=\"isItemDisabled(subSubItem)\"\r\n (click)=\"\r\n !isItemDisabled(subSubItem) &&\r\n onItemClick(subSubItem, 2, [\r\n item.label || '',\r\n subItem.label || '',\r\n ])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(\r\n subSubItem.label + '-subsub-' + $index\r\n )\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subSubItem.icon) {\r\n <span\r\n class=\"item-icon {{\r\n subSubItem.iconClass || ''\r\n }}\"\r\n >\r\n <lucide-icon\r\n [name]=\"subSubItem.icon\"\r\n [size]=\"subSubItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{\r\n subSubItem.label\r\n }}</span>\r\n </div>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(subItem)) {\n <a\n [routerLink]=\"getRouterLink(subItem)\"\n [queryParams]=\"subItem.queryParams || undefined\"\n [class.item-hovered]=\"\n isItemHovered(subItem.label + '-sub-' + $index)\n \"\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"onItemClick(subItem, 1, [item.label || ''])\"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n @if (subItem.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (subItem.badgeSeverity || 'info')\"\r\n >{{ subItem.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"\r\n isItemHovered(subItem.label + '-sub-' + $index)\r\n \"\r\n [class.disabled]=\"isItemDisabled(subItem)\"\r\n (click)=\"\r\n !isItemDisabled(subItem) &&\r\n onItemClick(subItem, 1, [item.label || ''])\r\n \"\r\n (mouseenter)=\"\r\n onItemHover(subItem.label + '-sub-' + $index)\r\n \"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (subItem.icon) {\r\n <span class=\"item-icon {{ subItem.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"subItem.icon\"\r\n [size]=\"subItem.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ subItem.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n } @else {\r\n @if (hasRoute(item)) {\n <a\n [routerLink]=\"getRouterLink(item)\"\n [queryParams]=\"item.queryParams || undefined\"\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\n [class.disabled]=\"isItemDisabled(item)\"\n (click)=\"onItemClick(item, 0)\"\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n @if (item.badgeSeverity) {\r\n <span\r\n class=\"menu-badge\"\r\n [class]=\"'badge-' + (item.badgeSeverity || 'info')\"\r\n >{{ item.badgeSeverity }}</span\r\n >\r\n }\r\n </a>\r\n } @else {\r\n <div\r\n class=\"menu-item-base\"\r\n [class.item-hovered]=\"isItemHovered(getItemId(item, $index))\"\r\n [class.disabled]=\"isItemDisabled(item)\"\r\n (click)=\"!isItemDisabled(item) && onItemClick(item, 0)\"\r\n (mouseenter)=\"onItemHover(getItemId(item, $index))\"\r\n (mouseleave)=\"onItemLeave()\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"item-icon {{ item.iconClass || '' }}\">\r\n <lucide-icon\r\n [name]=\"item.icon\"\r\n [size]=\"item.iconSize || 15\"\r\n ></lucide-icon>\r\n </span>\r\n }\r\n <span class=\"item-label\">{{ item.label }}</span>\r\n </div>\r\n }\r\n }\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\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;gap:10px;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:var(--panel-hover-text, #ffffff)}.panel-header .header-icon{margin-right:.75rem;width:16px;text-align:center}.panel-header .header-title{flex:1}.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:var(--panel-hover-text, #ffffff);background:var(--panel-hover);box-shadow:0 2px 8px #0000000d}.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:15px;text-align:center;margin-right:.75rem;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:15px;text-align:center;margin-right:.75rem}.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 4 px 6 px #00000026}.shadow-2{box-shadow:0 6 px 8 px #0003}.shadow-3{box-shadow:0 8 px 10 px #00000040}.shadow-4{box-shadow:0 10 px 12 px #0000004d}.shadow-5{box-shadow:0 12 px 14 px #00000059}.shadow-6{box-shadow:0 14 px 16 px #0006}.shadow-7{box-shadow:0 16 px 18 px #00000073}.menu-badge{display:inline-flex;align-items:center;justify-content:center;padding:.25em .5em;font-size:.75em;font-weight:700;line-height:1;border-radius:.25rem;margin-left:.5rem;color:#fff;white-space:nowrap}.menu-badge.badge-info{background-color:var(--info)}.menu-badge.badge-success{background-color:var(--success)}.menu-badge.badge-warning{background-color:var(--warning)}.menu-badge.badge-danger{background-color:var(--danger)}.menu-badge.badge-contrast{background-color:var(--surface-900);color:var(--surface-0)}.panel-menu.collapsed .panel-header{padding:10px 0;justify-content:center}.panel-menu.collapsed .panel-header .header-title,.panel-menu.collapsed .panel-header .arrow{display:none}.panel-menu.collapsed .panel-header .header-icon{margin-right:.5rem;font-size:1.2rem}.panel-menu.collapsed .panel-items{display:none}.panel-menu.collapsed .menu-item-base,.panel-items li .panel-menu.collapsed a,.panel-menu.collapsed .category-item,.panel-menu.collapsed .sub-category-item,.panel-menu.collapsed .panel-items li a{justify-content:center;padding:.75rem .5rem;background:transparent!important;box-shadow:none!important}.panel-menu.collapsed .menu-item-base:hover,.panel-items li .panel-menu.collapsed a:hover,.panel-menu.collapsed .category-item:hover,.panel-menu.collapsed .sub-category-item:hover,.panel-menu.collapsed .panel-items li a:hover{background:var(--panel-hover)!important;color:var(--panel-hover-text, #ffffff)}.panel-menu.collapsed .menu-item-base .item-label,.panel-items li .panel-menu.collapsed a .item-label,.panel-menu.collapsed .menu-item-base .sub-arrow,.panel-items li .panel-menu.collapsed a .sub-arrow,.panel-menu.collapsed .menu-item-base .menu-badge,.panel-items li .panel-menu.collapsed a .menu-badge,.panel-menu.collapsed .category-item .item-label,.panel-menu.collapsed .category-item .sub-arrow,.panel-menu.collapsed .category-item .menu-badge,.panel-menu.collapsed .sub-category-item .item-label,.panel-menu.collapsed .sub-category-item .sub-arrow,.panel-menu.collapsed .sub-category-item .menu-badge,.panel-menu.collapsed .panel-items li a .item-label,.panel-menu.collapsed .panel-items li a .sub-arrow,.panel-menu.collapsed .panel-items li a .menu-badge{display:none}.panel-menu.collapsed .menu-item-base .item-icon,.panel-items li .panel-menu.collapsed a .item-icon,.panel-menu.collapsed .category-item .item-icon,.panel-menu.collapsed .sub-category-item .item-icon,.panel-menu.collapsed .panel-items li a .item-icon{margin-right:0;font-size:1.2rem;width:auto}.panel-menu.collapsed .sub-items,.panel-menu.collapsed .sub-sub-items{display:none!important}\n"] }]
|
|
8897
8944
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], allowMultipleExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleExpanded", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], menuToggle: [{ type: i0.Output, args: ["menuToggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemExpand: [{ type: i0.Output, args: ["itemExpand"] }], expandSidebar: [{ type: i0.Output, args: ["expandSidebar"] }] } });
|
|
8898
8945
|
|
|
8899
8946
|
class Sidebar {
|
|
@@ -11882,7 +11929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
11882
11929
|
}, template: "<ng-content></ng-content>\r\n", styles: [".magary-accordion-header .magary-accordion-header-link{background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none;font-family:inherit}.magary-accordion-item{display:block;border:1px solid var(--surface-200);margin-bottom:.5rem;gap:.5rem;border-radius:var(--border-radius);overflow:hidden;background:var(--surface-0);transition:all .2s ease-in-out}.magary-accordion-item:first-child{border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.magary-accordion-item:last-child{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);margin-bottom:0}.magary-accordion-item.magary-accordion-item-active{box-shadow:var(--shadow-md);border-color:var(--primary-200);transform:translateY(-2px);z-index:1}.magary-accordion-item.magary-accordion-item-active .magary-accordion-header-link{background:var(--surface-50);color:var(--primary-700);font-weight:600}.magary-accordion-item.magary-accordion-item-active .magary-accordion-header-link .magary-accordion-toggle-icon{color:var(--primary-500)}.magary-accordion-item.magary-accordion-item-disabled{opacity:.6;pointer-events:none;background:var(--surface-100)}.magary-accordion-item:hover:not(.magary-accordion-item-disabled):not(.magary-accordion-item-active){border-color:var(--surface-300);box-shadow:var(--shadow-sm)}.magary-accordion-header{margin:0}.magary-accordion-header .magary-accordion-header-link{display:flex;align-items:center;width:100%;padding:1.25rem 1.5rem;transition:all .2s ease;color:var(--text-secondary);font-size:1.1rem;text-align:left;position:relative}.magary-accordion-header .magary-accordion-header-link:hover{background:linear-gradient(to right,var(--surface-0),var(--surface-50));color:var(--text-primary);padding-left:1.75rem}.magary-accordion-header .magary-accordion-header-link:focus-visible{z-index:2;box-shadow:inset 0 0 0 2px var(--primary-400)}.magary-accordion-header .magary-accordion-header-link .magary-accordion-toggle-icon{display:flex;align-items:center;justify-content:center;margin-right:.75rem;color:var(--text-tertiary);transition:transform .3s ease,color .2s}.magary-accordion-header .magary-accordion-header-link .magary-accordion-toggle-icon .rotate-90{transform:rotate(90deg);color:var(--primary-500)}.magary-accordion-header .magary-accordion-header-link .magary-accordion-header-text{line-height:1.2;flex:1}.magary-accordion-content-wrapper{overflow:hidden;background:var(--surface-0);border-top:1px solid transparent;transition:border-color .2s}.magary-accordion-item-active .magary-accordion-content-wrapper{border-top:1px solid var(--surface-100)}.magary-accordion-content{padding:1.5rem 1.5rem 2rem;color:var(--text-secondary);line-height:1.6;font-size:1rem}.magary-accordion-content img,.magary-accordion-content video{max-width:100%;height:auto;border-radius:calc(var(--border-radius) / 2)}@media(max-width:768px){.magary-accordion-header-link{padding:1rem 1.25rem;font-size:1rem}.magary-accordion-header-link:hover{padding-left:1.25rem}.magary-accordion-content{padding:1rem 1.25rem 1.5rem}}\n"] }]
|
|
11883
11930
|
}], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MagaryAccordionTab), { isSignal: true }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }] } });
|
|
11884
11931
|
|
|
11885
|
-
const SUPPORTED_THEMES = ['light', 'dark', 'purple', 'green'];
|
|
11932
|
+
const SUPPORTED_THEMES = ['light', 'dark', 'purple', 'green', 'neo', 'midnight', 'cyberpunk', 'cotton', 'liquid'];
|
|
11886
11933
|
class MagaryThemeService {
|
|
11887
11934
|
platformId = inject(PLATFORM_ID);
|
|
11888
11935
|
// Signal to track current theme
|
|
@@ -12205,7 +12252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
12205
12252
|
|
|
12206
12253
|
// Button
|
|
12207
12254
|
|
|
12208
|
-
const MAGARY_VERSION = '0.0.
|
|
12255
|
+
const MAGARY_VERSION = '0.0.22';
|
|
12209
12256
|
|
|
12210
12257
|
/*
|
|
12211
12258
|
* Public API Surface of ng-magary
|