ngx-techlify-core 11.3.2 → 11.3.3

package/bundles/ngx-techlify-core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/material/table'), require('@angular/material/sort'), require('@ngneat/until-destroy'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/snack-bar'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/icon'), require('@angular/router'), require('@angular/material/tooltip'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/list'), require('@angular/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch')) :
-    typeof define === 'function' && define.amd ? define('ngx-techlify-core', ['exports', '@angular/core', '@angular/material/dialog', '@angular/material/table', '@angular/material/sort', '@ngneat/until-destroy', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/snack-bar', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/material/form-field', '@angular/material/select', '@angular/material/icon', '@angular/router', '@angular/material/tooltip', '@angular/material/core', '@angular/material/button', '@angular/material/checkbox', '@angular/material/input', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/card', '@angular/material/divider', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/list', '@angular/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-techlify-core'] = {}, global.ng.core, global.ng.material.dialog, global.ng.material.table, global.ng.material.sort, global['@ngneat/until-destroy'], global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.snackBar, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.material.formField, global.ng.material.select, global.ng.material.icon, global.ng.router, global.ng.material.tooltip, global.ng.material.core, global.ng.material.button, global.ng.material.checkbox, global.ng.material.input, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.card, global.ng.material.divider, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.list, global.ng.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch));
-}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, flexLayout, ngxInfiniteScroll, ngxDocViewer, ngxEditor, XLSX, platformBrowser, jsondiffpatch) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/material/table'), require('@angular/material/sort'), require('@ngneat/until-destroy'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/snack-bar'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/icon'), require('@angular/router'), require('@angular/material/tooltip'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/list'), require('@angular/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch'), require('@angular/cdk/keycodes'), require('@angular/material/autocomplete'), require('@angular/material/button-toggle')) :
+    typeof define === 'function' && define.amd ? define('ngx-techlify-core', ['exports', '@angular/core', '@angular/material/dialog', '@angular/material/table', '@angular/material/sort', '@ngneat/until-destroy', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/snack-bar', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/material/form-field', '@angular/material/select', '@angular/material/icon', '@angular/router', '@angular/material/tooltip', '@angular/material/core', '@angular/material/button', '@angular/material/checkbox', '@angular/material/input', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/card', '@angular/material/divider', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/list', '@angular/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch', '@angular/cdk/keycodes', '@angular/material/autocomplete', '@angular/material/button-toggle'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-techlify-core'] = {}, global.ng.core, global.ng.material.dialog, global.ng.material.table, global.ng.material.sort, global['@ngneat/until-destroy'], global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.snackBar, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.material.formField, global.ng.material.select, global.ng.material.icon, global.ng.router, global.ng.material.tooltip, global.ng.material.core, global.ng.material.button, global.ng.material.checkbox, global.ng.material.input, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.card, global.ng.material.divider, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.list, global.ng.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch, global.ng.cdk.keycodes, global.ng.material.autocomplete, global.ng.material.buttonToggle));
+}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, flexLayout, ngxInfiniteScroll, ngxDocViewer, ngxEditor, XLSX, platformBrowser, jsondiffpatch, keycodes, autocomplete, buttonToggle) { 'use strict';
 
     var ActionPopup = /** @class */ (function () {
         function ActionPopup() {
@@ -6464,6 +6464,571 @@
                 },] }
     ];
 
+    var TechlifyTaggerTagFormConfigModel = /** @class */ (function () {
+        function TechlifyTaggerTagFormConfigModel() {
+            this.selectable = true;
+            this.removable = true;
+            this.separatorKeysCodes = [keycodes.ENTER, keycodes.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;
+        }
+        return TechlifyTaggerTagFormConfigModel;
+    }());
+
+    var TechlifyTaggerTagFormFieldComponent_1;
+    exports.TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = /** @class */ (function () {
+        function TechlifyTaggerTagFormFieldComponent(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
+            var _this = this;
+            this._focusMonitor = _focusMonitor;
+            this._elementRef = _elementRef;
+            this.httpService = httpService;
+            this._formField = _formField;
+            this.ngControl = ngControl;
+            this.stateChanges = new rxjs.Subject();
+            this.focused = false;
+            this.controlType = 'techlify-tagger-form-field';
+            this.id = "techlify-tagger-form-field-" + TechlifyTaggerTagFormFieldComponent_1.nextId++;
+            this.onChange = function (_) { };
+            this.onTouched = function () { };
+            this.tagInputCtrl = new forms.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(function (filterValue) {
+                _this.filterString = filterValue;
+            });
+            //Set Focus Monitor
+            _focusMonitor.monitor(_elementRef, true).subscribe(function (origin) {
+                if (_this.focused && !origin) {
+                    _this.onTouched();
+                }
+                _this.focused = !!origin;
+                _this.stateChanges.next();
+            });
+            if (this.ngControl != null) {
+                this.ngControl.valueAccessor = this;
+            }
+        }
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "allTags", {
+            get: function () {
+                return this._allTags;
+            },
+            set: function (value) {
+                this._allTags = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "tags", {
+            get: function () {
+                var _this = this;
+                return this.allTags.filter(function (x) { return _this.value.some(function (y) { return y == x.id; }); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "empty", {
+            //Default Getter and Setters for a Form Field Implementation
+            get: function () {
+                return this.value.length == 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "shouldLabelFloat", {
+            get: function () {
+                return this.focused || !this.empty || this.tagInputCtrl.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "required", {
+            get: function () {
+                return this._required;
+            },
+            set: function (value) {
+                this._required = coercion.coerceBooleanProperty(value);
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = coercion.coerceBooleanProperty(value);
+                this._disabled ? this.tagInputCtrl.disable() : this.tagInputCtrl.enable();
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (tagIds) {
+                this._value = tagIds || [];
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "errorState", {
+            get: function () {
+                return this.tagInputCtrl.dirty && this.required && (this.value.length == 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "placeholder", {
+            get: function () {
+                return this._placeholder;
+            },
+            set: function (value) {
+                this._placeholder = value;
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TechlifyTaggerTagFormFieldComponent.prototype.ngOnInit = function () {
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            //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(operators.debounceTime(500), untilDestroy.untilDestroyed(this)).subscribe(function (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(operators.debounceTime(500), untilDestroy.untilDestroyed(this)).subscribe(function (result) {
+                    _this.value = ((result === null || result === void 0 ? void 0 : result.data) || []).map(function (x) { return x.id; });
+                    _this._handleInput();
+                });
+            }
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.init = function () {
+            var _this = this;
+            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(untilDestroy.untilDestroyed(this)).subscribe(function (result) {
+                    _this.allTags = result.data;
+                });
+            }
+        };
+        Object.defineProperty(TechlifyTaggerTagFormFieldComponent.prototype, "filteredTags", {
+            get: function () {
+                return this._filter();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TechlifyTaggerTagFormFieldComponent.prototype.setDescribedByIds = function (ids) {
+            // Just a empty implementation for Mat Form Field Interface
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.onContainerClick = function () {
+            // Just a empty implementation for Mat Form Field Interface
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.add = function (event) {
+            return __awaiter(this, void 0, void 0, function () {
+                var value, tags, tag, result, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            value = (event.value || '').trim();
+                            if (!(!this.config.isSingle || (this.value.length === 0))) return [3 /*break*/, 7];
+                            if (!(value && this.config.isCreateable)) return [3 /*break*/, 7];
+                            tags = this.allTags;
+                            tag = tags.find(function (item) { return item.title.toLowerCase() == value.toLowerCase(); });
+                            if (!!tag) return [3 /*break*/, 5];
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*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()];
+                        case 2:
+                            result = _a.sent();
+                            tag = result.item;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _a.sent();
+                            return [2 /*return*/];
+                        case 4:
+                            this.allTags.push(tag);
+                            return [3 /*break*/, 6];
+                        case 5:
+                            //Optionally clean the existing value, to avoid duplicate
+                            this.remove(tag);
+                            _a.label = 6;
+                        case 6:
+                            this.value.push(tag.id);
+                            this._handleInput();
+                            _a.label = 7;
+                        case 7:
+                            // Clear the input value
+                            event.input.value = '';
+                            this.tagInputCtrl.setValue(null);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.remove = function (tag) {
+            this.value = this.value.filter(function (x) { return x !== tag.id; });
+            this._handleInput();
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.selected = function (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);
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype._filter = function () {
+            var _this = this;
+            var filterValue = this.filterString ? this.filterString.toString().toLowerCase() : null;
+            var availableTags = this.allTags.filter(function (tag) { return !_this.value.some(function (item) { return item == tag.id; }); });
+            return filterValue ? availableTags.filter(function (tag) { return tag.title.toLowerCase().includes(filterValue); }) : availableTags;
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.writeValue = function (tagIds) {
+            this.value = tagIds || [];
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype._handleInput = function () {
+            this.onChange(this.value);
+        };
+        TechlifyTaggerTagFormFieldComponent.prototype.ngOnDestroy = function () {
+            this.stateChanges.complete();
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        };
+        return TechlifyTaggerTagFormFieldComponent;
+    }());
+    exports.TechlifyTaggerTagFormFieldComponent.nextId = 0;
+    exports.TechlifyTaggerTagFormFieldComponent.decorators = [
+        { type: i0.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: formField.MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent_1 }],
+                    styles: [".mat-relative-icon{font-size:20px;position:relative;right:7px;top:-3px}"]
+                },] }
+    ];
+    exports.TechlifyTaggerTagFormFieldComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: i0.ElementRef },
+        { type: HttpService },
+        { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] },
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
+    ]; };
+    exports.TechlifyTaggerTagFormFieldComponent.propDecorators = {
+        tagInput: [{ type: i0.ViewChild, args: ['tagInput',] }],
+        config: [{ type: i0.Input }],
+        modelType: [{ type: i0.Input }],
+        modelId: [{ type: i0.Input }],
+        allTags: [{ type: i0.Input }],
+        categories: [{ type: i0.Input }],
+        defaultCreateCategory: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }]
+    };
+    exports.TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = __decorate([
+        untilDestroy.UntilDestroy()
+    ], exports.TechlifyTaggerTagFormFieldComponent);
+
+    var TechlifyTaggerTagFormFieldModule = /** @class */ (function () {
+        function TechlifyTaggerTagFormFieldModule() {
+        }
+        return TechlifyTaggerTagFormFieldModule;
+    }());
+    TechlifyTaggerTagFormFieldModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        exports.TechlifyTaggerTagFormFieldComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        MaterialModule,
+                        flexLayout.FlexLayoutModule,
+                        autocomplete.MatAutocompleteModule,
+                        forms.ReactiveFormsModule
+                    ],
+                    exports: [exports.TechlifyTaggerTagFormFieldComponent]
+                },] }
+    ];
+
+    var TechlifyTaggerTagSelectorComponent_1;
+    exports.TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = /** @class */ (function () {
+        function TechlifyTaggerTagSelectorComponent(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
+            var _this = this;
+            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 forms.FormControl();
+            this.showAllTags = false;
+            this.useSelectButtonStyle = false;
+            this.tags = [];
+            this.stateChanges = new rxjs.Subject();
+            this.focused = false;
+            this.controlType = 'techlify-tagger-selector';
+            this.id = "techlify-tagger-selector-" + TechlifyTaggerTagSelectorComponent_1.nextId++;
+            this.onChange = function (_) { };
+            this.onTouched = function () { };
+            this._required = false;
+            this._disabled = false;
+            //Set Focus Monitor
+            _focusMonitor.monitor(_elementRef, true).subscribe(function (origin) {
+                if (_this.focused && !origin) {
+                    _this.onTouched();
+                }
+                _this.focused = !!origin;
+                _this.stateChanges.next();
+            });
+            if (this.ngControl != null) {
+                this.ngControl.valueAccessor = this;
+            }
+        }
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "apiUrl", {
+            get: function () {
+                var _a;
+                if (this.showAllTags) {
+                    return 'api/techlify-tagger-tags';
+                }
+                else if (((_a = this.categories) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    return 'api/techlify-tagger-tags?categories=' + this.categories.join(',');
+                }
+                else {
+                    return '';
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "empty", {
+            //Default Getter and Setters for a Form Field Implementation
+            get: function () {
+                return this.value.length == 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "shouldLabelFloat", {
+            get: function () {
+                return this.focused || !this.empty;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "required", {
+            get: function () {
+                return this._required;
+            },
+            set: function (value) {
+                this._required = coercion.coerceBooleanProperty(value);
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = coercion.coerceBooleanProperty(value);
+                this._disabled ? this.tagSelectorCtrl.disable() : this.tagSelectorCtrl.enable();
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            set: function (val) {
+                this._value = val;
+                this.tagSelectorCtrl.setValue(val);
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "errorState", {
+            get: function () {
+                return this.tagSelectorCtrl.dirty && this.required && (this.value.length == 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TechlifyTaggerTagSelectorComponent.prototype, "placeholder", {
+            get: function () {
+                return this._placeholder;
+            },
+            set: function (value) {
+                this._placeholder = value;
+                this.stateChanges.next();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TechlifyTaggerTagSelectorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.useSelectButtonStyle) {
+                this.httpService.get(this.apiUrl)
+                    .pipe(untilDestroy.untilDestroyed(this))
+                    .subscribe(function (res) {
+                    _this.tags = res.data;
+                });
+            }
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.selectionChange = function (value) {
+            this.value = value;
+            this._handleInput();
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.setDescribedByIds = function (ids) {
+            // Just a empty implementation for Mat Form Field Interface
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.onContainerClick = function () {
+            // Just a empty implementation for Mat Form Field Interface
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.writeValue = function (val) {
+            this.value = val;
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        TechlifyTaggerTagSelectorComponent.prototype._handleInput = function () {
+            this.onChange(this.value);
+        };
+        TechlifyTaggerTagSelectorComponent.prototype.ngOnDestroy = function () {
+            this.stateChanges.complete();
+            this._focusMonitor.stopMonitoring(this._elementRef);
+        };
+        return TechlifyTaggerTagSelectorComponent;
+    }());
+    exports.TechlifyTaggerTagSelectorComponent.nextId = 0;
+    exports.TechlifyTaggerTagSelectorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    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: formField.MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent_1 }],
+                    styles: [""]
+                },] }
+    ];
+    exports.TechlifyTaggerTagSelectorComponent.ctorParameters = function () { return [
+        { type: a11y.FocusMonitor },
+        { type: i0.ElementRef },
+        { type: HttpService },
+        { type: formField.MatFormField, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [formField.MAT_FORM_FIELD,] }] },
+        { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
+    ]; };
+    exports.TechlifyTaggerTagSelectorComponent.propDecorators = {
+        categories: [{ type: i0.Input }],
+        multiple: [{ type: i0.Input }],
+        enableSearch: [{ type: i0.Input }],
+        showAllTags: [{ type: i0.Input }],
+        useSelectButtonStyle: [{ type: i0.Input }],
+        required: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        value: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }]
+    };
+    exports.TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = __decorate([
+        untilDestroy.UntilDestroy()
+    ], exports.TechlifyTaggerTagSelectorComponent);
+
+    var TechlifyTaggerTagSelectorModule = /** @class */ (function () {
+        function TechlifyTaggerTagSelectorModule() {
+        }
+        return TechlifyTaggerTagSelectorModule;
+    }());
+    TechlifyTaggerTagSelectorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        exports.TechlifyTaggerTagSelectorComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        MaterialModule,
+                        flexLayout.FlexLayoutModule,
+                        autocomplete.MatAutocompleteModule,
+                        forms.ReactiveFormsModule,
+                        SearchableSelectorModule,
+                        buttonToggle.MatButtonToggleModule
+                    ],
+                    exports: [exports.TechlifyTaggerTagSelectorComponent]
+                },] }
+    ];
+
     /*
      * Public API Surface of ngx-techlify-core
      */
@@ -6575,6 +7140,9 @@
     exports.StorageService = StorageService;
     exports.SuccessSnackComponent = SuccessSnackComponent;
     exports.TechlifyConfig = TechlifyConfig;
+    exports.TechlifyTaggerTagFormConfigModel = TechlifyTaggerTagFormConfigModel;
+    exports.TechlifyTaggerTagFormFieldModule = TechlifyTaggerTagFormFieldModule;
+    exports.TechlifyTaggerTagSelectorModule = TechlifyTaggerTagSelectorModule;
     exports.TechlifyUpdateHistoryModule = TechlifyUpdateHistoryModule;
     exports.TechlifyUpdateModule = TechlifyUpdateModule;
     exports.Timeline = Timeline;