sb-element/fesm2020/sb-element.mjs

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]

import * as i0 from '@angular/core';
import { Directive, Input, HostListener, EventEmitter, Injectable, Inject, NgModule, Optional, SkipSelf, Component, ViewEncapsulation, HostBinding, Attribute, Output, ElementRef, ViewChild } from '@angular/core';
import * as i4 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import { BehaviorSubject } from 'rxjs';
import * as fns from 'date-fns';
import * as i2 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

class SbTriggerDirective {
    constructor() {
        this.delay = 0;
    }
    trigger() {
        let timeout = setTimeout(() => {
            this.triggerable.trigger();
            clearTimeout(timeout);
        }, this.delay);
    }
}
SbTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
SbTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: SbTriggerDirective, selector: "[sbElTrigger]", inputs: { triggerable: "triggerable", delay: "delay" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sbElTrigger]'
                }]
        }], propDecorators: { triggerable: [{
                type: Input
            }], delay: [{
                type: Input
            }] } });

class SbClickTriggerDirective extends SbTriggerDirective {
    handleClick(event) {
        event.stopPropagation();
        this.trigger();
    }
}
SbClickTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbClickTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
SbClickTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: SbClickTriggerDirective, selector: "[sbElClickTrigger]", host: { listeners: { "click": "handleClick($event)" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbClickTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sbElClickTrigger]'
                }]
        }], propDecorators: { handleClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }] } });

class SbClickOutsideTriggerDirective extends SbClickTriggerDirective {
    handleDocumentClick(event) {
        let popperBBox = this.triggerable.getPopperRef().nativeElement.getBoundingClientRect();
        if (!this.isMouseoverBoundingRect(event, popperBBox) && this.triggerable.isPopped()) {
            this.trigger();
        }
    }
    isMouseoverBoundingRect(event, boundingRect) {
        let mouseX = event.clientX;
        let mouseY = event.clientY;
        let xInBounds = mouseX >= boundingRect.left && mouseX <= boundingRect.right;
        let yInBounds = mouseY >= boundingRect.top && mouseY <= boundingRect.bottom;
        return xInBounds && yInBounds;
    }
}
SbClickOutsideTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbClickOutsideTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
SbClickOutsideTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: SbClickOutsideTriggerDirective, selector: "[sbElClickOutsideTrigger]", inputs: { triggerable: "triggerable" }, host: { listeners: { "document: click": "handleDocumentClick($event)" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbClickOutsideTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sbElClickOutsideTrigger]'
                }]
        }], propDecorators: { triggerable: [{
                type: Input
            }], handleDocumentClick: [{
                type: HostListener,
                args: ['document: click', ['$event']]
            }] } });

class SbHoverTriggerDirective extends SbTriggerDirective {
    handleMouseEnter(event) {
        this.trigger();
    }
    handleMouseLeave(event) {
        this.trigger();
    }
}
SbHoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbHoverTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
SbHoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: SbHoverTriggerDirective, selector: "[sbElHoverTrigger]", host: { listeners: { "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbHoverTriggerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sbElHoverTrigger]'
                }]
        }], propDecorators: { handleMouseEnter: [{
                type: HostListener,
                args: ['mouseenter', ['$event']]
            }], handleMouseLeave: [{
                type: HostListener,
                args: ['mouseleave', ['$event']]
            }] } });

class SbAlignDirective {
    constructor(host) {
        this.host = host;
    }
    get nativeElement() {
        return this.host.nativeElement;
    }
    moveTo(x, y) {
        let hostBBox = this.nativeElement.getBoundingClientRect();
        let hostX = hostBBox.x;
        let hostY = hostBBox.y;
        this.moveBy(x - hostX, y - hostY);
    }
    moveBy(dx, dy) {
        this.translate(dx, dy);
    }
    translate(x, y) {
        this.nativeElement.style.transform = 'translate(' + x + 'px,' + y + 'px)';
    }
}
SbAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbAlignDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
SbAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: SbAlignDirective, selector: "[sbElAlign]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbAlignDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[sbElAlign]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });

function mixinClassName(core, className) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this._className = className;
            this._elementRef.nativeElement.classList.add(className);
        }
        get className() {
            return this._className;
        }
    };
}

var Size;
(function (Size) {
    Size["EXTRA_SMALL"] = "xs";
    Size["SMALL"] = "s";
    Size["MEDIUM"] = "m";
    Size["LARGE"] = "l";
    Size["EXTRA_LARGE"] = "xl";
    Size["EXTRA_EXTRA_LARGE"] = "xxl";
})(Size || (Size = {}));
function mixinSize(core, defaultSize) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this.defaultSize = defaultSize;
            this.size = defaultSize;
        }
        get size() {
            return this._size;
        }
        set size(value) {
            const size = value || this.defaultSize;
            if (size !== this._size) {
                if (this._size) {
                    this._elementRef.nativeElement.classList.remove(`sb--${this._size}`);
                }
                if (size) {
                    this._elementRef.nativeElement.classList.add(`sb--${size}`);
                }
                this._size = size;
            }
        }
    };
}

var Color;
(function (Color) {
    Color["PRIMARY"] = "primary";
    Color["SECONDARY"] = "secondary";
    Color["SUCCESS"] = "success";
    Color["WARN"] = "warn";
    Color["INFO"] = "info";
})(Color || (Color = {}));
function mixinColor(core, defaultColor) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this.defaultColor = defaultColor;
            this.color = defaultColor;
        }
        get color() {
            return this._color;
        }
        set color(value) {
            const color = value || this.defaultColor;
            if (color !== this._color) {
                if (this._color) {
                    this._elementRef.nativeElement.classList.remove(`sb--${this._color}`);
                }
                if (color) {
                    this._elementRef.nativeElement.classList.add(`sb--${color}`);
                }
                this._color = color;
            }
        }
    };
}

function mixinDisable(core) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this._disabled = false;
        }
        get disabled() {
            return this._disabled;
        }
        set disabled(isDisabled) {
            this._disabled = isDisabled;
        }
        setDisabledState(isDisabled) {
            this.disabled = isDisabled;
        }
    };
}

function mixinTabindex(core, defaultTabindex) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this.defaultTabindex = defaultTabindex;
            this.tabindex = defaultTabindex;
        }
        get tabindex() {
            return this._tabindex;
        }
        set tabindex(value) {
            const tabindex = value || this.defaultTabindex;
            if (tabindex !== undefined && tabindex !== this._tabindex) {
                this._elementRef.nativeElement.tabIndex = tabindex;
            }
            this._tabindex = tabindex;
        }
    };
}

function mixinFocus(core) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this._focused = false;
            this.focus = new EventEmitter();
            this.blur = new EventEmitter();
        }
        get focused() {
            return this._focused;
        }
        set focused(isFocused) {
            if (isFocused !== this._focused) {
                if (isFocused) {
                    this.emitFocus();
                }
                else {
                    this.emitBlur();
                }
            }
            this._focused = isFocused;
        }
        setFocusedState(isFocused) {
            this.focused = isFocused;
        }
        emitFocus() {
            this.onFocus();
            this.focus.emit();
        }
        emitBlur() {
            this.onBlur();
            this.blur.emit();
        }
        onFocus() { }
        ;
        onBlur() { }
        ;
    };
}

function mixinHide(core, defaultVisiblity) {
    return class extends core {
        constructor(...args) {
            super(...args);
            this.showStart = new EventEmitter();
            this.showEnd = new EventEmitter();
            this.hideStart = new EventEmitter();
            this.hideEnd = new EventEmitter();
            this.defaultVisiblity = defaultVisiblity;
            this.visible = defaultVisiblity || false;
        }
        get visible() {
            return this._visible || false;
        }
        set visible(isVisible) {
            if (isVisible !== this._visible) {
                if (isVisible)
                    this.showElement(this._visible);
                else
                    this.hideElement(this._visible);
                this._visible = isVisible;
            }
        }
        wait(time) {
            return new Promise(resolve => {
                setTimeout(() => resolve(), time);
            });
        }
        async showElement(wasVisible) {
            this._elementRef.nativeElement.classList.remove(`sb--hidden`);
            if (wasVisible !== undefined) {
                this._elementRef.nativeElement.classList.add(`sb--visibly-hidden`);
                await this.wait(0);
                this._elementRef.nativeElement.classList.remove(`sb--visibly-hidden`);
            }
            this.emitShowStart();
            this._elementRef.nativeElement.classList.add(`sb--visible`);
            await this.wait(this.transitionDuration + 5);
            this.emitShowEnd();
        }
        async hideElement(wasVisible) {
            this._elementRef.nativeElement.classList.remove(`sb--visible`);
            this.emitHideStart();
            if (wasVisible !== undefined) {
                this._elementRef.nativeElement.classList.add(`sb--visibly-hidden`);
                await this.wait(this.transitionDuration + 5);
                this._elementRef.nativeElement.classList.remove(`sb--visibly-hidden`);
            }
            if (wasVisible == undefined || this._visible == false) {
                this._elementRef.nativeElement.classList.add(`sb--hidden`);
                this.emitHideEnd();
            }
        }
        get transitionDuration() {
            if (!this.transitionElement)
                return 0;
            let { transitionDuration, transitionDelay } = window.getComputedStyle(this.transitionElement.nativeElement);
            const floatTransitionDuration = parseFloat(transitionDuration);
            const floatTransitionDelay = parseFloat(transitionDelay);
            if (!floatTransitionDuration && !floatTransitionDelay)
                return 0;
            transitionDuration = transitionDuration.split(',')[0];
            transitionDelay = transitionDelay.split(',')[0];
            return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * 1000;
        }
        setVisibleState(isVisible) {
            this.visible = isVisible;
        }
        emitShowStart() {
            this.onShowStart();
            this.showStart.emit();
        }
        emitShowEnd() {
            this.onShowEnd();
            this.showEnd.emit();
        }
        emitHideStart() {
            this.onHideStart();
            this.hideStart.emit();
        }
        emitHideEnd() {
            this.onHideEnd();
            this.hideEnd.emit();
        }
        onShowStart() { }
        ;
        onShowEnd() { }
        ;
        onHideStart() { }
        ;
        onHideEnd() { }
        ;
    };
}

class ThemesConfig extends Array {
}
class SbThemeService extends BehaviorSubject {
    constructor(themesConfig, document) {
        super('dark');
        this.themesConfig = themesConfig;
        this.document = document;
        this.createNewLinkElement(themesConfig[0]);
    }
    findThemeByName(themeName) {
        return (themeConfig) => {
            return themeName == themeConfig.name;
        };
    }
    commit(themeName) {
        const themeConfig = this.themesConfig.find(this.findThemeByName(themeName));
        if (themeConfig) {
            this.updateLinkElement(themeConfig);
            this.next(this._themeConfig.name);
        }
        else
            throw new Error(`Theme ${themeName} does not exist!`);
    }
    get() { return this._themeConfig.name; }
    createNewLinkElement(themeConfig) {
        this.createLinkElement(themeConfig);
        this._themeConfig = themeConfig;
    }
    updateLinkElement(themeConfig) {
        this.removeLinkElement(this._themeConfig);
        this.createNewLinkElement(themeConfig);
    }
    createLinkElement(themeConfig) {
        const link = this.document.createElement('link');
        link.id = `sb-theme-${themeConfig.name}`;
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', themeConfig.href);
        this.document.head.appendChild(link);
    }
    removeLinkElement(themeConfig) {
        const link = this.document.getElementById(`sb-theme-${themeConfig.name}`);
        if (link) {
            this.document.head.removeChild(link);
        }
    }
}
SbThemeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbThemeService, deps: [{ token: ThemesConfig }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
SbThemeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbThemeService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbThemeService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return [{ type: ThemesConfig, decorators: [{
                    type: Inject,
                    args: [ThemesConfig]
                }] }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }]; } });

class SbStyleModule {
    constructor(parentModule) {
        if (parentModule) {
            throw new Error('StyleModule is already loaded. Import it in the AppModule only');
        }
    }
    static forRoot(themesConfig) {
        return {
            ngModule: SbStyleModule,
            providers: [
                { provide: ThemesConfig, useValue: themesConfig }
            ]
        };
    }
}
SbStyleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbStyleModule, deps: [{ token: SbStyleModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
SbStyleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbStyleModule, imports: [CommonModule] });
SbStyleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbStyleModule, imports: [[
            CommonModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbStyleModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [],
                    imports: [
                        CommonModule
                    ]
                }]
        }], ctorParameters: function () { return [{ type: SbStyleModule, decorators: [{
                    type: Optional
                }, {
                    type: SkipSelf
                }] }]; } });

class SbCoreModule {
}
SbCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SbCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCoreModule, declarations: [SbTriggerDirective,
        SbClickOutsideTriggerDirective,
        SbClickTriggerDirective,
        SbHoverTriggerDirective,
        SbAlignDirective], imports: [CommonModule], exports: [SbTriggerDirective,
        SbClickOutsideTriggerDirective,
        SbClickTriggerDirective,
        SbHoverTriggerDirective,
        SbAlignDirective,
        SbStyleModule] });
SbCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCoreModule, imports: [[
            CommonModule
        ], SbStyleModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCoreModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        SbTriggerDirective,
                        SbClickOutsideTriggerDirective,
                        SbClickTriggerDirective,
                        SbHoverTriggerDirective,
                        SbAlignDirective,
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        SbTriggerDirective,
                        SbClickOutsideTriggerDirective,
                        SbClickTriggerDirective,
                        SbHoverTriggerDirective,
                        SbAlignDirective,
                        SbStyleModule
                    ]
                }]
        }] });

const SbBarCore = mixinSize(mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-bar')), Size.MEDIUM);
class SbBarComponent extends SbBarCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.side = 'left';
    }
}
SbBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbBarComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbBarComponent, selector: "sb-bar", inputs: { size: "size", color: "color", side: "side" }, host: { properties: { "class": "this.side" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-bar', encapsulation: ViewEncapsulation.None, inputs: [
                        'size',
                        'color'
                    ], template: "<ng-content></ng-content>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }]; }, propDecorators: { side: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class']
            }] } });

const SbNavBarCore = mixinClassName(class {
    constructor(_elementRef) {
        this._elementRef = _elementRef;
    }
}, 'sb-nav-bar');
class SbNavBarComponent extends SbNavBarCore {
    constructor(elementRef) {
        super(elementRef);
    }
}
SbNavBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbNavBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
SbNavBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbNavBarComponent, selector: "sb-nav-bar", usesInheritance: true, ngImport: i0, template: "<sb-bar side=\"top\">\n  <div [ngClass]=\"className + '__left'\">\n    <ng-content select=\"[left]\"></ng-content>\n  </div>\n  <div [ngClass]=\"className + '__right'\">\n    <ng-content select=\"[right]\"></ng-content>\n  </div>\n</sb-bar>\n", components: [{ type: SbBarComponent, selector: "sb-bar", inputs: ["size", "color", "side"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbNavBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-nav-bar', encapsulation: ViewEncapsulation.None, template: "<sb-bar side=\"top\">\n  <div [ngClass]=\"className + '__left'\">\n    <ng-content select=\"[left]\"></ng-content>\n  </div>\n  <div [ngClass]=\"className + '__right'\">\n    <ng-content select=\"[right]\"></ng-content>\n  </div>\n</sb-bar>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });

const SbSidebarCore = mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-sidebar');
class SbSidebarComponent extends SbSidebarCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.size = Size.MEDIUM;
        this.side = 'left';
        this.visible = false;
    }
    trigger() {
        this.visible = !this.visible;
    }
    getSidebarOverlayClasses() {
        let classes = new Array();
        classes.push(this.className + '__overlay');
        if (this.visible) {
            classes.push('visible');
        }
        return classes;
    }
}
SbSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbSidebarComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbSidebarComponent, selector: "sb-sidebar", inputs: { size: "size", side: "side", visible: "visible" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"getSidebarOverlayClasses()\" (click)=\"trigger()\"></div>\n<sb-bar [side]=\"side\" [size]=\"size\" [ngClass]=\"{'visible': visible}\">\n  <ng-content select=\"[sidebar]\"></ng-content>\n</sb-bar>\n<ng-content select=\"[content]\"></ng-content>\n", components: [{ type: SbBarComponent, selector: "sb-bar", inputs: ["size", "color", "side"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbSidebarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-sidebar', encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"getSidebarOverlayClasses()\" (click)=\"trigger()\"></div>\n<sb-bar [side]=\"side\" [size]=\"size\" [ngClass]=\"{'visible': visible}\">\n  <ng-content select=\"[sidebar]\"></ng-content>\n</sb-bar>\n<ng-content select=\"[content]\"></ng-content>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }]; }, propDecorators: { size: [{
                type: Input
            }], side: [{
                type: Input
            }], visible: [{
                type: Input
            }] } });

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

const SbIconCore = mixinSize(mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-icon')));
class SbIconComponent extends SbIconCore {
    constructor(elementRef, themeService, outline) {
        super(elementRef, themeService);
        this.icon = '';
        this.outline = false;
        if (outline == '')
            this.isOutline = true;
    }
    set isOutline(isOutline) {
        this.outline = isOutline;
    }
}
SbIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbIconComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }, { token: 'outline', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
SbIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbIconComponent, selector: "sb-icon", inputs: { size: "size", color: "color", icon: "icon", isOutline: "isOutline" }, host: { properties: { "class.outline": "outline" } }, usesInheritance: true, ngImport: i0, template: "<ng-content *ngIf=\"icon == ''\"></ng-content>\n{{ icon }}\n", directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-icon', encapsulation: ViewEncapsulation.None, host: {
                        '[class.outline]': 'outline'
                    }, inputs: [
                        'size',
                        'color'
                    ], template: "<ng-content *ngIf=\"icon == ''\"></ng-content>\n{{ icon }}\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Attribute,
                    args: ['outline']
                }] }]; }, propDecorators: { icon: [{
                type: Input
            }], isOutline: [{
                type: Input
            }] } });

const SbBreadcrumbsCore = mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-breadcrumbs'), Color.PRIMARY);
class SbBreadcrumbsComponent extends SbBreadcrumbsCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.navigate = new EventEmitter();
        this._crumbs = new Array();
        this.homePlaceholder = '';
    }
    get crumbs() {
        return this._crumbs;
    }
    set url(url) {
        this._crumbs = url.split('/').reduce((crumbs, crumb, index) => {
            if (index == 0 || crumb != '')
                crumbs.push(crumb);
            return crumbs;
        }, new Array());
    }
    handleClick(crumbIndex) {
        this.navigate.emit(this.crumbs.slice(0, crumbIndex + 1).join('/'));
    }
}
SbBreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbBreadcrumbsComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbBreadcrumbsComponent, selector: "sb-breadcrumbs", inputs: { color: "color", homePlaceholder: "homePlaceholder", url: "url" }, outputs: { navigate: "navigate" }, usesInheritance: true, ngImport: i0, template: "<ng-template ngFor let-crumb let-index=\"index\" [ngForOf]=\"crumbs\">\n  <sb-icon *ngIf=\"index > 0\">&#xe5e1;</sb-icon>\n  <small [ngClass]=\"className + '__crumb'\" (click)=\"handleClick(index)\">\n    <ng-template [ngIf]=\"index > 0\" [ngIfElse]=\"home\">{{ crumb }}</ng-template>\n    <ng-template #home>{{ homePlaceholder }}</ng-template>\n  </small>\n</ng-template>\n", components: [{ type: SbIconComponent, selector: "sb-icon", inputs: ["size", "color", "icon", "isOutline"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbBreadcrumbsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-breadcrumbs', encapsulation: ViewEncapsulation.None, inputs: [
                        'color'
                    ], template: "<ng-template ngFor let-crumb let-index=\"index\" [ngForOf]=\"crumbs\">\n  <sb-icon *ngIf=\"index > 0\">&#xe5e1;</sb-icon>\n  <small [ngClass]=\"className + '__crumb'\" (click)=\"handleClick(index)\">\n    <ng-template [ngIf]=\"index > 0\" [ngIfElse]=\"home\">{{ crumb }}</ng-template>\n    <ng-template #home>{{ homePlaceholder }}</ng-template>\n  </small>\n</ng-template>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }]; }, propDecorators: { navigate: [{
                type: Output
            }], homePlaceholder: [{
                type: Input
            }], url: [{
                type: Input
            }] } });

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

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

class MarkedDates {
    constructor(dateOrStart, end) {
        this.start = dateOrStart;
        this.end = end;
    }
    get isRange() {
        if (this.start && this.end) {
            return this.start != this.end;
        }
        else
            return false;
    }
    get isRangeDays() {
        if (this.start && this.end) {
            if (this.start != this.end) {
                return !fns.isSameDay(this.start, this.end);
            }
            else
                return false;
        }
        else
            return false;
    }
    get isRangeMonths() {
        if (this.start && this.end) {
            if (this.start != this.end) {
                return !fns.isSameMonth(this.start, this.end);
            }
            else
                return false;
        }
        else
            return false;
    }
    get isRangeYears() {
        if (this.start && this.end) {
            if (this.start != this.end) {
                return !fns.isSameYear(this.start, this.end);
            }
            else
                return false;
        }
        else
            return false;
    }
    get start() { return this._start; }
    set start(start) { this._start = start; }
    get date() { return this._start; }
    set date(date) { this._start = date; }
    get end() { return this._end ? this._end : this._start; }
    set end(end) { this._end = end; }
    isStart(date) {
        if (this.start)
            return fns.isEqual(date, this.start);
        else
            return false;
    }
    isStartSameDay(date) {
        if (this.start)
            return fns.isSameDay(date, this.start);
        else
            return false;
    }
    isStartSameMonth(date) {
        if (this.start)
            return fns.isSameMonth(date, this.start);
        else
            return false;
    }
    isStartSameYear(date) {
        if (this.start)
            return fns.isSameYear(date, this.start);
        else
            return false;
    }
    isEnd(date) {
        if (this.end)
            return fns.isEqual(date, this.end);
        else
            return false;
    }
    isEndSameDay(date) {
        if (this.end)
            return fns.isSameDay(date, this.end);
        return false;
    }
    isEndSameMonth(date) {
        if (this.end)
            return fns.isSameMonth(date, this.end);
        else
            return false;
    }
    isEndSameYear(date) {
        if (this.end)
            return fns.isSameYear(date, this.end);
        else
            return false;
    }
    isBetween(date) {
        if (this.start && this.end) {
            if (fns.isEqual(this.start, this.end))
                return false;
            return fns.isAfter(date, this.start) && fns.isBefore(date, this.end);
        }
        else
            return false;
    }
    isBetweenDays(date) {
        if (this.start && this.end) {
            if (fns.isSameDay(this.start, this.end))
                return false;
            let dateStartOfDay = fns.startOfDay(date);
            let startStartOfDay = fns.startOfDay(this.start);
            let endStartOfDay = fns.startOfDay(this.end);
            return fns.isAfter(dateStartOfDay, startStartOfDay) &&
                fns.isBefore(dateStartOfDay, endStartOfDay);
        }
        else
            return false;
    }
    isBetweenMonths(date) {
        if (this.start && this.end) {
            if (fns.isSameMonth(this.start, this.end))
                return false;
            let dateStartOfMonth = fns.startOfMonth(date);
            let startStartOfMonth = fns.startOfMonth(this.start);
            let endStartOfMonth = fns.startOfMonth(this.end);
            return fns.isAfter(dateStartOfMonth, startStartOfMonth) &&
                fns.isBefore(dateStartOfMonth, endStartOfMonth);
        }
        else
            return false;
    }
    isBetweenYears(date) {
        if (this.start && this.end) {
            if (fns.isSameYear(this.start, this.end))
                return false;
            let dateStartOfMonth = fns.startOfYear(date);
            let startStartOfMonth = fns.startOfYear(this.start);
            let endStartOfMonth = fns.startOfYear(this.end);
            return fns.isAfter(dateStartOfMonth, startStartOfMonth) &&
                fns.isBefore(dateStartOfMonth, endStartOfMonth);
        }
        else
            return false;
    }
    sort() {
        if (this.isRange && this.start && this.end) {
            if (fns.isAfter(this.start, this.end)) {
                let startCopy = this.start;
                this.start = this.end;
                this.end = startCopy;
            }
        }
    }
}

const SbCalendarDateCore = mixinDisable(mixinTabindex(mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-calendar-date'), Color.PRIMARY), 0));
class SbCalendarDateComponent extends SbCalendarDateCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.select = new EventEmitter();
        this.markedDates = new MarkedDates();
    }
    get isMarked() {
        return this.markedDates.isRange && (this.markedDates.isBetweenDays(this.date) ||
            this.markedDates.isStartSameDay(this.date) ||
            this.markedDates.isEndSameDay(this.date)) ||
            !this.markedDates.isRange && (this.markedDates.isStartSameDay(this.date) &&
                this.markedDates.isEndSameDay(this.date));
    }
    get isStart() {
        return this.markedDates.isRangeDays && this.markedDates.isStartSameDay(this.date);
    }
    get isEnd() {
        return this.markedDates.isRangeDays && this.markedDates.isEndSameDay(this.date);
    }
    get isBetween() {
        return this.markedDates.isRangeDays && this.markedDates.isBetweenDays(this.date);
    }
    get isNotInMonth() {
        return !fns.isSameMonth(this.showingMonthStart, this.date);
    }
    get dateFormatted() {
        return fns.format(this.date, 'dd');
    }
    handleClick() {
        if (!this.disabled) {
            this.select.emit(this.date);
        }
    }
}
SbCalendarDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDateComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbCalendarDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbCalendarDateComponent, selector: "sb-calendar-date", inputs: { color: "color", disabled: "disabled", date: "date", markedDates: "markedDates", showingMonthStart: "showingMonthStart" }, outputs: { select: "select" }, host: { listeners: { "click": "handleClick()" }, properties: { "class.marked": "isMarked", "class.start": "isStart", "class.end": "isEnd", "class.between": "isBetween", "class.not-in-month": "isNotInMonth", "class.disabled": "disabled" } }, usesInheritance: true, ngImport: i0, template: "<span>{{ dateFormatted }}</span>\n<div class=\"mark\"></div>\n", encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-calendar-date', encapsulation: ViewEncapsulation.None, host: {
                        '[class.marked]': 'isMarked',
                        '[class.start]': 'isStart',
                        '[class.end]': 'isEnd',
                        '[class.between]': 'isBetween',
                        '[class.not-in-month]': 'isNotInMonth',
                        '[class.disabled]': 'disabled',
                        '(click)': 'handleClick()'
                    }, inputs: [
                        'color',
                        'disabled'
                    ], template: "<span>{{ dateFormatted }}</span>\n<div class=\"mark\"></div>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }]; }, propDecorators: { select: [{
                type: Output
            }], date: [{
                type: Input
            }], markedDates: [{
                type: Input
            }], showingMonthStart: [{
                type: Input
            }] } });

const SbCalendarDatesCore = mixinDisable(mixinFocus(mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-calendar-dates'), Color.PRIMARY)));
class SbCalendarDatesComponent extends SbCalendarDatesCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.weekDayFormat = 'EEEEEE';
        this.select = new EventEmitter();
        this.markedDates = new MarkedDates();
        this._showingMonthStart = fns.startOfMonth(new Date());
        this.weekDays = new Array();
        this.updateCalendarDates();
        this.createWeekDays();
    }
    handleSelect(date) {
        if (fns.isSameMonth(this.showingMonthStart, date)) {
            this.select.emit(date);
        }
    }
    set showingMonthStart(date) {
        this._showingMonthStart = fns.startOfMonth(date);
        this.updateCalendarDates();
    }
    get showingMonthStart() {
        return this._showingMonthStart;
    }
    createWeekDays() {
        let date = fns.setDay(new Date(), 1);
        for (let weekDay = 1; weekDay <= 7; weekDay++) {
            this.weekDays.push(fns.format(date, this.weekDayFormat));
            date = fns.addDays(date, 1);
        }
    }
    updateCalendarDates() {
        this.calendarDates = new Array();
        let calendarMonthStart = this.showingMonthStart;
        if (fns.isMonday(this.showingMonthStart)) {
            calendarMonthStart = fns.subWeeks(this.showingMonthStart, 1);
        }
        calendarMonthStart = fns.startOfWeek(calendarMonthStart, { weekStartsOn: 1 });
        for (let day = 0; day < 42; day++) {
            this.calendarDates.push(fns.addDays(calendarMonthStart, day));
        }
    }
}
SbCalendarDatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDatesComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbCalendarDatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbCalendarDatesComponent, selector: "sb-calendar-dates", inputs: { color: "color", disabled: "disabled", weekDayFormat: "weekDayFormat", markedDates: "markedDates", showingMonthStart: "showingMonthStart" }, outputs: { focus: "focus", blur: "blur", select: "select" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"className + '__week-days'\">\n  <div *ngFor=\"let weekDay of weekDays\">\n    {{ weekDay }}\n  </div>\n</div>\n<div [ngClass]=\"className + '__dates'\">\n  <sb-calendar-date\n    *ngFor=\"let date of calendarDates\"\n    [color]=\"color\"\n    [date]=\"date\"\n    [markedDates]=\"markedDates\"\n    [showingMonthStart]=\"showingMonthStart\"\n    (select)=\"handleSelect($event)\"\n    (focus)=\"setFocusedState(true)\"\n    (blur)=\"setFocusedState(false)\"\n    [disabled]=\"disabled\">\n  </sb-calendar-date>\n</div>\n", components: [{ type: SbCalendarDateComponent, selector: "sb-calendar-date", inputs: ["color", "disabled", "date", "markedDates", "showingMonthStart"], outputs: ["select"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarDatesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sb-calendar-dates', encapsulation: ViewEncapsulation.None, inputs: [
                        'color',
                        'disabled'
                    ], outputs: [
                        'focus',
                        'blur'
                    ], template: "<div [ngClass]=\"className + '__week-days'\">\n  <div *ngFor=\"let weekDay of weekDays\">\n    {{ weekDay }}\n  </div>\n</div>\n<div [ngClass]=\"className + '__dates'\">\n  <sb-calendar-date\n    *ngFor=\"let date of calendarDates\"\n    [color]=\"color\"\n    [date]=\"date\"\n    [markedDates]=\"markedDates\"\n    [showingMonthStart]=\"showingMonthStart\"\n    (select)=\"handleSelect($event)\"\n    (focus)=\"setFocusedState(true)\"\n    (blur)=\"setFocusedState(false)\"\n    [disabled]=\"disabled\">\n  </sb-calendar-date>\n</div>\n" }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SbThemeService }]; }, propDecorators: { weekDayFormat: [{
                type: Input
            }], select: [{
                type: Output
            }], markedDates: [{
                type: Input
            }], showingMonthStart: [{
                type: Input
            }] } });

const SbCalendarMonthCore = mixinDisable(mixinTabindex(mixinColor(mixinClassName(class {
    constructor(_elementRef, _themeService) {
        this._elementRef = _elementRef;
        this._themeService = _themeService;
    }
}, 'sb-calendar-month'), Color.PRIMARY), 0));
class SbCalendarMonthComponent extends SbCalendarMonthCore {
    constructor(elementRef, themeService) {
        super(elementRef, themeService);
        this.select = new EventEmitter();
        this.monthFormat = 'MMMM';
        this.markedDates = new MarkedDates();
    }
    get isMarked() {
        return this.markedDates.isRange && (this.markedDates.isBetweenMonths(this.month) ||
            this.markedDates.isStartSameMonth(this.month) ||
            this.markedDates.isEndSameMonth(this.month)) ||
            !this.markedDates.isRange && (this.markedDates.isStartSameMonth(this.month) &&
                this.markedDates.isEndSameMonth(this.month));
    }
    get isStart() {
        return this.markedDates.isRangeMonths && this.markedDates.isStartSameMonth(this.month);
    }
    get isEnd() {
        return this.markedDates.isRangeMonths && this.markedDates.isEndSameMonth(this.month);
    }
    get isBetween() {
        return this.markedDates.isRangeMonths && this.markedDates.isBetweenMonths(this.month);
    }
    get monthFormatted() {
        return fns.format(this.month, this.monthFormat);
    }
    handleClick() {
        if (!this.disabled) {
            this.select.emit(this.month);
        }
    }
}
SbCalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbCalendarMonthComponent, deps: [{ token: i0.ElementRef }, { token: SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbCalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbCalendarMonthComponent, selector: "sb-calendar-month", inputs: { colo