tolga-ng2/fesm2015/tolga-ng2.mjs

Angular 2/4 components and directives

import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { forwardRef, Component, Input, Directive, EventEmitter, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i3 from 'ngx-chips';
import { TagInputModule } from 'ngx-chips';
import { __awaiter } from 'tslib';
import { Subject } from 'rxjs';
import * as i1$2 from '@angular/common/http';

class NgsmAutocompleteComponent {
    constructor() {
        this.defaultTextId = "ngsmAutocompleteDefaultText";
        this.isBusy = false;
        this.remoteResponse = {
            success: true,
            results: []
        };
        this.propagateChange = (_) => { };
    }
    get loadingClass() {
        if (!this.config || !this.config.loadingIcon)
            return "asterisk loading icon";
        return `${this.config.loadingIcon} loading icon`;
    }
    ngOnInit() {
        //this.ngsmService.log("ngsmAutocomplete", "ngOnInit");
    }
    ngOnChanges() {
        //this.ngsmService.log("ngsmAutocomplete", "ngOnChanges");
        if (this.config.id && this.config.url) {
            this.defaultTextId = `${this.config.id}-defaultText`;
            this.setDisplayValue(this.config.placeholder);
            this.init();
        }
    }
    setAutocompleteValidationClass() {
        var returnValue = "";
        if (this.config.required && !this.selectedItem)
            returnValue = "ngsmInvalid";
        else if (this.config.required && this.selectedItem)
            returnValue = "ngsmValid";
        if (this.config.disabled)
            returnValue += " disabled";
        return returnValue;
    }
    setIsActiveClass() {
        var returnValue = "ngsmAutocompleteMuted";
        if (this.selectedItem && this.selectedItem !== null && this.selectedItem !== "" && this.selectedItem.id)
            returnValue = "ngsmAutocompleteActive";
        return returnValue;
    }
    setBusy($event) {
        let srcElement = $event.srcElement;
        let value = srcElement.value;
        if (value && value !== null && value.length >= this.config.minchar)
            this.isBusy = true;
        else
            this.isBusy = false;
    }
    init() {
        //this.ngsmService.log("ngsmAutocomplete", `init: id: ${this.config.id}, url ${this.config.url}`);
        this.setAutocompleteValidationClass();
        let self = this;
        setTimeout(function () {
            sessionStorage.clear();
            $(`#${self.config.id}`).dropdown({
                minCharacters: self.config.minchar,
                placeholder: self.config.placeholder,
                onChange: jQuery.proxy(function (value, text, $selectedItem) {
                    self.isBusy = false;
                    let remoteItem = self.remoteResponse.results.filter(p => p.value === +value)[0];
                    if (remoteItem) {
                        self.selectedItem = remoteItem.item;
                        self.setDisplayValue(self.selectedItem[self.config.selectedItemDisplayBy]);
                        self.propagateChange(self.selectedItem);
                    }
                    self.setAutocompleteValidationClass();
                }, self),
                hideError: true,
                saveRemoteData: false,
                apiSettings: {
                    url: `${self.config.url}/{query}`,
                    method: 'get',
                    hideError: true,
                    saveRemoteData: false,
                    onResponse: function (results) {
                        self.isBusy = false;
                        self.remoteResponse = {
                            success: true,
                            results: []
                        };
                        $.each(results, function (index, item) {
                            self.remoteResponse.results.push({
                                value: item[self.config.identifyBy],
                                name: item[self.config.displayBy],
                                item: item[self.config.objectBy]
                            });
                        });
                        return self.remoteResponse;
                    },
                    onError: function (error) {
                        this.ngsmAppService.error(`ngsmAutocomplete: Error ${error}`);
                    }
                }
            });
        }, 250);
    }
    clear() {
        $(`#${this.config.id}`).dropdown('clear');
        this.setAutocompleteValidationClass();
        this.propagateChange("");
        this.selectedItem = {};
        this.setDisplayValue(this.config.placeholder);
    }
    setDisplayValue(value) {
        //this.ngsmService.log("ngsmAutocomplete", `new value ${value}`);
        let self = this;
        setTimeout(function () {
            $(`#${self.defaultTextId}`).text(value);
        }, 100);
    }
    get value() {
        return this.selectedItem;
    }
    ;
    writeValue(value) {
        if (this.config.id) {
            if (value && value.id) {
                this.selectedItem = value;
                //this.ngsmService.log("ngsmAutocomplete", `writeValue: selectedItem: ${this.selectedItem}`);
                this.setDisplayValue(this.selectedItem[this.config.selectedItemDisplayBy]);
            }
            else {
                this.setDisplayValue(this.config.placeholder);
            }
        }
        else {
            this.setDisplayValue("");
        }
    }
    onTouchedCallback() { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
}
NgsmAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmAutocompleteComponent, selector: "ngsm-autocomplete", inputs: { config: "config" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NgsmAutocompleteComponent),
            multi: true
        }
    ], usesOnChanges: true, ngImport: i0, template: "<div id=\"{{config.id}}\"\r\n  class=\"ui selection search dropdown\"\r\n  (keyup)=\"setBusy($event)\"\r\n  [ngClass]=\"setAutocompleteValidationClass()\">\r\n  <div class=\"default text\"\r\n    id=\"{{defaultTextId}}\"\r\n    [ngClass]=\"setIsActiveClass()\">\r\n    {{value}}\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"isBusy && loadingClass\"\r\n  class=\"loading-container\">\r\n  <i [class]=\"loadingClass\"></i>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"isBusy\"\r\n  class=\"ui active inline small loader\">\r\n</div> -->\r\n\r\n<button class=\"ui icon only button btn-delete\"\r\n  (click)=\"clear()\"\r\n  title=\"{{config.clearMessage}}\"\r\n  [disabled]=\"config.disabled\"\r\n  *ngIf=\"config.allowClear && selectedItem && selectedItem.id\">\r\n  <i class=\"icon trash\"></i>\r\n</button>", styles: [".ngsmAutocompleteMuted{color:gray!important}.ngsmAutocompleteActive{color:#000!important}.ngsmValid{border-left:5px solid #42A948!important;border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.ngsmInvalid{border-left:5px solid #a94442!important;border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.btn-delete{margin-left:3px}.loading-container{display:inline-block;margin-left:3px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmAutocompleteComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-autocomplete', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgsmAutocompleteComponent),
                            multi: true
                        }
                    ], template: "<div id=\"{{config.id}}\"\r\n  class=\"ui selection search dropdown\"\r\n  (keyup)=\"setBusy($event)\"\r\n  [ngClass]=\"setAutocompleteValidationClass()\">\r\n  <div class=\"default text\"\r\n    id=\"{{defaultTextId}}\"\r\n    [ngClass]=\"setIsActiveClass()\">\r\n    {{value}}\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"isBusy && loadingClass\"\r\n  class=\"loading-container\">\r\n  <i [class]=\"loadingClass\"></i>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"isBusy\"\r\n  class=\"ui active inline small loader\">\r\n</div> -->\r\n\r\n<button class=\"ui icon only button btn-delete\"\r\n  (click)=\"clear()\"\r\n  title=\"{{config.clearMessage}}\"\r\n  [disabled]=\"config.disabled\"\r\n  *ngIf=\"config.allowClear && selectedItem && selectedItem.id\">\r\n  <i class=\"icon trash\"></i>\r\n</button>", styles: [".ngsmAutocompleteMuted{color:gray!important}.ngsmAutocompleteActive{color:#000!important}.ngsmValid{border-left:5px solid #42A948!important;border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.ngsmInvalid{border-left:5px solid #a94442!important;border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.btn-delete{margin-left:3px}.loading-container{display:inline-block;margin-left:3px}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                type: Input
            }] } });

class NgsmDatepickerComponent {
    constructor() {
        this.propagateChange = (_) => { };
    }
    ngOnInit() {
        // this.ngsmService.log("ngsmDatepicker", "ngOnInit");
        // if (this.config && this.config.id) {
        //   this.ngsmService.log("ngsmDatepicker", `ngOnInit: ${this.config.id}`);
        // }
    }
    ngOnChanges() {
        if (this.config && this.config.id) {
            //this.ngsmService.log("ngsmDatepicker", `ngOnChanges: ${this.config.id}`);
            this.init();
        }
    }
    getClassNames(selectedDate) {
        return __awaiter(this, void 0, void 0, function* () {
            if (this.config.required && !selectedDate)
                return "invalid";
            else if (this.config.required && selectedDate)
                return "valid";
            return "";
        });
    }
    init() {
        return __awaiter(this, void 0, void 0, function* () {
            //this.ngsmService.log("ngsmDatepicker", "init");
            let self = this;
            setTimeout(function () {
                $(`#${self.config.id}`).calendar({
                    type: 'date',
                    minDate: self.config.minDate,
                    maxDate: self.config.maxDate,
                    on: "click",
                    today: true,
                    formatInput: false,
                    date: function (date, settings) {
                        console.log('Date: %s', date);
                    },
                    onChange: jQuery.proxy(function (value) {
                        const isValidDate = moment(value).isValid();
                        console.log('Is valid date: %s, %s', value, isValidDate);
                        if (!isValidDate)
                            return;
                        let formatedDate = moment(value).format("MM/DD/YYYY");
                        if (moment(value).isBefore(moment(this.config.minDate))) {
                            //self.ngsmService.log("ngsmDatepicker", 'Date is before MinDate');
                            formatedDate = moment().format("MM/DD/YYYY");
                        }
                        //self.innerValue = moment(value).format("MM/DD/YYYY");
                        //self.ngsmService.log("ngsmDatepicker", self.innerValue);
                        self.propagateChange(formatedDate);
                        self.getClassNames(formatedDate);
                    }, self)
                });
            }, 250);
        });
    }
    onKeyupClick(event) {
        return __awaiter(this, void 0, void 0, function* () {
            event.preventDefault();
            return;
            if (!event)
                return;
            console.log(event.key);
            if (event.key === "Backspace")
                return;
        });
    }
    innerValueChanged(event) {
        return __awaiter(this, void 0, void 0, function* () {
            if (!event)
                return;
            const isValidDate = moment(this.value).isValid();
            if (!isValidDate) {
                return;
            }
        });
    }
    get value() {
        //this.ngsmService.log("ngsmDatepicker", `value(): ${this.innerValue}`);
        return this.innerValue;
    }
    ;
    writeValue(value) {
        if (value && value !== null) {
            //this.ngsmService.log("ngsmDatepicker", `writeValue: ${value}`);
            this.innerValue = value;
        }
        else {
            if (this.config && this.config.id) {
                this.innerValue = "";
                // this.ngsmService.log("ngsmDatepicker", `clear`);
                // let self = this;
                // setTimeout(function () {
                //   (<any>$(`#${self.config.id}`)).calendar('clear');
                // }, 200);
            }
        }
    }
    onTouchedCallback() { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
}
NgsmDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmDatepickerComponent, selector: "ngsm-datepicker", inputs: { config: "config" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NgsmDatepickerComponent),
            multi: true
        }
    ], usesOnChanges: true, ngImport: i0, template: "<div id=\"{{config.id}}\"\r\n  class=\"ui calendar\">\r\n  <div class=\"ui input left icon\">\r\n    <i class=\"calendar icon\"></i>\r\n    <!-- (ngModelChange)=\"innerValueChanged($event)\" -->\r\n    <!-- (keyup)=\"onKeyupClick($event)\" -->\r\n    <input [(ngModel)]=\"innerValue\"          \r\n      [ngClass]=\"getClassNames(innerValue)\"\r\n      [disabled]=\"config.disabled\"\r\n      placeholder=\"{{config.placeholder}}\"\r\n      autofocus=\"false\">\r\n  </div>\r\n</div>", styles: [".valid{border-left:5px solid #42A948!important}.invalid{border-left:5px solid #a94442!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmDatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-datepicker', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgsmDatepickerComponent),
                            multi: true
                        }
                    ], template: "<div id=\"{{config.id}}\"\r\n  class=\"ui calendar\">\r\n  <div class=\"ui input left icon\">\r\n    <i class=\"calendar icon\"></i>\r\n    <!-- (ngModelChange)=\"innerValueChanged($event)\" -->\r\n    <!-- (keyup)=\"onKeyupClick($event)\" -->\r\n    <input [(ngModel)]=\"innerValue\"          \r\n      [ngClass]=\"getClassNames(innerValue)\"\r\n      [disabled]=\"config.disabled\"\r\n      placeholder=\"{{config.placeholder}}\"\r\n      autofocus=\"false\">\r\n  </div>\r\n</div>", styles: [".valid{border-left:5px solid #42A948!important}.invalid{border-left:5px solid #a94442!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                type: Input
            }] } });

class NgsmLoaderComponent {
    constructor() {
        this.isInverted = true;
        this.message = "";
    }
    ngOnInit() {
        //this.ngsmService.log("ngsmloader", "ngOnInit");
    }
}
NgsmLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmLoaderComponent, selector: "ngsm-loader", inputs: { showWhen: "showWhen", isInverted: "isInverted", message: "message" }, ngImport: i0, template: "<div class=\"ui active dimmer\"\r\n    [ngClass]=\"{inverted: isInverted}\"\r\n    *ngIf=\"showWhen\">\r\n    <div class=\"ui text loader\">{{message}}</div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmLoaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-loader', template: "<div class=\"ui active dimmer\"\r\n    [ngClass]=\"{inverted: isInverted}\"\r\n    *ngIf=\"showWhen\">\r\n    <div class=\"ui text loader\">{{message}}</div>\r\n</div>" }]
        }], ctorParameters: function () { return []; }, propDecorators: { showWhen: [{
                type: Input
            }], isInverted: [{
                type: Input
            }], message: [{
                type: Input
            }] } });

class NgsmSubMenuDisplayDirectiveComponent {
    constructor(route, router) {
        this.route = route;
        this.router = router;
    }
    navigateToRoute(tab) {
        if (!tab.route)
            return;
        this.router.navigate([tab.route]);
    }
    getChildlessTabs() {
        return this.tab.subTabs.filter(p => p.subTabs === null || p.subTabs === undefined);
    }
    getTabsWithChildren() {
        return this.tab.subTabs.filter(p => p.subTabs !== null && p.subTabs !== undefined);
    }
    ngOnInit() {
    }
    ngOnChanges() {
    }
}
NgsmSubMenuDisplayDirectiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmSubMenuDisplayDirectiveComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
NgsmSubMenuDisplayDirectiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmSubMenuDisplayDirectiveComponent, selector: "ngsm-sub-menu-display-directive", inputs: { tab: "tab" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui simple dropdown\">\r\n  <span class=\"text\">{{tab.title}}</span>\r\n  <i class=\"dropdown icon\"></i>\r\n  <div class=\"menu\">\r\n    <a *ngFor=\"let subTab of getChildlessTabs()\"\r\n      (click)=\"navigateToRoute(subTab)\"\r\n      class=\"item\">\r\n      {{subTab.title}}\r\n    </a>\r\n    <div class=\"item\"\r\n      *ngFor=\"let subTab of getTabsWithChildren()\">\r\n      <i class=\"dropdown icon\"></i>\r\n      <span class=\"text\">{{subTab.title}}</span>\r\n      <div class=\"menu\">\r\n        <a *ngFor=\"let subSubTab of subTab.subTabs\"\r\n          (click)=\"navigateToRoute(subSubTab)\"\r\n          class=\"item\">\r\n          {{subSubTab.title}}\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmSubMenuDisplayDirectiveComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-sub-menu-display-directive', template: "<div class=\"ui simple dropdown\">\r\n  <span class=\"text\">{{tab.title}}</span>\r\n  <i class=\"dropdown icon\"></i>\r\n  <div class=\"menu\">\r\n    <a *ngFor=\"let subTab of getChildlessTabs()\"\r\n      (click)=\"navigateToRoute(subTab)\"\r\n      class=\"item\">\r\n      {{subTab.title}}\r\n    </a>\r\n    <div class=\"item\"\r\n      *ngFor=\"let subTab of getTabsWithChildren()\">\r\n      <i class=\"dropdown icon\"></i>\r\n      <span class=\"text\">{{subTab.title}}</span>\r\n      <div class=\"menu\">\r\n        <a *ngFor=\"let subSubTab of subTab.subTabs\"\r\n          (click)=\"navigateToRoute(subSubTab)\"\r\n          class=\"item\">\r\n          {{subSubTab.title}}\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>" }]
        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }]; }, propDecorators: { tab: [{
                type: Input
            }] } });

class HighlightTabDirective {
    constructor(el, router) {
        this.el = el;
        this.router = router;
    }
    applyClass() {
        try {
            this.el.nativeElement.className = this.defaultClassName || "";
            if (this.tab && this.tab.routeGroupName) {
                let groupNameMatches = this.router.url.toLowerCase().indexOf(this.tab.routeGroupName.toLowerCase()) >= 0;
                var subTabMatches = false;
                if (this.tab.subTabs)
                    subTabMatches = this.tab.subTabs.filter(p => this.router.url.toLowerCase().indexOf(p.routeGroupName.toLowerCase()) >= 0).length > 0;
                if (groupNameMatches || subTabMatches) {
                    if (!this.el.nativeElement.className)
                        this.el.nativeElement.className = "active";
                    else
                        this.el.nativeElement.className += " active";
                }
            }
        }
        catch (e) {
        }
    }
    ngOnInit() {
        this.router.events.subscribe(result => {
            this.applyClass();
        });
    }
    ngOnChanges() {
        if (this.tab) {
            this.applyClass();
        }
    }
}
HighlightTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HighlightTabDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Directive });
HighlightTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: HighlightTabDirective, selector: "[appHighlightTab]", inputs: { tab: ["appHighlightTab", "tab"], defaultClassName: "defaultClassName" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HighlightTabDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[appHighlightTab]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Router }]; }, propDecorators: { tab: [{
                type: Input,
                args: ['appHighlightTab']
            }], defaultClassName: [{
                type: Input
            }] } });

class NgsmMenuDisplayDirectiveComponent {
    constructor() {
        this.containerClassName = "";
    }
    ngOnInit() {
    }
    ngOnChanges() {
    }
}
NgsmMenuDisplayDirectiveComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmMenuDisplayDirectiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmMenuDisplayDirectiveComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmMenuDisplayDirectiveComponent, selector: "ngsm-menu-display-directive", inputs: { tabs: "tabs", containerClassName: "containerClassName" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"{{containerClassName}}\">\r\n  <div *ngFor=\"let tab of tabs\">\r\n    <a *ngIf=\"tab.type === 2\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\">\r\n      <ngsm-sub-menu-display-directive [tab]=\"tab\"></ngsm-sub-menu-display-directive>\r\n    </a>\r\n    <a *ngIf=\"tab.type === 1 && !tab.route && !tab.tabUrl\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n    <a *ngIf=\"tab.type !== 2 && tab.route\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\"\r\n      routerLink=\"{{tab.route}}\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n    <a *ngIf=\"tab.type !== 2 && tab.tabUrl\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\"\r\n      href=\"{{tab.tabUrl}}\"\r\n      target=\"_blank\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n  </div>\r\n</div>", styles: [".profileImage{margin-top:-10px!important;margin-bottom:-10px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgsmSubMenuDisplayDirectiveComponent, selector: "ngsm-sub-menu-display-directive", inputs: ["tab"] }, { kind: "directive", type: HighlightTabDirective, selector: "[appHighlightTab]", inputs: ["appHighlightTab", "defaultClassName"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmMenuDisplayDirectiveComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-menu-display-directive', template: "<div class=\"{{containerClassName}}\">\r\n  <div *ngFor=\"let tab of tabs\">\r\n    <a *ngIf=\"tab.type === 2\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\">\r\n      <ngsm-sub-menu-display-directive [tab]=\"tab\"></ngsm-sub-menu-display-directive>\r\n    </a>\r\n    <a *ngIf=\"tab.type === 1 && !tab.route && !tab.tabUrl\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n    <a *ngIf=\"tab.type !== 2 && tab.route\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\"\r\n      routerLink=\"{{tab.route}}\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n    <a *ngIf=\"tab.type !== 2 && tab.tabUrl\"\r\n      class=\"item\"\r\n      [appHighlightTab]=\"tab\"\r\n      [defaultClassName]=\"'item'\"\r\n      href=\"{{tab.tabUrl}}\"\r\n      target=\"_blank\">\r\n      <img class=\"ui avatar image profileImage\"\r\n        *ngIf=\"tab.imageUrl\"\r\n        src=\"{{tab.imageUrl}}\"> {{tab.title}}\r\n    </a>\r\n  </div>\r\n</div>", styles: [".profileImage{margin-top:-10px!important;margin-bottom:-10px!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
                type: Input
            }], containerClassName: [{
                type: Input
            }] } });

class NgsmMenuComponent {
    constructor() {
        this.tabs = [];
        this.isBusy = false;
    }
    get loadingClass() {
        if (!this.config || !this.config.loadingIcon)
            return "asterisk loading icon";
        return `${this.config.loadingIcon} loading icon`;
    }
    ngOnInit() { }
    ngOnChanges() { }
}
NgsmMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmMenuComponent, selector: "ngsm-menu", inputs: { config: "config", tabs: "tabs", profileTabs: "profileTabs", isBusy: "isBusy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui top attached inverted pointing menu\"\r\n  [ngClass]=\"config.menuClassName\">\r\n  <div class=\"ui fluid container\">\r\n    <a *ngIf=\"config\"\r\n      href=\"{{config.homeUrl}}\"\r\n      [ngClass]=\"config.homeClassName\">\r\n    </a>\r\n\r\n    <div class=\"header item\">\r\n      <div *ngIf=\"config && !config.titleUrl\">\r\n        {{config.title}}\r\n      </div>\r\n      <a *ngIf=\"config && config.titleUrl\"\r\n        href=\"{{config.titleUrl}}\">{{config.title}}\r\n      </a>\r\n    </div>\r\n\r\n    <div *ngIf=\"isBusy\"\r\n      class=\"header item\">\r\n      <i [class]=\"loadingClass\"></i>\r\n    </div>\r\n    \r\n    <ngsm-menu-display-directive [tabs]=\"tabs\"\r\n      [containerClassName]=\"'menu left'\">\r\n    </ngsm-menu-display-directive>\r\n\r\n    <div class=\"menu right\">\r\n      <ngsm-menu-display-directive [tabs]=\"profileTabs\"\r\n        [containerClassName]=\"'menu right'\">\r\n      </ngsm-menu-display-directive>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".ui.menu .text.item>*,.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child{line-height:1!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgsmMenuDisplayDirectiveComponent, selector: "ngsm-menu-display-directive", inputs: ["tabs", "containerClassName"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-menu', template: "<div class=\"ui top attached inverted pointing menu\"\r\n  [ngClass]=\"config.menuClassName\">\r\n  <div class=\"ui fluid container\">\r\n    <a *ngIf=\"config\"\r\n      href=\"{{config.homeUrl}}\"\r\n      [ngClass]=\"config.homeClassName\">\r\n    </a>\r\n\r\n    <div class=\"header item\">\r\n      <div *ngIf=\"config && !config.titleUrl\">\r\n        {{config.title}}\r\n      </div>\r\n      <a *ngIf=\"config && config.titleUrl\"\r\n        href=\"{{config.titleUrl}}\">{{config.title}}\r\n      </a>\r\n    </div>\r\n\r\n    <div *ngIf=\"isBusy\"\r\n      class=\"header item\">\r\n      <i [class]=\"loadingClass\"></i>\r\n    </div>\r\n    \r\n    <ngsm-menu-display-directive [tabs]=\"tabs\"\r\n      [containerClassName]=\"'menu left'\">\r\n    </ngsm-menu-display-directive>\r\n\r\n    <div class=\"menu right\">\r\n      <ngsm-menu-display-directive [tabs]=\"profileTabs\"\r\n        [containerClassName]=\"'menu right'\">\r\n      </ngsm-menu-display-directive>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".ui.menu .text.item>*,.ui.menu .item>a:not(.ui),.ui.menu .item>p:only-child{line-height:1!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                type: Input
            }], tabs: [{
                type: Input
            }], profileTabs: [{
                type: Input
            }], isBusy: [{
                type: Input
            }] } });

class NgsmTablepagerComponent {
    constructor() {
        this.totalNumberOfRecords = 0;
        this.selectedPageSize = 10;
        this.selectedPage = 0;
        this.onPageSizeChange = new EventEmitter();
        this.onPageChange = new EventEmitter();
        this.numberOfPagesDisplayed = 5;
        this.totalNumberOfPages = 0;
        this.pageSizes = [{
                title: "10 Records",
                value: 10
            }, {
                title: "25 Records",
                value: 25
            }, {
                title: "50 Records",
                value: 50
            }, {
                title: "100 Records",
                value: 100
            }];
    }
    ngOnChanges(changes) {
        //this.ngsmService.log("ngsmTablepager", "ngOnChanges");
        if (this.totalNumberOfRecords && this.selectedPageSize)
            this.totalNumberOfPages = Math.ceil(this.totalNumberOfRecords / this.selectedPageSize);
    }
    setPage(page) {
        //this.ngsmService.log("ngsmTablepager", `setPage: ${page}`);
        this.selectedPage = page;
        if (this.selectedPage < 0)
            this.selectedPage = 0;
        if (this.selectedPage >= this.totalNumberOfPages)
            this.selectedPage = this.totalNumberOfPages;
        this.onPageChange.emit(this.selectedPage);
    }
    setPageSize(pageSize) {
        this.selectedPageSize = pageSize;
        //this.ngsmService.log("ngsmTablepager", `setPageSize: ${pageSize}`);
        this.totalNumberOfPages = Math.ceil(this.totalNumberOfRecords / this.selectedPageSize);
        this.onPageSizeChange.emit(pageSize);
    }
    range() {
        if (this.totalNumberOfPages === 0 || this.totalNumberOfPages === 1)
            return [];
        let start = this.selectedPage - 2;
        if (start < 0)
            start = 0;
        let end = start + this.numberOfPagesDisplayed;
        if (end > this.totalNumberOfPages) {
            end = this.totalNumberOfPages;
            start = end - this.numberOfPagesDisplayed;
        }
        if (start < 0)
            start = 0;
        if (start > end)
            return [];
        let ret = [];
        for (var i = start; i !== end; ++i) {
            ret.push(i);
        }
        return ret;
    }
}
NgsmTablepagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTablepagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmTablepagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmTablepagerComponent, selector: "ngsm-tablepager", inputs: { totalNumberOfRecords: "totalNumberOfRecords", selectedPageSize: "selectedPageSize", selectedPage: "selectedPage" }, outputs: { onPageSizeChange: "onPageSizeChange", onPageChange: "onPageChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui pagination menu\">\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage > 0\"\r\n    (click)=\"setPage(0)\">\r\n    <i class=\"angle double left icon\"></i>\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage > 0\"\r\n    (click)=\"setPage(selectedPage - 1)\">\r\n    <i class=\"angle left icon\"></i>\r\n  </a>\r\n  <a class=\"item\"\r\n    *ngFor=\"let r of range()\"\r\n    [ngClass]=\"{active: selectedPage === r}\"\r\n    (click)=\"setPage(r)\">\r\n    {{r+1}}\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage < (totalNumberOfPages-1)\"\r\n    (click)=\"setPage(selectedPage + 1)\">\r\n    <i class=\"angle right icon\"></i>\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage < (totalNumberOfPages-1)\"\r\n    (click)=\"setPage(totalNumberOfPages-1)\">\r\n    <i class=\"angle double right icon\"></i>\r\n  </a>\r\n  <select [(ngModel)]=\"selectedPageSize\"\r\n    (ngModelChange)=\"setPageSize($event)\"\r\n    placeholder=\"Transactions per Page\"\r\n    *ngIf=\"totalNumberOfRecords>0\"\r\n    class=\"ui fluid dropdown\"\r\n    style=\"border:1px solid white;\">\r\n    <option *ngFor=\"let pageSize of pageSizes\"\r\n      [value]=\"pageSize.value\">{{pageSize.title}}\r\n    </option>\r\n  </select>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTablepagerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-tablepager', template: "<div class=\"ui pagination menu\">\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage > 0\"\r\n    (click)=\"setPage(0)\">\r\n    <i class=\"angle double left icon\"></i>\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage > 0\"\r\n    (click)=\"setPage(selectedPage - 1)\">\r\n    <i class=\"angle left icon\"></i>\r\n  </a>\r\n  <a class=\"item\"\r\n    *ngFor=\"let r of range()\"\r\n    [ngClass]=\"{active: selectedPage === r}\"\r\n    (click)=\"setPage(r)\">\r\n    {{r+1}}\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage < (totalNumberOfPages-1)\"\r\n    (click)=\"setPage(selectedPage + 1)\">\r\n    <i class=\"angle right icon\"></i>\r\n  </a>\r\n  <a class=\"icon item\"\r\n    *ngIf=\"selectedPage < (totalNumberOfPages-1)\"\r\n    (click)=\"setPage(totalNumberOfPages-1)\">\r\n    <i class=\"angle double right icon\"></i>\r\n  </a>\r\n  <select [(ngModel)]=\"selectedPageSize\"\r\n    (ngModelChange)=\"setPageSize($event)\"\r\n    placeholder=\"Transactions per Page\"\r\n    *ngIf=\"totalNumberOfRecords>0\"\r\n    class=\"ui fluid dropdown\"\r\n    style=\"border:1px solid white;\">\r\n    <option *ngFor=\"let pageSize of pageSizes\"\r\n      [value]=\"pageSize.value\">{{pageSize.title}}\r\n    </option>\r\n  </select>\r\n</div>" }]
        }], ctorParameters: function () { return []; }, propDecorators: { totalNumberOfRecords: [{
                type: Input
            }], selectedPageSize: [{
                type: Input
            }], selectedPage: [{
                type: Input
            }], onPageSizeChange: [{
                type: Output
            }], onPageChange: [{
                type: Output
            }] } });

class NgsmTagsComponent {
    constructor(http) {
        this.http = http;
        this.events = new Subject();
        this.tags = [];
        this.requestAutocompleteItems = (text) => {
            const url = `${this.config.url}/${text}`;
            //this.ngsmService.log("ngsmTags", `requestAutocompleteItemsUrl: ${url}`);
            return this.http.get(url);
        };
        this.propagateChange = (_) => { };
    }
    onItemAdded(newTag) {
        this.propagateChange(this.tags);
        this.events.next({
            type: "itemAdded",
            item: newTag
        });
    }
    onItemRemoved(tagToRemove) {
        this.propagateChange(this.tags);
        this.events.next({
            type: "itemRemoved",
            item: tagToRemove
        });
    }
    get value() {
        return this.tags;
    }
    ;
    writeValue(value) {
        if (value !== undefined && value !== null) {
            this.tags = value;
        }
    }
    ngOnInit() { }
    ngOnChanges() { }
    onTouchedCallback() { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
}
NgsmTagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTagsComponent, deps: [{ token: i1$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
NgsmTagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmTagsComponent, selector: "ngsm-tags", inputs: { config: "config" }, outputs: { events: "events" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NgsmTagsComponent),
            multi: true
        }
    ], usesOnChanges: true, ngImport: i0, template: "<tag-input [(ngModel)]=\"tags\"\r\n  [theme]=\"config.theme\"\r\n  [identifyBy]=\"config.identifyBy\"\r\n  [displayBy]=\"config.displayBy\"\r\n  [placeholder]=\"config.placeholder\"\r\n  [secondaryPlaceholder]=\"config.secondaryPlaceholder\"\r\n  [disable]=\"config.disabled\"\r\n  [onlyFromAutocomplete]=\"config.onlyFromAutocomplete\"\r\n  (onAdd)=\"onItemAdded($event)\"\r\n  (onRemove)=\"onItemRemoved($event)\">\r\n  <tag-input-dropdown [autocompleteObservable]='requestAutocompleteItems'\r\n    [minimumTextLength]=\"config.minimumTextLength\"\r\n    [identifyBy]=\"config.identifyBy\"\r\n    [displayBy]=\"config.displayBy\">\r\n  </tag-input-dropdown>\r\n</tag-input>", styles: [".ui.form tag-input{background-color:red!important}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i3.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTagsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-tags', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgsmTagsComponent),
                            multi: true
                        }
                    ], template: "<tag-input [(ngModel)]=\"tags\"\r\n  [theme]=\"config.theme\"\r\n  [identifyBy]=\"config.identifyBy\"\r\n  [displayBy]=\"config.displayBy\"\r\n  [placeholder]=\"config.placeholder\"\r\n  [secondaryPlaceholder]=\"config.secondaryPlaceholder\"\r\n  [disable]=\"config.disabled\"\r\n  [onlyFromAutocomplete]=\"config.onlyFromAutocomplete\"\r\n  (onAdd)=\"onItemAdded($event)\"\r\n  (onRemove)=\"onItemRemoved($event)\">\r\n  <tag-input-dropdown [autocompleteObservable]='requestAutocompleteItems'\r\n    [minimumTextLength]=\"config.minimumTextLength\"\r\n    [identifyBy]=\"config.identifyBy\"\r\n    [displayBy]=\"config.displayBy\">\r\n  </tag-input-dropdown>\r\n</tag-input>", styles: [".ui.form tag-input{background-color:red!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1$2.HttpClient }]; }, propDecorators: { config: [{
                type: Input
            }], events: [{
                type: Output
            }] } });

class NgsmTimepickerComponent {
    constructor() {
        this.propagateChange = (_) => { };
    }
    getClassNames() {
        if (this.config.required && !this.innerValue)
            return "invalid";
        else if (this.config.required && this.innerValue)
            return "valid";
        return "";
    }
    init() {
        //this.ngsmService.log("ngsmTimepicker", "init");
        let self = this;
        setTimeout(function () {
            $(`#${self.config.id}`).calendar({
                type: 'time',
                onChange: jQuery.proxy(function (value) {
                    let formatedTime = moment(value).format("HH:mm A");
                    //self.ngsmService.log("ngsmTimepicker", formatedTime);
                    self.propagateChange(formatedTime);
                }, self)
            });
        }, 250);
    }
    ngOnInit() {
        //this.ngsmService.log("ngsmTimepicker", "ngOnInit");
    }
    ngOnChanges() {
        //this.ngsmService.log("ngsmTimepicker", "ngOnChanges");
        if (this.config && this.config.id) {
            this.init();
        }
    }
    get value() {
        return this.innerValue;
    }
    ;
    writeValue(value) {
        if (value !== undefined) {
            //this.ngsmService.log("ngsm-timepicker writeValue", value);
            var dateValue = moment(value);
            if (moment(dateValue).isValid())
                this.innerValue = `${dateValue.format("HH:mm A")}`;
            else
                this.innerValue = value;
        }
    }
    onTouchedCallback() { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.propagateChange = fn;
    }
}
NgsmTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgsmTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgsmTimepickerComponent, selector: "ngsm-timepicker", inputs: { config: "config" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => NgsmTimepickerComponent),
            multi: true
        }
    ], usesOnChanges: true, ngImport: i0, template: "<div id=\"{{config.id}}\"\r\n  class=\"ui calendar\">\r\n  <div class=\"ui input left icon\">\r\n    <i class=\"time icon\"></i>\r\n    <input [(ngModel)]=\"innerValue\"\r\n      [ngClass]=\"getClassNames()\"\r\n      placeholder=\"{{config.placeholder}}\">\r\n  </div>\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgsmTimepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngsm-timepicker', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => NgsmTimepickerComponent),
                            multi: true
                        }
                    ], template: "<div id=\"{{config.id}}\"\r\n  class=\"ui calendar\">\r\n  <div class=\"ui input left icon\">\r\n    <i class=\"time icon\"></i>\r\n    <input [(ngModel)]=\"innerValue\"\r\n      [ngClass]=\"getClassNames()\"\r\n      placeholder=\"{{config.placeholder}}\">\r\n  </div>\r\n</div>" }]
        }], ctorParameters: function () { return []; }, propDeco