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

Convenient and easy to use splitter component for Angular 9+

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

  .ninja-com {
    width: calc(50% - 4px);
  }`]
            },] }
];
VerticalNinjaSplitterComponent.propDecorators = {
    outerContainer: [{ type: ViewChild, args: ['outer', { static: true },] }],
    onMousemove: [{ type: HostListener, args: ['mousemove', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtbmluamEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmluamEtc3BsaXQvc3JjL2xpYi92ZXJ0aWNhbC1uaW5qYS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQW1DckQsTUFBTSxPQUFPLDhCQUErQixTQUFRLHNCQUFzQjtJQUl4RSxjQUFjO1FBQ1osT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQztJQUN6RCxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsT0FBTyxJQUFJLENBQUMsa0JBQWtCLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQztJQUMzRCxDQUFDO0lBRUQsZUFBZSxDQUFDLElBQVk7UUFDMUIsTUFBTSxPQUFPLEdBQUcsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7UUFDOUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLE9BQU8sR0FBRyxHQUFHLENBQUM7UUFDaEUsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsS0FBSztZQUMvQyxPQUFPLEdBQUcsQ0FBQyxHQUFHLEdBQUcsT0FBTyxDQUFDLEdBQUcsTUFBTTtnQkFDbEMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLElBQUksSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxHQUFHLEtBQUssQ0FBQztJQUMvRixDQUFDO0lBR0QsV0FBVyxDQUFDLEtBQWlCO1FBQzNCLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQixNQUFNLE1BQU0sR0FBRyxlQUFlLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1lBQzdELElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDakQ7SUFDSCxDQUFDOzs7WUEzREYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxnQkFBZ0I7Z0JBVTFCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQlQ7eUJBN0JROzs7Ozs7OztJQVFQO2FBc0JIOzs7NkJBR0UsU0FBUyxTQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7MEJBa0JuQyxZQUFZLFNBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOaW5qYVNwbGl0dGVyQ29tcG9uZW50IH0gZnJvbSAnLi9uaW5qYS1zcGxpdHRlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBQb3NpdGlvblNlcnZpY2UgfSBmcm9tICcuL3Bvc2l0aW9uLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICd2ZXJ0aWNhbC1uaW5qYScsXHJcbiAgc3R5bGVzOiBbYDpob3N0IHtcclxuICAgIGhlaWdodDogMTAwJTtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICB9XHJcblxyXG4gIC5uaW5qYS1jb20ge1xyXG4gICAgd2lkdGg6IGNhbGMoNTAlIC0gNHB4KTtcclxuICB9YF0sXHJcbiAgdGVtcGxhdGU6IGBcclxuICAgIDxkaXZcclxuICAgICAgI3ByaW1hcnlDb21wb25lbnRcclxuICAgICAgW2hpZGRlbl09XCJwcmltYXJ5VG9nZ2xlZE9mZlwiXHJcbiAgICAgIGNsYXNzPVwibGVmdCBuaW5qYS1jb21cIj5cclxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiLm5pbmphLWNvbnRlbnQtcHJpbWFyeVwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG4gICAgPG5pbmphLXNlcGFyYXRvclxyXG4gICAgICBbaG9yaXpvbnRhbF09XCJmYWxzZVwiXHJcbiAgICAgICNzZXBhcmF0b3JcclxuICAgICAgW2hpZGRlbl09XCJwcmltYXJ5VG9nZ2xlZE9mZiB8fMKgc2Vjb25kYXJ5VG9nZ2xlZE9mZlwiXHJcbiAgICAgIFt0aGlja25lc3NdPVwic2VwYXJhdG9yVGhpY2tuZXNzXCJcclxuICAgICAgKG5vdGlmeVdpbGxDaGFuZ2VTaXplKT1cIm5vdGlmeVdpbGxDaGFuZ2VTaXplKCRldmVudClcIj5cclxuICAgIDwvbmluamEtc2VwYXJhdG9yPlxyXG4gICAgPGRpdlxyXG4gICAgICAjc2Vjb25kYXJ5Q29tcG9uZW50XHJcbiAgICAgIFtoaWRkZW5dPVwic2Vjb25kYXJ5VG9nZ2xlZE9mZlwiXHJcbiAgICAgIGNsYXNzPVwicmlnaHQgbmluamEtY29tXCI+XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIi5uaW5qYS1jb250ZW50LXNlY29uZGFyeVwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG4gIGAsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBWZXJ0aWNhbE5pbmphU3BsaXR0ZXJDb21wb25lbnQgZXh0ZW5kcyBOaW5qYVNwbGl0dGVyQ29tcG9uZW50IHtcclxuXHJcbiAgQFZpZXdDaGlsZCgnb3V0ZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBvdXRlckNvbnRhaW5lcjogRWxlbWVudFJlZjtcclxuXHJcbiAgZ2V0UHJpbWFyeVNpemUoKTogbnVtYmVyIHtcclxuICAgIHJldHVybiB0aGlzLnByaW1hcnlDb21wb25lbnQubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcclxuICB9XHJcblxyXG4gIGdldFNlY29uZGFyeVNpemUoKTogbnVtYmVyIHtcclxuICAgIHJldHVybiB0aGlzLnNlY29uZGFyeUNvbXBvbmVudC5uYXRpdmVFbGVtZW50Lm9mZnNldFdpZHRoO1xyXG4gIH1cclxuXHJcbiAgZGl2aWRlclBvc2l0aW9uKHNpemU6IG51bWJlcik6IHZvaWQge1xyXG4gICAgY29uc3Qgc2l6ZVBjdCA9IChzaXplIC8gdGhpcy5zZWxmLm5hdGl2ZUVsZW1lbnRbdGhpcy5zaXplUHJvcGVydHlOYW1lXSkgKiAxMDA7XHJcbiAgICB0aGlzLnByaW1hcnlDb21wb25lbnQubmF0aXZlRWxlbWVudC5zdHlsZS53aWR0aCA9IHNpemVQY3QgKyAnJSc7XHJcbiAgICB0aGlzLnNlY29uZGFyeUNvbXBvbmVudC5uYXRpdmVFbGVtZW50LnN0eWxlLndpZHRoID1cclxuICAgICAgJ2NhbGMoJyArICgxMDAgLSBzaXplUGN0KSArICclIC0gJyArXHJcbiAgICAgICh0aGlzLnByaW1hcnlUb2dnbGVkT2ZmIHx8IHRoaXMuc2Vjb25kYXJ5VG9nZ2xlZE9mZiA/IDAgOiB0aGlzLnNlcGFyYXRvclRoaWNrbmVzcykgKyAncHgpJztcclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pXHJcbiAgb25Nb3VzZW1vdmUoZXZlbnQ6IE1vdXNlRXZlbnQpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmlzUmVzaXppbmcpIHtcclxuICAgICAgY29uc3QgY29vcmRzID0gUG9zaXRpb25TZXJ2aWNlLm9mZnNldCh0aGlzLnByaW1hcnlDb21wb25lbnQpO1xyXG4gICAgICB0aGlzLmFwcGx5U2l6ZUNoYW5nZShldmVudC5wYWdlWCAtIGNvb3Jkcy5sZWZ0KTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19