@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
160 lines (157 loc) • 9.45 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
export class Card {
constructor() {
/**
* Callback for the primary action
*/
this.primaryFooterAction = new EventEmitter();
/**
* Callback for the secondary action
*/
this.secondaryFooterAction = new EventEmitter();
/**
* Callback for the card header action
*/
this.headerAction = new EventEmitter();
this.cardClass = true;
/**
* Set to `true` to display a loading card.
*/
this.skeleton = false;
/**
* Display footer state.
*/
this.showFooter = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.showFooter = this.primaryFooterAction.observers.length > 0;
}
/**
* Emits the cards primary footer action callback
* @param {?} $event
* @return {?}
*/
onPrimaryFooterAction($event) {
this.primaryFooterAction.emit($event);
}
/**
* Emits the cards secondary footer action callback
* @param {?} $event
* @return {?}
*/
onSecondaryFooterAction($event) {
this.secondaryFooterAction.emit($event);
}
/**
* Emits the cards header action callback
* @param {?} $event
* @return {?}
*/
onHeaderAction($event) {
this.headerAction.emit($event);
}
}
Card.decorators = [
{ type: Component, args: [{
selector: 'suka-card',
template: `
<suka-card-header
*ngIf="title"
(action)="onHeaderAction($event)"
[actionLabel]="headerActionLabel"
[skeleton]="skeleton"
>
{{title}}
</suka-card-header>
<suka-card-section
*ngIf='(sectioned !== false) else elseTpl'
>
<ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</suka-card-section>
<suka-card-footer
*ngIf='!skeleton && showFooter'
(primaryAction)="onPrimaryFooterAction($event)"
[primaryLabel]="primaryFooterActionLabel"
(secondaryAction)="onSecondaryFooterAction($event)"
[secondaryLabel]="secondaryFooterActionLabel"
>
</suka-card-footer>
<ng-template #elseTpl><ng-content></ng-content></ng-template>
`,
encapsulation: ViewEncapsulation.None
}] }
];
Card.propDecorators = {
title: [{ type: Input }],
sectioned: [{ type: Input }],
primaryFooterActionLabel: [{ type: Input }],
primaryFooterAction: [{ type: Output }],
secondaryFooterActionLabel: [{ type: Input }],
secondaryFooterAction: [{ type: Output }],
headerActionLabel: [{ type: Input }],
headerAction: [{ type: Output }],
cardClass: [{ type: HostBinding, args: ['class.card',] }],
skeleton: [{ type: Input }]
};
if (false) {
/**
* Title content for the card.
* @type {?}
*/
Card.prototype.title;
/**
* Set to `true` to auto-wrap content in section
* @type {?}
*/
Card.prototype.sectioned;
/**
* Primary action label.
* @type {?}
*/
Card.prototype.primaryFooterActionLabel;
/**
* Callback for the primary action
* @type {?}
*/
Card.prototype.primaryFooterAction;
/**
* Secondary action label.
* @type {?}
*/
Card.prototype.secondaryFooterActionLabel;
/**
* Callback for the secondary action
* @type {?}
*/
Card.prototype.secondaryFooterAction;
/**
* Card header action label
* @type {?}
*/
Card.prototype.headerActionLabel;
/**
* Callback for the card header action
* @type {?}
*/
Card.prototype.headerAction;
/** @type {?} */
Card.prototype.cardClass;
/**
* Set to `true` to display a loading card.
* @type {?}
*/
Card.prototype.skeleton;
/**
* Display footer state.
* @type {?}
*/
Card.prototype.showFooter;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvY2FyZC9jYXJkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsV0FBVyxFQUNYLE1BQU0sRUFDTixZQUFZLEVBRVosaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBaUN2QixNQUFNLE9BQU8sSUFBSTtJQS9CakI7Ozs7UUFpRFksd0JBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7OztRQVN6QywwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDOzs7O1FBVTNDLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVqQixjQUFTLEdBQUcsSUFBSSxDQUFDOzs7O1FBS25DLGFBQVEsR0FBRyxLQUFLLENBQUM7Ozs7UUFLMUIsZUFBVSxHQUFHLEtBQUssQ0FBQztJQTBCckIsQ0FBQzs7OztJQXhCUSxRQUFRO1FBQ2IsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsbUJBQW1CLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7SUFDbEUsQ0FBQzs7Ozs7O0lBS00scUJBQXFCLENBQUMsTUFBTTtRQUNqQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ3hDLENBQUM7Ozs7OztJQUtNLHVCQUF1QixDQUFDLE1BQU07UUFDbkMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMxQyxDQUFDOzs7Ozs7SUFLTSxjQUFjLENBQUMsTUFBTTtRQUMxQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNqQyxDQUFDOzs7WUF6R0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMEJUO2dCQUNELGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO2FBQ3RDOzs7b0JBS0UsS0FBSzt3QkFLTCxLQUFLO3VDQUtMLEtBQUs7a0NBSUwsTUFBTTt5Q0FLTixLQUFLO29DQUlMLE1BQU07Z0NBS04sS0FBSzsyQkFLTCxNQUFNO3dCQUVOLFdBQVcsU0FBQyxZQUFZO3VCQUt4QixLQUFLOzs7Ozs7O0lBeENOLHFCQUF1Qjs7Ozs7SUFLdkIseUJBQTRCOzs7OztJQUs1Qix3Q0FBMEM7Ozs7O0lBSTFDLG1DQUFtRDs7Ozs7SUFLbkQsMENBQTZDOzs7OztJQUk3QyxxQ0FBcUQ7Ozs7O0lBS3JELGlDQUFtQzs7Ozs7SUFLbkMsNEJBQTRDOztJQUU1Qyx5QkFBNEM7Ozs7O0lBSzVDLHdCQUEwQjs7Ozs7SUFLMUIsMEJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkluaXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWNhcmQnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxzdWthLWNhcmQtaGVhZGVyXG4gICAgICAqbmdJZj1cInRpdGxlXCJcbiAgICAgIChhY3Rpb24pPVwib25IZWFkZXJBY3Rpb24oJGV2ZW50KVwiXG4gICAgICBbYWN0aW9uTGFiZWxdPVwiaGVhZGVyQWN0aW9uTGFiZWxcIlxuICAgICAgW3NrZWxldG9uXT1cInNrZWxldG9uXCJcbiAgICA+XG4gICAgICB7e3RpdGxlfX1cbiAgICA8L3N1a2EtY2FyZC1oZWFkZXI+XG5cbiAgICA8c3VrYS1jYXJkLXNlY3Rpb25cbiAgICAgICpuZ0lmPScoc2VjdGlvbmVkICE9PSBmYWxzZSkgZWxzZSBlbHNlVHBsJ1xuICAgID5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJlbHNlVHBsXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9zdWthLWNhcmQtc2VjdGlvbj5cblxuICAgIDxzdWthLWNhcmQtZm9vdGVyXG4gICAgICAqbmdJZj0nIXNrZWxldG9uICYmIHNob3dGb290ZXInXG4gICAgICAocHJpbWFyeUFjdGlvbik9XCJvblByaW1hcnlGb290ZXJBY3Rpb24oJGV2ZW50KVwiXG4gICAgICBbcHJpbWFyeUxhYmVsXT1cInByaW1hcnlGb290ZXJBY3Rpb25MYWJlbFwiXG4gICAgICAoc2Vjb25kYXJ5QWN0aW9uKT1cIm9uU2Vjb25kYXJ5Rm9vdGVyQWN0aW9uKCRldmVudClcIlxuICAgICAgW3NlY29uZGFyeUxhYmVsXT1cInNlY29uZGFyeUZvb3RlckFjdGlvbkxhYmVsXCJcbiAgICA+XG4gICAgPC9zdWthLWNhcmQtZm9vdGVyPlxuXG4gICAgPG5nLXRlbXBsYXRlICNlbHNlVHBsPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L25nLXRlbXBsYXRlPlxuICBgLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxufSlcbmV4cG9ydCBjbGFzcyBDYXJkIGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIFRpdGxlIGNvbnRlbnQgZm9yIHRoZSBjYXJkLlxuICAgKi9cbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcblxuICAvKipcbiAgICogU2V0IHRvIGB0cnVlYCB0byBhdXRvLXdyYXAgY29udGVudCBpbiBzZWN0aW9uXG4gICAqL1xuICBASW5wdXQoKSBzZWN0aW9uZWQ6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFByaW1hcnkgYWN0aW9uIGxhYmVsLlxuICAgKi9cbiAgQElucHV0KCkgcHJpbWFyeUZvb3RlckFjdGlvbkxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayBmb3IgdGhlIHByaW1hcnkgYWN0aW9uXG4gICAqL1xuICBAT3V0cHV0KCkgcHJpbWFyeUZvb3RlckFjdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAvKipcbiAgICogU2Vjb25kYXJ5IGFjdGlvbiBsYWJlbC5cbiAgICovXG4gIEBJbnB1dCgpICBzZWNvbmRhcnlGb290ZXJBY3Rpb25MYWJlbDogc3RyaW5nO1xuICAvKipcbiAgICogQ2FsbGJhY2sgZm9yIHRoZSBzZWNvbmRhcnkgYWN0aW9uXG4gICAqL1xuICBAT3V0cHV0KCkgc2Vjb25kYXJ5Rm9vdGVyQWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBDYXJkIGhlYWRlciBhY3Rpb24gbGFiZWxcbiAgICovXG4gIEBJbnB1dCgpIGhlYWRlckFjdGlvbkxhYmVsOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIENhbGxiYWNrIGZvciB0aGUgY2FyZCBoZWFkZXIgYWN0aW9uXG4gICAqL1xuICBAT3V0cHV0KCkgaGVhZGVyQWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuY2FyZCcpIGNhcmRDbGFzcyA9IHRydWU7XG5cbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZGlzcGxheSBhIGxvYWRpbmcgY2FyZC5cbiAgICovXG4gIEBJbnB1dCgpIHNrZWxldG9uID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIERpc3BsYXkgZm9vdGVyIHN0YXRlLlxuICAgKi9cbiAgc2hvd0Zvb3RlciA9IGZhbHNlO1xuXG4gIHB1YmxpYyBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNob3dGb290ZXIgPSB0aGlzLnByaW1hcnlGb290ZXJBY3Rpb24ub2JzZXJ2ZXJzLmxlbmd0aCA+IDA7XG4gIH1cblxuICAvKipcbiAgICogRW1pdHMgdGhlIGNhcmRzIHByaW1hcnkgZm9vdGVyIGFjdGlvbiBjYWxsYmFja1xuICAgKi9cbiAgcHVibGljIG9uUHJpbWFyeUZvb3RlckFjdGlvbigkZXZlbnQpIHtcbiAgICB0aGlzLnByaW1hcnlGb290ZXJBY3Rpb24uZW1pdCgkZXZlbnQpO1xuICB9XG5cbiAgLyoqXG4gICAqIEVtaXRzIHRoZSBjYXJkcyBzZWNvbmRhcnkgZm9vdGVyIGFjdGlvbiBjYWxsYmFja1xuICAgKi9cbiAgcHVibGljIG9uU2Vjb25kYXJ5Rm9vdGVyQWN0aW9uKCRldmVudCkge1xuICAgIHRoaXMuc2Vjb25kYXJ5Rm9vdGVyQWN0aW9uLmVtaXQoJGV2ZW50KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBFbWl0cyB0aGUgY2FyZHMgaGVhZGVyIGFjdGlvbiBjYWxsYmFja1xuICAgKi9cbiAgcHVibGljIG9uSGVhZGVyQWN0aW9uKCRldmVudCkge1xuICAgIHRoaXMuaGVhZGVyQWN0aW9uLmVtaXQoJGV2ZW50KTtcbiAgfVxufVxuIl19