barsa-calendar 2.0.46 → 2.0.47
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/esm2022/lib/calendar-container/calendar-container.component.mjs +1 -1
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +1 -1
- package/esm2022/lib/calendar-month/calendar-month.component.mjs +1 -1
- package/esm2022/lib/calendar-selection-days/calendar-selection-days.component.mjs +1 -1
- package/esm2022/lib/calendar-week/calendar-week.component.mjs +1 -1
- package/esm2022/lib/date-time-picker/date-time-picker.component.mjs +1 -1
- package/esm2022/lib/day-event-list/day-event-list.component.mjs +1 -1
- package/esm2022/lib/day-number-box/day-number-box.component.mjs +1 -1
- package/esm2022/lib/event-button/event-button.component.mjs +1 -1
- package/esm2022/lib/event-preview/event-preview.component.mjs +1 -1
- package/esm2022/lib/month-days/month-days.component.mjs +1 -1
- package/fesm2022/barsa-calendar.mjs +11 -11
- package/fesm2022/barsa-calendar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -45,7 +45,7 @@ export class EventPreviewComponent extends BaseComponent {
|
|
|
45
45
|
this.closeEvent.emit();
|
|
46
46
|
}
|
|
47
47
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EventPreviewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EventPreviewComponent, selector: "bc-event-preview", inputs: { event: "event", calendarFields: "calendarFields", popover: "popover", popover2: "popover2", canEdit: "canEdit", canView: "canView", canDelete: "canDelete", inDialog: "inDialog", deviceSize: "deviceSize" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", closeEvent: "closeEvent" }, host: { properties: { "style.width": "this._width" } }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [ngClass]=\"deviceSize\">\n <fd-layout-panel-header>\n <fd-layout-panel-actions>\n <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\n @if (canEdit) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"edit\"\n fdType=\"transparent\"\n (click)=\"onEdit(event, popover, popover2)\"\n ></button>\n } @if (!canEdit && canView) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"show\"\n fdType=\"transparent\"\n (click)=\"onEdit(event, popover, popover2)\"\n ></button>\n } @if (canDelete) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"delete\"\n fdType=\"transparent\"\n (click)=\"onDelete(event, popover, popover2)\"\n ></button>\n }\n <button\n fd-button\n fd-toolbar-item\n glyph=\"decline\"\n fdType=\"transparent\"\n (click)=\"onClosePopover(popover)\"\n ></button>\n </fd-toolbar>\n </fd-layout-panel-actions>\n </fd-layout-panel-header>\n <fd-layout-panel-body>\n <fd-quick-view>\n <fd-quick-view-subheader>\n <fd-avatar\n size=\"xs\"\n glyph=\"color-fill\"\n [transparent]=\"true\"\n [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\n ></fd-avatar>\n <fd-quick-view-subheader-title>\n {{ event[calendarFields.Title] }}\n </fd-quick-view-subheader-title>\n <fd-quick-view-subheader-subtitle>\n <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\n </fd-quick-view-subheader-subtitle>\n </fd-quick-view-subheader>\n\n <fd-quick-view-group>\n @if (event | barsaVisibleValue: calendarFields.Notes; as notes) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-label>\n <fd-icon glyph=\"text-align-justified\"></fd-icon>\n </fd-quick-view-group-item-label>\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\n {{ notes }}\n </div>\n </fd-quick-view-group-item-content>\n </fd-quick-view-group-item>\n }\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-label>\n <fd-icon glyph=\"appointment\"></fd-icon>\n </fd-quick-view-group-item-label>\n <fd-quick-view-group-item-content>\n <span>\u06A9\u0627\u0631\u0628\u0631</span>\n </fd-quick-view-group-item-content>\n </fd-quick-view-group-item>\n </fd-quick-view-group>\n </fd-quick-view>\n </fd-layout-panel-body>\n</fd-layout-panel>\n", styles: [":host{display:block}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}fd-layout-panel{min-width:400px}fd-layout-panel.s{box-shadow:none;min-width:100%}fd-layout-panel-header{justify-content:end!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i5.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i5.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i5.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i6.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i6.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i6.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i6.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i6.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i6.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i6.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i6.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "pipe", type: i8.VisibleValuePipe, name: "barsaVisibleValue" }, { kind: "pipe", type: i9.EventDatePipe, name: "eventDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EventPreviewComponent, selector: "bc-event-preview", inputs: { event: "event", calendarFields: "calendarFields", popover: "popover", popover2: "popover2", canEdit: "canEdit", canView: "canView", canDelete: "canDelete", inDialog: "inDialog", deviceSize: "deviceSize" }, outputs: { deleteEvent: "deleteEvent", editEvent: "editEvent", closeEvent: "closeEvent" }, host: { properties: { "style.width": "this._width" } }, usesInheritance: true, ngImport: i0, template: "<fd-layout-panel [ngClass]=\"deviceSize\">\n <fd-layout-panel-header>\n <fd-layout-panel-actions>\n <fd-toolbar [clearBorder]=\"true\" [fdType]=\"'transparent'\">\n @if (canEdit) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"edit\"\n fdType=\"transparent\"\n (click)=\"onEdit(event, popover, popover2)\"\n ></button>\n } @if (!canEdit && canView) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"show\"\n fdType=\"transparent\"\n (click)=\"onEdit(event, popover, popover2)\"\n ></button>\n } @if (canDelete) {\n <button\n fd-button\n fd-toolbar-item\n glyph=\"delete\"\n fdType=\"transparent\"\n (click)=\"onDelete(event, popover, popover2)\"\n ></button>\n }\n <button\n fd-button\n fd-toolbar-item\n glyph=\"decline\"\n fdType=\"transparent\"\n (click)=\"onClosePopover(popover)\"\n ></button>\n </fd-toolbar>\n </fd-layout-panel-actions>\n </fd-layout-panel-header>\n <fd-layout-panel-body>\n <fd-quick-view>\n <fd-quick-view-subheader>\n <fd-avatar\n size=\"xs\"\n glyph=\"color-fill\"\n [transparent]=\"true\"\n [style.color]=\"event[calendarFields.Color] ? event[calendarFields.Color] : ''\"\n ></fd-avatar>\n <fd-quick-view-subheader-title>\n {{ event[calendarFields.Title] }}\n </fd-quick-view-subheader-title>\n <fd-quick-view-subheader-subtitle>\n <span>{{ event.$StartDateInfo | eventDate: event.$EndDateInfo }} </span>\n </fd-quick-view-subheader-subtitle>\n </fd-quick-view-subheader>\n\n <fd-quick-view-group>\n @if (event | barsaVisibleValue: calendarFields.Notes; as notes) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-label>\n <fd-icon glyph=\"text-align-justified\"></fd-icon>\n </fd-quick-view-group-item-label>\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element style=\"white-space: normal\">\n {{ notes }}\n </div>\n </fd-quick-view-group-item-content>\n </fd-quick-view-group-item>\n }\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-label>\n <fd-icon glyph=\"appointment\"></fd-icon>\n </fd-quick-view-group-item-label>\n <fd-quick-view-group-item-content>\n <span>\u06A9\u0627\u0631\u0628\u0631</span>\n </fd-quick-view-group-item-content>\n </fd-quick-view-group-item>\n </fd-quick-view-group>\n </fd-quick-view>\n </fd-layout-panel-body>\n</fd-layout-panel>\n", styles: [":host{display:block}:host ::ng-deep .fd-form-item{flex-direction:row}:host fd-avatar{min-width:1rem;width:1rem}fd-layout-panel{min-width:400px}fd-layout-panel.s{box-shadow:none;min-width:100%}fd-layout-panel-header{justify-content:end!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5.LayoutPanelComponent, selector: "fd-layout-panel", inputs: ["backgroundImage", "id", "transparent"] }, { kind: "component", type: i5.LayoutPanelHeaderComponent, selector: "fd-layout-panel-header" }, { kind: "component", type: i5.LayoutPanelActionsComponent, selector: "fd-layout-panel-actions" }, { kind: "component", type: i5.LayoutPanelBodyComponent, selector: "fd-layout-panel-body", inputs: ["bleed"] }, { kind: "component", type: i6.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i6.QuickViewSubheaderComponent, selector: "fd-quick-view-subheader" }, { kind: "component", type: i6.QuickViewSubheaderTitleComponent, selector: "fd-quick-view-subheader-title" }, { kind: "component", type: i6.QuickViewSubheaderSubtitleComponent, selector: "fd-quick-view-subheader-subtitle" }, { kind: "component", type: i6.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i6.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i6.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i6.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i6.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: i7.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i7.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "pipe", type: i8.VisibleValuePipe, name: "barsaVisibleValue" }, { kind: "pipe", type: i9.EventDatePipe, name: "eventDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
49
49
|
}
|
|
50
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EventPreviewComponent, decorators: [{
|
|
51
51
|
type: Component,
|
|
@@ -169,7 +169,7 @@ export class MonthDaysComponent extends BaseComponent {
|
|
|
169
169
|
this.weekTasksArray = weekTasksArray;
|
|
170
170
|
}
|
|
171
171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MonthDaysComponent, deps: [{ token: i1.DaysInWeekPipe }, { token: i0.ChangeDetectorRef }, { token: i2.CalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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\">\n <thead fd-table-header>\n <tr fd-table-row>\n @for (weekDay of selectedWeekDays; track weekDay) {\n <th class=\"weekday-header\" fd-table-cell [class.noborder]=\"isPickerMode\">\n {{ weekDay }}\n </th>\n }\n </tr>\n </thead>\n <tbody fd-table-body>\n @for (weekDay of numberOfWeek; track weekDay) {\n <tr fd-table-row>\n <td [style.height.px]=\"dayHeight\" fd-table-cell colspan=\"7\" [style.border]=\"isPickerMode ? 'none' : null\">\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 rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n }\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\">\n @for (day of days | daysInWeek: weekIndex; track day) {\n <td fd-table-cell [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 [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\n [class.fd-calendar__item--range]=\"\n startSelectedDayIndex &&\n endSelectedDayIndex &&\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 }\n </tr>\n @if (!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 @for (day of days; track day) {\n <td fd-table-cell class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n @if (maxRowTasks.length < day.tasks.length) {\n <button fd-button (click)=\"onMoreButton($event, popover)\" [fdType]=\"'transparent'\" [compact]=\"true\">\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 [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n }\n </td>\n }\n </tr>\n }\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 @for (rowTask of maxRowTasks; track rowTask; let i = $index) {\n <tr fd-table-row>\n @if (!weekTasks[i] || weekTasks[i].length === 0) { @for (day of weekDays; track day) {\n <td fd-table-cell></td>\n } } @for (task of weekTasks[i]; track task; let dayIndex = $index) { @if (task.colSpan) {\n <td fd-table-cell [attr.colspan]=\"task.colSpan\">\n @if (task.event) {\n <bc-event-button\n [task]=\"task\"\n [rtl]=\"rtl\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n } @else {\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n }\n </td>\n } }\n </tr>\n }\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 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.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: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "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", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { 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", "canView", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i10.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "canView", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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\">\n <thead fd-table-header>\n <tr fd-table-row>\n @for (weekDay of selectedWeekDays; track weekDay) {\n <th class=\"weekday-header\" fd-table-cell [class.noborder]=\"isPickerMode\">\n {{ weekDay }}\n </th>\n }\n </tr>\n </thead>\n <tbody fd-table-body>\n @for (weekDay of numberOfWeek; track weekDay) {\n <tr fd-table-row>\n <td [style.height.px]=\"dayHeight\" fd-table-cell colspan=\"7\" [style.border]=\"isPickerMode ? 'none' : null\">\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 rtl: rtl,\n isPickerMode: isPickerMode\n }\n \"\n ></ng-container>\n </td>\n </tr>\n }\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\">\n @for (day of days | daysInWeek: weekIndex; track day) {\n <td fd-table-cell [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 [class.is-active]=\"day.index === startSelectedDayIndex || day.index === endSelectedDayIndex\"\n [class.fd-calendar__item--range]=\"\n startSelectedDayIndex &&\n endSelectedDayIndex &&\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 }\n </tr>\n @if (!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 @for (day of days; track day) {\n <td fd-table-cell class=\"more-fd\" (click)=\"onDayBoxSelect(day)\">\n @if (maxRowTasks.length < day.tasks.length) {\n <button fd-button (click)=\"onMoreButton($event, popover)\" [fdType]=\"'transparent'\" [compact]=\"true\">\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 [popover]=\"popover\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n ></bc-day-event-list>\n </fd-popover>\n }\n </td>\n }\n </tr>\n }\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 @for (rowTask of maxRowTasks; track rowTask; let i = $index) {\n <tr fd-table-row>\n @if (!weekTasks[i] || weekTasks[i].length === 0) { @for (day of weekDays; track day) {\n <td fd-table-cell></td>\n } } @for (task of weekTasks[i]; track task; let dayIndex = $index) { @if (task.colSpan) {\n <td fd-table-cell [attr.colspan]=\"task.colSpan\">\n @if (task.event) {\n <bc-event-button\n [task]=\"task\"\n [rtl]=\"rtl\"\n [calendarFields]=\"calendarFields\"\n [deviceSize]=\"deviceSize\"\n (deleteEvent)=\"deleteEvent.emit($event)\"\n (editEvent)=\"editEvent.emit($event)\"\n (openPopoverChange)=\"onOpenPopoverChange($event)\"\n ></bc-event-button>\n } @else {\n <div style=\"width: 100%; height: 100%\" (click)=\"onDaySelect(weekIndex, dayIndex)\"></div>\n }\n </td>\n } }\n </tr>\n }\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 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.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], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i6.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: i7.TableComponent, selector: "table[fd-table]", inputs: ["noBorderX", "noBorderY", "noOuterBorder", "topBorder", "popIn", "responsive", "keys", "allCellsFocusable"], exportAs: ["fd-table"] }, { kind: "directive", type: i7.TableHeaderDirective, selector: "[fdTableHeader], [fd-table-header]", inputs: ["noBorderX", "noBorderY", "nonInteractive"] }, { 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", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { 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", "canView", "index", "deviceSize"], outputs: ["deleteEvent", "editEvent", "openPopoverChange"] }, { kind: "component", type: i10.DayEventListComponent, selector: "bc-day-event-list", inputs: ["day", "deviceSize", "weekDays", "calendarFields", "rtl", "canDelete", "canEdit", "canView", "popover"], outputs: ["deleteEvent", "editEvent", "openPopOver"] }, { kind: "pipe", type: i4.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i1.DaysInWeekPipe, name: "daysInWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
173
173
|
}
|
|
174
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MonthDaysComponent, decorators: [{
|
|
175
175
|
type: Component,
|