@dereekb/dbx-web 8.11.2 → 8.12.0

package/lib/extension/_extension.scss

@@ -0,0 +1,38 @@
+@use '../style/config';
+@use './calendar/calendar';
+
+@mixin all-extension-core($theme-config) {
+  $calendar-enabled: 1;
+
+  @if ($theme-config != null) {
+    $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
+  }
+
+  @if ($calendar-enabled == 1) {
+    @include calendar.core();
+  }
+}
+
+@mixin all-extension-typography($typography-config, $theme-config) {
+  $calendar-enabled: 1;
+
+  @if ($theme-config != null) {
+    $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
+  }
+
+  @if ($calendar-enabled == 1) {
+    @include calendar.typography($typography-config);
+  }
+}
+
+@mixin all-extension-theme($theme-config) {
+  $calendar-enabled: 1;
+
+  @if ($theme-config != null) {
+    $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
+  }
+
+  @if ($calendar-enabled == 1) {
+    @include calendar.theme($theme-config);
+  }
+}

package/lib/extension/calendar/_calendar.scss

@@ -0,0 +1,188 @@
+@use 'sass:map';
+@use '../../style/theming';
+@use './style/angular-calendar' as calendar;
+
+// MARK: Variables
+$calendar-header-height: theming.$content-navbar-height;
+$calendar-title-height: 22px;
+$calendar-week-content-header-height: 51px;
+$calendar-month-content-header-height: 29px;
+$calendar-scrollable-content-bottom-padding: 12px;
+$calendar-week-content-all-day-events-height: 110px;
+
+$calendar-title-and-header-height: calc($calendar-header-height + $calendar-title-height);
+$calendar-content-border-consideration: 2px;
+
+// MARK: Mixin
+@mixin core() {
+  @include calendar.cal-core();
+  @include calendar.cal-theme(());
+
+  .dbx-calendar {
+    height: 100%;
+
+    .dbx-calendar-title {
+      height: $calendar-title-height;
+      font-weight: bold;
+      text-align: center;
+      margin: 0;
+      padding: 0;
+    }
+
+    .dbx-calendar-header {
+      height: $calendar-header-height;
+      padding: 0px 8px;
+
+      display: flex;
+      width: 100%;
+      align-items: center;
+      box-sizing: border-box;
+
+      .dbx-calendar-controls {
+        width: 100%;
+      }
+    }
+
+    .dbx-calendar-content {
+      height: 100%;
+
+      &.dbx-calendar-content-week {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-week-content-header-height - $calendar-content-border-consideration);
+        margin-top: $calendar-week-content-header-height;
+      }
+
+      &.dbx-calendar-content-month {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-month-content-header-height - $calendar-content-border-consideration);
+        margin-top: $calendar-month-content-header-height;
+      }
+
+      &.dbx-calendar-content-day .cal-week-view {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-content-border-consideration);
+        overflow: auto;
+      }
+    }
+
+    .cal-month-view {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .cal-header {
+        margin-top: -$calendar-month-content-header-height;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        box-sizing: border-box;
+      }
+
+      .cal-days {
+        overflow: auto;
+        height: 100%;
+      }
+    }
+
+    // Applies to both the day and week view.
+    .cal-week-view {
+      position: relative;
+      height: 100%;
+      width: 100%;
+
+      .cal-time-events {
+        .cal-day-column {
+          height: 1440px; // 1440 is the combined height of all the content.
+        }
+      }
+    }
+
+    .dbx-calendar-content-week {
+      .cal-week-view {
+        .cal-all-day-events {
+          // Day events set to specific height.
+          height: $calendar-week-content-all-day-events-height;
+        }
+
+        .cal-day-headers {
+          margin-top: -$calendar-week-content-header-height;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          box-sizing: border-box;
+        }
+
+        .cal-time-events {
+          // Weirdness caused by our hack for using the cal-day-headers as an absolute position.
+          overflow: auto;
+          padding-bottom: $calendar-scrollable-content-bottom-padding;
+          height: 100%;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    .cal-day-view,
+    .cal-week-view {
+      .cal-event {
+        min-height: 25px;
+      }
+    }
+  }
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+
+  $background-color: theming.get-color-from-palette($background, 'background');
+  $hover-color: theming.get-color-from-palette($background, 'hover');
+  $focused-color: theming.get-color-from-palette($background, 'focused-button');
+  $border-color: theming.get-color-from-palette($foreground, 'divider');
+  $text-color: theming.get-color-from-palette($foreground, 'text');
+
+  $event-icon-color: theming.get-color-from-palette($primary, 600);
+  $event-bg-color: theming.get-color-from-palette($primary, 800);
+  $event-text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $highlight-color: theming.get-color-from-palette($accent, 300);
+  $weekend-color: theming.get-color-from-palette($accent, 500);
+  $badge-color: theming.get-color-from-palette($accent, 500);
+  $current-time-marker-color: theming.get-color-from-palette($accent, 400);
+
+  #{calendar.$cal-event-icon-color-var}: $event-icon-color; // text/border color
+  #{calendar.$cal-event-color-primary-var}: $event-text-color; // text/border color
+  #{calendar.$cal-event-color-secondary-var}: $event-bg-color; // event background color
+  #{calendar.$cal-border-color-var}: $border-color;
+  #{calendar.$cal-bg-primary-var}: $background-color;
+  #{calendar.$cal-bg-secondary-var}: $hover-color;
+  #{calendar.$cal-bg-active-var}: $hover-color;
+  #{calendar.$cal-bg-highlight-var}: rgba($highlight-color, 0.3);
+  #{calendar.$cal-today-bg-var}: $hover-color;
+  #{calendar.$cal-weekend-color-var}: $weekend-color;
+  #{calendar.$cal-badge-color-var}: $badge-color;
+  #{calendar.$cal-current-time-marker-color-var}: $current-time-marker-color;
+  #{calendar.$cal-white-var}: #fff;
+  #{calendar.$cal-gray-var}: #555;
+  #{calendar.$cal-black-var}: #000;
+  #{calendar.$cal-gradient-var}: inset 0 0 10px 0 rgba($background-color, 0.2);
+}
+
+@mixin typography($typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-calendar') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
+  }
+}

package/lib/extension/calendar/calendar.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter } from '@angular/core';
+import { CalendarEvent } from 'angular-calendar';
+import { DbxCalendarStore, CalendarDisplayType } from './calendar.store';
+import { MatButtonToggleChange } from '@angular/material/button-toggle';
+import * as i0 from "@angular/core";
+export interface DbxCalendarEvent<T> {
+    event: CalendarEvent<T>;
+    action?: string;
+}
+export declare class DbxCalendarComponent<T> {
+    readonly calendarStore: DbxCalendarStore<T>;
+    clickEvent: EventEmitter<DbxCalendarEvent<T>>;
+    readonly viewDate$: import("rxjs").Observable<Date>;
+    readonly events$: import("rxjs").Observable<{
+        title: string;
+        id?: string | number | undefined;
+        start: Date;
+        end?: Date | undefined;
+        color?: import("calendar-utils").EventColor | undefined;
+        actions?: import("calendar-utils").EventAction[] | undefined;
+        allDay?: boolean | undefined;
+        cssClass?: string | undefined;
+        resizable?: {
+            beforeStart?: boolean | undefined;
+            afterEnd?: boolean | undefined;
+        } | undefined;
+        draggable?: boolean | undefined;
+        meta?: any;
+    }[]>;
+    readonly activeDayIsOpen$: import("rxjs").Observable<boolean>;
+    readonly displayType$: import("rxjs").Observable<CalendarDisplayType>;
+    constructor(calendarStore: DbxCalendarStore<T>);
+    todayClicked(): void;
+    nextButtonClicked(): void;
+    previousButtonClicked(): void;
+    dayClicked({ date }: {
+        date: Date;
+    }): void;
+    eventClicked(action: string, event: CalendarEvent<T>): void;
+    typeToggleChanged(event: MatButtonToggleChange): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCalendarComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxCalendarComponent<any>, "dbx-calendar", never, {}, { "clickEvent": "clickEvent"; }, never, never>;
+}

package/lib/extension/calendar/calendar.module.d.ts

@@ -0,0 +1,22 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/button-toggle";
+import * as i6 from "angular-calendar";
+import * as i7 from "@angular/flex-layout";
+import * as i8 from "../../button/button.module";
+export declare class DbxCalendarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCalendarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCalendarModule, [typeof i1.DbxCalendarComponent], [typeof i2.CommonModule, typeof i3.MatIconModule, typeof i4.MatButtonModule, typeof i5.MatButtonToggleModule, typeof i6.CalendarModule, typeof i6.CalendarDayModule, typeof i7.FlexLayoutModule, typeof i6.CalendarWeekModule, typeof i8.DbxButtonModule], [typeof i1.DbxCalendarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxCalendarModule>;
+}
+/**
+ * Provides default configuration for the DbxCalendarModule
+ */
+export declare class DbxCalendarRootModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCalendarRootModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCalendarRootModule, never, [typeof i6.CalendarModule], [typeof DbxCalendarModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxCalendarRootModule>;
+}

package/lib/extension/calendar/calendar.store.d.ts

@@ -0,0 +1,67 @@
+import { ComponentStore } from '@ngrx/component-store';
+import { CalendarEvent } from 'angular-calendar';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare enum CalendarDisplayType {
+    MONTH = "month",
+    WEEK = "week",
+    DAY = "day"
+}
+export interface CalendarViewDateRange {
+    type: CalendarDisplayType;
+    start: Date;
+    end: Date;
+    distance: number;
+}
+export interface CalendarState<T = any> {
+    /**
+     * Calendar display mode
+     */
+    type: CalendarDisplayType;
+    /**
+     * Date that is selected.
+     */
+    date: Date;
+    /**
+     * Whether or not the day was tapped/set twice.
+     */
+    dateTappedTwice: boolean;
+    /**
+     * Set of calendar events.
+     */
+    events: CalendarEvent<T>[];
+}
+export declare function visibleDateRangeForCalendarState(calendarState: CalendarState): CalendarViewDateRange;
+export declare class DbxCalendarStore<T = any> extends ComponentStore<CalendarState<T>> {
+    constructor();
+    readonly tapNext: () => void;
+    readonly tapPrevious: () => void;
+    readonly date$: Observable<Date>;
+    readonly dateTappedTwice$: Observable<boolean>;
+    readonly events$: Observable<CalendarEvent<T>[]>;
+    readonly visibleEvents$: Observable<CalendarEvent<T>[]>;
+    readonly eventsForDateState$: Observable<{
+        date: Date;
+        events: CalendarEvent<any>[];
+        dateTappedTwice: boolean;
+    }>;
+    readonly eventsForDate$: Observable<CalendarEvent<any>[]>;
+    readonly visibleDateRange$: Observable<CalendarViewDateRange>;
+    readonly displayType$: Observable<CalendarDisplayType>;
+    /**
+     * Tap a day.
+     *
+     * - If the same day is presented, dateTappedTwice is flipped.
+     */
+    readonly tapDay: (observableOrValue: Date | Observable<Date>) => import("rxjs").Subscription;
+    /**
+     * Set all events on the calendar.
+     */
+    readonly setEvents: (observableOrValue: CalendarEvent<T>[] | Observable<CalendarEvent<T>[]>) => import("rxjs").Subscription;
+    /**
+     * Set all events on the calendar.
+     */
+    readonly setDisplayType: (observableOrValue: CalendarDisplayType | Observable<CalendarDisplayType>) => import("rxjs").Subscription;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCalendarStore<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxCalendarStore<any>>;
+}

package/lib/extension/calendar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './calendar.module';
+export * from './calendar.component';
+export * from './calendar.store';

package/lib/extension/calendar/style/_angular-calendar.scss

@@ -0,0 +1,23 @@
+@forward './variables';
+
+@use './common/calendar-tooltip' as tooltip;
+@use './day/calendar-day-view' as day;
+@use './week/calendar-week-view' as week;
+@use './month/calendar-month-view' as month;
+
+@mixin cal-core() {
+  @include tooltip.cal-tooltip-core();
+  @include day.cal-day-view-core();
+  @include week.cal-week-view-core();
+  @include month.cal-month-view-core();
+}
+
+@mixin cal-theme($overrides: null) {
+  @if ($overrides == null) {
+    $overrides: ();
+  }
+
+  @include tooltip.cal-tooltip-theme($overrides);
+  @include month.cal-month-view-theme($overrides);
+  @include week.cal-week-view-theme($overrides);
+}

package/lib/extension/calendar/style/_variables.scss

@@ -0,0 +1,76 @@
+$cal-event-icon-color-var: --cal-event-icon-color;
+$cal-event-color-primary-var: --cal-event-color-primary;
+$cal-event-color-secondary-var: --cal-event-color-secondary;
+$cal-border-color-var: --cal-border-color;
+$cal-bg-primary-var: --cal-bg-primary;
+$cal-bg-secondary-var: --cal-bg-secondary;
+$cal-bg-active-var: --cal-bg-active;
+$cal-bg-active-dragover-var: --cal-bg-active-dragover;
+$cal-bg-highlight-var: --cal-bg-highlight;
+$cal-today-bg-var: --cal-today-bg;
+$cal-weekend-color-var: --cal-weekend-color;
+$cal-badge-color-var: --cal-badge-color;
+$cal-current-time-marker-color-var: --cal-current-time-marker-color;
+$cal-white-var: --cal-white;
+$cal-gray-var: --cal-gray;
+$cal-black-var: --cal-black;
+$cal-gradient-var: --cal-gradient;
+
+$cal-event-icon-color: var($cal-event-icon-color-var);
+$cal-event-color-primary: var($cal-event-color-primary-var);
+$cal-event-color-secondary: var($cal-event-color-secondary-var);
+$cal-border-color: var($cal-border-color-var);
+$cal-bg-primary: var($cal-bg-primary-var);
+$cal-bg-secondary: var($cal-bg-secondary-var);
+$cal-bg-active: var($cal-bg-active-var);
+$cal-bg-active-dragover: var($cal-bg-active-dragover-var);
+$cal-bg-highlight: var($cal-bg-highlight-var);
+$cal-today-bg: var($cal-today-bg-var);
+$cal-weekend-color: var($cal-weekend-color-var);
+$cal-badge-color: var($cal-badge-color-var);
+$cal-current-time-marker-color: var($cal-current-time-marker-color-var);
+$cal-white: var($cal-white-var);
+$cal-gray: var($cal-gray-var);
+$cal-black: var($cal-black-var);
+$cal-gradient: var($cal-gradient-var);
+
+$cal-hint-opacity: 0.7;
+$cal-out-month-hint-opacity: 0.3;
+
+$cal-vars: () !default;
+$cal-vars: map-merge(
+  (
+    event-icon-color: $cal-event-icon-color,
+    // the default event primary color if not set on the event color object
+    event-color-primary: $cal-event-color-primary,
+    // the default event secondary color if not set on the event color object
+    event-color-secondary: $cal-event-color-secondary,
+    // the border color used between cells
+    border-color: $cal-border-color,
+    // the primary background of each component
+    bg-primary: $cal-bg-primary,
+    // the secondary background, used for alternating rows on the day and week views
+    bg-secondary: $cal-bg-secondary,
+    // the color used when hovering over cells and headers
+    bg-active: $cal-bg-active,
+    // the color used when hovering over cells and headers
+    bg-highlight: $cal-bg-highlight,
+    // the background color to mark today in the week view header
+    today-bg: $cal-today-bg,
+    // the color used to indicate a day is a weekend
+    weekend-color: $cal-weekend-color,
+    // the badge background color on the month view
+    badge-color: $cal-badge-color,
+    // the current time marker color on the week and day view
+    current-time-marker-color: $cal-current-time-marker-color,
+    // a standard white color used for tooltip text and month view event titles
+    white: $cal-white,
+    // a standard gray color used for the background color of the open month view events box
+    gray: $cal-gray,
+    // a standard black color used as the tooltip background and the gradient color of the open month view events
+    black: $cal-black,
+    // box shadow
+    gradient: $cal-gradient
+  ),
+  $cal-vars
+);

package/lib/extension/calendar/style/common/calendar-tooltip.scss

@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-tooltip-core() {
+  .cal-tooltip {
+    position: absolute;
+    z-index: 1070;
+    display: block;
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-break: auto;
+    line-height: 1.5;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    white-space: normal;
+    word-break: normal;
+    word-spacing: normal;
+    font-size: 11px;
+    word-wrap: break-word;
+    opacity: 0.9;
+  }
+
+  .cal-tooltip.cal-tooltip-top {
+    padding: 5px 0;
+    margin-top: -3px;
+  }
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+  }
+
+  .cal-tooltip.cal-tooltip-right {
+    padding: 0 5px;
+    margin-left: 3px;
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+  }
+
+  .cal-tooltip.cal-tooltip-bottom {
+    padding: 5px 0;
+    margin-top: 3px;
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+  }
+
+  .cal-tooltip.cal-tooltip-left {
+    padding: 0 5px;
+    margin-left: -3px;
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+  }
+
+  .cal-tooltip-inner {
+    max-width: 200px;
+    padding: 3px 8px;
+    text-align: center;
+    border-radius: 0.25rem;
+  }
+
+  .cal-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+
+@mixin cal-tooltip-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    border-top-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    border-right-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    border-bottom-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    border-left-color: map-get($theme, black);
+  }
+
+  .cal-tooltip-inner {
+    color: map-get($theme, white);
+    background-color: map-get($theme, black);
+  }
+}

package/lib/extension/calendar/style/day/calendar-day-view.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-day-view-core() {
+  .cal-day-view {
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    mwl-calendar-week-view-header {
+      display: none;
+    }
+
+    .cal-events-container {
+      margin-left: 70px;
+
+      [dir='rtl'] & {
+        margin-left: initial;
+        margin-right: 70px;
+      }
+    }
+
+    .cal-day-column {
+      border-left: 0;
+    }
+
+    .cal-current-time-marker {
+      margin-left: 70px;
+      width: calc(100% - 70px);
+
+      [dir='rtl'] & {
+        margin-left: initial;
+        margin-right: 70px;
+      }
+    }
+  }
+}