@blackbaud/skyux/dist/modules/tabs/tab-dropdown.component.metadata.json

SKY UX built on Angular 2

[{"__symbolic":"module","version":3,"metadata":{"SkyTabDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tab-dropdown","template":"<sky-dropdown\n    buttonType=\"tab\"\n>\n  <sky-dropdown-button>\n    {{activeTabHeading}}\n  </sky-dropdown-button>\n  <sky-dropdown-menu>\n    <div\n        class=\"sky-tab-dropdown-item\"\n        [ngClass]=\"{\n          'sky-tab-dropdown-item-selected': tab.active\n        }\"\n        *ngFor=\"let tab of tabs\"\n    >\n      <button\n          type=\"button\"\n          class=\"sky-btn sky-tab-dropdown-item-btn\"\n          [ngClass]=\"{'sky-btn-disabled': tab.disabled }\"\n          (click)=\"selectTab(tab)\"\n      >\n        {{tab.tabHeading}}\n      </button>\n      <button\n          type=\"button\"\n          class=\"sky-btn sky-tab-dropdown-item-close\"\n          *ngIf=\"tab.allowClose\"\n          (click)=\"closeTab(tab)\"\n      >\n        <i class=\"fa fa-remove\"></i>\n      </button>\n    </div>\n  </sky-dropdown-menu>\n</sky-dropdown>\n","styles":[".sky-tab-dropdown-button{max-width:300px}.sky-tab-dropdown-item{display:flex;padding:0;transition:background-color 150ms;width:300px}.sky-tab-dropdown-item:hover:not(.sky-tab-dropdown-item-selected){background-color:#eeeeef}.sky-tab-dropdown-item-btn{border:none;background-color:transparent;cursor:pointer;flex-grow:1;padding:10px;text-align:left}.sky-tab-dropdown-item-close{background-color:transparent;border:none;padding:10px}.sky-tab-dropdown-item-selected{background-color:#007ca6}.sky-tab-dropdown-item-selected:hover{background-color:#007ca6}.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-btn,.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-close{color:#fff}\n"]}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectTab":[{"__symbolic":"method"}],"closeTab":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyTabDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tab-dropdown","template":"<sky-dropdown\n    buttonType=\"tab\"\n>\n  <sky-dropdown-button>\n    {{activeTabHeading}}\n  </sky-dropdown-button>\n  <sky-dropdown-menu>\n    <div\n        class=\"sky-tab-dropdown-item\"\n        [ngClass]=\"{\n          'sky-tab-dropdown-item-selected': tab.active\n        }\"\n        *ngFor=\"let tab of tabs\"\n    >\n      <button\n          type=\"button\"\n          class=\"sky-btn sky-tab-dropdown-item-btn\"\n          [ngClass]=\"{'sky-btn-disabled': tab.disabled }\"\n          (click)=\"selectTab(tab)\"\n      >\n        {{tab.tabHeading}}\n      </button>\n      <button\n          type=\"button\"\n          class=\"sky-btn sky-tab-dropdown-item-close\"\n          *ngIf=\"tab.allowClose\"\n          (click)=\"closeTab(tab)\"\n      >\n        <i class=\"fa fa-remove\"></i>\n      </button>\n    </div>\n  </sky-dropdown-menu>\n</sky-dropdown>\n","styles":[".sky-tab-dropdown-button{max-width:300px}.sky-tab-dropdown-item{display:flex;padding:0;transition:background-color 150ms;width:300px}.sky-tab-dropdown-item:hover:not(.sky-tab-dropdown-item-selected){background-color:#eeeeef}.sky-tab-dropdown-item-btn{border:none;background-color:transparent;cursor:pointer;flex-grow:1;padding:10px;text-align:left}.sky-tab-dropdown-item-close{background-color:transparent;border:none;padding:10px}.sky-tab-dropdown-item-selected{background-color:#007ca6}.sky-tab-dropdown-item-selected:hover{background-color:#007ca6}.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-btn,.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-close{color:#fff}\n"]}]}],"members":{"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closeClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectTab":[{"__symbolic":"method"}],"closeTab":[{"__symbolic":"method"}]}}}}]