{"__symbolic":"module","version":4,"metadata":{"DragDropComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-drag-drop","template":"<div class=\"container\">\n  <div fxLayout=\"row\">\n    <div fxFlex=\"33\" fxLayoutGap=\"20px\">\n      <div class=\"drag-container\">\n        <div class=\"section-heading\">Still Doing</div>\n\n        <div cdkDropList #pendingList=\"cdkDropList\" [cdkDropListData]=\"todo\"\n          [cdkDropListConnectedTo]=\"[doneList,reviewList]\" class=\"item-list\" (cdkDropListDropped)=\"drop($event)\">\n          <div class=\"item-box\" *ngFor=\"let item of todo\" cdkDrag>{{item}}</div>\n        </div>\n      </div>\n    </div>\n    <div fxFlex=\"33\">\n      <div class=\"drag-container\">\n        <div class=\"section-heading\">Done</div>\n\n        <div cdkDropList #doneList=\"cdkDropList\" [cdkDropListData]=\"done\"\n          [cdkDropListConnectedTo]=\"[pendingList,reviewList]\" class=\"item-list\" (cdkDropListDropped)=\"drop($event)\">\n          <div class=\"item-box\" *ngFor=\"let item of done\" cdkDrag>{{item}}</div>\n        </div>\n      </div>\n    </div>\n    <div fxFlex=\"33\">\n      <div class=\"drag-container\">\n        <div class=\"section-heading\">Nevermind</div>\n\n        <div cdkDropList #reviewList=\"cdkDropList\" [cdkDropListData]=\"review\"\n          [cdkDropListConnectedTo]=\"[doneList,pendingList]\" class=\"item-list\" (cdkDropListDropped)=\"drop($event)\">\n          <div class=\"item-box\" *ngFor=\"let item of review\" cdkDrag>{{item}}</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<style>\n  .section-heading {\n    padding: 5px 10px;\n    font-size: 15px;\n    font-weight: bold;\n  }\n\n  .drag-container {\n    width: 400px;\n    max-width: 100%;\n    margin: 0 25px 25px 0;\n    display: inline-block;\n    vertical-align: top;\n    background-color: #E9ECEF;\n    padding: 15px;\n    border-radius: 5px;\n  }\n\n  .item-list {\n    min-height: 60px;\n    border-radius: 4px;\n    display: block;\n  }\n\n  .item-box {\n    padding: 8px 10px;\n    border: solid 1px #ccc;\n    margin-bottom: 5px;\n    color: rgba(0, 0, 0, 0.87);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    cursor: move;\n    background: white;\n    font-size: 14px;\n    border-radius: 20px;\n  }\n\n  .cdk-drag-preview {\n    box-sizing: border-box;\n    border-radius: 4px;\n    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n      0 8px 10px 1px rgba(0, 0, 0, 0.14),\n      0 3px 14px 2px rgba(0, 0, 0, 0.12);\n    border-radius: 20px;\n  }\n\n  .cdk-drag-placeholder {\n    opacity: 0;\n  }\n\n  .cdk-drag-animating {\n    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n  }\n\n  .item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder) {\n    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n  }\n</style>","styles":[".section-heading{padding:5px 10px;font-size:15px;font-weight:700}.drag-container{width:400px;max-width:100%;margin:0 25px 25px 0;display:inline-block;vertical-align:top;background-color:#e9ecef;padding:15px;border-radius:5px}.item-list{min-height:60px;border-radius:4px;display:block}.item-box{padding:8px 10px;border:1px solid #ccc;margin-bottom:5px;color:rgba(0,0,0,.87);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px;border-radius:20px}.cdk-drag-preview{box-sizing:border-box;border-radius:20px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating,.item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}"]}]}],"members":{"drop":[{"__symbolic":"method"}]}},"DragDropLModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DragDropComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":14,"character":4}],"exports":[{"__symbolic":"reference","name":"DragDropComponent"}]}]}],"members":{}}},"origins":{"DragDropComponent":"./lib/components/drag-drop/drag-drop.component","DragDropLModule":"./lib/components/drag-drop/drag-drop.module"},"importAs":"drag-drop-form-builder"}