@open-rlb/ng-bootstrap 2.4.14 → 2.4.16
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.
|
@@ -3437,11 +3437,11 @@ class CalendarWeekGridComponent {
|
|
|
3437
3437
|
});
|
|
3438
3438
|
}
|
|
3439
3439
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3440
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div
|
|
3440
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day.timestamp) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day.timestamp) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3441
3441
|
}
|
|
3442
3442
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, decorators: [{
|
|
3443
3443
|
type: Component,
|
|
3444
|
-
args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div
|
|
3444
|
+
args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n <!-- HEADER WRAPPER -->\n <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n [style.padding-right.px]=\"scrollbarWidth\">\n\n <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n <div class=\"days-header d-flex flex-grow-1\">\n @for (day of days; track day.timestamp) {\n <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- BODY WRAPPER -->\n <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n <div class=\"body-row d-flex position-relative\">\n\n <!-- SIDEBAR (Sticky Left) -->\n <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n @for (time of timeSlots; track time; let i = $index) {\n <div\n class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n [style.height.px]=\"layout.rowHeight\">\n @if (i !== 0) {\n <span style=\"transform: translateY(-50%)\">\n {{ time }}\n </span>\n }\n </div>\n }\n </div>\n\n <!-- GRID AND EVENTS -->\n <div class=\"grid-layer flex-grow-1 position-relative\">\n\n <!-- LAYER 1: Grid -->\n <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n @for (time of timeSlots; track time) {\n <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n </div>\n }\n </div>\n\n <!-- Layer 2: Events -->\n <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n @for (day of days; track day.timestamp) {\n <div class=\"day-column position-relative border-end h-100\" cdkDropList\n [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n (click)=\"eventClick.emit()\">\n @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n <rlb-calendar-event [view]=\"view\"\n [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n </rlb-calendar-event>\n }\n @if (isToday(day)) {\n <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n </div>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
|
|
3445
3445
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { view: [{
|
|
3446
3446
|
type: Input
|
|
3447
3447
|
}], currentDate: [{
|
|
@@ -4045,8 +4045,6 @@ class CalendarComponent {
|
|
|
4045
4045
|
this.dateChange = new EventEmitter();
|
|
4046
4046
|
this.viewChange = new EventEmitter();
|
|
4047
4047
|
this.eventClick = new EventEmitter();
|
|
4048
|
-
// private userTimeZone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
4049
|
-
this.dateFormat = 'YYYY-MM-DD HH:mm:ss';
|
|
4050
4048
|
this.currentDate = getToday();
|
|
4051
4049
|
}
|
|
4052
4050
|
ngOnChanges(changes) {
|
|
@@ -4066,30 +4064,40 @@ class CalendarComponent {
|
|
|
4066
4064
|
const idx = this.events.findIndex((event) => event.id === eventToEdit.id);
|
|
4067
4065
|
this.events[idx] = eventToEdit;
|
|
4068
4066
|
this.events = [...this.events];
|
|
4069
|
-
this.toasts
|
|
4067
|
+
this.toasts
|
|
4068
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4070
4069
|
title: 'Success!',
|
|
4071
4070
|
content: 'Event edited successfully.',
|
|
4072
4071
|
type: 'success',
|
|
4073
|
-
})
|
|
4072
|
+
})
|
|
4073
|
+
.pipe(take(1))
|
|
4074
|
+
.subscribe();
|
|
4074
4075
|
}
|
|
4075
4076
|
onEventContainerClick(events) {
|
|
4076
|
-
this.modals
|
|
4077
|
+
this.modals
|
|
4078
|
+
.openModal('rlb-calendar-overlow-events-container', {
|
|
4077
4079
|
title: 'Overflow events',
|
|
4078
4080
|
ok: 'OK',
|
|
4079
4081
|
type: 'success',
|
|
4080
|
-
content: events
|
|
4081
|
-
})
|
|
4082
|
+
content: events,
|
|
4083
|
+
})
|
|
4084
|
+
.pipe(take(1), filter((modalResult) => modalResult.reason === 'ok'), switchMap((modalResult) => {
|
|
4082
4085
|
const action = modalResult.result.action;
|
|
4083
4086
|
const event = modalResult.result.event;
|
|
4084
4087
|
if (action === 'delete') {
|
|
4085
|
-
return this.modals
|
|
4088
|
+
return this.modals
|
|
4089
|
+
.openConfirmModal('Event delete', 'Are you sure you want to delete this event?', '', 'Ok', 'Cancel')
|
|
4090
|
+
.pipe(take(1), filter((deleteConfirmResult) => deleteConfirmResult.reason === 'ok'), map((result) => ({ action, modalResult: result, event })));
|
|
4086
4091
|
}
|
|
4087
4092
|
else {
|
|
4088
|
-
return this.openEditEventDialog(event).pipe(map(result => ({ action, modalResult: result, event })));
|
|
4093
|
+
return this.openEditEventDialog(event).pipe(map((result) => ({ action, modalResult: result, event })));
|
|
4089
4094
|
}
|
|
4090
4095
|
}), switchMap(({ action, modalResult, event }) => {
|
|
4091
|
-
if (action === 'delete' && modalResult.reason === 'ok' ||
|
|
4092
|
-
|
|
4096
|
+
if ((action === 'delete' && modalResult.reason === 'ok') ||
|
|
4097
|
+
(action === 'edit' && modalResult.reason === 'cancel')) {
|
|
4098
|
+
this.events = [
|
|
4099
|
+
...this.events.filter((entry) => event.id !== entry.id),
|
|
4100
|
+
];
|
|
4093
4101
|
return of({ action: 'delete' });
|
|
4094
4102
|
}
|
|
4095
4103
|
if (action === 'edit' && modalResult.reason === 'ok') {
|
|
@@ -4116,28 +4124,36 @@ class CalendarComponent {
|
|
|
4116
4124
|
content = 'Event created successfully.';
|
|
4117
4125
|
break;
|
|
4118
4126
|
}
|
|
4119
|
-
return this.toasts
|
|
4127
|
+
return this.toasts
|
|
4128
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4120
4129
|
title: 'Success!',
|
|
4121
4130
|
content,
|
|
4122
4131
|
type,
|
|
4123
|
-
})
|
|
4132
|
+
})
|
|
4133
|
+
.pipe(take(1));
|
|
4124
4134
|
}
|
|
4125
4135
|
return of(null);
|
|
4126
|
-
}))
|
|
4136
|
+
}))
|
|
4137
|
+
.subscribe();
|
|
4127
4138
|
}
|
|
4128
4139
|
onEventClick(eventToEdit) {
|
|
4129
4140
|
if (eventToEdit) {
|
|
4130
4141
|
this.eventClick.emit(eventToEdit);
|
|
4131
4142
|
}
|
|
4132
|
-
this.openEditEventDialog(eventToEdit)
|
|
4143
|
+
this.openEditEventDialog(eventToEdit)
|
|
4144
|
+
.pipe(switchMap((modalResult) => {
|
|
4133
4145
|
const newEvent = modalResult.result;
|
|
4134
4146
|
let result = null;
|
|
4135
4147
|
if (modalResult.reason === 'cancel' && eventToEdit) {
|
|
4136
|
-
this.events = [
|
|
4148
|
+
this.events = [
|
|
4149
|
+
...this.events.filter((event) => event.id !== eventToEdit.id),
|
|
4150
|
+
];
|
|
4137
4151
|
result = { action: 'delete' };
|
|
4138
4152
|
return of(result);
|
|
4139
4153
|
}
|
|
4140
|
-
if (modalResult.reason === 'cancel' ||
|
|
4154
|
+
if (modalResult.reason === 'cancel' ||
|
|
4155
|
+
modalResult.reason === 'close' ||
|
|
4156
|
+
modalResult.reason === undefined) {
|
|
4141
4157
|
return of(result);
|
|
4142
4158
|
}
|
|
4143
4159
|
if (eventToEdit) {
|
|
@@ -4168,14 +4184,17 @@ class CalendarComponent {
|
|
|
4168
4184
|
content = 'Event created successfully.';
|
|
4169
4185
|
break;
|
|
4170
4186
|
}
|
|
4171
|
-
return this.toasts
|
|
4187
|
+
return this.toasts
|
|
4188
|
+
.openToast('toast-c-1', 'rlb-calendar-toast', {
|
|
4172
4189
|
title: 'Success!',
|
|
4173
4190
|
content,
|
|
4174
4191
|
type,
|
|
4175
|
-
})
|
|
4192
|
+
})
|
|
4193
|
+
.pipe(take(1));
|
|
4176
4194
|
}
|
|
4177
4195
|
return of(null);
|
|
4178
|
-
}))
|
|
4196
|
+
}))
|
|
4197
|
+
.subscribe();
|
|
4179
4198
|
}
|
|
4180
4199
|
setDate(date) {
|
|
4181
4200
|
this.currentDate = date;
|
|
@@ -4185,136 +4204,22 @@ class CalendarComponent {
|
|
|
4185
4204
|
this.view = view;
|
|
4186
4205
|
this.viewChange.emit({ date: this.currentDate, view });
|
|
4187
4206
|
}
|
|
4188
|
-
generateTestEvents() {
|
|
4189
|
-
const events = [];
|
|
4190
|
-
const now = getToday();
|
|
4191
|
-
events.push({
|
|
4192
|
-
color: 'primary',
|
|
4193
|
-
title: 'Today 1.5h (11:00-12:30)',
|
|
4194
|
-
start: new DateTz(now).convertToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4195
|
-
end: new DateTz(now).convertToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4196
|
-
});
|
|
4197
|
-
events.push({
|
|
4198
|
-
color: 'danger',
|
|
4199
|
-
title: 'Today 1h (11:00-12:00)',
|
|
4200
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4201
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4202
|
-
});
|
|
4203
|
-
events.push({
|
|
4204
|
-
color: 'success',
|
|
4205
|
-
title: 'Today 1.5h (11:30-12:30)',
|
|
4206
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(30, 'minute'),
|
|
4207
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4208
|
-
});
|
|
4209
|
-
events.push({
|
|
4210
|
-
color: 'info',
|
|
4211
|
-
title: 'Today 1.5h (11:00-12:30)',
|
|
4212
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4213
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4214
|
-
});
|
|
4215
|
-
events.push({
|
|
4216
|
-
color: 'warning',
|
|
4217
|
-
title: 'Today 1.75h (11:15-12:30)',
|
|
4218
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(15, 'minute'),
|
|
4219
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4220
|
-
});
|
|
4221
|
-
events.push({
|
|
4222
|
-
color: 'secondary',
|
|
4223
|
-
title: 'Today 1.75h (10:45-12:30)',
|
|
4224
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(10, 'hour').set(45, 'minute'),
|
|
4225
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(30, 'minute'),
|
|
4226
|
-
});
|
|
4227
|
-
events.push({
|
|
4228
|
-
color: 'danger',
|
|
4229
|
-
title: 'Today 0.5h test 2 (11:30-12:00)',
|
|
4230
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(11, 'hour').set(30, 'minute'),
|
|
4231
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4232
|
-
});
|
|
4233
|
-
events.push({
|
|
4234
|
-
color: 'success',
|
|
4235
|
-
title: 'Today 1.75h test 3 (10:15-12:00)',
|
|
4236
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(10, 'hour').set(15, 'minute'),
|
|
4237
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4238
|
-
});
|
|
4239
|
-
events.push({
|
|
4240
|
-
color: 'warning',
|
|
4241
|
-
title: 'Today 1.5h test 4 (12:00-13:30)',
|
|
4242
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(12, 'hour').set(0, 'minute'),
|
|
4243
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(13, 'hour').set(30, 'minute'),
|
|
4244
|
-
});
|
|
4245
|
-
events.push({
|
|
4246
|
-
color: 'primary',
|
|
4247
|
-
title: 'Today 0.5h test 4 (13:30-14:00)',
|
|
4248
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(13, 'hour').set(30, 'minute'),
|
|
4249
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(14, 'hour').set(0, 'minute'),
|
|
4250
|
-
});
|
|
4251
|
-
// Today from 15:15 to 16:00
|
|
4252
|
-
events.push({
|
|
4253
|
-
color: 'danger',
|
|
4254
|
-
title: 'Today 45min (15:15-16:00)',
|
|
4255
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(15, 'hour').set(15, 'minute'),
|
|
4256
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4257
|
-
});
|
|
4258
|
-
events.push({
|
|
4259
|
-
color: 'primary',
|
|
4260
|
-
title: 'Today 45min 2 (15:15-16:00)',
|
|
4261
|
-
start: new DateTz(now).cloneToTimezone('UTC').set(15, 'hour').set(15, 'minute'),
|
|
4262
|
-
end: new DateTz(now).cloneToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4263
|
-
});
|
|
4264
|
-
// === 2. Event "Tomorrow" (currentDate + 1 day) ===
|
|
4265
|
-
const tomorrowBase = new DateTz(now).add(1, 'day');
|
|
4266
|
-
events.push({
|
|
4267
|
-
color: 'info',
|
|
4268
|
-
title: 'Tomorrow 2h (09:00-11:00)',
|
|
4269
|
-
start: new DateTz(tomorrowBase).convertToTimezone('UTC').set(9, 'hour').set(0, 'minute'),
|
|
4270
|
-
end: new DateTz(tomorrowBase).convertToTimezone('UTC').set(11, 'hour').set(0, 'minute'),
|
|
4271
|
-
});
|
|
4272
|
-
// === 3. Event after tomorrow (currentDate + 2 days) ===
|
|
4273
|
-
const dayAfterTomorrowBase = new DateTz(now).add(2, 'day');
|
|
4274
|
-
events.push({
|
|
4275
|
-
color: 'success',
|
|
4276
|
-
title: 'After Tomorrow 1h (17:00-18:00)',
|
|
4277
|
-
start: new DateTz(dayAfterTomorrowBase).convertToTimezone('UTC').set(17, 'hour').set(0, 'minute'),
|
|
4278
|
-
end: new DateTz(dayAfterTomorrowBase).convertToTimezone('UTC').set(18, 'hour').set(0, 'minute'),
|
|
4279
|
-
});
|
|
4280
|
-
// === 4. Event (currentDate - 1 day) ===
|
|
4281
|
-
const yesterdayBase = new DateTz(now).add(-1, 'day');
|
|
4282
|
-
events.push({
|
|
4283
|
-
color: 'warning',
|
|
4284
|
-
title: 'Yesterday 2h (14:00-16:00)',
|
|
4285
|
-
start: new DateTz(yesterdayBase).convertToTimezone('UTC').set(14, 'hour').set(0, 'minute'),
|
|
4286
|
-
end: new DateTz(yesterdayBase).convertToTimezone('UTC').set(16, 'hour').set(0, 'minute'),
|
|
4287
|
-
});
|
|
4288
|
-
// === 5. Event "Cross day" ===
|
|
4289
|
-
const dayBeforeYesterdayBase = new DateTz(now).add(-2, 'day');
|
|
4290
|
-
const dayBeforeYesterdayEndBase = new DateTz(now).add(-1, 'day');
|
|
4291
|
-
events.push({
|
|
4292
|
-
color: 'secondary',
|
|
4293
|
-
title: 'Cross Day (22:00 -> 02:00)',
|
|
4294
|
-
start: new DateTz(dayBeforeYesterdayBase).convertToTimezone('UTC').set(22, 'hour').set(0, 'minute').stripSecMillis(),
|
|
4295
|
-
end: new DateTz(dayBeforeYesterdayEndBase).convertToTimezone('UTC').set(2, 'hour').set(0, 'minute').stripSecMillis(),
|
|
4296
|
-
});
|
|
4297
|
-
this.events = events.map((event) => {
|
|
4298
|
-
return {
|
|
4299
|
-
...event,
|
|
4300
|
-
id: this.unique.id
|
|
4301
|
-
};
|
|
4302
|
-
});
|
|
4303
|
-
}
|
|
4304
4207
|
openEditEventDialog(eventToEdit) {
|
|
4305
|
-
return this.modals
|
|
4208
|
+
return this.modals
|
|
4209
|
+
.openModal('rlb-calendar-event-create-edit', {
|
|
4306
4210
|
title: eventToEdit ? 'Edit event' : 'Create event',
|
|
4307
4211
|
content: eventToEdit,
|
|
4308
4212
|
ok: 'OK',
|
|
4309
4213
|
type: 'success',
|
|
4310
|
-
})
|
|
4214
|
+
})
|
|
4215
|
+
.pipe(take(1));
|
|
4311
4216
|
}
|
|
4312
4217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }, { token: UniqueIdService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate", (d) => new DateTz(d)], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute], layout: "layout" }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n
|
|
4218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate", (d) => new DateTz(d)], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute], layout: "layout" }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n @if (showToolbar) {\n <rlb-calendar-header\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n (viewChange)=\"setView($event)\"\n (dateChange)=\"setDate($event)\"\n >\n </rlb-calendar-header>\n }\n\n @if (loading) {\n <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n </rlb-progress>\n } @else {\n <rlb-calendar-grid\n [events]=\"events\"\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n [layout]=\"mergedLayout\"\n (eventClick)=\"onEventClick($event)\"\n (eventContainerClick)=\"onEventContainerClick($event)\"\n (eventChange)=\"onEventChange($event)\"\n >\n </rlb-calendar-grid>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
|
|
4314
4219
|
}
|
|
4315
4220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
4316
4221
|
type: Component,
|
|
4317
|
-
args: [{ selector:
|
|
4222
|
+
args: [{ selector: 'rlb-calendar', standalone: false, template: "<div class=\"rlb-calendar\">\n\n @if (showToolbar) {\n <rlb-calendar-header\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n (viewChange)=\"setView($event)\"\n (dateChange)=\"setDate($event)\"\n >\n </rlb-calendar-header>\n }\n\n @if (loading) {\n <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n </rlb-progress>\n } @else {\n <rlb-calendar-grid\n [events]=\"events\"\n [view]=\"view\"\n [currentDate]=\"currentDate\"\n [layout]=\"mergedLayout\"\n (eventClick)=\"onEventClick($event)\"\n (eventContainerClick)=\"onEventContainerClick($event)\"\n (eventChange)=\"onEventChange($event)\"\n >\n </rlb-calendar-grid>\n }\n</div>\n" }]
|
|
4318
4223
|
}], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{
|
|
4319
4224
|
type: Input,
|
|
4320
4225
|
args: [{ alias: 'view' }]
|
|
@@ -6425,6 +6330,7 @@ class DataTableActionsComponent {
|
|
|
6425
6330
|
[disabled]="_disabled"
|
|
6426
6331
|
type="button"
|
|
6427
6332
|
data-bs-toggle="dropdown"
|
|
6333
|
+
data-bs-popper-config='{"strategy":"fixed"}'
|
|
6428
6334
|
aria-expanded="false">
|
|
6429
6335
|
<i class="bi bi-three-dots"></i>
|
|
6430
6336
|
</button>
|
|
@@ -6448,6 +6354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6448
6354
|
[disabled]="_disabled"
|
|
6449
6355
|
type="button"
|
|
6450
6356
|
data-bs-toggle="dropdown"
|
|
6357
|
+
data-bs-popper-config='{"strategy":"fixed"}'
|
|
6451
6358
|
aria-expanded="false">
|
|
6452
6359
|
<i class="bi bi-three-dots"></i>
|
|
6453
6360
|
</button>
|
|
@@ -7066,7 +6973,7 @@ class DataTableComponent {
|
|
|
7066
6973
|
}
|
|
7067
6974
|
}
|
|
7068
6975
|
get cols() {
|
|
7069
|
-
return this.columns.length + (this.
|
|
6976
|
+
return this.columns.length + (this.hasActions ? 1 : 0);
|
|
7070
6977
|
}
|
|
7071
6978
|
getTableClasses() {
|
|
7072
6979
|
const classes = ['table'];
|
|
@@ -7093,7 +7000,10 @@ class DataTableComponent {
|
|
|
7093
7000
|
selectSize() {
|
|
7094
7001
|
this.currentPageChange.emit(1);
|
|
7095
7002
|
this.pageSizeChange.emit(parseInt(this.pageSize));
|
|
7096
|
-
this.pagination.emit({
|
|
7003
|
+
this.pagination.emit({
|
|
7004
|
+
page: 1,
|
|
7005
|
+
size: this.pageSize ? parseInt(this.pageSize) : 20,
|
|
7006
|
+
});
|
|
7097
7007
|
}
|
|
7098
7008
|
selectPage(ev, page) {
|
|
7099
7009
|
ev?.preventDefault();
|
|
@@ -7101,7 +7011,10 @@ class DataTableComponent {
|
|
|
7101
7011
|
if (typeof page !== 'number' || page === this.currentPage || this.loading)
|
|
7102
7012
|
return;
|
|
7103
7013
|
this.currentPageChange.emit(page);
|
|
7104
|
-
this.pagination.emit({
|
|
7014
|
+
this.pagination.emit({
|
|
7015
|
+
page,
|
|
7016
|
+
size: this.pageSize ? parseInt(this.pageSize) : 20,
|
|
7017
|
+
});
|
|
7105
7018
|
}
|
|
7106
7019
|
next(ev) {
|
|
7107
7020
|
ev?.preventDefault();
|
|
@@ -7110,8 +7023,8 @@ class DataTableComponent {
|
|
|
7110
7023
|
return;
|
|
7111
7024
|
this.currentPageChange.emit((this.currentPage || 1) + 1);
|
|
7112
7025
|
this.pagination.emit({
|
|
7113
|
-
page: (
|
|
7114
|
-
size: this.pageSize ? parseInt(this.pageSize) : 20
|
|
7026
|
+
page: (this.currentPage || 1) + 1,
|
|
7027
|
+
size: this.pageSize ? parseInt(this.pageSize) : 20,
|
|
7115
7028
|
});
|
|
7116
7029
|
}
|
|
7117
7030
|
prev(ev) {
|
|
@@ -7121,16 +7034,10 @@ class DataTableComponent {
|
|
|
7121
7034
|
return;
|
|
7122
7035
|
this.currentPageChange.emit((this.currentPage || 1) - 1);
|
|
7123
7036
|
this.pagination.emit({
|
|
7124
|
-
page: (
|
|
7125
|
-
size: this.pageSize ? parseInt(this.pageSize) : 20
|
|
7037
|
+
page: (this.currentPage || 1) - 1,
|
|
7038
|
+
size: this.pageSize ? parseInt(this.pageSize) : 20,
|
|
7126
7039
|
});
|
|
7127
7040
|
}
|
|
7128
|
-
onPgWeel(ev) {
|
|
7129
|
-
// ev.preventDefault();
|
|
7130
|
-
// const t = ev.target as HTMLElement;
|
|
7131
|
-
// const c = t.parentElement?.parentElement
|
|
7132
|
-
// c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
|
|
7133
|
-
}
|
|
7134
7041
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7135
7042
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: "title", creationStrategy: ["creation-strategy", "creationStrategy"], creationUrl: ["creation-url", "creationUrl"], items: "items", paginationMode: ["pagination-mode", "paginationMode"], loading: ["loading", "loading", booleanAttribute], tableHover: ["table-hover", "tableHover", booleanAttribute], tableStriped: ["table-striped", "tableStriped", booleanAttribute], tableStripedColumns: ["table-striped-columns", "tableStripedColumns", booleanAttribute], tableBordered: ["table-bordered", "tableBordered", booleanAttribute], tableBorderless: ["table-borderless", "tableBorderless", booleanAttribute], tableSmall: ["table-small", "tableSmall", booleanAttribute], showRefresh: ["show-refresh", "showRefresh", booleanAttribute], totalItems: ["total-items", "totalItems", numberAttribute], currentPage: ["current-page", "currentPage", numberAttribute], pageSize: ["page-size", "pageSize", numberAttribute], showActions: "showActions", loadMoreLabel: "loadMoreLabel" }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent }, { propertyName: "columns", predicate: DataTableHeaderComponent }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (creationStrategy !== 'none' || title || showRefresh) {\n <div class=\"row\">\n <div class=\"col\">\n @if (title) {\n <h3 class=\"float-start\">{{ title }}</h3>\n }\n @if (showRefresh) {\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n [disabled]=\"loading\">\n <i class=\"fa-solid fa-arrows-rotate\"></i>\n </button>\n }\n @if (creationStrategy === 'page') {\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n @if (creationStrategy === 'modal') {\n <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n </div>\n </div>\n}\n<div class=\"table-responsive\">\n <table [ngClass]=\"getTableClasses()\">\n <thead>\n <tr>\n <ng-container #projectedDisplayColumns></ng-container>\n @if (hasActions) {\n <th>\n <span class=\"float-end pe-2\">\n Actions\n </span>\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @if (!loading) {\n <ng-content select=\"rlb-dt-row\"/>\n }\n @if (!loading && items.length === 0) {\n <rlb-dt-row class=\"text-center\">\n <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n <ng-content select=\"rlb-dt-noitems\"/>\n </rlb-dt-cell>\n </rlb-dt-row>\n }\n @if (loading) {\n <rlb-dt-row class=\"text-center\">\n <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n <ng-content select=\"rlb-dt-loading\"/>\n </rlb-dt-cell>\n </rlb-dt-row>\n }\n </tbody>\n @if (pagination && paginationMode !== 'none') {\n <tfoot>\n <rlb-dt-row>\n <rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n @if (paginationMode === 'load-more') {\n <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n [disabled]=\"loading\" (click)=\"loadMore.emit()\">\n {{ loadMoreLabel }}\n </button>\n }\n @if (paginationMode === 'pages') {\n <nav aria-label=\"Page navigation example\">\n <ul class=\"pagination float-end pagination-sm\">\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n (click)=\"prev($event)\">\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n @for (page of visiblePages; track page) {\n <li class=\"page-item\"\n [class.active]=\"currentPage === page\"\n [class.disabled]=\"page === '...'\">\n <a class=\"page-link d-block\"\n href=\"#\"\n (click)=\"selectPage($event, page)\">\n {{ page }}\n </a>\n </li>\n }\n <li class=\"page-item\">\n <a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n (click)=\"next($event)\">\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n <ul class=\"ps-0 float-end me-3\">\n <rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n [disabled]=\"items.length === 0\">\n <rlb-option [value]=\"10\">10</rlb-option>\n <rlb-option [value]=\"20\">20</rlb-option>\n <rlb-option [value]=\"50\">50</rlb-option>\n <rlb-option [value]=\"100\">100</rlb-option>\n </rlb-select>\n </ul>\n </nav>\n }\n </rlb-dt-cell>\n </rlb-dt-row>\n </tfoot>\n }\n </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }, { kind: "component", type: DataTableRowComponent, selector: "rlb-dt-row", inputs: ["class", "style"], outputs: ["rowClick"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }] }); }
|
|
7136
7043
|
}
|