[{"__symbolic":"module","version":3,"metadata":{"SkyContribListToolbarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-list-toolbar","template":"<ng-content></ng-content>\n\n<div>\n  <!-- Standard Toolbar or... -->\n  <div class=\"standard\" *ngIf=\"type === 'standard'\">\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (leftTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (centerTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (rightTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n  </div>\n\n  <!-- ... Search Toolbar; pick one -->\n  <div class=\"search\" *ngIf=\"type === 'search'\">\n    <div class=\"primary-bar\">\n      <sky-contrib-list-toolbar-item-renderer\n        [template]=\"search\"\n        cmp-id=\"search\"\n      ></sky-contrib-list-toolbar-item-renderer>\n    </div>\n\n    <div class=\"standard\">\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (leftTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (centerTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (rightTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n    </div>\n  </div>\n\n  <!-- ==== Reusable templates ==== -->\n  <ng-template #sortSelector>\n    <sky-dropdown\n      *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\"\n      title=\" {{ localizations.listToolbarSortButtonMouseover }}\"\n    >\n      <sky-dropdown-button buttonType=\"select\">\n        <i class=\"fa fa-lg fa-sort\"></i> {{ localizations.listToolbarSortButtonLabel }}\n      </sky-dropdown-button>\n\n      <sky-dropdown-menu>\n        <div *ngFor=\"let item of (sortSelectors | async); trackBy: trackByIndex\">\n          <sky-dropdown-item [class.selected]=\"item.selected\" [attr.cmp-id]=\"item.sort.fieldSelector + '_asc'\">\n            <button type=\"button\" (click)=\"setSort(item.sort, false)\">\n              {{ item.sort.text }} ({{\n                item.sort.fieldType == 'string'\n                  ? 'A-Z'\n                  : item.sort.fieldType == 'date'\n                  ? 'newest first'\n                  : item.sort.fieldType == 'number'\n                  ? 'lowest first'\n                  : 'ascending'\n              }})\n            </button>\n          </sky-dropdown-item>\n          <sky-dropdown-item [class.selected]=\"item.selectedDesc\" [attr.cmp-id]=\"item.sort.fieldSelector + '_desc'\">\n            <button type=\"button\" (click)=\"setSort(item.sort, true)\">\n              {{ item.sort.text }} ({{\n                item.sort.fieldType == 'string'\n                  ? 'Z-A'\n                  : item.sort.fieldType == 'date'\n                  ? 'oldest first'\n                  : item.sort.fieldType == 'number'\n                  ? 'highest first'\n                  : 'descending'\n              }})\n            </button>\n          </sky-dropdown-item>\n        </div>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </ng-template>\n\n  <ng-template #viewSelector>\n    <sky-dropdown\n      *ngIf=\"(isViewSelectorEnabled | async) && (views | async).length > 1\"\n      title=\"{{ localizations.listToolbarViewButtonMouseover }}\"\n    >\n      <sky-dropdown-button buttonType=\"select\">\n        <i class=\"fa fa-lg fa-table\"></i>\n        {{ localizations.listToolbarViewButtonLabel }}</sky-dropdown-button\n      >\n\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let item of (views | async); trackBy: trackById\"\n          [ngClass]=\"{ selected: (activeView | async) == item.id }\"\n          [attr.cmp-id]=\"item.id\"\n        >\n          <button type=\"button\" (click)=\"setActiveView(item)\">{{ item.name }}</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </ng-template>\n\n  <ng-template #search>\n    <div *ngIf=\"(isSearchEnabled | async)\" class=\"toolbar-item-container\">\n      <input\n        #searchBox\n        (keyup.enter)=\"updateSearchText(searchBox.value)\"\n        type=\"text\"\n        value=\"{{ searchText | async }}\"\n        placeholder=\"{{ placeholder }}\"\n      />\n      <button\n        cmp-id=\"search\"\n        type=\"button\"\n        title=\"{{ localizations.listToolbarSearchButtonMouseover }}\"\n        (click)=\"updateSearchText(searchBox.value)\"\n      >\n        <i class=\"fa fa-lg fa-search\"></i>\n      </button>\n    </div>\n  </ng-template>\n</div>\n","styles":[":host{display:block;width:100%}:host /deep/ sky-dropdown-button+i.fa-caret-down{display:none}:host /deep/ sky-dropdown-item{white-space:nowrap;overflow:hidden;text-overflow:ellipse}:host /deep/ sky-dropdown-item.selected .sky-dropdown-item{background-color:#eeeffb}:host /deep/ .standard,:host /deep/ .search{min-height:46px}:host /deep/ .standard{display:flex;flex-wrap:wrap;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:6px 6px 0 6px}:host /deep/ .standard sky-contrib-list-toolbar-item-renderer>a{display:inline-block;padding-top:6px}:host /deep/ .search{background-color:#eee}:host /deep/ .search .primary-bar{width:100%;display:block;min-height:46px;padding:7px}:host /deep/ .search .primary-bar sky-contrib-list-toolbar-item-renderer{width:100%}:host /deep/ .search .primary-bar sky-contrib-list-toolbar-item-renderer .toolbar-item-container>input{width:100%}:host /deep/ .search .secondary-bar{width:100%;display:inline-block;border-top:1px solid #ccc;padding:6px 10px;padding-bottom:2px}\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":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}}]}],"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sortSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTextInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["searchText"]}]}],"toolbarItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-item.component","name":"SkyContribListToolbarItemComponent"}]}]}],"toolbarSorts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-sort.component","name":"SkyContribListToolbarSortComponent"}]}]}],"searchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["search"]}]}],"viewSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["viewSelector"]}]}],"sortSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sortSelector"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../locale/locale.service","name":"SkyContribLocaleService"},{"__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"}],"setActiveView":[{"__symbolic":"method"}],"setSort":[{"__symbolic":"method"}],"trackByIndex":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}],"updateSearchText":[{"__symbolic":"method"}],"getTemplates":[{"__symbolic":"method"}],"setupToolbarButtons":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyContribListToolbarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-list-toolbar","template":"<ng-content></ng-content>\n\n<div>\n  <!-- Standard Toolbar or... -->\n  <div class=\"standard\" *ngIf=\"type === 'standard'\">\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (leftTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (centerTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n\n    <sky-contrib-list-toolbar-item-renderer\n      *ngFor=\"let item of (rightTemplates | async); trackBy: trackById\"\n      [template]=\"item.template\"\n      [attr.cmp-id]=\"item.id\"\n    ></sky-contrib-list-toolbar-item-renderer>\n  </div>\n\n  <!-- ... Search Toolbar; pick one -->\n  <div class=\"search\" *ngIf=\"type === 'search'\">\n    <div class=\"primary-bar\">\n      <sky-contrib-list-toolbar-item-renderer\n        [template]=\"search\"\n        cmp-id=\"search\"\n      ></sky-contrib-list-toolbar-item-renderer>\n    </div>\n\n    <div class=\"standard\">\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (leftTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (centerTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n      <sky-contrib-list-toolbar-item-renderer\n        *ngFor=\"let item of (rightTemplates | async)\"\n        [template]=\"item.template\"\n        [attr.cmp-id]=\"item.id\"\n      ></sky-contrib-list-toolbar-item-renderer>\n    </div>\n  </div>\n\n  <!-- ==== Reusable templates ==== -->\n  <ng-template #sortSelector>\n    <sky-dropdown\n      *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\"\n      title=\" {{ localizations.listToolbarSortButtonMouseover }}\"\n    >\n      <sky-dropdown-button buttonType=\"select\">\n        <i class=\"fa fa-lg fa-sort\"></i> {{ localizations.listToolbarSortButtonLabel }}\n      </sky-dropdown-button>\n\n      <sky-dropdown-menu>\n        <div *ngFor=\"let item of (sortSelectors | async); trackBy: trackByIndex\">\n          <sky-dropdown-item [class.selected]=\"item.selected\" [attr.cmp-id]=\"item.sort.fieldSelector + '_asc'\">\n            <button type=\"button\" (click)=\"setSort(item.sort, false)\">\n              {{ item.sort.text }} ({{\n                item.sort.fieldType == 'string'\n                  ? 'A-Z'\n                  : item.sort.fieldType == 'date'\n                  ? 'newest first'\n                  : item.sort.fieldType == 'number'\n                  ? 'lowest first'\n                  : 'ascending'\n              }})\n            </button>\n          </sky-dropdown-item>\n          <sky-dropdown-item [class.selected]=\"item.selectedDesc\" [attr.cmp-id]=\"item.sort.fieldSelector + '_desc'\">\n            <button type=\"button\" (click)=\"setSort(item.sort, true)\">\n              {{ item.sort.text }} ({{\n                item.sort.fieldType == 'string'\n                  ? 'Z-A'\n                  : item.sort.fieldType == 'date'\n                  ? 'oldest first'\n                  : item.sort.fieldType == 'number'\n                  ? 'highest first'\n                  : 'descending'\n              }})\n            </button>\n          </sky-dropdown-item>\n        </div>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </ng-template>\n\n  <ng-template #viewSelector>\n    <sky-dropdown\n      *ngIf=\"(isViewSelectorEnabled | async) && (views | async).length > 1\"\n      title=\"{{ localizations.listToolbarViewButtonMouseover }}\"\n    >\n      <sky-dropdown-button buttonType=\"select\">\n        <i class=\"fa fa-lg fa-table\"></i>\n        {{ localizations.listToolbarViewButtonLabel }}</sky-dropdown-button\n      >\n\n      <sky-dropdown-menu>\n        <sky-dropdown-item\n          *ngFor=\"let item of (views | async); trackBy: trackById\"\n          [ngClass]=\"{ selected: (activeView | async) == item.id }\"\n          [attr.cmp-id]=\"item.id\"\n        >\n          <button type=\"button\" (click)=\"setActiveView(item)\">{{ item.name }}</button>\n        </sky-dropdown-item>\n      </sky-dropdown-menu>\n    </sky-dropdown>\n  </ng-template>\n\n  <ng-template #search>\n    <div *ngIf=\"(isSearchEnabled | async)\" class=\"toolbar-item-container\">\n      <input\n        #searchBox\n        (keyup.enter)=\"updateSearchText(searchBox.value)\"\n        type=\"text\"\n        value=\"{{ searchText | async }}\"\n        placeholder=\"{{ placeholder }}\"\n      />\n      <button\n        cmp-id=\"search\"\n        type=\"button\"\n        title=\"{{ localizations.listToolbarSearchButtonMouseover }}\"\n        (click)=\"updateSearchText(searchBox.value)\"\n      >\n        <i class=\"fa fa-lg fa-search\"></i>\n      </button>\n    </div>\n  </ng-template>\n</div>\n","styles":[":host{display:block;width:100%}:host /deep/ sky-dropdown-button+i.fa-caret-down{display:none}:host /deep/ sky-dropdown-item{white-space:nowrap;overflow:hidden;text-overflow:ellipse}:host /deep/ sky-dropdown-item.selected .sky-dropdown-item{background-color:#eeeffb}:host /deep/ .standard,:host /deep/ .search{min-height:46px}:host /deep/ .standard{display:flex;flex-wrap:wrap;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:6px 6px 0 6px}:host /deep/ .standard sky-contrib-list-toolbar-item-renderer>a{display:inline-block;padding-top:6px}:host /deep/ .search{background-color:#eee}:host /deep/ .search .primary-bar{width:100%;display:block;min-height:46px;padding:7px}:host /deep/ .search .primary-bar sky-contrib-list-toolbar-item-renderer{width:100%}:host /deep/ .search .primary-bar sky-contrib-list-toolbar-item-renderer .toolbar-item-container>input{width:100%}:host /deep/ .search .secondary-bar{width:100%;display:inline-block;border-top:1px solid #ccc;padding:6px 10px;padding-bottom:2px}\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":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"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"}}]}],"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"viewSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sortSelectorEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchTextInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["searchText"]}]}],"toolbarItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-item.component","name":"SkyContribListToolbarItemComponent"}]}]}],"toolbarSorts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-toolbar-sort.component","name":"SkyContribListToolbarSortComponent"}]}]}],"searchTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["search"]}]}],"viewSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["viewSelector"]}]}],"sortSelectorTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["sortSelector"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../locale/locale.service","name":"SkyContribLocaleService"},{"__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"}],"setActiveView":[{"__symbolic":"method"}],"setSort":[{"__symbolic":"method"}],"trackByIndex":[{"__symbolic":"method"}],"trackById":[{"__symbolic":"method"}],"updateSearchText":[{"__symbolic":"method"}],"getTemplates":[{"__symbolic":"method"}],"setupToolbarButtons":[{"__symbolic":"method"}]}}}}]