@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>
181 lines • 13.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
// tslint:disable: no-input-rename no-output-rename
import { Input, Directive, HostListener, EventEmitter, Output } from '@angular/core';
import { SheetService } from './sheet.service';
/** @type {?} */
const PRIMARY_ACTION_TAG = 'primaryAction';
/** @type {?} */
const SECONDARY_ACTION_TAG = 'secondaryAction';
/**
* Sheets are overlays that prevent users from interacting with the rest of the application until a specific action is taken. They can be disruptive because they require users to take an action before they can continue interacting with the rest of the application.
* It should be used thoughtfully and sparingly.
*/
export class SheetDirective {
/**
* @param {?} sheetService
*/
constructor(sheetService) {
this.sheetService = sheetService;
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
*/
this.closeButton = false;
/**
* Sets to `false` to stop the sheet from closing when the user clicks on the backdrop. Defaults to `true`.
*/
this.closeOnBackdropClick = true;
/**
* Callback when the sheet closes.
*/
this.close = new EventEmitter();
/**
* Callback when the secondary action is triggered.
*/
this.secondaryAction = new EventEmitter();
/**
* Callback when the primary action is triggered.
*/
this.primaryAction = new EventEmitter();
}
/**
* @return {?}
*/
onClick() {
this.openSheet();
}
/**
* Opens the sheet.
* @private
* @return {?}
*/
openSheet() {
/** @type {?} */
const sheetConfig = {
closeOnBackdropClick: this.closeOnBackdropClick,
content: {
closeButton: this.closeButton,
title: this.title,
body: this.body,
}
};
if (this.primaryActionLabel || this.secondaryActionLabel) {
sheetConfig.content.actions = [];
if (this.primaryActionLabel) {
sheetConfig.content.actions.push({
label: this.primaryActionLabel,
type: 'primary',
tag: PRIMARY_ACTION_TAG
});
}
if (this.secondaryActionLabel) {
sheetConfig.content.actions.push({
label: this.secondaryActionLabel,
type: 'secondary',
tag: SECONDARY_ACTION_TAG
});
}
}
/** @type {?} */
const sheetRef = this.sheetService.open(sheetConfig);
sheetRef.afterClosed().subscribe((/**
* @param {?} result
* @return {?}
*/
(result) => {
switch (result) {
case PRIMARY_ACTION_TAG:
if (this.primaryAction.observers.length > 0) {
this.primaryAction.emit(result);
}
break;
case SECONDARY_ACTION_TAG:
if (this.secondaryAction.observers.length > 0) {
this.secondaryAction.emit(result);
}
break;
default:
if (this.close.observers.length > 0) {
this.close.emit();
}
break;
}
}));
}
}
SheetDirective.decorators = [
{ type: Directive, args: [{
selector: '[sukaSheet]'
},] }
];
/** @nocollapse */
SheetDirective.ctorParameters = () => [
{ type: SheetService }
];
SheetDirective.propDecorators = {
closeButton: [{ type: Input, args: ['sheetCloseButton',] }],
title: [{ type: Input, args: ['sheetTitle',] }],
body: [{ type: Input, args: ['sheetBody',] }],
closeOnBackdropClick: [{ type: Input, args: ['sheetCloseOnBackdropClick',] }],
close: [{ type: Output, args: ['sheetClose',] }],
secondaryActionLabel: [{ type: Input, args: ['sheetSecondaryActionLabel',] }],
secondaryAction: [{ type: Output, args: ['sheetSecondaryAction',] }],
primaryActionLabel: [{ type: Input, args: ['sheetPrimaryActionLabel',] }],
primaryAction: [{ type: Output, args: ['sheetPrimaryAction',] }],
onClick: [{ type: HostListener, args: ['click',] }]
};
if (false) {
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
* @type {?}
*/
SheetDirective.prototype.closeButton;
/**
* Sets the sheet title.
* @type {?}
*/
SheetDirective.prototype.title;
/**
* Sets the body of the sheet.
* @type {?}
*/
SheetDirective.prototype.body;
/**
* Sets to `false` to stop the sheet from closing when the user clicks on the backdrop. Defaults to `true`.
* @type {?}
*/
SheetDirective.prototype.closeOnBackdropClick;
/**
* Callback when the sheet closes.
* @type {?}
*/
SheetDirective.prototype.close;
/**
* Sets the sheet secondary action button label.
* @type {?}
*/
SheetDirective.prototype.secondaryActionLabel;
/**
* Callback when the secondary action is triggered.
* @type {?}
*/
SheetDirective.prototype.secondaryAction;
/**
* Sets the sheet primary action button label.
* @type {?}
*/
SheetDirective.prototype.primaryActionLabel;
/**
* Callback when the primary action is triggered.
* @type {?}
*/
SheetDirective.prototype.primaryAction;
/**
* @type {?}
* @protected
*/
SheetDirective.prototype.sheetService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hlZXQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3NoZWV0L3NoZWV0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFBRSxLQUFLLEVBQWUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxZQUFZLEVBQWUsTUFBTSxpQkFBaUIsQ0FBQzs7TUFHdEQsa0JBQWtCLEdBQUcsZUFBZTs7TUFDcEMsb0JBQW9CLEdBQUcsaUJBQWlCOzs7OztBQVM5QyxNQUFNLE9BQU8sY0FBYzs7OztJQUN6QixZQUFzQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYzs7OztRQUtyQixnQkFBVyxHQUFHLEtBQUssQ0FBQzs7OztRQVlYLHlCQUFvQixHQUFHLElBQUksQ0FBQzs7OztRQUsxQyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7OztRQVNqQixvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7Ozs7UUFTdkMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBeENiLENBQUM7Ozs7SUEyQ3JELE9BQU87UUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQzs7Ozs7O0lBS08sU0FBUzs7Y0FDVCxXQUFXLEdBQWdCO1lBQy9CLG9CQUFvQixFQUFFLElBQUksQ0FBQyxvQkFBb0I7WUFDL0MsT0FBTyxFQUFFO2dCQUNQLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVztnQkFDN0IsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO2dCQUNqQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7YUFDaEI7U0FDRjtRQUVELElBQUksSUFBSSxDQUFDLGtCQUFrQixJQUFJLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUN4RCxXQUFXLENBQUMsT0FBTyxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7WUFFakMsSUFBSSxJQUFJLENBQUMsa0JBQWtCLEVBQUU7Z0JBQzNCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztvQkFDL0IsS0FBSyxFQUFFLElBQUksQ0FBQyxrQkFBa0I7b0JBQzlCLElBQUksRUFBRSxTQUFTO29CQUNmLEdBQUcsRUFBRSxrQkFBa0I7aUJBQ3hCLENBQUMsQ0FBQzthQUNKO1lBRUQsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7Z0JBQzdCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztvQkFDL0IsS0FBSyxFQUFFLElBQUksQ0FBQyxvQkFBb0I7b0JBQ2hDLElBQUksRUFBRSxXQUFXO29CQUNqQixHQUFHLEVBQUUsb0JBQW9CO2lCQUMxQixDQUFDLENBQUM7YUFDSjtTQUNGOztjQUVLLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7UUFFcEQsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDLFNBQVM7Ozs7UUFBQyxDQUFDLE1BQVcsRUFBRSxFQUFFO1lBQy9DLFFBQVEsTUFBTSxFQUFFO2dCQUNkLEtBQUssa0JBQWtCO29CQUNyQixJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7d0JBQzNDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO3FCQUNqQztvQkFDRCxNQUFNO2dCQUNSLEtBQUssb0JBQW9CO29CQUN2QixJQUFJLElBQUksQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7d0JBQzdDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO3FCQUNuQztvQkFDRCxNQUFNO2dCQUNSO29CQUNFLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTt3QkFDbkMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztxQkFDbkI7b0JBQ0QsTUFBTTthQUNUO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7WUF6R0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2FBQ3hCOzs7O1lBWlEsWUFBWTs7OzBCQW1CbEIsS0FBSyxTQUFDLGtCQUFrQjtvQkFJeEIsS0FBSyxTQUFDLFlBQVk7bUJBSWxCLEtBQUssU0FBQyxXQUFXO21DQUlqQixLQUFLLFNBQUMsMkJBQTJCO29CQUtqQyxNQUFNLFNBQUMsWUFBWTttQ0FLbkIsS0FBSyxTQUFDLDJCQUEyQjs4QkFJakMsTUFBTSxTQUFDLHNCQUFzQjtpQ0FLN0IsS0FBSyxTQUFDLHlCQUF5Qjs0QkFJL0IsTUFBTSxTQUFDLG9CQUFvQjtzQkFFM0IsWUFBWSxTQUFDLE9BQU87Ozs7Ozs7SUFyQ3JCLHFDQUErQzs7Ozs7SUFJL0MsK0JBQXNEOzs7OztJQUl0RCw4QkFBb0Q7Ozs7O0lBSXBELDhDQUFnRTs7Ozs7SUFLaEUsK0JBQWlEOzs7OztJQUtqRCw4Q0FBaUU7Ozs7O0lBSWpFLHlDQUFxRTs7Ozs7SUFLckUsNENBQTZEOzs7OztJQUk3RCx1Q0FBaUU7Ozs7O0lBeENyRCxzQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyIvLyB0c2xpbnQ6ZGlzYWJsZTogbm8taW5wdXQtcmVuYW1lIG5vLW91dHB1dC1yZW5hbWVcblxuaW1wb3J0IHsgSW5wdXQsIFRlbXBsYXRlUmVmLCBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2hlZXRTZXJ2aWNlLCBTaGVldENvbmZpZyB9IGZyb20gJy4vc2hlZXQuc2VydmljZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuY29uc3QgUFJJTUFSWV9BQ1RJT05fVEFHID0gJ3ByaW1hcnlBY3Rpb24nO1xuY29uc3QgU0VDT05EQVJZX0FDVElPTl9UQUcgPSAnc2Vjb25kYXJ5QWN0aW9uJztcblxuLyoqXG4gKiBTaGVldHMgYXJlIG92ZXJsYXlzIHRoYXQgcHJldmVudCB1c2VycyBmcm9tIGludGVyYWN0aW5nIHdpdGggdGhlIHJlc3Qgb2YgdGhlIGFwcGxpY2F0aW9uIHVudGlsIGEgc3BlY2lmaWMgYWN0aW9uIGlzIHRha2VuLiBUaGV5IGNhbiBiZSBkaXNydXB0aXZlIGJlY2F1c2UgdGhleSByZXF1aXJlIHVzZXJzIHRvIHRha2UgYW4gYWN0aW9uIGJlZm9yZSB0aGV5IGNhbiBjb250aW51ZSBpbnRlcmFjdGluZyB3aXRoIHRoZSByZXN0IG9mIHRoZSBhcHBsaWNhdGlvbi5cbiAqIEl0IHNob3VsZCBiZSB1c2VkIHRob3VnaHRmdWxseSBhbmQgc3BhcmluZ2x5LlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbc3VrYVNoZWV0XSdcbn0pXG5leHBvcnQgY2xhc3MgU2hlZXREaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgc2hlZXRTZXJ2aWNlOiBTaGVldFNlcnZpY2UpIHsgfVxuXG4gIC8qKlxuICAgKiBTZXQgdG8gYHRydWVgIHRvIHNob3cgYSBjbG9zZSBidXR0b24gb24gdGhlIHRvcCByaWdodCBjb3JuZXIuIERlZmF1bHRzIHRvIGBmYWxzZWAuXG4gICAqL1xuICBASW5wdXQoJ3NoZWV0Q2xvc2VCdXR0b24nKSBjbG9zZUJ1dHRvbiA9IGZhbHNlO1xuICAvKipcbiAgICogU2V0cyB0aGUgc2hlZXQgdGl0bGUuXG4gICAqL1xuICBASW5wdXQoJ3NoZWV0VGl0bGUnKSB0aXRsZTogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGJvZHkgb2YgdGhlIHNoZWV0LlxuICAgKi9cbiAgQElucHV0KCdzaGVldEJvZHknKSBib2R5OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogU2V0cyB0byBgZmFsc2VgIHRvIHN0b3AgdGhlIHNoZWV0IGZyb20gY2xvc2luZyB3aGVuIHRoZSB1c2VyIGNsaWNrcyBvbiB0aGUgYmFja2Ryb3AuIERlZmF1bHRzIHRvIGB0cnVlYC5cbiAgICovXG4gIEBJbnB1dCgnc2hlZXRDbG9zZU9uQmFja2Ryb3BDbGljaycpIGNsb3NlT25CYWNrZHJvcENsaWNrID0gdHJ1ZTtcblxuICAvKipcbiAgICogQ2FsbGJhY2sgd2hlbiB0aGUgc2hlZXQgY2xvc2VzLlxuICAgKi9cbiAgQE91dHB1dCgnc2hlZXRDbG9zZScpIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBzaGVldCBzZWNvbmRhcnkgYWN0aW9uIGJ1dHRvbiBsYWJlbC5cbiAgICovXG4gIEBJbnB1dCgnc2hlZXRTZWNvbmRhcnlBY3Rpb25MYWJlbCcpIHNlY29uZGFyeUFjdGlvbkxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBzZWNvbmRhcnkgYWN0aW9uIGlzIHRyaWdnZXJlZC5cbiAgICovXG4gIEBPdXRwdXQoJ3NoZWV0U2Vjb25kYXJ5QWN0aW9uJykgc2Vjb25kYXJ5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBzaGVldCBwcmltYXJ5IGFjdGlvbiBidXR0b24gbGFiZWwuXG4gICAqL1xuICBASW5wdXQoJ3NoZWV0UHJpbWFyeUFjdGlvbkxhYmVsJykgcHJpbWFyeUFjdGlvbkxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBwcmltYXJ5IGFjdGlvbiBpcyB0cmlnZ2VyZWQuXG4gICAqL1xuICBAT3V0cHV0KCdzaGVldFByaW1hcnlBY3Rpb24nKSBwcmltYXJ5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgb25DbGljaygpIHtcbiAgICB0aGlzLm9wZW5TaGVldCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIE9wZW5zIHRoZSBzaGVldC5cbiAgICovXG4gIHByaXZhdGUgb3BlblNoZWV0KCkge1xuICAgIGNvbnN0IHNoZWV0Q29uZmlnOiBTaGVldENvbmZpZyA9IHtcbiAgICAgIGNsb3NlT25CYWNrZHJvcENsaWNrOiB0aGlzLmNsb3NlT25CYWNrZHJvcENsaWNrLFxuICAgICAgY29udGVudDoge1xuICAgICAgICBjbG9zZUJ1dHRvbjogdGhpcy5jbG9zZUJ1dHRvbixcbiAgICAgICAgdGl0bGU6IHRoaXMudGl0bGUsXG4gICAgICAgIGJvZHk6IHRoaXMuYm9keSxcbiAgICAgIH1cbiAgICB9O1xuXG4gICAgaWYgKHRoaXMucHJpbWFyeUFjdGlvbkxhYmVsIHx8IHRoaXMuc2Vjb25kYXJ5QWN0aW9uTGFiZWwpIHtcbiAgICAgIHNoZWV0Q29uZmlnLmNvbnRlbnQuYWN0aW9ucyA9IFtdO1xuXG4gICAgICBpZiAodGhpcy5wcmltYXJ5QWN0aW9uTGFiZWwpIHtcbiAgICAgICAgc2hlZXRDb25maWcuY29udGVudC5hY3Rpb25zLnB1c2goe1xuICAgICAgICAgIGxhYmVsOiB0aGlzLnByaW1hcnlBY3Rpb25MYWJlbCxcbiAgICAgICAgICB0eXBlOiAncHJpbWFyeScsXG4gICAgICAgICAgdGFnOiBQUklNQVJZX0FDVElPTl9UQUdcbiAgICAgICAgfSk7XG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLnNlY29uZGFyeUFjdGlvbkxhYmVsKSB7XG4gICAgICAgIHNoZWV0Q29uZmlnLmNvbnRlbnQuYWN0aW9ucy5wdXNoKHtcbiAgICAgICAgICBsYWJlbDogdGhpcy5zZWNvbmRhcnlBY3Rpb25MYWJlbCxcbiAgICAgICAgICB0eXBlOiAnc2Vjb25kYXJ5JyxcbiAgICAgICAgICB0YWc6IFNFQ09OREFSWV9BQ1RJT05fVEFHXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cblxuICAgIGNvbnN0IHNoZWV0UmVmID0gdGhpcy5zaGVldFNlcnZpY2Uub3BlbihzaGVldENvbmZpZyk7XG5cbiAgICBzaGVldFJlZi5hZnRlckNsb3NlZCgpLnN1YnNjcmliZSgocmVzdWx0OiBhbnkpID0+IHtcbiAgICAgIHN3aXRjaCAocmVzdWx0KSB7XG4gICAgICAgIGNhc2UgUFJJTUFSWV9BQ1RJT05fVEFHOlxuICAgICAgICAgIGlmICh0aGlzLnByaW1hcnlBY3Rpb24ub2JzZXJ2ZXJzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgIHRoaXMucHJpbWFyeUFjdGlvbi5lbWl0KHJlc3VsdCk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlIFNFQ09OREFSWV9BQ1RJT05fVEFHOlxuICAgICAgICAgIGlmICh0aGlzLnNlY29uZGFyeUFjdGlvbi5vYnNlcnZlcnMubGVuZ3RoID4gMCkge1xuICAgICAgICAgICAgdGhpcy5zZWNvbmRhcnlBY3Rpb24uZW1pdChyZXN1bHQpO1xuICAgICAgICAgIH1cbiAgICAgICAgICBicmVhaztcbiAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICBpZiAodGhpcy5jbG9zZS5vYnNlcnZlcnMubGVuZ3RoID4gMCkge1xuICAgICAgICAgICAgdGhpcy5jbG9zZS5lbWl0KCk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iXX0=