mn-angular-lib 1.0.100 → 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.
|
@@ -6640,7 +6640,14 @@ class MnModalShellComponent {
|
|
|
6640
6640
|
config;
|
|
6641
6641
|
modalRef;
|
|
6642
6642
|
isClosing = false;
|
|
6643
|
-
|
|
6643
|
+
/**
|
|
6644
|
+
* Whether another modal is stacked on top of this one. Set imperatively by
|
|
6645
|
+
* `MnModalService` on the already-rendered shell below the newly opened one, so it must
|
|
6646
|
+
* be a signal: mutating a plain field there changes the host `[class]` after the view was
|
|
6647
|
+
* checked (NG0100 ExpressionChangedAfterItHasBeenChecked) and does not schedule change
|
|
6648
|
+
* detection in a zoneless app. A signal write both notifies the host binding and schedules CD.
|
|
6649
|
+
*/
|
|
6650
|
+
isStacked = signal(false, ...(ngDevMode ? [{ debugName: "isStacked" }] : []));
|
|
6644
6651
|
ModalKind = ModalKind;
|
|
6645
6652
|
previouslyFocusedElement = null;
|
|
6646
6653
|
focusTrapListener = null;
|
|
@@ -6815,7 +6822,7 @@ class MnModalShellComponent {
|
|
|
6815
6822
|
? this.config.animation
|
|
6816
6823
|
: this.config.animation?.type || 'slide';
|
|
6817
6824
|
const animation = ` anim-${animType}`;
|
|
6818
|
-
const stacked = this.isStacked ? ' is-stacked' : '';
|
|
6825
|
+
const stacked = this.isStacked() ? ' is-stacked' : '';
|
|
6819
6826
|
const mobileSheet = this.isMobileSheet ? ' mobile-sheet' : '';
|
|
6820
6827
|
const swiping = this.swipeDismissing ? ' swipe-dismissing' : '';
|
|
6821
6828
|
return `modal-shell modal-${size}${animation}${stacked}${mobileSheet}${swiping}`;
|
|
@@ -7080,7 +7087,7 @@ class MnModalService {
|
|
|
7080
7087
|
// Update stack and dim previous modal
|
|
7081
7088
|
if (this.modalStack.length > 0) {
|
|
7082
7089
|
const prevModal = this.modalStack[this.modalStack.length - 1];
|
|
7083
|
-
prevModal.component.isStacked
|
|
7090
|
+
prevModal.component.isStacked.set(true);
|
|
7084
7091
|
}
|
|
7085
7092
|
this.modalStack.push(modalRef);
|
|
7086
7093
|
// Attach to application
|
|
@@ -7097,7 +7104,7 @@ class MnModalService {
|
|
|
7097
7104
|
this.modalStack.splice(index, 1);
|
|
7098
7105
|
if (this.modalStack.length > 0) {
|
|
7099
7106
|
const topModal = this.modalStack[this.modalStack.length - 1];
|
|
7100
|
-
topModal.component.isStacked
|
|
7107
|
+
topModal.component.isStacked.set(false);
|
|
7101
7108
|
}
|
|
7102
7109
|
}
|
|
7103
7110
|
});
|
|
@@ -8479,7 +8486,7 @@ class CalendarViewComponent {
|
|
|
8479
8486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8480
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: [
|
|
8481
8488
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
8482
|
-
], 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"] }] });
|
|
8483
8490
|
}
|
|
8484
8491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
|
|
8485
8492
|
type: Component,
|
|
@@ -8494,7 +8501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
8494
8501
|
FormsModule
|
|
8495
8502
|
], providers: [
|
|
8496
8503
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
8497
|
-
], 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"] }]
|
|
8498
8505
|
}], ctorParameters: () => [], propDecorators: { showButton: [{
|
|
8499
8506
|
type: Input
|
|
8500
8507
|
}], buttonTitle: [{
|