sb-element/fesm2015/sb-element.mjs.map

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]

{"version":3,"file":"sb-element.mjs","sources":["../../../sb-element/src/lib/core/trigger/trigger.directive.ts","../../../sb-element/src/lib/core/trigger/click-trigger.directive.ts","../../../sb-element/src/lib/core/trigger/click-outside-trigger.directive.ts","../../../sb-element/src/lib/core/trigger/hover-trigger.directive.ts","../../../sb-element/src/lib/core/align/align.directive.ts","../../../sb-element/src/lib/core/common-behaviors/class-name.ts","../../../sb-element/src/lib/core/common-behaviors/size.ts","../../../sb-element/src/lib/core/common-behaviors/color.ts","../../../sb-element/src/lib/core/common-behaviors/disable.ts","../../../sb-element/src/lib/core/common-behaviors/tabindex.ts","../../../sb-element/src/lib/core/common-behaviors/focus.ts","../../../sb-element/src/lib/core/common-behaviors/hide.ts","../../../sb-element/src/lib/core/style/theme/theme.service.ts","../../../sb-element/src/lib/core/style/style.module.ts","../../../sb-element/src/lib/core/core.module.ts","../../../sb-element/src/lib/bar/bar/bar.component.ts","../../../sb-element/src/lib/bar/bar/bar.component.html","../../../sb-element/src/lib/bar/nav-bar/nav-bar.component.ts","../../../sb-element/src/lib/bar/nav-bar/nav-bar.component.html","../../../sb-element/src/lib/bar/sidebar/sidebar.component.ts","../../../sb-element/src/lib/bar/sidebar/sidebar.component.html","../../../sb-element/src/lib/bar/bar.module.ts","../../../sb-element/src/lib/icon/icon/icon.component.ts","../../../sb-element/src/lib/icon/icon/icon.component.html","../../../sb-element/src/lib/breadcrumbs/breadcrumbs/breadcrumbs.component.ts","../../../sb-element/src/lib/breadcrumbs/breadcrumbs/breadcrumbs.component.html","../../../sb-element/src/lib/icon/icon.module.ts","../../../sb-element/src/lib/breadcrumbs/breadcrumbs.module.ts","../../../sb-element/src/lib/calendar/marked-dates.ts","../../../sb-element/src/lib/calendar/date/calendar-date.component.ts","../../../sb-element/src/lib/calendar/date/calendar-date.component.html","../../../sb-element/src/lib/calendar/dates/calendar-dates.component.ts","../../../sb-element/src/lib/calendar/dates/calendar-dates.component.html","../../../sb-element/src/lib/calendar/month/calendar-month.component.ts","../../../sb-element/src/lib/calendar/month/calendar-month.component.html","../../../sb-element/src/lib/calendar/months/calendar-months.component.ts","../../../sb-element/src/lib/calendar/months/calendar-months.component.html","../../../sb-element/src/lib/calendar/year/calendar-year.component.ts","../../../sb-element/src/lib/calendar/year/calendar-year.component.html","../../../sb-element/src/lib/calendar/years/calendar-years.component.ts","../../../sb-element/src/lib/calendar/years/calendar-years.component.html","../../../sb-element/src/lib/calendar/calendar/calendar.component.ts","../../../sb-element/src/lib/calendar/calendar/calendar.component.html","../../../sb-element/src/lib/calendar/calendar.module.ts","../../../sb-element/src/lib/card/card/card.component.ts","../../../sb-element/src/lib/card/card/card.component.html","../../../sb-element/src/lib/card/card.module.ts","../../../sb-element/src/lib/container/container/container.component.ts","../../../sb-element/src/lib/container/container/container.component.html","../../../sb-element/src/lib/container/container.module.ts","../../../sb-element/src/lib/forms/button/button.component.ts","../../../sb-element/src/lib/forms/button/button.component.html","../../../sb-element/src/lib/forms/checkbox/checkbox.component.ts","../../../sb-element/src/lib/forms/checkbox/checkbox.component.html","../../../sb-element/src/lib/popper/popper/popper-position.ts","../../../sb-element/src/lib/popper/popper/popper.component.ts","../../../sb-element/src/lib/popper/popper/popper.component.html","../../../sb-element/src/lib/forms/input/input-core/input-core.component.ts","../../../sb-element/src/lib/forms/input/input-core/input-core.component.html","../../../sb-element/src/lib/forms/input/input/input.component.ts","../../../sb-element/src/lib/forms/input/input/input.component.html","../../../sb-element/src/lib/forms/date-input/date-input/date-input.component.ts","../../../sb-element/src/lib/forms/date-input/date-input/date-input.component.html","../../../sb-element/src/lib/forms/input/double-input/double-input.component.ts","../../../sb-element/src/lib/forms/input/double-input/double-input.component.html","../../../sb-element/src/lib/forms/input/input.module.ts","../../../sb-element/src/lib/forms/date-input/date-range-input/date-range-input.component.ts","../../../sb-element/src/lib/forms/date-input/date-range-input/date-range-input.component.html","../../../sb-element/src/lib/popper/tooltip/tooltip.component.ts","../../../sb-element/src/lib/popper/tooltip/tooltip.component.html","../../../sb-element/src/lib/popper/popper.module.ts","../../../sb-element/src/lib/forms/date-input/date-input.module.ts","../../../sb-element/src/lib/forms/file-input/file-input.component.ts","../../../sb-element/src/lib/forms/file-input/file-input.component.html","../../../sb-element/src/lib/forms/icon-button/icon-button.component.ts","../../../sb-element/src/lib/forms/icon-button/icon-button.component.html","../../../sb-element/src/lib/forms/radio-button/radio-button.component.ts","../../../sb-element/src/lib/forms/radio-button/radio-button.component.html","../../../sb-element/src/lib/forms/radio-button/radio-button-group.component.ts","../../../sb-element/src/lib/forms/radio-button/radio-button-group.component.html","../../../sb-element/src/lib/forms/select-button/select-button.component.ts","../../../sb-element/src/lib/forms/select-button/select-button.component.html","../../../sb-element/src/lib/forms/slider/slider.component.ts","../../../sb-element/src/lib/forms/slider/slider.component.html","../../../sb-element/src/lib/forms/number-input/number-input-core/number-input-core.component.ts","../../../sb-element/src/lib/forms/number-input/number-input-core/number-input-core.component.html","../../../sb-element/src/lib/forms/number-input/double-number-input/double-number-input.component.ts","../../../sb-element/src/lib/forms/number-input/double-number-input/double-number-input.component.html","../../../sb-element/src/lib/forms/number-input/number-input/number-input.component.ts","../../../sb-element/src/lib/forms/number-input/number-input/number-input.component.html","../../../sb-element/src/lib/forms/number-input/number-input.module.ts","../../../sb-element/src/lib/forms/toggle-switch/toggle-switch.component.ts","../../../sb-element/src/lib/forms/toggle-switch/toggle-switch.component.html","../../../sb-element/src/lib/forms/time-input/time-input.component.ts","../../../sb-element/src/lib/forms/time-input/time-input.component.html","../../../sb-element/src/lib/forms/forms.module.ts","../../../sb-element/src/lib/grid/grid/grid.component.ts","../../../sb-element/src/lib/grid/grid/grid.component.html","../../../sb-element/src/lib/grid/grid.module.ts","../../../sb-element/src/lib/indicator/progress/progress.component.ts","../../../sb-element/src/lib/indicator/progress/progress.component.html","../../../sb-element/src/lib/indicator/indicator.module.ts","../../../sb-element/src/lib/link/link/link.component.ts","../../../sb-element/src/lib/link/link/link.component.html","../../../sb-element/src/lib/link/link.module.ts","../../../sb-element/src/lib/notification/alert-box/alert-box.component.ts","../../../sb-element/src/lib/notification/alert-box/alert-box.component.html","../../../sb-element/src/lib/models/queue/queue.ts","../../../sb-element/src/lib/notification/alert/alert.service.ts","../../../sb-element/src/lib/notification/alert/alert.component.ts","../../../sb-element/src/lib/notification/alert/alert.component.html","../../../sb-element/src/lib/notification/toast/toast.component.ts","../../../sb-element/src/lib/notification/toast/toast.component.html","../../../sb-element/src/lib/notification/toaster/toaster-position.ts","../../../sb-element/src/lib/notification/toaster/toaster.component.ts","../../../sb-element/src/lib/notification/toaster/toaster.component.html","../../../sb-element/src/lib/notification/notification.module.ts","../../../sb-element/src/lib/table/table/table.component.ts","../../../sb-element/src/lib/table/table/table.component.html","../../../sb-element/src/lib/table/table.module.ts","../../../sb-element/src/lib/models/linked-list/list-item.ts","../../../sb-element/src/lib/models/linked-list/linked-list.ts","../../../sb-element/src/lib/timeline/timeline/timeline.component.ts","../../../sb-element/src/lib/timeline/timeline/timeline.component.html","../../../sb-element/src/lib/timeline/timeline.module.ts","../../../sb-element/src/lib/sb-element.module.ts","../../../sb-element/src/public-api.ts","../../../sb-element/src/sb-element.ts"],"sourcesContent":["import { Directive, Input } from '@angular/core';\nimport { Triggerable } from \"./triggerable\";\n\n@Directive({\n  selector: '[sbElTrigger]'\n})\nexport class SbTriggerDirective {\n\n  @Input()\n  public triggerable!: Triggerable;\n\n  @Input()\n  public delay: number = 0;\n\n  protected trigger(): void {\n    let timeout = setTimeout(() => {\n      this.triggerable.trigger();\n      clearTimeout(timeout);\n    }, this.delay);\n  }\n\n}\n","import { Directive, HostListener } from '@angular/core';\nimport { SbTriggerDirective } from \"./trigger.directive\";\n\n@Directive({\n  selector: '[sbElClickTrigger]'\n})\nexport class SbClickTriggerDirective extends SbTriggerDirective {\n\n  @HostListener('click', ['$event'])\n  private handleClick(event: PointerEvent) {\n    event.stopPropagation();\n    this.trigger();\n  }\n\n}\n","import { Directive, HostListener, Input } from '@angular/core';\nimport { Poppable } from './poppable';\nimport { SbClickTriggerDirective } from './click-trigger.directive';\n\n@Directive({\n  selector: '[sbElClickOutsideTrigger]'\n})\nexport class SbClickOutsideTriggerDirective extends SbClickTriggerDirective {\n\n  @Input()\n  public triggerable!: Poppable\n\n  @HostListener('document: click', ['$event'])\n  handleDocumentClick(event: PointerEvent): void {\n    let popperBBox = this.triggerable.getPopperRef().nativeElement.getBoundingClientRect()\n    if (!this.isMouseoverBoundingRect(event, popperBBox) && this.triggerable.isPopped()) {\n      this.trigger();\n    }\n  }\n\n  private isMouseoverBoundingRect(\n    event: PointerEvent, boundingRect: DOMRect\n  ): boolean {\n    let mouseX: number = event.clientX;\n    let mouseY: number = event.clientY;\n\n    let xInBounds = mouseX >= boundingRect.left && mouseX <= boundingRect.right;\n    let yInBounds = mouseY >= boundingRect.top && mouseY <= boundingRect.bottom;\n\n    return xInBounds && yInBounds;\n  }\n\n}\n","import { Directive, HostListener } from '@angular/core';\nimport { SbTriggerDirective } from './trigger.directive';\n\n@Directive({\n  selector: '[sbElHoverTrigger]'\n})\nexport class SbHoverTriggerDirective extends SbTriggerDirective {\n\n  @HostListener('mouseenter', ['$event'])\n  private handleMouseEnter(event: PointerEvent) {\n    this.trigger();\n  }\n\n  @HostListener('mouseleave', ['$event'])\n  private handleMouseLeave(event: PointerEvent) {\n    this.trigger();\n  }\n\n}\n","import { Directive, ElementRef } from '@angular/core';\n\n@Directive({\n  selector: '[sbElAlign]'\n})\nexport class SbAlignDirective {\n\n  get nativeElement(): HTMLElement {\n    return this.host.nativeElement;\n  }\n\n  constructor(private host: ElementRef) { }\n\n  public moveTo(x: number, y: number): void {\n    let hostBBox = this.nativeElement.getBoundingClientRect();\n    let hostX = hostBBox.x;\n    let hostY = hostBBox.y;\n    this.moveBy(x - hostX, y - hostY);\n  }\n\n  public moveBy(dx: number, dy: number): void {\n    this.translate(dx, dy);\n  }\n\n  private translate(x: number, y: number) {\n    this.nativeElement.style.transform = 'translate(' + x + 'px,' + y + 'px)';\n  }\n\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\nimport { HasElementRef } from \"./has-element-ref\";\n\nexport interface CanClassName {\n  readonly className: string | undefined;\n}\n\ntype CanClassNameCtor = Constructor<CanClassName> & AbstractConstructor<CanClassName>;\n\nexport function mixinClassName<T extends AbstractConstructor<HasElementRef>>(\n  core: T,\n  className: string\n): CanClassNameCtor & T;\nexport function mixinClassName<T extends Constructor<HasElementRef>>(\n  core: T,\n  className: string\n): CanClassNameCtor & T {\n  return class extends core {\n    private _className: string = className;\n\n    get className(): string | undefined {\n      return this._className;\n    }\n\n    constructor(...args: Array<any>) {\n      super(...args);\n      this._elementRef.nativeElement.classList.add(className);\n    }\n  }\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\nimport { HasElementRef } from \"./has-element-ref\";\n\n\nexport enum Size {\n  EXTRA_SMALL = 'xs',\n  SMALL = 's',\n  MEDIUM = 'm',\n  LARGE = 'l',\n  EXTRA_LARGE = 'xl',\n  EXTRA_EXTRA_LARGE = 'xxl'\n}\n\nexport interface CanSize {\n  size: Size | undefined;\n  defaultSize?: Size;\n}\n\ntype CanSizeCtor = Constructor<CanSize> & AbstractConstructor<CanSize>;\n\nexport function mixinSize<T extends AbstractConstructor<HasElementRef>>(\n  core: T,\n  defaultSize?: Size\n): CanSizeCtor & T;\nexport function mixinSize<T extends Constructor<HasElementRef>>(\n  core: T,\n  defaultSize?: Size\n): CanSizeCtor & T {\n  return class extends core {\n    private _size: Size | undefined;\n    public defaultSize = defaultSize;\n\n\n    get size(): Size | undefined {\n      return this._size;\n    }\n    set size(value: Size | undefined) {\n      const size = value || this.defaultSize;\n\n      if (size !== this._size) {\n        if (this._size) {\n          this._elementRef.nativeElement.classList.remove(`sb--${this._size}`);\n        }\n        if (size) {\n          this._elementRef.nativeElement.classList.add(`sb--${size}`);\n        }\n\n        this._size = size;\n      }\n    }\n\n    constructor(...args: Array<any>) {\n      super(...args);\n\n      this.size = defaultSize;\n    }\n  }\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\nimport { HasElementRef } from \"./has-element-ref\";\n\n\nexport enum Color {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  SUCCESS = 'success',\n  WARN = 'warn',\n  INFO = 'info'\n}\n\nexport interface CanColor {\n  color: Color | undefined;\n  defaultColor?: Color;\n}\n\ntype CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;\n\nexport function mixinColor<T extends AbstractConstructor<HasElementRef>>(\n  core: T,\n  defaultColor?: Color\n): CanColorCtor & T;\nexport function mixinColor<T extends Constructor<HasElementRef>>(\n  core: T,\n  defaultColor?: Color\n): CanColorCtor & T {\n  return class extends core {\n    private _color: Color | undefined;\n    public defaultColor?: Color = defaultColor;\n\n\n    get color(): Color | undefined {\n      return this._color;\n    }\n    set color(value: Color | undefined) {\n      const color = value || this.defaultColor;\n\n      if (color !== this._color) {\n        if (this._color) {\n          this._elementRef.nativeElement.classList.remove(`sb--${this._color}`);\n        }\n        if (color) {\n          this._elementRef.nativeElement.classList.add(`sb--${color}`);\n        }\n\n        this._color = color;\n      }\n    }\n\n    constructor(...args: Array<any>) {\n      super(...args);\n\n      this.color = defaultColor;\n    }\n  }\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\n\nexport interface CanDisable {\n  disabled: boolean;\n  setDisabledState(isDisabled: boolean): void;\n}\n\ntype CanDisableCtor = Constructor<CanDisable> & AbstractConstructor<CanDisable>;\n\nexport function mixinDisable<T extends AbstractConstructor<{}>>(\n  core: T,\n): CanDisableCtor & T;\nexport function mixinDisable<T extends Constructor<{}>>(\n  core: T,\n): CanDisableCtor & T {\n  return class extends core {\n    private _disabled: boolean = false;\n\n    get disabled(): boolean {\n      return this._disabled;\n    }\n    set disabled(isDisabled: boolean) {\n      this._disabled = isDisabled;\n    }\n\n    public setDisabledState(isDisabled: boolean): void {\n      this.disabled = isDisabled;\n    }\n\n    constructor(...args: Array<any>) {\n      super(...args);\n    }\n  }\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\nimport { HasElementRef } from \"./has-element-ref\";\n\nexport interface CanTabindex {\n  tabindex: number | undefined;\n  defaultTabindex?: number;\n}\n\ntype CanTabindexCtor = Constructor<CanTabindex> & AbstractConstructor<CanTabindex>;\n\nexport function mixinTabindex<T extends AbstractConstructor<HasElementRef>>(\n  core: T,\n  defaultTabindex?: number\n): CanTabindexCtor & T;\nexport function mixinTabindex<T extends Constructor<HasElementRef>>(\n  core: T,\n  defaultTabindex?: number\n): CanTabindexCtor & T {\n  return class extends core {\n    private _tabindex: number | undefined;\n    public defaultTabindex = defaultTabindex;\n\n    get tabindex(): number | undefined {\n      return this._tabindex;\n    }\n    set tabindex(value: number | undefined) {\n      const tabindex = value || this.defaultTabindex;\n\n      if (tabindex !== undefined && tabindex !== this._tabindex) {\n        this._elementRef.nativeElement.tabIndex = tabindex;\n      }\n\n      this._tabindex = tabindex;\n    }\n\n    constructor(...args: Array<any>) {\n      super(...args);\n\n      this.tabindex = defaultTabindex;\n    }\n  }\n}\n","import { AbstractConstructor, Constructor } from \"./constructor\";\nimport { EventEmitter } from \"@angular/core\";\n\nexport interface CanFocus {\n  focused: boolean;\n  setFocusedState(isFocused: boolean): void;\n  focus: EventEmitter<void>;\n  blur: EventEmitter<void>;\n}\n\ntype CanFocusCtor = Constructor<CanFocus> & AbstractConstructor<CanFocus>;\n\nexport function mixinFocus<T extends AbstractConstructor<{}>>(\n  core: T\n): CanFocusCtor & T;\nexport function mixinFocus<T extends Constructor<{}>>(\n  core: T\n): CanFocusCtor & T {\n  return class extends core {\n    private _focused: boolean = false;\n\n    public focus: EventEmitter<void> = new EventEmitter<void>();\n    public blur: EventEmitter<void> = new EventEmitter<void>();\n\n    get focused(): boolean {\n      return this._focused;\n    }\n    set focused(isFocused: boolean) {\n      if (isFocused !== this._focused) {\n        if (isFocused) {\n          this.emitFocus();\n        } else {\n          this.emitBlur();\n        }\n      }\n      this._focused = isFocused;\n    }\n\n    public setFocusedState(isFocused: boolean): void {\n      this.focused = isFocused;\n    }\n\n    private emitFocus(): void {\n      this.onFocus();\n      this.focus.emit();\n    }\n\n    private emitBlur(): void {\n      this.onBlur();\n      this.blur.emit();\n    }\n\n    protected onFocus(): void {};\n    protected onBlur(): void {};\n\n    constructor(...args: Array<any>) {\n      super(...args);\n    }\n  }\n}\n","import { AfterViewInit, ElementRef, EventEmitter } from \"@angular/core\";\nimport { AbstractConstructor, Constructor } from \"./constructor\";\nimport { HasElementRef } from \"./has-element-ref\";\n\nexport interface CanHide {\n  visible: boolean;\n  setVisibleState(isVisible: boolean): void;\n  showStart: EventEmitter<void>;\n  showEnd: EventEmitter<void>;\n  hideStart: EventEmitter<void>;\n  hideEnd: EventEmitter<void>;\n  transitionDuration: number;\n  transitionElement?: ElementRef;\n  defaultVisiblity?: boolean;\n  wait(time: number): Promise<void>;\n}\n\ntype CanHideCtor = Constructor<CanHide> & AbstractConstructor<CanHide>;\n\nexport function mixinHide<T extends AbstractConstructor<HasElementRef>>(\n  core: T,\n  defaultVisiblity?: boolean\n): CanHideCtor & T;\nexport function mixinHide<T extends Constructor<HasElementRef>>(\n  core: T,\n  defaultVisiblity?: boolean\n): CanHideCtor & T {\n  return class extends core {\n    private _visible: boolean | undefined;\n\n    public showStart: EventEmitter<void> = new EventEmitter<void>();\n    public showEnd: EventEmitter<void> = new EventEmitter<void>();\n    public hideStart: EventEmitter<void> = new EventEmitter<void>();\n    public hideEnd: EventEmitter<void> = new EventEmitter<void>();\n\n    public defaultVisiblity?: boolean = defaultVisiblity;\n    public transitionElement?: ElementRef;\n\n    get visible(): boolean {\n      return this._visible || false;\n    }\n    set visible(isVisible: boolean) {\n      if (isVisible !== this._visible) {\n        if (isVisible) this.showElement(this._visible);\n        else this.hideElement(this._visible);\n        this._visible = isVisible;\n      }\n    }\n\n    public wait(time: number): Promise<void> {\n      return new Promise(resolve => {\n        setTimeout(() => resolve(), time)\n      })\n    }\n\n    private async showElement(wasVisible: boolean | undefined): Promise<void> {\n      this._elementRef.nativeElement.classList.remove(`sb--hidden`);\n      if (wasVisible !== undefined) {\n        this._elementRef.nativeElement.classList.add(`sb--visibly-hidden`);\n        await this.wait(0);\n        this._elementRef.nativeElement.classList.remove(`sb--visibly-hidden`);\n      }\n      this.emitShowStart();\n      this._elementRef.nativeElement.classList.add(`sb--visible`);\n      await this.wait(this.transitionDuration + 5);\n      this.emitShowEnd();\n    }\n\n    private async hideElement(wasVisible: boolean | undefined): Promise<void> {\n      this._elementRef.nativeElement.classList.remove(`sb--visible`);\n      this.emitHideStart();\n      if (wasVisible !== undefined) {\n        this._elementRef.nativeElement.classList.add(`sb--visibly-hidden`);\n        await this.wait(this.transitionDuration + 5);\n        this._elementRef.nativeElement.classList.remove(`sb--visibly-hidden`);\n      }\n      if (wasVisible == undefined || this._visible == false) {\n        this._elementRef.nativeElement.classList.add(`sb--hidden`);\n        this.emitHideEnd();\n      }\n    }\n\n    get transitionDuration(): number {\n      if (!this.transitionElement) return 0;\n\n      let {\n        transitionDuration,\n        transitionDelay\n      } = window.getComputedStyle(this.transitionElement.nativeElement);\n      const floatTransitionDuration = parseFloat(transitionDuration);\n      const floatTransitionDelay = parseFloat(transitionDelay);\n\n      if (!floatTransitionDuration && !floatTransitionDelay) return 0;\n\n      transitionDuration = transitionDuration.split(',')[0];\n      transitionDelay = transitionDelay.split(',')[0];\n      return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * 1000;\n    }\n\n    public setVisibleState(isVisible: boolean): void {\n      this.visible = isVisible;\n    }\n\n    private emitShowStart(): void {\n      this.onShowStart();\n      this.showStart.emit();\n    }\n\n    private emitShowEnd(): void {\n      this.onShowEnd();\n      this.showEnd.emit();\n    }\n\n    private emitHideStart(): void {\n      this.onHideStart();\n      this.hideStart.emit();\n    }\n\n    private emitHideEnd(): void {\n      this.onHideEnd();\n      this.hideEnd.emit();\n    }\n\n    protected onShowStart(): void {};\n    protected onShowEnd(): void {};\n    protected onHideStart(): void {};\n    protected onHideEnd(): void {};\n\n    constructor(...args: Array<any>) {\n      super(...args);\n\n      this.visible = defaultVisiblity || false;\n    }\n  }\n}\n","import { DOCUMENT } from \"@angular/common\";\nimport { Inject, Injectable } from '@angular/core';\nimport { BehaviorSubject } from \"rxjs\";\n\nexport class ThemesConfig extends Array<ThemeConfig> {}\n\nexport interface ThemeConfig {\n  name: string;\n  href: string;\n}\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class SbThemeService extends BehaviorSubject<string> {\n\n  private _themeConfig!: ThemeConfig;\n\n  constructor(\n    @Inject(ThemesConfig) private themesConfig: ThemesConfig,\n    @Inject(DOCUMENT) private document: Document\n  ) {\n    super('dark');\n    this.createNewLinkElement(themesConfig[0])\n  }\n\n  private findThemeByName(themeName: string) {\n    return (themeConfig: ThemeConfig): boolean => {\n      return themeName == themeConfig.name;\n    }\n  }\n\n  public commit(themeName: string): void {\n    const themeConfig = this.themesConfig.find(this.findThemeByName(themeName));\n    if (themeConfig) {\n      this.updateLinkElement(themeConfig);\n      this.next(this._themeConfig.name);\n    } else throw new Error(`Theme ${themeName} does not exist!`);\n  }\n\n  public get(): string { return this._themeConfig.name }\n\n  private createNewLinkElement(themeConfig: ThemeConfig): void {\n    this.createLinkElement(themeConfig);\n    this._themeConfig = themeConfig;\n  }\n\n  private updateLinkElement(themeConfig: ThemeConfig): void {\n    this.removeLinkElement(this._themeConfig);\n    this.createNewLinkElement(themeConfig);\n  }\n\n  private createLinkElement(themeConfig: ThemeConfig) {\n    const link = this.document.createElement('link');\n    link.id = `sb-theme-${themeConfig.name}`;\n    link.setAttribute('rel', 'stylesheet');\n    link.setAttribute('href', themeConfig.href);\n    this.document.head.appendChild(link);\n  }\n\n  private removeLinkElement(themeConfig: ThemeConfig): void {\n    const link: HTMLElement | null = this.document.getElementById(`sb-theme-${themeConfig.name}`);\n    if (link) {\n      this.document.head.removeChild(link);\n    }\n  }\n}\n","import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThemesConfig } from \"./theme\";\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule\n  ]\n})\nexport class SbStyleModule {\n  constructor(@Optional() @SkipSelf() parentModule?: SbStyleModule) {\n    if (parentModule) {\n      throw new Error(\n        'StyleModule is already loaded. Import it in the AppModule only');\n    }\n  }\n\n  public static forRoot(themesConfig: ThemesConfig): ModuleWithProviders<SbStyleModule> {\n    return {\n      ngModule: SbStyleModule,\n      providers: [\n        {provide: ThemesConfig, useValue: themesConfig}\n      ]\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SbTriggerDirective } from './trigger/trigger.directive';\nimport { SbClickTriggerDirective } from './trigger/click-trigger.directive';\nimport { SbAlignDirective } from './align/align.directive';\nimport { SbHoverTriggerDirective } from './trigger/hover-trigger.directive';\nimport { SbClickOutsideTriggerDirective } from './trigger/click-outside-trigger.directive';\nimport { SbStyleModule } from './style';\n\n\n\n@NgModule({\n  declarations: [\n    SbTriggerDirective,\n    SbClickOutsideTriggerDirective,\n    SbClickTriggerDirective,\n    SbHoverTriggerDirective,\n    SbAlignDirective,\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n\n    SbTriggerDirective,\n    SbClickOutsideTriggerDirective,\n    SbClickTriggerDirective,\n    SbHoverTriggerDirective,\n    SbAlignDirective,\n\n    SbStyleModule\n  ]\n})\nexport class SbCoreModule { }\n","import { Component, ElementRef, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nimport { mixinClassName, mixinColor, mixinSize, Size, SbThemeService } from '../../core';\n\nconst SbBarCore = mixinSize(\n  mixinColor(\n    mixinClassName(\n      class {\n        constructor(\n          public _elementRef: ElementRef,\n          public _themeService: SbThemeService) {}\n      }, 'sb-bar'\n    )\n  ), Size.MEDIUM\n);\n\n\n@Component({\n  selector: 'sb-bar',\n  templateUrl: './bar.component.html',\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'size',\n    'color'\n  ]\n})\nexport class SbBarComponent extends SbBarCore {\n\n  @Input() @HostBinding('class')\n  public side: 'left' | 'right' | 'top' | 'bottom' = 'left';\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n  }\n}\n","<ng-content></ng-content>\n","import { Component, ElementRef, ViewEncapsulation } from '@angular/core';\nimport { mixinClassName } from \"../../core\";\n\nconst SbNavBarCore = mixinClassName(\n  class {\n    constructor(\n      public _elementRef: ElementRef) {}\n  }, 'sb-nav-bar'\n);\n\n@Component({\n  selector: 'sb-nav-bar',\n  templateUrl: './nav-bar.component.html',\n  encapsulation: ViewEncapsulation.None\n})\nexport class SbNavBarComponent extends SbNavBarCore {\n\n  constructor(\n    elementRef: ElementRef\n  ) {\n    super(elementRef);\n  }\n\n}\n","<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","import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';\nimport { mixinClassName, Size, SbThemeService, Triggerable } from '../../core';\n\nconst SbSidebarCore = mixinClassName(\n  class {\n    constructor(\n      public _elementRef: ElementRef,\n      public _themeService: SbThemeService) {}\n  }, 'sb-sidebar'\n);\n\n@Component({\n  selector: 'sb-sidebar',\n  templateUrl: './sidebar.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SbSidebarComponent extends SbSidebarCore implements Triggerable {\n\n  @Input()\n  public size: string = Size.MEDIUM;\n\n  @Input()\n  public side: 'left' | 'right' | 'top' | 'bottom' = 'left';\n\n  @Input()\n  public visible: boolean = false;\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n  }\n\n  public trigger(): void {\n    this.visible = !this.visible;\n  }\n\n  public getSidebarOverlayClasses(): Array<string> {\n    let classes: Array<string> = new Array<string>();\n    classes.push(this.className + '__overlay');\n    if (this.visible) {\n      classes.push('visible');\n    }\n    return classes;\n  }\n}\n","<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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SbBarComponent } from './bar';\nimport { SbNavBarComponent } from './nav-bar';\nimport { SbSidebarComponent } from './sidebar';\n\n@NgModule({\n  declarations: [\n    SbBarComponent,\n    SbNavBarComponent,\n    SbSidebarComponent,\n  ],\n  imports: [\n    CommonModule,\n  ],\n  exports: [\n    SbBarComponent,\n    SbNavBarComponent,\n    SbSidebarComponent,\n  ]\n})\nexport class SbBarModule { }\n","import { Attribute, Component, ElementRef, Input, Optional, ViewEncapsulation } from '@angular/core';\nimport { SbThemeService, mixinSize, mixinClassName, mixinColor } from '../../core';\n\nconst SbIconCore = mixinSize(\n  mixinColor(\n    mixinClassName(\n      class {\n        constructor(\n          public _elementRef: ElementRef,\n          public _themeService: SbThemeService) {}\n      }, 'sb-icon'\n    )\n  )\n);\n\n\n@Component({\n  selector: 'sb-icon',\n  templateUrl: './icon.component.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.outline]': 'outline'\n  },\n  inputs: [\n    'size',\n    'color'\n  ]\n})\nexport class SbIconComponent extends SbIconCore {\n\n  @Input()\n  public icon: string = '';\n\n  @Input()\n  set isOutline(isOutline: boolean) {\n    this.outline = isOutline;\n  }\n\n  private outline: boolean = false;\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService,\n    @Optional() @Attribute('outline') outline: any\n  ) {\n    super(elementRef, themeService);\n    if (outline == '') this.isOutline = true;\n  }\n\n}\n","<ng-content *ngIf=\"icon == ''\"></ng-content>\n{{ icon }}\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { Color, mixinClassName, mixinColor, SbThemeService } from '../../core';\n\nconst SbBreadcrumbsCore = mixinColor(\n  mixinClassName(\n    class {\n      constructor(\n        public _elementRef: ElementRef,\n        public _themeService: SbThemeService) {}\n    }, 'sb-breadcrumbs'\n  ), Color.PRIMARY\n);\n\n@Component({\n  selector: 'sb-breadcrumbs',\n  templateUrl: './breadcrumbs.component.html',\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'color'\n  ]\n})\nexport class SbBreadcrumbsComponent extends SbBreadcrumbsCore {\n\n  @Output()\n  public navigate: EventEmitter<string> = new EventEmitter<string>();\n\n  private _crumbs: Array<string> = new Array<string>();\n\n  get crumbs(): Array<string> {\n    return this._crumbs;\n  }\n\n  @Input()\n  public homePlaceholder: string = '';\n\n  @Input()\n  set url(url: string) {\n    this._crumbs = url.split('/').reduce((\n      crumbs: Array<string>,\n      crumb: string,\n      index: number\n    ) => {\n      if (index == 0 || crumb != '') crumbs.push(crumb);\n      return crumbs;\n    }, new Array<string>())\n  }\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n  }\n\n  public handleClick(crumbIndex: number) {\n    this.navigate.emit(this.crumbs.slice(0, crumbIndex + 1).join('/'));\n  }\n\n\n}\n","<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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SbIconComponent } from './icon';\n\n\n@NgModule({\n  declarations: [SbIconComponent],\n  imports: [CommonModule],\n  exports: [SbIconComponent]\n})\nexport class SbIconModule { }\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SbIconModule } from '../icon';\n\nimport { SbBreadcrumbsComponent } from './breadcrumbs';\n\n@NgModule({\n  declarations: [SbBreadcrumbsComponent],\n  imports: [CommonModule, SbIconModule],\n  exports: [SbBreadcrumbsComponent]\n})\nexport class SbBreadcrumbsModule { }\n","import * as fns from \"date-fns\";\n\nexport class MarkedDates {\n  private _start: Date | undefined;\n  private _end: Date | undefined;\n\n  get isRange(): boolean {\n    if (this.start && this.end) {\n      return this.start != this.end;\n    } else return false;\n  }\n\n  get isRangeDays(): boolean {\n    if (this.start && this.end) {\n      if (this.start != this.end) {\n        return !fns.isSameDay(this.start, this.end);\n      } else return false;\n    } else return false;\n  }\n\n  get isRangeMonths(): boolean {\n    if (this.start && this.end) {\n      if (this.start != this.end) {\n        return !fns.isSameMonth(this.start, this.end);\n      } else return false;\n    } else return false;\n  }\n\n  get isRangeYears(): boolean {\n    if (this.start && this.end) {\n      if (this.start != this.end) {\n        return !fns.isSameYear(this.start, this.end);\n      } else return false;\n    } else return false;\n  }\n\n  get start(): Date | undefined { return this._start }\n  set start(start: Date | undefined) { this._start = start }\n  get date(): Date | undefined { return this._start }\n  set date(date: Date | undefined) { this._start = date }\n\n  get end(): Date | undefined { return this._end ? this._end : this._start }\n  set end(end: Date | undefined) { this._end = end }\n\n  constructor();\n  constructor(date: Date);\n  constructor(start: Date, end: Date);\n  constructor(dateOrStart?: Date, end?: Date) {\n    this.start = dateOrStart;\n    this.end = end;\n  }\n\n  public isStart(date: Date): boolean {\n    if (this.start) return fns.isEqual(date, this.start);\n    else return false;\n  }\n\n  public isStartSameDay(date: Date): boolean {\n    if (this.start) return fns.isSameDay(date, this.start);\n    else return false;\n  }\n\n  public isStartSameMonth(date: Date): boolean {\n    if (this.start) return fns.isSameMonth(date, this.start);\n    else return false;\n  }\n\n  public isStartSameYear(date: Date): boolean {\n    if (this.start) return fns.isSameYear(date, this.start);\n    else return false;\n  }\n\n  public isEnd(date: Date): boolean {\n    if (this.end) return fns.isEqual(date, this.end);\n    else return false;\n  }\n\n  public isEndSameDay(date: Date): boolean {\n    if (this.end) return fns.isSameDay(date, this.end);\n    return false;\n  }\n\n  public isEndSameMonth(date: Date): boolean {\n    if (this.end) return fns.isSameMonth(date, this.end);\n    else return false;\n  }\n\n  public isEndSameYear(date: Date): boolean {\n    if (this.end) return fns.isSameYear(date, this.end);\n    else return false;\n  }\n\n  public isBetween(date: Date): boolean {\n    if (this.start && this.end) {\n      if (fns.isEqual(this.start, this.end)) return false;\n      return fns.isAfter(date, this.start) && fns.isBefore(date, this.end);\n    } else return false;\n  }\n\n  public isBetweenDays(date: Date): boolean {\n    if (this.start && this.end) {\n      if (fns.isSameDay(this.start, this.end)) return false;\n      let dateStartOfDay = fns.startOfDay(date);\n      let startStartOfDay = fns.startOfDay(this.start);\n      let endStartOfDay = fns.startOfDay(this.end);\n      return fns.isAfter(dateStartOfDay, startStartOfDay) &&\n        fns.isBefore(dateStartOfDay, endStartOfDay);\n    } else return false;\n  }\n\n  public isBetweenMonths(date: Date): boolean {\n    if (this.start && this.end) {\n      if (fns.isSameMonth(this.start, this.end)) return false;\n      let dateStartOfMonth = fns.startOfMonth(date);\n      let startStartOfMonth = fns.startOfMonth(this.start);\n      let endStartOfMonth = fns.startOfMonth(this.end);\n      return fns.isAfter(dateStartOfMonth, startStartOfMonth) &&\n        fns.isBefore(dateStartOfMonth, endStartOfMonth);\n    } else return false;\n  }\n\n  public isBetweenYears(date: Date): boolean {\n    if (this.start && this.end) {\n      if (fns.isSameYear(this.start, this.end)) return false;\n      let dateStartOfMonth = fns.startOfYear(date);\n      let startStartOfMonth = fns.startOfYear(this.start);\n      let endStartOfMonth = fns.startOfYear(this.end);\n      return fns.isAfter(dateStartOfMonth, startStartOfMonth) &&\n        fns.isBefore(dateStartOfMonth, endStartOfMonth);\n    } else return false;\n  }\n\n  public sort(): void {\n    if (this.isRange && this.start && this.end) {\n      if (fns.isAfter(this.start, this.end)) {\n        let startCopy = this.start;\n        this.start = this.end;\n        this.end = startCopy;\n      }\n    }\n  }\n}\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport * as fns from \"date-fns\";\nimport { SbThemeService, mixinColor, mixinClassName, Color, mixinTabindex, mixinDisable } from \"../../core\";\nimport { MarkedDates } from \"../marked-dates\";\n\nconst SbCalendarDateCore = mixinDisable(\n  mixinTabindex(\n    mixinColor(\n      mixinClassName(\n        class {\n          constructor(\n            public _elementRef: ElementRef,\n            public _themeService: SbThemeService) {}\n          }, 'sb-calendar-date'\n      ), Color.PRIMARY\n    ), 0\n  )\n);\n\n@Component({\n  selector: 'sb-calendar-date',\n  templateUrl: './calendar-date.component.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.marked]': 'isMarked',\n    '[class.start]': 'isStart',\n    '[class.end]': 'isEnd',\n    '[class.between]': 'isBetween',\n    '[class.not-in-month]': 'isNotInMonth',\n    '[class.disabled]': 'disabled',\n    '(click)': 'handleClick()'\n  },\n  inputs: [\n    'color',\n    'disabled'\n  ],\n})\nexport class SbCalendarDateComponent extends SbCalendarDateCore {\n\n  @Output()\n  public select: EventEmitter<Date> = new EventEmitter<Date>();\n\n  @Input()\n  public date!: Date;\n\n  @Input()\n  public markedDates: MarkedDates = new MarkedDates();\n\n  @Input()\n  public showingMonthStart!: Date;\n\n  get isMarked(): boolean {\n    return this.markedDates.isRange && (\n      this.markedDates.isBetweenDays(this.date) ||\n      this.markedDates.isStartSameDay(this.date) ||\n      this.markedDates.isEndSameDay(this.date)\n    ) ||\n    !this.markedDates.isRange && (\n      this.markedDates.isStartSameDay(this.date) &&\n      this.markedDates.isEndSameDay(this.date)\n    );\n  }\n\n  get isStart(): boolean {\n    return this.markedDates.isRangeDays && this.markedDates.isStartSameDay(this.date);\n  }\n\n  get isEnd(): boolean {\n    return this.markedDates.isRangeDays && this.markedDates.isEndSameDay(this.date);\n  }\n\n  get isBetween(): boolean {\n    return this.markedDates.isRangeDays && this.markedDates.isBetweenDays(this.date);\n  }\n\n  get isNotInMonth(): boolean {\n    return !fns.isSameMonth(this.showingMonthStart, this.date);\n  }\n\n  get dateFormatted(): string {\n    return fns.format(this.date, 'dd');\n  }\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n  }\n\n  public handleClick(): void {\n    if (!this.disabled) {\n      this.select.emit(this.date);\n    }\n  }\n\n}\n","<span>{{ dateFormatted }}</span>\n<div class=\"mark\"></div>\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport * as fns from \"date-fns\";\nimport { SbThemeService, mixinFocus, mixinColor, mixinClassName, Color, mixinDisable } from \"../../core\";\nimport { MarkedDates } from \"../marked-dates\";\n\nconst SbCalendarDatesCore = mixinDisable(\n  mixinFocus(\n    mixinColor(\n      mixinClassName(\n        class {\n          constructor(\n            public _elementRef: ElementRef,\n            public _themeService: SbThemeService) {}\n        }, 'sb-calendar-dates'\n      ), Color.PRIMARY\n    )\n  )\n);\n\n@Component({\n  selector: 'sb-calendar-dates',\n  templateUrl: './calendar-dates.component.html',\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'color',\n    'disabled'\n  ],\n  outputs: [\n    'focus',\n    'blur'\n  ],\n})\nexport class SbCalendarDatesComponent extends SbCalendarDatesCore {\n\n  @Input()\n  public weekDayFormat: string = 'EEEEEE';\n\n  @Output()\n  public select: EventEmitter<Date> = new EventEmitter<Date>();\n  public handleSelect(date: Date): void {\n    if (fns.isSameMonth(this.showingMonthStart, date)) {\n      this.select.emit(date);\n    }\n  }\n\n  @Input()\n  public markedDates: MarkedDates = new MarkedDates();\n\n  @Input()\n  set showingMonthStart(date: Date) {\n    this._showingMonthStart = fns.startOfMonth(date);\n    this.updateCalendarDates()\n  }\n  get showingMonthStart(): Date {\n    return this._showingMonthStart;\n  }\n  private _showingMonthStart: Date = fns.startOfMonth(new Date());\n  public calendarDates!: Array<Date>;\n  public weekDays: Array<string> = new Array<string>();\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n    this.updateCalendarDates();\n    this.createWeekDays();\n  }\n\n  private createWeekDays(): void {\n    let date = fns.setDay(new Date(), 1);\n    for (let weekDay = 1 ; weekDay <= 7 ; weekDay++) {\n      this.weekDays.push(fns.format(date, this.weekDayFormat))\n      date = fns.addDays(date, 1);\n    }\n  }\n\n  private updateCalendarDates(): void {\n    this.calendarDates = new Array<Date>();\n    let calendarMonthStart = this.showingMonthStart;\n    if (fns.isMonday(this.showingMonthStart)) {\n      calendarMonthStart = fns.subWeeks(this.showingMonthStart, 1);\n    }\n    calendarMonthStart = fns.startOfWeek(calendarMonthStart, {weekStartsOn : 1});\n\n    for (let day = 0 ; day < 42 ; day++) {\n      this.calendarDates.push(fns.addDays(calendarMonthStart, day));\n    }\n  }\n}\n","<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","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { SbThemeService, mixinColor, mixinClassName, Color, mixinTabindex, mixinDisable } from \"../../core\";\nimport * as fns from \"date-fns\";\nimport { MarkedDates } from \"../marked-dates\";\n\n\nconst SbCalendarMonthCore = mixinDisable(\n  mixinTabindex(\n    mixinColor(\n      mixinClassName(\n        class {\n          constructor(\n            public _elementRef: ElementRef,\n            public _themeService: SbThemeService) {}\n        }, 'sb-calendar-month'\n      ), Color.PRIMARY\n    ), 0\n  )\n);\n\n@Component({\n  selector: 'sb-calendar-month',\n  templateUrl: './calendar-month.component.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.marked]': 'isMarked',\n    '[class.start]': 'isStart',\n    '[class.end]': 'isEnd',\n    '[class.between]': 'isBetween',\n    '[class.disabled]': 'disabled',\n    '(click)': 'handleClick()'\n  },\n  inputs: [\n    'color',\n    'disabled'\n  ],\n})\nexport class SbCalendarMonthComponent extends SbCalendarMonthCore {\n\n  @Output()\n  public select: EventEmitter<Date> = new EventEmitter<Date>();\n\n  @Input()\n  public monthFormat: string = 'MMMM';\n\n  @Input()\n  public month!: Date;\n\n  @Input()\n  public markedDates: MarkedDates = new MarkedDates();\n\n  get isMarked(): boolean {\n    return this.markedDates.isRange && (\n      this.markedDates.isBetweenMonths(this.month) ||\n      this.markedDates.isStartSameMonth(this.month) ||\n      this.markedDates.isEndSameMonth(this.month)\n    ) ||\n    !this.markedDates.isRange && (\n      this.markedDates.isStartSameMonth(this.month) &&\n      this.markedDates.isEndSameMonth(this.month)\n    );\n  }\n\n  get isStart(): boolean {\n    return this.markedDates.isRangeMonths && this.markedDates.isStartSameMonth(this.month);\n  }\n\n  get isEnd(): boolean {\n    return this.markedDates.isRangeMonths && this.markedDates.isEndSameMonth(this.month);\n  }\n\n  get isBetween(): boolean {\n    return this.markedDates.isRangeMonths && this.markedDates.isBetweenMonths(this.month);\n  }\n\n  get monthFormatted(): string {\n    return fns.format(this.month, this.monthFormat);\n  }\n\n  constructor(\n    elementRef: ElementRef,\n    themeService: SbThemeService\n  ) {\n    super(elementRef, themeService);\n  }\n\n  public handleClick(): void {\n    if (!this.disabled) {\n      this.select.emit(this.month);\n    }\n  }\n\n}\n","<span>{{ monthFormatted }}</span>\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { mixinFocus, mixinClassName, Color, mixinDisable } from \"../../core\";\nimport * as fns from \"date-fns\";\nimport { MarkedDates } from \"../marked-dates\";\n\n\nconst SbCalendarMonthsCore = mixinDisable(\n  mixinFocus(\n    mixinClassName(\n      class {\n        constructor(\n          public _elementRef: ElementRef) {}\n      }, 'sb-calendar-months'\n    )\n  )\n);\n\n@Component({\n  selector: 'sb-calendar-months',\n  templateUrl: './calendar-months.component.html',\n  encapsulation: ViewEncapsulation.None,\n  inputs: [\n    'disabled'\n  ],\n  outputs: [\n    'focus',\n    'blur'\n  ],\n})\nexport class SbCalendarMonthsComponent extends SbCalendarMonthsCore {\n\n  @Input()\n  public color: string | undefined = Color.PRIMARY;\n\n  @Input()\n  public monthFormat: string = 'MMMM';\n\n  @Output()\n  public select: EventEmitter<Date> = new EventEmitter<Date>();\n  public handleSelect(date: Date): void {\n    this.select.emit(date);\n  }\n\n  private _showingYearStart: Date = fns.startOfYear(new Date())\n  @Input()\n  set showingYearStart(date: Date) {\n    this._showingYearStart = fns.startOfYear(date);\n    this.updateCalendarMonths()\n  }\n  get showingYearStart(): Date {\n    return this._showingYearStart;\n  }\n\n  public calendarMonths!: Array<Date>;\n\n  @Input()\n  public markedDates: MarkedDates = new MarkedDates();\n\n  constructor(\n    elementRef: ElementRef\n  ) {\n    super(elementRef);\n    this.updateCalendarMonths();\n  }\n\n  private updateCalendarMonths(): void {\n    this.calendarMonths = new Array<Date>();\n    for (let month = 0 ; month < 12 ; month++) {\n      this.calendarMonths.push(fns.addMonths(this.showingYearStart, month));\n    }\n  }\n\n}\n","<sb-calendar-month\n  *ngFor=\"let month of calendarMonths\"\n  [color]=\"color\"\n  [month]=\"month\"\n  [monthFormat]=\"monthFormat\"\n  [markedDates]=\"markedDates\"\n  (select)=\"handleSelect($event)\"\n  (focus)=\"setFocusedState(true)\"\n  (blur)=\"setFocusedState(false)\"\n  [disabled]=\"disabled\">\n</sb-calendar-month>\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\nimport { SbThemeService, mixinColor, mixinClassName, Color, mixinTabindex, mixinDisable } from \"../../core\";\nimport * as fns from \"date-fns\";\nimport { MarkedDates } from \"../marked-dates\";\n\nconst SbCalendarYearCore = mixinDisable(\n  mixinTabindex(\n    mixinColor(\n      mixinClassName(\n