chi-app-lib
Version:
This is a custom component (input dropdown grid textarea map captcha) published to npm.
1,584 lines (1,579 loc) • 64.5 kB
JavaScript
import { forwardRef, EventEmitter, Component, ChangeDetectorRef, Input, Output, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CdkTableModule } from '@angular/cdk/table';
import { MatInputModule, MatButtonModule, MatIconModule, MatSelectModule, MatTableModule, MatTooltipModule } from '@angular/material';
import { Map, NavigationControl, Marker } from 'mapbox-gl';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var noop = (/**
* @return {?}
*/
function () {
});
var ɵ0 = noop;
/**
* Error when invalid control is dirty or touched
*/
var /**
* Error when invalid control is dirty or touched
*/
MyErrorStateMatcher = /** @class */ (function () {
function MyErrorStateMatcher() {
}
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
MyErrorStateMatcher.prototype.isErrorState = /**
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
};
return MyErrorStateMatcher;
}());
/** @type {?} */
var CHI_INPUT_COMPONENT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return ChiInputComponent; })),
multi: true
};
var ChiInputComponent = /** @class */ (function () {
function ChiInputComponent(cdRef) {
this.cdRef = cdRef;
this.type = 'text';
this.direction = 'rtl';
this.floatLabel = 'auto'; // never
// never
this.pattern = '';
this.petternMessage = 'رقم غیر صحیح!';
this.showValidatorMessage = true;
this.showSuffix = false;
this.suffixIcon = 'close';
this.suffixClicked = new EventEmitter();
this.isValid = new EventEmitter();
this.matcher = new MyErrorStateMatcher();
this.id = 'chi-input' + this.idGenerator();
this.element = new FormControl('');
// The internal data model
this.innerValue = '';
// Placeholders for the callbacks which are later provided
// by the Control Value Accessor
this.onTouchedCallback = noop;
this.onChangeCallback = noop;
this.faNumberToEn = (/**
* @param {?} value
* @return {?}
*/
function (value) {
if (!value) {
return value;
}
/** @type {?} */
var d = '';
/** @type {?} */
var a = '۰۱۲۳۴۵۶۷۸۹';
/** @type {?} */
var b = '0123456789';
/** @type {?} */
var c = value.toString();
for (var i = 0, len = c.length; i < len; i++) {
d += b[a.indexOf(c[i])] || c[i];
}
return d;
});
this.toPersianChar = (/**
* @param {?} value
* @return {?}
*/
function (value) {
if (!value) {
return value;
}
/** @type {?} */
var arabicChars = ['ي', 'ك', 'ى'];
/** @type {?} */
var persianChars = ['ی', 'ک', 'ی'];
for (var i = 0, charsLen = arabicChars.length; i < charsLen; i++) {
value = value.replace(new RegExp(arabicChars[i], 'g'), persianChars[i]);
}
return value;
});
}
Object.defineProperty(ChiInputComponent.prototype, "value", {
//
// get accessor
get:
//
// get accessor
/**
* @return {?}
*/
function () {
return this.toPersianChar(this.faNumberToEn(this.innerValue));
},
// set accessor including call the onchange callback
set:
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
},
enumerable: true,
configurable: true
});
// Set touched on blur
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
ChiInputComponent.prototype.onBlur =
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
ChiInputComponent.prototype.writeValue =
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
ChiInputComponent.prototype.registerOnChange =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
ChiInputComponent.prototype.registerOnTouched =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
ChiInputComponent.prototype.changedInput = /**
* @param {?} event
* @param {?} validate
* @return {?}
*/
function (event, validate) {
var _this = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
};
/**
* @param {?} validate
* @return {?}
*/
ChiInputComponent.prototype.onFocused = /**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.isValid.emit(this.element.valid);
};
/**
* @return {?}
*/
ChiInputComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.required && this.minLength && this.maxLength && this.pattern) {
this.element = new FormControl('', [
Validators.required,
Validators.pattern(this.pattern),
Validators.minLength(this.minLength),
Validators.maxLength(this.maxLength)
]);
}
else if (this.required && !this.minLength && !this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.required]);
}
else if (!this.required && !this.minLength && !this.maxLength && this.pattern) {
this.element = new FormControl('', [Validators.maxLength(this.maxLength)]);
}
else if (!this.required && this.minLength && !this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.minLength(this.minLength)]);
}
else if (!this.required && !this.minLength && this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.maxLength(this.maxLength)]);
}
else if (!this.required && this.minLength && this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.maxLength(this.maxLength), Validators.minLength(this.minLength)]);
}
};
/**
* @param {?} changes
* @return {?}
*/
ChiInputComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var name = changes.isDirty;
if ((name || {})['currentValue']) {
this.element.markAsDirty({ onlySelf: true });
}
};
/**
* @return {?}
*/
ChiInputComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
if (this.focuse) {
this.inputEl.nativeElement.focus();
this.cdRef.detectChanges();
}
};
/**
* @return {?}
*/
ChiInputComponent.prototype.getErrorMessage = /**
* @return {?}
*/
function () {
return this.element.hasError('required') ? ' لا يمكن أن يكون هذا الحقل فارغًا!' :
this.element.hasError('pattern') ? this.petternMessage :
this.element.hasError('minlength') ? ' حداقل ' + this.minLength + ' کاراکتر وارد نمایید!' :
this.element.hasError('maxlength') ? ' حداکثر ' + this.maxLength + ' کاراکتر وارد نمایید!' :
'';
};
/**
* @param {?} val
* @return {?}
*/
ChiInputComponent.prototype.suffixClick = /**
* @param {?} val
* @return {?}
*/
function (val) {
// if (this.element.invalid && this.suffixIcon !== 'close') {
// return;
// }
if (this.suffixIcon === 'close') {
this.value = '';
}
this.suffixClicked.emit({ value: val, action: this.suffixIcon });
};
/**
* @return {?}
*/
ChiInputComponent.prototype.idGenerator = /**
* @return {?}
*/
function () {
/** @type {?} */
var number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
};
ChiInputComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-chi-input',
template: "<div class=\"element-container\" [ngClass]=\"className\" dir=\"{{direction}}\">\n <mat-form-field [hideRequiredMarker]=\"true\" floatLabel=\"{{floatLabel}}\">\n <input matInput\n id=\"{{id}}\"\n #input\n placeholder=\"{{placeHolder}}\"\n [formControl]=\"element\"\n required=\"{{required}}\"\n type=\"{{type}}\"\n [readonly]=\"readonly\"\n [(ngModel)]=\"value\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength\"\n pattern=\"{{pattern}}\"\n (ngModelChange)=\"changedInput($event,element.valid)\"\n (focus)=\"onFocused(element.valid)\"\n (blur)=\"onBlur(element.valid)\"\n [errorStateMatcher]=\"matcher\">\n <button mat-button *ngIf=\"showSuffix\" matSuffix mat-icon-button aria-label=\"Clear\"\n [disabled]=\"!element.value\"\n (click)=\"suffixClick(value)\">\n <mat-icon>{{suffixIcon}}</mat-icon>\n </button>\n <mat-hint align=\"start\" *ngIf=\"hintText\"><strong>{{hintText}}</strong></mat-hint>\n <mat-error *ngIf=\"element.invalid&&showValidatorMessage\">{{getErrorMessage()}}</mat-error>\n </mat-form-field>\n</div>\n",
providers: [CHI_INPUT_COMPONENT_CONTROL_VALUE_ACCESSOR],
styles: [".element-container{display:flex;flex-direction:column}.element-container>*{width:100%}"]
}] }
];
/** @nocollapse */
ChiInputComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef }
]; };
ChiInputComponent.propDecorators = {
type: [{ type: Input }],
direction: [{ type: Input }],
floatLabel: [{ type: Input }],
pattern: [{ type: Input }],
petternMessage: [{ type: Input }],
className: [{ type: Input }],
readonly: [{ type: Input }],
required: [{ type: Input }],
placeHolder: [{ type: Input }],
hintText: [{ type: Input }],
minLength: [{ type: Input }],
maxLength: [{ type: Input }],
showValidatorMessage: [{ type: Input }],
showSuffix: [{ type: Input }],
suffixIcon: [{ type: Input }],
isDirty: [{ type: Input }],
focuse: [{ type: Input }],
suffixClicked: [{ type: Output }],
isValid: [{ type: Output }],
inputEl: [{ type: ViewChild, args: ['input', { static: false },] }]
};
return ChiInputComponent;
}());
if (false) {
/** @type {?} */
ChiInputComponent.prototype.type;
/** @type {?} */
ChiInputComponent.prototype.direction;
/** @type {?} */
ChiInputComponent.prototype.floatLabel;
/** @type {?} */
ChiInputComponent.prototype.pattern;
/** @type {?} */
ChiInputComponent.prototype.petternMessage;
/** @type {?} */
ChiInputComponent.prototype.className;
/** @type {?} */
ChiInputComponent.prototype.readonly;
/** @type {?} */
ChiInputComponent.prototype.required;
/** @type {?} */
ChiInputComponent.prototype.placeHolder;
/** @type {?} */
ChiInputComponent.prototype.hintText;
/** @type {?} */
ChiInputComponent.prototype.minLength;
/** @type {?} */
ChiInputComponent.prototype.maxLength;
/** @type {?} */
ChiInputComponent.prototype.showValidatorMessage;
/** @type {?} */
ChiInputComponent.prototype.showSuffix;
/** @type {?} */
ChiInputComponent.prototype.suffixIcon;
/** @type {?} */
ChiInputComponent.prototype.isDirty;
/** @type {?} */
ChiInputComponent.prototype.focuse;
/** @type {?} */
ChiInputComponent.prototype.suffixClicked;
/** @type {?} */
ChiInputComponent.prototype.isValid;
/** @type {?} */
ChiInputComponent.prototype.name;
/** @type {?} */
ChiInputComponent.prototype.matcher;
/** @type {?} */
ChiInputComponent.prototype.id;
/** @type {?} */
ChiInputComponent.prototype.element;
/** @type {?} */
ChiInputComponent.prototype.inputEl;
/**
* @type {?}
* @private
*/
ChiInputComponent.prototype.innerValue;
/**
* @type {?}
* @private
*/
ChiInputComponent.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
ChiInputComponent.prototype.onChangeCallback;
/** @type {?} */
ChiInputComponent.prototype.faNumberToEn;
/** @type {?} */
ChiInputComponent.prototype.toPersianChar;
/**
* @type {?}
* @private
*/
ChiInputComponent.prototype.cdRef;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var noop$1 = (/**
* @return {?}
*/
function () {
});
var ɵ0$1 = noop$1;
/**
* Error when invalid control is dirty or touched
*/
var /**
* Error when invalid control is dirty or touched
*/
TextAreaErrorStateMatcher = /** @class */ (function () {
function TextAreaErrorStateMatcher() {
}
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
TextAreaErrorStateMatcher.prototype.isErrorState = /**
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
};
return TextAreaErrorStateMatcher;
}());
/** @type {?} */
var Text_Area_Component_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return TextAreaComponent; })),
multi: true
};
var TextAreaComponent = /** @class */ (function () {
function TextAreaComponent() {
this.type = 'text';
this.direction = 'rtl';
this.pattern = '';
this.showValidatorMessage = true;
this.isValid = new EventEmitter();
this.matcher = new TextAreaErrorStateMatcher();
this.id = 'chi-textarea' + this.idGenerator();
this.element = new FormControl('');
// The internal data model
this.innerValue = '';
// Placeholders for the callbacks which are later provided
// by the Control Value Accessor
this.onTouchedCallback = noop$1;
this.onChangeCallback = noop$1;
if (this.required && this.minLength && this.maxLength && this.pattern) {
this.element = new FormControl('', [
Validators.required,
Validators.pattern(this.pattern),
Validators.minLength(this.minLength),
Validators.maxLength(this.maxLength)
]);
}
else if (this.required && !this.minLength && !this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.required]);
}
else if (!this.required && !this.minLength && !this.maxLength && this.pattern) {
this.element = new FormControl('', [Validators.maxLength(this.maxLength)]);
}
else if (!this.required && this.minLength && !this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.minLength(this.minLength)]);
}
else if (!this.required && !this.minLength && this.maxLength && !this.pattern) {
this.element = new FormControl('', [Validators.maxLength(this.maxLength)]);
}
}
Object.defineProperty(TextAreaComponent.prototype, "value", {
//
// get accessor
get:
//
// get accessor
/**
* @return {?}
*/
function () {
return this.innerValue;
},
// set accessor including call the onchange callback
set:
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
},
enumerable: true,
configurable: true
});
// Set touched on blur
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
TextAreaComponent.prototype.onBlur =
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
TextAreaComponent.prototype.writeValue =
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
TextAreaComponent.prototype.registerOnChange =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
TextAreaComponent.prototype.registerOnTouched =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
TextAreaComponent.prototype.changedInput = /**
* @param {?} event
* @param {?} validate
* @return {?}
*/
function (event, validate) {
var _this = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
};
/**
* @param {?} validate
* @return {?}
*/
TextAreaComponent.prototype.onFocused = /**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.isValid.emit(this.element.valid);
};
/**
* @return {?}
*/
TextAreaComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} changes
* @return {?}
*/
TextAreaComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var name = changes.isDirty;
if ((name || {})['currentValue']) {
this.element.markAsDirty({ onlySelf: true });
}
};
/**
* @return {?}
*/
TextAreaComponent.prototype.getErrorMessage = /**
* @return {?}
*/
function () {
return this.element.hasError('required') ? ' لا يمكن أن يكون هذا الحقل فارغًا!' :
this.element.hasError('pattern') ? 'رقم غیر صحیح!' :
this.element.hasError('minlength') ? ' حداقل ' + this.minLength + ' کاراکتر وارد نمایید!' :
this.element.hasError('maxlength') ? ' حداکثر ' + this.maxLength + ' کاراکتر وارد نمایید!' :
'';
};
/**
* @param {?} val
* @return {?}
*/
TextAreaComponent.prototype.getElement = /**
* @param {?} val
* @return {?}
*/
function (val) {
// console.log(val);
};
/**
* @return {?}
*/
TextAreaComponent.prototype.idGenerator = /**
* @return {?}
*/
function () {
/** @type {?} */
var number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
};
TextAreaComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-text-area',
template: "<div class=\"element-container\" [ngClass]=\"className\" dir=\"{{direction}}\">\n <mat-form-field [hideRequiredMarker]=\"true\">\n <textarea matInput\n id=\"{{id}}\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"2\"\n cdkAutosizeMaxRows=\"5\"\n placeholder=\"{{placeHolder}}\"\n [formControl]=\"element\"\n required=\"{{required}}\"\n [(ngModel)]=\"value\"\n (input)=\"getElement($event)\"\n [disabled]=\"readonly\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength\"\n (ngModelChange)=\"changedInput($event,element.valid)\"\n (focus)=\"onFocused(element.valid)\"\n (blur)=\"onBlur(element.valid)\"\n [errorStateMatcher]=\"matcher\">\n </textarea>\n\n <mat-hint align=\"end\" *ngIf=\"showCountValue\">\n {{(value || '').length}}/{{maxLength}}\n </mat-hint>\n\n <mat-hint align=\"start\" *ngIf=\"hintText\"><strong>{{hintText}}</strong></mat-hint>\n <mat-error *ngIf=\"element.invalid&&showValidatorMessage\">{{getErrorMessage()}}</mat-error>\n </mat-form-field>\n</div>\n",
providers: [Text_Area_Component_CONTROL_VALUE_ACCESSOR],
styles: [".element-container{display:flex;flex-direction:column}.element-container>*{width:100%}"]
}] }
];
/** @nocollapse */
TextAreaComponent.ctorParameters = function () { return []; };
TextAreaComponent.propDecorators = {
type: [{ type: Input }],
direction: [{ type: Input }],
pattern: [{ type: Input }],
className: [{ type: Input }],
readonly: [{ type: Input }],
required: [{ type: Input }],
placeHolder: [{ type: Input }],
hintText: [{ type: Input }],
minLength: [{ type: Input }],
maxLength: [{ type: Input }],
showCountValue: [{ type: Input }],
isDirty: [{ type: Input }],
showValidatorMessage: [{ type: Input }],
isValid: [{ type: Output }]
};
return TextAreaComponent;
}());
if (false) {
/** @type {?} */
TextAreaComponent.prototype.type;
/** @type {?} */
TextAreaComponent.prototype.direction;
/** @type {?} */
TextAreaComponent.prototype.pattern;
/** @type {?} */
TextAreaComponent.prototype.className;
/** @type {?} */
TextAreaComponent.prototype.readonly;
/** @type {?} */
TextAreaComponent.prototype.required;
/** @type {?} */
TextAreaComponent.prototype.placeHolder;
/** @type {?} */
TextAreaComponent.prototype.hintText;
/** @type {?} */
TextAreaComponent.prototype.minLength;
/** @type {?} */
TextAreaComponent.prototype.maxLength;
/** @type {?} */
TextAreaComponent.prototype.showCountValue;
/** @type {?} */
TextAreaComponent.prototype.isDirty;
/** @type {?} */
TextAreaComponent.prototype.showValidatorMessage;
/** @type {?} */
TextAreaComponent.prototype.isValid;
/** @type {?} */
TextAreaComponent.prototype.name;
/** @type {?} */
TextAreaComponent.prototype.matcher;
/** @type {?} */
TextAreaComponent.prototype.id;
/** @type {?} */
TextAreaComponent.prototype.element;
/**
* @type {?}
* @private
*/
TextAreaComponent.prototype.innerValue;
/**
* @type {?}
* @private
*/
TextAreaComponent.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
TextAreaComponent.prototype.onChangeCallback;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ChiMapComponent = /** @class */ (function () {
function ChiMapComponent() {
this.marker = [];
this.id = this.idGenerator();
this.maxZoom = 18;
this.minZoom = 5;
this.zoom = 5;
this.center = [51.4, 35.7];
this.southWest = { lat: 24.350969, lng: 44.0 };
this.northEast = { lat: 39.912996, lng: 63.5 };
this.mode = 'select'; // view
// view
this.zoomControl = true;
this.dragging = true;
this.zoomMarker = 17;
this.showMarker = true;
this.coordinate = new EventEmitter();
this.getMap = new EventEmitter();
// (mapboxgl as any).accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoieUZiWmwtVSJ9.0cPQywdbPVmvHiHJ6NwdXA';
}
/**
* @param {?} changes
* @return {?}
*/
ChiMapComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var height = changes.height;
/** @type {?} */
var isDrag = changes.dragging;
/** @type {?} */
var coordinateOrigin = changes.resetCoordinate;
if ((coordinateOrigin || {})['currentValue']) {
this.resetMarker();
}
if ((isDrag || {})['currentValue'] === false || (isDrag || {})['currentValue'] === true) {
this.disabledDrag();
}
};
/**
* @return {?}
*/
ChiMapComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.initMap();
}), 100);
};
/**
* @return {?}
*/
ChiMapComponent.prototype.idGenerator = /**
* @return {?}
*/
function () {
/** @type {?} */
var number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
};
/**
* @return {?}
*/
ChiMapComponent.prototype.disabledDrag = /**
* @return {?}
*/
function () {
if (!this.map) {
return;
}
if (!this.dragging) {
this.map.dragPan.disable();
}
else {
this.map.dragPan.enable();
}
};
/**
* @param {?} url
* @param {?} resourceType
* @return {?}
*/
ChiMapComponent.prototype.encryptTileUrl = /**
* @param {?} url
* @param {?} resourceType
* @return {?}
*/
function (url, resourceType) {
if (resourceType === 'Tile' && url.match('hash')) {
/** @type {?} */
var arr = url.split('/');
url = url.split('hash')[0] + 'hash/' + hashThis(arr[arr.length - 3] + '/' + arr[arr.length - 2] + '/' + arr[arr.length - 1], true);
return {
url: url
};
}
if (resourceType === 'Tile' && url.match('google')) {
/** @type {?} */
var arr = (url.split('pl&'))[1].split('/');
/** @type {?} */
var a = url.split('&');
url = (a[0] + '&' + a[1] + '&x=' + arr[arr.length - 2] + '&y=' + arr[arr.length - 1] + '&z=' + arr[arr.length - 3]).replace('.jpeg', '');
return {
url: url
};
}
else {
return {
url: url
};
}
};
/**
* @return {?}
*/
ChiMapComponent.prototype.initMap = /**
* @return {?}
*/
function () {
var _this = this;
this.map = new Map({
transformRequest: this.encryptTileUrl,
container: 'chi-map' + this.id,
// container id
style: {
'version': 8,
'sources': {
'simple-tiles': {
'type': 'raster',
// point to our third-party tiles. Note that some examples
// show a 'url' property. This only applies to tilesets with
// corresponding TileJSON (such as mapbox tiles).
'tiles': [this.mapUrl],
'tileSize': 256
}
},
'layers': [{
'id': 'simple-tiles',
'type': 'raster',
'source': 'simple-tiles'
}]
},
center: this.center,
zoom: this.minZoom,
// starting zoom
minZoom: this.minZoom,
maxZoom: this.maxZoom,
maxBounds: [[this.southWest.lng, this.southWest.lat], [this.northEast.lng, this.northEast.lat]]
});
this.map.scrollZoom.setWheelZoomRate(1);
/** @type {?} */
var nav = new NavigationControl({
showCompass: false,
showZoom: this.zoomControl
});
this.map.addControl(nav, 'top-left');
// disable map rotation using right click + drag
this.map.dragRotate.disable();
// disable map rotation using touch rotation gesture
this.map.touchZoomRotate.disableRotation();
this.map.dragRotate.disable();
if (this.zoomControl) {
this.map.scrollZoom.enable();
}
else {
this.map.scrollZoom.disable();
}
this.disabledDrag();
if (this.mode === 'select') {
this.map.on('dragstart', (/**
* @param {?} evt
* @return {?}
*/
function (evt) {
_this.updateCoordinate();
}));
this.map.on('drag', (/**
* @param {?} evt
* @return {?}
*/
function (evt) {
_this.updateCoordinate();
}));
this.map.on('dragend', (/**
* @param {?} evt
* @return {?}
*/
function (evt) {
_this.updateCoordinate();
}));
this.map.on('zoomend', (/**
* @param {?} evt
* @return {?}
*/
function (evt) {
_this.updateCoordinate();
}));
}
if (this.showMarker) {
this.setMarker();
}
this.getMap.emit(this.map);
};
/**
* @return {?}
*/
ChiMapComponent.prototype.updateCoordinate = /**
* @return {?}
*/
function () {
/** @type {?} */
var center = this.map.getCenter();
this.updatePositionMarker(center.lat, center.lng);
this.coordinate.emit(center);
};
/**
* @return {?}
*/
ChiMapComponent.prototype.setMarker = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var positionMarker = this.coordinateMarker || this.map.getCenter();
/** @type {?} */
var geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'iconSize': this.markerSize
},
'geometry': {
'type': 'Point',
'coordinates': positionMarker
}
}
]
};
// add markers to map
geojson.features.forEach((/**
* @param {?} marker
* @return {?}
*/
function (marker) {
// create a DOM element for the marker
/** @type {?} */
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(' + _this.markerUrl + ')';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.draggable = false;
// add marker to map
/** @type {?} */
var markerIcon = new Marker(el, { offset: _this.markerAnchor })
.setLngLat(marker.geometry.coordinates)
.addTo(_this.map);
_this.marker.push(markerIcon);
}));
this.paneToMarker(positionMarker.lat, positionMarker.lng || positionMarker.lon);
this.coordinate.emit(positionMarker);
};
/**
* @param {?} lat
* @param {?} lng
* @return {?}
*/
ChiMapComponent.prototype.paneToMarker = /**
* @param {?} lat
* @param {?} lng
* @return {?}
*/
function (lat, lng) {
this.map.flyTo({
// These options control the ending camera position: centered at
// the target, at zoom level 9, and north up.
center: [lng, lat],
zoom: this.zoomMarker
});
};
/**
* @param {?} lat
* @param {?} lng
* @return {?}
*/
ChiMapComponent.prototype.updatePositionMarker = /**
* @param {?} lat
* @param {?} lng
* @return {?}
*/
function (lat, lng) {
for (var i = 0; i < this.marker.length; i++) {
this.marker[i]._lngLat = { lat: lat, lng: lng };
this.marker[i]._update();
}
};
/**
* @return {?}
*/
ChiMapComponent.prototype.resetMarker = /**
* @return {?}
*/
function () {
this.updatePositionMarker(this.coordinateMarker.lat, this.coordinateMarker.lng);
this.paneToMarker(this.coordinateMarker.lat, this.coordinateMarker.lng || this.coordinateMarker.lon);
};
ChiMapComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-chi-map',
template: "<div id=\"chi-map{{id}}\" [ngStyle]=\"{'width': width , 'height': height}\" class=\"chi-map\"></div>\n",
styles: [".chi-map{position:relative;direction:rtl;z-index:10021;transition:height .5s ease-in-out}"]
}] }
];
/** @nocollapse */
ChiMapComponent.ctorParameters = function () { return []; };
ChiMapComponent.propDecorators = {
mapUrl: [{ type: Input }],
maxZoom: [{ type: Input }],
minZoom: [{ type: Input }],
zoom: [{ type: Input }],
center: [{ type: Input }],
southWest: [{ type: Input }],
northEast: [{ type: Input }],
mode: [{ type: Input }],
zoomControl: [{ type: Input }],
dragging: [{ type: Input }],
markerUrl: [{ type: Input }],
markerSize: [{ type: Input }],
markerAnchor: [{ type: Input }],
coordinateMarker: [{ type: Input }],
resetCoordinate: [{ type: Input }],
zoomMarker: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
showMarker: [{ type: Input }],
coordinate: [{ type: Output }],
getMap: [{ type: Output }]
};
return ChiMapComponent;
}());
if (false) {
/** @type {?} */
ChiMapComponent.prototype.map;
/** @type {?} */
ChiMapComponent.prototype.baseMaps;
/** @type {?} */
ChiMapComponent.prototype.mapOptions;
/** @type {?} */
ChiMapComponent.prototype.marker;
/** @type {?} */
ChiMapComponent.prototype.id;
/** @type {?} */
ChiMapComponent.prototype.mapUrl;
/** @type {?} */
ChiMapComponent.prototype.maxZoom;
/** @type {?} */
ChiMapComponent.prototype.minZoom;
/** @type {?} */
ChiMapComponent.prototype.zoom;
/** @type {?} */
ChiMapComponent.prototype.center;
/** @type {?} */
ChiMapComponent.prototype.southWest;
/** @type {?} */
ChiMapComponent.prototype.northEast;
/** @type {?} */
ChiMapComponent.prototype.mode;
/** @type {?} */
ChiMapComponent.prototype.zoomControl;
/** @type {?} */
ChiMapComponent.prototype.dragging;
/** @type {?} */
ChiMapComponent.prototype.markerUrl;
/** @type {?} */
ChiMapComponent.prototype.markerSize;
/** @type {?} */
ChiMapComponent.prototype.markerAnchor;
/** @type {?} */
ChiMapComponent.prototype.coordinateMarker;
/** @type {?} */
ChiMapComponent.prototype.resetCoordinate;
/** @type {?} */
ChiMapComponent.prototype.zoomMarker;
/** @type {?} */
ChiMapComponent.prototype.width;
/** @type {?} */
ChiMapComponent.prototype.height;
/** @type {?} */
ChiMapComponent.prototype.showMarker;
/** @type {?} */
ChiMapComponent.prototype.coordinate;
/** @type {?} */
ChiMapComponent.prototype.getMap;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CaptchaComponent = /** @class */ (function () {
function CaptchaComponent() {
this.refreshIcon = 'refresh';
this.key = new EventEmitter();
this.id = 'captcha' + this.idGenerator();
}
/**
* @return {?}
*/
CaptchaComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.createCpatcha();
};
/**
* @param {?} changes
* @return {?}
*/
CaptchaComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var name = changes.isRefreshImage;
if (name.currentValue) {
this.createCpatcha();
}
};
/**
* @return {?}
*/
CaptchaComponent.prototype.createCpatcha = /**
* @return {?}
*/
function () {
/** @type {?} */
var captchaKey = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
this.imageLink = this.imageUrl + captchaKey;
this.key.emit(captchaKey);
this.isRefreshImage = false;
};
/**
* @return {?}
*/
CaptchaComponent.prototype.idGenerator = /**
* @return {?}
*/
function () {
/** @type {?} */
var number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
};
CaptchaComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-captcha',
template: "<div class=\"element-container\" id=\"{{id}}\" [ngClass]=\"className\">\n <div>\n <img src=\"{{imageLink}}\" width=\"100%\">\n </div>\n <button mat-button mat-icon-button\n [ngClass]=\"iconClass\"\n (click)=\"createCpatcha()\">\n <mat-icon>{{refreshIcon}}</mat-icon>\n </button>\n</div>\n",
styles: [".element-container{display:flex;flex-direction:row}.element-container>button{display:flex;place-content:center;justify-content:center}"]
}] }
];
/** @nocollapse */
CaptchaComponent.ctorParameters = function () { return []; };
CaptchaComponent.propDecorators = {
imageUrl: [{ type: Input }],
className: [{ type: Input }],
iconClass: [{ type: Input }],
refreshIcon: [{ type: Input }],
isRefreshImage: [{ type: Input }],
key: [{ type: Output }]
};
return CaptchaComponent;
}());
if (false) {
/** @type {?} */
CaptchaComponent.prototype.imageUrl;
/** @type {?} */
CaptchaComponent.prototype.className;
/** @type {?} */
CaptchaComponent.prototype.iconClass;
/** @type {?} */
CaptchaComponent.prototype.refreshIcon;
/** @type {?} */
CaptchaComponent.prototype.isRefreshImage;
/** @type {?} */
CaptchaComponent.prototype.key;
/** @type {?} */
CaptchaComponent.prototype.imageLink;
/** @type {?} */
CaptchaComponent.prototype.id;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var noop$2 = (/**
* @return {?}
*/
function () {
});
var ɵ0$2 = noop$2;
/**
* Error when invalid control is dirty or touched
*/
var /**
* Error when invalid control is dirty or touched
*/
DropdownErrorStateMatcher = /** @class */ (function () {
function DropdownErrorStateMatcher() {
}
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
DropdownErrorStateMatcher.prototype.isErrorState = /**
* @param {?} control
* @param {?} form
* @return {?}
*/
function (control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
};
return DropdownErrorStateMatcher;
}());
/** @type {?} */
var DROPDOWN_COMPONENT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return DropdownComponent; })),
multi: true
};
var DropdownComponent = /** @class */ (function () {
function DropdownComponent(ref) {
this.ref = ref;
this.options = [];
this.direction = 'rtl';
this.floatLabel = 'auto'; // never
// never
this.pattern = '';
this.showValidatorMessage = true;
this.isValid = new EventEmitter();
this.valueChanged = new EventEmitter();
this.matcher = new DropdownErrorStateMatcher();
this.id = 'chi-input' + this.idGenerator();
this.element = new FormControl('');
// The internal data model
this.innerValue = '';
// Placeholders for the callbacks which are later provided
// by the Control Value Accessor
this.onTouchedCallback = noop$2;
this.onChangeCallback = noop$2;
}
Object.defineProperty(DropdownComponent.prototype, "value", {
//
// get accessor
get:
//
// get accessor
/**
* @return {?}
*/
function () {
return this.innerValue;
},
// set accessor including call the onchange callback
set:
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
},
enumerable: true,
configurable: true
});
// Set touched on blur
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
DropdownComponent.prototype.onBlur =
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
DropdownComponent.prototype.writeValue =
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
function (value) {
var _this = this;
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
}), 100);
}
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
DropdownComponent.prototype.registerOnChange =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChangeCallback = fn;
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
DropdownComponent.prototype.registerOnTouched =
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouchedCallback = fn;
};
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
DropdownComponent.prototype.changedInput = /**
* @param {?} event
* @param {?} validate
* @return {?}
*/
function (event, validate) {
var _this = this;
setTimeout((/**
* @param {?} _
* @return {?}
*/
function (_) {
_this.isValid.emit(_this.element.valid);
_this.valueChanged.emit(_this.value);
}), 100);
};
/**
* @param {?} validate
* @return {?}
*/
DropdownComponent.prototype.onFocused = /**
* @param {?} validate
* @return {?}
*/
function (validate) {
this.isValid.emit(this.element.valid);
};
/**
* @return {?}
*/
DropdownComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} changes
* @return {?}
*/
DropdownComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
/** @type {?} */
var name = changes.isDirty;
if ((name || {})['currentValue']) {
this.ref.markForCheck();
this.element.markAsDirty({ onlySelf: true });
}
};
/**
* @return {?}
*/
DropdownComponent.prototype.getErrorMessage = /**
* @return {?}
*/
function () {
return this.element.hasError('required') ? ' لا يمكن أن يكون هذا الحقل فارغًا!' : '';
};
/**
* @return {?}
*/
DropdownComponent.prototype.idGenerator = /**
* @return {?}
*/
function () {
/** @type {?} */
var number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
};
DropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-dropdown',
template: "<div class=\"element-container\" [ngClass]=\"className\" dir=\"{{direction}}\">\n <mat-form-field [hideRequiredMarker]=\"true\" floatLabel=\"{{floatLabel}}\" >\n <mat-label>{{placeHolder}}</mat-label>\n <mat-select [(ngModel)]=\"value\"\n [formControl]=\"element\"\n [errorStateMatcher]=\"matcher\"\n [disableOptionCentering]=\"true\"\n #itemSelect\n required=\"{{required}}\"\n [disabled]=\"readonly\"\n (valueChange)=\"changedInput($event,element.valid)\">\n <mat-option *ngFor=\"let item of options\" [value]=\"item.value\">\n {{item.viewValue}}\n </mat-option>\n </mat-select>\n <mat-error *ngIf=\"element.invalid&&showValidatorMessage\">{{getErrorMessage()}}</mat-error>\n </mat-form-field>\n</div>\