novo-elements 5.1.1 → 5.2.3

package/elements/calendar/day/CalendarHourSegment.d.ts

@@ -1,7 +1,7 @@
-import { TemplateRef } from '@angular/core';
-import { DayViewHourSegment } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoCalendarHourSegmentElement {
-    segment: DayViewHourSegment;
-    locale: string;
-    customTemplate: TemplateRef<any>;
-}
+import { TemplateRef } from '@angular/core';
+import { DayViewHourSegment } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoCalendarHourSegmentElement {
+    segment: DayViewHourSegment;
+    locale: string;
+    customTemplate: TemplateRef<any>;
+}

package/elements/calendar/month/CalendarMonthDay.d.ts

@@ -1,14 +1,14 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { MonthViewDay, CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoCalendarMonthDayElement {
-    day: MonthViewDay;
-    locale: string;
-    tooltipPosition: string;
-    customTemplate: TemplateRef<any>;
-    eventClicked: EventEmitter<{
-        event: CalendarEvent;
-    }>;
-    get accepted(): Array<CalendarEvent>;
-    get rejected(): Array<CalendarEvent>;
-    get maybes(): Array<CalendarEvent>;
-}
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { MonthViewDay, CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoCalendarMonthDayElement {
+    day: MonthViewDay;
+    locale: string;
+    tooltipPosition: string;
+    customTemplate: TemplateRef<any>;
+    eventClicked: EventEmitter<{
+        event: CalendarEvent;
+    }>;
+    get accepted(): Array<CalendarEvent>;
+    get rejected(): Array<CalendarEvent>;
+    get maybes(): Array<CalendarEvent>;
+}

package/elements/calendar/month/CalendarMonthHeader.d.ts

@@ -1,14 +1,14 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { WeekDay } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoCalendarMonthHeaderElement {
-    viewDate: Date;
-    days: WeekDay[];
-    locale: string;
-    customTemplate: TemplateRef<any>;
-    /**
-     * Called when the view date is changed
-     */
-    viewDateChange: EventEmitter<Date>;
-    prevMonth(event: Event): void;
-    nextMonth(event: Event): void;
-}
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { WeekDay } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoCalendarMonthHeaderElement {
+    viewDate: Date;
+    days: WeekDay[];
+    locale: string;
+    customTemplate: TemplateRef<any>;
+    /**
+     * Called when the view date is changed
+     */
+    viewDateChange: EventEmitter<Date>;
+    prevMonth(event: Event): void;
+    nextMonth(event: Event): void;
+}

package/elements/calendar/month/CalendarMonthView.d.ts

@@ -1,110 +1,110 @@
-import { OnChanges, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, TemplateRef } from '@angular/core';
-import { CalendarEvent, WeekDay, MonthView, MonthViewDay, CalendarEventTimesChangedEvent } from '../../../utils/calendar-utils/CalendarUtils';
-import { Subject, Subscription } from 'rxjs';
-/**
- * Shows all events on a given month. Example usage:
- *
- * ```
- * <novo-calendar-month-view
- *  [viewDate]="viewDate"
- *  [events]="events">
- * </novo-calendar-month-view>
- * ```
- */
-export declare class NovoCalendarMonthViewElement implements OnChanges, OnInit, OnDestroy {
-    private cdr;
-    /**
-     * The current view date
-     */
-    viewDate: Date;
-    /**
-     * An array of events to display on view
-     */
-    events: CalendarEvent[];
-    /**
-     * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
-     */
-    excludeDays: number[];
-    /**
-     * A function that will be called before each cell is rendered. The first argument will contain the calendar cell.
-     * If you add the `cssClass` property to the cell it will add that class to the cell in the template
-     */
-    dayModifier: Function;
-    /**
-     * An observable that when emitted on will re-render the current view
-     */
-    refresh: Subject<any>;
-    /**
-     * The locale used to format dates
-     */
-    locale: string;
-    /**
-     * The placement of the event tooltip
-     */
-    tooltipPosition: string;
-    /**
-     * The start number of the week
-     */
-    weekStartsOn: number;
-    /**
-     * A custom template to use to replace the header
-     */
-    headerTemplate: TemplateRef<any>;
-    /**
-     * A custom template to use to replace the day cell
-     */
-    cellTemplate: TemplateRef<any>;
-    /**
-     * Called when the day cell is clicked
-     */
-    dayClicked: EventEmitter<{
-        day: MonthViewDay;
-    }>;
-    /**
-     * Called when the event title is clicked
-     */
-    eventClicked: EventEmitter<{
-        day: any;
-        event: CalendarEvent;
-    }>;
-    /**
-     * Called when an event is dragged and dropped
-     */
-    eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent>;
-    viewDateChange: EventEmitter<Date>;
-    /**
-     * @hidden
-     */
-    columnHeaders: WeekDay[];
-    /**
-     * @hidden
-     */
-    view: MonthView;
-    /**
-     * @hidden
-     */
-    refreshSubscription: Subscription;
-    /**
-     * @hidden
-     */
-    constructor(cdr: ChangeDetectorRef, locale: string);
-    /**
-     * @hidden
-     */
-    ngOnInit(): void;
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes: any): void;
-    /**
-     * @hidden
-     */
-    ngOnDestroy(): void;
-    /**
-     * @hidden
-     */
-    eventDropped(day: MonthViewDay, event: CalendarEvent): void;
-    private refreshHeader;
-    private refreshBody;
-    refreshAll(): void;
-}
+import { OnChanges, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, TemplateRef } from '@angular/core';
+import { CalendarEvent, WeekDay, MonthView, MonthViewDay, CalendarEventTimesChangedEvent } from '../../../utils/calendar-utils/CalendarUtils';
+import { Subject, Subscription } from 'rxjs';
+/**
+ * Shows all events on a given month. Example usage:
+ *
+ * ```
+ * &lt;novo-calendar-month-view
+ *  [viewDate]="viewDate"
+ *  [events]="events"&gt;
+ * &lt;/novo-calendar-month-view&gt;
+ * ```
+ */
+export declare class NovoCalendarMonthViewElement implements OnChanges, OnInit, OnDestroy {
+    private cdr;
+    /**
+     * The current view date
+     */
+    viewDate: Date;
+    /**
+     * An array of events to display on view
+     */
+    events: CalendarEvent[];
+    /**
+     * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
+     */
+    excludeDays: number[];
+    /**
+     * A function that will be called before each cell is rendered. The first argument will contain the calendar cell.
+     * If you add the `cssClass` property to the cell it will add that class to the cell in the template
+     */
+    dayModifier: Function;
+    /**
+     * An observable that when emitted on will re-render the current view
+     */
+    refresh: Subject<any>;
+    /**
+     * The locale used to format dates
+     */
+    locale: string;
+    /**
+     * The placement of the event tooltip
+     */
+    tooltipPosition: string;
+    /**
+     * The start number of the week
+     */
+    weekStartsOn: number;
+    /**
+     * A custom template to use to replace the header
+     */
+    headerTemplate: TemplateRef<any>;
+    /**
+     * A custom template to use to replace the day cell
+     */
+    cellTemplate: TemplateRef<any>;
+    /**
+     * Called when the day cell is clicked
+     */
+    dayClicked: EventEmitter<{
+        day: MonthViewDay;
+    }>;
+    /**
+     * Called when the event title is clicked
+     */
+    eventClicked: EventEmitter<{
+        day: any;
+        event: CalendarEvent;
+    }>;
+    /**
+     * Called when an event is dragged and dropped
+     */
+    eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent>;
+    viewDateChange: EventEmitter<Date>;
+    /**
+     * @hidden
+     */
+    columnHeaders: WeekDay[];
+    /**
+     * @hidden
+     */
+    view: MonthView;
+    /**
+     * @hidden
+     */
+    refreshSubscription: Subscription;
+    /**
+     * @hidden
+     */
+    constructor(cdr: ChangeDetectorRef, locale: string);
+    /**
+     * @hidden
+     */
+    ngOnInit(): void;
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes: any): void;
+    /**
+     * @hidden
+     */
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    eventDropped(day: MonthViewDay, event: CalendarEvent): void;
+    private refreshHeader;
+    private refreshBody;
+    refreshAll(): void;
+}

package/elements/calendar/month/CalendarMonthView.scss

@@ -0,0 +1,169 @@
+.calendar-month-view {
+  background-color: $white;
+
+  .calendar-header {
+    display: flex;
+    flex-flow: column;
+    text-align: center;
+    font-weight: bolder;
+    border-bottom: 2px solid #e1e1e1;
+    .calendar-header-top {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: space-around;
+
+      .calendar-month {
+        font-size: 180%;
+      }
+      .calendar-year {
+        color: #999;
+      }
+    }
+    .calendar-weekdays {
+      display: flex;
+      flex-flow: row nowrap;
+      .calendar-weekday {
+        padding: 5px 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        white-space: nowrap;
+        flex: 1;
+      }
+    }
+  }
+
+  .calendar-cell-row {
+    display: flex;
+    &:hover {
+      background-color: #fafafa;
+    }
+  }
+
+  .calendar-cell-row .calendar-cell:hover,
+  .calendar-cell.calendar-has-events.calendar-open {
+    background-color: #ededed;
+  }
+
+  .calendar-days {
+    border: 1px solid #e1e1e1;
+    border-bottom: 0;
+  }
+
+  .calendar-day-top {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  .calendar-cell:hover {
+    .calendar-actions {
+      display: flex;
+    }
+  }
+
+  .calendar-cell {
+    float: left;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    position: relative;
+  }
+
+  .calendar-day-cell {
+    min-height: 56px;
+
+    &:not(:last-child) {
+      border-right: 1px solid #e1e1e1;
+    }
+  }
+
+  .calendar-days .calendar-cell-row {
+    border-bottom: 1px solid #e1e1e1;
+  }
+
+  .calendar-day-badge {
+    background-color: #b94a48;
+    display: inline-block;
+    min-width: 10px;
+    padding: 3px 7px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    color: white;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border-radius: 10px;
+  }
+
+  .calendar-day-number {
+    font-size: 1.2em;
+    font-weight: 400;
+    opacity: 0.5;
+    padding: 4px;
+  }
+
+  .calendar-event {
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    display: inline-block;
+    margin: 2px;
+    vertical-align: middle;
+    text-align: center;
+    line-height: 22px;
+    font-size: 12px;
+    color: $white;
+  }
+
+  .calendar-day-cell.calendar-in-month.calendar-has-events {
+    cursor: pointer;
+  }
+
+  .calendar-day-cell.calendar-out-month .calendar-day-number {
+    opacity: 0.1;
+    cursor: default;
+  }
+
+  .calendar-day-cell.calendar-weekend .calendar-day-number {
+    color: darkred;
+  }
+
+  .calendar-day-cell.calendar-today {
+    background-color: #e8fde7;
+  }
+
+  .calendar-day-cell.calendar-today .calendar-day-number {
+    color: $dark;
+  }
+
+  .calendar-day-cell.calendar-drag-over {
+    background-color: darken(#ededed, 5%) !important;
+  }
+
+  .calendar-open-day-events {
+    padding: 15px;
+    color: white;
+    background-color: #555;
+    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
+  }
+
+  .calendar-open-day-events .calendar-event {
+    position: relative;
+    top: 2px;
+  }
+
+  .calendar-event-title {
+    color: white;
+  }
+
+  .calendar-out-month {
+    .calendar-day-badge,
+    .calendar-event {
+      opacity: 0.3;
+    }
+  }
+}