import { Component, ElementRef } from '@angular/core';
var AppMenuFrameComponent = (function () {
    function AppMenuFrameComponent(myElement) {
        this.myElement = myElement;
        this.element = 'popup';
        this.closed = false;
        this.x = '0';
        this.y = '0';
        this.flat = false;
    }
    AppMenuFrameComponent.prototype.ngOnAfterViewInit = function () {
        this.fixPosition();
    };
    AppMenuFrameComponent.prototype.ngOnChanges = function () {
        switch (this.element) {
            case 'popup':
                this.isDraggable = true;
                this.fixPosition();
                break;
            default:
                this.isDraggable = false;
                break;
        }
    };
    Object.defineProperty(AppMenuFrameComponent.prototype, "isDraggable", {
        get: function () {
            return this.draggable;
        },
        set: function (val) {
            this.draggable = val;
        },
        enumerable: true,
        configurable: true
    });
    AppMenuFrameComponent.prototype.setPosition = function (x, y) {
        this.x = x.toString();
        this.y = y.toString();
        this.fixPosition();
    };
    AppMenuFrameComponent.prototype.fixPosition = function () {
        var x = parseInt(this.x), w = window.innerWidth, y = parseInt(this.y), h = window.innerHeight;
        if (x >= w * 0.6) {
            this.x = (w * 0.6).toString();
        }
        if (y >= h * 0.2) {
            this.y = (h * 0.2).toString();
        }
        this.applyPosition();
    };
    AppMenuFrameComponent.prototype.applyPosition = function () {
        this.left = this.x + 'px';
        this.top = this.y + 'px';
    };
    AppMenuFrameComponent.decorators = [
        { type: Component, args: [{
                    selector: 'app-menu-frame',
                    inputs: [
                        'element: ui-element',
                        'closed: ui-closed',
                        'flat: ui-flat',
                        'x: ui-x',
                        'y: ui-y'
                    ],
                    template: "\n    <div [class]=\"element\" fxFlexFill color=\"primary\">\n        <div class=\"menu-frame-container\" [class.closed]=\"closed\" [class.flat]=\"flat\" [draggable]=\"isDraggable\" [class.draggable]=\"isDraggable\">\n            <div class=\"content\" fxFlexFill>\n                <ng-content select=\".contained\"></ng-content>\n            </div>\n        </div>\n        <div class=\"framer\">\n            <div class=\"content\" fxFlexFill>\n                <ng-content select=\".framed\"></ng-content>\n            </div>\n        </div>\n    </div>\n  ",
                    styles: ["\n    ::-webkit-scrollbar{width:5px;height:4px}::-webkit-scrollbar-button{width:0px;height:0px}::-webkit-scrollbar-thumb{background:rgba(255,223,119,0.2)}::-webkit-scrollbar-track{background:rgba(17,17,17,0.3)}::-webkit-scrollbar-thumb:active{background:rgba(17,17,17,0.3)}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{border:none}::-webkit-scrollbar-track:hover,::-webkit-scrollbar-track:active,::-webkit-scrollbar-corner{background:transparent}o-dynamic-form-builder .dynamicform-container{height:100%}o-dynamic-form-builder .dynamicform-container .dropzone-container{height:95%;overflow:auto}:host{display:block}:host>div>.menu-frame-container{position:relative;flex:0 0 auto;z-index:2}:host>div>.menu-frame-container.flat{box-shadow:0em 0em 0em 0em black, 0em 0em 0em 0em black inset !important}:host>div>.framer{position:relative;flex:1 1 auto;z-index:1}:host>div>.framer>.content{position:absolute}:host>div>.menu-frame-container{max-width:100%;max-height:200%}:host>div>.menu-frame-container.closed{min-width:0;min-height:0}:host>div>.menu-frame-container,:host>div>.framer{overflow:auto;transition:350ms;transition-timing-function:ease-in-out;box-shadow:0em 0em 0em 0em black, 0em 0em 0em 0em black inset}:host>div>.menu-frame-container.draggable{transition:all 350ms ease-in-out, top 1ms, left 1ms;padding:12px;border-radius:8px;cursor:move}:host>div>.menu-frame-container.draggable.fit-top{border-top-left-radius:0;border-top-right-radius:0}:host>div>.container.draggable.fit-right{border-top-right-radius:0;border-bottom-right-radius:0}:host>div>.menu-frame-container.draggable.fit-bottom{border-bottom-left-radius:0;border-bottom-right-radius:0}:host>div>.menu-frame-container.draggable.fit-left{border-top-left-radius:0;border-bottom-left-radius:0}:host>.popup{width:100%;height:100%}:host>.popup>.menu-frame-container{position:absolute;z-index:3;box-shadow:0px 3px 8px -3px black, 0em 0em 0em 0em black inset !important}:host>.popup>.menu-frame-container.draggable{user-select:none}:host>.popup>.menu-frame-container.closed{max-width:0;max-height:0;overflow:hidden}:host>.popup>.framer{min-width:100%;min-height:100%;padding:0 !important}:host>.sidebar{display:flex;flex-direction:row;width:100%;height:100%}:host>.sidebar>.menu-frame-container{box-shadow:0.16em 0.16em 0.54em -0.16em black, 0em 0em 0em 0em black inset !important}:host>.sidebar>.menu-frame-container.closed{max-width:12px;overflow:hidden;box-shadow:0em 0em 0em 0em black, -0.5em 0em 1.5em -0.5em black inset !important}:host>.sidebar,:host>.sidebar>.menu-frame-container.closed:hover{max-width:100%;overflow:auto}:host>.toolbar{display:flex;flex-direction:column;width:100%;height:100%}:host>.toolbar>.menu-frame-container{box-shadow:0px 0.16em 0.54em -0.16em black, 0em 0em 0em 0em black inset !important}:host>.toolbar>.menu-frame-container.closed{max-height:6px;overflow:hidden;box-shadow:0em 0em 0em 0em black, 0px -0.16em 0.54em -0.16em black inset !important}:host>.toolbar,:host>.toolbar>.menu-frame-container.closed:hover{max-height:100%;overflow:auto}:host>.sidebar.right{flex-direction:row-reverse}:host>.sidebar.right>.menu-frame-container{box-shadow:-0.16em 0.16em 0.54em -0.16em black, 0em 0em 0em 0em black inset !important}:host>.sidebar.right>.menu-frame-container.closed{box-shadow:0em 0em 0em 0em black, 0.5em 0em 1.5em -0.5em black inset !important}:host>.footer{display:flex;flex-direction:column-reverse;width:100%;height:100%}:host>.footer>.menu-frame-container{box-shadow:0px -0.16em 0.54em -0.16em black, 0em 0em 0em 0em black inset !important;min-height:min-content}:host>.footer>.framer{min-height:min-content}:host>.footer>.menu-frame-container.closed{max-height:0;overflow:hidden;box-shadow:0em 0em 0em 0em black, -0.5em 0em 1.5em -0.5em black inset !important}:host>.fab{width:100%;height:100%}:host>.fab>.menu-frame-container{position:absolute;top:initial !important;bottom:6px;z-index:3;background-color:transparent;box-shadow:0px 0.16em 8px -0.16em black, 0em 0em 0em 0em black inset !important}:host>.fab>.framer{min-width:100%;min-height:100%}:host>.fab>.menu-frame-container.closed{max-width:0;max-height:0;overflow:hidden}:host>.fullscreen{width:100%;height:100%}:host>.fullscreen>.menu-frame-container{position:absolute;z-index:3;width:100%;height:100%;box-shadow:0px 0.16em 0.54em -0.16em black, 0em 0em 0em 0em black inset !important;white-space:nowrap;text-align:center}:host>.fullscreen>.menu-frame-container:before{content:\"\";display:inline-block;vertical-align:middle;width:0;margin-right:-.25em;height:100%}:host>.fullscreen>.menu-frame-container>.content{position:relative;display:inline-block;vertical-align:middle;white-space:normal}:host>.fullscreen>.menu-frame-container.closed{max-height:0;overflow:hidden}:host>.fullscreen>.framer{min-width:100%;min-height:100%}\n  "]
                },] },
    ];
    AppMenuFrameComponent.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    return AppMenuFrameComponent;
}());
export { AppMenuFrameComponent };
//# sourceMappingURL=app-menu-frame.component.js.map