[{"__symbolic":"module","version":3,"metadata":{"ZrDropdownSelectionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zr-dropdown-selection","template":"\n    <!-- click -->\n    <div *ngIf=\"trigger==='click'\" class=\"m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-push m-dropdown--align-{{position}}\"\n      aria-expanded=\"true\">\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='icon'\" (click)=\"openDropdown=!openDropdown\" class=\"m-dropdown__toggle btn {{btnColor}} dropdown-toggle\">{{dropText}}</a>\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='btn'\" (click)=\"openDropdown=!openDropdown\" class=\"m-portlet__nav-link m-dropdown__toggle btn m-btn {{iconClass}}\">\n        <i class=\"{{icon}}\" *ngIf=\"type==='icon'\"></i>\n      </a>\n      <i class=\"la la-times-circle-o dropdown-btn-remove-icon\" *ngIf=\"type==='btn'&&!isEmpty&&multiselect\" (click)=\"removeValue()\"></i>\n      <div [hidden]=\"openDropdown\" (mouseleave)=\"toggleDropdown()\" class=\"m-dropdown__wrapper\">\n        <span class=\"m-dropdown__arrow m-dropdown__arrow--{{position}}\"></span>\n        <div class=\"m-dropdown__inner\">\n          <div class=\"m-dropdown__body lz-m-dropdown__body\">\n            <div class=\"m-dropdown__content\">\n              <ul class=\"m-nav lz-m-nav\">\n                <li class=\"m-nav__item lz-m-nav__item\" *ngFor=\"let option of options\" (click)=\"onSelected($event,option)\" (mouseenter)=\"openChildren(option)\"\n                  (mouseleave)=\"closeChildren(option)\">\n                  <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">\n                    <i class=\"m-nav__link-icon {{option.icon}}\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\"></i>\n                    <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">{{option.text}}</span>\n                    <i *ngIf=\"option.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                  </a>\n                  <div [hidden]=\"!option.childrenOpen\" class=\"m-dropdown__wrapper lz-m-dropdown__wrapper\" [ngStyle]=\"{'top':'-18px'}\" [style.left]=\"position==='left'?'112%':position==='right'?'104%':'154%'\">\n                    <span class=\"m-dropdown__arrow m-dropdown__arrow--left lz-m-dropdown__arrow--left\"></span>\n                    <div class=\"m-dropdown__inner\">\n                      <div class=\"m-dropdown__body\">\n                        <div class=\"m-dropdown__content\">\n                          <ul class=\"m-nav\">\n                            <li class=\"m-nav__item\" *ngFor=\"let childrenItem of option.children\">\n                              <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\" (click)=\"$event.stopPropagation();onSelected($event,childrenItem)\">\n                                <i class=\"m-nav__link-icon {{childrenItem.icon}}\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\"></i>\n                                <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\">{{childrenItem.text}}</span>\n                                <i *ngIf=\"childrenItem.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                              </a>\n                            </li>\n                          </ul>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- hover -->\n    <div *ngIf=\"trigger==='hover'\" class=\"m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-push m-dropdown--align-{{position}}\"\n      aria-expanded=\"true\">\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='icon'\" (mouseenter)=\"openDropdown=!openDropdown\" class=\"m-dropdown__toggle btn {{btnColor}} dropdown-toggle\">{{dropText}}</a>\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='btn'\" (mouseenter)=\"openDropdown=!openDropdown\" class=\"m-portlet__nav-link m-dropdown__toggle btn m-btn {{iconClass}}\">\n        <i class=\"{{icon}}\" *ngIf=\"type==='icon'\"></i>\n      </a>\n      <i class=\"la la-times-circle-o dropdown-btn-remove-icon\" *ngIf=\"type==='btn'&&!isEmpty&&multiselect\" (click)=\"removeValue()\"></i>\n      <div [hidden]=\"openDropdown\" (mouseleave)=\"toggleDropdown()\" class=\"m-dropdown__wrapper\">\n        <span class=\"m-dropdown__arrow m-dropdown__arrow--{{position}}\"></span>\n        <div class=\"m-dropdown__inner\">\n          <div class=\"m-dropdown__body lz-m-dropdown__body\">\n            <div class=\"m-dropdown__content\">\n              <ul class=\"m-nav lz-m-nav\">\n                <li class=\"m-nav__item lz-m-nav__item\" *ngFor=\"let option of options\" (click)=\"onSelected($event,option)\" (mouseenter)=\"openChildren(option)\"\n                  (mouseleave)=\"closeChildren(option)\">\n                  <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">\n                    <i class=\"m-nav__link-icon {{option.icon}}\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\"></i>\n                    <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">{{option.text}}</span>\n                    <i *ngIf=\"option.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                  </a>\n                  <div [hidden]=\"!option.childrenOpen\" class=\"m-dropdown__wrapper lz-m-dropdown__wrapper\" [ngStyle]=\"{'top':'-18px'}\" [style.left]=\"position==='left'?'112%':position==='right'?'104%':'154%'\">\n                    <span class=\"m-dropdown__arrow m-dropdown__arrow--left lz-m-dropdown__arrow--left\"></span>\n                    <div class=\"m-dropdown__inner\">\n                      <div class=\"m-dropdown__body\">\n                        <div class=\"m-dropdown__content\">\n                          <ul class=\"m-nav\">\n                            <li class=\"m-nav__item\" *ngFor=\"let childrenItem of option.children\">\n                              <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\" (click)=\"$event.stopPropagation();onSelected($event,childrenItem)\">\n                                <i class=\"m-nav__link-icon {{childrenItem.icon}}\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\"></i>\n                                <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\">{{childrenItem.text}}</span>\n                                <i *ngIf=\"childrenItem.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                              </a>\n                            </li>\n                          </ul>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n      .m-dropdown .m-dropdown__wrapper {\n        display: block;\n        width: 245px;\n      }\n\n      .m-dropdown__arrow .m-dropdown__arrow--left {\n        left: 34px;\n        margin-left: 0;\n      }\n\n      .m-dropdown__arrow .m-dropdown__arrow--right {\n        right: 34px;\n        margin-left: 0;\n      }\n\n      .m-dropdown__arrow--adjust-right {\n        right: 33px;\n        left: auto;\n      }\n\n      .m-dropdown__arrow--adjust-left {\n        left: 33px;\n        right: auto;\n      }\n\n      .m-dropdown__disabled {\n        color: #b4bccc !important;\n        cursor: not-allowed !important;\n      }\n\n      .dropdown-btn-remove-icon {\n        cursor: pointer;\n      }\n\n      .lz-m-dropdown__body {\n        padding: 0 !important;\n\n        .lz-m-nav {\n          padding-top: 20px;\n          padding-bottom: 20px;\n        }\n      }\n\n      .lz-la-angle-right {\n        float: right;\n        width: 20px;\n        font-size: 0.8rem !important;\n        color: #b9c1d4;\n      }\n\n      .lz-m-nav__item {\n        position: relative;\n        padding-left: 20px;\n        padding-right: 20px;\n\n        .lz-m-dropdown__wrapper {\n          position: absolute;\n          right: auto;\n        }\n      }\n\n      .lz-m-dropdown__arrow--left {\n        position: absolute;\n        top: 28px !important;\n        left: -24px !important;\n        margin-left: 0 !important;\n        transform: rotate(-90deg);\n      }\n    "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"btnColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separateCharacter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectParent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"openChildren":[{"__symbolic":"method"}],"closeChildren":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"removeValue":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ZrDropdownSelectionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"zr-dropdown-selection","template":"\n    <!-- click -->\n    <div *ngIf=\"trigger==='click'\" class=\"m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-push m-dropdown--align-{{position}}\"\n      aria-expanded=\"true\">\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='icon'\" (click)=\"openDropdown=!openDropdown\" class=\"m-dropdown__toggle btn {{btnColor}} dropdown-toggle\">{{dropText}}</a>\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='btn'\" (click)=\"openDropdown=!openDropdown\" class=\"m-portlet__nav-link m-dropdown__toggle btn m-btn {{iconClass}}\">\n        <i class=\"{{icon}}\" *ngIf=\"type==='icon'\"></i>\n      </a>\n      <i class=\"la la-times-circle-o dropdown-btn-remove-icon\" *ngIf=\"type==='btn'&&!isEmpty&&multiselect\" (click)=\"removeValue()\"></i>\n      <div [hidden]=\"openDropdown\" (mouseleave)=\"toggleDropdown()\" class=\"m-dropdown__wrapper\">\n        <span class=\"m-dropdown__arrow m-dropdown__arrow--{{position}}\"></span>\n        <div class=\"m-dropdown__inner\">\n          <div class=\"m-dropdown__body lz-m-dropdown__body\">\n            <div class=\"m-dropdown__content\">\n              <ul class=\"m-nav lz-m-nav\">\n                <li class=\"m-nav__item lz-m-nav__item\" *ngFor=\"let option of options\" (click)=\"onSelected($event,option)\" (mouseenter)=\"openChildren(option)\"\n                  (mouseleave)=\"closeChildren(option)\">\n                  <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">\n                    <i class=\"m-nav__link-icon {{option.icon}}\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\"></i>\n                    <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">{{option.text}}</span>\n                    <i *ngIf=\"option.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                  </a>\n                  <div [hidden]=\"!option.childrenOpen\" class=\"m-dropdown__wrapper lz-m-dropdown__wrapper\" [ngStyle]=\"{'top':'-18px'}\" [style.left]=\"position==='left'?'112%':position==='right'?'104%':'154%'\">\n                    <span class=\"m-dropdown__arrow m-dropdown__arrow--left lz-m-dropdown__arrow--left\"></span>\n                    <div class=\"m-dropdown__inner\">\n                      <div class=\"m-dropdown__body\">\n                        <div class=\"m-dropdown__content\">\n                          <ul class=\"m-nav\">\n                            <li class=\"m-nav__item\" *ngFor=\"let childrenItem of option.children\">\n                              <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\" (click)=\"$event.stopPropagation();onSelected($event,childrenItem)\">\n                                <i class=\"m-nav__link-icon {{childrenItem.icon}}\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\"></i>\n                                <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\">{{childrenItem.text}}</span>\n                                <i *ngIf=\"childrenItem.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                              </a>\n                            </li>\n                          </ul>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- hover -->\n    <div *ngIf=\"trigger==='hover'\" class=\"m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-push m-dropdown--align-{{position}}\"\n      aria-expanded=\"true\">\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='icon'\" (mouseenter)=\"openDropdown=!openDropdown\" class=\"m-dropdown__toggle btn {{btnColor}} dropdown-toggle\">{{dropText}}</a>\n      <a href=\"javascript:void(0)\" [hidden]=\"type==='btn'\" (mouseenter)=\"openDropdown=!openDropdown\" class=\"m-portlet__nav-link m-dropdown__toggle btn m-btn {{iconClass}}\">\n        <i class=\"{{icon}}\" *ngIf=\"type==='icon'\"></i>\n      </a>\n      <i class=\"la la-times-circle-o dropdown-btn-remove-icon\" *ngIf=\"type==='btn'&&!isEmpty&&multiselect\" (click)=\"removeValue()\"></i>\n      <div [hidden]=\"openDropdown\" (mouseleave)=\"toggleDropdown()\" class=\"m-dropdown__wrapper\">\n        <span class=\"m-dropdown__arrow m-dropdown__arrow--{{position}}\"></span>\n        <div class=\"m-dropdown__inner\">\n          <div class=\"m-dropdown__body lz-m-dropdown__body\">\n            <div class=\"m-dropdown__content\">\n              <ul class=\"m-nav lz-m-nav\">\n                <li class=\"m-nav__item lz-m-nav__item\" *ngFor=\"let option of options\" (click)=\"onSelected($event,option)\" (mouseenter)=\"openChildren(option)\"\n                  (mouseleave)=\"closeChildren(option)\">\n                  <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">\n                    <i class=\"m-nav__link-icon {{option.icon}}\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\"></i>\n                    <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':option.disabled}\">{{option.text}}</span>\n                    <i *ngIf=\"option.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                  </a>\n                  <div [hidden]=\"!option.childrenOpen\" class=\"m-dropdown__wrapper lz-m-dropdown__wrapper\" [ngStyle]=\"{'top':'-18px'}\" [style.left]=\"position==='left'?'112%':position==='right'?'104%':'154%'\">\n                    <span class=\"m-dropdown__arrow m-dropdown__arrow--left lz-m-dropdown__arrow--left\"></span>\n                    <div class=\"m-dropdown__inner\">\n                      <div class=\"m-dropdown__body\">\n                        <div class=\"m-dropdown__content\">\n                          <ul class=\"m-nav\">\n                            <li class=\"m-nav__item\" *ngFor=\"let childrenItem of option.children\">\n                              <a class=\"m-nav__link\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\" (click)=\"$event.stopPropagation();onSelected($event,childrenItem)\">\n                                <i class=\"m-nav__link-icon {{childrenItem.icon}}\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\"></i>\n                                <span class=\"m-nav__link-text\" [ngClass]=\"{'m-dropdown__disabled':childrenItem.disabled}\">{{childrenItem.text}}</span>\n                                <i *ngIf=\"childrenItem.children\" class=\"m-menu__hor-arrow la la-angle-right lz-la-angle-right\"></i>\n                              </a>\n                            </li>\n                          </ul>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>","styles":["\n      .m-dropdown .m-dropdown__wrapper {\n        display: block;\n        width: 245px;\n      }\n\n      .m-dropdown__arrow .m-dropdown__arrow--left {\n        left: 34px;\n        margin-left: 0;\n      }\n\n      .m-dropdown__arrow .m-dropdown__arrow--right {\n        right: 34px;\n        margin-left: 0;\n      }\n\n      .m-dropdown__arrow--adjust-right {\n        right: 33px;\n        left: auto;\n      }\n\n      .m-dropdown__arrow--adjust-left {\n        left: 33px;\n        right: auto;\n      }\n\n      .m-dropdown__disabled {\n        color: #b4bccc !important;\n        cursor: not-allowed !important;\n      }\n\n      .dropdown-btn-remove-icon {\n        cursor: pointer;\n      }\n\n      .lz-m-dropdown__body {\n        padding: 0 !important;\n\n        .lz-m-nav {\n          padding-top: 20px;\n          padding-bottom: 20px;\n        }\n      }\n\n      .lz-la-angle-right {\n        float: right;\n        width: 20px;\n        font-size: 0.8rem !important;\n        color: #b9c1d4;\n      }\n\n      .lz-m-nav__item {\n        position: relative;\n        padding-left: 20px;\n        padding-right: 20px;\n\n        .lz-m-dropdown__wrapper {\n          position: absolute;\n          right: auto;\n        }\n      }\n\n      .lz-m-dropdown__arrow--left {\n        position: absolute;\n        top: 28px !important;\n        left: -24px !important;\n        margin-left: 0 !important;\n        transform: rotate(-90deg);\n      }\n    "]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dropText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"iconClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"btnColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"trigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separateCharacter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectParent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"openChildren":[{"__symbolic":"method"}],"closeChildren":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"removeValue":[{"__symbolic":"method"}]}}}}]