alertme-component-angular
Version:
Alertme Angular Component
170 lines • 13.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Subscriber } from '../../services/subscriber/subscriber.models';
import { SubscriberService } from '../../services/subscriber/subscriber.service';
var ContactInfoComponent = /** @class */ (function () {
function ContactInfoComponent(subService) {
this.subService = subService;
this.showModal = false;
this.editedOptions = [];
this.phonePattern = /[\+]?[1]?[-\s\.]?[(]?(\d{3})[)]?[-\s\.]?(\d{3})[-\s\.]?(\d{4})/;
this.e164Pattern = /^\+1(\d{3})(\d{3})(\d{4})$/;
this.emailPattern = /\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}/;
this.inputPhonePattern = /[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}/;
this.save = new EventEmitter();
}
/**
* @return {?}
*/
ContactInfoComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} option
* @return {?}
*/
ContactInfoComponent.prototype.validationExpression = /**
* @param {?} option
* @return {?}
*/
function (option) {
if (option === 'email') {
return '\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}';
}
return '[\\+]?[(]?[0-9]{3}[)]?[-\\s\\.]?[0-9]{3}[-\\s\\.]?[0-9]{4,6}';
};
/**
* @return {?}
*/
ContactInfoComponent.prototype.openModal = /**
* @return {?}
*/
function () {
var _this = this;
this.showModal = true;
// Copy delivery option values for editing
this.editedOptions = this.subscriber.deliveryOptions.map(function (option) {
return tslib_1.__assign({}, option, { value: _this.formatForDisplay(option.value) });
});
};
/**
* @return {?}
*/
ContactInfoComponent.prototype.closeModal = /**
* @return {?}
*/
function () {
this.showModal = false;
};
/**
* @return {?}
*/
ContactInfoComponent.prototype.saveContactInfo = /**
* @return {?}
*/
function () {
var _this = this;
// Copy edited delivery options back to storage
this.subscriber.deliveryOptions = this.editedOptions.map(function (option) {
return tslib_1.__assign({}, option, { value: _this.formatForDB(option.value) });
});
this.subService.updateSubscriber(this.subscriber).subscribe(function () {
_this.closeModal();
});
this.save.emit(null);
};
/**
* @return {?}
*/
ContactInfoComponent.prototype.cancel = /**
* @return {?}
*/
function () {
this.showModal = false;
};
// Format the phone number as a standard display format
// Format the phone number as a standard display format
/**
* @param {?} input
* @return {?}
*/
ContactInfoComponent.prototype.formatForDisplay =
// Format the phone number as a standard display format
/**
* @param {?} input
* @return {?}
*/
function (input) {
if (this.e164Pattern.test(input)) {
return input.replace(this.e164Pattern, '($1) $2-$3');
}
return input;
};
// Format the phone as E.164 for storage in the database
// Format the phone as E.164 for storage in the database
/**
* @param {?} input
* @return {?}
*/
ContactInfoComponent.prototype.formatForDB =
// Format the phone as E.164 for storage in the database
/**
* @param {?} input
* @return {?}
*/
function (input) {
// Make sure its a phone number
if (this.phonePattern.test(input)) {
return input.replace(this.phonePattern, '+1$1$2$3');
}
// Otherwise, return as is.
return input;
};
ContactInfoComponent.decorators = [
{ type: Component, args: [{
selector: 'am-contact-info',
template: "<div class=\"am-manage-contact-button\">\n <button class=\"am-button\" (click)=\"openModal()\">Manage Contact Info</button>\n</div>\n<div *ngIf=\"showModal\" class=\"modal\">\n <!-- Modal content -->\n <div class=\"am-contact-info\">\n <span class=\"am-contact-close\" (click)=\"closeModal()\">×</span>\n <div class=\"am-contact-info-header\">Contact Info</div>\n\n <form #doForm=\"ngForm\">\n <div *ngFor=\"let option of this.editedOptions\">\n <input class=\"am-contact-input\" id=\"{{option._id}}\" [name]=\"option._id\" [placeholder]=\"option.name\"\n [(ngModel)]=\"option.value\" [pattern]=\"validationExpression(option.deliveryType)\"/>\n\n <svg *ngIf=\"option.deliveryType =='sms'\" class=\"am-icon\"><use xlink:href=\"#chat\" /></svg>\n <svg *ngIf=\"option.deliveryType =='email'\" class=\"am-icon\"><use xlink:href=\"#email\" /></svg>\n </div>\n <div class=\"am-contact-info-footer\">\n <button *ngIf=\"doForm.valid\" class=\"am-button\" (click)=\"saveContactInfo()\">Save</button>\n </div>\n </form>\n </div>\n </div>\n",
styles: [".am-manage-contact-button{margin:15px 5px 0}.modal{display:block;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.am-contact-info{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:20em}.am-contact-info-default{width:20em}.am-contact-info-header{margin-bottom:1em;font-weight:700}.am-contact-info-footer{margin-top:20px;text-align:right}.am-contact-close{color:#aaa;float:right;font-size:28px;font-weight:700;margin-top:-20px;margin-right:-10px}.am-contact-close:focus,.am-contact-close:hover{color:#000;text-decoration:none;cursor:pointer}.am-contact-label{min-width:120px;display:inline-table;margin-bottom:10px}.am-contact-input{padding:.3em;margin-bottom:.5em}input:invalid{border-left:5px solid #a94442}input:valid{border-left:5px solid #42a948}"]
}] }
];
/** @nocollapse */
ContactInfoComponent.ctorParameters = function () { return [
{ type: SubscriberService }
]; };
ContactInfoComponent.propDecorators = {
subscriber: [{ type: Input }],
save: [{ type: Output }]
};
return ContactInfoComponent;
}());
export { ContactInfoComponent };
if (false) {
/** @type {?} */
ContactInfoComponent.prototype.showModal;
/** @type {?} */
ContactInfoComponent.prototype.editedOptions;
/** @type {?} */
ContactInfoComponent.prototype.phonePattern;
/** @type {?} */
ContactInfoComponent.prototype.e164Pattern;
/** @type {?} */
ContactInfoComponent.prototype.emailPattern;
/** @type {?} */
ContactInfoComponent.prototype.inputPhonePattern;
/** @type {?} */
ContactInfoComponent.prototype.subscriber;
/** @type {?} */
ContactInfoComponent.prototype.save;
/**
* @type {?}
* @private
*/
ContactInfoComponent.prototype.subService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGFjdC1pbmZvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FsZXJ0bWUtY29tcG9uZW50LWFuZ3VsYXIvIiwic291cmNlcyI6WyJsaWIvY29tcG9uZW50cy9jb250YWN0LWluZm8vY29udGFjdC1pbmZvLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLFVBQVUsRUFBa0IsTUFBTSw2Q0FBNkMsQ0FBQztBQUN6RixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUVqRjtJQWlCRSw4QkFBb0IsVUFBNkI7UUFBN0IsZUFBVSxHQUFWLFVBQVUsQ0FBbUI7UUFWakQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixrQkFBYSxHQUFHLEVBQUUsQ0FBQztRQUNuQixpQkFBWSxHQUFHLGdFQUFnRSxDQUFDO1FBQ2hGLGdCQUFXLEdBQUcsNEJBQTRCLENBQUM7UUFDM0MsaUJBQVksR0FBSSxnQ0FBZ0MsQ0FBQztRQUNqRCxzQkFBaUIsR0FBRyx5REFBeUQsQ0FBQztRQUdwRSxTQUFJLEdBQXNCLElBQUksWUFBWSxFQUFFLENBQUM7SUFFSCxDQUFDOzs7O0lBRXJELHVDQUFROzs7SUFBUjtJQUVBLENBQUM7Ozs7O0lBRUQsbURBQW9COzs7O0lBQXBCLFVBQXFCLE1BQWM7UUFDakMsSUFBSSxNQUFNLEtBQUssT0FBTyxFQUFFO1lBQ3RCLE9BQU8sa0NBQWtDLENBQUM7U0FDM0M7UUFDRCxPQUFPLDhEQUE4RCxDQUFDO0lBQ3hFLENBQUM7Ozs7SUFFRCx3Q0FBUzs7O0lBQVQ7UUFBQSxpQkFPQztRQU5DLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBRXRCLDBDQUEwQztRQUMxQyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FBQyxVQUFBLE1BQU07WUFDN0QsNEJBQVcsTUFBTSxJQUFFLEtBQUssRUFBRSxLQUFJLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxJQUFFO1FBQ2pFLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7OztJQUVELHlDQUFVOzs7SUFBVjtRQUNFLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQ3pCLENBQUM7Ozs7SUFFRCw4Q0FBZTs7O0lBQWY7UUFBQSxpQkFXQztRQVZDLCtDQUErQztRQUMvQyxJQUFJLENBQUMsVUFBVSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxVQUFBLE1BQU07WUFDN0QsNEJBQVcsTUFBTSxJQUFFLEtBQUssRUFBRSxLQUFJLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsSUFBRTtRQUM1RCxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLFNBQVMsQ0FBQztZQUMxRCxLQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDcEIsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QixDQUFDOzs7O0lBRUQscUNBQU07OztJQUFOO1FBQ0UsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQztJQUVELHVEQUF1RDs7Ozs7O0lBQ3ZELCtDQUFnQjs7Ozs7O0lBQWhCLFVBQWlCLEtBQWE7UUFDNUIsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNoQyxPQUFPLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxZQUFZLENBQUMsQ0FBQztTQUN0RDtRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztJQUVELHdEQUF3RDs7Ozs7O0lBQ3hELDBDQUFXOzs7Ozs7SUFBWCxVQUFZLEtBQWE7UUFDdkIsK0JBQStCO1FBQy9CLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDakMsT0FBTyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsVUFBVSxDQUFDLENBQUM7U0FDckQ7UUFDRCwyQkFBMkI7UUFDM0IsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDOztnQkE1RUYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxpQkFBaUI7b0JBQzNCLHltQ0FBNEM7O2lCQUU3Qzs7OztnQkFOUSxpQkFBaUI7Ozs2QkFnQnZCLEtBQUs7dUJBQ0wsTUFBTTs7SUErRFQsMkJBQUM7Q0FBQSxBQTlFRCxJQThFQztTQXpFWSxvQkFBb0I7OztJQUUvQix5Q0FBa0I7O0lBQ2xCLDZDQUFtQjs7SUFDbkIsNENBQWdGOztJQUNoRiwyQ0FBMkM7O0lBQzNDLDRDQUFpRDs7SUFDakQsaURBQThFOztJQUU5RSwwQ0FBZ0M7O0lBQ2hDLG9DQUF1RDs7Ozs7SUFFM0MsMENBQXFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaWJlciwgRGVsaXZlcnlPcHRpb24gfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9zdWJzY3JpYmVyL3N1YnNjcmliZXIubW9kZWxzJztcbmltcG9ydCB7IFN1YnNjcmliZXJTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvc3Vic2NyaWJlci9zdWJzY3JpYmVyLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhbS1jb250YWN0LWluZm8nLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udGFjdC1pbmZvLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29udGFjdC1pbmZvLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDb250YWN0SW5mb0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgc2hvd01vZGFsID0gZmFsc2U7XG4gIGVkaXRlZE9wdGlvbnMgPSBbXTtcbiAgcGhvbmVQYXR0ZXJuID0gL1tcXCtdP1sxXT9bLVxcc1xcLl0/WyhdPyhcXGR7M30pWyldP1stXFxzXFwuXT8oXFxkezN9KVstXFxzXFwuXT8oXFxkezR9KS87XG4gIGUxNjRQYXR0ZXJuID0gL15cXCsxKFxcZHszfSkoXFxkezN9KShcXGR7NH0pJC87XG4gIGVtYWlsUGF0dGVybiA9ICAvXFx3K0BbYS16QS1aX10rP1xcLlthLXpBLVpdezIsM30vO1xuICBpbnB1dFBob25lUGF0dGVybiA9IC9bXFwrXT9bKF0/WzAtOV17M31bKV0/Wy1cXHNcXC5dP1swLTldezN9Wy1cXHNcXC5dP1swLTldezQsNn0vO1xuXG4gIEBJbnB1dCgpIHN1YnNjcmliZXI6IFN1YnNjcmliZXI7XG4gIEBPdXRwdXQoKSBzYXZlOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHN1YlNlcnZpY2U6IFN1YnNjcmliZXJTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuXG4gIH1cblxuICB2YWxpZGF0aW9uRXhwcmVzc2lvbihvcHRpb246IHN0cmluZykge1xuICAgIGlmIChvcHRpb24gPT09ICdlbWFpbCcpIHtcbiAgICAgIHJldHVybiAnXFxcXHcrQFthLXpBLVpfXSs/XFxcXC5bYS16QS1aXXsyLDN9JztcbiAgICB9XG4gICAgcmV0dXJuICdbXFxcXCtdP1soXT9bMC05XXszfVspXT9bLVxcXFxzXFxcXC5dP1swLTldezN9Wy1cXFxcc1xcXFwuXT9bMC05XXs0LDZ9JztcbiAgfVxuXG4gIG9wZW5Nb2RhbCgpIHtcbiAgICB0aGlzLnNob3dNb2RhbCA9IHRydWU7XG5cbiAgICAvLyBDb3B5IGRlbGl2ZXJ5IG9wdGlvbiB2YWx1ZXMgZm9yIGVkaXRpbmdcbiAgICB0aGlzLmVkaXRlZE9wdGlvbnMgPSB0aGlzLnN1YnNjcmliZXIuZGVsaXZlcnlPcHRpb25zLm1hcChvcHRpb24gPT4ge1xuICAgICAgcmV0dXJuIHsuLi5vcHRpb24sIHZhbHVlOiB0aGlzLmZvcm1hdEZvckRpc3BsYXkob3B0aW9uLnZhbHVlKX07XG4gICAgfSk7XG4gIH1cblxuICBjbG9zZU1vZGFsKCkge1xuICAgIHRoaXMuc2hvd01vZGFsID0gZmFsc2U7XG4gIH1cblxuICBzYXZlQ29udGFjdEluZm8oKSB7XG4gICAgLy8gQ29weSBlZGl0ZWQgZGVsaXZlcnkgb3B0aW9ucyBiYWNrIHRvIHN0b3JhZ2VcbiAgICB0aGlzLnN1YnNjcmliZXIuZGVsaXZlcnlPcHRpb25zID0gdGhpcy5lZGl0ZWRPcHRpb25zLm1hcChvcHRpb24gPT4ge1xuICAgICAgcmV0dXJuIHsuLi5vcHRpb24sIHZhbHVlOiB0aGlzLmZvcm1hdEZvckRCKG9wdGlvbi52YWx1ZSl9O1xuICAgIH0pO1xuXG4gICAgdGhpcy5zdWJTZXJ2aWNlLnVwZGF0ZVN1YnNjcmliZXIodGhpcy5zdWJzY3JpYmVyKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgdGhpcy5jbG9zZU1vZGFsKCk7XG4gICAgfSk7XG5cbiAgICB0aGlzLnNhdmUuZW1pdChudWxsKTtcbiAgfVxuXG4gIGNhbmNlbCgpIHtcbiAgICB0aGlzLnNob3dNb2RhbCA9IGZhbHNlO1xuICB9XG5cbiAgLy8gRm9ybWF0IHRoZSBwaG9uZSBudW1iZXIgYXMgYSBzdGFuZGFyZCBkaXNwbGF5IGZvcm1hdFxuICBmb3JtYXRGb3JEaXNwbGF5KGlucHV0OiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIGlmICh0aGlzLmUxNjRQYXR0ZXJuLnRlc3QoaW5wdXQpKSB7XG4gICAgICByZXR1cm4gaW5wdXQucmVwbGFjZSh0aGlzLmUxNjRQYXR0ZXJuLCAnKCQxKSAkMi0kMycpO1xuICAgIH1cbiAgICByZXR1cm4gaW5wdXQ7XG4gIH1cblxuICAvLyBGb3JtYXQgdGhlIHBob25lIGFzIEUuMTY0IGZvciBzdG9yYWdlIGluIHRoZSBkYXRhYmFzZVxuICBmb3JtYXRGb3JEQihpbnB1dDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAvLyBNYWtlIHN1cmUgaXRzIGEgcGhvbmUgbnVtYmVyXG4gICAgaWYgKHRoaXMucGhvbmVQYXR0ZXJuLnRlc3QoaW5wdXQpKSB7XG4gICAgICByZXR1cm4gaW5wdXQucmVwbGFjZSh0aGlzLnBob25lUGF0dGVybiwgJysxJDEkMiQzJyk7XG4gICAgfVxuICAgIC8vIE90aGVyd2lzZSwgcmV0dXJuIGFzIGlzLlxuICAgIHJldHVybiBpbnB1dDtcbiAgfVxuXG59XG4iXX0=