novo-elements 5.1.1 → 5.2.3

package/elements/calendar/Calendar.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NovoCalendarModule {
-}
+export declare class NovoCalendarModule {
+}

package/elements/calendar/common/CalendarDateChange.d.ts

@@ -1,25 +1,25 @@
-import { EventEmitter } from '@angular/core';
-export declare class NovoCalendarDateChangeElement {
-    /**
-     * The current view
-     */
-    view: string;
-    /**
-     * The current view date
-     */
-    viewDate: Date;
-    locale: string;
-    /**
-     * Called when the view date is changed
-     */
-    viewDateChange: EventEmitter<Date>;
-    constructor(locale: string);
-    /**
-     * @hidden
-     */
-    subtractDate(): void;
-    addDate(): void;
-    changeDate(unit: number): void;
-    get startOfWeek(): Date;
-    get endOfWeek(): Date;
-}
+import { EventEmitter } from '@angular/core';
+export declare class NovoCalendarDateChangeElement {
+    /**
+     * The current view
+     */
+    view: string;
+    /**
+     * The current view date
+     */
+    viewDate: Date;
+    locale: string;
+    /**
+     * Called when the view date is changed
+     */
+    viewDateChange: EventEmitter<Date>;
+    constructor(locale: string);
+    /**
+     * @hidden
+     */
+    subtractDate(): void;
+    addDate(): void;
+    changeDate(unit: number): void;
+    get startOfWeek(): Date;
+    get endOfWeek(): Date;
+}

package/elements/calendar/common/CalendarDateChange.scss

@@ -0,0 +1,23 @@
+novo-calendar-date-change {
+  display: inline-block;
+
+  .cal-date-change {
+    border-radius: 3px;
+    border: 1px solid #e1e1e1;
+    background-color: $white;
+    position: relative;
+    padding: 10px 15px;
+    text-align: center;
+
+    > span {
+      padding: 5px;
+      color: $black;
+    }
+
+    > i {
+      cursor: pointer;
+      padding: 2px;
+      font-size: 0.9em;
+    }
+  }
+}

package/elements/calendar/common/EventTypeLegend.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoEventTypeLegendElement {
-    events: CalendarEvent[];
-    customTemplate: TemplateRef<any>;
-    eventTypeClicked: EventEmitter<any>;
-}
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoEventTypeLegendElement {
+    events: CalendarEvent[];
+    customTemplate: TemplateRef<any>;
+    eventTypeClicked: EventEmitter<any>;
+}

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

@@ -1,7 +1,7 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoCalendarAllDayEventElement {
-    event: CalendarEvent;
-    customTemplate: TemplateRef<any>;
-    eventClicked: EventEmitter<any>;
-}
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { CalendarEvent } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoCalendarAllDayEventElement {
+    event: CalendarEvent;
+    customTemplate: TemplateRef<any>;
+    eventClicked: EventEmitter<any>;
+}

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

@@ -1,8 +1,8 @@
-import { EventEmitter, TemplateRef } from '@angular/core';
-import { DayViewEvent } from '../../../utils/calendar-utils/CalendarUtils';
-export declare class NovoCalendarDayEventElement {
-    dayEvent: DayViewEvent;
-    tooltipPosition: string;
-    customTemplate: TemplateRef<any>;
-    eventClicked: EventEmitter<any>;
-}
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { DayViewEvent } from '../../../utils/calendar-utils/CalendarUtils';
+export declare class NovoCalendarDayEventElement {
+    dayEvent: DayViewEvent;
+    tooltipPosition: string;
+    customTemplate: TemplateRef<any>;
+    eventClicked: EventEmitter<any>;
+}

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

@@ -1,148 +1,148 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { Subject, Subscription } from 'rxjs';
-import { CalendarEvent, CalendarEventTimesChangedEvent, DayView, DayViewHour } from '../../../utils/calendar-utils/CalendarUtils';
-/**
- * Shows all events on a given day. Example usage:
- *
- * ```typescript
- * <novo-calendar-day
- *  [viewDate]="viewDate"
- *  [events]="events">
- * </novo-calendar-day>
- * ```
- */
-export declare class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy {
-    private cdr;
-    /**
-     * The current view date
-     */
-    viewDate: Date;
-    /**
-     * An array of events to display on view
-     */
-    events: CalendarEvent[];
-    /**
-     * The number of segments in an hour. Must be <= 6
-     */
-    hourSegments: number;
-    /**
-     * The day start hours in 24 hour time. Must be 0-23
-     */
-    dayStartHour: number;
-    /**
-     * The day start minutes. Must be 0-59
-     */
-    dayStartMinute: number;
-    /**
-     * The day end hours in 24 hour time. Must be 0-23
-     */
-    dayEndHour: number;
-    /**
-     * The day end minutes. Must be 0-59
-     */
-    dayEndMinute: number;
-    /**
-     * The width in pixels of each event on the view
-     */
-    eventWidth: number;
-    /**
-     * An observable that when emitted on will re-render the current view
-     */
-    refresh: Subject<any>;
-    /**
-     * The locale used to format dates
-     */
-    locale: string;
-    /**
-     * A function that will be called before each hour segment is called. The first argument will contain the hour segment.
-     * If you add the `cssClass` property to the segment it will add that class to the hour segment in the template
-     */
-    hourSegmentModifier: Function;
-    /**
-     * The grid size to snap resizing and dragging of events to
-     */
-    eventSnapSize: number;
-    /**
-     * The placement of the event tooltip
-     */
-    tooltipPosition: string;
-    /**
-     * A custom template to use to replace the hour segment
-     */
-    hourSegmentTemplate: TemplateRef<any>;
-    /**
-     * A custom template to use for all day events
-     */
-    allDayEventTemplate: TemplateRef<any>;
-    /**
-     * A custom template to use for day view events
-     */
-    eventTemplate: TemplateRef<any>;
-    /**
-     * Called when an event title is clicked
-     */
-    eventClicked: EventEmitter<{
-        event: CalendarEvent;
-    }>;
-    /**
-     * Called when an hour segment is clicked
-     */
-    hourSegmentClicked: EventEmitter<{
-        date: Date;
-    }>;
-    /**
-     * Called when an event is resized or dragged and dropped
-     */
-    eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent>;
-    /**
-     * @hidden
-     */
-    hours: DayViewHour[];
-    /**
-     * @hidden
-     */
-    view: DayView;
-    /**
-     * @hidden
-     */
-    width: number;
-    /**
-     * @hidden
-     */
-    refreshSubscription: Subscription;
-    /**
-     * @hidden
-     */
-    currentResize: {
-        originalTop: number;
-        originalHeight: number;
-        edge: string;
-    };
-    /**
-     * @hidden
-     */
-    validateDrag: Function;
-    /**
-     * @hidden
-     */
-    validateResize: Function;
-    /**
-     * @hidden
-     */
-    constructor(cdr: ChangeDetectorRef, locale: string);
-    /**
-     * @hidden
-     */
-    ngOnInit(): void;
-    /**
-     * @hidden
-     */
-    ngOnDestroy(): void;
-    /**
-     * @hidden
-     */
-    ngOnChanges(changes: any): void;
-    private refreshHourGrid;
-    private refreshView;
-    private refreshAll;
-}
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { CalendarEvent, CalendarEventTimesChangedEvent, DayView, DayViewHour } from '../../../utils/calendar-utils/CalendarUtils';
+/**
+ * Shows all events on a given day. Example usage:
+ *
+ * ```typescript
+ * &lt;novo-calendar-day
+ *  [viewDate]="viewDate"
+ *  [events]="events"&gt;
+ * &lt;/novo-calendar-day&gt;
+ * ```
+ */
+export declare class NovoCalendarDayViewElement implements OnChanges, OnInit, OnDestroy {
+    private cdr;
+    /**
+     * The current view date
+     */
+    viewDate: Date;
+    /**
+     * An array of events to display on view
+     */
+    events: CalendarEvent[];
+    /**
+     * The number of segments in an hour. Must be <= 6
+     */
+    hourSegments: number;
+    /**
+     * The day start hours in 24 hour time. Must be 0-23
+     */
+    dayStartHour: number;
+    /**
+     * The day start minutes. Must be 0-59
+     */
+    dayStartMinute: number;
+    /**
+     * The day end hours in 24 hour time. Must be 0-23
+     */
+    dayEndHour: number;
+    /**
+     * The day end minutes. Must be 0-59
+     */
+    dayEndMinute: number;
+    /**
+     * The width in pixels of each event on the view
+     */
+    eventWidth: number;
+    /**
+     * An observable that when emitted on will re-render the current view
+     */
+    refresh: Subject<any>;
+    /**
+     * The locale used to format dates
+     */
+    locale: string;
+    /**
+     * A function that will be called before each hour segment is called. The first argument will contain the hour segment.
+     * If you add the `cssClass` property to the segment it will add that class to the hour segment in the template
+     */
+    hourSegmentModifier: Function;
+    /**
+     * The grid size to snap resizing and dragging of events to
+     */
+    eventSnapSize: number;
+    /**
+     * The placement of the event tooltip
+     */
+    tooltipPosition: string;
+    /**
+     * A custom template to use to replace the hour segment
+     */
+    hourSegmentTemplate: TemplateRef<any>;
+    /**
+     * A custom template to use for all day events
+     */
+    allDayEventTemplate: TemplateRef<any>;
+    /**
+     * A custom template to use for day view events
+     */
+    eventTemplate: TemplateRef<any>;
+    /**
+     * Called when an event title is clicked
+     */
+    eventClicked: EventEmitter<{
+        event: CalendarEvent;
+    }>;
+    /**
+     * Called when an hour segment is clicked
+     */
+    hourSegmentClicked: EventEmitter<{
+        date: Date;
+    }>;
+    /**
+     * Called when an event is resized or dragged and dropped
+     */
+    eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent>;
+    /**
+     * @hidden
+     */
+    hours: DayViewHour[];
+    /**
+     * @hidden
+     */
+    view: DayView;
+    /**
+     * @hidden
+     */
+    width: number;
+    /**
+     * @hidden
+     */
+    refreshSubscription: Subscription;
+    /**
+     * @hidden
+     */
+    currentResize: {
+        originalTop: number;
+        originalHeight: number;
+        edge: string;
+    };
+    /**
+     * @hidden
+     */
+    validateDrag: Function;
+    /**
+     * @hidden
+     */
+    validateResize: Function;
+    /**
+     * @hidden
+     */
+    constructor(cdr: ChangeDetectorRef, locale: string);
+    /**
+     * @hidden
+     */
+    ngOnInit(): void;
+    /**
+     * @hidden
+     */
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes: any): void;
+    private refreshHourGrid;
+    private refreshView;
+    private refreshAll;
+}

package/elements/calendar/day/CalendarDayView.scss

@@ -0,0 +1,97 @@
+.cal-day-view,
+.cal-week-view {
+  .cal-hour-rows {
+    width: 100%;
+    border: solid 1px #e1e1e1;
+    overflow-x: scroll;
+    position: relative;
+  }
+
+  .cal-hour:nth-child(even) {
+    background-color: $off-white;
+  }
+  .cal-hour:nth-child(odd) {
+    background-color: $white;
+  }
+
+  .cal-hour-segment {
+    height: 30px;
+  }
+
+  .cal-hour-segment::after {
+    content: '\00a0';
+  }
+
+  .cal-hour:not(:last-child) .cal-hour-segment,
+  .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+    border-bottom: thin dashed #e1e1e1;
+  }
+
+  .cal-time {
+    font-weight: bold;
+    padding-top: 5px;
+    width: 70px;
+    text-align: center;
+    color: $grey;
+  }
+
+  .cal-hour-segment.cal-after-hour-start {
+    .cal-time {
+      display: none;
+    }
+  }
+
+  .cal-hour-segment:hover,
+  .cal-drag-over .cal-hour-segment {
+    background-color: #ededed;
+  }
+}
+
+.cal-day-view {
+  .cal-event-container {
+    position: absolute;
+  }
+
+  novo-calendar-day-event {
+    height: inherit;
+
+    .cal-event {
+      height: inherit;
+      font-size: 12px;
+      margin-left: 2px;
+      margin-right: 2px;
+      min-height: 30px;
+      display: flex;
+      flex-flow: row nowrap;
+      background-color: $off-white;
+
+      .cal-event-ribbon {
+        width: 4px;
+        min-height: 100%;
+      }
+      .cal-event-group {
+        overflow: hidden;
+        flex: 1;
+        padding: 2px 10px;
+        display: flex;
+        flex-flow: column;
+      }
+      .cal-event-title {
+        line-height: 26px;
+      }
+      .cal-event-description {
+        font-size: 10px;
+        line-height: 13px;
+      }
+    }
+  }
+
+  .cal-draggable {
+    cursor: move;
+  }
+
+  .cal-all-day-event {
+    padding: 8px;
+    border: solid 1px;
+  }
+}