@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 { ModalService } from './modal.service';
/** @type {?} */
const PRIMARY_ACTION_TAG = 'primaryAction';
/** @type {?} */
const SECONDARY_ACTION_TAG = 'secondaryAction';
/**
* Modals 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 ModalDirective {
/**
* @param {?} modalService
*/
constructor(modalService) {
this.modalService = modalService;
/**
* 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 modal from closing when the user clicks on the backdrop. Defaults to `true`.
*/
this.closeOnBackdropClick = true;
/**
* Callback when the modal 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.openModal();
}
/**
* Opens the modal.
* @private
* @return {?}
*/
openModal() {
/** @type {?} */
const modalConfig = {
closeOnBackdropClick: this.closeOnBackdropClick,
content: {
closeButton: this.closeButton,
title: this.title,
body: this.body,
}
};
if (this.primaryActionLabel || this.secondaryActionLabel) {
modalConfig.content.actions = [];
if (this.primaryActionLabel) {
modalConfig.content.actions.push({
label: this.primaryActionLabel,
type: 'primary',
tag: PRIMARY_ACTION_TAG
});
}
if (this.secondaryActionLabel) {
modalConfig.content.actions.push({
label: this.secondaryActionLabel,
type: 'secondary',
tag: SECONDARY_ACTION_TAG
});
}
}
/** @type {?} */
const modalRef = this.modalService.open(modalConfig);
modalRef.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;
}
}));
}
}
ModalDirective.decorators = [
{ type: Directive, args: [{
selector: '[sukaModal]'
},] }
];
/** @nocollapse */
ModalDirective.ctorParameters = () => [
{ type: ModalService }
];
ModalDirective.propDecorators = {
closeButton: [{ type: Input, args: ['modalCloseButton',] }],
title: [{ type: Input, args: ['modalTitle',] }],
body: [{ type: Input, args: ['modalBody',] }],
closeOnBackdropClick: [{ type: Input, args: ['modalCloseOnBackdropClick',] }],
close: [{ type: Output, args: ['modalClose',] }],
secondaryActionLabel: [{ type: Input, args: ['modalSecondaryActionLabel',] }],
secondaryAction: [{ type: Output, args: ['modalSecondaryAction',] }],
primaryActionLabel: [{ type: Input, args: ['modalPrimaryActionLabel',] }],
primaryAction: [{ type: Output, args: ['modalPrimaryAction',] }],
onClick: [{ type: HostListener, args: ['click',] }]
};
if (false) {
/**
* Set to `true` to show a close button on the top right corner. Defaults to `false`.
* @type {?}
*/
ModalDirective.prototype.closeButton;
/**
* Sets the modal title.
* @type {?}
*/
ModalDirective.prototype.title;
/**
* Sets the body of the modal.
* @type {?}
*/
ModalDirective.prototype.body;
/**
* Sets to `false` to stop the modal from closing when the user clicks on the backdrop. Defaults to `true`.
* @type {?}
*/
ModalDirective.prototype.closeOnBackdropClick;
/**
* Callback when the modal closes.
* @type {?}
*/
ModalDirective.prototype.close;
/**
* Sets the modal secondary action button label.
* @type {?}
*/
ModalDirective.prototype.secondaryActionLabel;
/**
* Callback when the secondary action is triggered.
* @type {?}
*/
ModalDirective.prototype.secondaryAction;
/**
* Sets the modal primary action button label.
* @type {?}
*/
ModalDirective.prototype.primaryActionLabel;
/**
* Callback when the primary action is triggered.
* @type {?}
*/
ModalDirective.prototype.primaryAction;
/**
* @type {?}
* @protected
*/
ModalDirective.prototype.modalService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL21vZGFsL21vZGFsLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUVBLE9BQU8sRUFBRSxLQUFLLEVBQWUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdHLE9BQU8sRUFBRSxZQUFZLEVBQWUsTUFBTSxpQkFBaUIsQ0FBQzs7TUFHdEQsa0JBQWtCLEdBQUcsZUFBZTs7TUFDcEMsb0JBQW9CLEdBQUcsaUJBQWlCOzs7OztBQVM5QyxNQUFNLE9BQU8sY0FBYzs7OztJQUN6QixZQUFzQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYzs7OztRQUtyQixnQkFBVyxHQUFHLEtBQUssQ0FBQzs7OztRQVlYLHlCQUFvQixHQUFHLElBQUksQ0FBQzs7OztRQUsxQyxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQzs7OztRQVNqQixvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7Ozs7UUFTdkMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBeENiLENBQUM7Ozs7SUEyQ3JELE9BQU87UUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQzs7Ozs7O0lBS08sU0FBUzs7Y0FDVCxXQUFXLEdBQWdCO1lBQy9CLG9CQUFvQixFQUFFLElBQUksQ0FBQyxvQkFBb0I7WUFDL0MsT0FBTyxFQUFFO2dCQUNQLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVztnQkFDN0IsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO2dCQUNqQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7YUFDaEI7U0FDRjtRQUVELElBQUksSUFBSSxDQUFDLGtCQUFrQixJQUFJLElBQUksQ0FBQyxvQkFBb0IsRUFBRTtZQUN4RCxXQUFXLENBQUMsT0FBTyxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7WUFFakMsSUFBSSxJQUFJLENBQUMsa0JBQWtCLEVBQUU7Z0JBQzNCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztvQkFDL0IsS0FBSyxFQUFFLElBQUksQ0FBQyxrQkFBa0I7b0JBQzlCLElBQUksRUFBRSxTQUFTO29CQUNmLEdBQUcsRUFBRSxrQkFBa0I7aUJBQ3hCLENBQUMsQ0FBQzthQUNKO1lBRUQsSUFBSSxJQUFJLENBQUMsb0JBQW9CLEVBQUU7Z0JBQzdCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztvQkFDL0IsS0FBSyxFQUFFLElBQUksQ0FBQyxvQkFBb0I7b0JBQ2hDLElBQUksRUFBRSxXQUFXO29CQUNqQixHQUFHLEVBQUUsb0JBQW9CO2lCQUMxQixDQUFDLENBQUM7YUFDSjtTQUNGOztjQUVLLFFBQVEsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7UUFFcEQsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDLFNBQVM7Ozs7UUFBQyxDQUFDLE1BQVcsRUFBRSxFQUFFO1lBQy9DLFFBQVEsTUFBTSxFQUFFO2dCQUNkLEtBQUssa0JBQWtCO29CQUNyQixJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7d0JBQzNDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO3FCQUNqQztvQkFDRCxNQUFNO2dCQUNSLEtBQUssb0JBQW9CO29CQUN2QixJQUFJLElBQUksQ0FBQyxlQUFlLENBQUMsU0FBUyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7d0JBQzdDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO3FCQUNuQztvQkFDRCxNQUFNO2dCQUNSO29CQUNFLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTt3QkFDbkMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztxQkFDbkI7b0JBQ0QsTUFBTTthQUNUO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7WUF6R0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2FBQ3hCOzs7O1lBWlEsWUFBWTs7OzBCQW1CbEIsS0FBSyxTQUFDLGtCQUFrQjtvQkFJeEIsS0FBSyxTQUFDLFlBQVk7bUJBSWxCLEtBQUssU0FBQyxXQUFXO21DQUlqQixLQUFLLFNBQUMsMkJBQTJCO29CQUtqQyxNQUFNLFNBQUMsWUFBWTttQ0FLbkIsS0FBSyxTQUFDLDJCQUEyQjs4QkFJakMsTUFBTSxTQUFDLHNCQUFzQjtpQ0FLN0IsS0FBSyxTQUFDLHlCQUF5Qjs0QkFJL0IsTUFBTSxTQUFDLG9CQUFvQjtzQkFFM0IsWUFBWSxTQUFDLE9BQU87Ozs7Ozs7SUFyQ3JCLHFDQUErQzs7Ozs7SUFJL0MsK0JBQXNEOzs7OztJQUl0RCw4QkFBb0Q7Ozs7O0lBSXBELDhDQUFnRTs7Ozs7SUFLaEUsK0JBQWlEOzs7OztJQUtqRCw4Q0FBaUU7Ozs7O0lBSWpFLHlDQUFxRTs7Ozs7SUFLckUsNENBQTZEOzs7OztJQUk3RCx1Q0FBaUU7Ozs7O0lBeENyRCxzQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyIvLyB0c2xpbnQ6ZGlzYWJsZTogbm8taW5wdXQtcmVuYW1lIG5vLW91dHB1dC1yZW5hbWVcblxuaW1wb3J0IHsgSW5wdXQsIFRlbXBsYXRlUmVmLCBEaXJlY3RpdmUsIEhvc3RMaXN0ZW5lciwgRXZlbnRFbWl0dGVyLCBPdXRwdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTW9kYWxTZXJ2aWNlLCBNb2RhbENvbmZpZyB9IGZyb20gJy4vbW9kYWwuc2VydmljZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuY29uc3QgUFJJTUFSWV9BQ1RJT05fVEFHID0gJ3ByaW1hcnlBY3Rpb24nO1xuY29uc3QgU0VDT05EQVJZX0FDVElPTl9UQUcgPSAnc2Vjb25kYXJ5QWN0aW9uJztcblxuLyoqXG4gKiBNb2RhbHMgYXJlIG92ZXJsYXlzIHRoYXQgcHJldmVudCB1c2VycyBmcm9tIGludGVyYWN0aW5nIHdpdGggdGhlIHJlc3Qgb2YgdGhlIGFwcGxpY2F0aW9uIHVudGlsIGEgc3BlY2lmaWMgYWN0aW9uIGlzIHRha2VuLiBUaGV5IGNhbiBiZSBkaXNydXB0aXZlIGJlY2F1c2UgdGhleSByZXF1aXJlIHVzZXJzIHRvIHRha2UgYW4gYWN0aW9uIGJlZm9yZSB0aGV5IGNhbiBjb250aW51ZSBpbnRlcmFjdGluZyB3aXRoIHRoZSByZXN0IG9mIHRoZSBhcHBsaWNhdGlvbi5cbiAqIEl0IHNob3VsZCBiZSB1c2VkIHRob3VnaHRmdWxseSBhbmQgc3BhcmluZ2x5LlxuICovXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbc3VrYU1vZGFsXSdcbn0pXG5leHBvcnQgY2xhc3MgTW9kYWxEaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgbW9kYWxTZXJ2aWNlOiBNb2RhbFNlcnZpY2UpIHsgfVxuXG4gIC8qKlxuICAgKiBTZXQgdG8gYHRydWVgIHRvIHNob3cgYSBjbG9zZSBidXR0b24gb24gdGhlIHRvcCByaWdodCBjb3JuZXIuIERlZmF1bHRzIHRvIGBmYWxzZWAuXG4gICAqL1xuICBASW5wdXQoJ21vZGFsQ2xvc2VCdXR0b24nKSBjbG9zZUJ1dHRvbiA9IGZhbHNlO1xuICAvKipcbiAgICogU2V0cyB0aGUgbW9kYWwgdGl0bGUuXG4gICAqL1xuICBASW5wdXQoJ21vZGFsVGl0bGUnKSB0aXRsZTogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PjtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGJvZHkgb2YgdGhlIG1vZGFsLlxuICAgKi9cbiAgQElucHV0KCdtb2RhbEJvZHknKSBib2R5OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xuICAvKipcbiAgICogU2V0cyB0byBgZmFsc2VgIHRvIHN0b3AgdGhlIG1vZGFsIGZyb20gY2xvc2luZyB3aGVuIHRoZSB1c2VyIGNsaWNrcyBvbiB0aGUgYmFja2Ryb3AuIERlZmF1bHRzIHRvIGB0cnVlYC5cbiAgICovXG4gIEBJbnB1dCgnbW9kYWxDbG9zZU9uQmFja2Ryb3BDbGljaycpIGNsb3NlT25CYWNrZHJvcENsaWNrID0gdHJ1ZTtcblxuICAvKipcbiAgICogQ2FsbGJhY2sgd2hlbiB0aGUgbW9kYWwgY2xvc2VzLlxuICAgKi9cbiAgQE91dHB1dCgnbW9kYWxDbG9zZScpIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBtb2RhbCBzZWNvbmRhcnkgYWN0aW9uIGJ1dHRvbiBsYWJlbC5cbiAgICovXG4gIEBJbnB1dCgnbW9kYWxTZWNvbmRhcnlBY3Rpb25MYWJlbCcpIHNlY29uZGFyeUFjdGlvbkxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBzZWNvbmRhcnkgYWN0aW9uIGlzIHRyaWdnZXJlZC5cbiAgICovXG4gIEBPdXRwdXQoJ21vZGFsU2Vjb25kYXJ5QWN0aW9uJykgc2Vjb25kYXJ5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBtb2RhbCBwcmltYXJ5IGFjdGlvbiBidXR0b24gbGFiZWwuXG4gICAqL1xuICBASW5wdXQoJ21vZGFsUHJpbWFyeUFjdGlvbkxhYmVsJykgcHJpbWFyeUFjdGlvbkxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBwcmltYXJ5IGFjdGlvbiBpcyB0cmlnZ2VyZWQuXG4gICAqL1xuICBAT3V0cHV0KCdtb2RhbFByaW1hcnlBY3Rpb24nKSBwcmltYXJ5QWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgb25DbGljaygpIHtcbiAgICB0aGlzLm9wZW5Nb2RhbCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIE9wZW5zIHRoZSBtb2RhbC5cbiAgICovXG4gIHByaXZhdGUgb3Blbk1vZGFsKCkge1xuICAgIGNvbnN0IG1vZGFsQ29uZmlnOiBNb2RhbENvbmZpZyA9IHtcbiAgICAgIGNsb3NlT25CYWNrZHJvcENsaWNrOiB0aGlzLmNsb3NlT25CYWNrZHJvcENsaWNrLFxuICAgICAgY29udGVudDoge1xuICAgICAgICBjbG9zZUJ1dHRvbjogdGhpcy5jbG9zZUJ1dHRvbixcbiAgICAgICAgdGl0bGU6IHRoaXMudGl0bGUsXG4gICAgICAgIGJvZHk6IHRoaXMuYm9keSxcbiAgICAgIH1cbiAgICB9O1xuXG4gICAgaWYgKHRoaXMucHJpbWFyeUFjdGlvbkxhYmVsIHx8IHRoaXMuc2Vjb25kYXJ5QWN0aW9uTGFiZWwpIHtcbiAgICAgIG1vZGFsQ29uZmlnLmNvbnRlbnQuYWN0aW9ucyA9IFtdO1xuXG4gICAgICBpZiAodGhpcy5wcmltYXJ5QWN0aW9uTGFiZWwpIHtcbiAgICAgICAgbW9kYWxDb25maWcuY29udGVudC5hY3Rpb25zLnB1c2goe1xuICAgICAgICAgIGxhYmVsOiB0aGlzLnByaW1hcnlBY3Rpb25MYWJlbCxcbiAgICAgICAgICB0eXBlOiAncHJpbWFyeScsXG4gICAgICAgICAgdGFnOiBQUklNQVJZX0FDVElPTl9UQUdcbiAgICAgICAgfSk7XG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLnNlY29uZGFyeUFjdGlvbkxhYmVsKSB7XG4gICAgICAgIG1vZGFsQ29uZmlnLmNvbnRlbnQuYWN0aW9ucy5wdXNoKHtcbiAgICAgICAgICBsYWJlbDogdGhpcy5zZWNvbmRhcnlBY3Rpb25MYWJlbCxcbiAgICAgICAgICB0eXBlOiAnc2Vjb25kYXJ5JyxcbiAgICAgICAgICB0YWc6IFNFQ09OREFSWV9BQ1RJT05fVEFHXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH1cblxuICAgIGNvbnN0IG1vZGFsUmVmID0gdGhpcy5tb2RhbFNlcnZpY2Uub3Blbihtb2RhbENvbmZpZyk7XG5cbiAgICBtb2RhbFJlZi5hZnRlckNsb3NlZCgpLnN1YnNjcmliZSgocmVzdWx0OiBhbnkpID0+IHtcbiAgICAgIHN3aXRjaCAocmVzdWx0KSB7XG4gICAgICAgIGNhc2UgUFJJTUFSWV9BQ1RJT05fVEFHOlxuICAgICAgICAgIGlmICh0aGlzLnByaW1hcnlBY3Rpb24ub2JzZXJ2ZXJzLmxlbmd0aCA+IDApIHtcbiAgICAgICAgICAgIHRoaXMucHJpbWFyeUFjdGlvbi5lbWl0KHJlc3VsdCk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgICBjYXNlIFNFQ09OREFSWV9BQ1RJT05fVEFHOlxuICAgICAgICAgIGlmICh0aGlzLnNlY29uZGFyeUFjdGlvbi5vYnNlcnZlcnMubGVuZ3RoID4gMCkge1xuICAgICAgICAgICAgdGhpcy5zZWNvbmRhcnlBY3Rpb24uZW1pdChyZXN1bHQpO1xuICAgICAgICAgIH1cbiAgICAgICAgICBicmVhaztcbiAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICBpZiAodGhpcy5jbG9zZS5vYnNlcnZlcnMubGVuZ3RoID4gMCkge1xuICAgICAgICAgICAgdGhpcy5jbG9zZS5lbWl0KCk7XG4gICAgICAgICAgfVxuICAgICAgICAgIGJyZWFrO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59XG4iXX0=