/*!
 * Copyright 2021 VMware, Inc.
 * SPDX-License-Identifier: BSD-2-Clause
 */
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
const CLARITY_HEADER_HEIGHT = 60;
export class DrawerComponent {
    constructor() {
        this.topOffset = 0;
        this.headerHeight = CLARITY_HEADER_HEIGHT;
    }
    get containerHeight() {
        return 'calc(100vh - ' + (this.topOffset + this.headerHeight) + 'px)';
    }
}
/** @nocollapse */ DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: DrawerComponent, selector: "vcd-drawer-component", inputs: { topOffset: "topOffset", headerHeight: "headerHeight" }, ngImport: i0, template: "<div class=\"drawer-container\" [style.top]=\"topOffset + headerHeight + 'px'\">\n    <div class=\"flex-container\" #rightDrawer [style.height]=\"containerHeight\">\n        <div class=\"drawer\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":root{--vcd-drawer-width: 350px}.drawer-container{position:absolute;inset:60px 0 0;overflow:hidden;z-index:0}.drawer-container .left-area{position:absolute;inset:0;background-color:#313131;animation:backdrop-fade-in .2s 1}.drawer-container .left-area.hiding{animation:backdrop-fade-out .2s 1;opacity:0}.drawer-container .fixed-bottom-container{flex-shrink:1;flex-basis:auto;overflow-y:auto;padding:18px;width:var(--vcd-drawer-width);animation:drawer-slide-in .2s 1}.drawer-container .fixed-bottom-container.slide-out{animation:drawer-slide-out .2s 1;right:-var(--vcd-drawer-width)}.drawer-container .flex-container{z-index:2;position:absolute;right:0;display:flex;flex-direction:column;animation:drawer-slide-in .2s 1;border-left:1px solid var(--clr-accordion-border-color)}.drawer-container .flex-container.hiding{animation:drawer-slide-out .2s 1;right:-var(--vcd-drawer-width)}.drawer-container .drawer{flex-grow:1;flex-shrink:1;flex-basis:auto;overflow-y:auto;padding:18px;width:var(--vcd-drawer-width);overflow-x:hidden}.drawer-container .drawer .fade-in{animation:drawer-fade-in .2s 1}.drawer-container .drawer .fade-out{animation:drawer-fade-out .2s 1;opacity:0}.drawer-container .drawer .slide-in{animation:section-slide-in .5s 1}.drawer-container .drawer .slide-out{animation:section-slide-out .5s 1;margin-left:var(--vcd-drawer-width)}.drawer-container .drawer .pin-container{z-index:1;position:absolute;right:0;margin:-5px 20px 0 0;cursor:pointer;height:30px;width:30px;border-radius:15px;background-color:#ffffff1a}.drawer-container .drawer .pin-container .pinned{transform:rotate(-45deg)}.drawer-container .drawer .pin-container button{background:transparent;color:#fff;border:none;padding:0;cursor:pointer}.drawer-container .drawer .pin-container button clr-icon[shape=close]{margin-top:3px}.drawer-container .drawer .pin-container button clr-icon{opacity:.6;margin-left:5px}.drawer-container .drawer .pin-container button clr-icon:hover{opacity:1}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: DrawerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vcd-drawer-component', template: "<div class=\"drawer-container\" [style.top]=\"topOffset + headerHeight + 'px'\">\n    <div class=\"flex-container\" #rightDrawer [style.height]=\"containerHeight\">\n        <div class=\"drawer\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":root{--vcd-drawer-width: 350px}.drawer-container{position:absolute;inset:60px 0 0;overflow:hidden;z-index:0}.drawer-container .left-area{position:absolute;inset:0;background-color:#313131;animation:backdrop-fade-in .2s 1}.drawer-container .left-area.hiding{animation:backdrop-fade-out .2s 1;opacity:0}.drawer-container .fixed-bottom-container{flex-shrink:1;flex-basis:auto;overflow-y:auto;padding:18px;width:var(--vcd-drawer-width);animation:drawer-slide-in .2s 1}.drawer-container .fixed-bottom-container.slide-out{animation:drawer-slide-out .2s 1;right:-var(--vcd-drawer-width)}.drawer-container .flex-container{z-index:2;position:absolute;right:0;display:flex;flex-direction:column;animation:drawer-slide-in .2s 1;border-left:1px solid var(--clr-accordion-border-color)}.drawer-container .flex-container.hiding{animation:drawer-slide-out .2s 1;right:-var(--vcd-drawer-width)}.drawer-container .drawer{flex-grow:1;flex-shrink:1;flex-basis:auto;overflow-y:auto;padding:18px;width:var(--vcd-drawer-width);overflow-x:hidden}.drawer-container .drawer .fade-in{animation:drawer-fade-in .2s 1}.drawer-container .drawer .fade-out{animation:drawer-fade-out .2s 1;opacity:0}.drawer-container .drawer .slide-in{animation:section-slide-in .5s 1}.drawer-container .drawer .slide-out{animation:section-slide-out .5s 1;margin-left:var(--vcd-drawer-width)}.drawer-container .drawer .pin-container{z-index:1;position:absolute;right:0;margin:-5px 20px 0 0;cursor:pointer;height:30px;width:30px;border-radius:15px;background-color:#ffffff1a}.drawer-container .drawer .pin-container .pinned{transform:rotate(-45deg)}.drawer-container .drawer .pin-container button{background:transparent;color:#fff;border:none;padding:0;cursor:pointer}.drawer-container .drawer .pin-container button clr-icon[shape=close]{margin-top:3px}.drawer-container .drawer .pin-container button clr-icon{opacity:.6;margin-left:5px}.drawer-container .drawer .pin-container button clr-icon:hover{opacity:1}\n"] }]
        }], propDecorators: { topOffset: [{
                type: Input
            }], headerHeight: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhd2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3F1aWNrLXNlYXJjaC9kcmF3ZXIvZHJhd2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3F1aWNrLXNlYXJjaC9kcmF3ZXIvZHJhd2VyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUNILE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUVqRCxNQUFNLHFCQUFxQixHQUFHLEVBQUUsQ0FBQztBQU9qQyxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU1hLGNBQVMsR0FBVyxDQUFDLENBQUM7UUFDdEIsaUJBQVksR0FBVyxxQkFBcUIsQ0FBQztLQUt6RDtJQUhHLElBQUksZUFBZTtRQUNmLE9BQU8sZUFBZSxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsS0FBSyxDQUFDO0lBQzFFLENBQUM7OytIQU5RLGVBQWU7bUhBQWYsZUFBZSw4SENiNUIsbVJBT0E7MkZETWEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDSSxzQkFBc0I7OEJBS3ZCLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjEgVk13YXJlLCBJbmMuXG4gKiBTUERYLUxpY2Vuc2UtSWRlbnRpZmllcjogQlNELTItQ2xhdXNlXG4gKi9cbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuY29uc3QgQ0xBUklUWV9IRUFERVJfSEVJR0hUID0gNjA7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndmNkLWRyYXdlci1jb21wb25lbnQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9kcmF3ZXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RyYXdlci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBEcmF3ZXJDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIHRvcE9mZnNldDogbnVtYmVyID0gMDtcbiAgICBASW5wdXQoKSBoZWFkZXJIZWlnaHQ6IG51bWJlciA9IENMQVJJVFlfSEVBREVSX0hFSUdIVDtcblxuICAgIGdldCBjb250YWluZXJIZWlnaHQoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuICdjYWxjKDEwMHZoIC0gJyArICh0aGlzLnRvcE9mZnNldCArIHRoaXMuaGVhZGVySGVpZ2h0KSArICdweCknO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJkcmF3ZXItY29udGFpbmVyXCIgW3N0eWxlLnRvcF09XCJ0b3BPZmZzZXQgKyBoZWFkZXJIZWlnaHQgKyAncHgnXCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXgtY29udGFpbmVyXCIgI3JpZ2h0RHJhd2VyIFtzdHlsZS5oZWlnaHRdPVwiY29udGFpbmVySGVpZ2h0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJkcmF3ZXJcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==