@blackbaud/skyux/dist/modules/list-toolbar/list-toolbar.component.metadata.json

SKY UX built on Angular 2

[{"__symbolic":"module","version":3,"metadata":{"SkyListToolbarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-list-toolbar","template":"<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item  *ngFor=\"let item of leftTemplates | async\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates | async\"\n        [attr.sky-toolbar-id]=\"item.id\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <ng-content></ng-content>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n    *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\">\n      <ng-content select=\"sky-list-filter-summary\"></ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <div class=\"sky-list-toolbar-search\" *ngIf=\"(type | async) === 'search'\">\n    <sky-toolbar>\n      <sky-toolbar-section>\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            [template]=\"search\" sky-cmp-id=\"search\">\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!(hasAdditionalToolbarSection | async)\">\n        <sky-toolbar-item  *ngFor=\"let item of leftTemplates | async\">\n          <sky-list-toolbar-item-renderer\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates | async\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\">\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div *ngIf=\"hasInlineFilters && inlineFilterBarExpanded\">\n    <ng-content select=\"sky-list-filter-inline\"></ng-content>\n  </div>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\">\n    <sky-search\n      #searchComponent\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n      [placeholderText]=\"placeholder\">\n    </sky-search>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    class=\"sky-toolbar-item-sort-container\"\n    *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\">\n    <sky-sort>\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\">\n        {{item.sort.text}}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n    [active]=\"hasAppliedFilters | async\">\n  </sky-filter-button>\n</ng-template>\n","styles":[".sky-list-toolbar-search /deep/ .sky-toolbar-container,.sky-list-toolbar-search /deep/ .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-container /deep/ sky-toolbar-item[sky-toolbar-id=\"sort-selector\"] .sky-toolbar-item{margin-right:0}.sky-toolbar-item-sort-container{margin-right:5px}\n"],"providers":[{"__symbolic":"reference","module":"./state","name":"ListToolbarState"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateModel"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchComponent"]}]}],"sortSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toolbarType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toolbarItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-item.component","name":"SkyListToolbarItemComponent"}]}]}],"toolbarSorts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-sort.component","name":"SkyListToolbarSortComponent"}]}]}],"filterSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../list-filters","name":"SkyListFilterSummaryComponent"}]}]}],"inlineFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../list-filters","name":"SkyListFilterInlineComponent"}]}]}],"searchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["search"]}]}],"sortSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sortSelector"]}]}],"inlineFilterButtonTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inlineFilterButton"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../list/state","name":"ListState"},{"__symbolic":"reference","module":"../list/state","name":"ListStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"ListToolbarState"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateDispatcher"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"setSort":[{"__symbolic":"method"}],"inlineFilterButtonClick":[{"__symbolic":"method"}],"updateSearchText":[{"__symbolic":"method"}],"itemIsInView":[{"__symbolic":"method"}],"getSortSelectors":[{"__symbolic":"method"}],"getLeftTemplates":[{"__symbolic":"method"}],"getCenterTemplates":[{"__symbolic":"method"}],"getRightTemplates":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyListToolbarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-list-toolbar","template":"<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item  *ngFor=\"let item of leftTemplates | async\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates | async\"\n        [attr.sky-toolbar-id]=\"item.id\">\n        <sky-list-toolbar-item-renderer\n          [template]=\"item.template\"\n          [attr.sky-cmp-id]=\"item.id\">\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <ng-content></ng-content>\n    </sky-toolbar-section>\n    <sky-toolbar-section\n    *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\">\n      <ng-content select=\"sky-list-filter-summary\"></ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n  <div class=\"sky-list-toolbar-search\" *ngIf=\"(type | async) === 'search'\">\n    <sky-toolbar>\n      <sky-toolbar-section>\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            [template]=\"search\" sky-cmp-id=\"search\">\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!(hasAdditionalToolbarSection | async)\">\n        <sky-toolbar-item  *ngFor=\"let item of leftTemplates | async\">\n          <sky-list-toolbar-item-renderer\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates | async\">\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\"></sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates | async\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            [template]=\"item.template\"\n            [attr.sky-cmp-id]=\"item.id\">\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div *ngIf=\"hasInlineFilters && inlineFilterBarExpanded\">\n    <ng-content select=\"sky-list-filter-inline\"></ng-content>\n  </div>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\">\n    <sky-search\n      #searchComponent\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n      [placeholderText]=\"placeholder\">\n    </sky-search>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    class=\"sky-toolbar-item-sort-container\"\n    *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\">\n    <sky-sort>\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\">\n        {{item.sort.text}}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n    [active]=\"hasAppliedFilters | async\">\n  </sky-filter-button>\n</ng-template>\n","styles":[".sky-list-toolbar-search /deep/ .sky-toolbar-container,.sky-list-toolbar-search /deep/ .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-container /deep/ sky-toolbar-item[sky-toolbar-id=\"sort-selector\"] .sky-toolbar-item{margin-right:0}.sky-toolbar-item-sort-container{margin-right:5px}\n"],"providers":[{"__symbolic":"reference","module":"./state","name":"ListToolbarState"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateModel"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["searchComponent"]}]}],"sortSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toolbarType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"toolbarItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-item.component","name":"SkyListToolbarItemComponent"}]}]}],"toolbarSorts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-sort.component","name":"SkyListToolbarSortComponent"}]}]}],"filterSummary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../list-filters","name":"SkyListFilterSummaryComponent"}]}]}],"inlineFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"../list-filters","name":"SkyListFilterInlineComponent"}]}]}],"searchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["search"]}]}],"sortSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sortSelector"]}]}],"inlineFilterButtonTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["inlineFilterButton"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../list/state","name":"ListState"},{"__symbolic":"reference","module":"../list/state","name":"ListStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"ListToolbarState"},{"__symbolic":"reference","module":"./state","name":"ListToolbarStateDispatcher"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"setSort":[{"__symbolic":"method"}],"inlineFilterButtonClick":[{"__symbolic":"method"}],"updateSearchText":[{"__symbolic":"method"}],"itemIsInView":[{"__symbolic":"method"}],"getSortSelectors":[{"__symbolic":"method"}],"getLeftTemplates":[{"__symbolic":"method"}],"getCenterTemplates":[{"__symbolic":"method"}],"getRightTemplates":[{"__symbolic":"method"}]}}}}]