UNPKG

@davvidess/angular-split

Version:

Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.

1 lines 10.2 kB
{"__symbolic":"module","version":4,"metadata":{"AngularSplitModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"declarations":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"}],"exports":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}}}},"SplitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":63,"character":1},"arguments":[{"selector":"as-split","exportAs":"asSplit","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":66,"character":19},"member":"OnPush"},"template":" <ng-content></ng-content>\n <ng-template ngFor [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n <div\n *ngIf=\"last === false\"\n #gutterEls\n class=\"as-split-gutter\"\n [style.flex-basis.px]=\"gutterSize\"\n [style.order]=\"index * 2 + 1\"\n (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\n (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\n (mouseup)=\"clickGutter($event, index + 1)\"\n (touchend)=\"clickGutter($event, index + 1)\"\n >\n <div class=\"as-split-gutter-icon\"></div>\n </div>\n </ng-template>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":84,"character":17},"member":"Emulated"},"styles":[":host{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;overflow:hidden;width:100%;height:100%}:host>.as-split-gutter{flex-grow:0;flex-shrink:0;background-color:#eee;display:flex;align-items:center;justify-content:center}:host>.as-split-gutter>.as-split-gutter-icon{width:100%;height:100%;background-position:center center;background-repeat:no-repeat}:host ::ng-deep>.as-split-area{flex-grow:0;flex-shrink:0;overflow-x:hidden;overflow-y:auto}:host ::ng-deep>.as-split-area.as-hidden{flex:0 1 0px!important;overflow-x:hidden;overflow-y:hidden}:host.as-horizontal{flex-direction:row}:host.as-horizontal>.as-split-gutter{flex-direction:row;cursor:col-resize;height:100%}:host.as-horizontal>.as-split-gutter>.as-split-gutter-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)}:host.as-horizontal ::ng-deep>.as-split-area{height:100%}:host.as-vertical{flex-direction:column}:host.as-vertical>.as-split-gutter{flex-direction:column;cursor:row-resize;width:100%}:host.as-vertical>.as-split-gutter .as-split-gutter-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC)}:host.as-vertical ::ng-deep>.as-split-area{width:100%}:host.as-vertical ::ng-deep>.as-split-area.as-hidden{max-width:0}:host.as-disabled>.as-split-gutter{cursor:default}:host.as-disabled>.as-split-gutter .as-split-gutter-icon{background-image:url(\"\")}:host.as-transition.as-init:not(.as-dragging) ::ng-deep>.as-split-area,:host.as-transition.as-init:not(.as-dragging)>.as-split-gutter{transition:flex-basis .3s}"]}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"unit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":3}}]}],"gutterSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":3}}]}],"gutterStep":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":3}}]}],"restrictMove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":3}}]}],"useTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":3}}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":3}}]}],"gutterDblClickDuration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":208,"character":3}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":218,"character":3}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":219,"character":3}}]}],"gutterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":220,"character":3}}]}],"gutterDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":221,"character":3}}]}],"transitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":224,"character":3}}]}],"gutterEls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":245,"character":3},"arguments":["gutterEls"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":248,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":249,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":250,"character":19},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":251,"character":22}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"getVisibleAreaSizes":[{"__symbolic":"method"}],"setVisibleAreaSizes":[{"__symbolic":"method"}],"build":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"clickGutter":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitAreaDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"as-split-area, [as-split-area]","exportAs":"asSplitArea"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"lockSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":104,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":105,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":106,"character":22},{"__symbolic":"reference","name":"SplitComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"setStyleOrder":[{"__symbolic":"method"}],"setStyleFlex":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"IOutputData":{"__symbolic":"interface"},"IOutputAreaSizes":{"__symbolic":"interface"}},"origins":{"AngularSplitModule":"./lib/module","SplitComponent":"./lib/component/split.component","SplitAreaDirective":"./lib/directive/splitArea.directive","IOutputData":"./lib/interface","IOutputAreaSizes":"./lib/interface"},"importAs":"@davvidess/angular-split"}