[{"__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":"<div class=\"sky-tab-dropdown\">\n  <sky-dropdown buttonType=\"tab\">\n    <sky-dropdown-button>\n      {{ activeTabHeading }}\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item\n        *ngFor=\"let tab of tabs\">\n        <div\n          class=\"sky-tab-dropdown-item\"\n          [ngClass]=\"{ 'sky-tab-dropdown-item-selected': tab.active }\">\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            {{ 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            <i class=\"fa fa-remove\"></i>\n          </button>\n        </div>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n","styles":[".sky-tab-dropdown ::ng-deep .sky-dropdown-item {\n  margin: 0;\n}\n\n.sky-tab-dropdown-button {\n  max-width: 300px;\n}\n\n.sky-tab-dropdown-item {\n  display: flex;\n  padding: 0;\n  transition: background-color 150ms;\n  min-width: 300px;\n}\n\n.sky-tab-dropdown-item:hover:not(.sky-tab-dropdown-item-selected) {\n  background-color: #eeeeef;\n}\n\n.sky-tab-dropdown-item-btn {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  flex-grow: 1;\n  padding: 10px;\n  text-align: left;\n}\n\n.sky-tab-dropdown-item-close {\n  background-color: transparent;\n  border: none;\n  padding: 10px;\n}\n\n.sky-tab-dropdown-item-selected {\n  background-color: #007ca6;\n}\n\n.sky-tab-dropdown-item-selected:hover {\n  background-color: #007ca6;\n}\n\n.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-btn,\n.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-close {\n  color: #fff;\n}\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":"<div class=\"sky-tab-dropdown\">\n  <sky-dropdown buttonType=\"tab\">\n    <sky-dropdown-button>\n      {{ activeTabHeading }}\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item\n        *ngFor=\"let tab of tabs\">\n        <div\n          class=\"sky-tab-dropdown-item\"\n          [ngClass]=\"{ 'sky-tab-dropdown-item-selected': tab.active }\">\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            {{ 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            <i class=\"fa fa-remove\"></i>\n          </button>\n        </div>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n","styles":[".sky-tab-dropdown ::ng-deep .sky-dropdown-item {\n  margin: 0;\n}\n\n.sky-tab-dropdown-button {\n  max-width: 300px;\n}\n\n.sky-tab-dropdown-item {\n  display: flex;\n  padding: 0;\n  transition: background-color 150ms;\n  min-width: 300px;\n}\n\n.sky-tab-dropdown-item:hover:not(.sky-tab-dropdown-item-selected) {\n  background-color: #eeeeef;\n}\n\n.sky-tab-dropdown-item-btn {\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  flex-grow: 1;\n  padding: 10px;\n  text-align: left;\n}\n\n.sky-tab-dropdown-item-close {\n  background-color: transparent;\n  border: none;\n  padding: 10px;\n}\n\n.sky-tab-dropdown-item-selected {\n  background-color: #007ca6;\n}\n\n.sky-tab-dropdown-item-selected:hover {\n  background-color: #007ca6;\n}\n\n.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-btn,\n.sky-tab-dropdown-item-selected .sky-tab-dropdown-item-close {\n  color: #fff;\n}\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"}]}}}}]