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

SKY UX built on Angular 2

[{"__symbolic":"module","version":3,"metadata":{"SkyCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-card","styles":[".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color 150ms;vertical-align:top;width:350px;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3)}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color 150ms}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:normal;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed;margin:0;line-height:1.42857}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:normal;margin:0;padding:10px;overflow:hidden}.sky-card-actions{border-top:1px solid #e2e3e4;bottom:0;flex-shrink:0;padding:7px 0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"],"template":"<section class=\"sky-card\"\n    [ngClass]=\"\n      {\n        'sky-card-small': size === 'small',\n        'sky-card-selectable': selectable,\n        'sky-card-selected': selectable &amp;&amp; selected\n      }\n\">\n  <header>\n\n    <div (click)=\"contentClick()\" class=\"sky-card-header\" *ngIf=\"selectable || showTitle\">\n      <div class=\"sky-card-heading-middle\">\n        <h1 class=\"sky-card-title\" *ngIf=\"showTitle\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div class=\"sky-card-check\" *ngIf=\"selectable\">\n        <sky-checkbox\n          (click)=\"$event.stopPropagation()\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"contentClick()\"\n          [label]=\"'card_checkbox_label' | skyResources\"\n          ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div class=\"sky-card-content\" (click)=\"contentClick()\">\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div class=\"sky-card-actions\" [hidden]=\"actionsEl.children.length === 0\" #actionsEl>\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n"}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"titleComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./card-title.component","name":"SkyCardTitleComponent"}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"contentClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-card","styles":[".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color 150ms;vertical-align:top;width:350px;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3)}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color 150ms}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:normal;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed;margin:0;line-height:1.42857}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:normal;margin:0;padding:10px;overflow:hidden}.sky-card-actions{border-top:1px solid #e2e3e4;bottom:0;flex-shrink:0;padding:7px 0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"],"template":"<section class=\"sky-card\"\n    [ngClass]=\"\n      {\n        'sky-card-small': size === 'small',\n        'sky-card-selectable': selectable,\n        'sky-card-selected': selectable &amp;&amp; selected\n      }\n\">\n  <header>\n\n    <div (click)=\"contentClick()\" class=\"sky-card-header\" *ngIf=\"selectable || showTitle\">\n      <div class=\"sky-card-heading-middle\">\n        <h1 class=\"sky-card-title\" *ngIf=\"showTitle\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div class=\"sky-card-check\" *ngIf=\"selectable\">\n        <sky-checkbox\n          (click)=\"$event.stopPropagation()\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"contentClick()\"\n          [label]=\"'card_checkbox_label' | skyResources\"\n          ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div class=\"sky-card-content\" (click)=\"contentClick()\">\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div class=\"sky-card-actions\" [hidden]=\"actionsEl.children.length === 0\" #actionsEl>\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n"}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"titleComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./card-title.component","name":"SkyCardTitleComponent"}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"contentClick":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]