ninja-splitter/esm2015/lib/horizontal-ninja.component.js

Convenient and easy to use splitter component for Angular 9+

import { Component, HostListener } from '@angular/core';
import { NinjaSplitterComponent } from './ninja-splitter.component';
import { PositionService } from './position.service';
export class HorizontalNinjaSplitterComponent extends NinjaSplitterComponent {
    getPrimarySize() {
        return this.primaryComponent.nativeElement.offsetHeight;
    }
    getSecondarySize() {
        return this.secondaryComponent.nativeElement.offsetHeight;
    }
    dividerPosition(size) {
        const sizePct = (size / this.self.nativeElement[this.sizePropertyName]) * 100.0;
        this.primaryComponent.nativeElement.style.height = sizePct + '%';
        this.secondaryComponent.nativeElement.style.height = `calc(${100 - sizePct}% -
          ${+!(this.primaryToggledOff || this.secondaryToggledOff) * this.separatorThickness}px)`;
    }
    onMousemove(event) {
        if (this.isResizing) {
            const coords = PositionService.offset(this.primaryComponent);
            this.applySizeChange(event.pageY - coords.top);
            return false;
        }
    }
}
HorizontalNinjaSplitterComponent.decorators = [
    { type: Component, args: [{
                selector: 'horizontal-ninja',
                template: `
    <div
      #primaryComponent
      [hidden]="primaryToggledOff"
      class="upper ninja-com">
      <ng-content select=".ninja-content-primary"></ng-content>
    </div>
    <ninja-separator
      #separator
      [hidden]="primaryToggledOff || secondaryToggledOff"
      [thickness]="separatorThickness"
      (notifyWillChangeSize)="notifyWillChangeSize($event)">
    </ninja-separator>
    <div
      #secondaryComponent
      [hidden]="secondaryToggledOff"
      class="lower ninja-com">
      <ng-content select=".ninja-content-secondary"></ng-content>
    </div>
  `,
                styles: [`:host {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
  }

  .ninja-com {
    height: calc(50% - 4px);
  }`]
            },] }
];
HorizontalNinjaSplitterComponent.propDecorators = {
    onMousemove: [{ type: HostListener, args: ['mousemove', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9yaXpvbnRhbC1uaW5qYS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uaW5qYS1zcGxpdC9zcmMvbGliL2hvcml6b250YWwtbmluamEuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3hELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQW1DckQsTUFBTSxPQUFPLGdDQUFpQyxTQUFRLHNCQUFzQjtJQUUxRSxjQUFjO1FBQ1osT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztJQUMxRCxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsT0FBTyxJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztJQUM1RCxDQUFDO0lBRUQsZUFBZSxDQUFDLElBQVk7UUFDMUIsTUFBTSxPQUFPLEdBQUcsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsR0FBRyxLQUFLLENBQUM7UUFDaEYsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLE9BQU8sR0FBRyxHQUFHLENBQUM7UUFDakUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLFFBQVEsR0FBRyxHQUFHLE9BQU87WUFDbEUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxHQUFHLElBQUksQ0FBQyxrQkFBa0IsS0FBSyxDQUFDO0lBQ2hHLENBQUM7SUFHRCxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLE1BQU0sTUFBTSxHQUFHLGVBQWUsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUM7WUFDN0QsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLE1BQU0sQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUMvQyxPQUFPLEtBQUssQ0FBQztTQUNkO0lBQ0gsQ0FBQzs7O1lBekRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQVc1QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7eUJBN0JROzs7Ozs7Ozs7SUFTUDthQXFCSDs7OzBCQWtCRSxZQUFZLFNBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0TGlzdGVuZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmluamFTcGxpdHRlckNvbXBvbmVudCB9IGZyb20gJy4vbmluamEtc3BsaXR0ZXIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgUG9zaXRpb25TZXJ2aWNlIH0gZnJvbSAnLi9wb3NpdGlvbi5zZXJ2aWNlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaG9yaXpvbnRhbC1uaW5qYScsXHJcbiAgc3R5bGVzOiBbYDpob3N0IHtcclxuICAgIGhlaWdodDogMTAwJTtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGZsZXgtZmxvdzogY29sdW1uO1xyXG4gIH1cclxuXHJcbiAgLm5pbmphLWNvbSB7XHJcbiAgICBoZWlnaHQ6IGNhbGMoNTAlIC0gNHB4KTtcclxuICB9YF0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXZcclxuICAgICAgI3ByaW1hcnlDb21wb25lbnRcclxuICAgICAgW2hpZGRlbl09XCJwcmltYXJ5VG9nZ2xlZE9mZlwiXHJcbiAgICAgIGNsYXNzPVwidXBwZXIgbmluamEtY29tXCI+XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIi5uaW5qYS1jb250ZW50LXByaW1hcnlcIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxuaW5qYS1zZXBhcmF0b3JcclxuICAgICAgI3NlcGFyYXRvclxyXG4gICAgICBbaGlkZGVuXT1cInByaW1hcnlUb2dnbGVkT2ZmIHx8wqBzZWNvbmRhcnlUb2dnbGVkT2ZmXCJcclxuICAgICAgW3RoaWNrbmVzc109XCJzZXBhcmF0b3JUaGlja25lc3NcIlxyXG4gICAgICAobm90aWZ5V2lsbENoYW5nZVNpemUpPVwibm90aWZ5V2lsbENoYW5nZVNpemUoJGV2ZW50KVwiPlxyXG4gICAgPC9uaW5qYS1zZXBhcmF0b3I+XHJcbiAgICA8ZGl2XHJcbiAgICAgICNzZWNvbmRhcnlDb21wb25lbnRcclxuICAgICAgW2hpZGRlbl09XCJzZWNvbmRhcnlUb2dnbGVkT2ZmXCJcclxuICAgICAgY2xhc3M9XCJsb3dlciBuaW5qYS1jb21cIj5cclxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiLm5pbmphLWNvbnRlbnQtc2Vjb25kYXJ5XCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbiAgYCxcclxufSlcclxuZXhwb3J0IGNsYXNzIEhvcml6b250YWxOaW5qYVNwbGl0dGVyQ29tcG9uZW50IGV4dGVuZHMgTmluamFTcGxpdHRlckNvbXBvbmVudCB7XHJcblxyXG4gIGdldFByaW1hcnlTaXplKCk6IG51bWJlciB7XHJcbiAgICByZXR1cm4gdGhpcy5wcmltYXJ5Q29tcG9uZW50Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xyXG4gIH1cclxuXHJcbiAgZ2V0U2Vjb25kYXJ5U2l6ZSgpOiBudW1iZXIge1xyXG4gICAgcmV0dXJuIHRoaXMuc2Vjb25kYXJ5Q29tcG9uZW50Lm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xyXG4gIH1cclxuXHJcbiAgZGl2aWRlclBvc2l0aW9uKHNpemU6IG51bWJlcik6IHZvaWQge1xyXG4gICAgY29uc3Qgc2l6ZVBjdCA9IChzaXplIC8gdGhpcy5zZWxmLm5hdGl2ZUVsZW1lbnRbdGhpcy5zaXplUHJvcGVydHlOYW1lXSkgKiAxMDAuMDtcclxuICAgIHRoaXMucHJpbWFyeUNvbXBvbmVudC5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9IHNpemVQY3QgKyAnJSc7XHJcbiAgICB0aGlzLnNlY29uZGFyeUNvbXBvbmVudC5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9IGBjYWxjKCR7MTAwIC0gc2l6ZVBjdH0lIC1cclxuICAgICAgICAgICR7KyEodGhpcy5wcmltYXJ5VG9nZ2xlZE9mZiB8fCB0aGlzLnNlY29uZGFyeVRvZ2dsZWRPZmYpICogdGhpcy5zZXBhcmF0b3JUaGlja25lc3N9cHgpYDtcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pXHJcbiAgb25Nb3VzZW1vdmUoZXZlbnQ6IE1vdXNlRXZlbnQpOiBhbnkge1xyXG4gICAgaWYgKHRoaXMuaXNSZXNpemluZykge1xyXG4gICAgICBjb25zdCBjb29yZHMgPSBQb3NpdGlvblNlcnZpY2Uub2Zmc2V0KHRoaXMucHJpbWFyeUNvbXBvbmVudCk7XHJcbiAgICAgIHRoaXMuYXBwbHlTaXplQ2hhbmdlKGV2ZW50LnBhZ2VZIC0gY29vcmRzLnRvcCk7XHJcbiAgICAgIHJldHVybiBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19