[{"__symbolic":"module","version":3,"metadata":{"SkyDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-dropdown","template":"<div class=\"sky-dropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-dropdown-button\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    [attr.aria-label]=\"label\"\n    [attr.title]=\"title\"\n    [skyPopover]=\"popover\"\n    [skyPopoverTrigger]=\"getPopoverTriggerType()\"\n    [skyPopoverAlignment]=\"alignment\"\n    skyPopoverPlacement=\"below\"\n    #triggerButton>\n\n    <div [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <i class=\"fa fa-ellipsis-h\"></i>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          class=\"sky-dropdown-button-container\"\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\">\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content\n              select=\"sky-dropdown-button\">\n            </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <i class=\"fa fa-caret-down sky-dropdown-caret\"></i>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\">\n          <i\n            class=\"fa fa-lg\"\n            [ngClass]=\"['fa-' + buttonType]\"></i>\n        </div>\n      </ng-template>\n    </div>\n  </button>\n  <sky-popover\n    placement=\"below\"\n    [alignment]=\"alignment\"\n    [dismissOnBlur]=\"dismissOnBlur\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    (popoverClosed)=\"onPopoverClosed()\"\n    [@.disabled]=\"true\"\n    #popover>\n    <ng-content\n      select=\"sky-dropdown-menu\">\n    </ng-content>\n  </sky-popover>\n</div>\n","styles":[".sky-dropdown ::ng-deep .sky-popover-container {\n  padding: 0;\n  min-width: auto;\n  max-width: none;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover {\n  border-radius: 0 !important;\n  border: 0 !important;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover-body {\n  padding: 0;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover-arrow {\n  display: none;\n}\n\n.sky-dropdown-button-type-tab {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px 4px 0 0;\n  color: #686c73;\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 600;\n  line-height: 1.8;\n  padding: 8px 16px;\n  background-color: #007ca6;\n  color: #fff;\n  max-width: 100%;\n}\n\n.sky-dropdown-button-type-tab:hover {\n  background-color: #eeeeef;\n  color: #282b31;\n  text-decoration: none;\n}\n\n.sky-dropdown-button-type-tab:hover {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-dropdown-button-type-context-menu {\n  border-radius: 50%;\n  padding-bottom: 3px;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 3px;\n}\n\n.sky-dropdown-caret {\n  margin-left: 10px;\n}\n\n.sky-dropdown-button-container {\n  display: flex;\n}\n\n.sky-dropdown-button-content-container {\n  flex-shrink: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sky-dropdown-button-icon-container {\n  flex-grow: 1;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"alignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"buttonStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"buttonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dismissOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"messageStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"title":[{"__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"}}]}],"triggerButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["triggerButton"]}]}],"popover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../popover","name":"SkyPopoverComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../window","name":"SkyWindowRefService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onPopoverOpened":[{"__symbolic":"method"}],"onPopoverClosed":[{"__symbolic":"method"}],"getPopoverTriggerType":[{"__symbolic":"method"}],"handleIncomingMessages":[{"__symbolic":"method"}],"sendMessage":[{"__symbolic":"method"}],"positionPopover":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-dropdown","template":"<div class=\"sky-dropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn sky-dropdown-button\"\n    [ngClass]=\"[\n      'sky-dropdown-button-type-' + buttonType,\n      'sky-btn-' + buttonStyle\n    ]\"\n    [attr.aria-label]=\"label\"\n    [attr.title]=\"title\"\n    [skyPopover]=\"popover\"\n    [skyPopoverTrigger]=\"getPopoverTriggerType()\"\n    [skyPopoverAlignment]=\"alignment\"\n    skyPopoverPlacement=\"below\"\n    #triggerButton>\n\n    <div [ngSwitch]=\"buttonType\">\n      <ng-template ngSwitchCase=\"context-menu\">\n        <i class=\"fa fa-ellipsis-h\"></i>\n      </ng-template>\n\n      <ng-template ngSwitchDefault>\n        <div\n          class=\"sky-dropdown-button-container\"\n          *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\">\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content\n              select=\"sky-dropdown-button\">\n            </ng-content>\n          </div>\n          <div class=\"sky-dropdown-button-icon-container\">\n            <i class=\"fa fa-caret-down sky-dropdown-caret\"></i>\n          </div>\n        </div>\n        <div\n          *ngIf=\"buttonType !== 'select' && buttonType !== 'tab' && buttonType\">\n          <i\n            class=\"fa fa-lg\"\n            [ngClass]=\"['fa-' + buttonType]\"></i>\n        </div>\n      </ng-template>\n    </div>\n  </button>\n  <sky-popover\n    placement=\"below\"\n    [alignment]=\"alignment\"\n    [dismissOnBlur]=\"dismissOnBlur\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    (popoverClosed)=\"onPopoverClosed()\"\n    [@.disabled]=\"true\"\n    #popover>\n    <ng-content\n      select=\"sky-dropdown-menu\">\n    </ng-content>\n  </sky-popover>\n</div>\n","styles":[".sky-dropdown ::ng-deep .sky-popover-container {\n  padding: 0;\n  min-width: auto;\n  max-width: none;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover {\n  border-radius: 0 !important;\n  border: 0 !important;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover-body {\n  padding: 0;\n}\n\n.sky-dropdown ::ng-deep .sky-popover-container .sky-popover-arrow {\n  display: none;\n}\n\n.sky-dropdown-button-type-tab {\n  background-color: transparent;\n  border: none;\n  border-radius: 4px 4px 0 0;\n  color: #686c73;\n  cursor: pointer;\n  display: inline-block;\n  font-weight: 600;\n  line-height: 1.8;\n  padding: 8px 16px;\n  background-color: #007ca6;\n  color: #fff;\n  max-width: 100%;\n}\n\n.sky-dropdown-button-type-tab:hover {\n  background-color: #eeeeef;\n  color: #282b31;\n  text-decoration: none;\n}\n\n.sky-dropdown-button-type-tab:hover {\n  background-color: #007ca6;\n  color: #fff;\n}\n\n.sky-dropdown-button-type-context-menu {\n  border-radius: 50%;\n  padding-bottom: 3px;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 3px;\n}\n\n.sky-dropdown-caret {\n  margin-left: 10px;\n}\n\n.sky-dropdown-button-container {\n  display: flex;\n}\n\n.sky-dropdown-button-content-container {\n  flex-shrink: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sky-dropdown-button-icon-container {\n  flex-grow: 1;\n}\n"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"alignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"buttonStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"buttonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dismissOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"messageStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"title":[{"__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"}}]}],"triggerButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["triggerButton"]}]}],"popover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../popover","name":"SkyPopoverComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../window","name":"SkyWindowRefService"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onPopoverOpened":[{"__symbolic":"method"}],"onPopoverClosed":[{"__symbolic":"method"}],"getPopoverTriggerType":[{"__symbolic":"method"}],"handleIncomingMessages":[{"__symbolic":"method"}],"sendMessage":[{"__symbolic":"method"}],"positionPopover":[{"__symbolic":"method"}]}}}}]