@js-sugar/angular-bootstrap/fesm2020/js-sugar-angular-bootstrap.mjs

JS-Sugar Bootstrap components for Angular

import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output, HostListener, NgModule, Component, ContentChild, ElementRef, Optional, Inject, HostBinding, ContentChildren } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1$1 from '@angular/forms';
import { FormControl, NgControl } from '@angular/forms';
import { Locale, LOCALE } from '@js-sugar/angular';

class ButtonDirective {
    constructor(_element, _renderer) {
        this._element = _element;
        this._renderer = _renderer;
        this._disabled = false;
        this.size = 'default';
        this.kind = 'primary';
        this.safeClick = new EventEmitter();
    }
    get disabled() { return this._disabled; }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
    }
    ngOnInit() {
        this._renderer.addClass(this._element.nativeElement, 'btn');
    }
    _onClick(e) {
        if (!this.disabled) {
            this.safeClick.emit(e);
        }
    }
}
ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: ButtonDirective, selector: "button[jssButton], a[jssButton], input[jssButton]", inputs: { size: "size", kind: "kind" }, outputs: { safeClick: "safeClick" }, host: { listeners: { "click": "_onClick($event)" }, properties: { "class.disabled": "disabled", "class.btn-primary": "!outline && kind==\"primary\"", "class.btn-secondary": "!outline && kind==\"secondary\"", "class.btn-success": "!outline && kind==\"success\"", "class.btn-danger": "!outline && kind==\"danger\"", "class.btn-warning": "!outline && kind==\"warning\"", "class.btn-info": "!outline && kind==\"info\"", "class.btn-light": "!outline && kind==\"light\"", "class.btn-dark": "!outline && kind==\"dark\"", "class.btn-link": "kind==\"link\"", "class.btn-outline-primary": "outline && kind==\"primary\"", "class.btn-outline-secondary": "outline && kind==\"secondary\"", "class.btn-outline-success": "outline && kind==\"success\"", "class.btn-outline-danger": "outline && kind==\"danger\"", "class.btn-outline-warning": "outline && kind==\"warning\"", "class.btn-outline-info": "outline && kind==\"info\"", "class.btn-outline-light": "outline && kind==\"light\"", "class.btn-outline-dark": "outline && kind==\"dark\"", "class.btn-sm": "size==\"small\"", "class.btn-lg": "size==\"large\"", "prop.disabled": "disabled", "attr.aria-disabled": "disabled", "attr.tabindex": "disabled ? \"-1\" : \"\" " } }, exportAs: ["jssButton"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'button[jssButton], a[jssButton], input[jssButton]',
                    exportAs: 'jssButton',
                    host: {
                        '[class.disabled]': 'disabled',
                        '[class.btn-primary]': '!outline && kind=="primary"',
                        '[class.btn-secondary]': '!outline && kind=="secondary"',
                        '[class.btn-success]': '!outline && kind=="success"',
                        '[class.btn-danger]': '!outline && kind=="danger"',
                        '[class.btn-warning]': '!outline && kind=="warning"',
                        '[class.btn-info]': '!outline && kind=="info"',
                        '[class.btn-light]': '!outline && kind=="light"',
                        '[class.btn-dark]': '!outline && kind=="dark"',
                        '[class.btn-link]': 'kind=="link"',
                        '[class.btn-outline-primary]': 'outline && kind=="primary"',
                        '[class.btn-outline-secondary]': 'outline && kind=="secondary"',
                        '[class.btn-outline-success]': 'outline && kind=="success"',
                        '[class.btn-outline-danger]': 'outline && kind=="danger"',
                        '[class.btn-outline-warning]': 'outline && kind=="warning"',
                        '[class.btn-outline-info]': 'outline && kind=="info"',
                        '[class.btn-outline-light]': 'outline && kind=="light"',
                        '[class.btn-outline-dark]': 'outline && kind=="dark"',
                        '[class.btn-sm]': 'size=="small"',
                        '[class.btn-lg]': 'size=="large"',
                        '[prop.disabled]': 'disabled',
                        '[attr.aria-disabled]': 'disabled',
                        '[attr.tabindex]': 'disabled ? "-1" : "" ',
                    }
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { size: [{
                type: Input
            }], kind: [{
                type: Input
            }], safeClick: [{
                type: Output
            }], _onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class ButtonModule {
}
ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective], exports: [ButtonDirective] });
ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ButtonModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ButtonDirective,
                    ],
                    exports: [
                        ButtonDirective,
                    ]
                }]
        }] });

class CardFooterDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
CardFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardFooterDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
CardFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: CardFooterDirective, selector: "[jssCardFooter]", exportAs: ["jssCardFooter"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardFooterDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[jssCardFooter]',
                    exportAs: 'jssCardFooter',
                }]
        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

class CardHeaderDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
}
CardHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardHeaderDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
CardHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: CardHeaderDirective, selector: "[jssCardHeader]", exportAs: ["jssCardHeader"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardHeaderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[jssCardHeader]',
                    exportAs: 'jssCardHeader',
                }]
        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

class CardComponent {
    constructor(_element, _renderer) {
        this._element = _element;
        this._renderer = _renderer;
    }
    ngOnInit() {
        this._renderer.addClass(this._element.nativeElement, 'card');
    }
}
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: CardComponent, selector: "jss-card", queries: [{ propertyName: "_header", first: true, predicate: CardHeaderDirective, descendants: true }, { propertyName: "_footer", first: true, predicate: CardFooterDirective, descendants: true }], exportAs: ["jssCard"], ngImport: i0, template: "<div *ngIf=\"_header\" class=\"card-header\">\r\n    <ng-container [ngTemplateOutlet]=\"_header.templateRef\"></ng-container>\r\n</div>\r\n\r\n<div class=\"card-body\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div *ngIf=\"_footer\" class=\"card-footer\">\r\n    <ng-container [ngTemplateOutlet]=\"_footer.templateRef\"></ng-container>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'jss-card', exportAs: 'jssCard', template: "<div *ngIf=\"_header\" class=\"card-header\">\r\n    <ng-container [ngTemplateOutlet]=\"_header.templateRef\"></ng-container>\r\n</div>\r\n\r\n<div class=\"card-body\">\r\n    <ng-content></ng-content>\r\n</div>\r\n\r\n<div *ngIf=\"_footer\" class=\"card-footer\">\r\n    <ng-container [ngTemplateOutlet]=\"_footer.templateRef\"></ng-container>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _header: [{
                type: ContentChild,
                args: [CardHeaderDirective]
            }], _footer: [{
                type: ContentChild,
                args: [CardFooterDirective]
            }] } });

const DECLARES$1 = [
    CardComponent,
    CardFooterDirective,
    CardHeaderDirective
];
class CardModule {
}
CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: CardModule, declarations: [CardComponent,
        CardFooterDirective,
        CardHeaderDirective], imports: [CommonModule], exports: [CardComponent,
        CardFooterDirective,
        CardHeaderDirective] });
CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CardModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule
                    ],
                    declarations: DECLARES$1,
                    exports: DECLARES$1
                }]
        }] });

class FormFieldComponent {
    constructor(_renderer, _form, _localSpecifier) {
        this._renderer = _renderer;
        this._form = _form;
        this._localSpecifier = _localSpecifier;
        this.showErrors = true;
        this.showRequiredMarker = true;
        this.showSubscripts = true;
        this._isRequired = false;
    }
    get firstLocalizedError() { return this._firstLocalizedError; }
    get localizedErrors() { return this._localizedErrors; }
    get touched() { return this._ngControl.touched; }
    get dirty() { return this._ngControl.dirty; }
    get isRequired() { return this._isRequired; }
    _onFocusOut() { this._validate(); }
    ngOnInit() {
        if (!this._ngControl) {
            throw Error('FormFieldComponent requires a NgControl');
        }
        if (this._localSpecifier) {
            if (this._localSpecifier instanceof Locale) {
                this._locale = this._localSpecifier;
            }
            else {
                this._locale = this._localSpecifier.get();
                this._localeChangeSubscription = this._localSpecifier.change.subscribe(e => this._locale = e.newLocale);
            }
        }
    }
    ngAfterContentInit() {
        this._isRequired = this._isRequiredField();
        this._statusChangeSubscription = this._ngControl.statusChanges.subscribe(change => {
            if (this.dirty || this.touched) {
                this._validate();
            }
        });
    }
    _validate() {
        const invalid = this._ngControl.status === 'INVALID';
        if (invalid && this._locale) {
            this._localizedErrors = this._locale.translateErrors(this._ngControl.errors);
            const firstKey = Object.keys(this._localizedErrors)[0];
            this._firstLocalizedError = this._localizedErrors[firstKey];
        }
        else {
            this._localizedErrors = this._firstLocalizedError = undefined;
        }
        this._renderer.addClass(this._ngControlElement.nativeElement, invalid ? 'is-invalid' : 'is-valid');
        this._renderer.removeClass(this._ngControlElement.nativeElement, invalid ? 'is-valid' : 'is-invalid');
    }
    _isRequiredField() {
        const validator = this._ngControl?.validator;
        const errors = validator && validator(new FormControl(null));
        return errors != null && errors['required'] === true;
    }
    ngOnDestroy() {
        this._localeChangeSubscription?.unsubscribe();
        this._statusChangeSubscription?.unsubscribe();
    }
}
FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1$1.NgForm, optional: true }, { token: LOCALE, optional: true }], target: i0.ɵɵFactoryTarget.Component });
FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: FormFieldComponent, selector: "jss-form-field, jss-field, jssb-form-field, jssb-field", inputs: { label: "label", hint: "hint", showErrors: "showErrors", showRequiredMarker: "showRequiredMarker", showSubscripts: "showSubscripts" }, host: { listeners: { "focusout": "_onFocusOut()" }, properties: { "class.jss-required-form-field": "this.isRequired" } }, queries: [{ propertyName: "_ngControl", first: true, predicate: NgControl, descendants: true, static: true }, { propertyName: "_ngControlElement", first: true, predicate: NgControl, descendants: true, read: ElementRef, static: true }], exportAs: ["jssFormField"], ngImport: i0, template: "<label *ngIf=\"label\" class=\"jss-form-field-label\">\r\n  {{label}}\r\n  <span *ngIf=\"isRequired && showRequiredMarker\" class=\"jss-form-field-required-marker\">*</span>\r\n</label>\r\n\r\n<div class=\"input-group\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<small *ngIf=\"showSubscripts\" class=\"jss-form-field-subscript\">\r\n  <span *ngIf=\"showErrors && firstLocalizedError && (touched || dirty); else hintTemplate\" class=\"jss-form-field-error text-danger\">\r\n    {{firstLocalizedError.text}}\r\n  </span>\r\n  <ng-template #hintTemplate>\r\n    <span *ngIf=\"hint\" class=\"jss-form-field-hint\">{{hint}}</span>\r\n  </ng-template>\r\n</small>\r\n", styles: [":host{display:block}.jss-form-field-subscript{display:block;height:1.5em;line-height:1.5em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'jss-form-field, jss-field, jssb-form-field, jssb-field', exportAs: 'jssFormField', template: "<label *ngIf=\"label\" class=\"jss-form-field-label\">\r\n  {{label}}\r\n  <span *ngIf=\"isRequired && showRequiredMarker\" class=\"jss-form-field-required-marker\">*</span>\r\n</label>\r\n\r\n<div class=\"input-group\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<small *ngIf=\"showSubscripts\" class=\"jss-form-field-subscript\">\r\n  <span *ngIf=\"showErrors && firstLocalizedError && (touched || dirty); else hintTemplate\" class=\"jss-form-field-error text-danger\">\r\n    {{firstLocalizedError.text}}\r\n  </span>\r\n  <ng-template #hintTemplate>\r\n    <span *ngIf=\"hint\" class=\"jss-form-field-hint\">{{hint}}</span>\r\n  </ng-template>\r\n</small>\r\n", styles: [":host{display:block}.jss-form-field-subscript{display:block;height:1.5em;line-height:1.5em}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1$1.NgForm, decorators: [{
                    type: Optional
                }] }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [LOCALE]
                }] }]; }, propDecorators: { label: [{
                type: Input
            }], hint: [{
                type: Input
            }], showErrors: [{
                type: Input
            }], showRequiredMarker: [{
                type: Input
            }], showSubscripts: [{
                type: Input
            }], _ngControl: [{
                type: ContentChild,
                args: [NgControl, { static: true }]
            }], _ngControlElement: [{
                type: ContentChild,
                args: [NgControl, { static: true, read: ElementRef }]
            }], isRequired: [{
                type: HostBinding,
                args: ['class.jss-required-form-field']
            }], _onFocusOut: [{
                type: HostListener,
                args: ['focusout']
            }] } });

class FormFieldModule {
}
FormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent], imports: [CommonModule], exports: [FormFieldComponent] });
FormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: FormFieldModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        FormFieldComponent,
                    ],
                    imports: [
                        CommonModule,
                    ],
                    exports: [
                        FormFieldComponent,
                    ]
                }]
        }] });

class TabDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
        this.disabled = false;
    }
}
TabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
TabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: TabDirective, selector: "[jssTab]", inputs: { title: "title", disabled: "disabled" }, exportAs: ["jssTab"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[jssTab]',
                    exportAs: 'jssTab'
                }]
        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { title: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

class TabsComponent {
    constructor(_element, _renderer) {
        this._element = _element;
        this._renderer = _renderer;
        this.selectedIndex = 0;
        this.disabled = false;
        this.fade = true;
        this.appearance = 'default';
        this.vertical = false;
        this.tabSelect = new EventEmitter();
    }
    ngOnInit() {
        ['jss-tabs'].forEach(x => this._renderer.addClass(this._element.nativeElement, x));
    }
    _onTabClick(tab, index) {
        if (tab.disabled || this.disabled) {
            return;
        }
        this.selectedIndex = index;
        this.tabSelect.emit({ index, tab });
    }
}
TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: TabsComponent, selector: "jss-tabs", inputs: { selectedIndex: "selectedIndex", disabled: "disabled", fade: "fade", appearance: "appearance", vertical: "vertical", contentCssClass: "contentCssClass" }, outputs: { tabSelect: "tabSelect" }, host: { properties: { "class.jss-tabs-vertical": "vertical" } }, queries: [{ propertyName: "tabs", predicate: TabDirective }], exportAs: ["jssTabs"], ngImport: i0, template: "<ul class=\"nav\"\r\n    [class.nav-tabs]=\"appearance==='default' && !vertical\"\r\n    [class.nav-pills]=\"appearance==='pill' && !vertical\"\r\n    [class.flex-column]=\"vertical\"\r\n    role=\"tablist\">\r\n\r\n    <li *ngFor=\"let tab of tabs; index as i\" class=\"nav-item\" (click)=\"_onTabClick(tab, i)\">\r\n        <button *ngIf=\"!vertical\"\r\n                class=\"nav-link\"\r\n                [class.disabled]=\"tab.disabled || disabled\"\r\n                [class.active]=\"i===selectedIndex\"\r\n                role=\"tab\">\r\n            {{tab.title}}\r\n        </button>\r\n\r\n        <a *ngIf=\"vertical\"\r\n           class=\"nav-link\"\r\n           aria-current=\"page\">\r\n            {{tab.title}}\r\n        </a>\r\n    </li>\r\n</ul>\r\n\r\n<div class=\"\" [className]=\"'tab-content ' + (contentCssClass ? contentCssClass : '')\">\r\n    <div *ngFor=\"let tab of tabs; index as i\" class=\"tab-pane\" [class.fade]=\"fade\"\r\n         [class.show]=\"i===selectedIndex\" [class.active]=\"i===selectedIndex\" role=\"tabpanel\">\r\n        <ng-container *ngTemplateOutlet=\"tab.templateRef;\"></ng-container>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}:host.jss-tabs-vertical{flex-direction:row}:host.jss-tabs-vertical .tab-content{flex-grow:1}a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'jss-tabs', exportAs: 'jssTabs', host: {
                        '[class.jss-tabs-vertical]': 'vertical',
                    }, template: "<ul class=\"nav\"\r\n    [class.nav-tabs]=\"appearance==='default' && !vertical\"\r\n    [class.nav-pills]=\"appearance==='pill' && !vertical\"\r\n    [class.flex-column]=\"vertical\"\r\n    role=\"tablist\">\r\n\r\n    <li *ngFor=\"let tab of tabs; index as i\" class=\"nav-item\" (click)=\"_onTabClick(tab, i)\">\r\n        <button *ngIf=\"!vertical\"\r\n                class=\"nav-link\"\r\n                [class.disabled]=\"tab.disabled || disabled\"\r\n                [class.active]=\"i===selectedIndex\"\r\n                role=\"tab\">\r\n            {{tab.title}}\r\n        </button>\r\n\r\n        <a *ngIf=\"vertical\"\r\n           class=\"nav-link\"\r\n           aria-current=\"page\">\r\n            {{tab.title}}\r\n        </a>\r\n    </li>\r\n</ul>\r\n\r\n<div class=\"\" [className]=\"'tab-content ' + (contentCssClass ? contentCssClass : '')\">\r\n    <div *ngFor=\"let tab of tabs; index as i\" class=\"tab-pane\" [class.fade]=\"fade\"\r\n         [class.show]=\"i===selectedIndex\" [class.active]=\"i===selectedIndex\" role=\"tabpanel\">\r\n        <ng-container *ngTemplateOutlet=\"tab.templateRef;\"></ng-container>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:column}:host.jss-tabs-vertical{flex-direction:row}:host.jss-tabs-vertical .tab-content{flex-grow:1}a{cursor:pointer}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tabs: [{
                type: ContentChildren,
                args: [TabDirective]
            }], selectedIndex: [{
                type: Input
            }], disabled: [{
                type: Input
            }], fade: [{
                type: Input
            }], appearance: [{
                type: Input
            }], vertical: [{
                type: Input
            }], contentCssClass: [{
                type: Input
            }], tabSelect: [{
                type: Output
            }] } });

const DECLARES = [
    TabsComponent,
    TabDirective
];
class TabsModule {
}
TabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: TabsModule, declarations: [TabsComponent,
        TabDirective], imports: [CommonModule], exports: [TabsComponent,
        TabDirective] });
TabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabsModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: TabsModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                    ],
                    declarations: DECLARES,
                    exports: DECLARES
                }]
        }] });

export { ButtonDirective, ButtonModule, CardComponent, CardFooterDirective, CardHeaderDirective, CardModule, FormFieldComponent, FormFieldModule, TabDirective, TabsComponent, TabsModule };
//# sourceMappingURL=js-sugar-angular-bootstrap.mjs.map