mn-angular-lib 1.0.28 → 1.0.29
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.
|
@@ -242,6 +242,7 @@ const mnButtonVariants = tv({
|
|
|
242
242
|
warning: '',
|
|
243
243
|
success: '',
|
|
244
244
|
accent: '',
|
|
245
|
+
gray: '',
|
|
245
246
|
},
|
|
246
247
|
borderRadius: {
|
|
247
248
|
none: 'rounded-none',
|
|
@@ -270,6 +271,7 @@ const mnButtonVariants = tv({
|
|
|
270
271
|
{ variant: 'fill', color: 'warning', class: 'bg-warning text-warning-content hover:brightness-60' },
|
|
271
272
|
{ variant: 'fill', color: 'success', class: 'bg-success text-success-content hover:brightness-60' },
|
|
272
273
|
{ variant: 'fill', color: 'accent', class: 'bg-accent text-accent-content hover:brightness-60' },
|
|
274
|
+
{ variant: 'fill', color: 'gray', class: 'bg-base-content/10 text-base-content/70 hover:bg-base-content/20' },
|
|
273
275
|
// Outline
|
|
274
276
|
{ variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary/10' },
|
|
275
277
|
{ variant: 'outline', color: 'secondary', class: 'border-neutral text-neutral hover:bg-neutral/10' },
|
|
@@ -277,6 +279,7 @@ const mnButtonVariants = tv({
|
|
|
277
279
|
{ variant: 'outline', color: 'warning', class: 'border-warning text-warning hover:bg-warning/10' },
|
|
278
280
|
{ variant: 'outline', color: 'success', class: 'border-success text-success hover:bg-success/10' },
|
|
279
281
|
{ variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent/10' },
|
|
282
|
+
{ variant: 'outline', color: 'gray', class: 'border-base-content/70 text-base-content/70 hover:bg-base-content/10' },
|
|
280
283
|
// Text
|
|
281
284
|
{ variant: 'text', color: 'primary', class: 'text-primary hover:bg-primary/10' },
|
|
282
285
|
{ variant: 'text', color: 'secondary', class: 'text-neutral hover:bg-neutral/10' },
|
|
@@ -284,6 +287,7 @@ const mnButtonVariants = tv({
|
|
|
284
287
|
{ variant: 'text', color: 'warning', class: 'text-warning hover:bg-warning/10' },
|
|
285
288
|
{ variant: 'text', color: 'success', class: 'text-success hover:bg-success/10' },
|
|
286
289
|
{ variant: 'text', color: 'accent', class: 'text-accent hover:bg-accent/10' },
|
|
290
|
+
{ variant: 'text', color: 'gray', class: 'text-base-content/70 hover:bg-base-content/10' },
|
|
287
291
|
// Text Underline
|
|
288
292
|
{ variant: 'textUnderline', color: 'primary', class: 'text-primary underline underline-offset-2 hover:bg-primary/10' },
|
|
289
293
|
{ variant: 'textUnderline', color: 'secondary', class: 'text-neutral underline underline-offset-2 hover:bg-neutral/10' },
|
|
@@ -291,6 +295,7 @@ const mnButtonVariants = tv({
|
|
|
291
295
|
{ variant: 'textUnderline', color: 'warning', class: 'text-warning underline underline-offset-2 hover:bg-warning/10' },
|
|
292
296
|
{ variant: 'textUnderline', color: 'success', class: 'text-success underline underline-offset-2 hover:bg-success/10' },
|
|
293
297
|
{ variant: 'textUnderline', color: 'accent', class: 'text-accent underline underline-offset-2 hover:bg-accent/10' },
|
|
298
|
+
{ variant: 'textUnderline', color: 'gray', class: 'text-base-content/70 underline underline-offset-2 hover:bg-base-content/10' },
|
|
294
299
|
],
|
|
295
300
|
defaultVariants: {
|
|
296
301
|
size: 'md',
|
|
@@ -369,11 +374,11 @@ class MnAlertOutletComponent {
|
|
|
369
374
|
};
|
|
370
375
|
}
|
|
371
376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n <div class=\"fixed top-4 right-4 z-[9999] flex flex-col gap-3 w-full max-w-sm\">\n @for (a of alerts; track trackById($index, a)) {\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"contextFor(a)\">\n </ng-container>\n } @else {\n <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\">\n <div class=\"flex-1 min-w-0\">\n <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n @if (a.subTitle) {\n <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n }\n </div>\n <button\n mnButton\n [data]=\"{ size: 'md', variant: 'text' }\"\n (click)=\"dismissAlert(a.id)\"\n class=\"shrink-0 !text-current hover:!bg-current/10\"\n aria-label=\"Close\"\n >\n ×\n </button>\n </div>\n }\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { template: "template" }, ngImport: i0, template: "@if (alerts$ | async; as alerts) {\n <div class=\"fixed top-4 right-4 z-[9999] flex flex-col gap-3 w-full max-w-sm\">\n @for (a of alerts; track trackById($index, a)) {\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"contextFor(a)\">\n </ng-container>\n } @else {\n <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n <div class=\"flex-1 min-w-0 pr-8\">\n <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n @if (a.subTitle) {\n <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n }\n </div>\n <button\n mnButton\n [data]=\"{ size: 'md', variant: 'text' }\"\n (click)=\"dismissAlert(a.id)\"\n class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n aria-label=\"Close\"\n >\n ×\n </button>\n </div>\n }\n }\n </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
373
378
|
}
|
|
374
379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, decorators: [{
|
|
375
380
|
type: Component,
|
|
376
|
-
args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n <div class=\"fixed top-4 right-4 z-[9999] flex flex-col gap-3 w-full max-w-sm\">\n @for (a of alerts; track trackById($index, a)) {\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"contextFor(a)\">\n </ng-container>\n } @else {\n <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\">\n <div class=\"flex-1 min-w-0\">\n <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n @if (a.subTitle) {\n <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n }\n </div>\n <button\n mnButton\n [data]=\"{ size: 'md', variant: 'text' }\"\n (click)=\"dismissAlert(a.id)\"\n class=\"shrink-0 !text-current hover:!bg-current/10\"\n aria-label=\"Close\"\n >\n ×\n </button>\n </div>\n }\n }\n </div>\n}\n" }]
|
|
381
|
+
args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (alerts$ | async; as alerts) {\n <div class=\"fixed top-4 right-4 z-[9999] flex flex-col gap-3 w-full max-w-sm\">\n @for (a of alerts; track trackById($index, a)) {\n @if (template) {\n <ng-container\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"contextFor(a)\">\n </ng-container>\n } @else {\n <div [class]=\"getAlertClasses(a)\" [class.extra]=\"a.cssClass\" class=\"relative\">\n <div class=\"flex-1 min-w-0 pr-8\">\n <h4 class=\"font-semibold text-sm\">{{ a.title }}</h4>\n @if (a.subTitle) {\n <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ a.subTitle }}</p>\n }\n </div>\n <button\n mnButton\n [data]=\"{ size: 'md', variant: 'text' }\"\n (click)=\"dismissAlert(a.id)\"\n class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n aria-label=\"Close\"\n >\n ×\n </button>\n </div>\n }\n }\n </div>\n}\n" }]
|
|
377
382
|
}], ctorParameters: () => [], propDecorators: { template: [{
|
|
378
383
|
type: Input
|
|
379
384
|
}] } });
|
|
@@ -387,22 +392,45 @@ const mnBadgeVariants = tv({
|
|
|
387
392
|
lg: 'px-2.5 py-1 text-base',
|
|
388
393
|
xl: 'px-3 py-1.5 text-lg',
|
|
389
394
|
},
|
|
395
|
+
variant: {
|
|
396
|
+
default: '',
|
|
397
|
+
fill: '',
|
|
398
|
+
},
|
|
390
399
|
wrap: {
|
|
391
400
|
true: 'whitespace-normal',
|
|
392
401
|
false: 'whitespace-nowrap',
|
|
393
402
|
},
|
|
394
403
|
color: {
|
|
395
|
-
primary: '
|
|
396
|
-
secondary: '
|
|
397
|
-
danger: '
|
|
398
|
-
warning: '
|
|
399
|
-
success: '
|
|
400
|
-
accent: '
|
|
401
|
-
lightgray: '
|
|
404
|
+
primary: '',
|
|
405
|
+
secondary: '',
|
|
406
|
+
danger: '',
|
|
407
|
+
warning: '',
|
|
408
|
+
success: '',
|
|
409
|
+
accent: '',
|
|
410
|
+
lightgray: '',
|
|
402
411
|
},
|
|
403
412
|
},
|
|
413
|
+
compoundVariants: [
|
|
414
|
+
// Default (light/transparent)
|
|
415
|
+
{ variant: 'default', color: 'primary', class: 'bg-primary/20 border-primary text-primary' },
|
|
416
|
+
{ variant: 'default', color: 'secondary', class: 'bg-neutral/20 border-neutral text-neutral' },
|
|
417
|
+
{ variant: 'default', color: 'danger', class: 'bg-error/20 border-error text-error' },
|
|
418
|
+
{ variant: 'default', color: 'warning', class: 'bg-warning/20 border-warning text-warning' },
|
|
419
|
+
{ variant: 'default', color: 'success', class: 'bg-success/20 border-success text-success' },
|
|
420
|
+
{ variant: 'default', color: 'accent', class: 'bg-accent/20 border-accent text-accent' },
|
|
421
|
+
{ variant: 'default', color: 'lightgray', class: 'bg-base-content/10 border-base-content/70 text-base-content/70' },
|
|
422
|
+
// Fill (solid)
|
|
423
|
+
{ variant: 'fill', color: 'primary', class: 'bg-primary border-primary text-primary-content' },
|
|
424
|
+
{ variant: 'fill', color: 'secondary', class: 'bg-neutral border-neutral text-neutral-content' },
|
|
425
|
+
{ variant: 'fill', color: 'danger', class: 'bg-error border-error text-error-content' },
|
|
426
|
+
{ variant: 'fill', color: 'warning', class: 'bg-warning border-warning text-warning-content' },
|
|
427
|
+
{ variant: 'fill', color: 'success', class: 'bg-success border-success text-success-content' },
|
|
428
|
+
{ variant: 'fill', color: 'accent', class: 'bg-accent border-accent text-accent-content' },
|
|
429
|
+
{ variant: 'fill', color: 'lightgray', class: 'bg-base-content/70 border-base-content/70 text-base-100' },
|
|
430
|
+
],
|
|
404
431
|
defaultVariants: {
|
|
405
432
|
size: 'md',
|
|
433
|
+
variant: 'default',
|
|
406
434
|
color: 'primary',
|
|
407
435
|
wrap: false,
|
|
408
436
|
},
|
|
@@ -413,6 +441,7 @@ class MnBadge {
|
|
|
413
441
|
get hostClasses() {
|
|
414
442
|
return mnBadgeVariants({
|
|
415
443
|
size: this.data.size,
|
|
444
|
+
variant: this.data.variant,
|
|
416
445
|
color: this.data.color,
|
|
417
446
|
wrap: this.data.wrap,
|
|
418
447
|
});
|
|
@@ -2164,9 +2193,9 @@ const mnDatetimeVariants = tv({
|
|
|
2164
2193
|
true: 'shadow-lg',
|
|
2165
2194
|
},
|
|
2166
2195
|
size: {
|
|
2167
|
-
sm: '
|
|
2168
|
-
md: '
|
|
2169
|
-
lg: '
|
|
2196
|
+
sm: 'px-2 py-1.5',
|
|
2197
|
+
md: 'px-3 py-2',
|
|
2198
|
+
lg: 'px-4 py-3',
|
|
2170
2199
|
},
|
|
2171
2200
|
borderRadius: {
|
|
2172
2201
|
none: 'rounded-none',
|
|
@@ -2338,11 +2367,11 @@ class MnDatetime {
|
|
|
2338
2367
|
});
|
|
2339
2368
|
}
|
|
2340
2369
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n @if (uiConfig.label || props.label) {\n <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n <p>{{ uiConfig.label || props.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <input\n [id]=\"resolvedId\"\n [attr.name]=\"resolvedName\"\n [type]=\"resolvedMode\"\n [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n [attr.aria-invalid]=\"showError || null\"\n [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n [disabled]=\"isDisabled\"\n [attr.min]=\"props.min || null\"\n [attr.max]=\"props.max || null\"\n [attr.step]=\"props.step || null\"\n [value]=\"value ?? ''\"\n [ngClass]=\"inputClasses\"\n (input)=\"handleInput(($any($event.target)).value)\"\n (blur)=\"handleBlur()\"\n />\n\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n }\n </div>\n } @else {\n @if (errorMessage != null) {\n <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n }\n }\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
|
|
2370
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n @if (uiConfig.label || props.label) {\n <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n <p>{{ uiConfig.label || props.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <input\n #dateInput\n [id]=\"resolvedId\"\n [attr.name]=\"resolvedName\"\n [type]=\"resolvedMode\"\n [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n [attr.aria-invalid]=\"showError || null\"\n [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n [disabled]=\"isDisabled\"\n [attr.min]=\"props.min || null\"\n [attr.max]=\"props.max || null\"\n [attr.step]=\"props.step || null\"\n [value]=\"value ?? ''\"\n [ngClass]=\"inputClasses\"\n class=\"cursor-pointer\"\n (click)=\"dateInput.showPicker?.()\"\n (input)=\"handleInput(($any($event.target)).value)\"\n (blur)=\"handleBlur()\"\n />\n\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n }\n </div>\n } @else {\n @if (errorMessage != null) {\n <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n }\n }\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
|
|
2342
2371
|
}
|
|
2343
2372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
|
|
2344
2373
|
type: Component,
|
|
2345
|
-
args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n @if (uiConfig.label || props.label) {\n <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n <p>{{ uiConfig.label || props.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <input\n [id]=\"resolvedId\"\n [attr.name]=\"resolvedName\"\n [type]=\"resolvedMode\"\n [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n [attr.aria-invalid]=\"showError || null\"\n [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n [disabled]=\"isDisabled\"\n [attr.min]=\"props.min || null\"\n [attr.max]=\"props.max || null\"\n [attr.step]=\"props.step || null\"\n [value]=\"value ?? ''\"\n [ngClass]=\"inputClasses\"\n (input)=\"handleInput(($any($event.target)).value)\"\n (blur)=\"handleBlur()\"\n />\n\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n }\n </div>\n } @else {\n @if (errorMessage != null) {\n <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n }\n }\n }\n</div>\n" }]
|
|
2374
|
+
args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n @if (uiConfig.label || props.label) {\n <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n <p>{{ uiConfig.label || props.label }}</p>\n @if (isRequired()) {\n <span class=\"text-red-500\">*</span>\n }\n </label>\n }\n\n <input\n #dateInput\n [id]=\"resolvedId\"\n [attr.name]=\"resolvedName\"\n [type]=\"resolvedMode\"\n [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n [attr.aria-invalid]=\"showError || null\"\n [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n [disabled]=\"isDisabled\"\n [attr.min]=\"props.min || null\"\n [attr.max]=\"props.max || null\"\n [attr.step]=\"props.step || null\"\n [value]=\"value ?? ''\"\n [ngClass]=\"inputClasses\"\n class=\"cursor-pointer\"\n (click)=\"dateInput.showPicker?.()\"\n (input)=\"handleInput(($any($event.target)).value)\"\n (blur)=\"handleBlur()\"\n />\n\n @if (showError) {\n @if (props.showAllErrors) {\n <div class=\"flex flex-col gap-y-1\">\n @for (error of errorMessages; track $index) {\n <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n }\n </div>\n } @else {\n @if (errorMessage != null) {\n <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n }\n }\n }\n</div>\n" }]
|
|
2346
2375
|
}], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
|
|
2347
2376
|
type: Optional
|
|
2348
2377
|
}, {
|
|
@@ -7464,6 +7493,12 @@ class CalendarViewComponent {
|
|
|
7464
7493
|
this.setFocusDay(new Date(value));
|
|
7465
7494
|
}
|
|
7466
7495
|
}
|
|
7496
|
+
/** Handles the mn-lib-datetime ngModel change. */
|
|
7497
|
+
onDateStringChange(value) {
|
|
7498
|
+
if (value) {
|
|
7499
|
+
this.setFocusDay(new Date(value));
|
|
7500
|
+
}
|
|
7501
|
+
}
|
|
7467
7502
|
/** Handles a day click from the month view — switches to day view. */
|
|
7468
7503
|
onMonthDayClick(date) {
|
|
7469
7504
|
this.currentView = CalendarView.DAY;
|
|
@@ -7508,7 +7543,7 @@ class CalendarViewComponent {
|
|
|
7508
7543
|
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 });
|
|
7509
7544
|
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: [
|
|
7510
7545
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
7511
|
-
], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n <div class=\"calendar-toolbar\">\n <div class=\"toolbar-left\">\n <
|
|
7546
|
+
], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n <div class=\"calendar-toolbar\">\n <div class=\"toolbar-left\">\n <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n <div class=\"date-nav\">\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=\"view-switcher\" 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=\"toolbar-right\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">\n {{ btn.label }}\n </button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (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"] }, { 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
7512
7547
|
}
|
|
7513
7548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
|
|
7514
7549
|
type: Component,
|
|
@@ -7518,10 +7553,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
7518
7553
|
CalendarWeekComponent,
|
|
7519
7554
|
CalendarDayComponent,
|
|
7520
7555
|
UpcomingEventsComponent,
|
|
7521
|
-
MnButton
|
|
7556
|
+
MnButton,
|
|
7557
|
+
MnDatetime,
|
|
7558
|
+
FormsModule
|
|
7522
7559
|
], providers: [
|
|
7523
7560
|
provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
|
|
7524
|
-
], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n <div class=\"calendar-toolbar\">\n <div class=\"toolbar-left\">\n <
|
|
7561
|
+
], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n <div class=\"calendar-toolbar\">\n <div class=\"toolbar-left\">\n <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n <div class=\"date-nav\">\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=\"view-switcher\" 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=\"toolbar-right\">\n @for (btn of buttons; track btn.label) {\n <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">\n {{ btn.label }}\n </button>\n }\n @if (showButton) {\n <button mnButton [data]=\"{}\" (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"] }]
|
|
7525
7562
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7526
7563
|
type: Optional
|
|
7527
7564
|
}, {
|