@blackbaud/skyux
Version:
SKY UX built on Angular 2
47 lines • 4.2 kB
JavaScript
import { Component, EventEmitter, Input, Output, ContentChildren } from '@angular/core';
import { SkyCardTitleComponent } from './card-title.component';
var SkyCardComponent = (function () {
function SkyCardComponent() {
this.selectedChange = new EventEmitter();
this.showTitle = true;
}
SkyCardComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.showTitle = this.titleComponent.length > 0;
this.subscription = this.titleComponent.changes.subscribe(function () {
_this.showTitle = _this.titleComponent.length > 0;
});
};
SkyCardComponent.prototype.contentClick = function () {
if (this.selectable) {
this.selected = !this.selected;
this.selectedChange.emit(this.selected);
}
};
SkyCardComponent.prototype.ngOnDestroy = function () {
/* istanbul ignore else */
/* sanity check */
if (this.subscription) {
this.subscription.unsubscribe();
}
};
return SkyCardComponent;
}());
export { SkyCardComponent };
SkyCardComponent.decorators = [
{ type: Component, args: [{
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 && 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"
},] },
];
/** @nocollapse */
SkyCardComponent.ctorParameters = function () { return []; };
SkyCardComponent.propDecorators = {
'size': [{ type: Input },],
'selectable': [{ type: Input },],
'selected': [{ type: Input },],
'selectedChange': [{ type: Output },],
'titleComponent': [{ type: ContentChildren, args: [SkyCardTitleComponent,] },],
};
//# sourceMappingURL=card.component.js.map