@dotglitch/ngx-common/fesm2022/dotglitch-ngx-common-overlay-wrapper.mjs

Angular components and utilities that are commonly used.

import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { TemplateRef, ContentChild, Component } from '@angular/core';
import gsap from 'gsap';

class TransitionPanelComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
    }
    ngAfterViewInit() {
        const el = this.elementRef.nativeElement;
        //OPEN TRIGGER
        const openTrigger = el.querySelector('.menu-trigger');
        const openTriggerTop = openTrigger.querySelector('.menu-trigger-bar.top');
        const openTriggerMiddle = openTrigger.querySelector('.menu-trigger-bar.middle');
        const openTriggerBottom = openTrigger.querySelector('.menu-trigger-bar.bottom');
        //CLOSE TRIGGER
        const closeTrigger = el.querySelector('.close-trigger');
        const closeTriggerLeft = closeTrigger.querySelector('.close-trigger-bar.left');
        const closeTriggerRight = closeTrigger.querySelector('.close-trigger-bar.right');
        //LOGO
        const front = el.querySelector('.front');
        //MENU
        const menu = el.querySelector('.back-content');
        const menuTop = el.querySelector('.rect.top');
        const menuMiddle = el.querySelector('.rect.middle');
        const menuBottom = el.querySelector('.rect.bottom');
        //TL
        const tlOpen = gsap.timeline({
            paused: true
        });
        const tlClose = gsap.timeline({
            paused: true
        });
        //OPEN TIMELINE
        tlOpen
            .add("preOpen")
            .to(front, {
            duration: 0.4,
            scale: 0.8,
            opacity: 0,
            ease: "power2.easeOut"
        }, "preOpen")
            .to(openTriggerTop, {
            duration: 0.4,
            x: "+80px",
            y: "-80px",
            delay: 0.1,
            ease: "power4.easeIn",
            onComplete: function () {
                closeTrigger.style['z-index'] = '25';
            }
        }, "preOpen")
            .to(openTriggerMiddle, {
            duration: 0.4,
            x: "+=80px",
            y: "-=80px",
            ease: "power4.easeIn",
            onComplete: function () {
                openTrigger.style['visibility'] = 'hidden';
            }
        }, "preOpen")
            .to(openTriggerBottom, {
            duration: 0.4,
            x: "+=80px", y: "-=80px", delay: 0.2, ease: "power4.easeIn"
        }, "preOpen")
            .add("open", "-=0.4")
            .to(menuTop, {
            duration: 0.8,
            bottom: "25%",
            right: "25%",
            left: "-75%",
            top: "-75%",
            ease: "power4.inOut"
        }, "open")
            .to(menuMiddle, {
            duration: 0.8,
            scaleX: 1,
            ease: "power4.inOut"
        }, "open")
            .to(menuBottom, {
            duration: 0.8,
            top: "25%",
            left: "25%",
            right: "-75%",
            bottom: "-75%",
            ease: "power4.inOut"
        }, "open")
            .fromTo(menu, {
            duration: 0.6,
            y: 30,
            opacity: 0,
            visibility: 'hidden'
        }, {
            y: 0,
            opacity: 1,
            visibility: 'visible',
            ease: "power4.out"
        }, "-=0.2")
            .add("preClose", "-=0.8")
            .to(closeTriggerLeft, {
            duration: 0.8,
            x: "-=100px",
            y: "+=100px",
            ease: "power4.easeOut"
        }, "preClose")
            .to(closeTriggerRight, {
            duration: 0.8,
            x: "+=100px",
            y: "+=100px",
            delay: 0.2,
            ease: "power4.easeOut"
        }, "preClose");
        //CLOSE TIMELINE
        tlClose
            .add("close")
            .to(menuTop, {
            duration: 0.2,
            backgroundColor: "#6295ca",
            ease: "power4.inOut",
            onComplete: function () {
                front.style['z-index'] = '26';
                closeTrigger.style['z-index'] = '5';
                openTrigger.style['visibility'] = 'visible';
            }
        }, "close")
            .to(menuMiddle, {
            duration: 0.2,
            backgroundColor: "#6295ca",
            ease: "power4.inOut"
        }, "close")
            .to(menuBottom, {
            duration: 0.2,
            backgroundColor: "#6295ca",
            ease: "power4.inOut"
        }, "close")
            .to(menu, {
            duration: 0.6,
            y: 20,
            opacity: 0,
            ease: "power4.easeOut",
            onComplete: function () {
                menu.style['visibility'] = 'hidden';
            }
        }, "close")
            .to(front, {
            duration: 0.8,
            delay: "+=0.2",
            scale: 1,
            opacity: 1,
            ease: "power4.inOut",
        }, "close")
            .to(menuTop, {
            duration: 0.8,
            delay: "+=0.2",
            bottom: "100%",
            right: "100%",
            left: "-50%",
            top: "-50%",
            ease: "power4.inOut"
        }, "close")
            .to(menuMiddle, {
            duration: 0.8,
            delay: "+=0.2",
            scaleX: 0,
            ease: "power4.inOut"
        }, "close")
            .to(menuBottom, {
            duration: 0.8,
            delay: "+=0.2",
            bottom: "-50%",
            right: "-50%",
            left: "100%",
            top: "100%",
            ease: "power4.inOut",
            onComplete: function () {
                menuTop.style['background-color'] = '#ffffff';
                menuMiddle.style['background-color'] = '#ffffff';
                menuBottom.style['background-color'] = '#ffffff';
            }
        }, "close")
            .to(closeTriggerLeft, {
            duration: 0.2,
            x: "+=100px",
            y: "-=100px",
            ease: "power4.easeIn"
        }, "close")
            .to(closeTriggerRight, {
            duration: 0.2,
            x: "-=100px",
            y: "-=100px",
            delay: 0.1,
            ease: "power4.easeIn"
        }, "close")
            .to(openTriggerTop, {
            duration: 1,
            x: "-=80px",
            y: "+=80px",
            delay: 0.2,
            ease: "power4.easeOut"
        }, "close")
            .to(openTriggerMiddle, {
            duration: 1,
            x: "-=80px",
            y: "+=80px",
            ease: "power4.easeOut"
        }, "close")
            .to(openTriggerBottom, {
            duration: 1,
            x: "-=80px",
            y: "+=80px",
            delay: 0.1,
            ease: "power4.easeOut"
        }, "close");
        //EVENTS
        openTrigger.onclick = function () {
            if (tlOpen.progress() < 1) {
                tlOpen.play();
            }
            else {
                tlOpen.restart();
            }
        };
        closeTrigger.onclick = function () {
            if (tlClose.progress() < 1) {
                tlClose.play();
            }
            else {
                tlClose.restart();
            }
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TransitionPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TransitionPanelComponent, isStandalone: true, selector: "ngx-transition-panel", queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: TemplateRef }, { propertyName: "background", first: true, predicate: ["background"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- BASEN ON DRIBBBLE SHOT: https://dribbble.com/shots/2209627-UI8-Nav -->\n\n    <span class=\"menu-trigger\">\n        <span class=\"menu-trigger-bar top\"></span>\n        <span class=\"menu-trigger-bar middle\"></span>\n        <span class=\"menu-trigger-bar bottom\"></span>\n    </span>\n    <span class=\"close-trigger\">\n        <span class=\"close-trigger-bar left\"></span>\n        <span class=\"close-trigger-bar right\"></span>\n    </span>\n    <span class=\"front\">\n        @if (content) {\n            <ng-template [ngTemplateOutlet]=\"content\"/>\n        }\n        @else {\n            <ng-content />\n        }\n    </span>\n    <div class=\"inner-container\">\n        <span class=\"rect top\"></span>\n        <span class=\"rect middle\"></span>\n        <span class=\"rect bottom\"></span>\n\n        <div class=\"back-content\">\n            @if (background) {\n                <ng-template [ngTemplateOutlet]=\"background\" />\n            }\n        </div>\n    </div>\n", styles: [":host{display:block;background-color:#222;width:100%;max-width:620px;min-height:568px;margin:0 auto;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 9px 13px #0000004d;transform:scale(1)}.menu-trigger,.close-trigger{position:absolute;top:32px;right:20px;display:block;width:42px;height:42px;cursor:pointer;z-index:333}.menu-trigger:hover .menu-trigger-bar:before,.close-trigger:hover .menu-trigger-bar:before{width:100%}.menu-trigger:hover .close-trigger-bar:before,.close-trigger:hover .close-trigger-bar:before{width:100%}.close-trigger{z-index:5;top:42px}.menu-trigger-bar{display:block;width:100%;height:4px;background-color:#fff;margin-bottom:6px;transform:rotate(-45deg);position:relative}.menu-trigger-bar:before{content:\"\";position:absolute;top:0;left:0;display:block;width:0%;height:100%;background-color:#0003;transition:all .3s cubic-bezier(.55,0,.1,1)}.menu-trigger-bar.top{width:50%}.menu-trigger-bar.middle:before{left:auto;right:0}.menu-trigger-bar.bottom{width:50%;margin-left:50%}.close-trigger-bar{display:block;width:100%;height:4px;background-color:#222;position:relative}.close-trigger-bar:before{content:\"\";position:absolute;top:0;left:0;display:block;width:0%;height:100%;background-color:#fff3;transition:all .3s cubic-bezier(.55,0,.1,1)}.close-trigger-bar.left{transform:translate(100px) translateY(-100px) rotate(-45deg)}.close-trigger-bar.right{transform:translate(-100px) translateY(-100px) rotate(45deg);top:-3px}.inner-container,.menu-container{position:absolute;height:100%;width:100%;left:0;top:0}.inner-container{z-index:20;display:flex;align-items:center}.menu-container{display:flex;align-items:center}.back-content{display:block;width:100%;height:100%}.rect{position:absolute;display:block;inset:-50%;background-color:#fff;transform:rotate(45deg)}.rect.top{bottom:100%;right:100%}.rect.middle{inset:-25%;transform:rotate(45deg) scaleX(0)}.rect.bottom{top:100%;left:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TransitionPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-transition-panel', imports: [
                        NgTemplateOutlet
                    ], standalone: true, template: "<!-- BASEN ON DRIBBBLE SHOT: https://dribbble.com/shots/2209627-UI8-Nav -->\n\n    <span class=\"menu-trigger\">\n        <span class=\"menu-trigger-bar top\"></span>\n        <span class=\"menu-trigger-bar middle\"></span>\n        <span class=\"menu-trigger-bar bottom\"></span>\n    </span>\n    <span class=\"close-trigger\">\n        <span class=\"close-trigger-bar left\"></span>\n        <span class=\"close-trigger-bar right\"></span>\n    </span>\n    <span class=\"front\">\n        @if (content) {\n            <ng-template [ngTemplateOutlet]=\"content\"/>\n        }\n        @else {\n            <ng-content />\n        }\n    </span>\n    <div class=\"inner-container\">\n        <span class=\"rect top\"></span>\n        <span class=\"rect middle\"></span>\n        <span class=\"rect bottom\"></span>\n\n        <div class=\"back-content\">\n            @if (background) {\n                <ng-template [ngTemplateOutlet]=\"background\" />\n            }\n        </div>\n    </div>\n", styles: [":host{display:block;background-color:#222;width:100%;max-width:620px;min-height:568px;margin:0 auto;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 9px 13px #0000004d;transform:scale(1)}.menu-trigger,.close-trigger{position:absolute;top:32px;right:20px;display:block;width:42px;height:42px;cursor:pointer;z-index:333}.menu-trigger:hover .menu-trigger-bar:before,.close-trigger:hover .menu-trigger-bar:before{width:100%}.menu-trigger:hover .close-trigger-bar:before,.close-trigger:hover .close-trigger-bar:before{width:100%}.close-trigger{z-index:5;top:42px}.menu-trigger-bar{display:block;width:100%;height:4px;background-color:#fff;margin-bottom:6px;transform:rotate(-45deg);position:relative}.menu-trigger-bar:before{content:\"\";position:absolute;top:0;left:0;display:block;width:0%;height:100%;background-color:#0003;transition:all .3s cubic-bezier(.55,0,.1,1)}.menu-trigger-bar.top{width:50%}.menu-trigger-bar.middle:before{left:auto;right:0}.menu-trigger-bar.bottom{width:50%;margin-left:50%}.close-trigger-bar{display:block;width:100%;height:4px;background-color:#222;position:relative}.close-trigger-bar:before{content:\"\";position:absolute;top:0;left:0;display:block;width:0%;height:100%;background-color:#fff3;transition:all .3s cubic-bezier(.55,0,.1,1)}.close-trigger-bar.left{transform:translate(100px) translateY(-100px) rotate(-45deg)}.close-trigger-bar.right{transform:translate(-100px) translateY(-100px) rotate(45deg);top:-3px}.inner-container,.menu-container{position:absolute;height:100%;width:100%;left:0;top:0}.inner-container{z-index:20;display:flex;align-items:center}.menu-container{display:flex;align-items:center}.back-content{display:block;width:100%;height:100%}.rect{position:absolute;display:block;inset:-50%;background-color:#fff;transform:rotate(45deg)}.rect.top{bottom:100%;right:100%}.rect.middle{inset:-25%;transform:rotate(45deg) scaleX(0)}.rect.bottom{top:100%;left:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { content: [{
                type: ContentChild,
                args: ['content', { read: TemplateRef }]
            }], background: [{
                type: ContentChild,
                args: ['background', { read: TemplateRef }]
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { TransitionPanelComponent };
//# sourceMappingURL=dotglitch-ngx-common-overlay-wrapper.mjs.map