@mintplayer/ng-bootstrap 15.5.1 → 15.6.0
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.
- package/_bootstrap.scss +0 -2
- package/calendar/src/calendar.module.d.ts +4 -3
- package/esm2020/calendar/src/calendar.component.mjs +5 -4
- package/esm2020/calendar/src/calendar.module.mjs +5 -1
- package/esm2020/icon/index.mjs +3 -0
- package/esm2020/icon/mintplayer-ng-bootstrap-icon.mjs +5 -0
- package/esm2020/icon/src/icon.component.mjs +34 -0
- package/esm2020/icon/src/icon.module.mjs +18 -0
- package/esm2020/scheduler/src/components/resource-group-presenter/resource-group-presenter.component.mjs +4 -3
- package/esm2020/scheduler/src/components/scheduler/scheduler.component.mjs +8 -7
- package/esm2020/scheduler/src/scheduler.module.mjs +8 -4
- package/esm2020/timepicker/src/timepicker.component.mjs +9 -8
- package/esm2020/timepicker/src/timepicker.module.mjs +5 -1
- package/fesm2015/mintplayer-ng-bootstrap-calendar.mjs +8 -3
- package/fesm2015/mintplayer-ng-bootstrap-calendar.mjs.map +1 -1
- package/fesm2015/mintplayer-ng-bootstrap-icon.mjs +56 -0
- package/fesm2015/mintplayer-ng-bootstrap-icon.mjs.map +1 -0
- package/fesm2015/mintplayer-ng-bootstrap-scheduler.mjs +12 -7
- package/fesm2015/mintplayer-ng-bootstrap-scheduler.mjs.map +1 -1
- package/fesm2015/mintplayer-ng-bootstrap-timepicker.mjs +12 -7
- package/fesm2015/mintplayer-ng-bootstrap-timepicker.mjs.map +1 -1
- package/fesm2020/mintplayer-ng-bootstrap-calendar.mjs +8 -3
- package/fesm2020/mintplayer-ng-bootstrap-calendar.mjs.map +1 -1
- package/fesm2020/mintplayer-ng-bootstrap-icon.mjs +56 -0
- package/fesm2020/mintplayer-ng-bootstrap-icon.mjs.map +1 -0
- package/fesm2020/mintplayer-ng-bootstrap-scheduler.mjs +12 -7
- package/fesm2020/mintplayer-ng-bootstrap-scheduler.mjs.map +1 -1
- package/fesm2020/mintplayer-ng-bootstrap-timepicker.mjs +12 -7
- package/fesm2020/mintplayer-ng-bootstrap-timepicker.mjs.map +1 -1
- package/icon/index.d.ts +2 -0
- package/icon/src/icon.component.d.ts +12 -0
- package/icon/src/icon.module.d.ts +8 -0
- package/package.json +9 -1
- package/scheduler/src/scheduler.module.d.ts +2 -1
- package/timepicker/src/timepicker.module.d.ts +7 -6
|
@@ -4,6 +4,8 @@ import { BehaviorSubject, Subject, map, filter, take, combineLatest, takeUntil }
|
|
|
4
4
|
import * as i1 from '@mintplayer/ng-bootstrap/calendar-month';
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
|
+
import * as i2 from '@mintplayer/ng-bootstrap/icon';
|
|
8
|
+
import { BsIconModule } from '@mintplayer/ng-bootstrap/icon';
|
|
7
9
|
|
|
8
10
|
var ESchedulerMode;
|
|
9
11
|
(function (ESchedulerMode) {
|
|
@@ -148,10 +150,10 @@ class ResourceGroupPresenterComponent {
|
|
|
148
150
|
}
|
|
149
151
|
}
|
|
150
152
|
ResourceGroupPresenterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResourceGroupPresenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
151
|
-
ResourceGroupPresenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: { level: "level", resourceGroup: "resourceGroup", timeSlots: "timeSlots", isExpanded: "isExpanded" }, ngImport: i0, template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n <!-- Data is a resource group -->\n <ng-container *ngIf=\"data.resourceGroup\">\n <!-- Header -->\n <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n <span class=\"p-2 align-middle position-sticky\">\n <
|
|
153
|
+
ResourceGroupPresenterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: { level: "level", resourceGroup: "resourceGroup", timeSlots: "timeSlots", isExpanded: "isExpanded" }, ngImport: i0, template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n <!-- Data is a resource group -->\n <ng-container *ngIf=\"data.resourceGroup\">\n <!-- Header -->\n <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n <span class=\"p-2 align-middle position-sticky\">\n <bs-icon [icon]=\"'chevron-down'\" [style.padding-left.px]=\"level * 20\" *ngIf=\"isExpanded$ | async\"></bs-icon>\n <bs-icon [icon]=\"'chevron-right'\" [style.padding-left.px]=\"level * 20\" *ngIf=\"(isExpanded$ | async) === false\"></bs-icon>\n {{ data.resourceGroup.description }}\n </span>\n </td>\n </ng-container>\n </tr>\n\n <!-- Subgroups or resources -->\n <ng-container *ngIf=\"isExpanded$ | async\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <ng-container *ngFor=\"let child of data.resourceGroup.children\">\n <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Data is a resource -->\n <tr *ngIf=\"data.resource\" class=\"p-0 bordered\" [title]=\"data.resource.description\">\n <td class=\"p-0 bg-white\">\n <div class=\"p-2\">{{ data.resource.description }}</div>\n </td>\n <ng-container *ngFor=\"let slots of (timeSlots$ | async)\">\n <td class=\"bg-white border-1\" *ngFor=\"let slot of slots.slots\">\n <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n </td>\n </ng-container>\n </tr>\n</ng-container>", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BsIconComponent, selector: "bs-icon", inputs: ["icon"] }, { kind: "component", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] });
|
|
152
154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ResourceGroupPresenterComponent, decorators: [{
|
|
153
155
|
type: Component,
|
|
154
|
-
args: [{ selector: 'bs-resource-group-presenter', template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n <!-- Data is a resource group -->\n <ng-container *ngIf=\"data.resourceGroup\">\n <!-- Header -->\n <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n <span class=\"p-2 align-middle position-sticky\">\n <
|
|
156
|
+
args: [{ selector: 'bs-resource-group-presenter', template: "<ng-container *ngIf=\"(data$ | async) as data\">\n\n <!-- Data is a resource group -->\n <ng-container *ngIf=\"data.resourceGroup\">\n <!-- Header -->\n <tr class=\"p-0 cursor-pointer\" *ngIf=\"(timeSlots$ | async) as timeSlots\" [title]=\"data.resourceGroup.description\">\n <ng-container *ngIf=\"(colSpan$ | async) as colspan\">\n <td class=\"p-2 cursor-pointer\" [colSpan]=\"colspan + 1\" (click)=\"toggleExpanded()\">\n <span class=\"p-2 align-middle position-sticky\">\n <bs-icon [icon]=\"'chevron-down'\" [style.padding-left.px]=\"level * 20\" *ngIf=\"isExpanded$ | async\"></bs-icon>\n <bs-icon [icon]=\"'chevron-right'\" [style.padding-left.px]=\"level * 20\" *ngIf=\"(isExpanded$ | async) === false\"></bs-icon>\n {{ data.resourceGroup.description }}\n </span>\n </td>\n </ng-container>\n </tr>\n\n <!-- Subgroups or resources -->\n <ng-container *ngIf=\"isExpanded$ | async\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <ng-container *ngFor=\"let child of data.resourceGroup.children\">\n <bs-resource-group-presenter [resourceGroup]=\"child\" [timeSlots]=\"timeSlots\" [level]=\"level + 1\"></bs-resource-group-presenter>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <!-- Data is a resource -->\n <tr *ngIf=\"data.resource\" class=\"p-0 bordered\" [title]=\"data.resource.description\">\n <td class=\"p-0 bg-white\">\n <div class=\"p-2\">{{ data.resource.description }}</div>\n </td>\n <ng-container *ngFor=\"let slots of (timeSlots$ | async)\">\n <td class=\"bg-white border-1\" *ngFor=\"let slot of slots.slots\">\n <!-- {{ slot.start | date: 'dd/MM/yyyy HH:mm:ss' }} -->\n </td>\n </ng-container>\n </tr>\n</ng-container>", styles: [":host{display:contents}tr{border-bottom-width:1px}tr:not(.bordered) td span.position-sticky{left:0;right:0}\n"] }]
|
|
155
157
|
}], ctorParameters: function () { return []; }, propDecorators: { level: [{
|
|
156
158
|
type: Input
|
|
157
159
|
}], resourceGroup: [{
|
|
@@ -706,10 +708,10 @@ class BsSchedulerComponent {
|
|
|
706
708
|
}
|
|
707
709
|
}
|
|
708
710
|
BsSchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSchedulerComponent, deps: [{ token: i1.BsCalendarMonthService }, { token: BsTimelineService }], target: i0.ɵɵFactoryTarget.Component });
|
|
709
|
-
BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { mode: "mode", weekOptions: "weekOptions", timelineOptions: "timelineOptions", maxInnerHeight: "maxInnerHeight", resources: "resources" }, outputs: { modeChange: "modeChange", weekOptionsChange: "weekOptionsChange", timelineOptionsChange: "timelineOptionsChange" }, host: { listeners: { "document:mousemove": "onMousemove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "timeSlotElements", predicate: ["slot"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [style.max-height.px]=\"null\"\n *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n <i class=\"bi-chevron-left px-0\"></i>\n </button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n <i class=\"bi-chevron-right px-0\"></i>\n </button>\n </div>\n <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n <span class=\"d-block col-form-label text-center text-nowrap\">\n <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n <div class=\"event-resize top\"\n *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n <div class=\"event-border\"></div>\n <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n (mouseleave)=\"onLeaveEvent(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 </div>\n <div class=\"event-resize bottom\"\n *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n <div class=\"calendar-head d-flex\">\n <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n <i class=\"bi-chevron-left px-0\"></i>\n </button>\n <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n <i class=\"bi-chevron-right px-0\"></i>\n </button>\n </div>\n \n <div class=\"calendar-body table-responsive overflow-x-auto\">\n <table class=\"table mb-0\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <tr>\n <td></td>\n <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n </td>\n </tr>\n <tr>\n <td></td>\n <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n <ng-container *ngFor=\"let day of timeSlots\">\n <td *ngFor=\"let slot of day.slots\">\n <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n {{ slot.start | date: 'HH:mm' }}\n </span>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n </ng-container>\n </table>\n </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: BsSecondsTimespanPipe, name: "bsSecondsTimespan" }, { kind: "pipe", type: BsSecondsTodayOffsetPipe, name: "bsSecondsTodayOffset" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }] });
|
|
711
|
+
BsSchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BsSchedulerComponent, selector: "bs-scheduler", inputs: { mode: "mode", weekOptions: "weekOptions", timelineOptions: "timelineOptions", maxInnerHeight: "maxInnerHeight", resources: "resources" }, outputs: { modeChange: "modeChange", weekOptionsChange: "weekOptionsChange", timelineOptionsChange: "timelineOptionsChange" }, host: { listeners: { "document:mousemove": "onMousemove($event)", "document:mouseup": "onMouseUp($event)" } }, viewQueries: [{ propertyName: "timeSlotElements", predicate: ["slot"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [style.max-height.px]=\"null\"\n *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-left'\" class=\"px-0\"></bs-icon>\n </button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-right'\" class=\"px-0\"></bs-icon>\n </button>\n </div>\n <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n <span class=\"d-block col-form-label text-center text-nowrap\">\n <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n <div class=\"event-resize top\"\n *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n <div class=\"event-border\"></div>\n <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n (mouseleave)=\"onLeaveEvent(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 </div>\n <div class=\"event-resize bottom\"\n *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n <div class=\"calendar-head d-flex\">\n <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-left'\" class=\"px-0\"></bs-icon>\n </button>\n <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-right'\" class=\"px-0\"></bs-icon>\n </button>\n </div>\n \n <div class=\"calendar-body table-responsive overflow-x-auto\">\n <table class=\"table mb-0\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <tr>\n <td></td>\n <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n </td>\n </tr>\n <tr>\n <td></td>\n <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n <ng-container *ngFor=\"let day of timeSlots\">\n <td *ngFor=\"let slot of day.slots\">\n <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n {{ slot.start | date: 'HH:mm' }}\n </span>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n </ng-container>\n </table>\n </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BsIconComponent, selector: "bs-icon", inputs: ["icon"] }, { kind: "component", type: ResourceGroupPresenterComponent, selector: "bs-resource-group-presenter", inputs: ["level", "resourceGroup", "timeSlots", "isExpanded"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: BsSecondsTimespanPipe, name: "bsSecondsTimespan" }, { kind: "pipe", type: BsSecondsTodayOffsetPipe, name: "bsSecondsTodayOffset" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }] });
|
|
710
712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSchedulerComponent, decorators: [{
|
|
711
713
|
type: Component,
|
|
712
|
-
args: [{ selector: 'bs-scheduler', template: "<div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [style.max-height.px]=\"null\"\n *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n <i class=\"bi-chevron-left px-0\"></i>\n </button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n <i class=\"bi-chevron-right px-0\"></i>\n </button>\n </div>\n <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n <span class=\"d-block col-form-label text-center text-nowrap\">\n <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n <div class=\"event-resize top\"\n *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n <div class=\"event-border\"></div>\n <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n (mouseleave)=\"onLeaveEvent(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 </div>\n <div class=\"event-resize bottom\"\n *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n <div class=\"calendar-head d-flex\">\n <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n <i class=\"bi-chevron-left px-0\"></i>\n </button>\n <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n <i class=\"bi-chevron-right px-0\"></i>\n </button>\n </div>\n \n <div class=\"calendar-body table-responsive overflow-x-auto\">\n <table class=\"table mb-0\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <tr>\n <td></td>\n <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n </td>\n </tr>\n <tr>\n <td></td>\n <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n <ng-container *ngFor=\"let day of timeSlots\">\n <td *ngFor=\"let slot of day.slots\">\n <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n {{ slot.start | date: 'HH:mm' }}\n </span>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n </ng-container>\n </table>\n </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"] }]
|
|
714
|
+
args: [{ selector: 'bs-scheduler', template: "<div class=\"d-flex flex-column w-100 overflow-y-auto mb-0 week-schedule\" [style.max-height.px]=\"null\"\n *ngIf=\"(mode$ | async) === modes.week\">\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)=\"onPreviousWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-left'\" class=\"px-0\"></bs-icon>\n </button>\n <button class=\"btn btn-default flex-end\" (click)=\"onNextWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-right'\" class=\"px-0\"></bs-icon>\n </button>\n </div>\n <div class=\"flex-grow-1 calendar-head-cell\" *ngFor=\"let day of (shownDays$ | async)\">\n <span class=\"d-block col-form-label text-center text-nowrap\">\n <span>{{ day | date: 'dd-MM' }}</span><span class=\"d-none d-lg-inline-block\">-{{ day | date: 'yyyy' }}</span>\n </span>\n </div>\n </div>\n </div>\n <div class=\"calendar-body\" [style.height.px]=\"maxInnerHeight\">\n <div class=\"position-relative\" *ngIf=\"(timeSlots$ | async) as row\">\n <ng-container *ngIf=\"(weekOptions$ | async) as weekOptions\">\n <!-- Timeslots -->\n <div *ngFor=\"let timeslots of row; let i = index\" class=\"d-flex flex-row p-0 timeslot\" [style.height.px]=\"weekOptions.unitHeight\">\n <div class=\"calendar-cell calendar-left align-top px-2 py-0\">{{ timeslots.slots[0].start | date: 'HH:mm:ss' }}</div>\n <div class=\"calendar-cell flex-grow-1\" *ngFor=\"let slot of timeslots.slots; 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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart.part | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner\" [class.hover]=\"(hoveredEvent$ | async) === eventPart.part.event\"\n [style.width]=\"'calc(100% / ' + partData.total + ')'\"\n [style.height.px]=\"(eventPart.part | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.margin-left]=\"'calc(100% / ' + partData.total + ' * ' + eventPart.index + ')'\">\n\n <div class=\"event-resize top\"\n *ngIf=\"eventPart.part.start === eventPart.part.event?.start\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'top')\"></div>\n <div class=\"event-border\"></div>\n <div class=\"event-wrapper\" *ngIf=\"eventPart.part.event\"\n (mousedown)=\"onStartDragEvent(eventPart.part, $event)\"\n (mouseenter)=\"onHoverEvent(eventPart.part.event)\"\n (mouseleave)=\"onLeaveEvent(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 </div>\n <div class=\"event-resize bottom\"\n *ngIf=\"eventPart.part.end === eventPart.part.event?.end\"\n (mousedown)=\"onStartResizeEvent(eventPart.part.event, 'bottom')\"></div>\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 * weekOptions.unitHeight\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\"\n [style.left]=\"'calc(90px + ((100% - 90px) / 7 * ' + ((eventPart | dayOfWeek) - 1) + '))'\">\n <div class=\"event-inner w-100\"\n [style.height.px]=\"(eventPart | bsSecondsTimespan) / timeSlotDuration * weekOptions.unitHeight\">\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n</div>\n<div class=\"d-flex flex-column-100 overflow-y-auto mb-0 bg-white timeline\" *ngIf=\"(mode$ | async) === modes.timeline\">\n <div class=\"calendar-head d-flex\">\n <button class=\"btn flex-start\" (click)=\"onPreviousWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-left'\" class=\"px-0\"></bs-icon>\n </button>\n <div class=\"flex-grow-1 h3 py-2 mb-0 text-center\">{{ currentWeekOrMonth$ | async | date: 'MMMM yyyy' }}</div>\n <button class=\"btn flex-start\" (click)=\"onNextWeekOrMonth()\">\n <bs-icon [icon]=\"'chevron-right'\" class=\"px-0\"></bs-icon>\n </button>\n </div>\n \n <div class=\"calendar-body table-responsive overflow-x-auto\">\n <table class=\"table mb-0\">\n <ng-container *ngIf=\"(timeSlots$ | async) as timeSlots\">\n <tr>\n <td></td>\n <td *ngFor=\"let day of timeSlots\" [attr.colspan]=\"day.slots.length\" class=\"text-center px-2\">\n <span class=\"position-sticky day-label\">{{ day.stamp | date: 'd EE' }}</span>\n </td>\n </tr>\n <tr>\n <td></td>\n <ng-container *ngIf=\"(timelineOptions$ | async) as timelineOptions\">\n <ng-container *ngFor=\"let day of timeSlots\">\n <td *ngFor=\"let slot of day.slots\">\n <span class=\"d-block p-0 text-center\" [style.width.px]=\"timelineOptions.unitWidth\">\n {{ slot.start | date: 'HH:mm' }}\n </span>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n <bs-resource-group-presenter *ngFor=\"let group of (resources$ | async)\" [resourceGroup]=\"group\" [timeSlots]=\"timeSlots\"></bs-resource-group-presenter>\n </ng-container>\n </table>\n </div>\n</div>", styles: [":host{display:block;border:1px solid #333;border-top-right-radius:10px;border-top-left-radius:10px;overflow:hidden}.calendar-head{background:#F7F7F7;color:#007aff}.tabel .calendar-head{flex:0 0 auto}.tabel .calendar-body{display:block;flex:1 1 auto}.week-schedule .calendar-head>div{padding-right:18px}.week-schedule .calendar-body{overflow-y:scroll;overflow-x:hidden}.week-schedule .calendar-body .calendar-cell{border-right:1px solid #DEE2E6;border-bottom:1px solid #DEE2E6;cursor:default}.week-schedule .calendar-body .calendar-cell.hover{border-top-width:3px}.week-schedule .calendar-left{width:90px}.week-schedule .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}.week-schedule .event.preview{background:#666;opacity:.6}.week-schedule .event .event-border{background:black;top:0;left:0;bottom:3px;width:3px;position:absolute;z-index:10;opacity:.3}.week-schedule .event .event-inner{position:relative;inset:0 5px 5px 0;cursor:move;pointer-events:all;overflow:hidden}.week-schedule .event .event-inner .event-wrapper{width:calc(100% - 2px);margin:1px auto 1px 0;height:calc(100% - 3px)}.week-schedule .event .event-inner .event-wrapper .event-bg{opacity:.5;height:100%;transition:opacity .15s ease-in-out}.week-schedule .event .event-inner .event-wrapper .event-label{position:absolute;top:0;font-size:12px;font-weight:600;padding:4px}.week-schedule .event .event-inner .event-resize{position:absolute;cursor:ns-resize;height:4px;left:0;right:0;z-index:400}.week-schedule .event .event-inner .event-resize.top{top:0}.week-schedule .event .event-inner .event-resize.bottom{bottom:0}.week-schedule .event .event-inner .event-resize:hover{background:#DDD}.week-schedule .event .event-inner.hover .event-bg{opacity:.7!important}@media (max-width: 767px){.week-schedule.tabel .calendar-head .calendar-head-cell{text-orientation:sideways;writing-mode:vertical-rl}}.timeline.tabel{flex-flow:column}.timeline .calendar-body .tabel{background-color:#f7f7f7}.timeline .calendar-body .tabel tr:first-child td{background-color:#fff;border:1px solid #000}.timeline .calendar-body .tabel tr:first-child td:first-child{min-width:10rem}.timeline .calendar-body .tabel tr:first-child span.day-label{left:0;right:0}.timeline .calendar-body .tabel tr:nth-child(2) td{border-width:1px;border-color:inherit}.timeline .calendar-body .tabel>:not(:first-child){border-top:none!important}\n"] }]
|
|
713
715
|
}], ctorParameters: function () { return [{ type: i1.BsCalendarMonthService }, { type: BsTimelineService }]; }, propDecorators: { timeSlotElements: [{
|
|
714
716
|
type: ViewChildren,
|
|
715
717
|
args: ['slot']
|
|
@@ -775,9 +777,11 @@ BsSchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
|
|
|
775
777
|
BsSecondsTodayOffsetPipe,
|
|
776
778
|
DateOffsetPipe,
|
|
777
779
|
DayOfWeekPipe,
|
|
778
|
-
ResourceGroupPresenterComponent], imports: [CommonModule
|
|
780
|
+
ResourceGroupPresenterComponent], imports: [CommonModule,
|
|
781
|
+
BsIconModule], exports: [BsSchedulerComponent,
|
|
779
782
|
ResourceGroupPresenterComponent] });
|
|
780
|
-
BsSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSchedulerModule, imports: [CommonModule
|
|
783
|
+
BsSchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSchedulerModule, imports: [CommonModule,
|
|
784
|
+
BsIconModule] });
|
|
781
785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BsSchedulerModule, decorators: [{
|
|
782
786
|
type: NgModule,
|
|
783
787
|
args: [{
|
|
@@ -790,7 +794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
790
794
|
ResourceGroupPresenterComponent
|
|
791
795
|
],
|
|
792
796
|
imports: [
|
|
793
|
-
CommonModule
|
|
797
|
+
CommonModule,
|
|
798
|
+
BsIconModule,
|
|
794
799
|
],
|
|
795
800
|
exports: [
|
|
796
801
|
BsSchedulerComponent,
|