@anglr/datetime 9.0.0-beta.20241007050425 → 9.0.0-beta.20241007061121
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/es2022/src/modules/calendar/components/monthCalendar/monthCalendar.component.js +2 -2
- package/es2022/src/modules/calendar/components/monthCalendar/monthCalendar.component.js.map +1 -1
- package/package.json +1 -1
- package/src/modules/calendar/components/monthCalendar/monthCalendar.component.html +2 -0
- package/version.bak +1 -1
|
@@ -156,7 +156,7 @@ export class MonthCalendarComponent {
|
|
|
156
156
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MonthCalendarComponent, deps: [{ token: DATE_API }, { token: FORMAT_PROVIDER }, { token: i1.EventParser }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
157
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MonthCalendarComponent, isStandalone: true, selector: "month-calendar", inputs: { showWeekNumber: "showWeekNumber", display: "display", weekDayName: "weekDayName", dayAspectRatio: "dayAspectRatio", events: "events" }, providers: [
|
|
158
158
|
EventParser,
|
|
159
|
-
], queries: [{ propertyName: "customCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "defaultCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n", dependencies: [{ kind: "directive", type: CalendarDayTemplateDirective, selector: "[calendarDayTemplate]" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
159
|
+
], queries: [{ propertyName: "customCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "defaultCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n", dependencies: [{ kind: "directive", type: CalendarDayTemplateDirective, selector: "[calendarDayTemplate]" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
160
160
|
}
|
|
161
161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MonthCalendarComponent, decorators: [{
|
|
162
162
|
type: Component,
|
|
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
165
165
|
KeyValuePipe,
|
|
166
166
|
], providers: [
|
|
167
167
|
EventParser,
|
|
168
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n" }]
|
|
168
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n" }]
|
|
169
169
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
170
170
|
type: Inject,
|
|
171
171
|
args: [DATE_API]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"monthCalendar.component.js","sourceRoot":"","sources":["../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.ts","../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, OnInit, ViewChild, TemplateRef, ContentChild, OnChanges, SimpleChanges} from '@angular/core';\nimport {KeyValuePipe} from '@angular/common';\nimport {Dictionary, isString, nameof} from '@jscrpt/common';\n\nimport {CalendarDayData, EventData} from '../../interfaces';\nimport {CalendarDayTemplateDirective, CalendarDayTemplateContext} from '../../directives';\nimport {MonthCalendarDayFormat, CalendarDayAspectRatio} from '../../misc';\nimport {EventParser} from '../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\nimport {FormatProvider} from '../../../../interfaces';\n\n/**\n * Component used for displaying month calendar\n */\n@Component(\n{\n selector: 'month-calendar',\n templateUrl: 'monthCalendar.component.html',\n standalone: true,\n imports:\n [\n CalendarDayTemplateDirective,\n KeyValuePipe,\n ],\n providers:\n [\n EventParser,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MonthCalendarComponent<TDate = unknown, TEvent = unknown> implements OnInit, OnChanges\n{\n //######################### protected properties - template bindings #########################\n\n /**\n * Aspect ratio for displayed calendar day cell\n */\n protected dayAspectRatioValue: number = CalendarDayAspectRatio.ThreeToTwo;\n\n /**\n * Data that represents calendar data\n */\n protected calendarData: Dictionary<CalendarDayData<TDate, TEvent>[]> = {};\n\n /**\n * Calendar day template to be used\n */\n protected get calendarDayTemplate(): TemplateRef<CalendarDayTemplateContext>\n {\n return this.customCalendarDayTemplate ?? this.defaultCalendarDayTemplate;\n }\n\n /**\n * Array of weekday names\n */\n protected weekDayNames: string[] = [];\n\n //######################### protected properties - children #########################\n\n /**\n * Default calendar day template\n */\n @ViewChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n protected defaultCalendarDayTemplate!: TemplateRef<CalendarDayTemplateContext>;\n\n /**\n * Custom calendar day template\n */\n @ContentChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n protected customCalendarDayTemplate: TemplateRef<CalendarDayTemplateContext>|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * Indication that week number should be displayed\n */\n @Input()\n public showWeekNumber: boolean = false;\n\n /**\n * Date that should be displayed in month calendar\n */\n @Input()\n public display: TDate|undefined|null;\n\n /**\n * Format for displaying week day names\n */\n @Input()\n public weekDayName: MonthCalendarDayFormat = MonthCalendarDayFormat.Short;\n\n /**\n * Aspect ratio for displayed calendar day cell\n */\n @Input()\n public get dayAspectRatio(): number\n {\n return this.dayAspectRatioValue;\n }\n public set dayAspectRatio(value: number)\n {\n if(isString(value))\n {\n this.dayAspectRatioValue = CalendarDayAspectRatio[value] as unknown as number;\n\n return;\n }\n\n this.dayAspectRatioValue = value;\n }\n\n /**\n * Array of events that should be displayed\n */\n @Input()\n public events: EventData<TDate, TEvent>[] = [];\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,\n @Inject(FORMAT_PROVIDER) protected formatProvider: FormatProvider,\n protected eventParser: EventParser<TDate, TEvent>,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this.initWeekdayNames();\n this.initializeDisplayCalendar();\n }\n\n //######################### public methods - implementation of OnChanges #########################\n\n /**\n * Called when input value changes\n */\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<MonthCalendarComponent>('weekDayName') in changes)\n {\n this.initWeekdayNames();\n }\n\n if(nameof<MonthCalendarComponent>('display') in changes)\n {\n this.initializeDisplayCalendar();\n }\n\n if(nameof<MonthCalendarComponent>('events') in changes && !(nameof<MonthCalendarComponent>('display') in changes))\n {\n this.initAndAttachEventData();\n }\n }\n\n //######################### protected methods #########################\n\n /**\n * Initialize weekday names\n */\n protected initWeekdayNames(): void\n {\n this.weekDayNames = [];\n\n switch(this.weekDayName)\n {\n default:\n // case MonthCalendarDayFormat.None:\n {\n for(let x = 0; x < 7; x++)\n {\n this.weekDayNames.push('');\n }\n\n break;\n }\n case MonthCalendarDayFormat.Short:\n {\n const names = this.dateApi.weekdays(true);\n this.weekDayNames.push(...names);\n\n break;\n }\n case MonthCalendarDayFormat.Full:\n {\n const names = this.dateApi.weekdays();\n this.weekDayNames.push(...names);\n\n break;\n }\n }\n }\n\n /**\n * Initialize date for calendar that should be displayed\n */\n protected initializeDisplayCalendar(): void\n {\n this.display ??= this.dateApi.now().value;\n\n const workDate = this.dateApi.getValue(this.display);\n\n workDate.startOfMonth()\n .startOfWeek();\n\n this.calendarData = {};\n\n do\n {\n const weekData: CalendarDayData<TDate, TEvent>[] = this.calendarData[workDate.format(this.formatProvider.week)] = [];\n\n for(let x = 0; x < 7; x++)\n {\n weekData.push(\n {\n date: workDate.value,\n day: workDate.dayOfMonth(),\n events: [],\n isCurrentMonth: workDate.isSameMonth(this.display),\n isWeekend: workDate.isWeekend(),\n week: +workDate.format(this.formatProvider.week),\n });\n\n workDate.addDays(1);\n }\n\n workDate.startOfWeek();\n }\n while(workDate.isSameMonth(this.display));\n\n this.initAndAttachEventData();\n }\n\n /**\n * Initialize and attaches event data\n */\n protected initAndAttachEventData(): void\n {\n const events = this.eventParser.getEventsPerDay(this.events);\n\n for(const week in this.calendarData)\n {\n const weekData = this.calendarData[week];\n\n for(const day of weekData)\n {\n const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));\n day.events = found?.[1] ?? [];\n }\n }\n }\n\n //######################### ng language server #########################\n\n /**\n * Custom input type for `weekDayName` input\n */\n public static ngAcceptInputType_weekDayName: keyof typeof MonthCalendarDayFormat;\n\n /**\n * Custom input type for `dayAspectRatio` input\n */\n public static ngAcceptInputType_dayAspectRatio: keyof typeof CalendarDayAspectRatio|number;\n}","<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"monthCalendar.component.js","sourceRoot":"","sources":["../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.ts","../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, OnInit, ViewChild, TemplateRef, ContentChild, OnChanges, SimpleChanges} from '@angular/core';\nimport {KeyValuePipe} from '@angular/common';\nimport {Dictionary, isString, nameof} from '@jscrpt/common';\n\nimport {CalendarDayData, EventData} from '../../interfaces';\nimport {CalendarDayTemplateDirective, CalendarDayTemplateContext} from '../../directives';\nimport {MonthCalendarDayFormat, CalendarDayAspectRatio} from '../../misc';\nimport {EventParser} from '../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\nimport {FormatProvider} from '../../../../interfaces';\n\n/**\n * Component used for displaying month calendar\n */\n@Component(\n{\n selector: 'month-calendar',\n templateUrl: 'monthCalendar.component.html',\n standalone: true,\n imports:\n [\n CalendarDayTemplateDirective,\n KeyValuePipe,\n ],\n providers:\n [\n EventParser,\n ],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MonthCalendarComponent<TDate = unknown, TEvent = unknown> implements OnInit, OnChanges\n{\n //######################### protected properties - template bindings #########################\n\n /**\n * Aspect ratio for displayed calendar day cell\n */\n protected dayAspectRatioValue: number = CalendarDayAspectRatio.ThreeToTwo;\n\n /**\n * Data that represents calendar data\n */\n protected calendarData: Dictionary<CalendarDayData<TDate, TEvent>[]> = {};\n\n /**\n * Calendar day template to be used\n */\n protected get calendarDayTemplate(): TemplateRef<CalendarDayTemplateContext>\n {\n return this.customCalendarDayTemplate ?? this.defaultCalendarDayTemplate;\n }\n\n /**\n * Array of weekday names\n */\n protected weekDayNames: string[] = [];\n\n //######################### protected properties - children #########################\n\n /**\n * Default calendar day template\n */\n @ViewChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n protected defaultCalendarDayTemplate!: TemplateRef<CalendarDayTemplateContext>;\n\n /**\n * Custom calendar day template\n */\n @ContentChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n protected customCalendarDayTemplate: TemplateRef<CalendarDayTemplateContext>|undefined|null;\n\n //######################### public properties - inputs #########################\n\n /**\n * Indication that week number should be displayed\n */\n @Input()\n public showWeekNumber: boolean = false;\n\n /**\n * Date that should be displayed in month calendar\n */\n @Input()\n public display: TDate|undefined|null;\n\n /**\n * Format for displaying week day names\n */\n @Input()\n public weekDayName: MonthCalendarDayFormat = MonthCalendarDayFormat.Short;\n\n /**\n * Aspect ratio for displayed calendar day cell\n */\n @Input()\n public get dayAspectRatio(): number\n {\n return this.dayAspectRatioValue;\n }\n public set dayAspectRatio(value: number)\n {\n if(isString(value))\n {\n this.dayAspectRatioValue = CalendarDayAspectRatio[value] as unknown as number;\n\n return;\n }\n\n this.dayAspectRatioValue = value;\n }\n\n /**\n * Array of events that should be displayed\n */\n @Input()\n public events: EventData<TDate, TEvent>[] = [];\n\n //######################### constructor #########################\n constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,\n @Inject(FORMAT_PROVIDER) protected formatProvider: FormatProvider,\n protected eventParser: EventParser<TDate, TEvent>,)\n {\n }\n\n //######################### public methods - implementation of OnInit #########################\n\n /**\n * Initialize component\n */\n public ngOnInit(): void\n {\n this.initWeekdayNames();\n this.initializeDisplayCalendar();\n }\n\n //######################### public methods - implementation of OnChanges #########################\n\n /**\n * Called when input value changes\n */\n public ngOnChanges(changes: SimpleChanges): void\n {\n if(nameof<MonthCalendarComponent>('weekDayName') in changes)\n {\n this.initWeekdayNames();\n }\n\n if(nameof<MonthCalendarComponent>('display') in changes)\n {\n this.initializeDisplayCalendar();\n }\n\n if(nameof<MonthCalendarComponent>('events') in changes && !(nameof<MonthCalendarComponent>('display') in changes))\n {\n this.initAndAttachEventData();\n }\n }\n\n //######################### protected methods #########################\n\n /**\n * Initialize weekday names\n */\n protected initWeekdayNames(): void\n {\n this.weekDayNames = [];\n\n switch(this.weekDayName)\n {\n default:\n // case MonthCalendarDayFormat.None:\n {\n for(let x = 0; x < 7; x++)\n {\n this.weekDayNames.push('');\n }\n\n break;\n }\n case MonthCalendarDayFormat.Short:\n {\n const names = this.dateApi.weekdays(true);\n this.weekDayNames.push(...names);\n\n break;\n }\n case MonthCalendarDayFormat.Full:\n {\n const names = this.dateApi.weekdays();\n this.weekDayNames.push(...names);\n\n break;\n }\n }\n }\n\n /**\n * Initialize date for calendar that should be displayed\n */\n protected initializeDisplayCalendar(): void\n {\n this.display ??= this.dateApi.now().value;\n\n const workDate = this.dateApi.getValue(this.display);\n\n workDate.startOfMonth()\n .startOfWeek();\n\n this.calendarData = {};\n\n do\n {\n const weekData: CalendarDayData<TDate, TEvent>[] = this.calendarData[workDate.format(this.formatProvider.week)] = [];\n\n for(let x = 0; x < 7; x++)\n {\n weekData.push(\n {\n date: workDate.value,\n day: workDate.dayOfMonth(),\n events: [],\n isCurrentMonth: workDate.isSameMonth(this.display),\n isWeekend: workDate.isWeekend(),\n week: +workDate.format(this.formatProvider.week),\n });\n\n workDate.addDays(1);\n }\n\n workDate.startOfWeek();\n }\n while(workDate.isSameMonth(this.display));\n\n this.initAndAttachEventData();\n }\n\n /**\n * Initialize and attaches event data\n */\n protected initAndAttachEventData(): void\n {\n const events = this.eventParser.getEventsPerDay(this.events);\n\n for(const week in this.calendarData)\n {\n const weekData = this.calendarData[week];\n\n for(const day of weekData)\n {\n const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));\n day.events = found?.[1] ?? [];\n }\n }\n }\n\n //######################### ng language server #########################\n\n /**\n * Custom input type for `weekDayName` input\n */\n public static ngAcceptInputType_weekDayName: keyof typeof MonthCalendarDayFormat;\n\n /**\n * Custom input type for `dayAspectRatio` input\n */\n public static ngAcceptInputType_dayAspectRatio: keyof typeof CalendarDayAspectRatio|number;\n}","<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n <div class=\"week-number\">\n @if(showWeekNumber)\n {\n {{weekData.key}}\n }\n </div>\n \n @for(dayData of weekData.value; track dayData)\n {\n <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n </div>\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<div *calendarDayTemplate="let data" class="default-calendar-day" [class.is-weekend]="data.isWeekend" [class.is-other-month]="!data.isCurrentMonth">{{data.day}}</div>
|
|
2
2
|
|
|
3
|
+
<div></div>
|
|
4
|
+
|
|
3
5
|
@for(dayName of weekDayNames; track dayName)
|
|
4
6
|
{
|
|
5
7
|
<div [class.week-day-name]="dayName">{{dayName}}</div>
|
package/version.bak
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
9.0.0-beta.
|
|
1
|
+
9.0.0-beta.20241007061121
|