ng2-split-pane-patch/lib/vertical-split-pane-separator.component.js

A simple resizable split pane Angular 2 library

import { Component } from '@angular/core';
import { SplitSeparatorComponent } from './split-pane-separator.component';
import * as i0 from "@angular/core";
export class VerticalSplitSeparatorComponent extends SplitSeparatorComponent {
    ngAfterViewInit() {
        this.invisibleExtension.nativeElement.style.left =
            -(7 - this.thickness) / 2 + "px";
    }
}
VerticalSplitSeparatorComponent.ɵfac = function () { let ɵVerticalSplitSeparatorComponent_BaseFactory; return function VerticalSplitSeparatorComponent_Factory(t) { return (ɵVerticalSplitSeparatorComponent_BaseFactory || (ɵVerticalSplitSeparatorComponent_BaseFactory = i0.ɵɵgetInheritedFactory(VerticalSplitSeparatorComponent)))(t || VerticalSplitSeparatorComponent); }; }();
VerticalSplitSeparatorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: VerticalSplitSeparatorComponent, selectors: [["vertical-split-separator"]], hostVars: 2, hostBindings: function VerticalSplitSeparatorComponent_HostBindings(rf, ctx) { if (rf & 2) {
        i0.ɵɵstyleProp("width", ctx.thickness, "px");
    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "invisible-extension", 3, "hidden"], ["invisibleExtension", ""], [1, "handle"]], template: function VerticalSplitSeparatorComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelement(0, "div", 0, 1);
        i0.ɵɵelement(2, "div", 2);
    } if (rf & 2) {
        i0.ɵɵproperty("hidden", ctx.thickness >= 7);
    } }, styles: ["[_nghost-%COMP%] {\n      background-color: #fff;\n      border-left: 1px solid #ddd;\n      cursor: ew-resize;\n      position: relative;\n    }\n    [_nghost-%COMP%]:hover {\n      background-color: #fafafa;\n    }\n\n    .invisible-extension[_ngcontent-%COMP%] {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      min-width: 7px;\n    }\n\n    .handle[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 35px;\n      background-color: #eee;\n      position: absolute;\n      top: calc(50% - 17px);\n    }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VerticalSplitSeparatorComponent, [{
        type: Component,
        args: [{
                selector: 'vertical-split-separator',
                styles: [`
    :host {
      background-color: #fff;
      border-left: 1px solid #ddd;
      cursor: ew-resize;
      position: relative;
    }
    :host:hover {
      background-color: #fafafa;
    }

    .invisible-extension {
      position: absolute;
      height: 100%;
      width: 100%;
      min-width: 7px;
    }

    .handle {
      width: 100%;
      height: 35px;
      background-color: #eee;
      position: absolute;
      top: calc(50% - 17px);
    }
  `],
                template: `
    <!-- Used to extend the 'draggable' area in case the separator is too thin,
    so it's not too hard to drag. -->
    <div
      #invisibleExtension
      [hidden]="thickness >= 7"
      class="invisible-extension"></div>

    <div class="handle"></div>
  `,
                host: {
                    '[style.width.px]': 'thickness'
                }
            }]
    }], null, null); })();
//# sourceMappingURL=vertical-split-pane-separator.component.js.map