@blackbaud/skyux/dist/modules/tiles/tile/tile.component.metadata.json

SKY UX built on Angular 2

[{"__symbolic":"module","version":3,"metadata":{"SkyTileComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tile","styles":[".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-title{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed;margin:0;padding:10px 15px}.sky-tile-summary{color:#282b31;font-weight:400;font-size:22px;font-stretch:condensed;color:#007ca6;opacity:0;padding-right:15px;transition:opacity 250ms;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{flex-shrink:0}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host /deep/ .sky-tile-tools .sky-chevron{margin:12px 9px 12px 0}.sky-tile-settings{color:#D1DADE;height:24px;margin:12px 9px 12px 0;padding:0;background-color:transparent;border:none;width:24px}.sky-tile-grab-handle{color:#E7EAEC;cursor:move;cursor:-webkit-grab;cursor:-moz-grab;font-size:15px;padding:15px 15px 15px 0}\n"],"template":"<section\n    class=\"sky-tile\"\n    [ngClass]=\"{\n      'sky-tile-collapsed': isCollapsed\n    }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <h1 class=\"sky-tile-title\">\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </h1>\n      <div class=\"sky-tile-summary\">\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <sky-chevron\n            [direction]=\"isCollapsed ? 'down' : 'up'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n            type=\"button\"\n            *ngIf=\"hasSettings\"\n            class=\"sky-tile-settings fa fa-cog\"\n            [attr.aria-label]=\"'tile_settings' | skyResources\"\n            (click)=\"settingsButtonClicked();\"\n        >\n        </button>\n        <i\n            class=\"sky-tile-grab-handle fa fa-th\"\n            *ngIf=\"isInDashboardColumn\"\n        >\n        </i>\n      </div>\n    </div>\n  </header>\n  <div class=\"sky-tile-content\" [@slide]=\"isCollapsed ? 'up' : 'down'\">\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["slide",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["down",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"hidden","height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["up",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"hidden","height":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up <=> down",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms ease-in"]}]}]]}]}]}],"members":{"settingsClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"collapsedStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"isCollapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settingsButtonClicked":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"../tile-dashboard/tile-dashboard.service","name":"SkyTileDashboardService"}]}],"titleClick":[{"__symbolic":"method"}],"chevronDirectionChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"slideForCollapsed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyTileComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-tile","styles":[".sky-tile{background-color:#fff;margin-bottom:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-title{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed;margin:0;padding:10px 15px}.sky-tile-summary{color:#282b31;font-weight:400;font-size:22px;font-stretch:condensed;color:#007ca6;opacity:0;padding-right:15px;transition:opacity 250ms;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{opacity:1}.sky-tile-header-column-tools{flex-shrink:0}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host /deep/ .sky-tile-tools .sky-chevron{margin:12px 9px 12px 0}.sky-tile-settings{color:#D1DADE;height:24px;margin:12px 9px 12px 0;padding:0;background-color:transparent;border:none;width:24px}.sky-tile-grab-handle{color:#E7EAEC;cursor:move;cursor:-webkit-grab;cursor:-moz-grab;font-size:15px;padding:15px 15px 15px 0}\n"],"template":"<section\n    class=\"sky-tile\"\n    [ngClass]=\"{\n      'sky-tile-collapsed': isCollapsed\n    }\"\n>\n  <header class=\"sky-tile-header\">\n    <div class=\"sky-tile-header-content\" (click)=\"titleClick()\">\n      <h1 class=\"sky-tile-title\">\n        <ng-content select=\"sky-tile-title\"></ng-content>\n      </h1>\n      <div class=\"sky-tile-summary\">\n        <ng-content select=\"sky-tile-summary\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-tile-header-column-tools\">\n      <div class=\"sky-tile-tools\">\n        <sky-chevron\n            [direction]=\"isCollapsed ? 'down' : 'up'\"\n            (directionChange)=\"chevronDirectionChange($event)\"\n        >\n        </sky-chevron>\n        <button\n            type=\"button\"\n            *ngIf=\"hasSettings\"\n            class=\"sky-tile-settings fa fa-cog\"\n            [attr.aria-label]=\"'tile_settings' | skyResources\"\n            (click)=\"settingsButtonClicked();\"\n        >\n        </button>\n        <i\n            class=\"sky-tile-grab-handle fa fa-th\"\n            *ngIf=\"isInDashboardColumn\"\n        >\n        </i>\n      </div>\n    </div>\n  </header>\n  <div class=\"sky-tile-content\" [@slide]=\"isCollapsed ? 'up' : 'down'\">\n    <ng-content select=\"sky-tile-content\"></ng-content>\n  </div>\n</section>\n","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["slide",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["down",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"hidden","height":"*"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["up",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"hidden","height":0}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up <=> down",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["150ms ease-in"]}]}]]}]}]}],"members":{"settingsClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"collapsedStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"isCollapsed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"settingsButtonClicked":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"../tile-dashboard/tile-dashboard.service","name":"SkyTileDashboardService"}]}],"titleClick":[{"__symbolic":"method"}],"chevronDirectionChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"slideForCollapsed":[{"__symbolic":"method"}]}}}}]