otimus-library 0.3.39 → 0.3.40

package/fesm2022/otimus-library.mjs

@@ -8,7 +8,7 @@ import * as i2 from '@angular/platform-browser';
 import * as i5 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i3 from '@angular/cdk/overlay';
 
 class OtimusLibraryService {
@@ -2619,6 +2619,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcOverlayComponent {
+    constructor(overlay, viewContainerRef) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.ocContent = null;
+        this.ocTrigger = 'click';
+        this.ocPosition = 'center';
+        this.ocShowBackdrop = true;
+        this.ocCloseOnBackdropClick = true;
+        this.ocWidth = 'auto';
+        this.ocHeight = 'auto';
+        this.ocStyle = 'otimus';
+        this.ocDisabled = false;
+        this.ocZIndex = 1000;
+        this.ocOpen = new EventEmitter();
+        this.ocClose = new EventEmitter();
+        this.ocToggle = new EventEmitter();
+        this.overlayRef = null;
+        this.portal = null;
+        this.isOverlayOpen = false;
+    }
+    ngAfterViewInit() {
+        this.setupEventListeners();
+    }
+    ngOnDestroy() {
+        this.closeOverlay();
+    }
+    setupEventListeners() {
+        if (!this.trigger || this.ocDisabled)
+            return;
+        const triggerElement = this.trigger.nativeElement;
+        if (this.ocTrigger === 'click') {
+            triggerElement.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.toggleOverlay();
+            });
+        }
+        else if (this.ocTrigger === 'hover') {
+            triggerElement.addEventListener('mouseenter', () => {
+                this.openOverlay();
+            });
+            triggerElement.addEventListener('mouseleave', () => {
+                // Add a small delay before closing to allow moving into the overlay
+                setTimeout(() => {
+                    this.closeOverlay();
+                }, 100);
+            });
+        }
+    }
+    toggleOverlay() {
+        if (this.isOverlayOpen) {
+            this.closeOverlay();
+        }
+        else {
+            this.openOverlay();
+        }
+    }
+    openOverlay() {
+        if (this.isOverlayOpen || this.ocDisabled || !this.overlayTemplate) {
+            return;
+        }
+        const overlayConfig = this.getOverlayConfig();
+        this.overlayRef = this.overlay.create(overlayConfig);
+        this.portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(this.portal);
+        this.isOverlayOpen = true;
+        // Handle backdrop click
+        if (this.ocShowBackdrop && this.ocCloseOnBackdropClick) {
+            this.overlayRef.backdropClick().subscribe(() => {
+                this.closeOverlay();
+            });
+        }
+        this.ocOpen.emit();
+        this.ocToggle.emit(true);
+    }
+    closeOverlay() {
+        if (!this.overlayRef || !this.isOverlayOpen) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.overlayRef.dispose();
+        this.overlayRef = null;
+        this.portal = null;
+        this.isOverlayOpen = false;
+        this.ocClose.emit();
+        this.ocToggle.emit(false);
+    }
+    getOverlayConfig() {
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.trigger.nativeElement)
+            .withPositions(this.getPositions())
+            .withFlexibleDimensions(true)
+            .withPush(false);
+        return {
+            positionStrategy,
+            hasBackdrop: this.ocShowBackdrop,
+            backdropClass: this.ocShowBackdrop ? undefined : 'cdk-overlay-transparent-backdrop',
+            panelClass: ['oc-overlay-panel', `oc-overlay-${this.ocStyle}`],
+            width: this.parseSize(this.ocWidth),
+            height: this.parseSize(this.ocHeight),
+            disposeOnNavigation: true
+        };
+    }
+    getPositions() {
+        const basePositions = [
+            {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetX: 0,
+                offsetY: 8
+            },
+            {
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
+                offsetX: 0,
+                offsetY: -8
+            },
+            {
+                originX: 'end',
+                originY: 'center',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetX: -8,
+                offsetY: 0
+            },
+            {
+                originX: 'start',
+                originY: 'center',
+                overlayX: 'end',
+                overlayY: 'center',
+                offsetX: 8,
+                offsetY: 0
+            }
+        ];
+        // Position-specific configurations
+        switch (this.ocPosition) {
+            case 'top':
+                return [
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'bottom',
+                        offsetX: 0,
+                        offsetY: -8
+                    },
+                    basePositions[0]
+                ];
+            case 'bottom':
+                return [
+                    basePositions[0],
+                    basePositions[1]
+                ];
+            case 'left':
+                return [
+                    {
+                        originX: 'start',
+                        originY: 'center',
+                        overlayX: 'end',
+                        overlayY: 'center',
+                        offsetX: -8,
+                        offsetY: 0
+                    },
+                    basePositions[2]
+                ];
+            case 'right':
+                return [
+                    basePositions[2],
+                    basePositions[3]
+                ];
+            case 'center':
+            default:
+                return basePositions;
+        }
+    }
+    parseSize(size) {
+        if (size === 'auto' || size === undefined) {
+            return undefined;
+        }
+        return typeof size === 'number' ? `${size}px` : size;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcOverlayComponent, deps: [{ token: i3.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: OcOverlayComponent, isStandalone: true, selector: "oc-overlay", inputs: { ocContent: "ocContent", ocTrigger: "ocTrigger", ocPosition: "ocPosition", ocShowBackdrop: "ocShowBackdrop", ocCloseOnBackdropClick: "ocCloseOnBackdropClick", ocWidth: "ocWidth", ocHeight: "ocHeight", ocStyle: "ocStyle", ocDisabled: "ocDisabled", ocZIndex: "ocZIndex" }, outputs: { ocOpen: "ocOpen", ocClose: "ocClose", ocToggle: "ocToggle" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], ngImport: i0, template: "<!-- Trigger element -->\n<div #trigger class=\"oc-overlay-trigger\" [ngClass]=\"{\n    'disabled': ocDisabled,\n    'shui': ocStyle === 'shui'\n}\">\n    <ng-content select=\"[ocTrigger]\"></ng-content>\n</div>\n\n<!-- Template for overlay content -->\n<ng-template #overlayTemplate>\n    <div class=\"oc-overlay-content\" [ngClass]=\"{\n        'shui': ocStyle === 'shui'\n    }\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [".oc-overlay-trigger{display:inline-block;cursor:pointer;transition:opacity .2s ease}.oc-overlay-trigger.disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.oc-overlay-trigger:hover:not(.disabled){opacity:.8}.oc-overlay-panel{border-radius:0 8px 8px;box-shadow:0 4px 8.7px #00000021;z-index:1000;max-width:90vw;max-height:90vh;overflow:auto;animation:showUp .15s ease}.oc-overlay-content{padding:16px;font-family:inherit;font-size:1rem;line-height:1.5;color:#8f9596;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:12px}.oc-overlay-panel.oc-overlay-otimus .oc-overlay-content{color:#8f9596}.oc-overlay-panel.oc-overlay-shui{background-color:#f5f5f5;border:2px solid #ebebeb}.oc-overlay-panel.oc-overlay-shui .oc-overlay-content{color:#7d7d7d}.oc-overlay-backdrop{background-color:#00000052;animation:backdropFadeIn .2s ease-out}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.oc-overlay-panel{max-width:95vw;max-height:95vh}.oc-overlay-content{padding:12px;font-size:.875rem}}@media (prefers-contrast: high){.oc-overlay-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.oc-overlay-panel,.oc-overlay-backdrop{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-overlay', imports: [CommonModule], template: "<!-- Trigger element -->\n<div #trigger class=\"oc-overlay-trigger\" [ngClass]=\"{\n    'disabled': ocDisabled,\n    'shui': ocStyle === 'shui'\n}\">\n    <ng-content select=\"[ocTrigger]\"></ng-content>\n</div>\n\n<!-- Template for overlay content -->\n<ng-template #overlayTemplate>\n    <div class=\"oc-overlay-content\" [ngClass]=\"{\n        'shui': ocStyle === 'shui'\n    }\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [".oc-overlay-trigger{display:inline-block;cursor:pointer;transition:opacity .2s ease}.oc-overlay-trigger.disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.oc-overlay-trigger:hover:not(.disabled){opacity:.8}.oc-overlay-panel{border-radius:0 8px 8px;box-shadow:0 4px 8.7px #00000021;z-index:1000;max-width:90vw;max-height:90vh;overflow:auto;animation:showUp .15s ease}.oc-overlay-content{padding:16px;font-family:inherit;font-size:1rem;line-height:1.5;color:#8f9596;background-color:#f8f9ff;border:2px solid #ffffff;border-radius:12px}.oc-overlay-panel.oc-overlay-otimus .oc-overlay-content{color:#8f9596}.oc-overlay-panel.oc-overlay-shui{background-color:#f5f5f5;border:2px solid #ebebeb}.oc-overlay-panel.oc-overlay-shui .oc-overlay-content{color:#7d7d7d}.oc-overlay-backdrop{background-color:#00000052;animation:backdropFadeIn .2s ease-out}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.oc-overlay-panel{max-width:95vw;max-height:95vh}.oc-overlay-content{padding:12px;font-size:.875rem}}@media (prefers-contrast: high){.oc-overlay-panel{border-width:2px}}@media (prefers-reduced-motion: reduce){.oc-overlay-panel,.oc-overlay-backdrop{animation:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i3.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { ocContent: [{
+                type: Input
+            }], ocTrigger: [{
+                type: Input
+            }], ocPosition: [{
+                type: Input
+            }], ocShowBackdrop: [{
+                type: Input
+            }], ocCloseOnBackdropClick: [{
+                type: Input
+            }], ocWidth: [{
+                type: Input
+            }], ocHeight: [{
+                type: Input
+            }], ocStyle: [{
+                type: Input
+            }], ocDisabled: [{
+                type: Input
+            }], ocZIndex: [{
+                type: Input
+            }], ocOpen: [{
+                type: Output
+            }], ocClose: [{
+                type: Output
+            }], ocToggle: [{
+                type: Output
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }] } });
+
 /*
  * Public API Surface of otimus-library
  */
@@ -2627,5 +2852,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
+export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcButtonMenuComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
 //# sourceMappingURL=otimus-library.mjs.map