ngx-techlify-core 11.3.0-beta.1 → 11.3.3

package/fesm2015/ngx-techlify-core.js

@@ -12,37 +12,22 @@ import { catchError, debounceTime, distinctUntilChanged, startWith, switchMap, f
 import { MAT_SNACK_BAR_DATA, MatSnackBar, MatSnackBarModule, MatSnackBarRef } from '@angular/material/snack-bar';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule, MatFormField, MAT_FORM_FIELD } from '@angular/material/form-field';
 import { SELECT_ITEM_HEIGHT_EM, MatSelect, MatSelectModule } from '@angular/material/select';
 import { MatIconModule } from '@angular/material/icon';
 import { Router, RouteReuseStrategy, RouterModule, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
 import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatTreeModule } from '@angular/material/tree';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatListModule } from '@angular/material/list';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
@@ -50,6 +35,9 @@ import { Editor, NgxEditorModule } from 'ngx-editor';
 import { utils, writeFile, read } from 'xlsx';
 import { DomSanitizer } from '@angular/platform-browser';
 import { diff, formatters } from 'jsondiffpatch';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 class ActionPopup {
 }
@@ -2280,8 +2268,9 @@ Timeline.THIS_YEAR = 10;
 Timeline.LAST_YEAR = 11;
 Timeline.ALL = 12;
 
-class TimelineFilterComponent {
+let TimelineFilterComponent = class TimelineFilterComponent {
     constructor() {
+        this.timelineValue = new FormControl('');
         this.timelines = [
             { value: 1, viewValue: 'Custom' },
             { value: 2, viewValue: 'Today' },
@@ -2299,13 +2288,17 @@ class TimelineFilterComponent {
         this.labelText = 'Select Timeline';
         this.dateFrom = 'date_from';
         this.dateTo = 'date_to';
+        this.appearance = "legacy";
+        this.showClearbutton = false;
         this.showCustomDateFields = false;
     }
     set defaultValue(value) {
-        this.timelineValue = value;
+        this.timelineValue.setValue(value);
         this.changeTimeline(value);
     }
     ngOnInit() {
+        this.timelineValue.valueChanges.
+            pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.changeTimeline(value));
     }
     resetFieldValue(field) {
         this.form.get(field).setValue('');
@@ -2324,23 +2317,29 @@ class TimelineFilterComponent {
             this.showCustomDateFields = timeline.show_custom_field;
         }
     }
-}
+};
 TimelineFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-timeline-filter',
-                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field>\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select (selectionChange)=\"changeTimeline($event.value)\" [value]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field>\n            <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
+                template: "<ng-container [formGroup]=\"form\">\n    <mat-form-field [appearance]=\"appearance\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select [formControl]=\"timelineValue\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button mat-button *ngIf=\"showClearbutton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <ng-container *ngIf=\"showCustomDateFields\">\n        <mat-form-field [appearance]=\"appearance\">\n            <mat-label>From Date</mat-label>\n            <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n                placeholder=\"From Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n            <mat-datepicker #fromPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateFrom)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n        <mat-form-field [appearance]=\"appearance\">\n            <mat-label>To Date</mat-label>\n            <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n                placeholder=\"To Date\" readonly />\n            <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n            <mat-datepicker #toPicker></mat-datepicker>\n            <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n                (click)=\"resetFieldValue(dateTo)\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n\n    </ng-container>\n</ng-container>",
                 styles: [""]
             },] }
 ];
 TimelineFilterComponent.ctorParameters = () => [];
 TimelineFilterComponent.propDecorators = {
+    timelineValue: [{ type: Input }],
     timelines: [{ type: Input }],
     labelText: [{ type: Input }],
     dateFrom: [{ type: Input }],
     dateTo: [{ type: Input }],
+    appearance: [{ type: Input }],
+    showClearbutton: [{ type: Input }],
     form: [{ type: Input }],
     defaultValue: [{ type: Input }]
 };
+TimelineFilterComponent = __decorate([
+    UntilDestroy()
+], TimelineFilterComponent);
 
 class LoaderComponent {
     constructor() {
@@ -2648,57 +2647,34 @@ DataManager.ctorParameters = () => [
     { type: HttpService }
 ];
 
-/*
- * This module imports and re-exports all Angular Material modules for convenience,
- * so only 1 module import is needed in your feature modules.
- * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
- *
- * To optimize your production builds, you should only import the components used in your app.
- */
 class MaterialModule {
 }
 MaterialModule.decorators = [
     { type: NgModule, args: [{
                 exports: [
-                    MatAutocompleteModule,
-                    MatBadgeModule,
                     MatButtonModule,
-                    MatButtonToggleModule,
-                    MatCardModule,
                     MatCheckboxModule,
-                    MatChipsModule,
                     MatCommonModule,
-                    MatDatepickerModule,
                     MatDialogModule,
-                    MatDividerModule,
-                    MatExpansionModule,
                     MatFormFieldModule,
-                    MatGridListModule,
                     MatIconModule,
                     MatInputModule,
                     MatLineModule,
-                    MatListModule,
                     MatMenuModule,
                     MatNativeDateModule,
                     MatOptionModule,
-                    MatPaginatorModule,
-                    MatProgressBarModule,
                     MatProgressSpinnerModule,
                     MatPseudoCheckboxModule,
-                    MatRadioModule,
                     MatRippleModule,
                     MatSelectModule,
-                    MatSidenavModule,
-                    MatSlideToggleModule,
-                    MatSliderModule,
-                    MatSnackBarModule,
                     MatSortModule,
-                    MatStepperModule,
                     MatTableModule,
-                    MatTabsModule,
-                    MatToolbarModule,
-                    MatTooltipModule,
-                    MatTreeModule
+                    MatCardModule,
+                    MatDividerModule,
+                    MatChipsModule,
+                    MatDatepickerModule,
+                    MatListModule,
+                    MatTooltipModule
                 ]
             },] }
 ];
@@ -3241,11 +3217,19 @@ EmailSubscriptionUserListComponent = __decorate([
     UntilDestroy()
 ], EmailSubscriptionUserListComponent);
 
+const esulr = {
+    title: 'Email Subscription Users',
+    permissions: {
+        only: ['app_admin'],
+        redirectTo: '/'
+    }
+};
 const routes$4 = [
     {
         path: '',
         component: EmailSubscriptionUserListComponent,
-        canActivate: [AuthenticationGuard]
+        canActivate: [AuthenticationGuard],
+        data: esulr
     },
 ];
 class EmailSubscriptionUserListRoutingModule {
@@ -3632,11 +3616,19 @@ EmailSubscriptionTypeListComponent = __decorate([
     UntilDestroy()
 ], EmailSubscriptionTypeListComponent);
 
+const estlr = {
+    title: 'Email Subscription Type',
+    permissions: {
+        only: ['client_admin'],
+        redirectTo: '/'
+    }
+};
 const routes$8 = [
     {
         path: '',
         component: EmailSubscriptionTypeListComponent,
         canActivate: [AuthenticationGuard],
+        data: estlr
     },
 ];
 class EmailSubscriptionTypeListRoutingModule {
@@ -3733,11 +3725,17 @@ EmailSubscriptionForUserComponent = __decorate([
     UntilDestroy()
 ], EmailSubscriptionForUserComponent);
 
+const esfur = {
+    permissions: {
+        only: ['client_admin']
+    }
+};
 const routes$9 = [
     {
         path: '',
         component: EmailSubscriptionForUserComponent,
         canActivate: [AuthenticationGuard],
+        data: esfur
     },
 ];
 class EmailSubscriptionForUserRoutingModule {
@@ -5599,117 +5597,470 @@ LoginHistoryForUserModule.decorators = [
             },] }
 ];
 
-const routes$n = [];
-class ImageForModelRoutingModule {
+class TechlifyTaggerTagFormConfigModel {
+    constructor() {
+        this.selectable = true;
+        this.removable = true;
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.placeholder = 'New Tag..';
+        this.apiUrl = 'api/techlify-tagger-tags';
+        this.createApiUrl = 'api/techlify-tagger-tags';
+        this.isCreateable = true;
+        this.isCacheTags = false;
+        this.isSingle = false;
+    }
+}
+
+var TechlifyTaggerTagFormFieldComponent_1;
+let TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = class TechlifyTaggerTagFormFieldComponent {
+    constructor(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this.httpService = httpService;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.controlType = 'techlify-tagger-form-field';
+        this.id = `techlify-tagger-form-field-${TechlifyTaggerTagFormFieldComponent_1.nextId++}`;
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.tagInputCtrl = new FormControl();
+        /**Pass the configuration for Techlify Tagger */
+        this.config = new TechlifyTaggerTagFormConfigModel();
+        /**Pass the default list of tags */
+        this._allTags = [];
+        /**Pass the Categories to filter for a model */
+        this.categories = [];
+        this._required = false;
+        this._disabled = false;
+        this._value = [];
+        this.tagInputCtrl.valueChanges
+            .subscribe(filterValue => {
+            this.filterString = filterValue;
+        });
+        //Set Focus Monitor
+        _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+            if (this.focused && !origin) {
+                this.onTouched();
+            }
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    get allTags() {
+        return this._allTags;
+    }
+    set allTags(value) {
+        this._allTags = value;
+    }
+    get tags() {
+        return this.allTags.filter(x => this.value.some(y => y == x.id));
+    }
+    //Default Getter and Setters for a Form Field Implementation
+    get empty() {
+        return this.value.length == 0;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty || this.tagInputCtrl.value;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.tagInputCtrl.disable() : this.tagInputCtrl.enable();
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(tagIds) {
+        this._value = tagIds || [];
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.tagInputCtrl.dirty && this.required && (this.value.length == 0);
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        //API to load all tags for the model type
+        if (this.allTags.length == 0) {
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    perPage: '1000'
+                }
+            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
+                this.allTags = result.data;
+            });
+        }
+        //API to load only the selected tags for the model
+        if (this.modelId && this.value.length == 0) {
+            //Model Id is passed and no tags are present, so we query db for the avilable tags for the model ID.
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    model_type: this.modelType,
+                    model_id: this.modelId,
+                    perPage: '1000'
+                }
+            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
+                this.value = ((result === null || result === void 0 ? void 0 : result.data) || []).map((x) => x.id);
+                this._handleInput();
+            });
+        }
+    }
+    init() {
+        if (this.modelId && this.allTags.length == 0) {
+            //Model Id is passed and no tags are passed, so we query db for the avilable tags for the model ID.
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    model_type: this.modelType,
+                    model_id: this.modelId
+                }
+            }).pipe(untilDestroyed(this)).subscribe((result) => {
+                this.allTags = result.data;
+            });
+        }
+    }
+    get filteredTags() {
+        return this._filter();
+    }
+    setDescribedByIds(ids) {
+        // Just a empty implementation for Mat Form Field Interface
+    }
+    onContainerClick() {
+        // Just a empty implementation for Mat Form Field Interface
+    }
+    add(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const value = (event.value || '').trim();
+            // Add our tag
+            // Validate for single mode
+            if (!this.config.isSingle || (this.value.length === 0)) {
+                if (value && this.config.isCreateable) {
+                    const tags = this.allTags;
+                    let tag = tags.find((item) => item.title.toLowerCase() == value.toLowerCase());
+                    if (!tag) {
+                        //No tag present in the list
+                        try {
+                            const result = yield this.httpService.post(this.config.createApiUrl, {
+                                title: value,
+                                description: value,
+                                category_title: (this.categories.length > 0) ? (this.defaultCreateCategory ? this.defaultCreateCategory : this.categories[0]) : ''
+                            }).toPromise();
+                            tag = result.item;
+                        }
+                        catch (error) {
+                            return;
+                        }
+                        this.allTags.push(tag);
+                    }
+                    else {
+                        //Optionally clean the existing value, to avoid duplicate
+                        this.remove(tag);
+                    }
+                    this.value.push(tag.id);
+                    this._handleInput();
+                }
+            }
+            // Clear the input value
+            event.input.value = '';
+            this.tagInputCtrl.setValue(null);
+        });
+    }
+    remove(tag) {
+        this.value = this.value.filter(x => x !== tag.id);
+        this._handleInput();
+    }
+    selected(event) {
+        // Validate for single mode
+        if (!this.config.isSingle || (this.value.length === 0)) {
+            //Clean the existing value, to avoid duplicate
+            this.remove({ id: event.option.value });
+            this.value.push(event.option.value);
+            this._handleInput();
+        }
+        this.tagInput.nativeElement.value = '';
+        this.tagInputCtrl.setValue(null);
+    }
+    _filter() {
+        const filterValue = this.filterString ? this.filterString.toString().toLowerCase() : null;
+        const availableTags = this.allTags.filter((tag) => !this.value.some((item) => item == tag.id));
+        return filterValue ? availableTags.filter((tag) => tag.title.toLowerCase().includes(filterValue)) : availableTags;
+    }
+    writeValue(tagIds) {
+        this.value = tagIds || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    _handleInput() {
+        this.onChange(this.value);
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+};
+TechlifyTaggerTagFormFieldComponent.nextId = 0;
+TechlifyTaggerTagFormFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-techlify-tagger-tag-form-field',
+                template: "<mat-chip-list #chipList aria-label=\"Tag Selection\">\n    <mat-chip *ngFor=\"let tag of tags\" [selectable]=\"config.selectable\" [removable]=\"config.removable\"\n        (removed)=\"remove(tag)\">\n        {{tag.title}}\n        <button matChipRemove *ngIf=\"config.removable\" class=\"border-0\">\n            <mat-icon class=\"mat-relative-icon\">cancel</mat-icon>\n        </button>\n    </mat-chip>\n    <input placeholder=\"{{config.isCreateable? config.placeholder:''}}\" #tagInput [formControl]=\"tagInputCtrl\"\n        [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n        #trigger=\"matAutocompleteTrigger\" (click)=\"trigger.openPanel()\">\n</mat-chip-list>\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let tag of filteredTags\" [value]=\"tag.id\">\n        {{tag.title}}\n    </mat-option>\n</mat-autocomplete>",
+                providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent_1 }],
+                styles: [".mat-relative-icon{font-size:20px;position:relative;right:7px;top:-3px}"]
+            },] }
+];
+TechlifyTaggerTagFormFieldComponent.ctorParameters = () => [
+    { type: FocusMonitor },
+    { type: ElementRef },
+    { type: HttpService },
+    { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] },
+    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
+];
+TechlifyTaggerTagFormFieldComponent.propDecorators = {
+    tagInput: [{ type: ViewChild, args: ['tagInput',] }],
+    config: [{ type: Input }],
+    modelType: [{ type: Input }],
+    modelId: [{ type: Input }],
+    allTags: [{ type: Input }],
+    categories: [{ type: Input }],
+    defaultCreateCategory: [{ type: Input }],
+    required: [{ type: Input }],
+    disabled: [{ type: Input }],
+    value: [{ type: Input }],
+    placeholder: [{ type: Input }]
+};
+TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = __decorate([
+    UntilDestroy()
+], TechlifyTaggerTagFormFieldComponent);
+
+class TechlifyTaggerTagFormFieldModule {
 }
-ImageForModelRoutingModule.decorators = [
+TechlifyTaggerTagFormFieldModule.decorators = [
     { type: NgModule, args: [{
-                imports: [RouterModule.forChild(routes$n)],
-                exports: [RouterModule]
+                declarations: [
+                    TechlifyTaggerTagFormFieldComponent
+                ],
+                imports: [
+                    CommonModule,
+                    MaterialModule,
+                    FlexLayoutModule,
+                    MatAutocompleteModule,
+                    ReactiveFormsModule
+                ],
+                exports: [TechlifyTaggerTagFormFieldComponent]
             },] }
 ];
 
-let ImageForModelComponent = class ImageForModelComponent {
-    constructor(http, alertService) {
-        this.http = http;
-        this.alertService = alertService;
-        this.containerId = 'file-upload';
-        this.imageFileChange = new EventEmitter();
-        this.imageUrlChange = new EventEmitter();
-    }
-    ngOnInit() {
+var TechlifyTaggerTagSelectorComponent_1;
+let TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = class TechlifyTaggerTagSelectorComponent {
+    constructor(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this.httpService = httpService;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        /**Pass the Categories to filter for a model */
+        this.categories = [];
+        this.multiple = false;
+        this.enableSearch = true;
+        this.tagSelectorCtrl = new FormControl();
+        this.showAllTags = false;
+        this.useSelectButtonStyle = false;
+        this.tags = [];
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.controlType = 'techlify-tagger-selector';
+        this.id = `techlify-tagger-selector-${TechlifyTaggerTagSelectorComponent_1.nextId++}`;
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this._required = false;
+        this._disabled = false;
+        //Set Focus Monitor
+        _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+            if (this.focused && !origin) {
+                this.onTouched();
+            }
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
-    /**Method tp validate the file size */
-    fileSizeAllowed(file) {
-        if (!Boolean(this.maxUploadSize)) {
-            return true;
+    get apiUrl() {
+        var _a;
+        if (this.showAllTags) {
+            return 'api/techlify-tagger-tags';
         }
-        else if (file.size / (1024 * 1024) < this.maxUploadSize) {
-            return true;
+        else if (((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return 'api/techlify-tagger-tags?categories=' + this.categories.join(',');
         }
         else {
-            this.alertService.addAlert(`The size of the file exceeds the limit ${this.maxUploadSize} MB, kindly upload a file with size ${this.maxUploadSize} MB or below`, "warn");
-            return false;
+            return '';
         }
     }
-    onselectFile(e) {
-        if (e.target.files && this.fileSizeAllowed(e.target.files[0])) {
-            this.uploadFile(e.target.files[0]);
+    //Default Getter and Setters for a Form Field Implementation
+    get empty() {
+        return this.value.length == 0;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.tagSelectorCtrl.disable() : this.tagSelectorCtrl.enable();
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        this.tagSelectorCtrl.setValue(val);
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.tagSelectorCtrl.dirty && this.required && (this.value.length == 0);
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    ngOnInit() {
+        if (this.useSelectButtonStyle) {
+            this.httpService.get(this.apiUrl)
+                .pipe(untilDestroyed(this))
+                .subscribe((res) => {
+                this.tags = res.data;
+            });
         }
     }
-    uploadFile(file) {
-        const formData = new FormData();
-        formData.append("fileData", file);
-        this.http
-            .skipHeader()
-            .post(this.uploadUrl, formData)
-            .pipe(untilDestroyed(this))
-            .subscribe((result) => {
-            var _a, _b;
-            this.imageFile = (_a = result.item) === null || _a === void 0 ? void 0 : _a.file;
-            this.imageUrl = (_b = result.item) === null || _b === void 0 ? void 0 : _b.url;
-            this.imageFileChange.emit(this.imageFile);
-            this.imageUrlChange.emit(this.imageUrl);
-        });
+    selectionChange(value) {
+        this.value = value;
+        this._handleInput();
     }
-    removeImage(event) {
-        event.stopPropagation();
-        this.http
-            .put(this.removeUrl, { file: this.imageFile })
-            .pipe(untilDestroyed(this))
-            .subscribe((result) => {
-            this.imageFile = '';
-            this.imageUrl = '';
-            this.imageFileChange.emit(this.imageFile);
-            this.imageUrlChange.emit(this.imageUrl);
-        });
+    setDescribedByIds(ids) {
+        // Just a empty implementation for Mat Form Field Interface
     }
-    viewImage(event) {
-        event.stopPropagation();
-        window.open(this.imageUrl, '_blank');
+    onContainerClick() {
+        // Just a empty implementation for Mat Form Field Interface
+    }
+    writeValue(val) {
+        this.value = val;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    _handleInput() {
+        this.onChange(this.value);
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
     }
 };
-ImageForModelComponent.decorators = [
+TechlifyTaggerTagSelectorComponent.nextId = 0;
+TechlifyTaggerTagSelectorComponent.decorators = [
     { type: Component, args: [{
-                selector: 'app-image-for-model',
-                template: "<input [id]=\"containerId\" type=\"file\" (change)=\"onselectFile($event)\" accept=\"image/*\" />\n<label [for]=\"containerId\" id=\"file-drag\" [ngStyle]=\"containerStyle\">\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" id=\"file-image\" alt=\"Preview\">\n    <div fxLayout *ngIf=\"imageUrl\" class=\"image-action\">\n        <button type=\"button\" *ngIf=\"!disableRemove \" mat-icon-button color=\"accent\" (click)=\"removeImage($event)\">\n            <mat-icon>delete</mat-icon>\n        </button>\n        <button type=\"button\" *ngIf=\"enableView\" mat-icon-button color=\"primary\" (click)=\"viewImage($event)\">\n            <mat-icon>preview</mat-icon>\n        </button>\n    </div>\n    <div style=\"height: 100%;\" *ngIf=\"!imageUrl\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon>cloud_upload</mat-icon>\n        <div>Select a file to upload</div>\n    </div>\n</label>",
-                styles: ["input[type=file]{display:none}label{-webkit-user-select:none;border:3px solid #eee;border-radius:7px;clear:both;float:left;height:300px;padding:10px;text-align:center;transition:all .2s ease;user-select:none;width:300px}label:hover{border-color:#000;cursor:pointer}label #file-image{display:inline;height:100%;object-fit:cover;width:100%}label #file-image.hidden{display:none}.image-action{background:hsla(0,0%,88.2%,.2);position:relative;top:-35px}"]
+                selector: 'app-techlify-tagger-tag-selector',
+                template: "<app-searchable-selector *ngIf=\"apiUrl && !useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [apiUrl]=\"apiUrl\"\n    [enableSearch]=\"enableSearch\" [multiple]=\"multiple\" (selectionChange)=\"selectionChange($event)\">\n</app-searchable-selector>\n\n<mat-button-toggle-group *ngIf=\"apiUrl && useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [multiple]=\"multiple\"\n    (change)=\"selectionChange($event.value)\">\n    <mat-button-toggle *ngFor=\"let tag of tags\" [value]=\"tag.id\">{{tag.title}}</mat-button-toggle>\n</mat-button-toggle-group>",
+                providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent_1 }],
+                styles: [""]
             },] }
 ];
-ImageForModelComponent.ctorParameters = () => [
+TechlifyTaggerTagSelectorComponent.ctorParameters = () => [
+    { type: FocusMonitor },
+    { type: ElementRef },
     { type: HttpService },
-    { type: AlertService }
+    { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] },
+    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
 ];
-ImageForModelComponent.propDecorators = {
-    uploadUrl: [{ type: Input }],
-    removeUrl: [{ type: Input }],
-    imageFile: [{ type: Input }],
-    imageUrl: [{ type: Input }],
-    maxUploadSize: [{ type: Input }],
-    disableRemove: [{ type: Input }],
-    enableView: [{ type: Input }],
-    containerStyle: [{ type: Input }],
-    containerId: [{ type: Input }],
-    imageFileChange: [{ type: Output }],
-    imageUrlChange: [{ type: Output }]
+TechlifyTaggerTagSelectorComponent.propDecorators = {
+    categories: [{ type: Input }],
+    multiple: [{ type: Input }],
+    enableSearch: [{ type: Input }],
+    showAllTags: [{ type: Input }],
+    useSelectButtonStyle: [{ type: Input }],
+    required: [{ type: Input }],
+    disabled: [{ type: Input }],
+    value: [{ type: Input }],
+    placeholder: [{ type: Input }]
 };
-ImageForModelComponent = __decorate([
+TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = __decorate([
     UntilDestroy()
-], ImageForModelComponent);
+], TechlifyTaggerTagSelectorComponent);
 
-class ImageForModelModule {
+class TechlifyTaggerTagSelectorModule {
 }
-ImageForModelModule.decorators = [
+TechlifyTaggerTagSelectorModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [ImageForModelComponent],
+                declarations: [
+                    TechlifyTaggerTagSelectorComponent
+                ],
                 imports: [
                     CommonModule,
                     MaterialModule,
                     FlexLayoutModule,
+                    MatAutocompleteModule,
                     ReactiveFormsModule,
-                    ImageForModelRoutingModule
+                    SearchableSelectorModule,
+                    MatButtonToggleModule
                 ],
-                exports: [ImageForModelComponent]
+                exports: [TechlifyTaggerTagSelectorComponent]
             },] }
 ];
 
@@ -5721,5 +6072,5 @@ ImageForModelModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ConfigService, CoreModule, CredentialsService, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FailedItemsComponent, FailedItemsModule, FailedItemsRoutingModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImageForModelComponent, ImageForModelModule, ImageForModelRoutingModule, ImportConfig, ImportCsvComponent, ImportCsvModule, ImportCsvRoutingModule, ImportItemsComponent, ImportItemsModule, ImportItemsRoutingModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, MatSelectInfiniteScrollDirective, MaterialModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberSelector, PageEvent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyConfig, TechlifyUpdateHistoryModule, TechlifyUpdateModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, UtilityModule, ViewerConfig, calculateTimeline, SnackModule as ɵa, SuccessSnackComponent as ɵb, EmailSubscriptionUserFormComponent as ɵba, EmailSubscriptionUserListComponent as ɵbb, AuthenticationGuard as ɵbc, CredentialsService as ɵbd, ConfigService as ɵbe, TechlifyConfig as ɵbf, EmailSubscriptionUserListFilterComponent as ɵbg, EmailSubscriptionTypeFormComponent as ɵbh, EmailSubscriptionTypeListComponent as ɵbi, EmailSubscriptionForUserComponent as ɵbj, TechlifyUpdatesListComponent as ɵbk, TechlifyUpdateService as ɵbl, TechlifyUpdateRoutingModule as ɵbm, TechlifyUpdateFormModule as ɵbn, TechlifyUpdateFormComponent as ɵbo, ReadMoreModule as ɵbp, ReadMoreComponent as ɵbq, TechlifyUpdateHistoryRoutingModule as ɵbr, TechlifyUpdateHistoryComponent as ɵbs, UpdateNotifierSnackComponent as ɵbt, UpdateViewModule as ɵbu, UpdateViewComponent as ɵbv, DataManager as ɵbw, ErrorSnackComponent as ɵc, HTTP_DYNAMIC_INTERCEPTORS as ɵd, HttpService as ɵe, RouteReusableStrategy as ɵf, ActionPopupComponent as ɵg, ActionPopup as ɵh, DataTableComponent as ɵi, DocumentViewerComponent as ɵj, EntityFileFormComponent as ɵk, FormValidatorService as ɵl, EntityFileService as ɵm, AlertService as ɵn, EntityFilesViewAllComponent as ɵo, FileDropperComponent as ɵp, NoteListComponent as ɵq, NoteService as ɵr, NoteFormComponent as ɵs, SearchableSelectorComponent as ɵt, MatSelectInfiniteScrollDirective as ɵu, NumItemsSelector as ɵv, NumberSelector as ɵw, TimelineFilterComponent as ɵx, TimelineFilterRoutingModule as ɵy, LoaderComponent as ɵz };
+export { ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ConfigService, CoreModule, CredentialsService, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FailedItemsComponent, FailedItemsModule, FailedItemsRoutingModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportConfig, ImportCsvComponent, ImportCsvModule, ImportCsvRoutingModule, ImportItemsComponent, ImportItemsModule, ImportItemsRoutingModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, MatSelectInfiniteScrollDirective, MaterialModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberSelector, PageEvent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyConfig, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr, SnackModule as ɵa, SuccessSnackComponent as ɵb, EmailSubscriptionUserFormComponent as ɵba, EmailSubscriptionUserListComponent as ɵbb, AuthenticationGuard as ɵbc, CredentialsService as ɵbd, ConfigService as ɵbe, TechlifyConfig as ɵbf, EmailSubscriptionUserListFilterComponent as ɵbg, EmailSubscriptionTypeFormComponent as ɵbh, EmailSubscriptionTypeListComponent as ɵbi, EmailSubscriptionForUserComponent as ɵbj, TechlifyUpdatesListComponent as ɵbk, TechlifyUpdateService as ɵbl, TechlifyUpdateRoutingModule as ɵbm, TechlifyUpdateFormModule as ɵbn, TechlifyUpdateFormComponent as ɵbo, ReadMoreModule as ɵbp, ReadMoreComponent as ɵbq, TechlifyUpdateHistoryRoutingModule as ɵbr, TechlifyUpdateHistoryComponent as ɵbs, UpdateNotifierSnackComponent as ɵbt, UpdateViewModule as ɵbu, UpdateViewComponent as ɵbv, DataManager as ɵbw, ErrorSnackComponent as ɵc, HTTP_DYNAMIC_INTERCEPTORS as ɵd, HttpService as ɵe, RouteReusableStrategy as ɵf, ActionPopupComponent as ɵg, ActionPopup as ɵh, DataTableComponent as ɵi, DocumentViewerComponent as ɵj, EntityFileFormComponent as ɵk, FormValidatorService as ɵl, EntityFileService as ɵm, AlertService as ɵn, EntityFilesViewAllComponent as ɵo, FileDropperComponent as ɵp, NoteListComponent as ɵq, NoteService as ɵr, NoteFormComponent as ɵs, SearchableSelectorComponent as ɵt, MatSelectInfiniteScrollDirective as ɵu, NumItemsSelector as ɵv, NumberSelector as ɵw, TimelineFilterComponent as ɵx, TimelineFilterRoutingModule as ɵy, LoaderComponent as ɵz };
 //# sourceMappingURL=ngx-techlify-core.js.map