barsa-calendar 1.0.424 → 1.0.426
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/esm2020/lib/calendar-month/calendar-month.component.mjs +2 -2
- package/esm2020/lib/month-days/month-days.component.mjs +2 -2
- package/fesm2015/barsa-calendar.mjs +4 -4
- package/fesm2015/barsa-calendar.mjs.map +1 -1
- package/fesm2020/barsa-calendar.mjs +4 -4
- package/fesm2020/barsa-calendar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -185,10 +185,10 @@ export class CalendarMonthComponent extends BaseComponent {
|
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
CalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: i1.DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: i2.CalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
188
|
-
CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i6.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i8.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i8.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i8.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i8.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: i9.DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: i10.EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i11.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: i12.EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
188
|
+
CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}table[picker=true] thead,table[picker=true] tbody{border:none}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i6.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i8.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i8.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i8.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i8.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: i9.DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: i10.EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i11.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: i12.EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
189
189
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, decorators: [{
|
|
190
190
|
type: Component,
|
|
191
|
-
args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
|
|
191
|
+
args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
|
|
192
192
|
}], ctorParameters: function () { return [{ type: i1.DaysInWeekPipe }, { type: i0.ChangeDetectorRef }, { type: i2.CalendarService }]; }, propDecorators: { monthWeeksCount: [{
|
|
193
193
|
type: Input
|
|
194
194
|
}], weekDays: [{
|
|
@@ -168,10 +168,10 @@ export class MonthDaysComponent extends BaseComponent {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
MonthDaysComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MonthDaysComponent, deps: [{ token: i1.DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: i2.CalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
171
|
-
MonthDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MonthDaysComponent, selector: "bc-month-days", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border: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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i7.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: i8.DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: i9.EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i10.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
171
|
+
MonthDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MonthDaysComponent, selector: "bc-month-days", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i5.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i7.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: i8.DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: i9.EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i10.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
172
172
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MonthDaysComponent, decorators: [{
|
|
173
173
|
type: Component,
|
|
174
|
-
args: [{ selector: 'bc-month-days', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}
|
|
174
|
+
args: [{ selector: 'bc-month-days', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}\n"] }]
|
|
175
175
|
}], ctorParameters: function () { return [{ type: i1.DaysInWeekPipe }, { type: i0.ChangeDetectorRef }, { type: i2.CalendarService }]; }, propDecorators: { monthWeeksCount: [{
|
|
176
176
|
type: Input
|
|
177
177
|
}], weekDays: [{
|
|
@@ -1190,10 +1190,10 @@ class CalendarMonthComponent extends BaseComponent {
|
|
|
1190
1190
|
}
|
|
1191
1191
|
}
|
|
1192
1192
|
CalendarMonthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, deps: [{ token: DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1193
|
-
CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5$2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1193
|
+
CalendarMonthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: CalendarMonthComponent, selector: "bc-calendar-month", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", canDelete: "canDelete", canAdd: "canAdd", canEdit: "canEdit", selectedDate: "selectedDate", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}table[picker=true] thead,table[picker=true] tbody{border:none}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "directive", type: i5$2.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]), [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]), [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]), [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }, { kind: "pipe", type: EqualDatePipe, name: "equalDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1194
1194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: CalendarMonthComponent, decorators: [{
|
|
1195
1195
|
type: Component,
|
|
1196
|
-
args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border:none!important}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
|
|
1196
|
+
args: [{ selector: 'bc-calendar-month', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [fdCompact] [attr.picker]=\"datePicker\">\n <thead fd-table-header>\n <tr fd-table-row>\n <th\n class=\"weekday-header\"\n *ngFor=\"let weekDay of selectedWeekDays\"\n fd-table-cell\n [class.noborder]=\"isPickerMode\"\n >\n {{ weekDay }}\n </th>\n </tr>\n </thead>\n <tbody fd-table-body>\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\n <tr fd-table-row>\n <td\n [style.height.px]=\"dayHeight\"\n fd-table-cell\n colspan=\"7\"\n [style.border]=\"isPickerMode ? 'none' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n renderTasks;\n context: {\n $implicit: isPickerMode ? null : moDataList[weekDay],\n weekIndex: weekDay,\n days: days | daysInWeek: weekDay,\n maxRowTasks: maxRowTasks,\n weekDays: weekDays,\n calendarFields: calendarFields,\n deviceSize: deviceSize,\n rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n</table>\n<ng-template\n #renderTasks\n let-task\n let-weekIndex=\"weekIndex\"\n let-weekDays=\"weekDays\"\n let-days=\"days\"\n let-maxRowTasks=\"maxRowTasks\"\n let-calendarFields=\"calendarFields\"\n let-deviceSize=\"deviceSize\"\n let-rtl=\"rtl\"\n let-isPickerMode=\"isPickerMode\"\n>\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\n <tbody>\n <tr fd-table-row class=\"row-day-number\" [attr.rtl]=\"rtl\">\n <td fd-table-cell *ngFor=\"let day of days\" [class.noborder]=\"isPickerMode\">\n <bc-day-number-box\n [class.fd-calendar__item]=\"isPickerMode\"\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\n [isPickerMode]=\"isPickerMode\"\n [day]=\"day\"\n [isActive]=\"\n day.index === startSelectedDayIndex || day.index === endSelectedDayIndex || day.date\n | equalDate: selectedDate\n \"\n [itemInRange]=\"\n startSelectedDayIndex !== undefined &&\n endSelectedDayIndex !== undefined &&\n day.index >= startSelectedDayIndex &&\n day.index <= endSelectedDayIndex\n \"\n (dayClick)=\"onDayClick(day)\"\n (dayMouseMove)=\"onDayMouseMove(day)\"\n (dayMouseDown)=\"onDayMouseDown(day)\"\n (dayMouseUp)=\"onDayMouseUp(day)\"\n ></bc-day-number-box>\n </td>\n </tr>\n <ng-container *ngIf=\"!isPickerMode\">\n <ng-container\n *ngTemplateOutlet=\"\n renderDayTasks;\n context: {\n $implicit: weekTasksArray[weekIndex],\n maxRowTasks: maxRowTasks,\n weekIndex: weekIndex,\n deviceSize: deviceSize,\n calendarFields: calendarFields,\n weekDays: weekDays\n }\n \"\n ></ng-container>\n <tr fd-table-row>\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n <ng-container *ngIf=\"maxRowTasks?.length < day.tasks.length\">\n <button\n fd-button\n (click)=\"onMoreButton($event, popover)\"\n [fdType]=\"'transparent'\"\n [compact]=\"true\"\n >\n {{ day.tasks?.length - maxRowTasks?.length }}\n {{ 'More' | bbbTranslate }}\n </button>\n <fd-popover\n #popover\n [mobile]=\"deviceSize === 's'\"\n placement=\"bottom\"\n [focusTrapped]=\"true\"\n [focusAutoCapture]=\"true\"\n (isOpenChange)=\"onOpenPopoverChange($event)\"\n >\n <bc-day-event-list\n [day]=\"day\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [weekDays]=\"weekDays\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n</ng-template>\n\n<ng-template\n #renderDayTasks\n let-weekTasks\n let-maxRowTasks=\"maxRowTasks\"\n let-weekIndex=\"weekIndex\"\n let-deviceSize=\"deviceSize\"\n let-calendarFields=\"calendarFields\"\n let-weekDays=\"weekDays\"\n>\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\n </ng-container>\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\n <ng-container *ngIf=\"task.event; else newDaySelect\">\n <bc-event-button\n [task]=\"task\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n [canDelete]=\"canDelete\"\n [canEdit]=\"canEdit\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n </ng-container>\n <ng-template #newDaySelect>\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n</ng-template>\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number[rtl=true] td:first-child{border-right:none}.table-content .row-day-number[rtl=\"fa;se\"] td:first-child{border-left:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}table[picker=true] thead,table[picker=true] tbody{border:none}\n"] }]
|
|
1197
1197
|
}], ctorParameters: function () { return [{ type: DaysInWeekPipe }, { type: i0.ChangeDetectorRef }, { type: CalendarService }]; }, propDecorators: { monthWeeksCount: [{
|
|
1198
1198
|
type: Input
|
|
1199
1199
|
}], weekDays: [{
|
|
@@ -1992,10 +1992,10 @@ class MonthDaysComponent extends BaseComponent {
|
|
|
1992
1992
|
}
|
|
1993
1993
|
}
|
|
1994
1994
|
MonthDaysComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MonthDaysComponent, deps: [{ token: DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: CalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1995
|
-
MonthDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MonthDaysComponent, selector: "bc-month-days", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}.noborder{border: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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i7$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1995
|
+
MonthDaysComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: MonthDaysComponent, selector: "bc-month-days", inputs: { monthWeeksCount: "monthWeeksCount", weekDays: "weekDays", weekDaysMin: "weekDaysMin", today: "today", containerHeight: "containerHeight", days: "days", calendarFields: "calendarFields", rtl: "rtl", deviceSize: "deviceSize", moDataList: "moDataList", datePicker: "datePicker", rangePicker: "rangePicker", startSelectedDayIndex: "startSelectedDayIndex", endSelectedDayIndex: "endSelectedDayIndex" }, outputs: { editEvent: "editEvent", deleteEvent: "deleteEvent", daySelect: "daySelect", dayClick: "dayClick", dayMouseMove: "dayMouseMove", dayMouseUp: "dayMouseUp", dayMouseDown: "dayMouseDown", showEvent: "showEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}\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: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MobileDirective, selector: "[mobile]" }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i4.DeprecatedButtonContentDensityDirective, selector: "[fd-button][compact]" }, { kind: "component", type: i6$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i7$1.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7$1.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableBodyDirective, selector: "[fdTableBody], [fd-table-body]", inputs: ["noBorderX", "noBorderY"] }, { kind: "directive", type: i7$1.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i7$1.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "tabindex", "hoverable", "fitContent", "noPadding", "noData", "key", "cellFocusedEventAnnouncer"] }, { kind: "directive", type: i7$1.DeprecatedTableCompactDirective, selector: "table[fd-table][compact]" }, { kind: "component", type: DayNumberBoxComponent, selector: "bc-day-number-box", inputs: ["isWeekMode", "isSingleDay", "day", "isPickerMode", "itemInRange", "isActive"], outputs: ["dayClick", "dayMouseDown", "dayMouseUp", "dayMouseMove"] }, { kind: "component", type: EventButtonComponent, selector: "bc-event-button", inputs: ["buttonTemplate", "calendarFields", "task", "rtl", "canDelete", "canEdit", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1996
1996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: MonthDaysComponent, decorators: [{
|
|
1997
1997
|
type: Component,
|
|
1998
|
-
args: [{ selector: 'bc-month-days', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}
|
|
1998
|
+
args: [{ selector: 'bc-month-days', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table fd-table class=\"table-header\" [compact]=\"true\">\r\n <thead fd-table-header>\r\n <tr fd-table-row>\r\n <th\r\n class=\"weekday-header\"\r\n *ngFor=\"let weekDay of selectedWeekDays\"\r\n fd-table-cell\r\n [class.noborder]=\"isPickerMode\"\r\n >\r\n {{ weekDay }}\r\n </th>\r\n </tr>\r\n </thead>\r\n <tbody fd-table-body>\r\n <ng-container *ngFor=\"let weekDay of numberOfWeek\">\r\n <tr fd-table-row>\r\n <td\r\n [style.height.px]=\"dayHeight\"\r\n fd-table-cell\r\n colspan=\"7\"\r\n [style.border]=\"isPickerMode ? 'none' : null\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderTasks;\r\n context: {\r\n $implicit: isPickerMode ? null : moDataList[weekDay],\r\n weekIndex: weekDay,\r\n days: days | daysInWeek: weekDay,\r\n maxRowTasks: maxRowTasks,\r\n weekDays: weekDays,\r\n calendarFields: calendarFields,\r\n rtl: rtl,\r\n isPickerMode: isPickerMode\r\n }\r\n \"\r\n ></ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n</table>\r\n<ng-template\r\n #renderTasks\r\n let-task\r\n let-weekIndex=\"weekIndex\"\r\n let-weekDays=\"weekDays\"\r\n let-days=\"days\"\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-calendarFields=\"calendarFields\"\r\n let-deviceSize=\"deviceSize\"\r\n let-rtl=\"rtl\"\r\n let-isPickerMode=\"isPickerMode\"\r\n>\r\n <table fd-table-body class=\"table-content\" [compact]=\"true\">\r\n <tbody>\r\n <tr fd-table-row class=\"row-day-number\">\r\n <td fd-table-cell *ngFor=\"let day of days | daysInWeek: weekIndex\" [class.noborder]=\"isPickerMode\">\r\n <bc-day-number-box\r\n [class.fd-calendar__item]=\"isPickerMode\"\r\n [class.fd-calendar__item--other-month]=\"isPickerMode && !day.isInMonth\"\r\n [class.fd-calendar__item--weekend]=\"isPickerMode && day.isWeekend\"\r\n [isPickerMode]=\"isPickerMode\"\r\n [day]=\"day\"\r\n [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\r\n [class.fd-calendar__item--range]=\"\r\n startSelectedDayIndex &&\r\n endSelectedDayIndex &&\r\n day.index > startSelectedDayIndex &&\r\n day.index < endSelectedDayIndex\r\n \"\r\n (dayClick)=\"onDayClick(day)\"\r\n (dayMouseMove)=\"onDayMouseMove(day)\"\r\n (dayMouseDown)=\"onDayMouseDown(day)\"\r\n (dayMouseUp)=\"onDayMouseUp(day)\"\r\n ></bc-day-number-box>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"!isPickerMode\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n renderDayTasks;\r\n context: {\r\n $implicit: weekTasksArray[weekIndex],\r\n maxRowTasks: maxRowTasks,\r\n weekIndex: weekIndex,\r\n deviceSize: deviceSize,\r\n calendarFields: calendarFields,\r\n weekDays: weekDays\r\n }\r\n \"\r\n ></ng-container>\r\n <tr fd-table-row>\r\n <td fd-table-cell *ngFor=\"let day of days\" class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\r\n <ng-container *ngIf=\"maxRowTasks.length < day.tasks.length\">\r\n <button\r\n fd-button\r\n (click)=\"onMoreButton($event, popover)\"\r\n [fdType]=\"'transparent'\"\r\n [compact]=\"true\"\r\n >\r\n {{ day.tasks?.length - maxRowTasks.length }}\r\n {{ 'More' | bbbTranslate }}\r\n </button>\r\n <fd-popover\r\n #popover\r\n [mobile]=\"deviceSize === 's'\"\r\n placement=\"bottom\"\r\n [focusTrapped]=\"true\"\r\n [focusAutoCapture]=\"true\"\r\n (isOpenChange)=\"onOpenPopoverChange($event)\"\r\n >\r\n <bc-day-event-list\r\n [day]=\"day\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n [weekDays]=\"weekDays\"\r\n [rtl]=\"rtl\"\r\n [popover]=\"popover\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n ></bc-day-event-list>\r\n </fd-popover>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n</ng-template>\r\n\r\n<ng-template\r\n #renderDayTasks\r\n let-weekTasks\r\n let-maxRowTasks=\"maxRowTasks\"\r\n let-weekIndex=\"weekIndex\"\r\n let-deviceSize=\"deviceSize\"\r\n let-calendarFields=\"calendarFields\"\r\n let-weekDays=\"weekDays\"\r\n>\r\n <tr fd-table-row *ngFor=\"let rowTask of maxRowTasks; let i = index\">\r\n <ng-container *ngIf=\"!weekTasks[i] || weekTasks[i].length === 0\">\r\n <td fd-table-cell *ngFor=\"let day of weekDays\"></td>\r\n </ng-container>\r\n <ng-container *ngFor=\"let task of weekTasks[i]; let dayIndex = index\">\r\n <td fd-table-cell [attr.colspan]=\"task.colSpan\" *ngIf=\"task.colSpan\">\r\n <ng-container *ngIf=\"task.event; else newDaySelect\">\r\n <bc-event-button\r\n [task]=\"task\"\r\n [rtl]=\"rtl\"\r\n [calendarFields]=\"calendarFields\"\r\n [deviceSize]=\"deviceSize\"\r\n (deleteEvent)=\"deleteEvent.emit($event)\"\r\n (editEvent)=\"editEvent.emit($event)\"\r\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\r\n ></bc-event-button>\r\n </ng-container>\r\n <ng-template #newDaySelect>\r\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\r\n </ng-template>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n</ng-template>\r\n", styles: [":host{display:block}table{table-layout:fixed}.table-header td{padding:0!important}.table-content{width:100%;height:100%;border:none;border-spacing:0}.table-content td{border:none;border-right:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e5e5e5);height:1.425rem}.table-content .row-day-number td:first-child{border-right:none}table td{overflow:hidden}thead tr{border-bottom:none!important}thead tr th{text-align:center!important;background-color:var(--sapList_Background, #fff)}.weekday-header,.row-day-number td{width:100%}tbody tr td{padding-top:5px}tbody tr:first-child td{padding-top:0}.fd-table__cell{padding:0 .5rem!important}.more-fd{text-align:center!important}.more-fd button{font-size:12px}.fd-calendar__item{font-size:.875rem;font-size:var(--sapFontSize, .875rem);line-height:1.4;line-height:var(--sapContent_LineHeight, 1.4);color:#32363a;color:var(--sapTextColor, #32363a);font-family:\"72\",\"72full\",Arial,Helvetica,sans-serif;font-family:var(--sapFontFamily, \"72\", \"72full\", Arial, Helvetica, sans-serif);font-weight:400;box-sizing:border-box;padding:0;border:0;overflow:hidden;position:relative;height:2.75rem;margin:.0625rem;min-width:2.125rem;border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem);background-color:#fafafa;background-color:var(--sapLegend_WorkingBackground, #fafafa);flex:1 1 .375rem;border:none!important;padding:1px!important}.fd-calendar__item.fd-calendar__item--other-month{background-color:var(--sapList_Background, #fff)}.fd-calendar__item.fd-calendar__item--weekend{background-color:var(--sapLegend_NotWorkingBackground, #dedede)}.fd-calendar__item.is-active{background-color:var(--sapContent_Selected_Background, #0854a0);border:var(--fdCalendar_Active_Item_Border, none)}.fd-calendar__item.is-active ::ng-deep span{color:var(--sapContent_Selected_TextColor, #fff)}.fd-calendar__item.fd-calendar__item--range{border:.0625rem solid var(--sapList_SelectionBorderColor, #0854a0);background-color:var(--sapList_SelectionBackgroundColor, #e5f0fa)}\n"] }]
|
|
1999
1999
|
}], ctorParameters: function () { return [{ type: DaysInWeekPipe }, { type: i0.ChangeDetectorRef }, { type: CalendarService }]; }, propDecorators: { monthWeeksCount: [{
|
|
2000
2000
|
type: Input
|
|
2001
2001
|
}], weekDays: [{
|