otimus-library 0.3.39 → 0.3.41

package/fesm2022/otimus-library.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Directive, HostBinding, ContentChild, ViewEncapsulation, EventEmitter, Output, ViewChildren, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
+import { Injectable, Component, Input, Directive, input, EventEmitter, Output, HostBinding, ContentChild, ViewEncapsulation, ViewChildren, ViewChild, ChangeDetectionStrategy, forwardRef, ContentChildren } from '@angular/core';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import * as i1 from '@angular/common';
@@ -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 {
@@ -539,6 +539,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+class OcCardComponent {
+    constructor() {
+        this.ocSelected = input(false, ...(ngDevMode ? [{ debugName: "ocSelected" }] : []));
+        this.ocColor = input('default', ...(ngDevMode ? [{ debugName: "ocColor" }] : []));
+        this.ocClickable = input(false, ...(ngDevMode ? [{ debugName: "ocClickable" }] : []));
+        this.ocClick = new EventEmitter();
+    }
+    onClick() {
+        this.ocClick.emit();
+    }
+    get color() {
+        return 'oc-' + this.ocColor();
+    }
+    get isSelected() {
+        return this.ocSelected() ? 'oc-card-selected' : '';
+    }
+    get isClickable() {
+        return this.ocClickable() ? 'oc-card-clickable' : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.9", type: OcCardComponent, isStandalone: true, selector: "oc-card", inputs: { ocSelected: { classPropertyName: "ocSelected", publicName: "ocSelected", isSignal: true, isRequired: false, transformFunction: null }, ocColor: { classPropertyName: "ocColor", publicName: "ocColor", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClick: "ocClick" }, ngImport: i0, template: "<div\n  class=\"oc-card\"\n  [ngClass]=\"[color, isSelected, isClickable]\"\n  (click)=\"onClick()\"\n>\n  <div class=\"oc-card-header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n  <div class=\"oc-card-body\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"oc-card-footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;outline:3px solid rgba(0,0,0,.04);outline-offset:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\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: OcCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-card', standalone: true, imports: [CommonModule], template: "<div\n  class=\"oc-card\"\n  [ngClass]=\"[color, isSelected, isClickable]\"\n  (click)=\"onClick()\"\n>\n  <div class=\"oc-card-header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n  <div class=\"oc-card-body\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"oc-card-footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";.oc-card{border-radius:4px 8px 8px 4px;padding:1.5rem;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;grid-row-gap:.5rem}.oc-card .oc-card-header{grid-area:1/1/1/1}.oc-card .oc-card-body{grid-area:2/1/2/1}.oc-card .oc-card-footer{grid-area:3/1/3/1}.oc-default{background-color:#f7f7f7;border-left:4px solid #8f9596;color:#8f9596}.oc-red{background-color:#fff3f3;border-left:4px solid #ed3a3a;color:#ed3a3a}.oc-green{background-color:#eefff7fc;border-left:4px solid #00dda3;color:#00dda3}.oc-card-selected{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 30px #0000001f,0 6px 12px #0000000f,inset 0 1px #ffffff05;border-left-width:6px;outline:3px solid rgba(0,0,0,.04);outline-offset:6px;position:relative;z-index:1}.oc-card-selected:after{content:\"\\2713\";position:absolute;top:10px;right:10px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px;font-weight:700;color:#fff;background:#00dda3;box-shadow:0 3px 6px #0000001f}.oc-card-clickable{transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s,border-left-width .18s,outline-offset .18s,background-color .18s;cursor:pointer}.oc-card-clickable:active{transform:translateY(1px) scale(.998)}.oc-card-clickable:focus-visible{outline:3px solid rgba(0,0,0,.06);outline-offset:4px}.oc-card-clickable:not(.oc-card-selected):hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 40px #00000024,0 8px 18px #0000000f}.oc-card-clickable.oc-card-selected:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 30px 48px #00000026,0 10px 20px #0000000f}.oc-card.disabled{cursor:default;pointer-events:none;opacity:.7}@media (prefers-reduced-motion: reduce){.oc-card-clickable,.oc-card-clickable:not(.oc-card-selected):hover,.oc-card-clickable.oc-card-selected:hover{transition:none!important;transform:none!important;box-shadow:none!important}}\n"] }]
+        }], propDecorators: { ocSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSelected", required: false }] }], ocColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocColor", required: false }] }], ocClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClickable", required: false }] }], ocClick: [{
+                type: Output
+            }] } });
+
 class OcFilterComponent {
     constructor(styleThemeService) {
         this.styleThemeService = styleThemeService;
@@ -2619,6 +2648,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 +2881,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, OcCardComponent, 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