mn-angular-lib 0.0.85 → 0.0.86

package/fesm2022/mn-angular-lib.mjs

@@ -3385,6 +3385,13 @@ class MnTable {
                 this.columnFilters[col.key] = '';
             }
         }
+        // Pre-select rows from initialSelectedIds if provided
+        if (this.dataSource.initialSelectedIds?.length) {
+            for (const id of this.dataSource.initialSelectedIds) {
+                this.selectedIds.add(id);
+            }
+            this.emitSelection();
+        }
         this.applyFilterAndSort(false);
         // Skip the initial BehaviorSubject emission (already handled above)
         // to avoid triggering markForCheck during the first change detection cycle.
@@ -4092,18 +4099,26 @@ class MnFormBodyComponent {
                 const ds = tableField.tableDataSource;
                 // Force multi selection mode
                 ds.selectionMode = 'multi';
-                this.tableDataSources[field.key] = ds;
-                // Initialize form control with empty array if null
+                // Pre-select rows from the form's initial value
                 const control = this.form.get(field.key);
-                if (control && control.value === null) {
+                if (control && Array.isArray(control.value) && control.value.length > 0) {
+                    ds.initialSelectedIds = control.value.map((v) => String(v));
+                }
+                else if (control && control.value === null) {
                     control.setValue([], { emitEvent: false });
                 }
+                this.tableDataSources[field.key] = ds;
             }
             else if (field.kind === FieldKind.SINGLE_SELECT_TABLE) {
                 const tableField = field;
                 const ds = tableField.tableDataSource;
                 // Force single selection mode
                 ds.selectionMode = 'single';
+                // Pre-select row from the form's initial value
+                const control = this.form.get(field.key);
+                if (control && control.value != null) {
+                    ds.initialSelectedIds = [String(control.value)];
+                }
                 this.tableDataSources[field.key] = ds;
             }
         });
@@ -6222,6 +6237,8 @@ class CalendarViewComponent {
     showButton = false;
     /** Label text for the action button. */
     buttonTitle = '';
+    /** Array of buttons to display in the toolbar's top-right area. */
+    buttons = [];
     /** Custom event renderer component type. */
     CalendarEventComponent;
     /** Observable or EventEmitter that pushes new event arrays into the calendar. */
@@ -6365,9 +6382,9 @@ class CalendarViewComponent {
         this.dateInputValue = this.formatter.formatDateForFormControl(this.focusDay);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }, { token: MN_CALENDAR_CONFIG, optional: true }, { token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "app-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "app-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            class=\"view-btn\"\n            role=\"tab\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [class.active]=\"currentView === view.value\"\n            (click)=\"switchView(view.value)\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      @if (showButton) {\n        <button class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n          {{ buttonTitle }}\n        </button>\n      }\n    </div>\n  </div>\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid var(--color-base-300);border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:var(--color-base-100);cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:var(--color-base-200)}.view-btn.active{background:var(--color-primary);color:var(--color-primary-content, white)}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:var(--color-base-200)}.date-input{padding:4px 8px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px}.today-btn{padding:6px 12px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:13px;color:var(--color-base-content)}.today-btn:hover{background:var(--color-base-200)}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-content, white);cursor:pointer;font-size:13px}.action-btn:hover{opacity:.85}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid var(--color-base-300);overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "app-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "app-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "app-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "app-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }] });
+        ], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            class=\"view-btn\"\n            role=\"tab\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [class.active]=\"currentView === view.value\"\n            (click)=\"switchView(view.value)\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      @for (btn of buttons; track btn.label) {\n        <button [class]=\"btn.cssClass || 'action-btn'\" (click)=\"btn.onClick()\">\n          {{ btn.label }}\n        </button>\n      }\n      @if (showButton) {\n        <button class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n          {{ buttonTitle }}\n        </button>\n      }\n    </div>\n  </div>\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid var(--color-base-300);border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:var(--color-base-100);cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:var(--color-base-200)}.view-btn.active{background:var(--color-primary);color:var(--color-primary-content, white)}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:var(--color-base-200)}.date-input{padding:4px 8px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px}.today-btn{padding:6px 12px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:13px;color:var(--color-base-content)}.today-btn:hover{background:var(--color-base-200)}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-content, white);cursor:pointer;font-size:13px}.action-btn:hover{opacity:.85}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid var(--color-base-300);overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "app-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "app-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "app-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "app-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
@@ -6379,7 +6396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         UpcomingEventsComponent
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            class=\"view-btn\"\n            role=\"tab\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [class.active]=\"currentView === view.value\"\n            (click)=\"switchView(view.value)\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      @if (showButton) {\n        <button class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n          {{ buttonTitle }}\n        </button>\n      }\n    </div>\n  </div>\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid var(--color-base-300);border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:var(--color-base-100);cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:var(--color-base-200)}.view-btn.active{background:var(--color-primary);color:var(--color-primary-content, white)}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:var(--color-base-200)}.date-input{padding:4px 8px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px}.today-btn{padding:6px 12px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:13px;color:var(--color-base-content)}.today-btn:hover{background:var(--color-base-200)}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-content, white);cursor:pointer;font-size:13px}.action-btn:hover{opacity:.85}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid var(--color-base-300);overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"] }]
+                    ], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        @for (view of viewOptions; track view.value) {\n          <button\n            class=\"view-btn\"\n            role=\"tab\"\n            [attr.aria-selected]=\"currentView === view.value\"\n            [class.active]=\"currentView === view.value\"\n            (click)=\"switchView(view.value)\">\n            {{ view.label }}\n          </button>\n        }\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      @for (btn of buttons; track btn.label) {\n        <button [class]=\"btn.cssClass || 'action-btn'\" (click)=\"btn.onClick()\">\n          {{ btn.label }}\n        </button>\n      }\n      @if (showButton) {\n        <button class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n          {{ buttonTitle }}\n        </button>\n      }\n    </div>\n  </div>\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid var(--color-base-300);border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:var(--color-base-100);cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:var(--color-base-200)}.view-btn.active{background:var(--color-primary);color:var(--color-primary-content, white)}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:var(--color-base-200)}.date-input{padding:4px 8px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px}.today-btn{padding:6px 12px;border:1px solid var(--color-base-300);border-radius:6px;background:var(--color-base-100);cursor:pointer;font-size:13px;color:var(--color-base-content)}.today-btn:hover{background:var(--color-base-200)}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-content, white);cursor:pointer;font-size:13px}.action-btn:hover{opacity:.85}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid var(--color-base-300);overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -6399,6 +6416,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Input
             }], buttonTitle: [{
                 type: Input
+            }], buttons: [{
+                type: Input
             }], CalendarEventComponent: [{
                 type: Input
             }], NewCalendarItemsEvent: [{