xui/fesm2022/xui.mjs.map

xUI Components for Angular

{"version":3,"file":"xui.mjs","sources":["../../../../libs/xui/src/config/config.ts","../../../../libs/xui/src/config/config.service.ts","../../../../libs/xui/src/config/configure.directive.ts","../../../../libs/xui/src/config/config.module.ts","../../../../libs/xui/src/badge/badge.component.ts","../../../../libs/xui/src/badge/badge.module.ts","../../../../libs/xui/src/utils/basic.ts","../../../../libs/xui/src/utils/delay.ts","../../../../libs/xui/src/utils/convert.ts","../../../../libs/xui/src/icon/icon.component.ts","../../../../libs/xui/src/banner/banner.component.ts","../../../../libs/xui/src/banner/banner.component.html","../../../../libs/xui/src/icon/icon.module.ts","../../../../libs/xui/src/banner/banner.module.ts","../../../../libs/xui/src/button/button-group.component.ts","../../../../libs/xui/src/button/button.component.ts","../../../../libs/xui/src/button/button.module.ts","../../../../libs/xui/src/card/card.component.ts","../../../../libs/xui/src/card/card.component.html","../../../../libs/xui/src/card/card-actions.directive.ts","../../../../libs/xui/src/card/card-title.directive.ts","../../../../libs/xui/src/card/card.module.ts","../../../../libs/xui/src/checkbox/checkbox.component.ts","../../../../libs/xui/src/checkbox/checkbox.module.ts","../../../../libs/xui/src/context-menu/context-menu.component.ts","../../../../libs/xui/src/context-menu/menu-trigger-for.directive.ts","../../../../libs/xui/src/context-menu/context-menu-trigger-for.directive.ts","../../../../libs/xui/src/context-menu/context-menu.module.ts","../../../../libs/xui/src/input/input.types.ts","../../../../libs/xui/src/input/input.component.ts","../../../../libs/xui/src/input/input.component.html","../../../../libs/xui/src/input/input-group.component.ts","../../../../libs/xui/src/input/input-addon.ts","../../../../libs/xui/src/input/input.module.ts","../../../../libs/xui/src/date-picker/date-picker.component.ts","../../../../libs/xui/src/date-picker/date-picker.component.html","../../../../libs/xui/src/date-picker/date-picker.module.ts","../../../../libs/xui/src/decagram/decagram.component.ts","../../../../libs/xui/src/decagram/decagram.module.ts","../../../../libs/xui/src/divider/divider.component.ts","../../../../libs/xui/src/divider/divider.module.ts","../../../../libs/xui/src/drawer/drawer.component.ts","../../../../libs/xui/src/drawer/drawer.component.html","../../../../libs/xui/src/drawer/drawer-item-template.directive.ts","../../../../libs/xui/src/drawer/drawer-header-template.directive.ts","../../../../libs/xui/src/drawer/drawer-footer-template.directive.ts","../../../../libs/xui/src/drawer/drawer.module.ts","../../../../libs/xui/src/image-upload/image-upload-cropper.ts","../../../../libs/xui/src/image-upload/image-upload.component.ts","../../../../libs/xui/src/image-upload/image-upload.component.html","../../../../libs/xui/src/image-upload/image-upload.module.ts","../../../../libs/xui/src/layout/sider.component.ts","../../../../libs/xui/src/layout/layout.component.ts","../../../../libs/xui/src/layout/header.component.ts","../../../../libs/xui/src/layout/content.component.ts","../../../../libs/xui/src/layout/footer.component.ts","../../../../libs/xui/src/layout/layout.module.ts","../../../../libs/xui/src/menu/menu.service.ts","../../../../libs/xui/src/menu/menu.component.ts","../../../../libs/xui/src/menu/menu.component.html","../../../../libs/xui/src/menu/submenu.service.ts","../../../../libs/xui/src/menu/submenu/submenu.component.ts","../../../../libs/xui/src/menu/submenu/submenu.component.html","../../../../libs/xui/src/menu/menu-group.component.ts","../../../../libs/xui/src/menu/menu-item.component.ts","../../../../libs/xui/src/menu/menu.module.ts","../../../../libs/xui/src/panelbar/panelbar.types.ts","../../../../libs/xui/src/panelbar/panelbar-item.component.ts","../../../../libs/xui/src/panelbar/panelbar-item.component.html","../../../../libs/xui/src/panelbar/panelbar.component.ts","../../../../libs/xui/src/panelbar/panelbar.component.html","../../../../libs/xui/src/panelbar/panelbar-item-template.directive.ts","../../../../libs/xui/src/panelbar/panelbar-item-title.directive.ts","../../../../libs/xui/src/panelbar/panelbar-item-content.directive.ts","../../../../libs/xui/src/panelbar/panelbar.module.ts","../../../../libs/xui/src/popover/popover.component.ts","../../../../libs/xui/src/popover/popover.component.html","../../../../libs/xui/src/popover/popover-trigger-for.directive.ts","../../../../libs/xui/src/popover/popover.module.ts","../../../../libs/xui/src/progress/progress.component.ts","../../../../libs/xui/src/progress/progress.component.html","../../../../libs/xui/src/progress/progress.module.ts","../../../../libs/xui/src/radio/radio.types.ts","../../../../libs/xui/src/radio/radio.component.ts","../../../../libs/xui/src/radio/radio-group.component.ts","../../../../libs/xui/src/radio/radio.module.ts","../../../../libs/xui/src/radio-list/radio-list.types.ts","../../../../libs/xui/src/radio-list/radio-option.component.ts","../../../../libs/xui/src/radio-list/radio-list.component.ts","../../../../libs/xui/src/radio-list/radio-list.module.ts","../../../../libs/xui/src/select/select.types.ts","../../../../libs/xui/src/select/option.component.ts","../../../../libs/xui/src/select/select.component.ts","../../../../libs/xui/src/select/select.component.html","../../../../libs/xui/src/select/select.module.ts","../../../../libs/xui/src/utils/animations.ts","../../../../libs/xui/src/settings/settings.component.ts","../../../../libs/xui/src/settings/settings.component.html","../../../../libs/xui/src/settings/settings.module.ts","../../../../libs/xui/src/tooltip/tooltip.component.ts","../../../../libs/xui/src/tooltip/tooltip.directive.ts","../../../../libs/xui/src/slider/slider.component.ts","../../../../libs/xui/src/slider/slider.component.html","../../../../libs/xui/src/tooltip/tooltip.module.ts","../../../../libs/xui/src/slider/slider.module.ts","../../../../libs/xui/src/snackbar/snack-bar-config.ts","../../../../libs/xui/src/snackbar/simple-snackbar.component.ts","../../../../libs/xui/src/snackbar/snackbar.module.ts","../../../../libs/xui/src/snackbar/snackbar.service.ts","../../../../libs/xui/src/spinner/spinner.component.ts","../../../../libs/xui/src/spinner/spinner.module.ts","../../../../libs/xui/src/status/status.component.ts","../../../../libs/xui/src/status/status.module.ts","../../../../libs/xui/src/switch/switch.component.ts","../../../../libs/xui/src/switch/switch.component.html","../../../../libs/xui/src/switch/switch.module.ts","../../../../libs/xui/src/tabs/tab.component.ts","../../../../libs/xui/src/tabs/tab-group.component.ts","../../../../libs/xui/src/tabs/tab.module.ts","../../../../libs/xui/src/textarea/textarea.component.ts","../../../../libs/xui/src/textarea/textarea.component.html","../../../../libs/xui/src/textarea/textarea.module.ts","../../../../libs/xui/src/time-picker/time-picker.types.ts","../../../../libs/xui/src/time-picker/time-picker.component.ts","../../../../libs/xui/src/time-picker/time-picker.component.html","../../../../libs/xui/src/time-picker/time-picker.module.ts","../../../../libs/xui/src/toggle/toggle.component.ts","../../../../libs/xui/src/toggle/toggle.module.ts","../../../../libs/xui/src/theming/theming.service.ts","../../../../libs/xui/src/xui.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { InputColor, InputSize } from '../input';\nimport { ButtonColor, ButtonSize, ButtonType } from '../button';\nimport { BadgeColor } from '../badge';\nimport { BannerType } from '../banner';\nimport { CheckboxColor } from '../checkbox/checkbox.types';\nimport { DatePickerColor, DatePickerSize } from '../date-picker';\n\nexport const BADGE_MODULE = 'badge';\nexport const BANNER_MODULE = 'banner';\nexport const BUTTON_MODULE = 'button';\nexport const CHECKBOX_MODULE = 'checkbox';\nexport const DATE_PICKER_MODULE = 'datePicker';\n\n// TODO: finish these\nexport const DECAGRAM_MODULE = 'decagram';\nexport const DIVIDER_MODULE = 'divider';\nexport const IMAGE_UPLOAD_MODULE = 'imageUpload';\nexport const INPUT_MODULE = 'input';\nexport const LAYOUT_MODULE = 'layout';\n// export const MENU_MODULE\n\nexport interface XuiConfig {\n  badge?: BadgeConfig;\n  banner?: BannerConfig;\n  button?: ButtonConfig;\n  input?: InputConfig;\n  checkbox?: CheckboxConfig;\n  datePicker?: DatePickerConfig;\n}\n\nexport interface BadgeConfig {\n  color?: BadgeColor;\n}\n\nexport interface BannerConfig {\n  type?: BannerType;\n  dismissible?: boolean;\n}\n\nexport interface ButtonConfig {\n  stateDelay?: number;\n\n  type?: ButtonType;\n  color?: ButtonColor;\n  size?: ButtonSize;\n}\n\nexport interface CheckboxConfig {\n  color?: CheckboxColor;\n  disabled?: boolean;\n}\n\nexport interface DatePickerConfig {\n  color?: DatePickerColor;\n  size?: DatePickerSize;\n}\n\nexport interface InputConfig {\n  color?: InputColor;\n  size?: InputSize;\n}\n\nexport const XUI_CONFIG = new InjectionToken<XuiConfig>('xui-config');\n","import { Inject, Injectable, Optional } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\nimport { filter, mapTo } from 'rxjs/operators';\nimport { XuiConfig, XUI_CONFIG } from './config';\n\nexport type XuiConfigKey = keyof XuiConfig;\n\nconst isDefined = function (value?: any): boolean {\n  return value !== undefined;\n};\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class XuiConfigService {\n  private configUpdated$ = new Subject<XuiConfigKey>();\n  private readonly config: XuiConfig;\n\n  constructor(@Optional() @Inject(XUI_CONFIG) defaultConfig?: XuiConfig) {\n    this.config = defaultConfig ? JSON.parse(JSON.stringify(defaultConfig)) : {};\n  }\n\n  getConfigForComponent<T extends XuiConfigKey>(componentName: T): XuiConfig[T] {\n    return this.config[componentName];\n  }\n\n  getConfigChangeEventForComponent(componentName: XuiConfigKey): Observable<void> {\n    return this.configUpdated$.pipe(\n      filter(n => n === componentName),\n      mapTo(undefined)\n    );\n  }\n\n  set<T extends XuiConfigKey>(componentName: T, value: XuiConfig[T]): void {\n    this.config[componentName] = { ...this.config[componentName], ...value };\n    this.configUpdated$.next(componentName);\n  }\n}\n\nexport function WithConfig<T>() {\n  return function ConfigDecorator(target: any, propName: any, originalDescriptor?: TypedPropertyDescriptor<T>): any {\n    const privatePropName = `$$__assignedValue__${propName}`;\n\n    Object.defineProperty(target, privatePropName, {\n      configurable: true,\n      writable: true,\n      enumerable: false\n    });\n\n    return {\n      get(): T | undefined {\n        const originalValue = originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];\n        const assignedByUser = ((this.assignmentCount || {})[propName] || 0) > 1;\n\n        if (assignedByUser && isDefined(originalValue)) {\n          return originalValue;\n        }\n\n        const componentConfig = this.configService.getConfigForComponent(this._moduleName) || {};\n        const configValue = componentConfig[propName];\n\n        return isDefined(configValue) ? configValue : originalValue;\n      },\n\n      set(value?: T): void {\n        // If the value is assigned, we consider the newly assigned value as 'assigned by user'.\n        this.assignmentCount = this.assignmentCount || {};\n        this.assignmentCount[propName] = (this.assignmentCount[propName] || 0) + 1;\n\n        if (originalDescriptor?.set) {\n          originalDescriptor.set.bind(this)(value!);\n        } else {\n          this[privatePropName] = value;\n        }\n      },\n      configurable: true,\n      enumerable: true\n    };\n  };\n}\n","import { Directive, Input } from '@angular/core';\nimport { InputColor, InputSize } from '../input/input.types';\nimport {\n  BADGE_MODULE,\n  BANNER_MODULE,\n  BUTTON_MODULE,\n  CHECKBOX_MODULE,\n  DATE_PICKER_MODULE,\n  INPUT_MODULE\n} from './config';\nimport { ButtonColor, ButtonSize, ButtonType } from '../button/button.types';\nimport { XuiConfigService } from './config.service';\nimport { BadgeColor } from '../badge';\nimport { BannerType } from '../banner';\nimport { CheckboxColor } from '../checkbox/checkbox.types';\nimport { DatePickerColor, DatePickerSize } from '../date-picker';\n\n@Directive({\n  selector: '[xuiConfigure]',\n  providers: [XuiConfigService]\n})\nexport class ConfigureDirective {\n  // Badge\n  @Input() set xuiBadgeColor(color: BadgeColor) {\n    this.configService.set(BADGE_MODULE, { color });\n  }\n\n  // Banner\n  @Input() set xuiBannerType(type: BannerType) {\n    this.configService.set(BANNER_MODULE, { type });\n  }\n\n  @Input() set xuiBannerDismissible(dismissible: boolean) {\n    this.configService.set(BANNER_MODULE, { dismissible });\n  }\n\n  // Button\n  @Input() set xuiButtonType(type: ButtonType) {\n    this.configService.set(BUTTON_MODULE, { type });\n  }\n\n  @Input() set xuiButtonColor(color: ButtonColor) {\n    this.configService.set(BUTTON_MODULE, { color });\n  }\n\n  @Input() set xuiButtonSize(size: ButtonSize) {\n    this.configService.set(BUTTON_MODULE, { size });\n  }\n\n  // Checkbox\n  @Input() set xuiCheckboxColor(color: CheckboxColor) {\n    this.configService.set(CHECKBOX_MODULE, { color });\n  }\n\n  @Input() set xuiCheckboxDisabled(disabled: boolean) {\n    this.configService.set(CHECKBOX_MODULE, { disabled });\n  }\n\n  // Date Picker\n  @Input() set xuiDatePickerColor(color: DatePickerColor) {\n    this.configService.set(DATE_PICKER_MODULE, { color });\n  }\n\n  @Input() set xuiDatePickerSize(size: DatePickerSize) {\n    this.configService.set(DATE_PICKER_MODULE, { size });\n  }\n\n  // TODO: implement these\n\n  // Input\n  @Input() set xuiInputColor(color: InputColor) {\n    this.configService.set(INPUT_MODULE, { color });\n  }\n\n  @Input() set xuiInputSize(size: InputSize) {\n    this.configService.set(INPUT_MODULE, { size });\n  }\n\n  constructor(private configService: XuiConfigService) {}\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ConfigureDirective } from './configure.directive';\n\n@NgModule({\n  declarations: [ConfigureDirective],\n  exports: [ConfigureDirective],\n  imports: [CommonModule]\n})\nexport class XuiConfigModule {}\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { BadgeColor } from './badge.types';\nimport { BADGE_MODULE, WithConfig, XuiConfigService } from '../config';\n\n@Component({\n  selector: 'xui-badge',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<div [ngClass]=\"styles\"><ng-content></ng-content></div>`\n})\nexport class BadgeComponent {\n  private readonly _moduleName = BADGE_MODULE;\n\n  @Input() @WithConfig() color: BadgeColor = 'primary';\n\n  get styles() {\n    const ret: { [klass: string]: boolean } = {\n      'x-badge': true\n    };\n\n    ret[`x-badge-${this.color}`] = true;\n\n    return ret;\n  }\n\n  constructor(private configService: XuiConfigService) {}\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BadgeComponent } from './badge.component';\n\n@NgModule({\n  declarations: [BadgeComponent],\n  imports: [CommonModule],\n  exports: [BadgeComponent]\n})\nexport class XuiBadgeModule {}\n","import { Subject } from 'rxjs';\nimport { take } from 'rxjs/operators';\n\nexport function parseCss(value: string | number) {\n  if (value == null) {\n    return '';\n  }\n\n  return typeof value === 'string' ? value : `${value}px`;\n}\n\nexport function inNextTick(): Promise<void> {\n  const timer = new Subject<void>();\n  Promise.resolve().then(() => timer.next());\n  return timer.pipe(take(1)).toPromise();\n}\n","export async function delay(ms: number) {\n  return new Promise(resolve => setTimeout(resolve, ms));\n}\n","import { coerceBooleanProperty, coerceCssPixelValue, _isNumberValue } from '@angular/cdk/coercion';\n\nexport function toBoolean(value: boolean | string): boolean {\n  return coerceBooleanProperty(value);\n}\n\nexport function toNumber(value: number | string): number;\nexport function toNumber<D>(value: number | string, fallback: D): number | D;\nexport function toNumber(value: number | string, fallbackValue: number = 0): number {\n  return _isNumberValue(value) ? Number(value) : fallbackValue;\n}\n\nexport function toCssPixel(value: number | string): string {\n  return coerceCssPixelValue(value);\n}\n\nfunction propDecoratorFactory<T, D>(name: string, fallback: (v: T) => D): (target: any, propName: string) => void {\n  function propDecorator(target: any, propName: string, originalDescriptor?: TypedPropertyDescriptor<any>): any {\n    const privatePropName = `$$__${propName}`;\n\n    if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {\n      console.warn(`The prop \"${privatePropName}\" already exists and it will be overridden by ${name} decorator.`);\n    }\n\n    Object.defineProperty(target, privatePropName, {\n      configurable: true,\n      writable: true\n    });\n\n    return {\n      get(): string {\n        return originalDescriptor?.get ? originalDescriptor.get.bind(this)() : this[privatePropName];\n      },\n      set(value: T): void {\n        if (originalDescriptor?.set) {\n          originalDescriptor.set.bind(this)(fallback(value));\n        }\n\n        this[privatePropName] = fallback(value);\n      }\n    };\n  }\n\n  return propDecorator;\n}\n\nexport function InputBoolean(): any {\n  return propDecoratorFactory('InputBoolean', toBoolean);\n}\n\nexport function InputCssPixel(): any {\n  return propDecoratorFactory('InputCssPixel', toCssPixel);\n}\n\nexport function InputNumber(fallbackValue?: any): any {\n  return propDecoratorFactory('InputNumber', (value: string | number) => toNumber(value, fallbackValue));\n}\n","import { Component, ElementRef, ViewChild } from '@angular/core';\n\n@Component({\n  selector: 'xui-icon',\n  // changeDetection: ChangeDetectionStrategy.OnPush, not working with checkbox\n  template: `<mat-icon [svgIcon]=\"icon\"></mat-icon>\n    <span style=\"display: none\" #iconName><ng-content></ng-content></span>`\n})\nexport class IconComponent {\n  @ViewChild('iconName', { static: true }) input!: ElementRef;\n\n  get icon() {\n    return this.input.nativeElement.innerHTML;\n  }\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';\nimport { InputBoolean } from '../utils';\nimport { BannerType } from './banner.types';\nimport { BANNER_MODULE, WithConfig, XuiConfigService } from '../config';\n\n@Component({\n  selector: 'xui-banner',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './banner.component.html'\n})\nexport class BannerComponent {\n  static ngAcceptInputType_dismissible: BooleanInput;\n  private readonly _moduleName = BANNER_MODULE;\n\n  @Input() @WithConfig() type: BannerType = 'info';\n  @Input() stamp!: string;\n  @Input() @InputBoolean() @WithConfig() dismissible = false;\n  @Output() bannerClose = new EventEmitter();\n\n  get styles() {\n    const ret: { [klass: string]: boolean } = {\n      'x-banner': true,\n      'x-banner-dismissible': this.dismissible\n    };\n    ret[`x-banner-${this.type}`] = true;\n\n    return ret;\n  }\n\n  constructor(private configService: XuiConfigService) {}\n\n  @HostListener('click')\n  dismiss() {\n    this.bannerClose.emit();\n  }\n}\n","<div [ngClass]=\"styles\">\n  <div *ngIf=\"stamp\" class=\"x-banner-stamp\">\n    {{ stamp }}\n  </div>\n  <ng-content></ng-content>\n  <xui-icon *ngIf=\"dismissible\" class=\"x-banner-close\">close-thick</xui-icon>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconComponent } from './icon.component';\nimport { MatIconModule } from '@angular/material/icon';\n\n@NgModule({\n  imports: [CommonModule, MatIconModule],\n  declarations: [IconComponent],\n  exports: [IconComponent]\n})\nexport class XuiIconModule {}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { BannerComponent } from './banner.component';\nimport { XuiIconModule } from '../icon';\n\n@NgModule({\n  imports: [CommonModule, XuiIconModule],\n  declarations: [BannerComponent],\n  exports: [BannerComponent]\n})\nexport class XuiBannerModule {}\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { ButtonColor, ButtonSize, ButtonType } from './button.types';\n\n@Component({\n  selector: 'xui-button-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '<ng-content></ng-content>'\n})\nexport class ButtonGroupComponent {\n  @Input() type?: ButtonType;\n  @Input() size?: ButtonSize;\n  @Input() color?: ButtonColor;\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Host,\n  HostListener,\n  Input,\n  Optional,\n  Output\n} from '@angular/core';\nimport { BUTTON_MODULE, WithConfig, XuiConfigService } from '../config';\nimport { delay, InputBoolean, InputNumber } from '../utils';\nimport { ButtonColor, ButtonSize, ButtonType } from './button.types';\nimport { ButtonGroupComponent } from './button-group.component';\n\n@Component({\n  selector: 'xui-button',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      [ngClass]=\"styles\"\n      [attr.disabled]=\"disabled || null\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      (click)=\"_onAsync($event)\"\n    >\n      <div class=\"x-button-content\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"x-button-state-image\"></div>\n      <div class=\"x-button-shine\" *ngIf=\"shine && !disabled\">\n        <div class=\"x-button-shine-inner\">\n          <div class=\"x-button-shine-element\"></div>\n        </div>\n      </div>\n    </div>\n  `\n})\nexport class ButtonComponent {\n  static ngAcceptInputType_shine: BooleanInput;\n  static ngAcceptInputType_disabled: BooleanInput;\n  private readonly _moduleName = BUTTON_MODULE;\n\n  state: 0 | 1 | 2 | 3 = 0;\n\n  @Input() type?: ButtonType;\n  @Input() size?: ButtonSize;\n  @Input() color?: ButtonColor;\n  @Input() @InputBoolean() shine = false;\n  @Input() @InputBoolean() disabled = false;\n  @Input() onClick?: () => Promise<boolean>;\n  @Input() @InputNumber() @WithConfig() stateDelay = 5000;\n\n  // Used to emit event when user interacts with button with spacebar or enter\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  @Output() readonly click = new EventEmitter<unknown>();\n\n  constructor(\n    // TODO: Anchor for popover; consider removing it and refactoring\n    public elementRef: ElementRef,\n    private configService: XuiConfigService,\n    @Optional() @Host() private group: ButtonGroupComponent,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  get styles() {\n    const config = this.configService.getConfigForComponent(BUTTON_MODULE);\n    const ret: { [klass: string]: boolean } = {\n      'x-button': true,\n      'x-button--non-idle': this.state != 0,\n      'x-button--loading': this.state == 1,\n      'x-button--succeeded': this.state == 2,\n      'x-button--failed': this.state === 3\n    };\n\n    ret[`x-button-${this.size ?? this.group?.size ?? config?.size ?? 'medium'}`] = true;\n    ret[`x-button-${this.type ?? this.group?.type ?? config?.type ?? 'normal'}`] = true;\n    ret[`x-button-${this.color ?? this.group?.color ?? config?.color ?? 'primary'}`] = true;\n\n    return ret;\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  @HostListener('keydown.space', ['$event'])\n  async _onAsync(event?: MouseEvent | KeyboardEvent) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this.click.emit(event);\n\n    if (!this.onClick) {\n      return;\n    }\n\n    this.state = 1;\n\n    try {\n      this.state = (await this.onClick()) ? 2 : 3;\n    } catch {\n      this.state = 2;\n    }\n\n    this.cdr.markForCheck();\n    await delay(5000);\n    this.state = 0;\n    this.cdr.markForCheck();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from './button.component';\nimport { ButtonGroupComponent } from './button-group.component';\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [ButtonComponent, ButtonGroupComponent],\n  exports: [ButtonComponent, ButtonGroupComponent]\n})\nexport class XuiButtonModule {}\n","import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';\nimport { Portal, TemplatePortal } from '@angular/cdk/portal';\n\n@Component({\n  selector: 'xui-card',\n  templateUrl: 'card.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class CardComponent implements OnInit {\n  titleDirective?: TemplateRef<unknown>;\n  actionsDirective?: TemplateRef<unknown>;\n\n  titlePortal?: Portal<unknown>;\n  actionsPortal?: Portal<unknown>;\n\n  // @Input() loading!: boolean;\n\n  constructor(private viewContainerRef: ViewContainerRef) {}\n\n  ngOnInit() {\n    if (this.titleDirective) {\n      this.titlePortal = new TemplatePortal(this.titleDirective, this.viewContainerRef);\n    }\n\n    if (this.actionsDirective) {\n      this.actionsPortal = new TemplatePortal(this.actionsDirective, this.viewContainerRef);\n    }\n  }\n}\n","<div class=\"x-card-header\" *ngIf=\"titleDirective\">\n  <ng-template [cdkPortalOutlet]=\"titlePortal\"></ng-template>\n</div>\n\n<div class=\"x-card-content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"x-card-actions\" *ngIf=\"actionsDirective\">\n  <ng-template [cdkPortalOutlet]=\"actionsPortal\"></ng-template>\n</div>\n","import { Directive, TemplateRef } from '@angular/core';\nimport { CardComponent } from './card.component';\n\n@Directive({\n  selector: '[xuiCardActions]',\n  exportAs: 'xuiCardActions'\n})\nexport class CardActionsDirective {\n  constructor(card: CardComponent, templateRef: TemplateRef<unknown>) {\n    card.actionsDirective = templateRef;\n  }\n}\n","import { Directive, TemplateRef } from '@angular/core';\nimport { CardComponent } from './card.component';\n\n@Directive({\n  selector: '[xuiCardTitle]',\n  exportAs: 'xuiCardTitle'\n})\nexport class CardTitleDirective {\n  constructor(card: CardComponent, templateRef: TemplateRef<unknown>) {\n    card.titleDirective = templateRef;\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CardComponent } from './card.component';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { CardActionsDirective } from './card-actions.directive';\nimport { CardTitleDirective } from './card-title.directive';\n\n@NgModule({\n  imports: [CommonModule, PortalModule],\n  declarations: [CardComponent, CardActionsDirective, CardTitleDirective],\n  exports: [CardComponent, CardActionsDirective, CardTitleDirective]\n})\nexport class XuiCardModule {}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  HostListener,\n  Input,\n  OnInit,\n  Optional,\n  Self\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { InputBoolean } from '../utils';\nimport { CheckboxColor } from './checkbox.types';\nimport { BooleanInput } from '@angular/cdk/coercion';\nimport { CHECKBOX_MODULE, WithConfig, XuiConfigService } from '../config';\n\n@Component({\n  selector: 'xui-checkbox',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: ` <div [ngClass]=\"styles\">\n    <div class=\"x-checkbox-box\" tabindex=\"0\" [class.x-checkbox-checked]=\"value\">\n      <svg\n        *ngIf=\"value\"\n        viewBox=\"0 0 24 24\"\n        height=\"100%\"\n        width=\"100%\"\n        preserveAspectRatio=\"xMidYMid meet\"\n        focusable=\"false\"\n      >\n        <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"></path>\n      </svg>\n    </div>\n    <ng-content></ng-content>\n  </div>`\n})\nexport class CheckboxComponent implements ControlValueAccessor, OnInit {\n  static ngAcceptInputType_disabled: BooleanInput;\n  static ngAcceptInputType_value: BooleanInput;\n  private readonly _moduleName = CHECKBOX_MODULE;\n\n  private onChange?: (source: boolean) => void;\n  private onTouched?: () => void;\n  private _value = false;\n\n  @Input() @InputBoolean() @WithConfig() disabled = false;\n  @Input() @WithConfig() color: CheckboxColor = 'primary';\n\n  get styles() {\n    const ret: { [klass: string]: boolean } = {\n      'x-checkbox': true,\n      'x-checkbox-disabled': this.disabled\n    };\n\n    ret[`x-checkbox-${this.color}`] = true;\n    return ret;\n  }\n\n  @Input()\n  @InputBoolean()\n  get value() {\n    return this._value;\n  }\n\n  set value(v) {\n    if (this._value !== v) {\n      this._value = v;\n      this.onChange?.(v);\n    }\n  }\n\n  constructor(\n    private configService: XuiConfigService,\n    private cdr: ChangeDetectorRef,\n    @Self() @Optional() public control?: NgControl\n  ) {\n    if (this.control) {\n      this.control.valueAccessor = this;\n    }\n  }\n\n  ngOnInit() {\n    this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());\n  }\n\n  writeValue(source: boolean) {\n    this.value = source;\n  }\n\n  registerOnChange(onChange: (source: boolean) => void) {\n    this.onChange = onChange;\n  }\n\n  registerOnTouched(onTouched: () => void) {\n    this.onTouched = onTouched;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  @HostListener('focusout')\n  private _focusOut() {\n    this.onTouched?.();\n  }\n\n  @HostListener('click')\n  @HostListener('keydown.enter', ['$event'])\n  @HostListener('keydown.space', ['$event'])\n  private _click(event: KeyboardEvent) {\n    event?.preventDefault();\n\n    if (!this.disabled) {\n      this.value = !this.value;\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { CheckboxComponent } from './checkbox.component';\n\n@NgModule({\n  declarations: [CheckboxComponent],\n  imports: [CommonModule],\n  exports: [CheckboxComponent]\n})\nexport class XuiCheckboxModule {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  EventEmitter,\n  HostListener,\n  Input,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChild,\n  ViewContainerRef\n} from '@angular/core';\nimport { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { ButtonComponent } from '../button';\nimport { first } from 'rxjs';\nimport { ContextMenuAnchor } from './context-menu.types';\n\n@Component({\n  selector: 'xui-context-menu',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ng-template #templateRef>\n      <div class=\"x-context-menu\" cdkTrapFocus (click)=\"close()\">\n        <ng-content></ng-content>\n      </div>\n    </ng-template>\n  `\n})\nexport class ContextMenuComponent {\n  private overlayRef!: OverlayRef;\n\n  @Input() anchor!: ContextMenuAnchor;\n  @Output() afterClosed = new EventEmitter();\n\n  @ViewChild('templateRef', { static: true }) templateRef!: TemplateRef<unknown>;\n  @ContentChildren(ButtonComponent) buttons!: QueryList<ButtonComponent>;\n\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {\n    const config: OverlayConfig = {\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: true,\n      backdropClass: 'x-context-menu-backdrop'\n    };\n\n    this.overlayRef = this.overlay.create(config);\n    this.overlayRef.backdropClick().subscribe(() => {\n      this.close();\n    });\n  }\n\n  open(anchor?: ContextMenuAnchor) {\n    this.overlayRef.updatePositionStrategy(this.calculatePositionStrategy(anchor ?? this.anchor));\n\n    const userProfilePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);\n    this.overlayRef.attach(userProfilePortal);\n\n    for (const btn of this.buttons) {\n      btn.click.pipe(first()).subscribe(() => this.close());\n    }\n  }\n\n  private calculatePositionStrategy(anchor: ContextMenuAnchor) {\n    return this.overlay\n      .position()\n      .flexibleConnectedTo((anchor as any)?.elementRef ?? anchor)\n      .withPositions([\n        new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })\n      ])\n      .withPush(false);\n  }\n\n  @HostListener('document:keydown.esc')\n  close() {\n    this.overlayRef.detach();\n    this.afterClosed.emit();\n  }\n}\n","import { Directive, ElementRef, HostListener, Input } from '@angular/core';\nimport { ContextMenuComponent } from './context-menu.component';\n\n@Directive({\n  selector: '[xuiMenuTriggerFor]',\n  exportAs: 'xuiMenuTriggerFor'\n})\nexport class MenuTriggerForDirective {\n  @Input('xuiMenuTriggerFor') menu!: ContextMenuComponent;\n\n  constructor(private elementRef: ElementRef) {}\n\n  @HostListener('click')\n  private _click() {\n    this.menu.open(this.elementRef);\n  }\n}\n","import { Directive, ElementRef, HostListener, Input } from '@angular/core';\nimport { ContextMenuComponent } from './context-menu.component';\n\n@Directive({\n  selector: '[xuiContextMenuTriggerFor]',\n  exportAs: 'xuiContextMenuTriggerFor'\n})\nexport class ContextMenuTriggerForDirective {\n  @Input('xuiContextMenuTriggerFor') menu!: ContextMenuComponent;\n\n  constructor(private elementRef: ElementRef) {}\n\n  @HostListener('contextmenu', ['$event'])\n  private _click(event: MouseEvent) {\n    this.menu.open(this.elementRef);\n    event.preventDefault();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ContextMenuComponent } from './context-menu.component';\nimport { CdkMenuModule } from '@angular/cdk/menu';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { MenuTriggerForDirective } from './menu-trigger-for.directive';\nimport { ContextMenuTriggerForDirective } from './context-menu-trigger-for.directive';\n\n@NgModule({\n  declarations: [ContextMenuComponent, MenuTriggerForDirective, ContextMenuTriggerForDirective],\n  imports: [CommonModule, CdkMenuModule, A11yModule],\n  exports: [ContextMenuComponent, CdkMenuModule, MenuTriggerForDirective, ContextMenuTriggerForDirective]\n})\nexport class XuiContextMenuModule {}\n","import { InjectionToken } from '@angular/core';\n\nexport type InputSize = 'large' | 'small';\nexport type InputColor = 'light' | 'dark';\nexport type InputType = 'text' | 'password' | 'color' | 'date' | 'email' | 'number';\n\nexport const INPUT_GROUP_ACCESSOR = new InjectionToken<InputGroupAccessor>('xui-input-group');\nexport interface InputGroupAccessor {\n  size?: InputSize;\n}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  HostListener,\n  Inject,\n  Input,\n  OnInit,\n  Optional,\n  Self\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { TranslateService } from '@ngx-translate/core';\nimport { InputBoolean } from '../utils';\nimport { INPUT_GROUP_ACCESSOR, InputColor, InputGroupAccessor, InputSize, InputType } from './input.types';\nimport { BooleanInput } from '@angular/cdk/coercion';\nimport { INPUT_MODULE, WithConfig, XuiConfigService } from '../config';\n\n@Component({\n  selector: 'xui-input',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: 'input.component.html'\n})\nexport class InputComponent implements ControlValueAccessor, OnInit {\n  static ngAcceptInputType_disabled: BooleanInput;\n  static ngAcceptInputType_readOnly: BooleanInput;\n  private readonly _moduleName = INPUT_MODULE;\n\n  private onChange?: (source: string | null) => void;\n  private onTouched?: () => void;\n  private _value: string | null = null;\n\n  @Input() placeholder?: string;\n  @Input() @InputBoolean() disabled = false;\n  @Input() @InputBoolean() readOnly = false;\n  @Input() @WithConfig() color: InputColor = 'light';\n  @Input() @WithConfig() size: InputSize = 'large';\n  @Input() type: InputType = 'text';\n  @Input() dataList?: string[] | null;\n\n  @Input()\n  get value() {\n    return this._value;\n  }\n\n  set value(v) {\n    if (this._value !== v) {\n      this._value = v;\n      this.onChange?.(v);\n      this.cdr.markForCheck();\n    }\n  }\n\n  get styles() {\n    const ret: { [klass: string]: boolean } = {\n      'x-input': true,\n      'x-input-error': this.showError\n    };\n\n    ret[`x-input-${this.color}`] = true;\n    ret[`x-input-${this.group?.size ?? this.size}`] = true;\n    return ret;\n  }\n\n  get errorMessage() {\n    const msg = this.control?.getError('message');\n    return this.translation.instant(msg);\n  }\n\n  constructor(\n    private configService: XuiConfigService,\n    private cdr: ChangeDetectorRef,\n    private translation: TranslateService,\n    @Inject(INPUT_GROUP_ACCESSOR) @Optional() private group: InputGroupAccessor,\n    @Self() @Optional() public control?: NgControl\n  ) {\n    if (this.control) {\n      this.control.valueAccessor = this;\n    }\n  }\n\n  ngOnInit() {\n    this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());\n  }\n\n  get invalid(): boolean {\n    return !!this.control?.invalid;\n  }\n\n  get showError(): boolean {\n    if (!this.control) {\n      return false;\n    }\n\n    const { dirty, touched } = this.control;\n    return this.invalid ? (dirty ?? false) || (touched ?? false) : false;\n  }\n\n  writeValue(source: string) {\n    this.value = source;\n  }\n\n  registerOnChange(onChange: (source: string | null) => void) {\n    this.onChange = onChange;\n  }\n\n  registerOnTouched(onTouched: () => void) {\n    this.onTouched = onTouched;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  @HostListener('focusout')\n  private _focusOut() {\n    this.onTouched?.();\n  }\n}\n","<div [ngClass]=\"styles\" [tabindex]=\"disabled ? -1 : 0\">\n  <ng-content select=\"[xuiPrefix]\"></ng-content>\n  <input\n    tabindex=\"-1\"\n    [disabled]=\"disabled\"\n    [readOnly]=\"readOnly\"\n    [type]=\"type\"\n    [placeholder]=\"placeholder ?? ''\"\n    [(ngModel)]=\"value\"\n    list=\"list\"\n  />\n  <ng-content select=\"[xuiPostfix]\"></ng-content>\n</div>\n\n<div class=\"x-input-error-text\" *ngIf=\"showError\">\n  <ng-container *ngIf=\"control?.hasError('message')\">{{ errorMessage }}</ng-container>\n  <ng-container *ngIf=\"control?.hasError('required')\">This field is required!</ng-container>\n  <ng-container *ngIf=\"control?.hasError('email')\">Email expected</ng-container>\n</div>\n\n<datalist id=\"list\" *ngIf=\"dataList\">\n  <option *ngFor=\"let item of dataList\" [value]=\"item\"></option>\n</datalist>\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { INPUT_GROUP_ACCESSOR, InputGroupAccessor, InputSize } from './input.types';\n\n@Component({\n  selector: 'xui-input-group',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '<div class=\"x-input-group\"><ng-content></ng-content></div>',\n  providers: [{ provide: INPUT_GROUP_ACCESSOR, useExisting: InputGroupComponent }]\n})\nexport class InputGroupComponent implements InputGroupAccessor {\n  @Input() size?: InputSize;\n\n  constructor() {}\n}\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { InputColor } from './input.types';\n\n@Component({\n  selector: 'xui-input-addon',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '<div [ngClass]=\"styles\"><ng-content></ng-content></div>'\n})\nexport class InputAddonComponent {\n  @Input() color: InputColor = 'dark';\n\n  get styles() {\n    return `x-input-addon x-input-addon-${this.color}`;\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { InputComponent } from './input.component';\nimport { InputGroupComponent } from './input-group.component';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { FormsModule } from '@angular/forms';\nimport { InputAddonComponent } from './input-addon';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, TranslateModule.forChild()],\n  declarations: [InputComponent, InputGroupComponent, InputAddonComponent],\n  exports: [InputComponent, InputGroupComponent, InputAddonComponent]\n})\nexport class XuiInputModule {}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  HostListener,\n  Input,\n  OnInit,\n  Optional,\n  Self,\n  ViewChild\n} from '@angular/core';\nimport { DateTime } from 'luxon';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { InputBoolean } from '../utils';\nimport { InputComponent } from '../input';\nimport { BooleanInput } from '@angular/cdk/coercion';\nimport { DatePickerColor, DatePickerSize } from './date-picker.types';\nimport { DATE_PICKER_MODULE, WithConfig, XuiConfigService } from '../config';\n\n@Component({\n  selector: 'xui-date-picker',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './date-picker.component.html'\n})\nexport class DatePickerComponent implements ControlValueAccessor, OnInit {\n  static ngAcceptInputType_disabled: BooleanInput;\n  static ngAcceptInputType_readOnly: BooleanInput;\n  private readonly _moduleName = DATE_PICKER_MODULE;\n\n  private onChange?: (source: string | null) => void;\n  private onTouched?: () => void;\n  private _value: DateTime | null = null;\n\n  focus!: DateTime;\n  indices = Array.from(Array(7 * 6)).map((x, i) => i);\n  isOpen = false;\n  isFocus = false;\n  mouseDown = false;\n\n  @Input() allowClear?: boolean; // TODO\n  @Input() disabledDate?: (current: DateTime) => boolean;\n  @Input() placeholder?: string;\n  @Input() @InputBoolean() disabled = false;\n  @Input() @InputBoolean() readOnly = false;\n  @Input() @WithConfig() color: DatePickerColor = 'light';\n  @Input() @WithConfig() size: DatePickerSize = 'large';\n\n  @ViewChild(InputComponent, { static: true }) input!: InputComponent;\n\n  @Input()\n  get value() {\n    return this._value?.toISODate() ?? null;\n  }\n\n  set value(v) {\n    if (!v) {\n      this._value = null;\n      this.input.value = null;\n      this.onChange?.(v);\n      this.cdr.markForCheck();\n\n      return;\n    }\n\n    const date = DateTime.fromISO(v).startOf('day');\n    if (this._value !== date) {\n      this._value = date;\n      this.focus = date;\n      this.input.value = date.setLocale('en-us').toLocaleString(DateTime.DATE_MED); // TODO: use globally defined locale\n      this.onChange?.(v);\n      this.cdr.markForCheck();\n    }\n  }\n\n  get styles() {\n    const ret: { [klass: string]: boolean } = {\n      'x-datepicker': true\n    };\n\n    ret[`x-datepicker-${this.color}`] = true;\n    ret[`x-datepicker-${this.size}`] = true;\n    return ret;\n  }\n\n  constructor(\n    private configService: XuiConfigService,\n    private cdr: ChangeDetectorRef,\n    @Self() @Optional() public control?: NgControl\n  ) {\n    if (this.control) {\n      this.control.valueAccessor = this;\n    }\n  }\n\n  ngOnInit() {\n    this.control?.statusChanges?.subscribe(() => this.cdr.markForCheck());\n  }\n\n  getDay(index: number) {\n    return this.focus\n      .startOf('month')\n      .startOf('week')\n      .plus({ days: index - 1 });\n  }\n\n  isSelected(index: number) {\n    return this._value?.toISODate() === this.getDay(index).toISODate();\n  }\n\n  isOutsideOfMonth(index: number) {\n    const day = this.getDay(index);\n    return day < this.focus.startOf('month') || day > this.focus.endOf('month');\n  }\n\n  updateMonth(add: boolean) {\n    this.focus = this.focus.plus({ month: add ? 1 : -1 });\n  }\n\n  onClick(index: number) {\n    const day = this.getDay(index);\n    if (this.disabledDate?.(day)) {\n      return;\n    }\n\n    this.value = day.toISODate();\n    this.close();\n  }\n\n  writeValue(source: string) {\n    this.value = source;\n  }\n\n  registerOnChange(onChange: (source: string | null) => void) {\n    this.onChange = onChange;\n  }\n\n  registerOnTouched(onTouched: () => void) {\n    this.onTouched = onTouched;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n\n  @HostListener('focusout')\n  private _focusOut() {\n    this.onTouched?.();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  @HostListener('keydown.space', ['$event'])\n  private _keyPress(event: KeyboardEvent) {\n    event?.preventDefault();\n    this.open();\n  }\n\n  isFocused(index: number) {\n    return this.focus.toISODate() === this.getDay(index).toISODate();\n  }\n\n  focusMove(days: number) {\n    const day = this.focus.plus({ days });\n    if (this.disabledDate?.(day)) {\n      return;\n    }\n\n    this.focus = day;\n  }\n\n  applyFocused() {\n    this.value = this.focus.toISODate();\n    this.close();\n  }\n\n  open() {\n    this.focus = this._value ?? DateTime.now().startOf('day');\n    this.isOpen = !this.readOnly && !this.disabled;\n  }\n\n  private close() {\n    this.isOpen = false;\n    this.isFocus = false;\n  }\n}\n","<div [ngClass]=\"styles\" [tabindex]=\"disabled ? -1 : 0\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n  <input\n    tabindex=\"-1\"\n    type=\"text\"\n    readonly\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder ?? ''\"\n    [value]=\"value\"\n    (click)=\"open()\"\n  />\n  <xui-icon>calendar</xui-icon>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent'\"\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  (backdropClick)=\"isOpen = false\"\n>\n  <div class=\"x-datepicker-popup\" cdkTrapFocus>\n    <div class=\"x-datepicker-header\">\n      <div\n        class=\"x-datepicker-button\"\n        tabindex=\"0\"\n        (click)=\"updateMonth(false)\"\n        (keydown.enter)=\"updateMonth(false)\"\n        (keydown.space)=\"updateMonth(false)\"\n      >\n        <xui-icon>chevron-left</xui-icon>\n      </div>\n      {{ focus.toFormat('MMMM yyyy') }}\n      <div\n        class=\"x-datepicker-button\"\n        tabindex=\"0\"\n        (click)=\"updateMonth(true)\"\n        (keydown.enter)=\"updateMonth(true)\"\n        (keydown.space)=\"updateMonth(true)\"\n      >\n        <xui-icon>chevron-right</xui-icon>\n      </div>\n    </div>\n\n    <div class=\"x-datepicker-title\">\n      <div>SU</div>\n      <div>MO</div>\n      <div>TU</div>\n      <div>WE</div>\n      <div>TH</div>\n      <div>FR</div>\n      <div>SA</div>\n    </div>\n    <div\n      class=\"x-datepicker-calendar\"\n      tabindex=\"0\"\n      (mousedown)=\"mouseDown = true\"\n      (mouseup)=\"mouseDown = false\"\n      (keydown.enter)=\"applyFocused()\"\n      (keydown.space)=\"applyFocused()\"\n      (keydown.arrowUp)=\"focusMove(-7)\"\n      (keydown.arrowDown)=\"focusMove(7)\"\n      (keydown.arrowLeft)=\"focusMove(-1)\"\n      (keydown.arrowRight)=\"focusMove(1)\"\n      (focusin)=\"isFocus = !mouseDown\"\n      (focusout)=\"isFocus = false\"\n    >\n      <div\n        *ngFor=\"let index of indices\"\n        class=\"x-datepicker-day\"\n        [class.x-datepicker--outside]=\"isOutsideOfMonth(index)\"\n        [class.x-datepicker--disabled]=\"disabledDate?.(getDay(index))\"\n        [class.x-datepicker--selected]=\"isSelected(index)\"\n        [class.x-datepicker--focused]=\"isFocused(index) && isFocus\"\n        (click)=\"onClick(index)\"\n      >\n        {{ getDay(index).day }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DatePickerComponent } from './date-picker.component';\nimport { XuiIconModule } from '../icon';\nimport { XuiInputModule } from '../input';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ReactiveFormsModule } from '@angular/forms';\n\n@NgModule({\n  declarations: [DatePickerComponent],\n  exports: [DatePickerComponent],\n  imports: [CommonModule, XuiIconModule, XuiInputModule, OverlayModule, A11yModule, ReactiveFormsModule]\n})\nexport class XuiDatePickerModule {}\n","import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { InputNumber } from '../utils';\nimport { DecagramColor, DecagramType } from './decagram.types';\n\n@Component({\n  selector: 'xui-decagram',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <xui-icon [ngClass]=\"style\">{{ this.type }}</xui-icon>\n    <xui-icon [style.width.%]=\"iconSize\" [ngClass]=\"iconStyle\"><ng-content></ng-content></xui-icon>\n  `\n})\nexport class DecagramComponent {\n  @Input() @InputNumber() iconSize = 65;\n  @Input() type: DecagramType = 'decagram';\n  @Input() color: DecagramColor = 'primary';\n\n  get style() {\n    return `x-decagram-${this.color}`;\n  }\n\n  get iconStyle() {\n    const ret: { [klass: string]: boolean } = {\n      'x-decagram-icon': true\n    };\n\n    ret[`x-decagram-${this.type}`] = true;\n    return ret;\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DecagramComponent } from './decagram.component';\nimport { XuiIconModule } from '../icon';\n\n@NgModule({\n  imports: [CommonModule, XuiIconModule],\n  declarations: [DecagramComponent],\n  exports: [DecagramComponent]\n})\nexport class XuiDecagramModule {}\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { InputNumber } from '../utils';\n\n@Component({\n  selector: 'xui-divider',\n  changeDete