UNPKG

@duoduo-oba/ng-devui

Version:

DevUI components based on Angular

1 lines 17.3 kB
{"__symbolic":"module","version":4,"metadata":{"SplitterModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":4}],"exports":[{"__symbolic":"reference","name":"SplitterComponent"},{"__symbolic":"reference","name":"SplitterPaneComponent"},{"__symbolic":"reference","name":"SplitterBarComponent"},{"__symbolic":"reference","name":"ResizeDirective"}],"declarations":[{"__symbolic":"reference","name":"SplitterComponent"},{"__symbolic":"reference","name":"SplitterPaneComponent"},{"__symbolic":"reference","name":"SplitterBarComponent"},{"__symbolic":"reference","name":"ResizeDirective"}],"providers":[]}]}],"members":{}},"ResizeDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[dResize]"}]}],"members":{"enableResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"pressEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":9,"character":3}}]}],"dragEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":3}}]}],"releaseEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":13,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":14,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":14,"character":54}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"bindEvent":[{"__symbolic":"method"}],"normalizeEvent":[{"__symbolic":"method"}]}},"SplitterOrientation":{"__symbolic":"interface"},"CollapseDirection":{"__symbolic":"interface"},"SplitterService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"configPane":[{"__symbolic":"method"}],"dragState":[{"__symbolic":"method"}],"setSize":[{"__symbolic":"method"}],"clamp":[{"__symbolic":"method"}],"resize":[{"__symbolic":"method"}],"isResizable":[{"__symbolic":"method"}],"isStaticBar":[{"__symbolic":"method"}],"getPane":[{"__symbolic":"method"}],"isPercent":[{"__symbolic":"method"}],"toPixels":[{"__symbolic":"method"}],"togglePane":[{"__symbolic":"method"}]}},"SplitterBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"d-splitter-bar","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"template":"<div class=\"prev\" [ngClass]=\"prevClass\" (click)=\"collapsePrePane()\" (touchstart)=\"collapsePrePane()\"></div>\r\n<div class=\"devui-resize-handle\"></div>\r\n<div class=\"next\" [ngClass]=\"nextClass\" (click)=\"collapseNextPane()\" (touchstart)=\"collapseNextPane()\"></div>\r\n","styles":[":host.devui-splitter-bar{background-color:#dfe1e6;display:-webkit-box;display:flex;position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-bar .devui-collapse{background-color:#dfe1e6;position:absolute;z-index:15;cursor:pointer}:host.devui-splitter-bar .devui-collapse::after,:host.devui-splitter-bar .devui-collapse::before{content:'';width:10px;height:2px;background:#fff;display:block;position:absolute}:host.devui-splitter-bar .devui-collapse:hover{background-color:#344899}:host.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}:host.devui-splitter-bar-horizontal .devui-collapse.next.hidden,:host.devui-splitter-bar-horizontal .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 4px 4px 0;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{top:9px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{top:18px;left:1px}:host.devui-splitter-bar-horizontal .devui-collapse.prev::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:4px 0 0 4px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-horizontal .devui-collapse.next::before{top:9px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::before{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-horizontal .devui-collapse.next::after{top:18px;right:1px}:host.devui-splitter-bar-horizontal .devui-collapse.next::after{-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}:host.devui-splitter-bar-horizontal .devui-collapse.next.collapsed::after{-webkit-transform:rotate(70deg);transform:rotate(70deg)}:host.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}:host.devui-splitter-bar-vertical .devui-collapse.next.hidden,:host.devui-splitter-bar-vertical .devui-collapse.prev.hidden{display:none}:host.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 4px 4px;top:1px}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.prev::before{bottom:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.prev::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.prev::after{bottom:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.prev::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.prev.collapsed::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next{border-radius:4px 4px 0 0;bottom:1px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before,:host.devui-splitter-bar-vertical .devui-collapse.next::before{top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next::before{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::before{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);top:5px;left:5px}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after,:host.devui-splitter-bar-vertical .devui-collapse.next::after{top:5px;left:14px}:host.devui-splitter-bar-vertical .devui-collapse.next::after{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}:host.devui-splitter-bar-vertical .devui-collapse.next.collapsed::after{-webkit-transform:rotate(20deg);transform:rotate(20deg)}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):active,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover{background-color:#344899}:host.devui-splitter-bar-horizontal.resizable:not(.none-resizable)::after,:host.devui-splitter-bar-vertical.resizable:not(.none-resizable)::after{content:'';display:block;position:absolute;z-index:10}:host.devui-splitter-bar-horizontal.resizable{cursor:col-resize}:host.devui-splitter-bar-horizontal.resizable::after{cursor:col-resize;height:100%;width:10px;top:0}:host.devui-splitter-bar-vertical.resizable{cursor:row-resize}:host.devui-splitter-bar-vertical.resizable::after{cursor:row-resize;width:100%;height:10px;left:0}"]}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"splitBarSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"disabledBarSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":31,"character":3},"arguments":["class"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":65,"character":5}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":62,"character":26},{"__symbolic":"reference","name":"SplitterService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":22},{"__symbolic":"reference","name":"ResizeDirective"}]}],"ngOnInit":[{"__symbolic":"method"}],"collapsePrePane":[{"__symbolic":"method"}],"collapseNextPane":[{"__symbolic":"method"}],"toggleResize":[{"__symbolic":"method"}],"generateClass":[{"__symbolic":"method"}],"generateCollapseClass":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitterPaneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"d-splitter-pane","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<ng-content></ng-content>\r\n","styles":[":host.devui-splitter-pane{position:relative;-webkit-box-flex:1;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%;height:100%}:host.devui-splitter-pane-fixed{-webkit-box-flex:0;flex-grow:0;flex-shrink:0}:host.devui-splitter-pane-hidden{-webkit-box-flex:0!important;flex:0!important;overflow:hidden!important}:host.devui-splitter-pane-grow{-webkit-box-flex:1!important;flex-grow:1!important}"]}]}],"members":{"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":4}}]}],"maxSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":4}}]}],"resizable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":4}}]}],"collapsible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":4}}]}],"collapseDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":4}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"sizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"collapsedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"paneClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":44,"character":3},"arguments":["class.devui-splitter-pane"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":59,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":59,"character":56}]}],"setOrderStyles":[{"__symbolic":"method"}],"toggleCollapseClass":[{"__symbolic":"method"}],"toggleNearPaneFlexGrow":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}]}},"SplitterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"d-splitter","exportAs":"dSplitter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":11,"character":19},"member":"OnPush"},"providers":[{"__symbolic":"reference","name":"SplitterService"}],"template":"<ng-content select=\"d-splitter-pane\"></ng-content>\r\n<ng-container *ngFor=\"let pane of panes; let index = index; let last = last\">\r\n <d-splitter-bar\r\n dResize\r\n [style.order]=\"index * 2 + 1\"\r\n *ngIf=\"!last\"\r\n [index]=\"index\"\r\n [splitBarSize]=\"splitBarSize\"\r\n [disabledBarSize]=\"disabledBarSize\"\r\n [orientation]=\"orientation\"\r\n >\r\n </d-splitter-bar>\r\n</ng-container>\r\n","styles":[":host{display:-webkit-box;display:flex;width:100%;height:auto;position:relative}:host.devui-splitter-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}:host.devui-splitter-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}"]}]}],"members":{"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"splitBarSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"disabledBarSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":25,"character":3},"arguments":["class"]}]}],"panes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":29,"character":3},"arguments":[{"__symbolic":"reference","name":"SplitterPaneComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":32,"character":26},{"__symbolic":"reference","name":"SplitterService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"reconfigure":[{"__symbolic":"method"}]}}},"origins":{"SplitterModule":"./splitter.module","ResizeDirective":"./resize.directive","SplitterOrientation":"./splitter.types","CollapseDirection":"./splitter.types","SplitterService":"./splitter.service","SplitterBarComponent":"./splitter-bar.component","SplitterPaneComponent":"./splitter-pane.component","SplitterComponent":"./splitter.component"},"importAs":"ng-devui/splitter"}