UNPKG

ngx-nestable

Version:

Nestable list with drag and drop for Angular

1 lines 8.46 kB
{"__symbolic":"module","version":4,"metadata":{"NestableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":39,"character":1},"arguments":[{"selector":"ngx-nestable","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":43,"character":19},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":44,"character":21},"member":"OnPush"},"template":"<ng-container *ngTemplateOutlet=\"nestableList; context:{nestable: list, depth: 0}\">\n</ng-container>\n\n<ng-template #nestableList let-nestable=\"nestable\" let-depth=\"depth\">\n <ul [style.padding-left.px]=\"depth ? options.threshold : 0\"\n [class]=\"options.listClass\">\n <li [class]=\"options.itemClass\" [id]=\"item.$$id\" *ngFor=\"let item of nestable\">\n\n <ng-container *ngTemplateOutlet=\"nestableItem; context:{nestable: nestable, item: item, depth: depth}\">\n </ng-container>\n\n <ng-container *ngIf=\"item.children && item.$$expanded\">\n <ng-container *ngTemplateOutlet=\"nestableList; context:{nestable: item.children, depth: depth + 1}\">\n </ng-container>\n </ng-container>\n\n <ul [class]=\"options.listClass\" [style.padding-left.px]=\"options.threshold\"></ul>\n </li>\n </ul>\n</ng-template>\n\n<ng-template #nestableItem let-parentList=\"nestable\" let-item=\"item\" let-depth=\"depth\">\n <div class=\"nestable-item-container mat-list-item\" (mousedown)=\"dragStartFromItem($event, item, parentList)\">\n <ng-container\n *ngTemplateOutlet=\"template; context:{$implicit: {item: item, parentList: parentList}, depth: depth}\">\n </ng-container>\n\n <div class=\"nestable-item-mask\"></div>\n </div>\n</ng-template>\n","styles":["@import url(https://fonts.googleapis.com/css?family=Roboto);ul .dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box}ul li .nestable-item-mask{display:none;position:absolute;top:0;bottom:0;right:0;left:0;z-index:9998}ul li .nestable-expand-button{display:block;position:relative;cursor:pointer;float:left;width:25px;height:14px;padding:0;white-space:nowrap;overflow:hidden;border:0;background:0 0;font-size:18px;line-height:1;text-align:center;font-weight:700;outline:0}ul li .nestable-item-container{position:relative;display:flex;flex-direction:row;align-items:center;color:rgba(0,0,0,.87);min-height:32px;font-size:16px;font-family:Roboto,sans-serif;cursor:pointer;outline:0;margin-bottom:2px;padding-left:8px}ul li .nestable-item-container:hover{background:rgba(0,0,0,.04)}ol,ul{list-style:none}"]}]}],"members":{"listChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"drop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":5}}]}],"drag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":5}}]}],"disclosure":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":5}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"disableDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":100,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":101,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":102,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":103,"character":22}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_generateItemIds":[{"__symbolic":"method"}],"_generateItemExpanded":[{"__symbolic":"method"}],"_createHandleListener":[{"__symbolic":"method"}],"_createDragClone":[{"__symbolic":"method"}],"_createPlaceholder":[{"__symbolic":"method"}],"_calculateDepth":[{"__symbolic":"method"}],"_mouseStart":[{"__symbolic":"method"}],"_mouseUpdate":[{"__symbolic":"method"}],"_showMasks":[{"__symbolic":"method"}],"_hideMasks":[{"__symbolic":"method"}],"_calcMouseDistance":[{"__symbolic":"method"}],"_move":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"dragStartFromItem":[{"__symbolic":"method"}],"dragStart":[{"__symbolic":"method"}],"dragStop":[{"__symbolic":"method"}],"dragMove":[{"__symbolic":"method"}],"expandAll":[{"__symbolic":"method"}],"collapseAll":[{"__symbolic":"method"}]}},"NestableModule":{"__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":9,"character":14}],"declarations":[{"__symbolic":"reference","name":"NestableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"NestableComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[ngxNestableDragHandle]"}]}],"members":{"ngxNestableDragHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":10,"character":5},"arguments":["mousedown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":21,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[ngxNestableExpandCollapse]"}]}],"members":{"ngxNestableExpandCollapse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":9,"character":29}]}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":11,"character":5},"arguments":["mousedown",["$event"]]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":16,"character":5},"arguments":["click",["$event"]]}]}]}}},"origins":{"NestableComponent":"./lib/nestable.component","NestableModule":"./lib/nestable.module","ɵa":"./lib/nestable-drag-handle/nestable-drag-handle.directive","ɵb":"./lib/nestable-expand-collapse-handle/nestable-expand-collapse.directive"},"importAs":"ngx-nestable"}