[{"__symbolic":"module","version":3,"metadata":{"Dropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dropdown","styles":[".dropdown{border-radius:.1em;font-size:1em;margin:.5em;min-height:2em;min-width:12em;position:relative;text-align:center}.item{cursor:pointer;overflow:hidden;padding:.4em;text-align:left;text-overflow:ellipsis;white-space:nowrap}.item .field{padding:0 .5em}.item.active{text-align:center}.list{border-radius:.1em;left:0;position:absolute;right:0;top:0;z-index:1999;margin-bottom:0.5em}.list .items{max-height:30vh;overflow:auto}.default{background-color:#fff;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);color:rgba(0,0,0,0.87)}.default:hover{box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.54)}.default .item:hover{background-color:#2196f3;color:#fff}.default .item.active{background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.2);color:rgba(0,0,0,0.87);cursor:default}.default .list{background-color:#fff;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);color:rgba(0,0,0,0.87);overflow:hidden}\n    "],"template":"<!--\n    @Author: Alex Sorafumo <Yuion>\n    @Date:   16/09/2016 10:42 AM\n    @Email:  alex@yuion.net\n    @Filename: dropdown.template.html\n    @Last modified by:   Yuion\n    @Last modified time: 15/12/2016 11:29 AM\n    -->\n    \n    <div #main [class]=\"'aca dropdown ' + cssClass\" >\n        <div class=\"item active\" [@show]=\"shown ? 'hide': 'show'\" (tap)=\"toggle()\">\n            <div class=\"inner\" *ngIf=\"model&&model!==''\">\n                <div *ngIf=\"type==='object'\">\n                    <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'active-dropdown-item-field'+k\">{{model[f]}}</span>\n                </div>\n                <div class=\"field\" *ngIf=\"type!=='object'\">{{model}}</div>\n            </div>\n            <div class=\"inner field\" *ngIf=\"!model||model===''\">{{placeholder}}</div>\n        </div>\n        <div #list class=\"list\" [@showlist]=\"shown ? 'show': 'hide'\">\n            <div class=\"item active\" (tap)=\"shown=!shown\">\n                <div class=\"inner\" *ngIf=\"model&&model!==''\">\n                    <div *ngIf=\"type==='object'\">\n                        <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'active-dropdown-item-field'+k\">{{model[f]}}</span>\n                    </div>\n                    <div class=\"field\" *ngIf=\"type!=='object'\">{{model}}</div>\n                </div>\n                <div class=\"inner field\" *ngIf=\"!model||model===''\">{{placeholder}}</div>\n            </div>\n            <div hidden *ngIf=\"shown\" (window:tap)=\"checkTap($event)\"></div>\n            <div class=\"items\">\n                <div *ngFor=\"let item of display_items; let i = index \">\n                    <div class=\"item\" *ngIf=\"item!==current_item\">\n                        <div *ngIf=\"type==='object'\" (tap)=\"select(i)\">\n                            <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'dropdown-item'+i+'-field'+k\">{{item[f]}}</span>\n                        </div>\n                        <div class=\"field\" *ngIf=\"type!=='object'\" (tap)=\"select(i)\">{{item}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["show",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hide <=> show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms ease-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["showlist",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"2.4em","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hide <=> show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["750ms ease-out"]}]}]]}]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"indexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["list"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"checkTap":[{"__symbolic":"method"}],"itemContains":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"Dropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"dropdown","styles":[".dropdown{border-radius:.1em;font-size:1em;margin:.5em;min-height:2em;min-width:12em;position:relative;text-align:center}.item{cursor:pointer;overflow:hidden;padding:.4em;text-align:left;text-overflow:ellipsis;white-space:nowrap}.item .field{padding:0 .5em}.item.active{text-align:center}.list{border-radius:.1em;left:0;position:absolute;right:0;top:0;z-index:1999;margin-bottom:0.5em}.list .items{max-height:30vh;overflow:auto}.default{background-color:#fff;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);color:rgba(0,0,0,0.87)}.default:hover{box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.54)}.default .item:hover{background-color:#2196f3;color:#fff}.default .item.active{background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.2);color:rgba(0,0,0,0.87);cursor:default}.default .list{background-color:#fff;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);color:rgba(0,0,0,0.87);overflow:hidden}\n    "],"template":"<!--\n    @Author: Alex Sorafumo <Yuion>\n    @Date:   16/09/2016 10:42 AM\n    @Email:  alex@yuion.net\n    @Filename: dropdown.template.html\n    @Last modified by:   Yuion\n    @Last modified time: 15/12/2016 11:29 AM\n    -->\n    \n    <div #main [class]=\"'aca dropdown ' + cssClass\" >\n        <div class=\"item active\" [@show]=\"shown ? 'hide': 'show'\" (tap)=\"toggle()\">\n            <div class=\"inner\" *ngIf=\"model&&model!==''\">\n                <div *ngIf=\"type==='object'\">\n                    <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'active-dropdown-item-field'+k\">{{model[f]}}</span>\n                </div>\n                <div class=\"field\" *ngIf=\"type!=='object'\">{{model}}</div>\n            </div>\n            <div class=\"inner field\" *ngIf=\"!model||model===''\">{{placeholder}}</div>\n        </div>\n        <div #list class=\"list\" [@showlist]=\"shown ? 'show': 'hide'\">\n            <div class=\"item active\" (tap)=\"shown=!shown\">\n                <div class=\"inner\" *ngIf=\"model&&model!==''\">\n                    <div *ngIf=\"type==='object'\">\n                        <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'active-dropdown-item-field'+k\">{{model[f]}}</span>\n                    </div>\n                    <div class=\"field\" *ngIf=\"type!=='object'\">{{model}}</div>\n                </div>\n                <div class=\"inner field\" *ngIf=\"!model||model===''\">{{placeholder}}</div>\n            </div>\n            <div hidden *ngIf=\"shown\" (window:tap)=\"checkTap($event)\"></div>\n            <div class=\"items\">\n                <div *ngFor=\"let item of display_items; let i = index \">\n                    <div class=\"item\" *ngIf=\"item!==current_item\">\n                        <div *ngIf=\"type==='object'\" (tap)=\"select(i)\">\n                            <span *ngFor=\"let f of fields; let k = index \" class=\"field\" [id]=\"'dropdown-item'+i+'-field'+k\">{{item[f]}}</span>\n                        </div>\n                        <div class=\"field\" *ngIf=\"type!=='object'\" (tap)=\"select(i)\">{{item}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["show",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hide <=> show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms ease-out"]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["showlist",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"height":"2.4em","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["hide <=> show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["750ms ease-out"]}]}]]}]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"cssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"modelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"indexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["list"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"checkTap":[{"__symbolic":"method"}],"itemContains":[{"__symbolic":"method"}]}}}}]