import { __decorate, __param } from 'tslib';
import { Input, Directive, HostBinding, Component, Inject, forwardRef, ElementRef, NgZone, ViewChild, Output, Self, Optional, EventEmitter, TemplateRef, ɵɵdefineInjectable, Injectable, Renderer2, Injector, ComponentFactoryResolver, ViewContainerRef, ChangeDetectorRef, ApplicationRef, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { DOCUMENT, CommonModule } from '@angular/common';
import { fromEvent, race, Subject, Observable, merge } from 'rxjs';
import { takeUntil, filter, tap, map, withLatestFrom, delay, share } from 'rxjs/operators';
import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';

// Why I need an abstract class for the inputs is still a mistery
let BaseInputs = class BaseInputs {
    constructor() {
        this.display = 'block';
    }
};
__decorate([
    Input()
], BaseInputs.prototype, "hide", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "show", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "display", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "m", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "mx", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "my", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "ml", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "mr", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "mt", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "mb", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "p", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "px", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "py", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "pl", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "pr", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "pt", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "pb", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "tooltip", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "tooltipPosition", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "shadow", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "radius", void 0);
__decorate([
    Input()
], BaseInputs.prototype, "textAlign", void 0);
BaseInputs = __decorate([
    Directive()
], BaseInputs);
let BaseComponent = class BaseComponent extends BaseInputs {
    constructor() {
        super();
        this.cssClass = '';
    }
    ngOnInit() {
        this.id = this.guidGenerator();
        if (this.tooltip) {
            this.dataTooltip = 'tooltip';
            this.tooltipTitle = this.tooltip;
        }
        if (this.hide) {
            if (this.hide === 'xs' || this.hide === '') {
                this.cssClass += ' d-none';
            }
            else {
                this.cssClass += ' d-' + this.hide + '-none';
            }
        }
        if (this.show) {
            if (this.show === 'xs' || this.show === '') {
                this.cssClass += ' d-' + this.display;
            }
            else {
                this.cssClass += ' d-' + this.show + '-' + this.display;
            }
        }
        if (this.p) {
            this.cssClass += ' p-' + this.p;
        }
        if (this.px) {
            this.cssClass += ' px-' + this.px;
        }
        if (this.py) {
            this.cssClass += ' py-' + this.py;
        }
        if (this.pl) {
            this.cssClass += ' pl-' + this.pl;
        }
        if (this.pr) {
            this.cssClass += ' pr-' + this.pr;
        }
        if (this.pt) {
            this.cssClass += ' pt-' + this.pt;
        }
        if (this.pb) {
            this.cssClass += ' pb-' + this.pb;
        }
        if (this.m) {
            this.cssClass += ' m-' + this.m;
        }
        if (this.mx) {
            this.cssClass += ' mx-' + this.mx;
        }
        if (this.my) {
            this.cssClass += ' my-' + this.my;
        }
        if (this.ml) {
            this.cssClass += ' ml-' + this.ml;
        }
        if (this.mr) {
            this.cssClass += ' mr-' + this.mr;
        }
        if (this.mt) {
            this.cssClass += ' mt-' + this.mt;
        }
        if (this.mb) {
            this.cssClass += ' mb-' + this.mb;
        }
        if (this.textAlign) {
            this.cssClass += ' text-' + this.textAlign;
        }
        if (this.shadow !== undefined) {
            this.cssClass += ' shadow';
            if (this.shadow === 'lg') {
                this.cssClass += '-lg';
            }
            else if (this.shadow === 'sm') {
                this.cssClass += 'sm';
            }
        }
        if (this.radius !== undefined) {
            this.cssClass += ' rounded';
            if (this.radius === 'lg') {
                this.cssClass += '-lg';
            }
            else if (this.radius === 'sm') {
                this.cssClass += 'sm';
            }
        }
    }
    guidGenerator() {
        const S4 = () => {
            // tslint:disable-next-line: no-bitwise
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4());
    }
};
__decorate([
    HostBinding('class')
], BaseComponent.prototype, "cssClass", void 0);
__decorate([
    HostBinding('attr.data-tooltip')
], BaseComponent.prototype, "dataTooltip", void 0);
__decorate([
    HostBinding('attr.title')
], BaseComponent.prototype, "tooltipTitle", void 0);
BaseComponent = __decorate([
    Component({
        selector: 'tree-base',
        template: "<p>base works!</p>\n",
        styles: [""]
    })
], BaseComponent);

let SideMenuComponent = class SideMenuComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
    }
};
SideMenuComponent = __decorate([
    Component({
        selector: 'tree-menu-bar',
        template: "<p>side-menu works!</p>\n",
        styles: [""]
    })
], SideMenuComponent);

function coerceBooleanProperty(value) {
    return value != null && `${value}` !== 'false';
}

let NavComponent = class NavComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
        this.vertical = coerceBooleanProperty(this.vertical);
        this.navbar = coerceBooleanProperty(this.navbar);
        this.style = 'nav';
        if (this.slot === 'center') {
            this.style += ' justify-content-center';
        }
        else if (this.slot === 'end') {
            this.style += ' justify-content-end';
        }
        else if (this.slot === 'justify') {
            this.style += ' nav-justified';
        }
        if (this.navbar) {
            this.style += ' navbar-nav';
        }
        if (this.vertical) {
            this.style += ' flex-column';
        }
    }
};
__decorate([
    Input()
], NavComponent.prototype, "slot", void 0);
__decorate([
    Input()
], NavComponent.prototype, "vertical", void 0);
__decorate([
    Input()
], NavComponent.prototype, "navbar", void 0);
NavComponent = __decorate([
    Component({
        selector: 'tree-nav',
        template: "<ul [ngClass]=\"style\">\n  <ng-content></ng-content>\n</ul>\n",
        styles: [""]
    })
], NavComponent);

// previous version:
// https://github.com/angular-ui/bootstrap/blob/07c31d0731f7cb068a1932b8e01d2312b796b4ec/src/position/position.js
class Positioning {
    getAllStyles(element) { return window.getComputedStyle(element); }
    getStyle(element, prop) { return this.getAllStyles(element)[prop]; }
    isStaticPositioned(element) {
        return (this.getStyle(element, 'position') || 'static') === 'static';
    }
    offsetParent(element) {
        let offsetParentEl = element.offsetParent || document.documentElement;
        while (offsetParentEl && offsetParentEl !== document.documentElement && this.isStaticPositioned(offsetParentEl)) {
            offsetParentEl = offsetParentEl.offsetParent;
        }
        return offsetParentEl || document.documentElement;
    }
    position(element, round = true) {
        let elPosition;
        let parentOffset = { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
        if (this.getStyle(element, 'position') === 'fixed') {
            elPosition = element.getBoundingClientRect();
            elPosition = {
                top: elPosition.top,
                bottom: elPosition.bottom,
                left: elPosition.left,
                right: elPosition.right,
                height: elPosition.height,
                width: elPosition.width
            };
        }
        else {
            const offsetParentEl = this.offsetParent(element);
            elPosition = this.offset(element, false);
            if (offsetParentEl !== document.documentElement) {
                parentOffset = this.offset(offsetParentEl, false);
            }
            parentOffset.top += offsetParentEl.clientTop;
            parentOffset.left += offsetParentEl.clientLeft;
        }
        elPosition.top -= parentOffset.top;
        elPosition.bottom -= parentOffset.top;
        elPosition.left -= parentOffset.left;
        elPosition.right -= parentOffset.left;
        if (round) {
            elPosition.top = Math.round(elPosition.top);
            elPosition.bottom = Math.round(elPosition.bottom);
            elPosition.left = Math.round(elPosition.left);
            elPosition.right = Math.round(elPosition.right);
        }
        return elPosition;
    }
    offset(element, round = true) {
        const elBcr = element.getBoundingClientRect();
        const viewportOffset = {
            top: window.pageYOffset - document.documentElement.clientTop,
            left: window.pageXOffset - document.documentElement.clientLeft
        };
        const elOffset = {
            height: elBcr.height || element.offsetHeight,
            width: elBcr.width || element.offsetWidth,
            top: elBcr.top + viewportOffset.top,
            bottom: elBcr.bottom + viewportOffset.top,
            left: elBcr.left + viewportOffset.left,
            right: elBcr.right + viewportOffset.left
        };
        if (round) {
            elOffset.height = Math.round(elOffset.height);
            elOffset.width = Math.round(elOffset.width);
            elOffset.top = Math.round(elOffset.top);
            elOffset.bottom = Math.round(elOffset.bottom);
            elOffset.left = Math.round(elOffset.left);
            elOffset.right = Math.round(elOffset.right);
        }
        return elOffset;
    }
    /*
      Return false if the element to position is outside the viewport
      The inside parameter means that the targetElement is placed inside the hostElement.
     */
    positionElements(hostElement, targetElement, placement, appendToBody, inside) {
        const [placementPrimary = 'top', placementSecondary = 'center'] = placement.split('-');
        const hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
        if (inside) {
            hostElPosition.top = 0;
            hostElPosition.left = 0;
        }
        const targetElStyles = this.getAllStyles(targetElement);
        const marginTop = parseFloat(targetElStyles.marginTop);
        const marginBottom = parseFloat(targetElStyles.marginBottom);
        const marginLeft = parseFloat(targetElStyles.marginLeft);
        const marginRight = parseFloat(targetElStyles.marginRight);
        let topPosition = 0;
        let leftPosition = 0;
        switch (placementPrimary) {
            case 'top':
                topPosition = (hostElPosition.top - (targetElement.offsetHeight + marginTop + marginBottom));
                break;
            case 'bottom':
                topPosition = (hostElPosition.top + hostElPosition.height);
                break;
            case 'left':
                leftPosition = (hostElPosition.left - (targetElement.offsetWidth + marginLeft + marginRight));
                break;
            case 'right':
                leftPosition = (hostElPosition.left + hostElPosition.width);
                break;
        }
        switch (placementSecondary) {
            case 'top':
                topPosition = hostElPosition.top;
                break;
            case 'bottom':
                topPosition = hostElPosition.top + hostElPosition.height - targetElement.offsetHeight;
                break;
            case 'left':
                leftPosition = hostElPosition.left;
                break;
            case 'right':
                leftPosition = hostElPosition.left + hostElPosition.width - targetElement.offsetWidth;
                break;
            case 'center':
                if (placementPrimary === 'top' || placementPrimary === 'bottom') {
                    leftPosition = (hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2);
                }
                else {
                    topPosition = (hostElPosition.top + hostElPosition.height / 2 - targetElement.offsetHeight / 2);
                }
                break;
        }
        /// The translate3d/gpu acceleration render a blurry text on chrome, the next line is commented until a browser fix
        // targetElement.style.transform = `translate3d(${Math.round(leftPosition)}px, ${Math.floor(topPosition)}px, 0px)`;
        targetElement.style.transform = `translate(${Math.round(leftPosition)}px, ${Math.round(topPosition)}px)`;
        // Check if the targetElement is inside the viewport
        const targetElBCR = targetElement.getBoundingClientRect();
        const html = document.documentElement;
        const windowHeight = window.innerHeight || html.clientHeight;
        const windowWidth = window.innerWidth || html.clientWidth;
        return targetElBCR.left >= 0 && targetElBCR.top >= 0 && targetElBCR.right <= windowWidth &&
            targetElBCR.bottom <= windowHeight;
    }
}
const placementSeparator = /\s+/;
const positionService = new Positioning();
/*
 * Accept the placement array and applies the appropriate placement dependent on the viewport.
 * Returns the applied placement.
 * In case of auto placement, placements are selected in order
 *   'top', 'bottom', 'left', 'right',
 *   'top-left', 'top-right',
 *   'bottom-left', 'bottom-right',
 *   'left-top', 'left-bottom',
 *   'right-top', 'right-bottom'.
 *
 *   The inside parameter means that the targetElement is placed inside the host element
 * */
function positionElements(hostElement, targetElement, placement, appendToBody, baseClass, inside) {
    const placementVals = Array.isArray(placement) ? placement : placement.split(placementSeparator);
    const allowedPlacements = [
        'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom',
        'right-top', 'right-bottom'
    ];
    const classList = targetElement.classList;
    const addClassesToTarget = (targetPlacement) => {
        const [primary, secondary] = targetPlacement.split('-');
        const classes = [];
        if (baseClass) {
            classes.push(`${baseClass}-${primary}`);
            if (secondary) {
                classes.push(`${baseClass}-${primary}-${secondary}`);
            }
            classes.forEach((classname) => { classList.add(classname); });
        }
        return classes;
    };
    // Remove old placement classes to avoid issues
    if (baseClass) {
        allowedPlacements.forEach((placementToRemove) => { classList.remove(`${baseClass}-${placementToRemove}`); });
    }
    // replace auto placement with other placements
    let hasAuto = placementVals.findIndex(val => val === 'auto');
    if (hasAuto >= 0) {
        // tslint:disable-next-line:only-arrow-functions
        allowedPlacements.forEach(function (obj) {
            if (placementVals.find(val => val.search('^' + obj) !== -1) == null) {
                placementVals.splice(hasAuto++, 1, obj);
            }
        });
    }
    // coordinates where to position
    // Required for transform:
    const style = targetElement.style;
    style.position = 'absolute';
    style.top = '0';
    style.left = '0';
    style['will-change'] = 'transform';
    let testPlacement;
    let isInViewport = false;
    for (testPlacement of placementVals) {
        const addedClasses = addClassesToTarget(testPlacement);
        if (positionService.positionElements(hostElement, targetElement, testPlacement, appendToBody, inside)) {
            isInViewport = true;
            break;
        }
        // Remove the baseClasses for further calculation
        if (baseClass) {
            addedClasses.forEach((classname) => { classList.remove(classname); });
        }
    }
    if (!isInViewport) {
        // If nothing match, the first placement is the default one
        testPlacement = placementVals[0];
        addClassesToTarget(testPlacement);
        positionService.positionElements(hostElement, targetElement, testPlacement, appendToBody, inside);
    }
    return testPlacement;
}

var Key;
(function (Key) {
    Key[Key["Tab"] = 9] = "Tab";
    Key[Key["Enter"] = 13] = "Enter";
    Key[Key["Escape"] = 27] = "Escape";
    Key[Key["Space"] = 32] = "Space";
    Key[Key["PageUp"] = 33] = "PageUp";
    Key[Key["PageDown"] = 34] = "PageDown";
    Key[Key["End"] = 35] = "End";
    Key[Key["Home"] = 36] = "Home";
    Key[Key["ArrowLeft"] = 37] = "ArrowLeft";
    Key[Key["ArrowUp"] = 38] = "ArrowUp";
    Key[Key["ArrowRight"] = 39] = "ArrowRight";
    Key[Key["ArrowDown"] = 40] = "ArrowDown";
})(Key || (Key = {}));
function closest(element, selector) {
    if (!selector) {
        return null;
    }
    return element.closest(selector);
}
const isContainedIn = (element, array) => array ? array.some(item => item.contains(element)) : false;
const ɵ0 = isContainedIn;
const matchesSelectorIfAny = (element, selector) => !selector || closest(element, selector) != null;
const ɵ1 = matchesSelectorIfAny;
// we'll have to use 'touch' events instead of 'mouse' events on iOS and add a more significant delay
// to avoid re-opening when handling (click) on a toggling element
// TODO: use proper Angular platform detection when NgbAutoClose becomes a service and we can inject PLATFORM_ID
let iOS = false;
if (typeof navigator !== 'undefined') {
    iOS = !!navigator.userAgent && /iPad|iPhone|iPod/.test(navigator.userAgent);
}
// setting 'ngbAutoClose' synchronously on iOS results in immediate popup closing
// when tapping on the triggering element
const wrapAsyncForiOS = fn => iOS ? () => setTimeout(() => fn(), 100) : fn;
const ɵ2 = wrapAsyncForiOS;
function ngbAutoClose(zone, document, type, close, closed$, insideElements, ignoreElements, insideSelector) {
    // closing on ESC and outside clicks
    if (type) {
        zone.runOutsideAngular(wrapAsyncForiOS(() => {
            const shouldCloseOnClick = (event) => {
                const element = event.target;
                if (event.button === 2 || isContainedIn(element, ignoreElements)) {
                    return false;
                }
                if (type === 'inside') {
                    return isContainedIn(element, insideElements) && matchesSelectorIfAny(element, insideSelector);
                }
                else if (type === 'outside') {
                    return !isContainedIn(element, insideElements);
                }
                else /* if (type === true) */ {
                    return matchesSelectorIfAny(element, insideSelector) || !isContainedIn(element, insideElements);
                }
            };
            const escapes$ = fromEvent(document, 'keydown')
                .pipe(takeUntil(closed$), 
            // tslint:disable-next-line:deprecation
            filter(e => e.which === Key.Escape), tap(e => e.preventDefault()));
            // we have to pre-calculate 'shouldCloseOnClick' on 'mousedown/touchstart',
            // because on 'mouseup/touchend' DOM nodes might be detached
            const mouseDowns$ = fromEvent(document, 'mousedown').pipe(map(shouldCloseOnClick), takeUntil(closed$));
            const closeableClicks$ = fromEvent(document, 'mouseup')
                .pipe(withLatestFrom(mouseDowns$), filter(([_, shouldClose]) => shouldClose), delay(0), takeUntil(closed$));
            race([escapes$, closeableClicks$]).subscribe(() => zone.run(close));
        }));
    }
}

let NavItemComponent = class NavItemComponent extends BaseComponent {
    constructor(nav, doc, elementRef, zone) {
        super();
        this.nav = nav;
        this.doc = doc;
        this.elementRef = elementRef;
        this.zone = zone;
        this.dropdownClosed = new Subject();
        this.cssClass = 'nav-item';
        zone.onStable.subscribe(() => {
            if (this.dropdownWindow) {
                positionElements(this.elementRef.nativeElement, this.dropdownWindow.nativeElement, 'bottom-center', false, 'bs-dropdown', true);
            }
        });
    }
    get isActive() {
        return this.id === this.nav.activeItem;
    }
    ngOnInit() {
        super.ngOnInit();
        this.disabled = coerceBooleanProperty(this.disabled);
        this.active = coerceBooleanProperty(this.active);
        this.dropdown = coerceBooleanProperty(this.dropdown);
        if (this.dropdown) {
            this.href = undefined;
            this.cssClass += ' dropdown';
        }
        if (this.active) {
            this.nav.activeItem = this.id;
        }
    }
    setActive() {
        this.nav.activeItem = this.id;
    }
    openDorpdown() {
        if (this.dropdownWindow) {
            this.dropdownWindow.nativeElement.style.display = 'block';
        }
        ngbAutoClose(this.zone, this.doc, true, () => this.closeDropdown(), this.dropdownClosed.asObservable(), [this.dropdownWindow.nativeElement]);
    }
    closeDropdown() {
        if (this.dropdownWindow) {
            console.log("close");
            this.dropdownWindow.nativeElement.style.display = 'none';
            this.dropdownClosed.next();
        }
    }
};
NavItemComponent.ctorParameters = () => [
    { type: NavComponent, decorators: [{ type: Inject, args: [forwardRef(() => NavComponent),] }] },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: ElementRef },
    { type: NgZone }
];
__decorate([
    ViewChild('dropdown')
], NavItemComponent.prototype, "dropdownWindow", void 0);
__decorate([
    Input()
], NavItemComponent.prototype, "href", void 0);
__decorate([
    Input()
], NavItemComponent.prototype, "dropdown", void 0);
__decorate([
    Input()
], NavItemComponent.prototype, "disabled", void 0);
__decorate([
    Input()
], NavItemComponent.prototype, "active", void 0);
__decorate([
    Output()
], NavItemComponent.prototype, "dropdownClosed", void 0);
NavItemComponent = __decorate([
    Component({
        selector: 'tree-nav-item',
        template: "<ng-container *ngIf='!dropdown && !href'>\n  <span class='nav-link' [class.active]='isActive' [class.disabled]='disabled' [attr.aria-disabled]='disabled' (click)='setActive()'>\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </span>\n</ng-container>\n<ng-container *ngIf='href'>\n  <a [routerLink]=\"href\" class=\"nav-link\" [class.active]='isActive' [class.disabled]='disabled' [attr.aria-disabled]='disabled' (click)='setActive()' >\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </a>\n</ng-container>\n<ng-container *ngIf='dropdown'>\n  <span class=\"nav-link dropdown-toggle\" data-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)='openDorpdown()'>\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </span>\n</ng-container>\n<div class=\"dropdown-menu\"  #dropdown *ngIf='dropdown'>\n  <ng-content select='tree-dropdown-item'></ng-content>\n</div>\n\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n",
        styles: [""]
    }),
    __param(0, Inject(forwardRef(() => NavComponent))),
    __param(1, Inject(DOCUMENT))
], NavItemComponent);

let NavTitleComponent = class NavTitleComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
    }
};
NavTitleComponent = __decorate([
    Component({
        selector: 'tree-nav-title',
        template: "<li class=\"nav-item\">\n  <h3>\n    <ng-content></ng-content>\n  </h3>\n</li>\n",
        styles: [""]
    })
], NavTitleComponent);

let RowComponent = class RowComponent extends BaseComponent {
    constructor() {
        super();
        this.cssClass += ' row';
        this.display = 'flex';
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.backgroundColor) {
            this.cssClass += ' bg-' + this.backgroundColor;
        }
        if (this.justify) {
            this.cssClass += ' justify-content-' + this.justify;
        }
        super.ngOnInit();
    }
};
__decorate([
    Input()
], RowComponent.prototype, "backgroundColor", void 0);
__decorate([
    Input()
], RowComponent.prototype, "justify", void 0);
RowComponent = __decorate([
    Component({
        selector: 'tree-row',
        template: "<ng-content></ng-content>\n",
        styles: [""]
    })
], RowComponent);

let ColComponent = class ColComponent extends BaseComponent {
    constructor() {
        super();
    }
    ngOnInit() {
        super.ngOnInit();
        if (!this.size && !this.sizeSm && !this.sizeMd && !this.sizeLg && !this.sizeXl) {
            this.cssClass += ' col';
        }
        if (this.size) {
            this.cssClass += ' col-' + this.size;
        }
        if (this.sizeSm) {
            this.cssClass += ' col-sm-' + this.sizeSm;
        }
        if (this.sizeMd) {
            this.cssClass += ' col-md-' + this.sizeMd;
        }
        if (this.sizeLg) {
            this.cssClass += ' col-lg-' + this.sizeLg;
        }
        if (this.sizeXl) {
            this.cssClass += ' col-xl-' + this.sizeXl;
        }
        if (this.offset) {
            this.cssClass += ' offset-' + this.offset;
        }
        if (this.offsetSm) {
            this.cssClass += ' offset-sm-' + this.offsetSm;
        }
        if (this.offsetMd) {
            this.cssClass += ' offset-md-' + this.offsetMd;
        }
        if (this.offsetLg) {
            this.cssClass += ' offset-lg-' + this.offsetLg;
        }
        if (this.offsetXl) {
            this.cssClass += ' offset-xl' + this.offsetXl;
        }
        if (this.backgroundColor) {
            this.cssClass += ' bg-' + this.backgroundColor;
        }
    }
};
__decorate([
    Input()
], ColComponent.prototype, "backgroundColor", void 0);
__decorate([
    Input()
], ColComponent.prototype, "size", void 0);
__decorate([
    Input()
], ColComponent.prototype, "sizeSm", void 0);
__decorate([
    Input()
], ColComponent.prototype, "sizeMd", void 0);
__decorate([
    Input()
], ColComponent.prototype, "sizeLg", void 0);
__decorate([
    Input()
], ColComponent.prototype, "sizeXl", void 0);
__decorate([
    Input()
], ColComponent.prototype, "offset", void 0);
__decorate([
    Input()
], ColComponent.prototype, "offsetSm", void 0);
__decorate([
    Input()
], ColComponent.prototype, "offsetMd", void 0);
__decorate([
    Input()
], ColComponent.prototype, "offsetLg", void 0);
__decorate([
    Input()
], ColComponent.prototype, "offsetXl", void 0);
ColComponent = __decorate([
    Component({
        selector: 'tree-col',
        template: "<ng-content></ng-content>\n",
        styles: [""]
    })
], ColComponent);

let CardComponent = class CardComponent extends BaseComponent {
    constructor() {
        super();
        this.cssClass = 'card';
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.backgroundColor) {
            this.cssClass += ' bg-' + this.backgroundColor;
        }
    }
};
__decorate([
    Input()
], CardComponent.prototype, "backgroundColor", void 0);
CardComponent = __decorate([
    Component({
        selector: 'tree-card',
        template: "<div class=\"card-body\">\n  <ng-content></ng-content>\n</div>\n",
        styles: [""]
    })
], CardComponent);

let CardTitleComponent = class CardTitleComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
    }
};
CardTitleComponent = __decorate([
    Component({
        selector: 'tree-card-title',
        template: "<h1 class='card-title'>\n  <ng-content></ng-content>\n</h1>\n",
        styles: [""]
    })
], CardTitleComponent);

let CardSubtitleComponent = class CardSubtitleComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
    }
};
CardSubtitleComponent = __decorate([
    Component({
        selector: 'tree-card-subtitle',
        template: "<h5>\n  <ng-content></ng-content>\n</h5>\n",
        styles: [":host{display:block;margin-top:-.9rem;margin-bottom:.9rem}"]
    })
], CardSubtitleComponent);

let SpacerComponent = class SpacerComponent extends BaseComponent {
    constructor() {
        super();
        this.size = '1';
    }
    ngOnInit() {
        super.ngOnInit();
        this.cssClass += ' mt-' + this.size;
    }
};
__decorate([
    Input()
], SpacerComponent.prototype, "size", void 0);
SpacerComponent = __decorate([
    Component({
        selector: 'tree-spacer',
        template: "",
        styles: [":host{display:block}"]
    })
], SpacerComponent);

let ButtonComponent = class ButtonComponent extends BaseComponent {
    constructor() {
        super();
        this.color = 'primary';
        this.cssClass = 'btn';
    }
    ngOnInit() {
        super.ngOnInit();
        this.cssClass += ' btn-' + this.color;
        if (this.size) {
            this.cssClass += ' btn-' + this.size;
        }
    }
};
__decorate([
    Input()
], ButtonComponent.prototype, "color", void 0);
__decorate([
    Input()
], ButtonComponent.prototype, "size", void 0);
__decorate([
    Input()
], ButtonComponent.prototype, "href", void 0);
ButtonComponent = __decorate([
    Component({
        selector: 'tree-button',
        template: "<a [routerLink]='href' >\n  <ng-content></ng-content>\n</a>\n",
        styles: ["a{color:inherit!important}a:hover{text-decoration:none}"]
    })
], ButtonComponent);

let TableComponent = class TableComponent extends BaseComponent {
    constructor() {
        super();
        this.tableClass = ['table'];
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.bordered != undefined) {
            this.tableClass.push('table-bordered');
        }
        if (this.striped != undefined) {
            this.tableClass.push('table-striped');
        }
    }
};
__decorate([
    Input()
], TableComponent.prototype, "bordered", void 0);
__decorate([
    Input()
], TableComponent.prototype, "striped", void 0);
TableComponent = __decorate([
    Component({
        selector: 'tree-table',
        template: "<table [ngClass]='tableClass'>\n  <ng-content></ng-content>\n</table>\n",
        styles: [""]
    })
], TableComponent);

let TableHeadComponent = class TableHeadComponent extends BaseComponent {
    constructor() {
        super();
        this.cssClass = 'table-head';
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.color) {
            this.cssClass += ' bg-' + this.color;
        }
    }
};
__decorate([
    Input()
], TableHeadComponent.prototype, "color", void 0);
TableHeadComponent = __decorate([
    Component({
        selector: 'tree-table-head',
        template: "<ng-content></ng-content>\n",
        styles: [":host{display:table-header-group}"]
    })
], TableHeadComponent);

let TableBodyComponent = class TableBodyComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        super.ngOnInit();
    }
};
TableBodyComponent = __decorate([
    Component({
        selector: 'tree-table-body',
        template: "<ng-content></ng-content>\n",
        styles: [":host{display:table-row-group}"]
    })
], TableBodyComponent);

const noop = () => {
};
const ɵ0$1 = noop;
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true
};
let CustomInputComponent = class CustomInputComponent extends BaseComponent {
    constructor(control) {
        super();
        this.control = control;
        // The internal data model
        this.innerValue = '';
        // Placeholders for the callbacks which are later provided
        // by the Control Value Accessor
        this.onTouchedCallback = noop;
        this.onChangeCallback = noop;
        this.control && (this.control.valueAccessor = this);
        this.errorMessages = {
            required: (error) => `This field is required.`,
            maxlength: (error) => `The maximal input length is ${error.requiredLength}`,
            minlength: (error) => `The minimal input length is ${error.requiredLength}`,
            email: (error) => `Not a valid email address`,
        };
    }
    ngOnInit() {
        this.disabled = coerceBooleanProperty(this.disabled);
        super.ngOnInit();
    }
    // get accessor
    get ngValue() {
        return this.innerValue;
    }
    // set accessor including call the onchange callback
    set ngValue(v) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }
    get invalid() {
        return this.control ? this.control.invalid : false;
    }
    get showError() {
        if (!this.control) {
            return false;
        }
        const { dirty, touched } = this.control;
        return this.invalid ? (dirty || touched) : false;
    }
    get errors() {
        if (!this.control) {
            return [];
        }
        const { errors } = this.control;
        return Object.keys(errors).map(key => this.errorMessages[key] ? this.errorMessages[key](errors[key]) : errors[key] || key);
    }
    // Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }
    // From ControlValueAccessor interface
    writeValue(value) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }
    // From ControlValueAccessor interface
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    // From ControlValueAccessor interface
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
};
CustomInputComponent.ctorParameters = () => [
    { type: NgControl, decorators: [{ type: Self }, { type: Optional }] }
];
__decorate([
    Input()
], CustomInputComponent.prototype, "disabled", void 0);
CustomInputComponent = __decorate([
    Component({
        selector: 'tree-custom-input',
        template: "<p>custom-input works!</p>\n",
        providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
        styles: [""]
    }),
    __param(0, Self()), __param(0, Optional())
], CustomInputComponent);

let SliderComponent = class SliderComponent extends CustomInputComponent {
};
__decorate([
    Input()
], SliderComponent.prototype, "step", void 0);
__decorate([
    Input()
], SliderComponent.prototype, "max", void 0);
__decorate([
    Input()
], SliderComponent.prototype, "min", void 0);
SliderComponent = __decorate([
    Component({
        selector: 'tree-slider',
        template: "<label>\n  <ng-content></ng-content>\n</label>\n<input \n  type=\"range\" \n  class=\"form-range\" \n  [min]='min'\n  [max]='max'\n  [step]='step'\n  [disabled]='disabled'\n  [(ngModel)]='ngValue'>\n",
        styles: [":host{display:block}"]
    })
], SliderComponent);

let SwitchComponent = class SwitchComponent extends CustomInputComponent {
    ngOnInit() {
        super.ngOnInit();
    }
};
SwitchComponent = __decorate([
    Component({
        selector: 'tree-switch',
        template: "<div class=\"custom-control custom-switch\">\n  <input type=\"checkbox\" class=\"custom-control-input\" [id]='id' [(ngModel)]='ngValue' [disabled]='disabled' >\n  <label class=\"custom-control-label\" [for]='id'>\n    <ng-content></ng-content>\n  </label>\n</div>\n",
        styles: [":host{display:block}"]
    })
], SwitchComponent);

let PaginationComponent = class PaginationComponent extends BaseComponent {
    constructor() {
        super();
        this.pageCount = 5;
        this.displaySize = 3;
        this.pageChange = new EventEmitter();
        this.onChange = new EventEmitter();
        this.previousDisabled = true;
        this.nextDisabled = false;
        this.page = 1;
    }
    get page() {
        return this._page;
    }
    set page(num) {
        if (num < 1) {
            num = 1;
        }
        if (num > this.pageCount) {
            num = this.pageCount;
        }
        if (num === 1) {
            this.previousDisabled = true;
        }
        else {
            this.previousDisabled = false;
        }
        if (num === this.pageCount) {
            this.nextDisabled = true;
        }
        else {
            this.nextDisabled = false;
        }
        this.onChange.emit(num);
        this.pageChange.emit(num);
        this._page = num;
    }
    ngOnInit() {
        super.ngOnInit();
        this.pageNumbers = [...Array(this.pageCount).keys()].map(i => i + 1);
        if (!this.page) {
            this.page = 1;
        }
    }
    displayPage(pageNumber) {
        return (pageNumber > (this.page - (this.displaySize / 2))
            && pageNumber < (this.page + (this.displaySize / 2)));
    }
};
__decorate([
    Input()
], PaginationComponent.prototype, "pageCount", void 0);
__decorate([
    Input()
], PaginationComponent.prototype, "displaySize", void 0);
__decorate([
    Input()
], PaginationComponent.prototype, "page", null);
__decorate([
    Output()
], PaginationComponent.prototype, "pageChange", void 0);
__decorate([
    Output()
], PaginationComponent.prototype, "onChange", void 0);
PaginationComponent = __decorate([
    Component({
        selector: 'tree-pagination',
        template: "<ul class=\"pagination\">\n  <li class=\"page-item\" [class.disabled]='previousDisabled'>\n    <span class=\"page-link\" aria-label=\"Previous\" (click)='page = page - 1'>\n      Previous\n    </span>\n  </li>\n  <ng-container *ngFor='let p of pageNumbers' >\n    <li class='page-item' *ngIf='displayPage(p)' [class.active]='page === p'>\n      <span class='page-link' (click)='page = p'>{{ p }}</span>\n    </li>\n  </ng-container>\n  <li class=\"page-item\">\n      <span class=\"page-link\"  aria-label=\"Next\" [class.disabled]='nextDisabled' (click)='page = page + 1'>\n        Next\n      </span>\n    </li>\n</ul>\n",
        styles: [".page-link fa-icon{font-size:90%}"]
    })
], PaginationComponent);

let BadgeComponent = class BadgeComponent extends BaseComponent {
    constructor() {
        super();
        this.color = 'primary';
        this.cssClass = 'badge';
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.color) {
            this.cssClass += ' badge-' + this.color;
        }
    }
};
__decorate([
    Input()
], BadgeComponent.prototype, "color", void 0);
BadgeComponent = __decorate([
    Component({
        selector: 'tree-badge',
        template: "<ng-content></ng-content>\n",
        styles: [":host{display:inline-block}"]
    })
], BadgeComponent);

class Trigger {
    constructor(open, close) {
        this.open = open;
        this.close = close;
        if (!close) {
            this.close = open;
        }
    }
    isManual() { return this.open === 'manual' || this.close === 'manual'; }
}
const DEFAULT_ALIASES = {
    hover: ['mouseenter', 'mouseleave'],
    focus: ['focusin', 'focusout'],
};
function parseTriggers(triggers, aliases = DEFAULT_ALIASES) {
    const trimmedTriggers = (triggers || '').trim();
    if (trimmedTriggers.length === 0) {
        return [];
    }
    const parsedTriggers = trimmedTriggers.split(/\s+/).map(trigger => trigger.split(':')).map((triggerPair) => {
        const alias = aliases[triggerPair[0]] || triggerPair;
        return new Trigger(alias[0], alias[1]);
    });
    const manualTriggers = parsedTriggers.filter(triggerPair => triggerPair.isManual());
    if (manualTriggers.length > 1) {
        throw new Error('Triggers parse error: only one manual trigger is allowed');
    }
    if (manualTriggers.length === 1 && parsedTriggers.length > 1) {
        throw new Error('Triggers parse error: manual trigger can\'t be mixed with other triggers');
    }
    return parsedTriggers;
}
function observeTriggers(renderer, nativeElement, triggers, isOpenedFn) {
    return new Observable(subscriber => {
        const listeners = [];
        const openFn = () => subscriber.next(true);
        const closeFn = () => subscriber.next(false);
        const toggleFn = () => subscriber.next(!isOpenedFn());
        triggers.forEach((trigger) => {
            if (trigger.open === trigger.close) {
                listeners.push(renderer.listen(nativeElement, trigger.open, toggleFn));
            }
            else {
                listeners.push(renderer.listen(nativeElement, trigger.open, openFn), renderer.listen(nativeElement, trigger.close, closeFn));
            }
        });
        return () => { listeners.forEach(unsubscribeFn => unsubscribeFn()); };
    });
}
const delayOrNoop = (time) => time > 0 ? delay(time) : (a) => a;
const ɵ0$2 = delayOrNoop;
function triggerDelay(openDelay, closeDelay, isOpenedFn) {
    return (input$) => {
        let pending = null;
        const filteredInput$ = input$.pipe(map(open => ({ open })), filter(event => {
            const currentlyOpen = isOpenedFn();
            if (currentlyOpen !== event.open && (!pending || pending.open === currentlyOpen)) {
                pending = event;
                return true;
            }
            if (pending && pending.open !== event.open) {
                pending = null;
            }
            return false;
        }), share());
        const delayedOpen$ = filteredInput$.pipe(filter(event => event.open), delayOrNoop(openDelay));
        const delayedClose$ = filteredInput$.pipe(filter(event => !event.open), delayOrNoop(closeDelay));
        return merge(delayedOpen$, delayedClose$)
            .pipe(filter(event => {
            if (event === pending) {
                pending = null;
                return event.open !== isOpenedFn();
            }
            return false;
        }), map(event => event.open));
    };
}
function listenToTriggers(renderer, nativeElement, triggers, isOpenedFn, openFn, closeFn, openDelay = 0, closeDelay = 0) {
    const parsedTriggers = parseTriggers(triggers);
    if (parsedTriggers.length === 1 && parsedTriggers[0].isManual()) {
        return () => { };
    }
    const subscription = observeTriggers(renderer, nativeElement, parsedTriggers, isOpenedFn)
        .pipe(triggerDelay(openDelay, closeDelay, isOpenedFn))
        .subscribe(open => (open ? openFn() : closeFn()));
    return () => subscription.unsubscribe();
}

class ContentRef {
    constructor(nodes, viewRef, componentRef) {
        this.nodes = nodes;
        this.viewRef = viewRef;
        this.componentRef = componentRef;
    }
}
class PopupService {
    constructor(_type, _injector, _viewContainerRef, _renderer, _componentFactoryResolver, _applicationRef) {
        this._type = _type;
        this._injector = _injector;
        this._viewContainerRef = _viewContainerRef;
        this._renderer = _renderer;
        this._componentFactoryResolver = _componentFactoryResolver;
        this._applicationRef = _applicationRef;
    }
    open(content, context) {
        if (!this._windowRef) {
            this._contentRef = this._getContentRef(content, context);
            this._windowRef = this._viewContainerRef.createComponent(this._componentFactoryResolver.resolveComponentFactory(this._type), 0, this._injector, this._contentRef.nodes);
        }
        return this._windowRef;
    }
    close() {
        if (this._windowRef) {
            this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._windowRef.hostView));
            this._windowRef = null;
            if (this._contentRef.viewRef) {
                this._applicationRef.detachView(this._contentRef.viewRef);
                this._contentRef.viewRef.destroy();
                this._contentRef = null;
            }
        }
    }
    _getContentRef(content, context) {
        if (!content) {
            return new ContentRef([]);
        }
        else if (content instanceof TemplateRef) {
            const viewRef = content.createEmbeddedView(context);
            this._applicationRef.attachView(viewRef);
            return new ContentRef([viewRef.rootNodes], viewRef);
        }
        else {
            return new ContentRef([[this._renderer.createText(`${content}`)]]);
        }
    }
}

let TooltipConfig = class TooltipConfig {
    constructor() {
        this.autoClose = true;
        this.placement = 'auto';
        this.triggers = 'hover focus';
        this.disableTooltip = false;
        this.openDelay = 0;
        this.closeDelay = 0;
    }
};
TooltipConfig.ɵprov = ɵɵdefineInjectable({ factory: function TooltipConfig_Factory() { return new TooltipConfig(); }, token: TooltipConfig, providedIn: "root" });
TooltipConfig = __decorate([
    Injectable({ providedIn: 'root' })
], TooltipConfig);
let nextId = 0;
let TooltipWindowComponent = class TooltipWindowComponent {
    constructor() {
        this.classes = 'tooltip show';
        // @HostBinding('class') cssClass = '"tooltip show" + (tooltipClass ? " " + tooltipClass : "")';
        // @HostBinding('role') role = 'tooltip';
        this.elementId = 'id';
    }
    set tooltipClass(value) {
        this._tootipClass = value;
        this.classes = 'tooltip show ' + value;
    }
    get tooltipClass() {
        return this._tootipClass;
    }
};
__decorate([
    HostBinding('class')
], TooltipWindowComponent.prototype, "classes", void 0);
__decorate([
    HostBinding('id')
], TooltipWindowComponent.prototype, "elementId", void 0);
__decorate([
    Input()
], TooltipWindowComponent.prototype, "id", void 0);
__decorate([
    Input()
], TooltipWindowComponent.prototype, "tooltipClass", null);
TooltipWindowComponent = __decorate([
    Component({
        selector: 'tree-tooltip-window',
        template: "<div class=\"arrow\"></div>\n<div class=\"tooltip-inner\">\n  <ng-content></ng-content>\n</div>\n",
        styles: [":host.bs-tooltip-bottom .arrow,:host.bs-tooltip-top .arrow{left:calc(50% - .4rem)}:host.bs-tooltip-bottom-left .arrow,:host.bs-tooltip-top-left .arrow{left:1em}:host.bs-tooltip-bottom-right .arrow,:host.bs-tooltip-top-right .arrow{left:auto;right:.8rem}:host.bs-tooltip-left .arrow,:host.bs-tooltip-right .arrow{top:calc(50% - .4rem)}:host.bs-tooltip-left-top .arrow,:host.bs-tooltip-right-top .arrow{top:.4rem}:host.bs-tooltip-left-bottom .arrow,:host.bs-tooltip-right-bottom .arrow{top:auto;bottom:.4rem}"]
    })
], TooltipWindowComponent);
/**
 * A lightweight and extensible directive for fancy tooltip creation.
 */
let TooltipDirective = class TooltipDirective {
    constructor(_elementRef, _renderer, injector, componentFactoryResolver, viewContainerRef, config, _ngZone, _document, _changeDetector, applicationRef) {
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._ngZone = _ngZone;
        this._document = _document;
        this._changeDetector = _changeDetector;
        /**
         * An event emitted when the tooltip is shown. Contains no payload.
         */
        this.shown = new Subject();
        /**
         * An event emitted when the popover is hidden. Contains no payload.
         */
        this.hidden = new Subject();
        this._ngbTooltipWindowId = `tree-tooltip-${nextId++}`;
        this.autoClose = config.autoClose;
        this.placement = config.placement;
        this.triggers = config.triggers;
        this.container = config.container;
        this.disableTooltip = config.disableTooltip;
        this.tooltipClass = config.tooltipClass;
        this.openDelay = config.openDelay;
        this.closeDelay = config.closeDelay;
        this._popupService = new PopupService(TooltipWindowComponent, injector, viewContainerRef, _renderer, componentFactoryResolver, applicationRef);
        this._zoneSubscription = _ngZone.onStable.subscribe(() => {
            if (this._windowRef) {
                positionElements(this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement, this.container === 'body', 'bs-tooltip');
            }
        });
    }
    /**
     * The string content or a `TemplateRef` for the content to be displayed in the tooltip.
     *
     * If the content if falsy, the tooltip won't open.
     */
    set treeTooltip(value) {
        this._ngbTooltip = value;
        if (!value && this._windowRef) {
            this.close();
        }
    }
    get treeTooltip() { return this._ngbTooltip; }
    /**
     * Opens the tooltip.
     *
     * This is considered to be a "manual" triggering.
     * The `context` is an optional value to be injected into the tooltip template when it is created.
     */
    open(context) {
        if (!this._windowRef && this._ngbTooltip && !this.disableTooltip) {
            this._windowRef = this._popupService.open(this._ngbTooltip, context);
            this._windowRef.instance.tooltipClass = this.tooltipClass;
            this._windowRef.instance.id = this._ngbTooltipWindowId;
            this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-describedby', this._ngbTooltipWindowId);
            if (this.container === 'body') {
                this._document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
            }
            // We need to detect changes, because we don't know where .open() might be called from.
            // Ex. opening tooltip from one of lifecycle hooks that run after the CD
            // (say from ngAfterViewInit) will result in 'ExpressionHasChanged' exception
            this._windowRef.changeDetectorRef.detectChanges();
            // We need to mark for check, because tooltip won't work inside the OnPush component.
            // Ex. when we use expression like `{{ tooltip.isOpen() : 'opened' : 'closed' }}`
            // inside the template of an OnPush component and we change the tooltip from
            // open -> closed, the expression in question won't be updated unless we explicitly
            // mark the parent component to be checked.
            this._windowRef.changeDetectorRef.markForCheck();
            ngbAutoClose(this._ngZone, this._document, this.autoClose, () => this.close(), this.hidden.asObservable(), [this._windowRef.location.nativeElement]);
            this.shown.next();
        }
    }
    /**
     * Closes the tooltip.
     *
     * This is considered to be a "manual" triggering of the tooltip.
     */
    close() {
        if (this._windowRef != null) {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-describedby');
            this._popupService.close();
            this._windowRef = null;
            this.hidden.next();
            this._changeDetector.markForCheck();
        }
    }
    /**
     * Toggles the tooltip.
     *
     * This is considered to be a "manual" triggering of the tooltip.
     */
    toggle() {
        if (this._windowRef) {
            this.close();
        }
        else {
            this.open();
        }
    }
    /**
     * Returns `true`, if the popover is currently shown.
     */
    isOpen() { return this._windowRef != null; }
    ngOnInit() {
        this._unregisterListenersFn = listenToTriggers(this._renderer, this._elementRef.nativeElement, this.triggers, this.isOpen.bind(this), this.open.bind(this), this.close.bind(this), +this.openDelay, +this.closeDelay);
    }
    ngOnChanges({ tooltipClass }) {
        if (tooltipClass && this.isOpen()) {
            this._windowRef.instance.tooltipClass = tooltipClass.currentValue;
        }
    }
    ngOnDestroy() {
        this.close();
        // This check is needed as it might happen that ngOnDestroy is called before ngOnInit
        // under certain conditions, see: https://github.com/ng-bootstrap/ng-bootstrap/issues/2199
        if (this._unregisterListenersFn) {
            this._unregisterListenersFn();
        }
        this._zoneSubscription.unsubscribe();
    }
};
TooltipDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: Renderer2 },
    { type: Injector },
    { type: ComponentFactoryResolver },
    { type: ViewContainerRef },
    { type: TooltipConfig },
    { type: NgZone },
    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
    { type: ChangeDetectorRef },
    { type: ApplicationRef }
];
__decorate([
    Input()
], TooltipDirective.prototype, "autoClose", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "placement", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "triggers", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "container", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "disableTooltip", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "tooltipClass", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "openDelay", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "closeDelay", void 0);
__decorate([
    Output()
], TooltipDirective.prototype, "shown", void 0);
__decorate([
    Output()
], TooltipDirective.prototype, "hidden", void 0);
__decorate([
    Input()
], TooltipDirective.prototype, "treeTooltip", null);
TooltipDirective = __decorate([
    Directive({ selector: '[treeTooltip]', exportAs: 'treeTooltip' }),
    __param(7, Inject(DOCUMENT))
], TooltipDirective);

let ImageComponent = class ImageComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
        if (this.height) {
            this.imgHeight = this.height;
        }
        if (this.width) {
            this.imgWidth = this.width;
        }
        super.ngOnInit();
        if (this.type === 'fluid') {
            this.cssFluid = true;
        }
        else if (this.type === 'thumbnail') {
            this.cssThumbnail = true;
        }
        else if (this.type === 'card') {
            this.cssCard = true;
        }
    }
};
__decorate([
    Input()
], ImageComponent.prototype, "type", void 0);
__decorate([
    Input()
], ImageComponent.prototype, "src", void 0);
__decorate([
    Input()
], ImageComponent.prototype, "alt", void 0);
__decorate([
    Input()
], ImageComponent.prototype, "height", void 0);
__decorate([
    Input()
], ImageComponent.prototype, "width", void 0);
__decorate([
    HostBinding('style.height.px')
], ImageComponent.prototype, "imgHeight", void 0);
__decorate([
    HostBinding('style.width.px')
], ImageComponent.prototype, "imgWidth", void 0);
__decorate([
    HostBinding('class.img-thumbnail')
], ImageComponent.prototype, "cssThumbnail", void 0);
__decorate([
    HostBinding('class.img-fluid')
], ImageComponent.prototype, "cssFluid", void 0);
__decorate([
    HostBinding('class.card')
], ImageComponent.prototype, "cssCard", void 0);
ImageComponent = __decorate([
    Component({
        selector: 'tree-image',
        template: "<img [src]=\"src\" [alt]=\"alt\"/>\n",
        styles: [":host{display:inline-block}:host.card{padding:1rem}img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}"]
    })
], ImageComponent);

let TextFieldComponent = class TextFieldComponent extends CustomInputComponent {
    constructor() {
        super(...arguments);
        this.maxLength = 255;
        this.placeholder = "";
        this.inputType = 'text';
    }
    ngOnInit() {
        this.before = coerceBooleanProperty(this.before);
        this.after = coerceBooleanProperty(this.after);
        if (this.password === undefined) {
            this.password = false;
        }
        else if (this.password !== false) {
            this.password = true;
        }
        if (this.password) {
            this.inputType = 'password';
        }
        super.ngOnInit();
    }
};
__decorate([
    Input()
], TextFieldComponent.prototype, "maxLength", void 0);
__decorate([
    Input()
], TextFieldComponent.prototype, "password", void 0);
__decorate([
    Input()
], TextFieldComponent.prototype, "placeholder", void 0);
__decorate([
    Input()
], TextFieldComponent.prototype, "before", void 0);
__decorate([
    Input()
], TextFieldComponent.prototype, "after", void 0);
TextFieldComponent = __decorate([
    Component({
        selector: 'tree-text-field',
        template: "<div class=\"form-group\" *ngIf='!before && !after'>\n  <label>\n    <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n  </label>\n  <input [maxLength]=\"maxLength\"  [attr.type]=\"inputType\" class=\"form-control\" [(ngModel)]=\"ngValue\" name=\"\" [disabled]='disabled' [placeholder]='placeholder'>\n  <small class='text-danger' *ngIf='showError'>{{ errors }}</small>\n</div>\n\n<div class=\"input-group form-group\" *ngIf='before'>\n  <div class=\"input-group-prepend\">\n    <span class=\"input-group-text\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </span>\n  </div>\n  <input [maxLength]=\"maxLength\"  [attr.type]=\"inputType\" class=\"form-control\" [(ngModel)]=\"ngValue\" name=\"\" [disabled]='disabled' [placeholder]='placeholder'>\n</div>\n\n<div class=\"input-group form-group\" *ngIf='after'>\n  <input [maxLength]=\"maxLength\"  [attr.type]=\"inputType\" class=\"form-control\" [(ngModel)]=\"ngValue\" name=\"\" [disabled]='disabled' [placeholder]='placeholder'>\n  <div class=\"input-group-append\">\n    <span class=\"input-group-text\">\n      <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n    </span>\n  </div>\n</div>\n\n<ng-template #contentTpl><ng-content></ng-content></ng-template>\n",
        styles: [""]
    })
], TextFieldComponent);

let SubmitButtonComponent = class SubmitButtonComponent extends BaseComponent {
    constructor() {
        super();
        this.onSumbit = new EventEmitter();
    }
    ngOnInit() {
        super.ngOnInit();
        if (!this.form) {
            throw new Error('The field form is required for tree-submit-button.');
        }
        this.disabled = coerceBooleanProperty(this.disabled);
    }
    submitForm() {
        if (this.form.invalid) {
            Object.values(this.form.controls).forEach(control => {
                control.markAsDirty();
            });
        }
        else {
            this.onSumbit.emit();
        }
    }
};
__decorate([
    Input()
], SubmitButtonComponent.prototype, "form", void 0);
__decorate([
    Input()
], SubmitButtonComponent.prototype, "disabled", void 0);
__decorate([
    Output()
], SubmitButtonComponent.prototype, "onSumbit", void 0);
SubmitButtonComponent = __decorate([
    Component({
        selector: 'tree-submit-button',
        template: "<input type=\"submit\" class='btn btn-primary' [disabled]='disabled' (click)='submitForm()'>\n",
        styles: [""]
    })
], SubmitButtonComponent);

let TextareaComponent = class TextareaComponent extends CustomInputComponent {
    constructor() {
        super(...arguments);
        this.maxLength = 1024;
        this.placeholder = '';
    }
    ngOnInit() {
        super.ngOnInit();
    }
};
__decorate([
    Input()
], TextareaComponent.prototype, "maxLength", void 0);
__decorate([
    Input()
], TextareaComponent.prototype, "placeholder", void 0);
TextareaComponent = __decorate([
    Component({
        selector: 'tree-textarea',
        template: "<div class=\"form-group\">\n  <label>\n    <ng-content></ng-content>\n  </label>\n  <textarea [maxLength]=\"maxLength\" class=\"form-control\" [(ngModel)]=\"ngValue\" name=\"\" [disabled]='disabled' [placeholder]='placeholder'> </textarea>\n  <small class='text-danger' *ngIf='showError'>{{ errors }}</small>\n</div>\n",
        styles: [""]
    })
], TextareaComponent);

let RadioButtonComponent = class RadioButtonComponent extends CustomInputComponent {
    ngOnInit() {
        super.ngOnInit();
        this.checked = coerceBooleanProperty(this.checked);
        if (this.checked) {
            this.ngValue = this.value;
        }
        if (!this.name) {
            this.name = this.id;
        }
    }
};
__decorate([
    Input()
], RadioButtonComponent.prototype, "checked", void 0);
__decorate([
    Input()
], RadioButtonComponent.prototype, "name", void 0);
__decorate([
    Input()
], RadioButtonComponent.prototype, "value", void 0);
RadioButtonComponent = __decorate([
    Component({
        selector: 'tree-radio-button',
        template: "<div class=\"custom-control custom-radio form-group \">\n  <input type=\"radio\" class=\"custom-control-input\" [id]=\"id\" [disabled]='disabled' [(ngModel)]='ngValue' [name]='name' [value]='value'>\n  <label class=\"custom-control-label\" [for]=\"id\">\n    <ng-content></ng-content>\n  </label>\n</div>\n",
        styles: [""]
    })
], RadioButtonComponent);

let CheckboxComponent = class CheckboxComponent extends CustomInputComponent {
    ngOnInit() {
        super.ngOnInit();
        this.checked = coerceBooleanProperty(this.checked);
        if (this.checked) {
            this.ngValue = true;
        }
        else {
            this.ngValue = false;
        }
    }
};
__decorate([
    Input()
], CheckboxComponent.prototype, "checked", void 0);
CheckboxComponent = __decorate([
    Component({
        selector: 'tree-checkbox',
        template: "<div class=\"custom-control custom-checkbox form-group\">\n  <input type=\"checkbox\" class=\"custom-control-input\" [id]=\"id\" [disabled]='disabled' [(ngModel)]='ngValue'>\n  <label class=\"custom-control-label\" [for]=\"id\">\n    <ng-content></ng-content>\n  </label>\n  <small class='text-danger ml-1' *ngIf='showError'>{{ errors }}</small>\n</div>\n",
        styles: [""]
    })
], CheckboxComponent);

let DropdownItemComponent = class DropdownItemComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
    }
};
__decorate([
    Input()
], DropdownItemComponent.prototype, "href", void 0);
DropdownItemComponent = __decorate([
    Component({
        selector: 'tree-dropdown-item',
        template: "<a class=\"dropdown-item\" [routerLink]='href'>\n  <ng-content></ng-content>\n</a>\n",
        styles: [""]
    })
], DropdownItemComponent);

let SideMenuHeaderComponent = class SideMenuHeaderComponent extends BaseComponent {
    constructor() { super(); }
    ngOnInit() {
    }
};
SideMenuHeaderComponent = __decorate([
    Component({
        selector: 'tree-side-menu-header',
        template: "<p>side-menu-header works!</p>\n",
        styles: [""]
    })
], SideMenuHeaderComponent);

let NavbarComponent = class NavbarComponent extends BaseComponent {
    constructor() {
        super();
        this.isOpen = false;
        this.cssClass = 'navbar';
    }
    ngOnInit() {
        super.ngOnInit();
        this.dark = coerceBooleanProperty(this.dark);
        if (this.dark) {
            this.cssClass += ' navbar-dark';
        }
        else {
            this.cssClass += ' navbar-light';
        }
        if (this.expand) {
            this.cssClass += ' navbar-expand-' + this.expand;
        }
        else {
            this.cssClass += ' navbar-expand-md';
        }
        if (this.backgroundColor) {
            this.cssClass += ' bg-' + this.backgroundColor;
        }
    }
    toggleMenu() {
        this.isOpen = !this.isOpen;
    }
};
__decorate([
    ViewChild('navMenu')
], NavbarComponent.prototype, "navMenu", void 0);
__decorate([
    Input()
], NavbarComponent.prototype, "expand", void 0);
__decorate([
    Input()
], NavbarComponent.prototype, "dark", void 0);
__decorate([
    Input()
], NavbarComponent.prototype, "backgroundColor", void 0);
NavbarComponent = __decorate([
    Component({
        selector: 'tree-navbar',
        template: "<button class=\"navbar-toggler\" type=\"button\" (click)='toggleMenu()'>\n  <span class=\"navbar-toggler-icon\"></span>\n</button>\n\n<a class=\"navbar-brand\" href=\"/\">\n  <ng-content select='tree-navbar-brand'></ng-content>\n</a>\n<div class=\"collapse navbar-collapse\" [class.show]='isOpen' #navMenu>\n  <ng-content></ng-content>\n</div>\n",
        styles: [""]
    })
], NavbarComponent);

let NavbarBrandComponent = class NavbarBrandComponent extends BaseComponent {
    constructor() {
        super();
    }
    ngOnInit() {
        super.ngOnInit();
    }
};
NavbarBrandComponent = __decorate([
    Component({
        selector: 'tree-navbar-brand',
        template: "<ng-content></ng-content>\n",
        styles: [""]
    })
], NavbarBrandComponent);

let DesignGuideComponent = class DesignGuideComponent {
    constructor() { }
};
DesignGuideComponent = __decorate([
    Component({
        selector: 'tree-design-guide',
        template: "<h1>General/Colors</h1>\n  <tree-row>\n    <tree-col size=\"auto\">\n      <div class=\"bg-primary-light color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Primary light</h3><span>#6DD5CC</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n      <div class=\"bg-primary color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Primary</h3><span>#2EC4B6</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n      <div class=\"bg-primary-dark color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Primary dark</h3><span>#1C786F</span>\n    </tree-col>\n  </tree-row>\n\n  <tree-row mt='3'>\n    <tree-col size=\"auto\">\n        <div class=\"bg-secondary-light color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3><strong>Secondary</strong>\u00A0light</h3><span>#649FFF</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"bg-secondary color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3><strong>Secondary</strong></h3><span>#2176FF</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"bg-secondary-dark color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3>Secondary dark</h3><span>#1753B3</span>\n    </tree-col>\n  </tree-row>\n\n  <tree-row mt='3'>\n    <tree-col size=\"auto\">\n        <div class=\"bg-success-light color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3><strong>Secondary</strong>\u00A0light</h3><span>#649FFF</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"bg-success color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3><strong>Secondary</strong></h3><span>#2176FF</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"bg-success-dark color-display\"></div>\n    </tree-col>\n    <tree-col>\n        <h3>Secondary dark</h3><span>#1753B3</span>\n    </tree-col>\n  </tree-row>\n <tree-row mt='3'>\n    <tree-col size=\"auto\">\n      <div class=\"bg-warning-light color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Warning light</h3><span>#FFDE94</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n      <div class=\"bg-warning color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Warning</h3><span>#FFD166</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n      <div class=\"bg-warning-dark color-display\"></div>\n    </tree-col>\n    <tree-col>\n      <h3>Warning dark</h3><span>#B29147</span>\n    </tree-col>\n  </tree-row>\n\n\n  <tree-row mt='3'>\n     <tree-col size=\"auto\">\n       <div class=\"bg-danger-light color-display\"></div>\n     </tree-col>\n     <tree-col>\n       <h3>Danger light</h3><span>#F18274</span>\n     </tree-col>\n     <tree-col size=\"auto\">\n       <div class=\"bg-danger color-display\"></div>\n     </tree-col>\n     <tree-col>\n       <h3><strong>Danger</strong></h3><span>#EE6352</span>\n     </tree-col>\n     <tree-col size=\"auto\">\n       <div class=\"bg-danger-dark color-display\"></div>\n     </tree-col>\n     <tree-col>\n       <h3><strong>Danger</strong>\u00A0dark</h3><span>#BE4F41</span>\n     </tree-col>\n   </tree-row>\n\n   <tree-row mt='3'>\n      <tree-col size=\"auto\">\n        <div class=\"bg-gray-100 color-display\"></div>\n      </tree-col>\n      <tree-col>\n        <h3>Gray 100</h3><span>#E6F5F3</span>\n      </tree-col>\n      <tree-col size=\"auto\">\n        <div class=\"bg-gray-200 color-display\"></div>\n      </tree-col>\n      <tree-col>\n        <h3><strong>Gray 200</strong><br /></h3><span>#EF476F</span>\n      </tree-col>\n      <tree-col size=\"auto\">\n        <div class=\"bg-gray-300 color-display\"></div>\n      </tree-col>\n      <tree-col>\n        <h3><strong>Gray 300</strong></h3><span>#1C786F</span>\n      </tree-col>\n    </tree-row>\n\n    <tree-row mt='3'>\n       <tree-col size=\"auto\">\n         <div class=\"bg-gray-400 color-display\"></div>\n       </tree-col>\n       <tree-col>\n         <h3><strong>Gray 400</strong></h3><span>#F37E9A</span>\n       </tree-col>\n       <tree-col size=\"auto\">\n         <div class=\"bg-gray-500 color-display\"></div>\n       </tree-col>\n       <tree-col>\n         <h3><strong>Gray 500</strong><br /></h3><span>#EF476F</span>\n       </tree-col>\n       <tree-col size=\"auto\">\n         <div class=\"bg-gray-600 color-display\"></div>\n       </tree-col>\n       <tree-col>\n         <h3><strong>Gray 600</strong></h3><span>#1C786F</span>\n       </tree-col>\n     </tree-row>\n\n     <tree-row mt='3'>\n        <tree-col size=\"auto\">\n          <div class=\"bg-gray-700 color-display\"></div>\n        </tree-col>\n        <tree-col>\n          <h3><strong>Gray 700</strong></h3><span>#F37E9A</span>\n        </tree-col>\n        <tree-col size=\"auto\">\n          <div class=\"bg-gray-800 color-display\"></div>\n        </tree-col>\n        <tree-col>\n          <h3><strong>Gray 800</strong><br /></h3><span>#EF476F</span>\n        </tree-col>\n        <tree-col size=\"auto\">\n          <div class=\"bg-gray-900 color-display\"></div>\n        </tree-col>\n        <tree-col>\n          <h3><strong>Gray 900</strong></h3><span>#1C786F</span>\n        </tree-col>\n      </tree-row>\n<hr>\n<h1>General/Radius</h1>\n<tree-row>\n  <tree-col size=\"auto\">\n    <div class=\"bg-primary radius-display rounded-sm\" \n      data-sketch-type='symbol' \n      data-sketch-name='radius/sm'>\n    </div>\n  </tree-col>\n  <tree-col>\n    <h3>Small</h3><span>0.15rem</span>\n  </tree-col>\n\n  <tree-col size=\"auto\">\n    <div class=\"bg-primary radius-display rounded\" \n      data-sketch-type='symbol'\n      data-sketch-name='radius/normal'>\n    </div>\n  </tree-col>\n  <tree-col>\n    <h3>Normal</h3><span>0.25rem</span>\n  </tree-col>\n\n  <tree-col size=\"auto\">\n    <div class=\"bg-primary radius-display rounded-lg\"\n      data-sketch-type='symbol' \n      data-sketch-name='radius/lg'>\n    </div>\n  </tree-col>\n  <tree-col>\n    <h3>Large</h3><span>0.35rem</span>\n  </tree-col>\n</tree-row>\n<hr>\n<h1>General/Shadows</h1>\n<tree-row>\n    <tree-col size=\"auto\">\n        <div class=\"shadow-display bg-primary shadow-sm\"></div>\n    </tree-col>\n    <tree-col>\n        <h3>Small</h3><span>1px 1px 5px 10%</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"shadow-display bg-primary shadow\"></div>\n    </tree-col>\n    <tree-col>\n        <h3>Normal</h3><span>1px 1px 10px 10%</span>\n    </tree-col>\n    <tree-col size=\"auto\">\n        <div class=\"shadow-display bg-primary shadow-lg\"></div>\n    </tree-col>\n    <tree-col>\n        <h3>Large</h3><span>2px 2px 20px 20%</span>\n    </tree-col>\n  </tree-row>\n  <hr>\n <h1>General/Typology</h1>\n  <tree-row>\n    <tree-col>\n        <h1 class=\"title\">Heading title</h1>\n        <h1>Heading 1</h1>\n        <h2>Heading 2</h2>\n        <h3>Heading 3</h3>\n        <h4>Heading 4</h4>\n        <h5>Heading 5</h5>\n        <h6>Heading 6</h6>\n        <p class=\"lead\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet risus nullam eget felis. Donec adipiscing tristique risus nec. Nunc vel risus commodo viverra maecenas\n        accumsan. Ultricies mi quis hendrerit dolor magna. Sit amet porttitor eget dolor morbi non arcu risus. Aliquam id diam maecenas ultricies. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Tellus pellentesque eu tincidunt\n        tortor aliquam nulla facilisi. Amet risus nullam eget felis eget nunc lobortis mattis aliquam.</p>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet risus nullam eget felis. Donec adipiscing tristique risus nec. Nunc vel risus commodo viverra maecenas\n        accumsan. Ultricies mi quis hendrerit dolor magna. Sit amet porttitor eget dolor morbi non arcu risus. Aliquam id diam maecenas ultricies. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Tellus pellentesque eu tincidunt\n        tortor aliquam nulla facilisi. Amet risus nullam eget felis eget nunc lobortis mattis aliquam.</p>\n    </tree-col>\n  </tree-row>\n<hr>\n<h1>Controls/Buttons</h1>\n  <tree-row>\n    <tree-col size='auto'>\n      <h4>Primary</h4>\n      <tree-button size='lg' \n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/primary'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/primary'> \n        Normal\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/primary'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Secondary</h4>\n      <tree-button size='lg' \n                   color='secondary'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/secondary'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='secondary'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/secondary'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='secondary'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/secondary'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Info</h4>\n      <tree-button size='lg' \n                   color='info'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/info'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='info'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/info'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='info'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/info'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Danger</h4>\n      <tree-button size='lg' \n                   color='danger'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/danger'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='danger'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/danger'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='danger'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/danger'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Warning</h4>\n      <tree-button size='lg' \n                   color='warning'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/warning'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='warning'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/warning'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='warning'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/warning'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Success</h4>\n      <tree-button size='lg' \n                   color='success'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/success'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='success'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/success'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='success'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/success'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Light</h4>\n      <tree-button size='lg' \n                   color='light'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/light'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='light'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/light'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='light'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/light'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    <tree-col size='auto'>\n      <h4>Dark</h4>\n      <tree-button size='lg' \n                   color='dark'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/large/dark'> \n        Large\n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button \n                   color='dark'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/dark'> \n        Normal \n      </tree-button> \n      <tree-spacer size=1></tree-spacer>\n      <tree-button size='sm' \n                   color='dark'\n                   data-sketch-type='symbol' \n                   data-sketch-name='buttons/small/dark'> \n        Small\n      </tree-button> \n    </tree-col>\n\n    \n  </tree-row>\n\n<hr>\n<h1>Controls/Sliders</h1>\n  <tree-row>\n    <tree-col>\n      <h4>Enabled</h4>\n      <tree-slider minlength='50'\n                   data-sketch-type='symbol'\n                   data-sketch-name='sliders/enabled' \n        ></tree-slider>\n      <tree-spacer size='3'></tree-spacer>\n    </tree-col>\n    <tree-col>\n      <h4>Disabled</h4>\n      <tree-slider disabled\n                   data-sketch-type='symbol'\n                   data-sketch-name='sliders/disabled' \n        ></tree-slider>\n    </tree-col>\n  </tree-row>\n  <tree-row>\n  </tree-row>\n  <hr>\n  <h1>Controls/Switches</h1>\n\n  <tree-row>\n    <tree-col>\n      <tree-switch\n        data-sketch-type='symbol'\n        data-sketch-name='switch/enabled' \n        >Switche enabled</tree-switch>\n    </tree-col>\n    <tree-col>\n      <tree-switch disabled\n                   data-sketch-type='symbol'\n                   data-sketch-name='switch/disabled' \n        >Switch disabled</tree-switch>\n    </tree-col>\n  </tree-row>\n  <hr>\n  <h1>Controls/Pagination</h1>\n  <tree-row>\n    <tree-col>\n      <label>Disabled 5</label>\n      <tree-pagination [pageCount]='10' [displaySize]='5'></tree-pagination>\n    </tree-col>\n    <tree-col>\n      <label>Disabled 3</label>\n      <tree-pagination [pageCount]='5' [displaySize]='3'></tree-pagination>\n    </tree-col>\n  </tree-row>\n  <hr>\n  <h1>Media/Badges</h1>\n\n  <tree-row>\n    <tree-col>\n      <tree-badge>Primary</tree-badge>\n      <tree-badge ml='2' color='secondary'>Secondary</tree-badge>\n      <tree-badge ml='2' color='info'>Info</tree-badge>\n      <tree-badge ml='2' color='warning'>warning</tree-badge>\n      <tree-badge ml='2' color='danger'>Danger</tree-badge>\n    </tree-col>\n  </tree-row>\n  <tree-row>\n    <tree-col>\n      <h1>Example heading <tree-badge>New</tree-badge></h1>\n    </tree-col>\n  </tree-row>\n  <tree-row>\n    <tree-col>\n      <tree-button>\n        Notifications\n        <tree-badge ml='1' color='danger'>10</tree-badge>\n      </tree-button>\n    </tree-col>\n  </tree-row>\n<hr>\n  \n<h1>Media/Tooltips</h1>\n<tree-row>\n  <tree-col>\n    <h4>Placements</h4>\n    <tree-button treeTooltip='Tooltip top' placement='top'>Button</tree-button>\n    <tree-button ml=2 treeTooltip='Tooltip bottom' placement='bottom'>Button</tree-button>\n    <tree-button ml=2 treeTooltip='Tooltip left' placement='left'>Button</tree-button>\n    <tree-button ml=2 treeTooltip='Tooltip right' placement='right'>Button</tree-button>\n  </tree-col>\n</tree-row>\n<tree-row>\n  <tree-col>\n    <h4>Delay</h4>\n    <tree-button openDelay='300' treeTooltip='Tooltip'>Open delay 500ms</tree-button>\n    <tree-button ml=2 closeDelay='1000' treeTooltip='Tooltip bottom'>Close delay 1s</tree-button>\n  </tree-col>\n</tree-row>\n\n<hr>\n<h1>Media/Images</h1>\n  <h4>Fluid</h4>\n  <tree-image type='fluid' src='https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n\n  <tree-spacer size=\"3\"></tree-spacer>\n  <h4>Cards</h4>\n  <tree-row p='3' backgroundColor='gray-100'>\n    <tree-col>\n      <tree-image m=2 type='card' width='300'  src='https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n      <tree-image m=2 type='card' width='300'  src='https://images.pexels.com/photos/240040/pexels-photo-240040.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n\n    </tree-col>\n  </tree-row>\n\n  <tree-spacer size=\"3\"></tree-spacer>\n  <h4>Thumbnails</h4>\n  <tree-row>\n    <tree-col>\n      <tree-image m=2 type='thumbnail' src='//images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n      <tree-image m=2 type='thumbnail' src='https://images.pexels.com/photos/240040/pexels-photo-240040.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n      <tree-image m=2 type='thumbnail' src='https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n    </tree-col>\n    <tree-col backgroundColor='dark'>\n      <tree-image m=2 type='thumbnail' src='//images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n      <tree-image m=2 type='thumbnail' src='https://images.pexels.com/photos/240040/pexels-photo-240040.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n      <tree-image m=2 type='thumbnail' src='https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'></tree-image>\n    </tree-col>\n  </tree-row>\n \n<hr>\n<h1>Forms/Textarea</h1>\n\n  <div class=\"form\">\n    <tree-textarea placeholder='Type something...'>Textarea example</tree-textarea>\n  </div>\n\n<hr>\n<h1>Forms/Text Fiels</h1>\n\n  <tree-row>\n    <tree-col>\n      <div class=\"form\">\n        <tree-text-field placeholder='type something'>Text field</tree-text-field>\n        <tree-text-field disabled >Disabled text field</tree-text-field>\n        <tree-text-field before >https://</tree-text-field>\n        <tree-text-field after >.00</tree-text-field>\n      </div>\n    </tree-col>\n  </tree-row>\n<hr>\n<h1>Forms/Checkboxes</h1>\n<tree-row>\n    <tree-col>\n      <tree-checkbox>Checkbox</tree-checkbox>\n    </tree-col>\n    <tree-col>\n      <tree-checkbox disabled>Checkbox disabled</tree-checkbox>\n    </tree-col>\n  </tree-row>\n  <tree-row mt=3>\n    <tree-col>\n      <tree-checkbox checked>Checkbox checked</tree-checkbox>\n    </tree-col>\n    <tree-col>\n      <tree-checkbox disabled checked>Checkbox checked disabled</tree-checkbox>\n    </tree-col>\n  </tree-row>\n\n<hr>\n<h1>Forms/Radio Buttons</h1>\n<tree-row>\n    <tree-col>\n      <tree-radio-button  name='radio' value='radio 1'>Radio button</tree-radio-button>\n    </tree-col>\n    <tree-col>\n      <tree-radio-button disabled>Radio button disabled</tree-radio-button>\n    </tree-col>\n  </tree-row>\n  <tree-row mt=3>\n    <tree-col>\n      <tree-radio-button  checked name='radio' value='radio 2'>Radio button</tree-radio-button>\n    </tree-col>\n    <tree-col>\n      <tree-radio-button disabled checked>Radio button disabled checked</tree-radio-button>\n    </tree-col>\n  </tree-row>\n\n  <hr>\n  <h1>Containers/Cards</h1>\n  <tree-row>\n    <tree-col>\n      <tree-card>\n        <tree-card-title>Card title</tree-card-title>\n        <tree-card-subtitle>Subtitle</tree-card-subtitle>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet risus nullam eget felis. Donec adipiscing tristique risus nec. Nunc vel risus commodo viverra maecenas accumsan. Ultricies mi quis hendrerit dolor magna. Sit amet porttitor eget dolor morbi non arcu risus. Aliquam id diam maecenas ultricies. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Amet risus nullam eget felis eget nunc lobortis mattis aliquam.</p>\n        <tree-image type='fluid' src='/assets/images/forest.jpg'></tree-image>\n      </tree-card>\n    </tree-col>\n  </tree-row>\n  <tree-row>\n    <tree-col>\n      <tree-card backgroundColor='gray-100'>\n        <tree-card-title>Background color</tree-card-title>\n        <tree-card-subtitle>gray-100</tree-card-subtitle>\n        <p>Please do not use this gray-100 ontop of white.</p>\n      </tree-card>\n    </tree-col>\n    <tree-col>\n      <tree-card backgroundColor='dark'>\n        <tree-card-title>Background color</tree-card-title>\n        <tree-card-subtitle>dark</tree-card-subtitle>\n        <p> </p>\n      </tree-card>\n    </tree-col>\n  </tree-row>\n  <hr>\n  <h1>Containers/Tables</h1>\n\n  <tree-table bordered>\n    <tree-table-head>\n      <tree-row>\n        <tree-col>Head</tree-col>\n      </tree-row>\n    </tree-table-head>\n      <tree-row>\n        <tree-col size='4'><b>Row 1 Col 1</b></tree-col>\n        <tree-col size='4'>Row 1 Col 2</tree-col>\n        <tree-col size='4'>Row 1 Col 3</tree-col>\n      </tree-row>\n      <tree-row>\n        <tree-col size='4'><b>Row 2 Col 1</b></tree-col>\n        <tree-col size='8'>Row 2 Col 2</tree-col>\n      </tree-row>\n  </tree-table>\n  <tree-table striped>\n    <tree-row backgroundColor='primary'>\n      <tree-col> \n        <b>Head 1</b>\n      </tree-col>\n      <tree-col> \n        <b>Head 2</b>\n      </tree-col>\n      <tree-col> \n        <b>Head 3</b>\n      </tree-col>\n    </tree-row>\n      <tree-row>\n        <tree-col size='4'>Row 1 Col 1</tree-col>\n        <tree-col size='4'>Row 1 Col 2</tree-col>\n        <tree-col size='4'>Row 1 Col 3</tree-col>\n      </tree-row>\n      <tree-row>\n        <tree-col size='4'>Row 2 Col 1</tree-col>\n        <tree-col size='4'>Row 2 Col 2</tree-col>\n        <tree-col size='4'>Row 2 Col 2</tree-col>\n      </tree-row>\n      <tree-row>\n        <tree-col size='4'>Row 3 Col 1</tree-col>\n        <tree-col size='4'>Row 3 Col 2</tree-col>\n        <tree-col size='4'>Row 3 Col 3</tree-col>\n      </tree-row>\n  </tree-table>\n  <hr>\n  <h1>Navigation/Navs</h1>\n\n  <tree-row>\n    <tree-col>\n      <h4>Horizontal navigation</h4>\n    </tree-col>\n  </tree-row>\n  <tree-nav>\n    <tree-nav-item active>Item 1</tree-nav-item>\n    <tree-nav-item>Item 2 </tree-nav-item>\n    <tree-nav-item disabled>Disabled</tree-nav-item>\n  </tree-nav>\n  \n  <tree-spacer size=3></tree-spacer>\n  <tree-row>\n    <tree-col>\n      <h4>Navigation alignment</h4>\n    </tree-col>\n  </tree-row>\n  <tree-nav slot='end'>\n    <tree-nav-item href='#'>Item 1</tree-nav-item>\n    <tree-nav-item href='#'>Item 2</tree-nav-item>\n    <tree-nav-item href='#' disabled>Disabled</tree-nav-item>\n  </tree-nav>\n\n  <tree-row>\n    <tree-col>\n      <h4>Vertical navigation</h4>\n    </tree-col>\n  </tree-row>\n  <tree-nav vertical='true'>\n    <tree-nav-item href='#'>Item 1</tree-nav-item>\n    <tree-nav-item href='#'>Item 2</tree-nav-item>\n    <tree-nav-item href='#' disabled>Disabled</tree-nav-item>\n  </tree-nav>\n\n  <tree-row>\n    <tree-col>\n      <h4>Dropdown</h4>\n    </tree-col>\n  </tree-row>\n  <tree-nav slot='end'>\n    <tree-nav-item >Item 1</tree-nav-item>\n    <tree-nav-item >Item 2</tree-nav-item>\n    <tree-nav-item dropdown >\n      Dropdown\n      <tree-dropdown-item>Item 1.1</tree-dropdown-item>\n      <tree-dropdown-item>Item 1.2</tree-dropdown-item>\n      <tree-dropdown-item>Item 1.3</tree-dropdown-item>\n    </tree-nav-item>\n  </tree-nav>\n  <hr>\n  <h1>Navigation/Navsbar</h1>\n  \n <tree-navbar shadow expand='lg'>\n   <tree-navbar-brand>Forest IO</tree-navbar-brand>\n   <tree-nav mr='auto' navbar>\n    <tree-nav-item>Item 1</tree-nav-item>\n    <tree-nav-item>Item 2</tree-nav-item>\n    <tree-nav-item>Item 3</tree-nav-item>\n   </tree-nav>\n    <form class=\"form-inline my-2 my-lg-0\">\n      <tree-text-field placeholder='Search' mr=1></tree-text-field>\n      <tree-button>Search</tree-button>\n    </form>\n </tree-navbar>\n  <tree-spacer size=3></tree-spacer>\n<tree-navbar  dark backgroundColor='dark'>\n   <tree-navbar-brand>Forest IO</tree-navbar-brand>\n   <tree-nav ml='auto' navbar>\n    <tree-nav-item>Item 1</tree-nav-item>\n    <tree-nav-item>Item 2</tree-nav-item>\n    <tree-nav-item>Item 3</tree-nav-item>\n   </tree-nav>\n </tree-navbar>\n",
        styles: ["div.color-display{height:60px;width:60px;border-radius:30px}div.radius-display{height:60px;width:60px}div.shadow-display{height:60px;width:60px;border-radius:30px}hr{margin-top:4rem;margin-bottom:1rem}"]
    })
], DesignGuideComponent);

let ContainerComponent = class ContainerComponent extends BaseComponent {
    constructor() {
        super();
        this.containerClass = 'container';
    }
    ngOnInit() {
        super.ngOnInit();
        if (this.backgroundColor) {
            this.cssClass += ' bg-' + this.backgroundColor;
        }
        if (this.size) {
            this.containerClass += '-' + this.size;
        }
    }
};
__decorate([
    Input()
], ContainerComponent.prototype, "backgroundColor", void 0);
__decorate([
    Input()
], ContainerComponent.prototype, "size", void 0);
ContainerComponent = __decorate([
    Component({
        selector: 'tree-container',
        template: "<div [class]=\"containerClass\">\n  <ng-content></ng-content>\n</div>\n",
        styles: [":host{display:block}"]
    })
], ContainerComponent);

let ForestModule = class ForestModule {
};
ForestModule = __decorate([
    NgModule({
        declarations: [
            SideMenuComponent,
            NavItemComponent,
            NavComponent,
            NavTitleComponent,
            RowComponent,
            ColComponent,
            CardComponent,
            CardTitleComponent,
            CardSubtitleComponent,
            SpacerComponent,
            BaseComponent,
            ButtonComponent,
            TableComponent,
            TableHeadComponent,
            TableBodyComponent,
            SliderComponent,
            SwitchComponent,
            CustomInputComponent,
            PaginationComponent,
            BadgeComponent,
            TooltipWindowComponent,
            TooltipDirective,
            ImageComponent,
            TextFieldComponent,
            SubmitButtonComponent,
            TextareaComponent,
            RadioButtonComponent,
            CheckboxComponent,
            DropdownItemComponent,
            SideMenuHeaderComponent,
            NavbarComponent,
            NavbarBrandComponent,
            DesignGuideComponent,
            ContainerComponent
        ],
        entryComponents: [TooltipWindowComponent],
        imports: [
            CommonModule,
            FormsModule,
            RouterModule
        ],
        exports: [
            SideMenuComponent,
            NavItemComponent,
            NavComponent,
            NavTitleComponent,
            RowComponent,
            ColComponent,
            CardComponent,
            CardTitleComponent,
            CardSubtitleComponent,
            SpacerComponent,
            ButtonComponent,
            TableComponent,
            TableHeadComponent,
            TableBodyComponent,
            SliderComponent,
            SwitchComponent,
            PaginationComponent,
            BadgeComponent,
            TooltipWindowComponent,
            TooltipDirective,
            ImageComponent,
            TextFieldComponent,
            SubmitButtonComponent,
            TextareaComponent,
            RadioButtonComponent,
            CheckboxComponent,
            DropdownItemComponent,
            NavbarComponent,
            NavbarBrandComponent,
            DesignGuideComponent,
            ContainerComponent,
        ]
    })
], ForestModule);

/*
 * Public API Surface of forest
 */

/**
 * Generated bundle index. Do not edit.
 */

export { BadgeComponent, ButtonComponent, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CardComponent, CardSubtitleComponent, CardTitleComponent, CheckboxComponent, ColComponent, ContainerComponent, CustomInputComponent, DesignGuideComponent, DropdownItemComponent, ForestModule, ImageComponent, NavComponent, NavItemComponent, NavTitleComponent, NavbarBrandComponent, NavbarComponent, PaginationComponent, RadioButtonComponent, RowComponent, SideMenuComponent, SideMenuHeaderComponent, SliderComponent, SpacerComponent, SubmitButtonComponent, SwitchComponent, TableBodyComponent, TableComponent, TableHeadComponent, TextFieldComponent, TextareaComponent, TooltipConfig, TooltipDirective, TooltipWindowComponent, ɵ0$1 as ɵ0, BaseInputs as ɵa, BaseComponent as ɵb };
//# sourceMappingURL=dotline-forest.js.map
