@blackbaud/skyux/dist/modules/dropdown/dropdown.component.metadata.json

SKY UX built on Angular 2

[{"__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\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <button\n      type=\"button\"\n      (click)=\"click()\"\n      class=\"sky-btn sky-dropdown-button\"\n      [ngClass]=\"[\n        'sky-dropdown-button-type-' + buttonType,\n        'sky-btn-' + buttonStyle\n      ]\"\n      (document:click)=\"windowClick()\"\n      [attr.aria-label]=\"label\"\n      [attr.title]=\"title\"\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 class=\"sky-dropdown-button-container\" *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\">\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"></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' &amp;&amp; buttonType !== 'tab' &amp;&amp; buttonType\">\n          <i\n            class=\"fa fa-lg\"\n            [ngClass]=\"['fa-' + buttonType]\"\n            ></i>\n        </div>\n\n      </ng-template>\n    </div>\n  </button>\n  <div class=\"sky-dropdown-menu\">\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</div>\n","styles":[".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#007ca6;color:#fff;max-width:100%}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#eeeeef;color:#282b31;text-decoration:none}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#007ca6;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding-bottom:3px;padding-left:6px;padding-right:6px;padding-top:2px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-menu{background-color:#fff;display:none;position:fixed;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);z-index:1000}.sky-dropdown-menu.sky-dropdown-open{display:block}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu /deep/ button{overflow:hidden;text-overflow:ellipsis}\n"],"providers":[{"__symbolic":"reference","module":"./dropdown-adapter.service","name":"SkyDropdownAdapterService"}]}]}],"members":{"buttonType":[{"__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"}}]}],"label":[{"__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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dropdown-adapter.service","name":"SkyDropdownAdapterService"},{"__symbolic":"reference","module":"../window","name":"SkyWindowRefService"}]}],"click":[{"__symbolic":"method"}],"resetDropdownPosition":[{"__symbolic":"method"}],"windowClick":[{"__symbolic":"method"}],"mouseEnter":[{"__symbolic":"method"}],"mouseLeave":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openMenu":[{"__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\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <button\n      type=\"button\"\n      (click)=\"click()\"\n      class=\"sky-btn sky-dropdown-button\"\n      [ngClass]=\"[\n        'sky-dropdown-button-type-' + buttonType,\n        'sky-btn-' + buttonStyle\n      ]\"\n      (document:click)=\"windowClick()\"\n      [attr.aria-label]=\"label\"\n      [attr.title]=\"title\"\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 class=\"sky-dropdown-button-container\" *ngIf=\"buttonType === 'select' || buttonType === 'tab' || !buttonType\">\n          <div class=\"sky-dropdown-button-content-container\">\n            <ng-content select=\"sky-dropdown-button\"></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' &amp;&amp; buttonType !== 'tab' &amp;&amp; buttonType\">\n          <i\n            class=\"fa fa-lg\"\n            [ngClass]=\"['fa-' + buttonType]\"\n            ></i>\n        </div>\n\n      </ng-template>\n    </div>\n  </button>\n  <div class=\"sky-dropdown-menu\">\n    <ng-content select=\"sky-dropdown-menu\"></ng-content>\n  </div>\n</div>\n","styles":[".sky-dropdown-button-type-tab{background-color:transparent;border:none;border-radius:4px 4px 0 0;color:#686c73;cursor:pointer;display:inline-block;font-weight:600;line-height:1.8;padding:8px 16px;background-color:#007ca6;color:#fff;max-width:100%}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#eeeeef;color:#282b31;text-decoration:none}.sky-dropdown-button-type-tab:hover,.sky-dropdown-button-type-tab:focus{background-color:#007ca6;color:#fff}.sky-dropdown-button-type-context-menu{border-radius:50%;padding-bottom:3px;padding-left:6px;padding-right:6px;padding-top:2px}.sky-dropdown-caret{margin-left:10px}.sky-dropdown-menu{background-color:#fff;display:none;position:fixed;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);z-index:1000}.sky-dropdown-menu.sky-dropdown-open{display:block}.sky-dropdown-button-container{display:flex}.sky-dropdown-button-content-container{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.sky-dropdown-button-icon-container{flex-grow:1}.sky-dropdown-menu /deep/ button{overflow:hidden;text-overflow:ellipsis}\n"],"providers":[{"__symbolic":"reference","module":"./dropdown-adapter.service","name":"SkyDropdownAdapterService"}]}]}],"members":{"buttonType":[{"__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"}}]}],"label":[{"__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"}}]}],"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"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./dropdown-adapter.service","name":"SkyDropdownAdapterService"},{"__symbolic":"reference","module":"../window","name":"SkyWindowRefService"}]}],"click":[{"__symbolic":"method"}],"resetDropdownPosition":[{"__symbolic":"method"}],"windowClick":[{"__symbolic":"method"}],"mouseEnter":[{"__symbolic":"method"}],"mouseLeave":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openMenu":[{"__symbolic":"method"}]}}}}]