@koobiq/components 16.0.0-beta.1

package/datepicker/datepicker-input.directive.d.ts

@@ -0,0 +1,180 @@
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { DateAdapter, KbqDateFormats, KbqLocaleService } from '@koobiq/components/core';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import { KbqDatepicker } from './datepicker.component';
+import * as i0 from "@angular/core";
+export declare const MAX_YEAR = 9999;
+/** @docs-private */
+export declare const KBQ_DATEPICKER_VALUE_ACCESSOR: any;
+/** @docs-private */
+export declare const KBQ_DATEPICKER_VALIDATORS: any;
+/**
+ * An event used for datepicker input and change events. We don't always have access to a native
+ * input or change event because the event may have been triggered by the user clicking on the
+ * calendar popup. For consistency, we always use KbqDatepickerInputEvent instead.
+ */
+export declare class KbqDatepickerInputEvent<D> {
+    /** Reference to the datepicker input component that emitted the event. */
+    target: KbqDatepickerInput<D>;
+    /** Reference to the native input element associated with the datepicker input. */
+    targetElement: HTMLElement;
+    /** The new value for the target datepicker input. */
+    value: D | null;
+    constructor(
+    /** Reference to the datepicker input component that emitted the event. */
+    target: KbqDatepickerInput<D>, 
+    /** Reference to the native input element associated with the datepicker input. */
+    targetElement: HTMLElement);
+}
+/** Directive used to connect an input to a KbqDatepicker. */
+export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, ControlValueAccessor, Validator, OnDestroy {
+    elementRef: ElementRef<HTMLInputElement>;
+    private readonly renderer;
+    readonly adapter: DateAdapter<D>;
+    private readonly dateFormats;
+    private localeService;
+    readonly stateChanges: Subject<void>;
+    readonly errorState: boolean;
+    controlType: string;
+    focused: boolean;
+    datepicker: KbqDatepicker<D>;
+    dateFilter: (date: D | null) => boolean;
+    /** Emits when the value changes (either due to user input or programmatic change). */
+    valueChange: EventEmitter<D | null>;
+    /** Emits when the disabled state has changed */
+    disabledChange: EventEmitter<boolean>;
+    get placeholder(): string;
+    set placeholder(value: string);
+    private _placeholder;
+    get required(): boolean;
+    set required(value: boolean);
+    private _required;
+    /** The datepicker that this input is associated with. */
+    set mcDatepicker(value: KbqDatepicker<D>);
+    /** Function that can be used to filter out dates within the datepicker. */
+    set mcDatepickerFilter(value: (date: D | null) => boolean);
+    /** The value of the input. */
+    get value(): D | null;
+    set value(value: D | null);
+    private _value;
+    /** The minimum valid date. */
+    get min(): D | null;
+    set min(value: D | null);
+    private _min;
+    /** The maximum valid date. */
+    get max(): D | null;
+    set max(value: D | null);
+    private _max;
+    /** Whether the datepicker-input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    get id(): string;
+    set id(value: string);
+    private _id;
+    set mcValidationTooltip(tooltip: KbqWarningTooltipTrigger);
+    incorrectInput: EventEmitter<void>;
+    /** Emits when a `change` event is fired on this `<input>`. */
+    readonly dateChange: EventEmitter<KbqDatepickerInputEvent<D>>;
+    /** Emits when an `input` event is fired on this `<input>`. */
+    readonly dateInput: EventEmitter<KbqDatepickerInputEvent<D>>;
+    get empty(): boolean;
+    get viewValue(): string;
+    get ngControl(): any;
+    get isReadOnly(): boolean;
+    get dateInputFormat(): string;
+    private get readyForParse();
+    private get selectionStart();
+    private set selectionStart(value);
+    private get selectionEnd();
+    private set selectionEnd(value);
+    private control;
+    private readonly uid;
+    private datepickerSubscription;
+    private localeSubscription;
+    /** Whether the last value set on the input was valid. */
+    private lastValueValid;
+    /** The combined form control validator for this input. */
+    private readonly validator;
+    private separator;
+    private firstDigit;
+    private secondDigit;
+    private thirdDigit;
+    private separatorPositions;
+    private usePlaceholderFromInput;
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, adapter: DateAdapter<D>, dateFormats: KbqDateFormats, localeService: KbqLocaleService);
+    onContainerClick(): void;
+    focus(): void;
+    focusChanged(isFocused: boolean): void;
+    onTouched: () => void;
+    ngOnDestroy(): void;
+    /** @docs-private */
+    registerOnValidatorChange(fn: () => void): void;
+    /** @docs-private */
+    validate(control: AbstractControl): ValidationErrors | null;
+    writeValue(value: D): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onInput: () => void;
+    parseOnBlur: () => any;
+    onChange(): void;
+    /** Handles blur events on the input. */
+    onBlur(): void;
+    onPaste($event: any): any;
+    toISO8601(value: D): string;
+    private saveTimePart;
+    private updateLocaleParams;
+    private setFormat;
+    private updateValue;
+    private isKeyForClose;
+    private isKeyForOpen;
+    private isLetterKey;
+    private isKeyForByPass;
+    private spaceKeyHandler;
+    private getNewValue;
+    private setViewValue;
+    private replaceSymbols;
+    private getDateFromString;
+    private getDefaultValue;
+    private getTimeStringFromDate;
+    private getDateEditMetrics;
+    private incrementDate;
+    private getLastDayFor;
+    private decrementDate;
+    private verticalArrowKeyHandler;
+    private changeCaretPosition;
+    private selectDigitByCursor;
+    private selectNextDigitByCursor;
+    private selectNextDigit;
+    /** Checks whether the input is invalid based on the native validation. */
+    private isBadInput;
+    private cvaOnChange;
+    private validatorOnChange;
+    /** The form control validator for whether the input parses. */
+    private parseValidator;
+    /** The form control validator for the min date. */
+    private minValidator;
+    /** The form control validator for the max date. */
+    private maxValidator;
+    /** The form control validator for the date filter. */
+    private filterValidator;
+    /** Formats a value and sets it on the input element. */
+    private formatValue;
+    private setControl;
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    private getValidDateOrNull;
+    private getDigitPositions;
+    private createDate;
+    private createDateTime;
+    private correctCursorPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "mcDatepicker": { "alias": "mcDatepicker"; "required": false; }; "mcDatepickerFilter": { "alias": "mcDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "mcValidationTooltip": { "alias": "mcValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+}

package/datepicker/datepicker-input.scss

@@ -0,0 +1,15 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-form-field-type-datepicker {
+    width: auto;
+}
+
+.kbq-datepicker {
+    width: var(--kbq-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+}

package/datepicker/datepicker-intl.d.ts

@@ -0,0 +1,32 @@
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/** Datepicker data that requires internationalization. */
+export declare class KbqDatepickerIntl {
+    /**
+     * Stream that emits whenever the labels here are changed. Use this to notify
+     * components if the labels have changed after initialization.
+     */
+    readonly changes: Subject<void>;
+    /** A label for the calendar popup (used by screen readers). */
+    calendarLabel: string;
+    /** A label for the button used to open the calendar popup (used by screen readers). */
+    openCalendarLabel: string;
+    /** A label for the previous month button (used by screen readers). */
+    prevMonthLabel: string;
+    /** A label for the next month button (used by screen readers). */
+    nextMonthLabel: string;
+    /** A label for the previous year button (used by screen readers). */
+    prevYearLabel: string;
+    /** A label for the next year button (used by screen readers). */
+    nextYearLabel: string;
+    /** A label for the previous multi-year button (used by screen readers). */
+    prevMultiYearLabel: string;
+    /** A label for the next multi-year button (used by screen readers). */
+    nextMultiYearLabel: string;
+    /** A label for the 'switch to month view' button (used by screen readers). */
+    switchToMonthViewLabel: string;
+    /** A label for the 'switch to year view' button (used by screen readers). */
+    switchToMultiYearViewLabel: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqDatepickerIntl>;
+}

package/datepicker/datepicker-module.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.component";
+import * as i2 from "./calendar-body.component";
+import * as i3 from "./datepicker.component";
+import * as i4 from "./datepicker-input.directive";
+import * as i5 from "./datepicker-toggle.component";
+import * as i6 from "./month-view.component";
+import * as i7 from "./calendar-header.component";
+import * as i8 from "@angular/common";
+import * as i9 from "@koobiq/components/button";
+import * as i10 from "@angular/cdk/overlay";
+import * as i11 from "@angular/cdk/a11y";
+import * as i12 from "@angular/cdk/portal";
+import * as i13 from "@koobiq/components/select";
+import * as i14 from "@koobiq/components/icon";
+export declare class KbqDatepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDatepickerModule, [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader], [typeof i8.CommonModule, typeof i9.KbqButtonModule, typeof i10.OverlayModule, typeof i11.A11yModule, typeof i12.PortalModule, typeof i9.KbqButtonModule, typeof i13.KbqSelectModule, typeof i14.KbqIconModule], [typeof i1.KbqCalendar, typeof i2.KbqCalendarBody, typeof i3.KbqDatepicker, typeof i3.KbqDatepickerContent, typeof i4.KbqDatepickerInput, typeof i5.KbqDatepickerToggle, typeof i5.KbqDatepickerToggleIcon, typeof i6.KbqMonthView, typeof i7.KbqCalendarHeader]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqDatepickerModule>;
+}

package/datepicker/datepicker-toggle.component.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { KbqButton } from '@koobiq/components/button';
+import { KbqDatepickerIntl } from './datepicker-intl';
+import { KbqDatepicker } from './datepicker.component';
+import * as i0 from "@angular/core";
+/** Can be used to override the icon of a `mcDatepickerToggle`. */
+export declare class KbqDatepickerToggleIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerToggleIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
+    intl: KbqDatepickerIntl;
+    private changeDetectorRef;
+    /** Whether the toggle button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Datepicker instance that the button will toggle. */
+    datepicker: KbqDatepicker<D>;
+    /** Tabindex for the toggle. */
+    tabIndex: number | null;
+    /** Custom icon set by the consumer. */
+    customIcon: KbqDatepickerToggleIcon;
+    /** Underlying button element. */
+    button: KbqButton;
+    private stateChanges;
+    private _disabled;
+    constructor(intl: KbqDatepickerIntl, changeDetectorRef: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    open(event: Event): void;
+    private watchStateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerToggle<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerToggle<any>, "kbq-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"], false, never>;
+}

package/datepicker/datepicker-toggle.scss

@@ -0,0 +1,41 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-datepicker-toggle:focus {
+    outline: 0;
+}
+
+.kbq-datepicker-toggle__button.kbq-button-icon {
+    width: var(--kbq-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
+    height: var(--kbq-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
+    margin-left: 2px;
+}
+
+.kbq-form-field-appearance-legacy {
+    .kbq-form-field-prefix,
+    .kbq-form-field-suffix {
+        .kbq-datepicker-toggle__default-icon {
+            width: 1em;
+        }
+    }
+}
+
+.kbq-form-field:not(.kbq-form-field-appearance-legacy) {
+    .kbq-form-field-prefix,
+    .kbq-form-field-suffix {
+        .kbq-datepicker-toggle__default-icon {
+            display: block;
+            width: 1.5em;
+            height: 1.5em;
+        }
+
+        .kbq-button-icon .kbq-datepicker-toggle__default-icon {
+            margin: auto;
+        }
+    }
+}

package/datepicker/datepicker.component.d.ts

@@ -0,0 +1,148 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, OverlayRef, ScrollStrategy } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
+import { DateAdapter } from '@koobiq/components/core';
+import { Subject } from 'rxjs';
+import { KbqCalendarCellCssClasses } from './calendar-body.component';
+import { KbqCalendar } from './calendar.component';
+import { KbqDatepickerInput } from './datepicker-input.directive';
+import * as i0 from "@angular/core";
+/** Injection token that determines the scroll handling while the calendar is open. */
+export declare const KBQ_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+export declare function KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+/** @docs-private */
+export declare const KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY;
+};
+/**
+ * Component used as the content for the datepicker dialog and popup. We use this instead of using
+ * KbqCalendar directly as the content so we can control the initial focus. This also gives us a
+ * place to put additional features of the popup that are not part of the calendar itself in the
+ * future. (e.g. confirmation buttons).
+ * @docs-private
+ */
+export declare class KbqDatepickerContent<D> implements OnDestroy {
+    private changeDetectorRef;
+    /** Emits when an animation has finished. */
+    readonly animationDone: Subject<void>;
+    /** Reference to the datepicker that created the overlay. */
+    datepicker: KbqDatepicker<D>;
+    /** Current state of the animation. */
+    animationState: 'enter' | 'void';
+    /** Reference to the internal calendar component. */
+    calendar: KbqCalendar<D>;
+    private subscriptions;
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    startExitAnimation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerContent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerContent<any>, "kbq-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never, false, never>;
+}
+/** Component responsible for managing the datepicker popup/dialog. */
+export declare class KbqDatepicker<D> implements OnDestroy {
+    private overlay;
+    private ngZone;
+    private viewContainerRef;
+    private readonly dateAdapter;
+    private dir;
+    private document;
+    get hasBackdrop(): boolean;
+    set hasBackdrop(value: boolean);
+    private _hasBackdrop;
+    /** The date to open the calendar to initially. */
+    get startAt(): D | null;
+    set startAt(value: D | null);
+    private _startAt;
+    /** Whether the datepicker pop-up should be disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Whether the calendar is open. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    private _opened;
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    get dateFilter(): (date: D | null) => boolean;
+    get value(): D | null;
+    /** The minimum selectable date. */
+    minDate: D | null;
+    /** The maximum selectable date. */
+    maxDate: D | null;
+    /**
+     * Emits selected year in multiyear view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly yearSelected: EventEmitter<D>;
+    /**
+     * Emits selected month in year view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly monthSelected: EventEmitter<D>;
+    /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */
+    panelClass: string | string[];
+    /** Function that can be used to add custom CSS classes to dates. */
+    dateClass: (date: D) => KbqCalendarCellCssClasses;
+    backdropClass: string;
+    /** Emits when the datepicker has been opened. */
+    openedStream: EventEmitter<void>;
+    /** Emits when the datepicker has been closed. */
+    closedStream: EventEmitter<void>;
+    readonly stateChanges: Subject<void>;
+    /** Emits when the datepicker is disabled. */
+    readonly disabledChange: Subject<boolean>;
+    /** Emits new selected date when selected date changes. */
+    readonly selectedChanged: Subject<D>;
+    /** The id for the datepicker calendar. */
+    id: string;
+    /** A reference to the overlay when the calendar is opened as a popup. */
+    popupRef: OverlayRef | null;
+    /** The input element this datepicker is associated with. */
+    datepickerInput: KbqDatepickerInput<D>;
+    private scrollStrategy;
+    private validSelected;
+    /** A portal containing the calendar for this datepicker. */
+    private calendarPortal;
+    /** Reference to the component instantiated in popup mode. */
+    private popupComponentRef;
+    /** The element that was focused before the datepicker was opened. */
+    private focusedElementBeforeOpen;
+    /** Subscription to value changes in the associated input element. */
+    private inputSubscription;
+    private closeSubscription;
+    constructor(overlay: Overlay, ngZone: NgZone, viewContainerRef: ViewContainerRef, scrollStrategy: any, dateAdapter: DateAdapter<D>, dir: Directionality, document: any);
+    ngOnDestroy(): void;
+    /** Selects the given date */
+    select(date: D): void;
+    /** Emits the selected year in multiyear view */
+    selectYear(normalizedYear: D): void;
+    /** Emits selected month in year view */
+    selectMonth(normalizedMonth: D): void;
+    /**
+     * Register an input with this datepicker.
+     * @param input The datepicker input to register with this datepicker.
+     */
+    registerInput(input: KbqDatepickerInput<D>): void;
+    /** Open the calendar. */
+    open(): void;
+    /** Close the calendar. */
+    close(restoreFocus?: boolean): void;
+    toggle(): void;
+    /** Destroys the current overlay. */
+    private destroyOverlay;
+    /** Open the calendar as a popup. */
+    private openAsPopup;
+    /** Create the popup. */
+    private createPopup;
+    private restoreFocus;
+    private closingActions;
+    /** Create the popup PositionStrategy. */
+    private createPopupPositionStrategy;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepicker<any>, "kbq-datepicker", ["mcDatepicker"], { "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+}

package/datepicker/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/datepicker/month-view.component.d.ts

@@ -0,0 +1,74 @@
+import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
+import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { KbqCalendarBody, KbqCalendarCell, KbqCalendarCellCssClasses } from './calendar-body.component';
+import * as i0 from "@angular/core";
+/**
+ * An internal component used to display a single month in the datepicker.
+ * @docs-private
+ */
+export declare class KbqMonthView<D> implements AfterContentInit {
+    private changeDetectorRef;
+    private readonly dateFormats;
+    adapter: DateAdapter<D>;
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    get activeDate(): D;
+    set activeDate(value: D);
+    private _activeDate;
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    private _selected;
+    /** The minimum selectable date. */
+    minDate: D | null;
+    /** The maximum selectable date. */
+    maxDate: D | null;
+    /** Function used to filter which dates are selectable. */
+    dateFilter: (date: D) => boolean;
+    /** Function that can be used to add custom CSS classes to dates. */
+    dateClass: (date: D) => KbqCalendarCellCssClasses;
+    /** Emits when a new date is selected. */
+    readonly selectedChange: EventEmitter<D | null>;
+    /** Emits when any date is selected. */
+    readonly userSelection: EventEmitter<void>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    mcCalendarBody: KbqCalendarBody;
+    /** Grid of calendar cells representing the dates of the month. */
+    weeks: KbqCalendarCell[][];
+    /** The number of blank cells in the first row before the 1st of the month. */
+    firstWeekOffset: number;
+    /**
+     * The date of the month that the currently selected Date falls on.
+     * Null if the currently selected Date is in another month.
+     */
+    selectedDate: number | null;
+    /** The date of the month that today falls on. Null if today is in another month. */
+    todayDate: number | null;
+    /** The names of the weekdays. */
+    weekdays: {
+        long: string;
+        narrow: string;
+    }[];
+    constructor(changeDetectorRef: ChangeDetectorRef, dateFormats: KbqDateFormats, adapter: DateAdapter<D>);
+    ngAfterContentInit(): void;
+    /** Handles when a new date is selected. */
+    dateSelected(date: number): void;
+    /** Initializes this month view. */
+    init(): void;
+    /** Creates KbqCalendarCells for the dates in this month. */
+    private createWeekCells;
+    /** Date filter for the month */
+    private shouldEnableDate;
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     */
+    private getDateInCurrentMonth;
+    /** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
+    private hasSameMonthAndYear;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMonthView<any>, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMonthView<any>, "kbq-month-view", ["mcMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never, false, never>;
+}

package/datepicker/public-api.d.ts

@@ -0,0 +1,10 @@
+export * from './datepicker-module';
+export * from './calendar.component';
+export * from './calendar-header.component';
+export * from './calendar-body.component';
+export * from './datepicker.component';
+export * from './datepicker-animations';
+export * from './datepicker-input.directive';
+export * from './datepicker-intl';
+export * from './datepicker-toggle.component';
+export * from './month-view.component';

package/divider/_divider-theme.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+
+@mixin kbq-divider-theme($theme) {
+    $divider: map.get(map.get($theme, components), divider);
+
+    .kbq-divider {
+        background: map.get($divider, color);
+    }
+}

package/divider/divider.component.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class KbqDivider {
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    private _vertical;
+    get inset(): boolean;
+    set inset(value: boolean);
+    private _inset;
+    get paddings(): boolean;
+    set paddings(value: boolean);
+    private _paddings;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDivider, "kbq-divider", never, { "vertical": { "alias": "vertical"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "paddings": { "alias": "paddings"; "required": false; }; }, {}, never, never, false, never>;
+}

package/divider/divider.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./divider.component";
+import * as i2 from "@angular/common";
+export declare class KbqDividerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDividerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDividerModule, [typeof i1.KbqDivider], [typeof i2.CommonModule], [typeof i1.KbqDivider]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqDividerModule>;
+}

package/divider/divider.scss

@@ -0,0 +1,47 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-divider {
+    display: block;
+    margin: 0;
+
+    &.kbq-divider_horizontal {
+        height: var(--kbq-divider-size-horizontal-width, map.get($tokens, divider-size-horizontal-width));
+
+        &.kbq-divider_paddings {
+            margin-top: var(
+                --kbq-divider-size-horizontal-margin-vertical,
+                map.get($tokens, divider-size-horizontal-margin-vertical)
+            );
+
+            margin-bottom: var(
+                --kbq-divider-size-horizontal-margin-vertical,
+                map.get($tokens, divider-size-horizontal-margin-vertical)
+            );
+        }
+    }
+
+    &.kbq-divider_vertical {
+        width: var(--kbq-divider-size-vertical-width, map.get($tokens, divider-size-vertical-width));
+        height: 100%;
+
+        &.kbq-divider_paddings {
+            margin-left: var(
+                --kbq-divider-size-vertical-margin-horizontal,
+                map.get($tokens, divider-size-vertical-margin-horizontal)
+            );
+
+            margin-right: var(
+                --kbq-divider-size-vertical-margin-horizontal,
+                map.get($tokens, divider-size-vertical-margin-horizontal)
+            );
+        }
+    }
+
+}

package/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/divider/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './divider.component';
+export * from './divider.module';