angular-schedule
Version:
A simple and light schedule package for angular.
1,233 lines (1,201 loc) • 34 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, Inject, ElementRef, ViewContainerRef, ViewChild, ViewChildren, Input, Output, Directive, Renderer2, HostListener, NgModule } from '@angular/core';
import { fromEvent } from 'rxjs';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { filter, take } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/scheduler.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SchedulerService {
constructor() { }
}
SchedulerService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
SchedulerService.ctorParameters = () => [];
/** @nocollapse */ SchedulerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function SchedulerService_Factory() { return new SchedulerService(); }, token: SchedulerService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* Generated from: lib/lib.config.token.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const USER_OPTIONS = new InjectionToken('scheduler user options');
/**
* @fileoverview added by tsickle
* Generated from: lib/scheduler.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SchedulerComponent {
/**
* @param {?} libConfig
* @param {?} elementRef
* @param {?} overlay
* @param {?} viewContainerRef
*/
constructor(libConfig, elementRef, overlay, viewContainerRef) {
this.libConfig = libConfig;
this.elementRef = elementRef;
this.overlay = overlay;
this.viewContainerRef = viewContainerRef;
this.isSelecting = false;
this.finishedSelecting = new EventEmitter();
this.editInfo = new EventEmitter();
this.excludedDay = new EventEmitter();
this.includedDay = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.showBy) {
this.generateAllDates();
}
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
ngAfterViewInit() {
this.scrollToToday();
}
/**
* @return {?}
*/
generateAllDates() {
/** @type {?} */
const CURRENT_MONTH = new Date().getMonth();
/** @type {?} */
const CURRENT_YEAR = new Date().getFullYear();
/** @type {?} */
const MONTHS_IN_PAST = this.libConfig.monthsInPast || 4;
/** @type {?} */
const MONTHS_IN_FUTURE = this.libConfig.monthsInFuture || 12;
/** @type {?} */
let pastMonth = CURRENT_MONTH - MONTHS_IN_PAST < 0
? CURRENT_MONTH - MONTHS_IN_PAST + 12
: CURRENT_MONTH - MONTHS_IN_PAST;
/** @type {?} */
let pastYear = pastMonth >= 9 ? CURRENT_YEAR - 1 : CURRENT_YEAR;
/** @type {?} */
const TO_DATE = this.calculateToDate(CURRENT_YEAR, CURRENT_MONTH, MONTHS_IN_FUTURE);
/** @type {?} */
const DATEOBJ = [];
while (pastYear <= TO_DATE.getFullYear()) {
/** @type {?} */
const FRAME = pastYear === TO_DATE.getFullYear() ? TO_DATE.getMonth() : 11;
if (this.showBy === 'day') {
for (let index = pastMonth; index <= FRAME; index++) {
DATEOBJ.push({
month: new Date(Date.UTC(pastYear, pastMonth, 1)),
weekDays: this.generateDates(pastYear, pastMonth),
});
pastMonth = pastMonth === 11 ? 0 : pastMonth + 1;
}
}
else {
DATEOBJ.push({
month: new Date(Date.UTC(pastYear, pastMonth, 1)),
weekDays: this.generateMonths(pastYear, pastMonth, FRAME),
});
for (let index = pastMonth; index <= FRAME; index++) {
pastMonth = pastMonth === 11 ? 0 : pastMonth + 1;
}
}
pastYear += 1;
}
this.days = DATEOBJ;
}
/**
* @param {?} year
* @param {?} month
* @param {?} toMonths
* @return {?}
*/
calculateToDate(year, month, toMonths) {
/** @type {?} */
const NEW_MONTH = month + toMonths > 12 ? (month + toMonths) % 12 : month + toMonths;
/** @type {?} */
const ADD_TO_YEAR = month + toMonths > 12 ? Math.floor((month + toMonths) / 12) : 0;
return new Date(Date.UTC(year + ADD_TO_YEAR, NEW_MONTH, 1));
}
/**
* @param {?} year
* @param {?} month
* @return {?}
*/
generateDates(year, month) {
/** @type {?} */
const DATEOBJ = new Date(Date.UTC(year, month, 1));
/** @type {?} */
const WEEKDAYS = [];
while (DATEOBJ.getMonth() === month) {
WEEKDAYS.push(new Date(DATEOBJ));
DATEOBJ.setDate(DATEOBJ.getDate() + 1);
}
return WEEKDAYS;
}
/**
* @param {?} day
* @return {?}
*/
excludeIncludeCheck(day) {
return false;
}
/**
* @param {?} start
* @param {?} end
* @param {?} current
* @return {?}
*/
calculateFromTo(start, end, current) {
/** @type {?} */
const FROM = new Date(start);
/** @type {?} */
const TO = new Date(end);
/** @type {?} */
const CHECK = new Date(current);
/** @type {?} */
const SKIP_DAYS = this.libConfig.skipDays || [0, 6];
if (this.showBy === 'day') {
return (CHECK >= FROM && CHECK <= TO && !SKIP_DAYS.includes(CHECK.getDay()));
}
return CHECK >= FROM && CHECK <= TO;
}
/**
* @param {?} start
* @param {?} end
* @param {?} current
* @return {?}
*/
isDayOff(start, end, current) {
/** @type {?} */
const FROM = new Date(start);
/** @type {?} */
const TO = new Date(end);
/** @type {?} */
const CHECK = new Date(current);
/** @type {?} */
const SKIP_DAYS = this.libConfig.skipDays || [0, 6];
return (CHECK >= FROM &&
CHECK <= TO &&
SKIP_DAYS.includes(CHECK.getDay()) &&
this.showBy !== 'month');
}
/**
* @param {?} ev
* @return {?}
*/
enter(ev) {
if (this.isSelecting) {
if (ev.target.classList.contains('selected')) {
ev.target.classList.remove('selected');
if (ev.target.parentNode.nextSibling.lastChild.classList.contains('selected')) {
ev.target.parentNode.nextSibling.lastChild.classList.remove('selected');
}
}
else {
ev.target.classList.add('selected');
if (!ev.target.parentNode.previousSibling.lastChild.classList.contains('selected')) {
ev.target.parentNode.previousSibling.lastChild.classList.add('selected');
}
}
}
}
/**
* @param {?} ev
* @param {?} day
* @param {?} user
* @return {?}
*/
startSelect(ev, day, user) {
// tslint:disable-next-line:curly
if (ev.button !== 0)
return;
this.startUser = user;
this.isSelecting = true;
ev.target.classList.add('selected');
this.startDay = day;
}
/**
* @param {?} ev
* @param {?} endDay
* @param {?} user
* @return {?}
*/
endSelect(ev, endDay, user) {
if (this.startUser !== user) {
throw "Start and end row doesn't match! You might have started selecting in one row and ended up in another one.";
}
// tslint:disable-next-line:curly
if (ev.button !== 0)
return;
ev.target.classList.add('selected');
this.isSelecting = false;
this.selections.forEach((/**
* @param {?} el
* @return {?}
*/
(el) => el.nativeElement.classList.remove('selected')));
/** @type {?} */
const DATA = {
endDay: ((/** @type {?} */ (endDay))).toISOString(),
user,
startDay: this.startDay.toISOString(),
};
this.finishedSelecting.emit(DATA);
}
/**
* @param {?} ev
* @return {?}
*/
reCalc(ev) {
if (this.isSelecting) {
/** @type {?} */
const RECT = this.container.nativeElement.getBoundingClientRect();
/** @type {?} */
const X = ev.clientX - RECT.left;
if (X > 1000) {
this.container.nativeElement.scrollLeft += 40;
}
}
}
/**
* @return {?}
*/
scrollToToday() {
/** @type {?} */
const ELEM = (/** @type {?} */ (this.elementRef.nativeElement.querySelector('.bottomData__title.today')));
ELEM.scrollIntoView();
}
/**
* @param {?} year
* @param {?} month
* @param {?} toMonth
* @return {?}
*/
generateMonths(year, month, toMonth) {
/** @type {?} */
let counter = month;
/** @type {?} */
let months = [];
while (counter <= toMonth) {
((/** @type {?} */ (months))) = [...months, new Date(Date.UTC(year, counter, 1))];
counter++;
}
return months;
}
/**
* @param {?} ev
* @param {?} user
* @param {?} project
* @param {?} weekday
* @return {?}
*/
open(ev, user, project, weekday) {
if (this.showBy === 'day') {
const { x, y } = ev;
ev.preventDefault();
this.close();
/** @type {?} */
const positionStrategy = this.overlay
.position()
.flexibleConnectedTo({ x, y })
.withPositions([
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
},
]);
this.overlayRef = this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.close(),
});
this.overlayRef.attach(new TemplatePortal(this.userMenu, this.viewContainerRef, {
$implicit: { user, project, weekday },
}));
this.sub = fromEvent(document, 'click')
.pipe(filter((/**
* @param {?} event
* @return {?}
*/
(event) => {
/** @type {?} */
const clickTarget = (/** @type {?} */ (event.target));
return (!!this.overlayRef &&
!this.overlayRef.overlayElement.contains(clickTarget));
})), take(1))
.subscribe((/**
* @return {?}
*/
() => this.close()));
}
}
/**
* @return {?}
*/
close() {
this.sub && this.sub.unsubscribe();
if (this.overlayRef) {
this.overlayRef.dispose();
this.overlayRef = null;
}
}
/**
* @param {?} data
* @return {?}
*/
excludeDay(data) {
this.close();
this.excludedDay.emit(data);
}
/**
* @param {?} data
* @return {?}
*/
includeDay(data) {
this.close();
this.includedDay.emit(data);
}
/**
* @param {?} day
* @return {?}
*/
isToday(day) {
return new Date(day).toDateString() === new Date().toDateString();
}
/**
* @param {?} index
* @param {?} el
* @return {?}
*/
trackPersons(index, el) {
return el.id;
}
/**
* @param {?} index
* @return {?}
*/
trackMonths(index) {
return index;
}
/**
* @param {?} index
* @return {?}
*/
trackDays(index) {
return index;
}
/**
* @param {?} index
* @param {?} el
* @return {?}
*/
trackData(index, el) {
return el.id;
}
}
SchedulerComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-scheduler',
template: `
<button
*ngIf="libConfig?.showToday"
class="scrollToToday"
(click)="scrollToToday()"
>
{{ todayButtonLabel || 'Today' }}
</button>
<div class="table">
<div class="left">
<div class="spacer"></div>
<div
*ngFor="let person of persons; trackBy: trackPersons"
[ngStyle]="{
height:
person.data.length * 30 >= 60
? (person?.data.length + 3) * 30 + 'px'
: '100px'
}"
class="who"
>
<strong>{{ person?.name }}</strong>
<br />
<small [innerText]="person?.departments || ''"></small>
</div>
</div>
<div #container class="right">
<div class="header">
<div
*ngFor="let day of days; trackBy: trackMonths"
class="headerData"
>
<div class="topData">
<strong
>{{
showBy === 'day'
? (day.month | date: 'MMM yyyy')
: (day.month | date: 'yyyy')
}}
</strong>
</div>
<div class="bottomData">
<div
class="bottomData__title"
*ngFor="let weekday of day?.weekDays; trackBy: trackDays"
[class.today]="isToday(weekday)"
>
<strong>{{
showBy === 'day'
? (weekday | date: 'dd EEE')
: (weekday | date: 'MMMM')
}}</strong>
</div>
</div>
</div>
</div>
<div>
<div
class="pos-rel"
*ngFor="let person of persons; let i = index; trackBy: trackPersons"
>
<div *ngFor="let day of days; trackBy: trackMonths" class="body">
<div
class="bodyData"
[ngStyle]="{
height:
person?.data.length * 30 >= 60
? (person?.data.length + 3) * 30 + 'px'
: '100px',
'background-color': isToday(weekday)
? 'rgba(241, 229, 188, .5)'
: '#fff'
}"
*ngFor="let weekday of day?.weekDays; trackBy: trackDays"
>
<label
class="projectLabel"
*ngFor="let project of person?.data; trackBy: trackData"
>
<span
(contextmenu)="open($event, person.id, project, weekday)"
[showTooltip]="libConfig?.showTooltip"
[tooltip]="project?.description || ''"
[placement]="placement"
[delay]="delay"
[ngStyle]="{ backgroundColor: project?.color }"
*ngIf="
(calculateFromTo(project?.from, project?.to, weekday) &&
!project?.excludeDays.includes(weekday)) ||
project?.includeDays.includes(weekday)
"
(click)="
editInfo.emit({ person: person?.id, project: project })
"
>{{ project?.name }} {{ project?.hours }}</span
>
<span
(contextmenu)="
open($event, person.id, project, weekday);
$event.preventDefault()
"
*ngIf="
(isDayOff(project?.from, project?.to, weekday) &&
!project?.includeDays.includes(weekday)) ||
project?.excludeDays.includes(weekday)
"
class="dayOff"
>
{{ dayOffLabel || 'Day off' }}</span
>
</label>
<div
#selectionDiv
class="selectionDiv"
(mousedown)="startSelect($event, weekday, person?.id)"
(mouseenter)="enter($event)"
(mousemove)="reCalc($event)"
(mouseup)="endSelect($event, weekday, person?.id)"
[ngStyle]="{
width: '100%',
height:
person.data.length * 30 >= 60
? (person?.data.length + 3) * 30 -
person?.data.length * 30 +
'px'
: 100 - person?.data.length * 30 + 'px'
}"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #userMenu let-data>
<section class="user-menu">
<div
*ngIf="
(calculateFromTo(
data?.project?.from,
data?.project?.to,
data?.weekday
) &&
!data?.project?.excludeDays.includes(data?.weekday)) ||
data?.project?.includeDays.includes(data?.weekday)
"
(click)="excludeDay(data)"
>
Exclude day
</div>
<div
*ngIf="
(isDayOff(data?.project?.from, data?.project?.to, data?.weekday) &&
!data?.project?.includeDays.includes(data?.weekday)) ||
data?.project?.excludeDays.includes(data?.weekday)
"
(click)="includeDay(data)"
>
Include day
</div>
</section>
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [`
* {
box-sizing: border-box;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.table {
border: 1px solid #d5d5d5;
background-color: #f5f5f5;
border-spacing: 0;
display: flex;
}
.table .spacer {
width: 300px;
height: 70px;
border: 1px solid #d5d5d5;
}
.table .who {
height: 100px;
padding: 8px 16px;
border: 1px solid #d5d5d5;
background-color: #fff;
}
.table .who strong {
font-size: 16px;
color: #1a1a1a;
}
.table .right {
overflow-x: auto;
overflow-y: hidden;
}
.table .right .header {
display: flex;
}
.table .right .header .topData {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
}
.table .right .header .bottomData {
height: 30px;
display: flex;
}
.table .right .header .bottomData__title {
font-size: 12px;
font-weight: 600;
color: #1a1a1a;
border: 1px solid #d5d5d5;
width: 100px;
min-width: 100px;
padding: 9px;
text-align: left;
}
.pos-rel {
display: flex;
}
.selected {
background-color: #f7f9fa;
border-bottom: 2px solid #dce2e6;
border-top: 2px solid #dce2e6;
border-left-color: transparent;
border-right-color: transparent;
}
.selected:first-of-type {
border-left-color: #dce2e6;
}
.body {
display: flex;
position: relative;
}
.bodyData {
background-color: #fff;
border: 1px solid #d5d5d5;
height: 100px;
width: 100px;
min-width: 100px;
}
.projectLabel {
position: relative;
margin-bottom: 5px;
display: block;
height: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.projectLabel span {
color: #fff;
width: 100%;
display: block;
padding: 5px;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
.dayOff {
background: #f2f0eb 0% 0% no-repeat padding-box;
color: #27241d !important;
}
.today {
background-color: rgba(241, 229, 188, 0.5);
}
.scrollToToday {
background: #f2f0eb 0% 0% no-repeat padding-box;
border-radius: 4px;
border: 0;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0px;
color: #27241d;
font-size: 14px;
line-height: 21px;
padding: 0 15px;
margin-bottom: 10px;
}
.ng-tooltip {
position: absolute;
max-width: 150px;
font-size: 14px;
text-align: center;
color: #f8f8f2;
padding: 3px 8px;
background: #282a36;
border-radius: 4px;
z-index: 1000;
opacity: 0;
}
.ng-tooltip:after {
content: '';
position: absolute;
border-style: solid;
}
.ng-tooltip-top:after {
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: black transparent transparent transparent;
}
.ng-tooltip-bottom:after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: transparent transparent black transparent;
}
.ng-tooltip-left:after {
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent transparent transparent black;
}
.ng-tooltip-right:after {
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent black transparent transparent;
}
.ng-tooltip-show {
opacity: 1;
}
.my-menu {
background-color: #fff;
border: 1px solid rosybrown;
padding: 20px;
}
.user-menu {
background-color: #fafafa;
padding: 4pt;
font-size: 10pt;
z-index: 1000;
box-shadow: 0 0 12pt rgba(0, 0, 0, 0.25);
border-radius: 4pt;
padding: 0.5em 0 0.5em 0;
animation: fadeIn 0.1s ease-out;
opacity: 1;
display: block;
}
.user-menu hr {
border: none;
border-bottom: 1px solid #eee;
}
.user-menu div {
cursor: pointer;
display: block;
text-decoration: none;
color: #333;
padding: 0.5em 2em 0.5em 0.75em;
max-width: 18em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu div:hover {
background-color: #333;
color: #fff;
}
.user-menu div::before {
content: '';
float: left;
margin-right: 0.75em;
width: 0.5em;
height: 1em;
display: inline-block;
}
/* Animatinons */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.is-fadingIn {
-webkit-animation: fadeIn 0.1s ease-out;
animation: fadeIn 0.1s ease-out;
opacity: 1;
display: block;
}
.is-fadingOut {
-webkit-animation: fadeOut 0.1s ease-out;
animation: fadeOut 0.1s ease-out;
opacity: 0;
display: block;
}
`]
}] }
];
/** @nocollapse */
SchedulerComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [USER_OPTIONS,] }] },
{ type: ElementRef },
{ type: Overlay },
{ type: ViewContainerRef }
];
SchedulerComponent.propDecorators = {
container: [{ type: ViewChild, args: ['container', { static: true },] }],
userMenu: [{ type: ViewChild, args: ['userMenu', { static: true },] }],
selections: [{ type: ViewChildren, args: ['selectionDiv',] }],
persons: [{ type: Input }],
showBy: [{ type: Input }],
delay: [{ type: Input }],
dayOffLabel: [{ type: Input }],
todayButtonLabel: [{ type: Input }],
placement: [{ type: Input }],
finishedSelecting: [{ type: Output }],
editInfo: [{ type: Output }],
excludedDay: [{ type: Output }],
includedDay: [{ type: Output }]
};
if (false) {
/** @type {?} */
SchedulerComponent.prototype.days;
/** @type {?} */
SchedulerComponent.prototype.isSelecting;
/** @type {?} */
SchedulerComponent.prototype.startDay;
/** @type {?} */
SchedulerComponent.prototype.startUser;
/** @type {?} */
SchedulerComponent.prototype.sub;
/** @type {?} */
SchedulerComponent.prototype.overlayRef;
/** @type {?} */
SchedulerComponent.prototype.container;
/** @type {?} */
SchedulerComponent.prototype.userMenu;
/** @type {?} */
SchedulerComponent.prototype.selections;
/** @type {?} */
SchedulerComponent.prototype.persons;
/** @type {?} */
SchedulerComponent.prototype.showBy;
/** @type {?} */
SchedulerComponent.prototype.delay;
/** @type {?} */
SchedulerComponent.prototype.dayOffLabel;
/** @type {?} */
SchedulerComponent.prototype.todayButtonLabel;
/** @type {?} */
SchedulerComponent.prototype.placement;
/** @type {?} */
SchedulerComponent.prototype.finishedSelecting;
/** @type {?} */
SchedulerComponent.prototype.editInfo;
/** @type {?} */
SchedulerComponent.prototype.excludedDay;
/** @type {?} */
SchedulerComponent.prototype.includedDay;
/** @type {?} */
SchedulerComponent.prototype.libConfig;
/**
* @type {?}
* @private
*/
SchedulerComponent.prototype.elementRef;
/** @type {?} */
SchedulerComponent.prototype.overlay;
/** @type {?} */
SchedulerComponent.prototype.viewContainerRef;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/tooltip.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TooltipDirective {
/**
* @param {?} el
* @param {?} renderer
*/
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.offset = 10;
}
/**
* @return {?}
*/
onMouseEnter() {
if (!this.tooltip && this.tooltipTitle !== '' && this.showTooltip) {
this.show();
}
}
/**
* @return {?}
*/
onMouseLeave() {
if (this.tooltip) {
this.hide();
}
}
/**
* @return {?}
*/
show() {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
}
/**
* @return {?}
*/
hide() {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
window.setTimeout((/**
* @return {?}
*/
() => {
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
}), this.delay);
}
/**
* @return {?}
*/
create() {
this.tooltip = this.renderer.createElement('span');
this.renderer.appendChild(this.tooltip, this.renderer.createText(this.tooltipTitle));
this.renderer.appendChild(document.body, this.tooltip);
this.renderer.addClass(this.tooltip, 'ng-tooltip');
this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
}
/**
* @return {?}
*/
setPosition() {
/** @type {?} */
const hostPos = this.el.nativeElement.getBoundingClientRect();
/** @type {?} */
const tooltipPos = this.tooltip.getBoundingClientRect();
/** @type {?} */
const scrollPos = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
/** @type {?} */
let top;
/** @type {?} */
let left;
if (this.placement === 'top') {
top = hostPos.top - tooltipPos.height - this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'bottom') {
top = hostPos.bottom + this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'left') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.left - tooltipPos.width - this.offset;
}
if (this.placement === 'right') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.right + this.offset;
}
this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
}
}
TooltipDirective.decorators = [
{ type: Directive, args: [{
selector: '[tooltip]',
},] }
];
/** @nocollapse */
TooltipDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 }
];
TooltipDirective.propDecorators = {
tooltipTitle: [{ type: Input, args: ['tooltip',] }],
placement: [{ type: Input }],
delay: [{ type: Input }],
showTooltip: [{ type: Input }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
};
if (false) {
/** @type {?} */
TooltipDirective.prototype.tooltipTitle;
/** @type {?} */
TooltipDirective.prototype.placement;
/** @type {?} */
TooltipDirective.prototype.delay;
/** @type {?} */
TooltipDirective.prototype.showTooltip;
/** @type {?} */
TooltipDirective.prototype.tooltip;
/** @type {?} */
TooltipDirective.prototype.offset;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.el;
/**
* @type {?}
* @private
*/
TooltipDirective.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/scheduler.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SchedulerModule {
/**
* @param {?=} libConfig
* @return {?}
*/
static forRoot(libConfig) {
return {
ngModule: SchedulerModule,
providers: [
{
provide: USER_OPTIONS,
useValue: libConfig,
},
],
};
}
}
SchedulerModule.decorators = [
{ type: NgModule, args: [{
declarations: [SchedulerComponent, TooltipDirective],
imports: [CommonModule, OverlayModule],
exports: [SchedulerComponent, TooltipDirective],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/day.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function Day() { }
if (false) {
/** @type {?} */
Day.prototype.month;
/** @type {?} */
Day.prototype.weekDays;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/person.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function Person() { }
if (false) {
/** @type {?} */
Person.prototype.id;
/** @type {?} */
Person.prototype.name;
/** @type {?|undefined} */
Person.prototype.departments;
/** @type {?} */
Person.prototype.data;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/placement.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/project.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function Project() { }
if (false) {
/** @type {?} */
Project.prototype.id;
/** @type {?} */
Project.prototype.name;
/** @type {?} */
Project.prototype.color;
/** @type {?} */
Project.prototype.from;
/** @type {?} */
Project.prototype.to;
/** @type {?|undefined} */
Project.prototype.hours;
/** @type {?|undefined} */
Project.prototype.description;
/** @type {?} */
Project.prototype.includeDays;
/** @type {?} */
Project.prototype.excludeDays;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/scheduler.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function LibConfig() { }
if (false) {
/** @type {?|undefined} */
LibConfig.prototype.showTooltip;
/** @type {?|undefined} */
LibConfig.prototype.showToday;
/** @type {?|undefined} */
LibConfig.prototype.monthsInPast;
/** @type {?|undefined} */
LibConfig.prototype.monthsInFuture;
/** @type {?|undefined} */
LibConfig.prototype.skipDays;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/showBy.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: lib/interfaces/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: angular-schedule.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { SchedulerComponent, SchedulerModule, SchedulerService, TooltipDirective, USER_OPTIONS };
//# sourceMappingURL=angular-schedule.js.map