@koobiq/components 16.0.0-beta.1

package/datepicker/_datepicker-theme.scss

@@ -0,0 +1,101 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/popup';
+@use '../core/styles/theming/theming';
+@use '../core/styles/typography/typography-utils' as *;
+
+
+$kbq-datepicker-selected-fade-amount: 0.6;
+$kbq-datepicker-today-fade-amount: 0.2;
+
+@mixin kbq-datepicker-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, theme);
+    $secondary: map.get($theme, secondary);
+
+    $datepicker: map.get(map.get($theme, components), datepicker);
+
+    .kbq-calendar__table-header {
+        color: theming.kbq-color($secondary, 60);
+    }
+
+    .kbq-datepicker-toggle__button.kbq-button-icon {
+        border-color: transparent;
+        border-radius: 0;
+        background: transparent;
+        opacity: 1;
+
+        .kbq-icon {
+            color: theming.kbq-color($foreground, icon);
+        }
+    }
+
+    .kbq-calendar__table-header-divider::after {
+        background: map.get($foreground, divider);
+    }
+
+    .kbq-calendar__body-cell-content {
+        color: map.get($foreground, text);
+        border-color: transparent;
+    }
+
+    .kbq-calendar__body_disabled > .kbq-calendar__body-cell-content:not(.kbq-selected) {
+        color: map.get($foreground, text-disabled);
+    }
+
+    .cdk-keyboard-focused .kbq-calendar__body_active,
+    .cdk-program-focused .kbq-calendar__body_active {
+        & > .kbq-calendar__body-cell-content {
+            border-color: map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        }
+    }
+
+    .kbq-calendar__body-cell:not(.kbq-calendar__body_disabled):hover {
+        & > .kbq-calendar__body-cell-content:not(.kbq-selected) {
+            background-color: theming.kbq-color($secondary, A8);
+        }
+    }
+
+    .kbq-calendar__body-today {
+        color: map.get($datepicker, state-selected-today-color);
+    }
+
+    .kbq-calendar__body_disabled > .kbq-calendar__body-today:not(.kbq-selected) {
+        border-color: map.get($background, background-disabled);
+    }
+
+    .kbq-calendar__body-cell-content.kbq-selected {
+        background: map.get($datepicker, state-selected-background);
+        color: map.get($datepicker, state-selected-color);
+    }
+
+    .kbq-calendar__body_disabled > .kbq-selected {
+        background-color: map.get($datepicker, state-selected-background);
+    }
+
+    .kbq-datepicker__content {
+        @include popup.popup-params($theme);
+
+        color: map.get($foreground, text);
+    }
+}
+
+@mixin kbq-datepicker-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-calendar {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+    }
+
+    .kbq-calendar__table-header th {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
+    }
+
+    .kbq-calendar__body-today {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+    }
+}

package/datepicker/calendar-body.component.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Extra CSS classes that can be associated with a calendar cell.
+ */
+export type KbqCalendarCellCssClasses = string | string[] | Set<string> | {
+    [key: string]: any;
+};
+/**
+ * An internal class that represents the data corresponding to a single calendar cell.
+ * @docs-private
+ */
+export declare class KbqCalendarCell {
+    value: number;
+    displayValue: string;
+    enabled: boolean;
+    cssClasses?: KbqCalendarCellCssClasses | undefined;
+    constructor(value: number, displayValue: string, enabled: boolean, cssClasses?: KbqCalendarCellCssClasses | undefined);
+}
+/**
+ * An internal component used to display calendar data in a table.
+ * @docs-private
+ */
+export declare class KbqCalendarBody implements OnChanges {
+    /** The cells to display in the table. */
+    rows: KbqCalendarCell[][];
+    /** The value in the table that corresponds to today. */
+    todayValue: number;
+    /** The value in the table that is currently selected. */
+    selectedValue: number;
+    /** The minimum number of free cells needed to fit the label in the first row. */
+    labelMinRequiredCells: number;
+    /** The number of columns in the table. */
+    numCols: number;
+    /** The cell number of the active cell in the table. */
+    activeCell: number;
+    /**
+     * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+     * maintained even as the table resizes.
+     */
+    cellAspectRatio: number;
+    /** Emits when a new value is selected. */
+    readonly selectedValueChange: EventEmitter<number>;
+    /** The number of blank cells to put at the beginning for the first row. */
+    firstRowOffset: number;
+    /** Padding for the individual date cells. */
+    cellPadding: string;
+    /** Width of an individual cell. */
+    cellWidth: string;
+    cellClicked(cell: KbqCalendarCell): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    isActiveCell(rowIndex: number, colIndex: number): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarBody, "[kbq-calendar-body]", ["mcCalendarBody"], { "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, false, never>;
+}

package/datepicker/calendar-body.scss

@@ -0,0 +1,61 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+$kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-size-cell-margin) * 2;
+
+.kbq-calendar__body {
+    min-width: calc(
+        7 * var(--kbq-datepicker-body-size-cell-min-size, map.get($tokens, datepicker-body-size-cell-min-size))
+    );
+}
+
+.kbq-calendar__body-cell {
+    position: relative;
+    height: 0;
+    line-height: 0;
+    text-align: center;
+    outline: none;
+    cursor: pointer;
+}
+
+.kbq-calendar__body_disabled {
+    cursor: default;
+}
+
+.kbq-calendar__body-cell-content {
+    position: absolute;
+    top: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
+    left: var(--kbq-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
+
+    padding: var(--kbq-datepicker-body-size-cell-padding, map.get($tokens, datepicker-body-size-cell-padding));
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    width: $kbq-calendar-body-cell-content-size;
+    height: $kbq-calendar-body-cell-content-size;
+
+    // Prevents text being off-center on Android.
+    line-height: 1;
+
+    border-width: var(
+        --kbq-datepicker-body-size-cell-border-width, map.get($tokens, datepicker-body-size-cell-border-width)
+    );
+    border-radius: var(
+        --kbq-datepicker-body-size-cell-border-radius, map.get($tokens, datepicker-body-size-cell-border-radius)
+    );
+    border-style: solid;
+}
+
+kbq-month-view {
+    .kbq-calendar__body-cell-content {
+        justify-content: flex-end;
+    }
+}

package/datepicker/calendar-header.component.d.ts

@@ -0,0 +1,45 @@
+import { AfterContentInit, EventEmitter } from '@angular/core';
+import { DateAdapter } from '@koobiq/components/core';
+import * as i0 from "@angular/core";
+/** Default header for KbqCalendar */
+export declare class KbqCalendarHeader<D> implements AfterContentInit {
+    private readonly adapter;
+    monthNames: {
+        name: string;
+        value: number;
+    }[];
+    selectedMonth: number;
+    years: number[];
+    selectedYear: number;
+    get activeDate(): D;
+    set activeDate(value: D);
+    private _activeDate;
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    private _maxDate;
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    private _minDate;
+    get previousDisabled(): boolean;
+    get nextDisabled(): boolean;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    readonly monthSelected: EventEmitter<D>;
+    readonly yearSelected: EventEmitter<D>;
+    constructor(adapter: DateAdapter<D>);
+    ngAfterContentInit(): void;
+    /** Handles when a new month is selected. */
+    onMonthSelected(month: number): void;
+    /** Handles when a new year is selected. */
+    onYearSelected(year: number): void;
+    selectCurrentDate(): void;
+    /** Handles user clicks on the previous button. */
+    selectPreviousMonth(): void;
+    /** Handles user clicks on the next button. */
+    selectNextMonth(): void;
+    private compareDate;
+    private updateSelectedValues;
+    private updateYearsArray;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarHeader<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["mcCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
+}

package/datepicker/calendar-header.scss

@@ -0,0 +1,75 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-calendar-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding:
+        var(--kbq-datepicker-calendar-size-padding-top, map.get($tokens, datepicker-calendar-size-padding-top))
+        var(
+            --kbq-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(--kbq-datepicker-calendar-size-padding-blocks, map.get($tokens, datepicker-calendar-size-padding-blocks))
+        var(
+            --kbq-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        );
+}
+
+.kbq-calendar-header__previous-button::after {
+    border-left-width: var(
+        --kbq-datepicker-calendar-size-icon-border-width,
+        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    );
+
+    transform: var(
+        --kbq-datepicker-calendar-size-icon-prev-icon-transform,
+        map.get($tokens, datepicker-calendar-size-icon-prev-icon-transform)
+    );
+}
+
+.kbq-calendar-header__next-button::after {
+    border-right-width: var(
+        --kbq-datepicker-calendar-size-icon-border-width,
+        map.get($tokens, datepicker-calendar-size-icon-border-width)
+    );
+
+    transform: var(
+        --kbq-datepicker-calendar-size-icon-nex-icon-transform,
+        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
+    );
+}
+
+.kbq-calendar-header__select {
+    width: auto !important;
+}
+
+.kbq-calendar-header__button-group,
+.kbq-calendar-header__select-group {
+    display: flex;
+    flex-direction: row;
+}
+
+.kbq-calendar-select-panel {
+    margin-top: 2px;
+
+    min-width: 98% !important;
+
+    & .kbq-select__content {
+        max-height: 12 * 32px;
+        overflow-x: hidden;
+        scrollbar-gutter: stable;
+
+        .kbq-option {
+            min-width: 65px;
+        }
+    }
+}

package/datepicker/calendar.component.d.ts

@@ -0,0 +1,81 @@
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { Subject } from 'rxjs';
+import { KbqCalendarCellCssClasses } from './calendar-body.component';
+import { KbqDatepickerIntl } from './datepicker-intl';
+import { KbqMonthView } from './month-view.component';
+import * as i0 from "@angular/core";
+/**
+ * A calendar that is used as part of the datepicker.
+ * @docs-private
+ */
+export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
+    private readonly adapter;
+    private readonly dateFormats;
+    private changeDetectorRef;
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt(): D | null;
+    set startAt(value: D | null);
+    private _startAt;
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    private _selected;
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    private _minDate;
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    private _maxDate;
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted and used as the anchor on  when using keyboard navigation.
+     */
+    get activeDate(): D;
+    set activeDate(value: D | null);
+    private _activeDate;
+    /** 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 the currently selected date changes. */
+    readonly selectedChange: EventEmitter<D>;
+    /**
+     * Emits the year chosen in multiyear view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly yearSelected: EventEmitter<D>;
+    /**
+     * Emits the month chosen in year view.
+     * This doesn't imply a change on the selected date.
+     */
+    readonly monthSelected: EventEmitter<D>;
+    /** Emits when any date is selected. */
+    readonly userSelection: EventEmitter<void>;
+    /** Reference to the current month view component. */
+    monthView: KbqMonthView<D>;
+    /**
+     * Emits whenever there is a state change that the header may need to respond to.
+     */
+    stateChanges: Subject<void>;
+    private readonly intlChanges;
+    constructor(intl: KbqDatepickerIntl, adapter: DateAdapter<D>, dateFormats: KbqDateFormats, changeDetectorRef: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** Updates today's date after an update of the active date */
+    updateTodaysDate(): void;
+    /** Handles date selection in the month view. */
+    dateSelected(date: D): void;
+    userSelected(): void;
+    /**
+     * @param obj The object to check.
+     * @returns The given object if it is both a date instance and valid, otherwise null.
+     */
+    private getValidDateOrNull;
+    private getActiveDateDefault;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["mcCalendar"], { "startAt": { "alias": "startAt"; "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"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, false, never>;
+}

package/datepicker/calendar.scss

@@ -0,0 +1,68 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-calendar {
+    display: block;
+}
+
+.kbq-calendar__content {
+    padding:
+        0
+        var(
+            --kbq-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(
+            --kbq-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        )
+        var(
+            --kbq-datepicker-calendar-size-padding-horizontal,
+            map.get($tokens, datepicker-calendar-size-padding-horizontal)
+        );
+    outline: none;
+}
+
+.kbq-calendar__table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.kbq-calendar__table-header th {
+    text-align: center;
+    height: 30px;
+
+    &.kbq-calendar__table-header-divider {
+        position: relative;
+        height: calc(
+            var(
+                --kbq-datepicker-calendar-size-padding-blocks,
+                #{map.get($tokens, datepicker-calendar-size-padding-blocks)}
+            ) - 2px
+        );
+
+        $horizontal-padding: map.get($tokens, datepicker-calendar-size-padding-horizontal);
+
+        // We use an absolutely positioned pseudo-element as the divider line for the table header so we
+        // can extend it all the way to the edge of the calendar.
+        &::after {
+            content: '';
+
+            position: absolute;
+            top: 0;
+            left: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+            right: calc(-1 * var(--kbq-datepicker-calendar-size-padding-horizontal, #{$horizontal-padding}));
+
+            height: var(
+                --kbq-datepicker-calendar-size-divider-width,
+                map.get($tokens, datepicker-calendar-size-divider-width)
+            );
+        }
+    }
+}

package/datepicker/datepicker-animations.d.ts

@@ -0,0 +1,9 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Animations used by the mosaic datepicker.
+ * @docs-private
+ */
+export declare const mcDatepickerAnimations: {
+    readonly transformPanel: AnimationTriggerMetadata;
+    readonly fadeInCalendar: AnimationTriggerMetadata;
+};

package/datepicker/datepicker-content.scss

@@ -0,0 +1,33 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+$kbq-datepicker-non-touch-calendar-cell-size: 40px;
+$kbq-datepicker-non-touch-calendar-width:
+    $kbq-datepicker-non-touch-calendar-cell-size * 7 +
+    map.get($tokens, datepicker-calendar-size-padding-horizontal) * 2;
+// Based on the natural height of the calendar in a month with 6 rows of dates
+// (largest the calendar will get).
+$kbq-datepicker-non-touch-calendar-height: 348px;
+
+.kbq-datepicker__content {
+    display: block;
+
+    border: {
+        width: 1px;
+        style: solid;
+        radius: var(
+            --kbq-datepicker-calendar-size-border-radius,
+            map.get($tokens, datepicker-calendar-size-border-radius)
+        );
+    }
+
+    .kbq-calendar {
+        width: $kbq-datepicker-non-touch-calendar-width;
+        height: $kbq-datepicker-non-touch-calendar-height;
+    }
+}

package/datepicker/datepicker-errors.d.ts

@@ -0,0 +1,2 @@
+/** @docs-private */
+export declare function createMissingDateImplError(provider: string): Error;