@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.8

package/datepicker/_datepicker-theme.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/common/popup';
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
 
@@ -10,77 +9,68 @@ $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);
-    }
+    $container: map.get($datepicker, container);
+    $header: map.get($datepicker, header);
+    $cell: map.get($datepicker, cell);
 
-    .kbq-datepicker-toggle__button.kbq-button-icon {
-        border-color: transparent;
-        border-radius: 0;
-        background: transparent;
-        opacity: 1;
+    .kbq-datepicker__content {
+        background: map.get($container, background);
+        box-shadow: map.get($container, box-shadow);
+    }
 
-        .kbq-icon {
-            color: theming.kbq-color($foreground, icon);
-        }
+    .kbq-calendar__table-header {
+        color: map.get($header, text);
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: map.get($foreground, divider);
+        background: map.get($header, divider);
     }
 
     .kbq-calendar__body-cell-content {
-        color: map.get($foreground, text);
-        border-color: transparent;
-    }
+        $default: map.get($cell, default);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-cell-content:not(.kbq-selected) {
-        color: map.get($foreground, text-disabled);
-    }
+        background: map.get($default, background);
+        color: map.get($default, text);
 
-    .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-today {
+            $today: map.get($cell, today);
+
+            background: map.get($today, background);
+            color: map.get($today, text);
         }
-    }
 
-    .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);
+        &:hover:not(.kbq-disabled) {
+            $hover: map.get($cell, hover);
+
+            background: map.get($hover, background);
         }
-    }
 
-    .kbq-calendar__body-today {
-        color: map.get($datepicker, state-selected-today-color);
-    }
+        &:active:not(.kbq-disabled) {
+            $active: map.get($cell, active);
 
-    .kbq-calendar__body_disabled > .kbq-calendar__body-today:not(.kbq-selected) {
-        border-color: map.get($background, background-disabled);
-    }
+            background: map.get($active, background);
+        }
 
-    .kbq-calendar__body-cell-content.kbq-selected {
-        background: map.get($datepicker, state-selected-background);
-        color: map.get($datepicker, state-selected-color);
-    }
+        &.kbq-selected:not(.kbq-disabled) {
+            $selected: map.get($cell, selected);
 
-    .kbq-calendar__body_disabled > .kbq-selected {
-        background-color: map.get($datepicker, state-selected-background);
-    }
+            background: map.get($selected, background);
+            color: map.get($selected, text);
 
-    .kbq-datepicker__content {
-        @include popup.popup-params($theme);
+            &:hover {
+                $selected-hover: map.get($cell, selected-hover);
 
-        color: map.get($foreground, text);
+                background: map.get($selected-hover, background);
+            }
+        }
+
+        &.kbq-disabled {
+            $disabled: map.get($cell, disabled);
+
+            background: map.get($disabled, background);
+        }
     }
 }
 
@@ -88,14 +78,10 @@ $kbq-datepicker-today-fade-amount: 0.2;
     $tokens: map.get($config, tokens);
 
     .kbq-calendar {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 
     .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));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
     }
 }

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

@@ -51,5 +51,5 @@ export declare class KbqCalendarBody implements OnChanges {
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarBody, "[kbq-calendar-body]", ["kbqCalendarBody"], { "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

@@ -6,13 +6,6 @@
 
 $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;
@@ -21,41 +14,33 @@ $kbq-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-si
     text-align: center;
     outline: none;
     cursor: pointer;
+
+    padding: 0;
 }
 
-.kbq-calendar__body_disabled {
+.kbq-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;
+    height: 32px;
 
     // 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)
+        --kbq-datepicker-size-grid-cell-border-radius,
+        map.get($tokens, datepicker-size-grid-cell-border-radius)
     );
-    border-style: solid;
-}
 
-kbq-month-view {
-    .kbq-calendar__body-cell-content {
-        justify-content: flex-end;
-    }
+    margin-bottom: var(
+        --kbq-datepicker-size-grid-content-gap-vertical,
+        map.get($tokens, datepicker-size-grid-content-gap-vertical)
+    );
 }
+

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

@@ -9,8 +9,14 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
         value: number;
     }[];
     selectedMonth: number;
-    years: number[];
-    selectedYear: number;
+    years: {
+        name: number;
+        value: string;
+    }[];
+    selectedYear: {
+        name: number;
+        value: string;
+    };
     get activeDate(): D;
     set activeDate(value: D);
     private _activeDate;
@@ -41,5 +47,5 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "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

@@ -11,40 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
     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)
+    padding-right: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    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)
+    padding-left: var(
+        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
     );
 
-    transform: var(
-        --kbq-datepicker-calendar-size-icon-nex-icon-transform,
-        map.get($tokens, datepicker-calendar-size-icon-nex-icon-transform)
+    margin-bottom: var(
+        --kbq-datepicker-size-header-margin-bottom, map.get($tokens, datepicker-size-header-margin-bottom)
     );
 }
 
@@ -66,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-select__content {
         max-height: 12 * 32px;
         overflow-x: hidden;
-        scrollbar-gutter: stable;
+        scrollbar-gutter: auto;
 
         .kbq-option {
             min-width: 65px;

package/datepicker/calendar.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { DateAdapter } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqCalendarCellCssClasses } from './calendar-body.component';
 import { KbqDatepickerIntl } from './datepicker-intl';
@@ -11,7 +11,6 @@ import * as i0 from "@angular/core";
  */
 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;
@@ -61,7 +60,7 @@ export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnCh
      */
     stateChanges: Subject<void>;
     private readonly intlChanges;
-    constructor(intl: KbqDatepickerIntl, adapter: DateAdapter<D>, dateFormats: KbqDateFormats, changeDetectorRef: ChangeDetectorRef);
+    constructor(intl: KbqDatepickerIntl, adapter: DateAdapter<D>, changeDetectorRef: ChangeDetectorRef);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -76,6 +75,6 @@ export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnCh
      */
     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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendar<any>, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["kbqCalendar"], { "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

@@ -11,20 +11,16 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .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)
-        );
+    padding-right: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
+    padding-left: var(
+        --kbq-datepicker-size-grid-padding-horizontal,
+        map.get($tokens, datepicker-size-grid-padding-horizontal)
+    );
+
     outline: none;
 }
 
@@ -40,15 +36,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.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);
+        box-sizing: border-box;
+        height: var(
+            --kbq-datepicker-size-grid-content-gap-vertical,
+            map.get($tokens, datepicker-size-grid-content-gap-vertical)
+        );;
 
+        $horizontal-padding: map.get($tokens, datepicker-size-grid-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 {
@@ -56,12 +51,12 @@ $tokens: meta.module-variables(tokens) !default;
 
             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}));
+            left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
+            right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
 
             height: var(
-                --kbq-datepicker-calendar-size-divider-width,
-                map.get($tokens, datepicker-calendar-size-divider-width)
+                --kbq-datepicker-size-grid-divider-height,
+                map.get($tokens, datepicker-size-grid-divider-height)
             );
         }
     }

package/datepicker/datepicker-animations.d.ts

@@ -3,7 +3,7 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * Animations used by the Koobiq datepicker.
  * @docs-private
  */
-export declare const mcDatepickerAnimations: {
+export declare const kbqDatepickerAnimations: {
     readonly transformPanel: AnimationTriggerMetadata;
     readonly fadeInCalendar: AnimationTriggerMetadata;
 };

package/datepicker/datepicker-content.scss

@@ -7,27 +7,34 @@
 $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;
+    map.get($tokens, datepicker-size-grid-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-non-touch-calendar-height: 270px;
 
 .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)
-        );
-    }
+    border-radius: var(
+        --kbq-datepicker-size-container-border-radius,
+        map.get($tokens, datepicker-size-container-border-radius)
+    );
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
+
+        padding-top: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
+
+        padding-bottom: var(
+            --kbq-datepicker-size-container-padding-vertical,
+            map.get($tokens, datepicker-size-container-padding-vertical)
+        );
     }
 }

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

@@ -53,9 +53,9 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     set required(value: boolean);
     private _required;
     /** The datepicker that this input is associated with. */
-    set mcDatepicker(value: KbqDatepicker<D>);
+    set kbqDatepicker(value: KbqDatepicker<D>);
     /** Function that can be used to filter out dates within the datepicker. */
-    set mcDatepickerFilter(value: (date: D | null) => boolean);
+    set kbqDatepickerFilter(value: (date: D | null) => boolean);
     /** The value of the input. */
     get value(): D | null;
     set value(value: D | null);
@@ -75,7 +75,7 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     get id(): string;
     set id(value: string);
     private _id;
-    set mcValidationTooltip(tooltip: KbqWarningTooltipTrigger);
+    set kbqValidationTooltip(tooltip: KbqWarningTooltipTrigger);
     incorrectInput: EventEmitter<void>;
     /** Emits when a `change` event is fired on this `<input>`. */
     readonly dateChange: EventEmitter<KbqDatepickerInputEvent<D>>;
@@ -176,5 +176,5 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     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>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[kbqDatepicker]", ["kbqDatepickerInput"], { "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "kbqDatepicker": { "alias": "kbqDatepicker"; "required": false; }; "kbqDatepickerFilter": { "alias": "kbqDatepickerFilter"; "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; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
 }

package/datepicker/datepicker-input.scss

@@ -11,5 +11,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-datepicker {
-    width: var(--kbq-datepicker-input-size-width, map.get($tokens, datepicker-input-size-width));
+    width: 130px;
 }

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

@@ -3,10 +3,10 @@ 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`. */
+/** Can be used to override the icon of a `kbqDatepickerToggle`. */
 export declare class KbqDatepickerToggleIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerToggleIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerToggleIcon, "[kbqDatepickerToggleIcon]", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     intl: KbqDatepickerIntl;
@@ -31,5 +31,5 @@ export declare class KbqDatepickerToggle<D> implements AfterContentInit, OnChang
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerToggle<any>, "kbq-datepicker-toggle", ["kbqDatepickerToggle"], { "disabled": { "alias": "disabled"; "required": false; }; "datepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["customIcon"], ["[kbqDatepickerToggleIcon]"], false, never>;
 }

package/datepicker/datepicker.component.d.ts

@@ -40,7 +40,7 @@ export declare class KbqDatepickerContent<D> implements OnDestroy {
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepickerContent<any>, "kbq-datepicker__content", ["kbqDatepickerContent"], {}, {}, never, never, false, never>;
 }
 /** Component responsible for managing the datepicker popup/dialog. */
 export declare class KbqDatepicker<D> implements OnDestroy {
@@ -144,5 +144,5 @@ export declare class KbqDatepicker<D> implements OnDestroy {
     /** 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqDatepicker<any>, "kbq-datepicker", ["kbqDatepicker"], { "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/month-view.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { DateAdapter, KbqDateFormats } from '@koobiq/components/core';
+import { DateAdapter } from '@koobiq/components/core';
 import { KbqCalendarBody, KbqCalendarCell, KbqCalendarCellCssClasses } from './calendar-body.component';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +8,6 @@ import * as i0 from "@angular/core";
  */
 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).
@@ -35,7 +34,7 @@ export declare class KbqMonthView<D> implements AfterContentInit {
     /** Emits when any date is activated. */
     readonly activeDateChange: EventEmitter<D>;
     /** The body of calendar table */
-    mcCalendarBody: KbqCalendarBody;
+    kbqCalendarBody: 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. */
@@ -52,7 +51,7 @@ export declare class KbqMonthView<D> implements AfterContentInit {
         long: string;
         narrow: string;
     }[];
-    constructor(changeDetectorRef: ChangeDetectorRef, dateFormats: KbqDateFormats, adapter: DateAdapter<D>);
+    constructor(changeDetectorRef: ChangeDetectorRef, adapter: DateAdapter<D>);
     ngAfterContentInit(): void;
     /** Handles when a new date is selected. */
     dateSelected(date: number): void;
@@ -69,6 +68,6 @@ export declare class KbqMonthView<D> implements AfterContentInit {
     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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMonthView<any>, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMonthView<any>, "kbq-month-view", ["kbqMonthView"], { "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>;
 }