chi-app-lib
Version:
This is a custom component (input dropdown grid textarea map captcha) published to npm.
1,466 lines (1,460 loc) • 54.7 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 {?} */
const noop = (/**
* @return {?}
*/
() => {
});
const ɵ0 = noop;
/**
* Error when invalid control is dirty or touched
*/
class MyErrorStateMatcher {
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
isErrorState(control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}
/** @type {?} */
const CHI_INPUT_COMPONENT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => ChiInputComponent)),
multi: true
};
class ChiInputComponent {
/**
* @param {?} cdRef
*/
constructor(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 {?}
*/
(value) => {
if (!value) {
return value;
}
/** @type {?} */
let d = '';
/** @type {?} */
const a = '۰۱۲۳۴۵۶۷۸۹';
/** @type {?} */
const b = '0123456789';
/** @type {?} */
const c = value.toString();
for (let i = 0, len = c.length; i < len; i++) {
d += b[a.indexOf(c[i])] || c[i];
}
return d;
});
this.toPersianChar = (/**
* @param {?} value
* @return {?}
*/
(value) => {
if (!value) {
return value;
}
/** @type {?} */
const arabicChars = ['ي', 'ك', 'ى'];
/** @type {?} */
const persianChars = ['ی', 'ک', 'ی'];
for (let i = 0, charsLen = arabicChars.length; i < charsLen; i++) {
value = value.replace(new RegExp(arabicChars[i], 'g'), persianChars[i]);
}
return value;
});
}
//
// get accessor
/**
* @return {?}
*/
get value() {
return this.toPersianChar(this.faNumberToEn(this.innerValue));
}
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
onBlur(validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
}
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
changedInput(event, validate) {
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
/**
* @param {?} validate
* @return {?}
*/
onFocused(validate) {
this.isValid.emit(this.element.valid);
}
/**
* @return {?}
*/
ngOnInit() {
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 {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.isDirty;
if ((name || {})['currentValue']) {
this.element.markAsDirty({ onlySelf: true });
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (this.focuse) {
this.inputEl.nativeElement.focus();
this.cdRef.detectChanges();
}
}
/**
* @return {?}
*/
getErrorMessage() {
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 {?}
*/
suffixClick(val) {
// if (this.element.invalid && this.suffixIcon !== 'close') {
// return;
// }
if (this.suffixIcon === 'close') {
this.value = '';
}
this.suffixClicked.emit({ value: val, action: this.suffixIcon });
}
/**
* @return {?}
*/
idGenerator() {
/** @type {?} */
const 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 = () => [
{ 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 },] }]
};
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 {?} */
const noop$1 = (/**
* @return {?}
*/
() => {
});
const ɵ0$1 = noop$1;
/**
* Error when invalid control is dirty or touched
*/
class TextAreaErrorStateMatcher {
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
isErrorState(control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}
/** @type {?} */
const Text_Area_Component_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => TextAreaComponent)),
multi: true
};
class TextAreaComponent {
constructor() {
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)]);
}
}
//
// get accessor
/**
* @return {?}
*/
get value() {
return this.innerValue;
}
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
onBlur(validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
}
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
changedInput(event, validate) {
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
/**
* @param {?} validate
* @return {?}
*/
onFocused(validate) {
this.isValid.emit(this.element.valid);
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.isDirty;
if ((name || {})['currentValue']) {
this.element.markAsDirty({ onlySelf: true });
}
}
/**
* @return {?}
*/
getErrorMessage() {
return this.element.hasError('required') ? ' لا يمكن أن يكون هذا الحقل فارغًا!' :
this.element.hasError('pattern') ? 'رقم غیر صحیح!' :
this.element.hasError('minlength') ? ' حداقل ' + this.minLength + ' کاراکتر وارد نمایید!' :
this.element.hasError('maxlength') ? ' حداکثر ' + this.maxLength + ' کاراکتر وارد نمایید!' :
'';
}
/**
* @param {?} val
* @return {?}
*/
getElement(val) {
// console.log(val);
}
/**
* @return {?}
*/
idGenerator() {
/** @type {?} */
const 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 = () => [];
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 }]
};
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
*/
class ChiMapComponent {
constructor() {
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 {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const height = changes.height;
/** @type {?} */
const isDrag = changes.dragging;
/** @type {?} */
const coordinateOrigin = changes.resetCoordinate;
if ((coordinateOrigin || {})['currentValue']) {
this.resetMarker();
}
if ((isDrag || {})['currentValue'] === false || (isDrag || {})['currentValue'] === true) {
this.disabledDrag();
}
}
/**
* @return {?}
*/
ngOnInit() {
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.initMap();
}), 100);
}
/**
* @return {?}
*/
idGenerator() {
/** @type {?} */
const number = Math.random();
number.toString(36);
return number.toString(36).substr(2, 9);
}
/**
* @return {?}
*/
disabledDrag() {
if (!this.map) {
return;
}
if (!this.dragging) {
this.map.dragPan.disable();
}
else {
this.map.dragPan.enable();
}
}
/**
* @param {?} url
* @param {?} resourceType
* @return {?}
*/
encryptTileUrl(url, resourceType) {
if (resourceType === 'Tile' && url.match('hash')) {
/** @type {?} */
const 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 {?} */
const arr = (url.split('pl&'))[1].split('/');
/** @type {?} */
const 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 {?}
*/
initMap() {
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 {?} */
const 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 {?}
*/
(evt) => {
this.updateCoordinate();
}));
this.map.on('drag', (/**
* @param {?} evt
* @return {?}
*/
(evt) => {
this.updateCoordinate();
}));
this.map.on('dragend', (/**
* @param {?} evt
* @return {?}
*/
(evt) => {
this.updateCoordinate();
}));
this.map.on('zoomend', (/**
* @param {?} evt
* @return {?}
*/
(evt) => {
this.updateCoordinate();
}));
}
if (this.showMarker) {
this.setMarker();
}
this.getMap.emit(this.map);
}
/**
* @return {?}
*/
updateCoordinate() {
/** @type {?} */
const center = this.map.getCenter();
this.updatePositionMarker(center.lat, center.lng);
this.coordinate.emit(center);
}
/**
* @return {?}
*/
setMarker() {
/** @type {?} */
const positionMarker = this.coordinateMarker || this.map.getCenter();
/** @type {?} */
const 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 {?}
*/
marker => {
// create a DOM element for the marker
/** @type {?} */
const 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 {?} */
const 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 {?}
*/
paneToMarker(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 {?}
*/
updatePositionMarker(lat, lng) {
for (let i = 0; i < this.marker.length; i++) {
this.marker[i]._lngLat = { lat: lat, lng: lng };
this.marker[i]._update();
}
}
/**
* @return {?}
*/
resetMarker() {
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 = () => [];
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 }]
};
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
*/
class CaptchaComponent {
constructor() {
this.refreshIcon = 'refresh';
this.key = new EventEmitter();
this.id = 'captcha' + this.idGenerator();
}
/**
* @return {?}
*/
ngOnInit() {
this.createCpatcha();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.isRefreshImage;
if (name.currentValue) {
this.createCpatcha();
}
}
/**
* @return {?}
*/
createCpatcha() {
/** @type {?} */
const captchaKey = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
this.imageLink = this.imageUrl + captchaKey;
this.key.emit(captchaKey);
this.isRefreshImage = false;
}
/**
* @return {?}
*/
idGenerator() {
/** @type {?} */
const 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 = () => [];
CaptchaComponent.propDecorators = {
imageUrl: [{ type: Input }],
className: [{ type: Input }],
iconClass: [{ type: Input }],
refreshIcon: [{ type: Input }],
isRefreshImage: [{ type: Input }],
key: [{ type: Output }]
};
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 {?} */
const noop$2 = (/**
* @return {?}
*/
() => {
});
const ɵ0$2 = noop$2;
/**
* Error when invalid control is dirty or touched
*/
class DropdownErrorStateMatcher {
/**
* @param {?} control
* @param {?} form
* @return {?}
*/
isErrorState(control, form) {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}
/** @type {?} */
const DROPDOWN_COMPONENT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => DropdownComponent)),
multi: true
};
class DropdownComponent {
/**
* @param {?} ref
*/
constructor(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;
}
//
// get accessor
/**
* @return {?}
*/
get value() {
return this.innerValue;
}
// set accessor including call the onchange callback
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (v !== this.innerValue) {
this.innerValue = v;
this.onChangeCallback(v);
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// Set touched on blur
/**
* @param {?} validate
* @return {?}
*/
onBlur(validate) {
this.onTouchedCallback();
this.isValid.emit(this.element.valid);
}
// From ControlValueAccessor interface
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value !== this.innerValue) {
this.innerValue = value;
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
}), 100);
}
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
/**
* @param {?} event
* @param {?} validate
* @return {?}
*/
changedInput(event, validate) {
setTimeout((/**
* @param {?} _
* @return {?}
*/
_ => {
this.isValid.emit(this.element.valid);
this.valueChanged.emit(this.value);
}), 100);
}
/**
* @param {?} validate
* @return {?}
*/
onFocused(validate) {
this.isValid.emit(this.element.valid);
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.isDirty;
if ((name || {})['currentValue']) {
this.ref.markForCheck();
this.element.markAsDirty({ onlySelf: true });
}
}
/**
* @return {?}
*/
getErrorMessage() {
return this.element.hasError('required') ? ' لا يمكن أن يكون هذا الحقل فارغًا!' : '';
}
/**
* @return {?}
*/
idGenerator() {
/** @type {?} */
const 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>\n",
providers: [DROPDOWN_COMPONENT_CONTROL_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".element-container{display:flex;flex-direction:column}.element-container>*{width:100%}"]
}] }
];
/** @nocollapse */
DropdownComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
DropdownComponent.propDecorators = {
options: [{ type: Input }],
direction: [{ type: Input }],
floatLabel: [{ type: Input }],
pattern: [{ type: Input }],
className: [{ type: Input }],
readonly: [{ type: Input }],
required: [{ type: Input }],
placeHolder: [{ type: Input }],
showValidatorMessage: [{ type: Input }],
isDirty: [{ type: Input }],
isValid: [{ type: Output }],
valueChanged: [{ type: Output }]
};
if (false) {
/** @type {?} */
DropdownComponent.prototype.options;
/** @type {?} */
DropdownComponent.prototype.direction;
/** @type {?} */
DropdownComponent.prototype.floatLabel;
/** @type {?} */
DropdownComponent.prototype.pattern;
/** @type {?} */
DropdownComponent.prototype.className;
/** @type {?} */
DropdownComponent.prototype.readonly;
/** @type {?} */
DropdownComponent.prototype.required;
/** @type {?} */
DropdownComponent.prototype.placeHolder;
/** @type {?} */
DropdownComponent.prototype.showValidatorMessage;
/** @type {?} */
DropdownComponent.prototype.isDirty;
/** @type {?} */
DropdownComponent.prototype.isValid;
/** @type {?} */
DropdownComponent.prototype.valueChanged;
/** @type {?} */
DropdownComponent.prototype.matcher;
/** @type {?} */
DropdownComponent.prototype.id;
/** @type {?} */
DropdownComponent.prototype.element;
/**
* @type {?}
* @private
*/
DropdownComponent.prototype.innerValue;
/**
* @type {?}
* @private
*/
DropdownComponent.prototype.onTouchedCallback;
/**
* @type {?}
* @private
*/
DropdownComponent.prototype.onChangeCallback;
/**
* @type {?}
* @private
*/
DropdownComponent.prototype.ref;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class GridComponent {
constructor() {
this.columns = [];
this.actionsColumns = [];
this.height = '400px';
this.openFilter = new EventEmitter();
this.clearFilter = new EventEmitter();
this.actionActor = new EventEmitter();
this.createDownloadUrl = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
// this.columnsToDisplay = this.displayedColumns.slice();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
/** @type {?} */
const name = changes.hasFilter;
if (name) {
this.hasFilter = changes.hasFilter.currentValue;
}
this.displayedColumns = this.columns.map((/**
* @param {?} c
* @return {?}
*/
c => c['columnDef']));
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.displayedColumns = this.columns.map((/**
* @param {?} c
* @return {?}
*/
c => c['columnDef']));
/** @type {?} */
const as = document.querySelectorAll('lib-grid .mat-cell a');
as.forEach((/**
* @param {?} a
* @return {?}
*/
a => {
if (as['innerHTML'] === '' || a.textContent === '') {
a.remove();
}
}));
}
/**
* @return {?}
*/
selectedFilter() {
this.openFilter.emit();
}
/**
* @return {?}
*/
removeFilter() {
this.clearFilter.emit();
}
/**
* @param {?} actor
* @param {?} row
* @return {?}
*/
actionColumn(actor, row) {
this.actionActor.emit({ actor: actor, row: row });
}
/**
* @return {?}
*/
onclickDownloadUrl() {
this.createDownloadUrl.emit();
}
}
GridComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-grid',
template: "<mat-table #table [dataSource]=\"data\">\n\n <ng-container *ngFor=\"let column of columns\" [cdkColumnDef]=\"column.columnDef\">\n <mat-header-cell *cdkHeaderCellDef [style.flex]=\"'0 0 ' + column.width\">\n <span *ngIf=\"column.columnDef != 'filter' && column.columnDef != 'actions' && column.columnDef != 'download'\">\n {{ column.header }}\n </span>\n <!-- filter -->\n <ng-container *ngIf=\"column.columnDef == 'filter'\">\n <button mat-raised-button color=\"primary\" (click)=\"selectedFilter()\" *ngIf=\"!hasFilter\">\n <img [src]=\"filterOfSrc\" *ngIf=\"filterOfSrc\">\n <span>\u0645\u062D\u062F\u0648\u062F\u0633\u0627\u0632\u06CC</span>\n </button>\n <button mat-raised-button color=\"primary\" (click)=\"removeFilter()\" *ngIf=\"hasFilter\">\n <img [src]=\"filterOnSrc\" *ngIf=\"filterOnSrc\">\n <span>\u0645\u062D\u062F\u0648\u062F\u0634\u062F\u0647</span>\n </button>\n </ng-container>\n <!-- download -->\n <ng-container *ngIf=\"column.columnDef == 'download'\">\n <a (click)=\"onclickDownloadUrl()\" href=\"{{downloadUrl}}\" [matTooltip]=\"downloadName\" class=\"download-file\">\n <img [src]=\"downloadOfSrc\" *ngIf=\"downloadOfSrc\" width=\"30px\">\n </a>\n </ng-container>\n </mat-header-cell>\n\n <mat-cell *cdkCellDef=\"let row\"\n [style.flex]=\"'0 0 ' + column.width\"\n dir=\"{{column.dir}}\"\n [matTooltip]=\"column.cell(row).length>15 ? column.cell(row) : ''\">\n <span *ngIf=\"column.type !='color' && column.type !='link' && column.columnDef!= 'actions' &&\n column.columnDef!= 'download' && column.columnDef!= 'filter'\"\n [style.fontWeight]=\"column.bold ? (column.bold(row) === 'true' ? 'bold' : 'normal') : 'normal'\">\n <i *ngIf=\"column.hasIcon\" class=\"material-icons\" [style.color]=\"column.color\">{{column.icon}}</i>\n <span *ngIf=\"column.type !='number'\">\n {{ column.cell(row)}}\n </span>\n <span *ngIf=\"column.type =='number'\">\n {{ column.cell(row) | number}}\n </span>\n\n </span>\n <i *ngIf=\"column.type =='color'\" class=\"material-icons\" [style.color]=\"column.cell(row)\">stop</i>\n\n <a *ngIf=\"column.type =='link'\" href=\"{{column.cell(row)}}\" target=\"_blank\"> {{column.cell(row)}}</a>\n\n <!-- actions -->\n <ng-container *ngIf=\"column.columnDef == 'actions'\">\n <a\n *ngFor=\"let actColumn of actionsColumns; let first = first; let last = last\"\n (click)=\"actionColumn(actColumn.actor, row)\">\n <span *ngIf=\"actColumn.show(row)\">\n {{ actColumn.name }}\n <!--<span *ngIf=\"!last\" class=\"spliter\">|</span>-->\n </span>\n\n </a>\n\n </ng-container>\n\n </mat-cell>\n </ng-container>\n\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n\n</mat-table>\n<div class=\"no-results\" [style.display]=\"data.length == 0 ? '' : 'none'\">\n \u0645\u0648\u0631\u062F\u06CC \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F\n</div>\n",
styles: [".no-results{display:flex;height:50vh;justify-content:center;align-items:center;font-weight:700}.mat-table{width:100%;direction:rtl}.mat-table mat-footer-row,.mat-table mat-header-row,.mat-table mat-row,.mat-table td.mat-cell,.mat-table td.mat-footer-cell,.mat-table th.mat-header-cell{border-bottom-color:#ededed}.mat-table mat-footer-row,.mat-table mat-row{min-height:40px;padding-left:8px}.mat-table .mat-header-row{background-color:#d5dfe2;min-height:48px;border:0;padding-left:8px}.mat-table .mat-header-row .mat-header-cell{color:#333;font-weight:700}.mat-table .mat-header-row .mat-header-cell a.download-file{display:flex;align-items:center}.mat-table .mat-header-row .mat-header-cell button{font-size:11px;background-color:transparent;box-shadow:none;color:#a8acb0;padding:0 10px}.mat-table [dir=rtl] mat-cell:first-of-type,.mat-table [dir=rtl] mat-footer-cell:first-of-type,.mat-table [dir=rtl] mat-header-cell:first-of-type,.mat-table mat-cell:first-of-type,.mat-table mat-footer-cell:first-of-type,.mat-table mat-hea