@mintplayer/ng-bootstrap 13.1.26 → 13.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2119,6 +2119,8 @@ class BsSchedulerComponent {
2119
2119
  this.events$ = new BehaviorSubject([]);
2120
2120
  this.previewEvent$ = new BehaviorSubject(null);
2121
2121
  this.timeSlotDuration$ = new BehaviorSubject(1800);
2122
+ this.timeSlots$ = new BehaviorSubject([]);
2123
+ // timeSlots$: Observable<TimeSlot[][]>;
2122
2124
  this.mouseState$ = new BehaviorSubject(false);
2123
2125
  this.hoveredTimeSlot$ = new BehaviorSubject(null);
2124
2126
  this.destroyed$ = new Subject();
@@ -2196,14 +2198,15 @@ class BsSchedulerComponent {
2196
2198
  parts: result
2197
2199
  };
2198
2200
  }));
2199
- this.timeSlots$ = combineLatest([this.daysOfWeek$, this.timeSlotDuration$])
2201
+ // this.timeSlots$ =
2202
+ combineLatest([this.daysOfWeek$, this.timeSlotDuration$])
2200
2203
  .pipe(map(([daysOfWeek, duration]) => {
2201
2204
  const timeSlotsPerDay = Math.floor((60 * 60 * 24) / duration);
2202
2205
  return Array.from(Array(timeSlotsPerDay).keys()).map((index) => {
2203
2206
  const timeSlotStart = new Date(daysOfWeek[0]);
2204
- timeSlotStart.setSeconds(timeSlotStart.getSeconds() + index * duration);
2207
+ timeSlotStart.setTime(+timeSlotStart.getTime() + index * duration * 1000);
2205
2208
  const timeSlotEnd = new Date(timeSlotStart);
2206
- timeSlotEnd.setSeconds(timeSlotEnd.getSeconds() + duration);
2209
+ timeSlotEnd.setTime(+timeSlotEnd.getTime() + duration * 1000);
2207
2210
  return daysOfWeek.map((day) => {
2208
2211
  const start = new Date(day);
2209
2212
  start.setHours(timeSlotStart.getHours());
@@ -2215,10 +2218,15 @@ class BsSchedulerComponent {
2215
2218
  end.setMinutes(timeSlotEnd.getMinutes());
2216
2219
  end.setSeconds(timeSlotEnd.getSeconds());
2217
2220
  end.setMilliseconds(timeSlotEnd.getMilliseconds());
2221
+ end.setDate(end.getDate() + timeSlotEnd.getDate() - timeSlotStart.getDate());
2218
2222
  return { start, end };
2219
2223
  });
2220
2224
  });
2221
- }));
2225
+ }))
2226
+ .subscribe((timeslots) => {
2227
+ // For performance reasons, we're not using an observable here, but persist the timeslots in a BehaviorSubject.
2228
+ this.timeSlots$.next(timeslots);
2229
+ });
2222
2230
  this.unitHeight$
2223
2231
  .pipe(takeUntil(this.destroyed$))
2224
2232
  .subscribe((unitHeight) => {
@@ -2256,12 +2264,21 @@ class BsSchedulerComponent {
2256
2264
  event: {
2257
2265
  start: slot.start,
2258
2266
  end: slot.end,
2259
- color: '#5AC8FA',
2267
+ color: '#F00',
2260
2268
  description: 'Test event',
2261
2269
  }
2262
2270
  };
2263
2271
  this.previewEvent$.next({ start: slot.start, end: slot.end });
2264
- // this.events$.next([...this.events$.value, this.operation.event]);
2272
+ }
2273
+ randomColor() {
2274
+ const brightness = 128;
2275
+ return '#' + this.randomChannel(brightness) + this.randomChannel(brightness) + this.randomChannel(brightness);
2276
+ }
2277
+ randomChannel(brightness) {
2278
+ const r = 255 - brightness;
2279
+ const n = 0 | ((Math.random() * r) + brightness);
2280
+ const s = n.toString(16);
2281
+ return (s.length == 1) ? '0' + s : s;
2265
2282
  }
2266
2283
  onStartDragEvent(eventPart, ev) {
2267
2284
  ev.preventDefault();
@@ -2318,9 +2335,6 @@ class BsSchedulerComponent {
2318
2335
  }
2319
2336
  else if (this.dragStartTimeslot.start.getTime() < hovered.start.getTime()) {
2320
2337
  // Drag down
2321
- // this.operation.event.start = this.dragStartTimeslot.start;
2322
- // this.operation.event.end = hovered.end;
2323
- // this.events$.next(this.events$.value);
2324
2338
  this.previewEvent$
2325
2339
  .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
2326
2340
  .pipe(map((ev) => {
@@ -2335,9 +2349,6 @@ class BsSchedulerComponent {
2335
2349
  }
2336
2350
  else if (this.dragStartTimeslot.start.getTime() > hovered.start.getTime()) {
2337
2351
  // Drag up
2338
- // this.operation.event.start = hovered.start;
2339
- // this.operation.event.end = this.dragStartTimeslot.end;
2340
- // this.events$.next(this.events$.value);
2341
2352
  this.previewEvent$
2342
2353
  .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
2343
2354
  .pipe(map((ev) => {
@@ -2364,14 +2375,21 @@ class BsSchedulerComponent {
2364
2375
  .pipe(filter((ev) => !!ev && !!this.dragStartTimeslot))
2365
2376
  .pipe(map((ev) => {
2366
2377
  if (ev && this.dragStartTimeslot) {
2367
- ev.start.setTime(ev.start.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
2368
- ev.end.setTime(ev.end.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime());
2378
+ const result = {
2379
+ start: new Date(ev.start.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime()),
2380
+ end: new Date(ev.end.getTime() + hovered.start.getTime() - this.dragStartTimeslot.start.getTime())
2381
+ };
2369
2382
  this.dragStartTimeslot = hovered;
2383
+ return result;
2384
+ }
2385
+ else {
2386
+ return ev;
2370
2387
  }
2371
- return ev;
2372
2388
  }))
2373
2389
  .pipe(take(1))
2374
- .subscribe((ev) => this.previewEvent$.next(ev));
2390
+ .subscribe((ev) => {
2391
+ this.previewEvent$.next(ev);
2392
+ });
2375
2393
  }
2376
2394
  }
2377
2395
  break;
@@ -2394,7 +2412,7 @@ class BsSchedulerComponent {
2394
2412
  this.events$.next([...this.events$.value, {
2395
2413
  start: previewEvent.start,
2396
2414
  end: previewEvent.end,
2397
- color: '#F00',
2415
+ color: this.randomColor(),
2398
2416
  description: 'New event'
2399
2417
  }]);
2400
2418
  this.previewEvent$.next(null);
@@ -2427,10 +2445,10 @@ class BsSchedulerComponent {
2427
2445
  }
2428
2446
  }
2429
2447
  BsSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: BsCalendarMonthService }, { token: BsTimelineService }], target: i0.ɵɵFactoryTarget.Component });
2430
- BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { unitHeight: "unitHeight" }, outputs: { unitHeightChange: "unitHeightChange" }, host: { listeners: { "document:mousemove": "onMousemove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "timeSlotElements", predicate: ["slot"], descendants: true }], ngImport: i0, template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n <div class=\"calendar-head\">\n <div class=\"w-100 d-flex flex-row\">\n <div class=\"d-flex calendar-left justify-content-between\">\n <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n </div>\n <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n <span class=\"d-block col-form-label text-center\">\n {{ day | date: 'dd-MM-yyyy' }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\">\n <div class=\"position-relative\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n </div>\n \n <!-- Events -->\n <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n <div class=\"event-border\"></div>\n <ng-container *ngIf=\"eventPart.part.event\">\n <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"></div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe, "bsSecondsTodayOffset": BsSecondsTodayOffsetPipe, "bsSecondsTimespan": BsSecondsTimespanPipe, "dayOfWeek": DayOfWeekPipe } });
2448
+ BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { unitHeight: "unitHeight" }, outputs: { unitHeightChange: "unitHeightChange" }, host: { listeners: { "document:mousemove": "onMousemove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "timeSlotElements", predicate: ["slot"], descendants: true }], ngImport: i0, template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n <div class=\"calendar-head\">\n <div class=\"w-100 d-flex flex-row\">\n <div class=\"d-flex calendar-left justify-content-between\">\n <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n </div>\n <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n <span class=\"d-block col-form-label text-center\">\n {{ day | date: 'dd-MM-yyyy' }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\">\n <div class=\"position-relative\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n </div>\n \n <!-- Events -->\n <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n <ng-container *ngIf=\"(unitHeight$ | async) as unitHeight\">\n <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n <div class=\"event-border\"></div>\n <ng-container *ngIf=\"eventPart.part.event\">\n <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"></div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all;overflow-x:hidden}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe, "bsSecondsTodayOffset": BsSecondsTodayOffsetPipe, "bsSecondsTimespan": BsSecondsTimespanPipe, "dayOfWeek": DayOfWeekPipe } });
2431
2449
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsSchedulerComponent, decorators: [{
2432
2450
  type: Component,
2433
- args: [{ selector: 'bs-scheduler', template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n <div class=\"calendar-head\">\n <div class=\"w-100 d-flex flex-row\">\n <div class=\"d-flex calendar-left justify-content-between\">\n <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n </div>\n <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n <span class=\"d-block col-form-label text-center\">\n {{ day | date: 'dd-MM-yyyy' }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\">\n <div class=\"position-relative\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n </div>\n \n <!-- Events -->\n <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n <div class=\"event-border\"></div>\n <ng-container *ngIf=\"eventPart.part.event\">\n <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * (unitHeight$ | async)!\"></div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"] }]
2451
+ args: [{ selector: 'bs-scheduler', template: "<div class=\"table d-flex w-100 overflow-y-auto\" [style.max-height.px]=\"null\">\n <div class=\"calendar-head\">\n <div class=\"w-100 d-flex flex-row\">\n <div class=\"d-flex calendar-left justify-content-between\">\n <button class=\"btn btn-default flex-start\" (click)=\"onPreviousWeek()\">&lt;</button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeek()\">&gt;</button>\n </div>\n <div class=\"flex-grow-1\" *ngFor=\"let day of (daysOfWeek$ | async)\">\n <span class=\"d-block col-form-label text-center\">\n {{ day | date: 'dd-MM-yyyy' }}\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\">\n <div class=\"position-relative\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of (timeSlots$ | async); let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"unitHeight$ | async\">\n <div class=\"calendar-cell calendar-left align-top py-0\">{{ timeslots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots; let j = index\" #slot (mousedown)=\"onCreateEvent($event, slot)\" [attr.data-row]=\"i\" [attr.data-column]=\"j\"></div>\n </div>\n \n <!-- Events -->\n <ng-container *ngIf=\"(timeSlotDuration$ | async) as timeSlotDuration\">\n <ng-container *ngIf=\"(unitHeight$ | async) as unitHeight\">\n <ng-container *ngIf=\"(timelinedEventPartsForThisWeek$ | async) as partData\">\n <div *ngFor=\"let eventPart of partData.parts\" class=\"event p-0\"\n [style.top.px]=\"(eventPart.part | bsSecondsTodayOffset) / timeSlotDuration * unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\">\n <div class=\"event-border\"></div>\n <ng-container *ngIf=\"eventPart.part.event\">\n <div class=\"event-bg\" [style.background-color]=\"eventPart.part.event.color\"></div>\n <div class=\"event-label\">{{ eventPart.part.event.description }}</div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"(previewEventPartsForThisWeek$ | async) as previewPartData\">\n <div *ngFor=\"let eventPart of previewPartData\" class=\"event preview p-0\"\n [style.top.px]=\"(eventPart | bsSecondsTodayOffset) / timeSlotDuration * unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\" [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * unitHeight\"></div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>", styles: [":host{display:block}.table{flex-flow:column}.table .calendar-head{flex:0 0 auto}.table .calendar-head>div{padding-right:18px}.table .calendar-body{flex:1 1 auto;display:block;overflow-y:visible;overflow-x:hidden}.table .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.table .calendar-body .calendar-cell.hover{border-top-width:3px}.table .calendar-left{width:90px}.event{z-index:5;width:calc((100% - 90px) / 7);height:100px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.event.preview{background:#666;opacity:.6}.event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.event .event-inner{position:relative;left:0px;right:5px;top:0px;bottom:5px;cursor:move;pointer-events:all;overflow-x:hidden}.event .event-inner .event-bg{opacity:.5;width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px);transition:opacity .15s ease-in-out}.event .event-inner .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.event .event-inner:hover .event-bg{opacity:.7}\n"] }]
2434
2452
  }], ctorParameters: function () { return [{ type: BsCalendarMonthService }, { type: BsTimelineService }]; }, propDecorators: { timeSlotElements: [{
2435
2453
  type: ViewChildren,
2436
2454
  args: ['slot']