ngx-mat-cdk
Version:
Extra Components for Angular Material including Filters,Drag Drop File, MatSelect Mobile Version
1,319 lines (1,298 loc) • 221 kB
JavaScript
import { Pipe, ɵɵdefineInjectable, Injectable, EventEmitter, ElementRef, Directive, Injector, Input, Output, ɵɵinject, HostListener, Component, ContentChild, TemplateRef, Inject, PLATFORM_ID, NgModule, ViewChild, forwardRef, HostBinding, ViewEncapsulation, ViewContainerRef, ComponentFactoryResolver, ChangeDetectorRef, APP_INITIALIZER } from '@angular/core';
import { isPlatformBrowser, CommonModule, Location } from '@angular/common';
import { MatSelectSearchComponent, NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { fromEvent, Subscription, Subject } from 'rxjs';
import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { Router, ActivatedRoute, RouterOutlet, ChildrenOutletContexts, RouterModule } from '@angular/router';
import { MatChipsModule } from '@angular/material/chips';
import { MatSelect, MatSelectModule } from '@angular/material/select';
import { MatIconModule } from '@angular/material/icon';
import { MediaObserver } from '@angular/flex-layout';
import { MatOption, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
import { HttpEventType, HttpClient } from '@angular/common/http';
import { v4 } from 'uuid';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
import * as jalaliMoment from 'jalali-moment';
import { localeData, isMoment, invalid } from 'jalali-moment';
import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatTooltipModule } from '@angular/material/tooltip';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { getType } from 'mime';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { getClass } from 'file-icons-js';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { orderBy } from 'natural-orderby';
import { DomSanitizer } from '@angular/platform-browser';
class GetObjectByValueMemberPipe {
transform(value, ...args) {
if (value !== undefined && value !== null && args) {
const source = args[0];
const key = args[1];
if (Array.isArray(value)) {
const result = source.filter(z => value.map(w => w[key]).includes(z[key]));
return result;
}
else {
const result = source.filter(z => z[key] == value[key]);
return result;
}
}
return null;
}
}
GetObjectByValueMemberPipe.decorators = [
{ type: Pipe, args: [{
name: 'getObjectByValueMember'
},] }
];
class NgxMatSelectService {
getMaxSize(arr, maximumCount) {
if (!arr)
return 0;
const length = arr.length;
return length > maximumCount ? maximumCount : length;
}
validInputSearch(keycode) {
return (keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 13 || keycode == 8 || // spaceBar & return key(s) (if you want to allow carriage returns)
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223) // [\]' (in order);
;
}
}
NgxMatSelectService.ɵprov = ɵɵdefineInjectable({ factory: function NgxMatSelectService_Factory() { return new NgxMatSelectService(); }, token: NgxMatSelectService, providedIn: "root" });
NgxMatSelectService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
class MatSelectAttr {
constructor() {
this.valueMember = 'id';
this.displayMember = 'name';
this.initSource = [];
this.filterSourceChange = new EventEmitter();
this.filterSource = [];
this.isStringArray = false;
this.maximumCount = 30;
}
}
class MatSelectBase extends MatSelectAttr {
constructor(injector) {
super();
this.injectorM = injector;
this.matSelectService = injector.get(NgxMatSelectService);
this.getObjectByValueMemberPipe = injector.get(GetObjectByValueMemberPipe);
}
onSearch() {
if (!this.isLazy) {
let filteredSource = [];
if (this.isStringArray) {
filteredSource = this.initSource
.filter(x => x === null || x === void 0 ? void 0 : x.toString().includes(this.searchValue));
}
else {
filteredSource = this.initSource
.filter(x => { var _a; return (_a = x[this.displayMember]) === null || _a === void 0 ? void 0 : _a.toString().includes(this.searchValue); });
}
this.filterSource = filteredSource.slice(0, this.matSelectService.getMaxSize(filteredSource, this.maximumCount));
this.filterSourceChange.emit(this.filterSource);
this._loading(false);
}
else {
if (this.searcher && typeof (this.searcher) === 'function') {
this.searcher(this.searchValue).toPromise().then(res => {
this.filterSource = res;
this.filterSourceChange.emit(this.filterSource);
this._loading(false);
}).catch(() => {
this._loading(false);
});
}
else {
this._loading(false);
}
}
}
ngAfterViewInit() {
var _a;
if (this.hostInp) {
this.host = this.hostInp.searchSelectInput;
this.value = this.hostInp.matSelect.value;
}
else {
this.host = this.injectorM.get(ElementRef, null);
if (this.host)
this.value = this.host['value'];
else
return;
}
const el = (_a = this.host) === null || _a === void 0 ? void 0 : _a.nativeElement;
if (el) {
const terms$ = fromEvent(el, 'keyup')
.pipe(map(event => {
return event.target.value;
// if (this.matSelectService.validInputSearch(event.keyCode)) {
// return event.target.value
// }
// return null;
}), debounceTime(this.isLazy ? 400 : 0), distinctUntilChanged());
if (terms$) {
this.subscription = terms$ === null || terms$ === void 0 ? void 0 : terms$.subscribe((content) => {
if (content !== undefined && content !== null) {
this._loading(true);
this.searchValue = content;
this.onSearch();
}
});
}
}
}
ngOnChanges(changes) {
if (changes.initSource && changes.initSource.currentValue) {
setTimeout(() => {
this._init();
});
}
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
_init() {
if (this.initSource && this.initSource.length > 0) {
this.filterSource = this.initSource.slice(0, this.matSelectService.getMaxSize(this.initSource, this.maximumCount));
}
else {
this.filterSource = [];
}
this.filterSourceChange.emit(this.filterSource);
this.changeDetected();
}
_loading(loading) {
if (this.loadingFunc && typeof (this.loadingFunc) == 'function') {
this.loadingFunc(loading);
}
}
changeDetected() {
if (this.hostInp) {
this.value = this.hostInp.matSelect.value;
}
else {
if (this.host)
this.value = this.host['value'];
else
return;
}
if (this.value) {
const val = this.value;
if (Array.isArray(val)) {
if (val.length > 0) {
if (val[0][this.valueMember] !== undefined && val[0][this.valueMember] !== null) {
if (this.filterSource.length > 0) {
val.forEach(v => {
const item = this.filterSource.find(w => w[this.valueMember] == v[this.valueMember]);
if (!item) {
this.filterSource.unshift(v);
}
});
}
else {
this.filterSource = val;
}
}
else {
val.forEach(v => {
let item = this.filterSource.find(w => w[this.valueMember] == v);
if (!item) {
item = this.initSource.find(w => w[this.valueMember] == v);
if (item) {
this.filterSource.unshift(item);
}
}
});
}
}
}
else {
if (typeof (val) === 'object' && val[this.valueMember] !== undefined && val[this.valueMember] !== null) {
if (this.filterSource.length > 0) {
const item = this.filterSource.find(w => w[this.valueMember] == val[this.valueMember]);
if (!item) {
this.filterSource.unshift(val);
}
}
else {
this.filterSource = [val];
}
}
else {
let item = this.filterSource.find(w => w[this.valueMember] == val);
if (!item) {
item = this.initSource.find(w => w[this.valueMember] == val);
if (item) {
this.filterSource.unshift(item);
}
}
}
}
}
this.filterSourceChange.emit(this.filterSource);
}
getObject(value) {
return this.getObjectByValueMemberPipe.transform(value, [this.filterSource, this.valueMember]);
}
}
MatSelectBase.decorators = [
{ type: Directive, args: [{},] }
];
MatSelectBase.ctorParameters = () => [
{ type: Injector }
];
class MatSelectSearchDirective extends MatSelectBase {
constructor(injector) {
super(injector);
this.injector = injector;
this.loadingFunc = (loading) => {
if (this.hostInp) {
this.hostInp['searching'] = loading;
}
};
this.valueMember = 'id';
this.displayMember = 'name';
this.initSource = [];
this.filterSourceChange = new EventEmitter();
this.filterSource = [];
this.isStringArray = false;
this.maximumCount = 30;
this.hostInp = injector.get(MatSelectSearchComponent, null);
}
ngAfterViewInit() {
if (this.hostInp) {
if (this.hostInp.matSelect) {
this.hostInp.matSelect.compareWith = (o1, o2) => {
if (typeof (o1) === 'object') {
return o1[this.valueMember] === o2[this.valueMember];
}
else {
return o1 === o2;
}
};
this.changeDetected();
}
super.ngAfterViewInit();
// this.valueChangeSub = this.hostInp.matSelect.valueChange.subscribe(value => {
// this.value = value;
// this.changeDetected();
// });
}
}
ngOnDestroy() {
super.ngOnDestroy();
if (this.valueChangeSub) {
this.valueChangeSub.unsubscribe();
}
}
}
MatSelectSearchDirective.decorators = [
{ type: Directive, args: [{
selector: '[matSelectSearch],[mat-select-search]',
exportAs: 'matSelectSearch'
},] }
];
MatSelectSearchDirective.ctorParameters = () => [
{ type: Injector }
];
MatSelectSearchDirective.propDecorators = {
valueMember: [{ type: Input }],
displayMember: [{ type: Input }],
isLazy: [{ type: Input }],
initSource: [{ type: Input }],
filterSourceChange: [{ type: Output }],
filterSource: [{ type: Input }],
searcher: [{ type: Input }],
isStringArray: [{ type: Input }],
maximumCount: [{ type: Input }]
};
class SeparateThreeCommaPipe {
numberWithCommas(x) {
var _a;
return (_a = x === null || x === void 0 ? void 0 : x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')) !== null && _a !== void 0 ? _a : '';
}
transform(value) {
if (value != null) {
return this.numberWithCommas(value);
}
return '0';
}
}
SeparateThreeCommaPipe.decorators = [
{ type: Pipe, args: [{
name: 'separateThreeComma'
},] }
];
class SelectSearchDirective extends MatSelectBase {
constructor(injector) {
super(injector);
this.injector = injector;
this.maximumCount = 30;
this.initSource = [];
this.filterSource = [];
this.displayMember = 'title';
this.valueMember = 'id';
this.isLazy = false;
this.filterSourceChange = new EventEmitter();
this.isStringArray = false;
this.loadingFunc = (loading) => {
};
}
ngAfterViewInit() {
// this.host = this.injector.get(ElementRef);
// this.value = this.host.nativeElement['value'];
super.ngAfterViewInit();
}
}
SelectSearchDirective.decorators = [
{ type: Directive, args: [{
selector: '[selectSearch]',
exportAs: 'selectSearch'
},] }
];
SelectSearchDirective.ctorParameters = () => [
{ type: Injector }
];
SelectSearchDirective.propDecorators = {
maximumCount: [{ type: Input }],
initSource: [{ type: Input }],
filterSource: [{ type: Input }],
displayMember: [{ type: Input }],
valueMember: [{ type: Input }],
isLazy: [{ type: Input }],
searcher: [{ type: Input }],
filterSourceChange: [{ type: Output }],
isStringArray: [{ type: Input }]
};
class NgxMatCdkUtilityService {
constructor(router) {
this.router = router;
}
setClassToDialogContainer(el, className, targetSelect) {
var _a, _b;
if ((_a = el === null || el === void 0 ? void 0 : el.nativeElement) === null || _a === void 0 ? void 0 : _a.parentElement) {
const cls = (_b = el.nativeElement.parentElement.closest(targetSelect)) === null || _b === void 0 ? void 0 : _b.classList;
if (cls && !cls.contains(className)) {
cls.add(className);
}
}
}
get dialogScrollStrategy() {
const classNoOverflow = 'no-overflow';
const strategy = {
attach(overlayRef) {
setTimeout(() => {
overlayRef.hostElement.querySelector('mat-dialog-container').style.overflow = 'auto';
}, 200);
}, disable() {
if (document.documentElement.classList.contains(classNoOverflow))
document.documentElement.classList.remove(classNoOverflow);
}, enable() {
if (!document.documentElement.classList.contains(classNoOverflow))
document.documentElement.classList.add(classNoOverflow);
}
};
return strategy;
}
}
NgxMatCdkUtilityService.ɵprov = ɵɵdefineInjectable({ factory: function NgxMatCdkUtilityService_Factory() { return new NgxMatCdkUtilityService(ɵɵinject(Router)); }, token: NgxMatCdkUtilityService, providedIn: "root" });
NgxMatCdkUtilityService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
NgxMatCdkUtilityService.ctorParameters = () => [
{ type: Router }
];
class NgxAfterCloseMatDialogDirective {
constructor(router) {
this.router = router;
this.ngxAfterCloseMatDialog = true;
}
onClick() {
if (this.ngxAfterCloseMatDialog) {
this.router.navigate([], {
relativeTo: this.route,
fragment: null
});
}
}
}
NgxAfterCloseMatDialogDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxAfterCloseMatDialog]'
},] }
];
NgxAfterCloseMatDialogDirective.ctorParameters = () => [
{ type: Router }
];
NgxAfterCloseMatDialogDirective.propDecorators = {
route: [{ type: Input }],
ngxAfterCloseMatDialog: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
class NgxMatSelectTriggerComponent {
constructor() {
this.values = [];
}
remove(chip) {
var _a;
if (this.matSelect) {
const itemIndex = this.values.findIndex(z => z[this.valueMember] == chip[this.valueMember]);
if (itemIndex !== -1) {
const val = this.matSelect.value;
this.matSelect.value = [];
val.splice(itemIndex, 1);
this.matSelect.value = val;
(_a = this.matSelect.ngControl) === null || _a === void 0 ? void 0 : _a.reset(this.matSelect.value);
}
}
}
ngOnInit() {
}
}
NgxMatSelectTriggerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-mat-select-trigger',
template: "<mat-chip-list *ngIf=\"values && values.length > 0\">\r\n <mat-chip (removed)=\"remove(chip)\" *ngFor=\"let chip of values\">\r\n {{chip[displayMember]}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n</mat-chip-list>\r\n",
styles: [""]
},] }
];
NgxMatSelectTriggerComponent.ctorParameters = () => [];
NgxMatSelectTriggerComponent.propDecorators = {
displayMember: [{ type: Input }],
valueMember: [{ type: Input }],
matSelect: [{ type: Input }],
values: [{ type: Input }]
};
class MediaTracker {
constructor(injector) {
this.isMobile = false;
this.isXs = false;
this.isSm = false;
this.mediaObserver = injector.get(MediaObserver);
this.watcher = this.mediaObserver.asObservable().subscribe((change) => {
var _a, _b, _c, _d;
this.isMobile = (((_a = change[0]) === null || _a === void 0 ? void 0 : _a.mqAlias) === 'sm' || ((_b = change[0]) === null || _b === void 0 ? void 0 : _b.mqAlias) === 'xs');
this.isXs = ((_c = change[0]) === null || _c === void 0 ? void 0 : _c.mqAlias) === 'xs';
this.isSm = ((_d = change[0]) === null || _d === void 0 ? void 0 : _d.mqAlias) === 'sm';
if (this.isXs) {
if (!document.documentElement.classList.contains('ngx-mat-cdk-mobile')) {
document.documentElement.classList.add('ngx-mat-cdk-mobile');
}
}
else {
document.documentElement.classList.remove('ngx-mat-cdk-mobile');
}
if (this.onChangeMediaTracker && typeof (this.onChangeMediaTracker) === 'function') {
this.onChangeMediaTracker(change[0]);
}
});
}
ngOnDestroy() {
if (this.watcher) {
this.watcher.unsubscribe();
}
}
}
MediaTracker.decorators = [
{ type: Directive, args: [{},] }
];
MediaTracker.ctorParameters = () => [
{ type: Injector }
];
const scrollStrategy = () => {
};
class NgxMatMobileSelectDirective extends MediaTracker {
constructor(injector, host, router, route, utilService) {
super(injector);
this.host = host;
this.router = router;
this.route = route;
this.utilService = utilService;
this._htmlScrollTop = 0;
this.fragment = 'search';
this.onChangeMediaTracker = (change) => {
this.changeMedia(change.mqAlias == 'xs');
};
}
changeMedia(useMobile) {
var _a;
let classes = (_a = this.host.panelClass) === null || _a === void 0 ? void 0 : _a.toString().split(' ');
if (!classes) {
classes = [];
}
if (useMobile) {
const hasMyClass = classes.includes('ngx-mat-cdk-select-mobile');
if (this.host) {
if (!hasMyClass) {
classes.push('ngx-mat-cdk-select-mobile');
}
if (!classes.includes('ngx-mat-cdk-select-mobile-opacity')) {
classes.push('ngx-mat-cdk-select-mobile-opacity');
}
}
}
else {
classes = classes.filter(z => z !== 'ngx-mat-cdk-select-mobile' && z !== 'ngx-mat-cdk-select-mobile-opacity');
}
if (classes)
this.host.panelClass = classes.join(' ');
}
onPopState(event) {
var _a;
// if (this.ngxMobileSelect) {
(_a = this.host) === null || _a === void 0 ? void 0 : _a.close();
// }
}
ngOnDestroy() {
super.ngOnDestroy();
if (this.openPanelSub) {
this.openPanelSub.unsubscribe();
}
if (this.closePanelSub) {
this.closePanelSub.unsubscribe();
}
}
ngOnInit() {
// if (this.ngxMobileSelect) {
this.openPanelSub = this.host._openedStream.subscribe(() => {
this._htmlScrollTop = document.documentElement.scrollTop;
const panel = this.host.panel;
const panelEl = panel.nativeElement;
const parentEl = panelEl.parentElement;
if (this.isXs) {
document.documentElement.style.overflow = 'hidden';
panelEl.classList.remove('mat-select-panel');
setTimeout(() => {
panelEl.classList.remove('ngx-mat-cdk-select-mobile-opacity');
}, 150);
this.utilService.setClassToDialogContainer(panel, 'ngx-mat-cdk-mobile-wrapper', '.cdk-overlay-pane');
parentEl.style.overflowY = 'auto';
parentEl.style.overflowX = 'hidden';
const firstSelected = panelEl.querySelector('.mat-selected');
setTimeout(() => {
firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.scrollIntoView({ block: 'center', behavior: 'smooth' });
}, 500);
const iconAppend = panelEl.querySelector('.mat-select-search-inner');
const inputSearch = iconAppend.querySelector('.mat-select-search-input');
if (inputSearch)
inputSearch.style.padding = '0';
if (!iconAppend.querySelector('.material-icons-back')) {
const btn = document.createElement('i');
btn.classList.add('material-icons');
btn.classList.add('material-icons-back');
btn.style.width = '20px';
btn.style.margin = '8px 15px 8px 8px';
if (document.documentElement.dir === 'rtl') {
btn.innerHTML = 'arrow_forward';
}
else {
btn.innerHTML = 'arrow_backward';
}
btn.onclick = (ev) => {
ev.stopImmediatePropagation();
this.host.close();
};
iconAppend.style.display = 'flex';
iconAppend.style.alignItems = 'center';
iconAppend.style.width = '100%';
iconAppend === null || iconAppend === void 0 ? void 0 : iconAppend.prepend(btn);
}
if (this.fragment) {
this.router.navigate([], { relativeTo: this.route, fragment: this.fragment });
}
}
else {
if (!panelEl.classList.contains('mat-select-panel')) {
panel.nativeElement.classList.add('mat-select-panel');
}
}
});
this.closePanelSub = this.host._closedStream.subscribe(() => {
if (this.isXs) {
document.documentElement.style.overflow = '';
setTimeout(() => {
document.documentElement.scrollTo(0, this._htmlScrollTop);
}, 0);
if (this.fragment) {
this.router.navigate([], { relativeTo: this.route, fragment: null });
}
}
});
// }
}
}
NgxMatMobileSelectDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxMobileSelect]',
},] }
];
NgxMatMobileSelectDirective.ctorParameters = () => [
{ type: Injector },
{ type: MatSelect },
{ type: Router },
{ type: ActivatedRoute },
{ type: NgxMatCdkUtilityService }
];
NgxMatMobileSelectDirective.propDecorators = {
matSelectSearch: [{ type: ContentChild, args: [MatSelectSearchDirective,] }],
matSelect: [{ type: ContentChild, args: [MatOption, { read: TemplateRef },] }],
fragment: [{ type: Input }],
onPopState: [{ type: HostListener, args: ['window:popstate', ['$event'],] }]
};
class NgxMatDragDropFileService {
constructor(http) {
this.http = http;
}
uploader(body, tempId, uploader, httpHeaders) {
let url_ = uploader + '?';
if (tempId !== undefined && tempId !== null) {
url_ += 'tempId=' + encodeURIComponent('' + tempId) + '&';
}
url_ = url_.replace(/[?&]$/, '');
const content_ = body;
let options_ = {
observe: 'events',
reportProgress: true,
headers: httpHeaders
};
return this.http.post(url_, content_, options_)
.pipe(map((event) => {
switch (event.type) {
case HttpEventType.UploadProgress:
const progress = Math.round(100 * event.loaded / event.total);
return { status: 'progress', message: progress };
case HttpEventType.Response:
return { status: 'completed', message: '100' };
default:
return { status: 'error', message: `Unhandled event: ${event.type}` };
}
}));
}
}
NgxMatDragDropFileService.ɵprov = ɵɵdefineInjectable({ factory: function NgxMatDragDropFileService_Factory() { return new NgxMatDragDropFileService(ɵɵinject(HttpClient)); }, token: NgxMatDragDropFileService, providedIn: "root" });
NgxMatDragDropFileService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
NgxMatDragDropFileService.ctorParameters = () => [
{ type: HttpClient }
];
class NgxCdkAvatarViewerDirective {
constructor(el) {
this.el = el;
this.defaultImage = '../../../../assets/no-image.png';
this.hasLoading = true;
this.imgSrc = '';
}
ngOnInit() {
this.el.nativeElement.style.display = 'none';
const container = document.createElement('div');
container.style.position = 'relative';
container.style.width = `${this.width}px`;
container.style.height = `${this.height}px`;
const loadingEl = document.createElement('div');
if (this.hasLoading) {
loadingEl.classList.add('ngx-cdk-loading');
loadingEl.classList.add('ngx-cdk-loading-avatar-viewer');
container.appendChild(loadingEl);
}
this.el.nativeElement.after(container);
container.appendChild(this.el.nativeElement);
if (this.el) {
this.el.nativeElement.setAttribute('src', this.imgSrc);
this.el.nativeElement.onload = () => {
if (this.hasLoading) {
loadingEl.style.display = 'none';
}
this.el.nativeElement.style.display = 'block';
};
this.el.nativeElement.onerror = () => {
this.el.nativeElement.setAttribute('src', this.defaultImage);
setTimeout(() => {
this.el.nativeElement.style.display = 'block';
}, 50);
};
if (this.height) {
if (typeof (this.height) !== 'string') {
this.height += 'px';
}
this.el.nativeElement.style.height = this.height;
}
if (this.width) {
if (typeof (this.width) !== 'string') {
this.width += 'px';
}
this.el.nativeElement.style.width = this.width;
}
}
}
}
NgxCdkAvatarViewerDirective.decorators = [
{ type: Directive, args: [{
selector: 'img[ngxCdkAvatarViewer]'
},] }
];
NgxCdkAvatarViewerDirective.ctorParameters = () => [
{ type: ElementRef }
];
NgxCdkAvatarViewerDirective.propDecorators = {
width: [{ type: Input }],
height: [{ type: Input }],
size: [{ type: Input }],
owner: [{ type: Input }],
defaultImage: [{ type: Input }],
hasLoading: [{ type: Input }],
imgSrc: [{ type: Input }]
};
class NgxCdkAvatarPickerDirective {
constructor(injector, el, ngxMatDragDropFileService) {
this.injector = injector;
this.el = el;
this.ngxMatDragDropFileService = ngxMatDragDropFileService;
this.additionalData = {};
this.valueChange = new EventEmitter();
this.maxSizeMegabyte = 1;
this.hasRemove = true;
this.defaultImage = '../../../../assets/no-image.png';
this.loading = true;
this.error = new EventEmitter();
this.chooseLabel = 'Choose Image';
// public message: string;
this.avatarId = `avatar_${v4()}`;
// super(injector);
}
ngOnInit() {
this.el.nativeElement.type = 'file';
this.el.nativeElement.style.display = 'none';
this.el.nativeElement.accept = "image/*";
this.el.nativeElement.name = "name";
const container = `
<div class="ngx-cdk-avatar-picker" id="${this.avatarId}">
<div class="ngx-cdk-avatar-picker-image">
<div class="ngx-cdk-avatar-picker-loading"></div>
</div>
<div class="ngx-cdk-avatar-picker-buttons">
</div>
</div>
`;
const containerEl = document.createElement('div');
containerEl.innerHTML = container;
this.el.nativeElement.after(containerEl);
const loadingEl = containerEl.querySelector('.ngx-cdk-avatar-picker-loading');
const imgEl = document.createElement('img');
imgEl.style.display = 'none';
imgEl.classList.add('ngx-cdk-img-thumbnail');
imgEl.onload = () => {
loadingEl.style.display = 'none';
imgEl.style.display = 'block';
};
imgEl.onerror = () => {
imgEl.setAttribute('src', this.defaultImage);
loadingEl.style.display = 'none';
imgEl.style.display = 'block';
};
loadingEl.after(imgEl);
const buttonEl = document.createElement('button');
buttonEl.classList.add('mat-focus-indicator');
buttonEl.classList.add('mat-raised-button');
buttonEl.classList.add('mat-button-base');
buttonEl.setAttribute('type', 'button');
const buttonElInnerHtml = `<span class="mat-button-wrapper">${this.chooseLabel}</span>`;
buttonEl.innerHTML = buttonElInnerHtml;
buttonEl.addEventListener('click', (ev) => {
this.openFileDirectory();
});
setTimeout(() => {
const btnContainer = containerEl.querySelector('.ngx-cdk-avatar-picker-buttons');
if (btnContainer) {
btnContainer.appendChild(buttonEl);
}
}, 0);
}
openFileDirectory() {
this.el.nativeElement.click();
}
removeFile() {
this.el.nativeElement.value = null;
this.value = null;
this.valueChange.emit(this.value);
}
onChangeFile(ev) {
const file = ev.target.files[0];
if (!file.type.toString().includes("image")) {
this.error.emit("فقط فایل تصویر قابل دریافت است");
return;
}
if (file.size / 1024 / 1024 > this.maxSizeMegabyte) {
this.error.emit(`حجم تصویر بیشتر از ${this.maxSizeMegabyte} مگابایت است`);
return;
}
const formData = new FormData();
const tempId = `${v4()}`;
const blob = file.slice(0, file.size, file.type);
const newFile = new File([blob], `temp_${tempId}`, { type: file.type });
formData.append("file", newFile);
this.ngxMatDragDropFileService.uploader(formData, tempId, this.uploadUrl).subscribe((z) => {
if (z && z.message) {
this.progress = z.message;
this.status = z.status;
}
}, (err) => {
this.error.emit(err.message);
}, () => {
this.status = "complete";
// this.addFile(file, tempName, key);
});
this.readFile(file, tempId);
}
readFile(file, tempId) {
// ----------- ::::
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const r = reader.result.toString();
const value = Object.assign({ tempId, fileName: file.name, fileSize: file.size, fileContentType: file.type, id: 0 }, this.additionalData);
this.value = value;
this.valueChange.emit(this.value);
this.setSource(r);
};
}
setSource(source) {
const imgContainer = document.getElementById(this.avatarId);
if (imgContainer) {
const imgEl = imgContainer.querySelector('img');
if (imgEl) {
imgEl.setAttribute('src', source);
}
}
}
ngOnChanges(changes) {
if (changes.loading && changes.loading.currentValue === false) {
setTimeout(() => {
this.setSource(this.imageSrc);
}, 100);
}
}
}
NgxCdkAvatarPickerDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[ngxCdkAvatarPicker]'
},] }
];
NgxCdkAvatarPickerDirective.ctorParameters = () => [
{ type: Injector },
{ type: ElementRef },
{ type: NgxMatDragDropFileService }
];
NgxCdkAvatarPickerDirective.propDecorators = {
uploadUrl: [{ type: Input }],
additionalData: [{ type: Input }],
value: [{ type: Input }],
valueChange: [{ type: Output }],
maxSizeMegabyte: [{ type: Input }],
size: [{ type: Input }],
hasRemove: [{ type: Input }],
defaultImage: [{ type: Input }],
loading: [{ type: Input }],
error: [{ type: Output }],
chooseLabel: [{ type: Input }],
imageSrc: [{ type: Input }],
onChangeFile: [{ type: HostListener, args: ['change', ['$event'],] }]
};
class NgxCdkTouchDetectDirective {
constructor(el, plateFormId) {
this.el = el;
this.plateFormId = plateFormId;
this.swipeLeft = new EventEmitter();
this.swipeUp = new EventEmitter();
this.swipeRight = new EventEmitter();
this.swipeDown = new EventEmitter();
this.swipe = new EventEmitter();
this.xDown = null;
this.yDown = null;
}
getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}
ngAfterViewInit() {
if (isPlatformBrowser(this.plateFormId)) {
this._addEvents();
}
}
_handleTouchStartFunc(evt) {
const firstTouch = this.getTouches(evt)[0];
this.xDown = firstTouch.clientX;
this.yDown = firstTouch.clientY;
}
_handleTouchMoveFunc(evt) {
if (!this.xDown || !this.yDown) {
return;
}
let xUp = evt.touches[0].clientX;
let yUp = evt.touches[0].clientY;
let xDiff = this.xDown - xUp;
let yDiff = this.yDown - yUp;
let direction = 'up';
if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
if (xDiff > 0) {
/* left swipe */
this.swipeLeft.emit(evt);
direction = 'left';
}
else {
/* right swipe */
this.swipeRight.emit(evt);
direction = 'right';
}
}
else {
if (yDiff > 0) {
/* up swipe */
this.swipeUp.emit(evt);
direction = 'up';
}
else {
/* down swipe */
this.swipeDown.emit(evt);
direction = 'down';
}
}
this.swipe.emit({ event: evt, direction });
/* reset values */
this.xDown = null;
this.yDown = null;
}
;
_addEvents() {
this._handleTouchMove = this._handleTouchMoveFunc.bind(this);
this._handleTouchStart = this._handleTouchStartFunc.bind(this);
this.el.nativeElement.addEventListener('touchstart', this._handleTouchStart, false);
this.el.nativeElement.addEventListener('touchmove', this._handleTouchMove, false);
}
_removeEvents() {
this.el.nativeElement.removeEventListener('touchstart', this._handleTouchStart, false);
this.el.nativeElement.removeEventListener('touchmove', this._handleTouchMove, false);
}
ngOnDestroy() {
if (isPlatformBrowser(this.plateFormId)) {
this._removeEvents();
}
}
}
NgxCdkTouchDetectDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxCdkTouchDetect]'
},] }
];
NgxCdkTouchDetectDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
];
NgxCdkTouchDetectDirective.propDecorators = {
swipeLeft: [{ type: Output }],
swipeUp: [{ type: Output }],
swipeRight: [{ type: Output }],
swipeDown: [{ type: Output }],
swipe: [{ type: Output }]
};
class NgxCdkTouchResult {
}
class NgxMatCopyToClipBoardDirective {
constructor(_snackBar) {
this._snackBar = _snackBar;
this.duration = 2000;
}
onClick() {
const el = document.createElement('textarea');
el.value = this.value;
document.body.appendChild(el);
el.select();
el.setSelectionRange(0, 99999); /* For mobile devices */
document.execCommand('copy');
document.body.removeChild(el);
this._snackBar.openFromTemplate(this.templateRef, {
duration: this.duration,
});
}
}
NgxMatCopyToClipBoardDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxMatCopyToClipBoard]'
},] }
];
NgxMatCopyToClipBoardDirective.ctorParameters = () => [
{ type: MatSnackBar }
];
NgxMatCopyToClipBoardDirective.propDecorators = {
templateRef: [{ type: Input }],
duration: [{ type: Input }],
value: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
class NgxMatSearchBoxDirective {
constructor(el) {
this.el = el;
this.classes = [];
if (this.el.nativeElement) {
const inputEl = this.el.nativeElement;
const icon = document.createElement('i');
icon.classList.add('ngx-mat-search-box-icon');
icon.classList.add('fal');
icon.classList.add('fa-search');
const container = document.createElement('div');
container.classList.add('ngx-mat-search-box-container');
this.classes.forEach(cls => {
container.classList.add(cls);
});
inputEl.classList.add('ngx-mat-search-box-input');
inputEl.before(container);
container.appendChild(inputEl);
container.appendChild(icon);
}
}
}
NgxMatSearchBoxDirective.decorators = [
{ type: Directive, args: [{
selector: 'input[ngxMatSearchBox]'
},] }
];
NgxMatSearchBoxDirective.ctorParameters = () => [
{ type: ElementRef }
];
NgxMatSearchBoxDirective.propDecorators = {
classes: [{ type: Input }]
};
class NgxMatCdkSharedModule {
}
NgxMatCdkSharedModule.decorators = [
{ type: NgModule, args: [{
declarations: [
MatSelectSearchDirective,
GetObjectByValueMemberPipe,
SeparateThreeCommaPipe,
SelectSearchDirective,
NgxAfterCloseMatDialogDirective,
NgxMatSelectTriggerComponent,
NgxMatMobileSelectDirective,
NgxCdkAvatarViewerDirective,
NgxCdkAvatarPickerDirective,
NgxCdkTouchDetectDirective,
NgxMatSearchBoxDirective,
NgxMatCopyToClipBoardDirective,
],
imports: [
CommonModule,
MatChipsModule,
MatSelectModule,
MatIconModule,
MatSnackBarModule,
],
exports: [
CommonModule,
MatSelectSearchDirective,
GetObjectByValueMemberPipe,
SeparateThreeCommaPipe,
SelectSearchDirective,
NgxAfterCloseMatDialogDirective,
NgxMatSelectTriggerComponent,
NgxMatMobileSelectDirective,
NgxCdkAvatarViewerDirective,
NgxCdkAvatarPickerDirective,
NgxCdkTouchDetectDirective,
NgxMatCopyToClipBoardDirective,
NgxMatSearchBoxDirective,
],
providers: [
GetObjectByValueMemberPipe,
SeparateThreeCommaPipe,
NgxMatCdkUtilityService,
NgxMatSelectService,
NgxMatDragDropFileService
]
},] }
];
class FiltersBase {
// public filtersService: FiltersService;
constructor(injector) {
this.conditionSource = [];
// this.filtersService = injector.get(FiltersService);
}
// initFilters(): void {
// this.conditionSource = this.filtersService.conditionSource.filter(z => z.types.includes(this.filter.type));
// }
get filterTypes() {
return FilterTypes;
}
get conditionOperators() {
return ConditionOperator;
}
get logicalOperators() {
return LogicalOperator;
}
ngOnInit() {
// this.initFilters();
}
}
FiltersBase.decorators = [
{ type: Directive, args: [{},] }
];
FiltersBase.ctorParameters = () => [
{ type: Injector }
];
class PageFilter {
constructor() {
this.filters = [];
}
}
class Filter {
constructor() {
this.options = new FilterOptions();
}
}
class FilterOptions {
constructor() {
this.selectBoxOptions = new FilterSelectBoxOptions();
this.numberBoxOptions = new FilterNumberBoxOptions();
this.trueFalseOptions = new FilterTrueFalseOptions();
this.dateTimeOptions = new FilterDateTimeOptions();
this.conditionOptions = new FilterConditionOptions();
}
}
class FilterConditionOptions {
}
class FilterDateTimeOptions {
constructor() {
this.dateLabel = 'Date';
this.fromLabel = 'from';
this.toLabel = 'to';
}
}
class FilterTrueFalseOptions {
}
class FilterNumberBoxOptions {
constructor() {
this.fromLabel = 'from';
this.toLabel = 'to';
}
}
class FilterSelectBoxOptions {
}
var LogicalOperator;
(function (LogicalOperator) {
LogicalOperator["And"] = "And";
LogicalOperator["Or"] = "Or";
})(LogicalOperator || (LogicalOperator = {}));
var ConditionOperator;
(function (ConditionOperator) {
ConditionOperator["None"] = "None";
ConditionOperator["Contains"] = "Contains";
ConditionOperator["StartWith"] = "StartWith";
ConditionOperator["EndWith"] = "EndWith";
ConditionOperator["Equal"] = "Equal";
ConditionOperator["NotEqual"] = "NotEqual";
ConditionOperator["GreaterThan"] = "GreaterThan";
ConditionOperator["GreaterThanOrEqual"] = "GreaterThanOrEqual";
ConditionOperator["LessThan"] = "LessThan";
ConditionOperator["LessThanOrEqual"] = "LessThanOrEqual";
ConditionOperator["Between"] = "Between";
ConditionOperator["Exact"] = "Exact";
ConditionOperator["LastWeek"] = "LastWeek";
ConditionOperator["LastMonth"] = "LastMonth";
ConditionOperator["CurrentWeek"] = "CurrentWeek";
ConditionOperator["CurrentMonth"] = "CurrentMonth";
ConditionOperator["CurrentYear"] = "CurrentYear";
ConditionOperator["InRange"] = "InRange";
ConditionOperator["NotIn"] = "NotIn";
ConditionOperator["NotContains"] = "NotContains";
})(ConditionOperator || (ConditionOperator = {}));
var FilterTypes;
(function (FilterTypes) {
FilterTypes[FilterTypes["DateTime"] = 1] = "DateTime";
FilterTypes[FilterTypes["Number"] = 2] = "Number";
FilterTypes[FilterTypes["SingleSelect"] = 3] = "SingleSelect";
FilterTypes[FilterTypes["MultiSelect"] = 4] = "MultiSelect";
FilterTypes[FilterTypes["TextBox"] = 5] = "TextBox";
FilterTypes[FilterTypes["TrueFalse"] = 6] = "TrueFalse";
FilterTypes[FilterTypes["ListCheck"] = 7] = "ListCheck";
})(FilterTypes || (FilterTypes = {}));
class NgxApplyFilterResult {
constructor() {
this.filters = [];
this.filtersQueryString = '';
this.filteredFilters = [];
}
}
class FiltersService {
constructor(moneyPipe) {
this.moneyPipe = moneyPipe;
this.conditionSource = [];
this.useJalaliDate = false;
}
checkHasFilter(filter) {
return ((this.noValueConditions.includes(filter.conditionOperator))
||
(filter.type == FilterTypes.MultiSelect ? filter.values && filter.values.length > 0 : !!filter.value));
}
getConditionSource() {
const conditions = [];
for (let enumMember in ConditionOperator) {
const condition = ConditionOperator[enumMember];
const gcplat = this.getCondition(condition, null);
if (gcplat) {
conditions.push({
key: ConditionOperator[enumMember],
label: gcplat.label,
types: gcplat.types
});
}
}
return conditions;
}
getDefaultCondition(filterType) {
switch (filterType) {
case FilterTypes.MultiSelect:
case FilterTypes.ListCheck: {
return ConditionOperator.InRange;
}
case FilterTypes.TrueFalse:
case FilterTypes.SingleSelect:
case FilterTypes.Number: {
return ConditionOperator.Equal;
}
case FilterTypes.TextBox: {
return ConditionOperator.Contains;
}
case FilterTypes.DateTime: {
return ConditionOperator.Between;
}
}
}
getConditionLabel(condition, filter) {
var _a, _b;
if (condition) {
const conditionKey = condition[0].toLowerCase() + condition.substring(1);
if ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.conditionOptions) {
return (_b = filter === null || filter === void 0 ? void 0 : filter.options) === null || _b === void 0 ? void 0