mn-angular-lib 1.0.101 → 1.0.102
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.
|
@@ -8486,7 +8486,7 @@ class CalendarViewComponent {
|
|
|
8486
8486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8487
8487
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-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: [
|
|
8488
8488
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
8489
|
-
], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n @if (isMobileView) {\n <!-- Mobile (<
|
|
8489
|
+
], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n @if (isMobileView) {\n <!-- Mobile (<475px): action button as a full-width CTA on top; Today folds into the date-nav row below. -->\n <div class=\"flex flex-col gap-2 py-3\">\n @if (buttons.length || showButton) {\n <div class=\"flex items-center gap-2\">\n @for (btn of buttons; track btn.label) {\n <button class=\"flex-1\" mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button class=\"flex-1\" mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n }\n <div class=\"flex items-center gap-1\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <div class=\"min-w-0 flex-1\">\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n </div>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n </div>\n } @else if (isTabletView) {\n <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n <div class=\"flex items-center gap-3 py-3\">\n <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <div class=\"flex items-center gap-1 min-w-0\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <div class=\"min-w-0 flex-1\">\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n </div>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n </div>\n <div class=\"flex items-center gap-2 shrink-0\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n </div>\n } @else {\n <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n <div class=\"flex items-center justify-between gap-3 py-3\">\n <div class=\"flex items-center gap-3\">\n <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <div class=\"flex items-center gap-1\">\n <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n @for (view of viewOptions; track view.value) {\n <button\n mnButton\n [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n role=\"tab\"\n [attr.aria-selected]=\"currentView === view.value\"\n (click)=\"switchView(view.value)\">\n {{ view.label }}\n </button>\n }\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n </div>\n }\n\n <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n @if (currentView === CalendarView.MONTH) {\n <mn-calendar-month\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n (dayClicked)=\"onMonthDayClick($event)\">\n </mn-calendar-month>\n }\n @if (currentView === CalendarView.WEEK) {\n <mn-calendar-week\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n [calendarEventComponent]=\"CalendarEventComponent\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-calendar-week>\n }\n @if (currentView === CalendarView.DAY) {\n <mn-calendar-day\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n [calendarEventComponent]=\"CalendarEventComponent\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-calendar-day>\n }\n </div>\n <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n <mn-upcoming-events\n [eventsChanged]=\"internalEventsChanged\"\n [config]=\"config\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-upcoming-events>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
8490
8490
|
}
|
|
8491
8491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
|
|
8492
8492
|
type: Component,
|
|
@@ -8501,7 +8501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
8501
8501
|
FormsModule
|
|
8502
8502
|
], providers: [
|
|
8503
8503
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
8504
|
-
], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n @if (isMobileView) {\n <!-- Mobile (<
|
|
8504
|
+
], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n @if (isMobileView) {\n <!-- Mobile (<475px): action button as a full-width CTA on top; Today folds into the date-nav row below. -->\n <div class=\"flex flex-col gap-2 py-3\">\n @if (buttons.length || showButton) {\n <div class=\"flex items-center gap-2\">\n @for (btn of buttons; track btn.label) {\n <button class=\"flex-1\" mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button class=\"flex-1\" mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n }\n <div class=\"flex items-center gap-1\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <div class=\"min-w-0 flex-1\">\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n </div>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n </div>\n } @else if (isTabletView) {\n <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n <div class=\"flex items-center gap-3 py-3\">\n <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <div class=\"flex items-center gap-1 min-w-0\">\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <div class=\"min-w-0 flex-1\">\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n </div>\n <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n </div>\n <div class=\"flex items-center gap-2 shrink-0\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n </div>\n } @else {\n <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n <div class=\"flex items-center justify-between gap-3 py-3\">\n <div class=\"flex items-center gap-3\">\n <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n {{ config.todayLabel }}\n </button>\n <div class=\"flex items-center gap-1\">\n <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">‹</button>\n <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">›</button>\n </div>\n <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n @for (view of viewOptions; track view.value) {\n <button\n mnButton\n [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n role=\"tab\"\n [attr.aria-selected]=\"currentView === view.value\"\n (click)=\"switchView(view.value)\">\n {{ view.label }}\n </button>\n }\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n }\n </div>\n </div>\n }\n\n <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n @if (currentView === CalendarView.MONTH) {\n <mn-calendar-month\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n (dayClicked)=\"onMonthDayClick($event)\">\n </mn-calendar-month>\n }\n @if (currentView === CalendarView.WEEK) {\n <mn-calendar-week\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n [calendarEventComponent]=\"CalendarEventComponent\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-calendar-week>\n }\n @if (currentView === CalendarView.DAY) {\n <mn-calendar-day\n [focusDay]=\"focusDay\"\n [eventsChanged]=\"internalEventsChanged\"\n [focusDayChanged]=\"internalFocusDayChanged\"\n [config]=\"config\"\n [calendarEventComponent]=\"CalendarEventComponent\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-calendar-day>\n }\n </div>\n <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n <mn-upcoming-events\n [eventsChanged]=\"internalEventsChanged\"\n [config]=\"config\"\n (eventClicked)=\"onEventClick($event)\">\n </mn-upcoming-events>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
|
|
8505
8505
|
}], ctorParameters: () => [], propDecorators: { showButton: [{
|
|
8506
8506
|
type: Input
|
|
8507
8507
|
}], buttonTitle: [{
|