ng2-split-pane-patch/lib/horizontal-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 HorizontalSplitSeparatorComponent extends SplitSeparatorComponent {
    ngAfterViewInit() {
        this.invisibleExtension.nativeElement.style.top =
            -(7 - this.thickness) / 2 + "px";
    }
}
HorizontalSplitSeparatorComponent.ɵfac = function () { let ɵHorizontalSplitSeparatorComponent_BaseFactory; return function HorizontalSplitSeparatorComponent_Factory(t) { return (ɵHorizontalSplitSeparatorComponent_BaseFactory || (ɵHorizontalSplitSeparatorComponent_BaseFactory = i0.ɵɵgetInheritedFactory(HorizontalSplitSeparatorComponent)))(t || HorizontalSplitSeparatorComponent); }; }();
HorizontalSplitSeparatorComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HorizontalSplitSeparatorComponent, selectors: [["horizontal-split-separator"]], hostVars: 2, hostBindings: function HorizontalSplitSeparatorComponent_HostBindings(rf, ctx) { if (rf & 2) {
        i0.ɵɵstyleProp("height", ctx.thickness, "px");
    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "invisible-extension", 3, "hidden"], ["invisibleExtension", ""], [1, "handle"]], template: function HorizontalSplitSeparatorComponent_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-top: 1px solid #ddd;\n      cursor: ns-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-height: 7px;\n    }\n\n    .handle[_ngcontent-%COMP%] {\n      width: 35px;\n      height: 100%;\n      background-color: #eee;\n      margin: auto;\n    }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HorizontalSplitSeparatorComponent, [{
        type: Component,
        args: [{
                selector: 'horizontal-split-separator',
                styles: [`
    :host {
      background-color: #fff;
      border-top: 1px solid #ddd;
      cursor: ns-resize;
      position: relative;
    }
    :host:hover {
      background-color: #fafafa;
    }

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

    .handle {
      width: 35px;
      height: 100%;
      background-color: #eee;
      margin: auto;
    }
  `],
                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.height.px]': 'thickness'
                }
            }]
    }], null, null); })();
//# sourceMappingURL=horizontal-split-pane-separator.component.js.map