@rivinia/modal 0.6.1 → 1.0.1

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/LICENSE +21 -0
  3. package/README.md +40 -573
  4. package/fesm2022/rivinia-modal-ui.mjs +21 -219
  5. package/fesm2022/rivinia-modal-ui.mjs.map +1 -1
  6. package/fesm2022/rivinia-modal.mjs +3 -3
  7. package/fesm2022/rivinia-modal.mjs.map +1 -1
  8. package/package.json +13 -1
  9. package/types/rivinia-modal.d.ts +0 -8
package/fesm2022/rivinia-modal-ui.mjs CHANGED
@@ -42,7 +42,7 @@ var RiviniaModalScrollLock = class RiviniaModalScrollLock {
42
42
  }
43
43
  static ɵfac = i0.ɵɵngDeclareFactory({
44
44
  minVersion: "12.0.0",
45
- version: "22.2.2",
45
+ version: "22.2.3",
46
46
  ngImport: i0,
47
47
  type: RiviniaModalScrollLock,
48
48
  deps: [],
@@ -50,14 +50,14 @@ var RiviniaModalScrollLock = class RiviniaModalScrollLock {
50
50
  });
51
51
  static ɵprov = i0.ɵɵngDeclareService({
52
52
  minVersion: "22.0.0",
53
- version: "22.2.2",
53
+ version: "22.2.3",
54
54
  ngImport: i0,
55
55
  type: RiviniaModalScrollLock
56
56
  });
57
57
  };
58
58
  i0.ɵɵngDeclareClassMetadata({
59
59
  minVersion: "12.0.0",
60
- version: "22.2.2",
60
+ version: "22.2.3",
61
61
  ngImport: i0,
62
62
  type: RiviniaModalScrollLock,
63
63
  decorators: [{ type: Service }]
@@ -66,7 +66,7 @@ const EXIT_FALLBACK_MS = 200;
66
66
  var RvModalHeader = class RvModalHeader {
67
67
  static ɵfac = i0.ɵɵngDeclareFactory({
68
68
  minVersion: "12.0.0",
69
- version: "22.2.2",
69
+ version: "22.2.3",
70
70
  ngImport: i0,
71
71
  type: RvModalHeader,
72
72
  deps: [],
@@ -74,7 +74,7 @@ var RvModalHeader = class RvModalHeader {
74
74
  });
75
75
  static ɵdir = i0.ɵɵngDeclareDirective({
76
76
  minVersion: "14.0.0",
77
- version: "22.2.2",
77
+ version: "22.2.3",
78
78
  type: RvModalHeader,
79
79
  isStandalone: true,
80
80
  selector: "[rvModalHeader]",
@@ -83,7 +83,7 @@ var RvModalHeader = class RvModalHeader {
83
83
  };
84
84
  i0.ɵɵngDeclareClassMetadata({
85
85
  minVersion: "12.0.0",
86
- version: "22.2.2",
86
+ version: "22.2.3",
87
87
  ngImport: i0,
88
88
  type: RvModalHeader,
89
89
  decorators: [{
@@ -97,7 +97,7 @@ i0.ɵɵngDeclareClassMetadata({
97
97
  var RvModalFooter = class RvModalFooter {
98
98
  static ɵfac = i0.ɵɵngDeclareFactory({
99
99
  minVersion: "12.0.0",
100
- version: "22.2.2",
100
+ version: "22.2.3",
101
101
  ngImport: i0,
102
102
  type: RvModalFooter,
103
103
  deps: [],
@@ -105,7 +105,7 @@ var RvModalFooter = class RvModalFooter {
105
105
  });
106
106
  static ɵdir = i0.ɵɵngDeclareDirective({
107
107
  minVersion: "14.0.0",
108
- version: "22.2.2",
108
+ version: "22.2.3",
109
109
  type: RvModalFooter,
110
110
  isStandalone: true,
111
111
  selector: "[rvModalFooter]",
@@ -114,7 +114,7 @@ var RvModalFooter = class RvModalFooter {
114
114
  };
115
115
  i0.ɵɵngDeclareClassMetadata({
116
116
  minVersion: "12.0.0",
117
- version: "22.2.2",
117
+ version: "22.2.3",
118
118
  ngImport: i0,
119
119
  type: RvModalFooter,
120
120
  decorators: [{
@@ -160,6 +160,8 @@ var RiviniaModalDialog = class RiviniaModalDialog {
160
160
  ngOnDestroy() {
161
161
  this.stopResizeWatch();
162
162
  if (this.settleTimer !== null) clearTimeout(this.settleTimer);
163
+ if (this.exitTimer !== null) clearTimeout(this.exitTimer);
164
+ if (this.phase() !== "closed") this.finalize(this.dialog()?.nativeElement ?? null);
163
165
  }
164
166
  showCloseButton = input(true, ...ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []);
165
167
  managed = input(false, ...ngDevMode ? [{ debugName: "managed" }] : /* istanbul ignore next */ []);
@@ -351,7 +353,7 @@ var RiviniaModalDialog = class RiviniaModalDialog {
351
353
  }
352
354
  static ɵfac = i0.ɵɵngDeclareFactory({
353
355
  minVersion: "12.0.0",
354
- version: "22.2.2",
356
+ version: "22.2.3",
355
357
  ngImport: i0,
356
358
  type: RiviniaModalDialog,
357
359
  deps: [],
@@ -359,7 +361,7 @@ var RiviniaModalDialog = class RiviniaModalDialog {
359
361
  });
360
362
  static ɵcmp = i0.ɵɵngDeclareComponent({
361
363
  minVersion: "17.0.0",
362
- version: "22.2.2",
364
+ version: "22.2.3",
363
365
  type: RiviniaModalDialog,
364
366
  isStandalone: true,
365
367
  selector: "rv-modal-dialog",
@@ -478,67 +480,14 @@ var RiviniaModalDialog = class RiviniaModalDialog {
478
480
  isSignal: true
479
481
  }],
480
482
  ngImport: i0,
481
- template: `
482
- <dialog
483
- #dialog
484
- tabindex="-1"
485
- class="rv-modal"
486
- [attr.data-size]="size()"
487
- [attr.data-position]="position()"
488
- [attr.data-animation]="animation()"
489
- [attr.data-state]="state()"
490
- [attr.data-resizing]="resizing()"
491
- [attr.aria-label]="computedLabel()"
492
- [attr.aria-labelledby]="title() && !ariaLabel() ? titleId : null"
493
- [attr.aria-describedby]="description() ? descriptionId : null"
494
- (cancel)="onCancel($event)"
495
- (click)="onBackdropClick($event)"
496
- (keydown)="onKeydown($event)"
497
- >
498
- @if (hasCustomHeader()) {
499
- <div class="rv-modal-header rv-modal-header-custom">
500
- <ng-content select="[rv-modal-header]"></ng-content>
501
- </div>
502
- } @else if (title() || showCloseButton()) {
503
- <div class="rv-modal-header">
504
- <div class="rv-modal-heading">
505
- @if (title()) {
506
- <h2 class="rv-modal-title" [id]="titleId">{{ title() }}</h2>
507
- }
508
- @if (description()) {
509
- <p class="rv-modal-description" [id]="descriptionId">{{ description() }}</p>
510
- }
511
- </div>
512
- @if (showCloseButton()) {
513
- <button
514
- type="button"
515
- class="rv-modal-close"
516
- (click)="onCloseButton()"
517
- aria-label="Close dialog"
518
- >
519
- <span aria-hidden="true">&times;</span>
520
- </button>
521
- }
522
- </div>
523
- }
524
- <div class="rv-modal-body">
525
- <ng-content></ng-content>
526
- </div>
527
- @if (hasCustomFooter()) {
528
- <div class="rv-modal-footer">
529
- <ng-content select="[rv-modal-footer]"></ng-content>
530
- </div>
531
- }
532
- </dialog>
533
- `,
534
- isInline: true,
483
+ template: "<dialog\n #dialog\n tabindex=\"-1\"\n class=\"rv-modal\"\n [attr.data-size]=\"size()\"\n [attr.data-position]=\"position()\"\n [attr.data-animation]=\"animation()\"\n [attr.data-state]=\"state()\"\n [attr.data-resizing]=\"resizing()\"\n [attr.aria-label]=\"computedLabel()\"\n [attr.aria-labelledby]=\"title() && !ariaLabel() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descriptionId : null\"\n (cancel)=\"onCancel($event)\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (hasCustomHeader()) {\n <div class=\"rv-modal-header rv-modal-header-custom\">\n <ng-content select=\"[rv-modal-header]\"></ng-content>\n </div>\n } @else if (title() || showCloseButton()) {\n <div class=\"rv-modal-header\">\n <div class=\"rv-modal-heading\">\n @if (title()) {\n <h2 class=\"rv-modal-title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n @if (description()) {\n <p class=\"rv-modal-description\" [id]=\"descriptionId\">{{ description() }}</p>\n }\n </div>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"rv-modal-close\"\n (click)=\"onCloseButton()\"\n aria-label=\"Close dialog\"\n >\n <span aria-hidden=\"true\">&times;</span>\n </button>\n }\n </div>\n }\n <div class=\"rv-modal-body\">\n <ng-content></ng-content>\n </div>\n @if (hasCustomFooter()) {\n <div class=\"rv-modal-footer\">\n <ng-content select=\"[rv-modal-footer]\"></ng-content>\n </div>\n }\n</dialog>\n",
535
484
  styles: [".rv-modal{color-scheme:light dark;--rv-modal-pad: 20px;--rv-modal-gap: 12px;--rv-modal-width-sm: clamp(16rem, 40vw, 24rem);--rv-modal-width-md: clamp(20rem, 55vw, 32rem);--rv-modal-width-lg: clamp(24rem, 70vw, 48rem);--rv-modal-width-xl: clamp(28rem, 85vw, 64rem);--rv-modal-max-height: min(86dvh, 100%);--rv-modal-duration: .15s;--rv-modal-duration-in: var(--rv-modal-duration);--rv-modal-duration-out: .12s;--rv-modal-easing: ease-out;--rv-modal-easing-in: var(--rv-modal-easing);--rv-modal-easing-out: ease-in;--rv-modal-radius-sheet: 1.25rem;--rv-modal-width-panel: 24rem;padding:0;border:1px solid var(--rv-modal-border, var(--rv-border, #e0e0e0));border-radius:var(--rv-modal-radius, var(--rv-radius, 12px));background:var(--rv-modal-bg, var(--rv-bg, #ffffff));color:var(--rv-modal-fg, var(--rv-fg, #111111));box-shadow:var(--rv-modal-shadow, var(--rv-shadow, 0 24px 64px rgba(0, 0, 0, .28)));max-height:var(--rv-modal-max-height);width:var(--rv-modal-width-md);max-width:calc(100dvw - 2rem);transition:width var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),height var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),max-height var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),inset var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),margin var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out)}.rv-modal[data-resizing=true]{transition:none!important}.rv-modal-loading{display:flex;align-items:center;justify-content:center;gap:var(--rv-modal-loading-gap, .625rem);padding:var(--rv-modal-loading-padding, 2rem);min-height:var(--rv-modal-loading-min-height, 6rem);color:var(--rv-modal-muted, var(--rv-muted, #555555));font-size:var(--rv-modal-loading-size, .875rem)}.rv-modal-spinner{inline-size:var(--rv-modal-spinner-size, 1.125rem);block-size:var(--rv-modal-spinner-size, 1.125rem);border:2px solid currentColor;border-block-start-color:transparent;border-radius:50%;animation:rv-modal-spin var(--rv-modal-spinner-duration, .7s) linear infinite}@keyframes rv-modal-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.rv-modal-spinner{animation:none}}.rv-modal::backdrop{background:var(--rv-modal-backdrop, rgba(0, 0, 0, .5))}.rv-modal[data-size=sm]{width:var(--rv-modal-width-sm)}.rv-modal[data-size=lg]{width:var(--rv-modal-width-lg)}.rv-modal[data-size=xl]{width:var(--rv-modal-width-xl)}.rv-modal[data-size=full]{width:calc(100dvw - 2rem)}.rv-modal[data-size=auto]{width:auto}.rv-modal[data-position=top]{margin-block-start:8dvh}.rv-modal[data-position=bottom]{margin-block-start:auto;margin-block-end:8dvh}.rv-modal[data-position=top-start],.rv-modal[data-position=center-start]{margin-inline-start:1rem;margin-inline-end:auto}.rv-modal[data-position=top-end],.rv-modal[data-position=center-end]{margin-inline-start:auto;margin-inline-end:1rem}.rv-modal[data-position=bottom-start]{margin-block-start:auto;margin-inline-start:1rem}.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-inline-end:1rem}.rv-modal[data-position=fullscreen]{inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;border-radius:0}.rv-modal[data-position=side-start],.rv-modal[data-position=side-end]{height:100dvh;max-height:none;width:var(--rv-modal-width-panel);margin-block:0}.rv-modal[data-position=side-start]{margin-inline-start:0;margin-inline-end:auto;border-start-start-radius:0;border-end-start-radius:0}.rv-modal[data-position=side-end]{margin-inline-start:auto;margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}@media(max-width:640px){.rv-modal[data-position=center],.rv-modal[data-position=top],.rv-modal[data-position=bottom],.rv-modal[data-position=bottom-start],.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-block-end:0;margin-inline:0;width:100dvw;max-width:none;border-end-end-radius:0;border-end-start-radius:0;border-start-start-radius:var(--rv-modal-radius-sheet);border-start-end-radius:var(--rv-modal-radius-sheet)}.rv-modal[data-position=center][data-state=open],.rv-modal[data-position=top][data-state=open],.rv-modal[data-position=bottom][data-state=open],.rv-modal[data-position=bottom-start][data-state=open],.rv-modal[data-position=bottom-end][data-state=open]{animation-name:rv-modal-in-bottom}}.rv-modal[data-animation]:not([data-animation=none])[data-state=open]{animation:var(--rv-modal-animation-in, rv-modal-in) var(--rv-modal-duration-in) var(--rv-modal-easing-in)}.rv-modal[data-animation=scale][data-state=open]{--rv-modal-animation-in: rv-modal-in-scale}.rv-modal[data-animation=slide-top][data-state=open]{--rv-modal-animation-in: rv-modal-in-top}.rv-modal[data-animation=slide-bottom][data-state=open]{--rv-modal-animation-in: rv-modal-in-bottom}.rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-animation=slide-end][data-state=open],[dir=rtl] .rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-end}[dir=rtl] .rv-modal[data-animation=slide-end][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-state=closing]{animation:rv-modal-out var(--rv-modal-duration-out) var(--rv-modal-easing-out) forwards}@keyframes rv-modal-in{0%{opacity:0}}@keyframes rv-modal-in-scale{0%{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes rv-modal-in-top{0%{opacity:0;transform:translateY(-24px)}}@keyframes rv-modal-in-bottom{0%{opacity:0;transform:translateY(24px)}}@keyframes rv-modal-in-start{0%{opacity:0;transform:translate(-24px)}}@keyframes rv-modal-in-end{0%{opacity:0;transform:translate(24px)}}@keyframes rv-modal-out{to{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.rv-modal[data-animation]{animation:none}}.rv-modal-header{display:flex;align-items:flex-start;gap:var(--rv-modal-gap);padding:var(--rv-modal-pad) var(--rv-modal-pad) 0}.rv-modal-header-custom>:first-child{flex:1;min-width:0}.rv-modal-heading:empty{display:none}.rv-modal-title{margin:0;font-size:1.125rem;flex:1}.rv-modal-heading{flex:1;display:flex;flex-direction:column;gap:.25rem}.rv-modal-description{margin:0;font-size:.875rem;color:var(--rv-modal-muted, var(--rv-muted, #555555))}.rv-modal-close{margin-inline-start:auto;flex:none;border:1px solid var(--rv-modal-border, var(--rv-border, #e0e0e0));border-radius:.5rem;background:transparent;color:inherit;font-size:1.25rem;line-height:1;padding:.25rem .625rem;cursor:pointer}.rv-modal-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.rv-modal-body{padding:var(--rv-modal-pad);overflow:auto;max-height:inherit}.rv-modal-footer{display:flex;gap:var(--rv-modal-gap);justify-content:flex-end;padding:0 var(--rv-modal-pad) var(--rv-modal-pad)}.rv-modal-footer:empty{display:none}\n"],
536
485
  encapsulation: i0.ViewEncapsulation.None
537
486
  });
538
487
  };
539
488
  i0.ɵɵngDeclareClassMetadata({
540
489
  minVersion: "12.0.0",
541
- version: "22.2.2",
490
+ version: "22.2.3",
542
491
  ngImport: i0,
543
492
  type: RiviniaModalDialog,
544
493
  decorators: [{
@@ -546,59 +495,7 @@ i0.ɵɵngDeclareClassMetadata({
546
495
  args: [{
547
496
  selector: "rv-modal-dialog",
548
497
  encapsulation: ViewEncapsulation.None,
549
- template: `
550
- <dialog
551
- #dialog
552
- tabindex="-1"
553
- class="rv-modal"
554
- [attr.data-size]="size()"
555
- [attr.data-position]="position()"
556
- [attr.data-animation]="animation()"
557
- [attr.data-state]="state()"
558
- [attr.data-resizing]="resizing()"
559
- [attr.aria-label]="computedLabel()"
560
- [attr.aria-labelledby]="title() && !ariaLabel() ? titleId : null"
561
- [attr.aria-describedby]="description() ? descriptionId : null"
562
- (cancel)="onCancel($event)"
563
- (click)="onBackdropClick($event)"
564
- (keydown)="onKeydown($event)"
565
- >
566
- @if (hasCustomHeader()) {
567
- <div class="rv-modal-header rv-modal-header-custom">
568
- <ng-content select="[rv-modal-header]"></ng-content>
569
- </div>
570
- } @else if (title() || showCloseButton()) {
571
- <div class="rv-modal-header">
572
- <div class="rv-modal-heading">
573
- @if (title()) {
574
- <h2 class="rv-modal-title" [id]="titleId">{{ title() }}</h2>
575
- }
576
- @if (description()) {
577
- <p class="rv-modal-description" [id]="descriptionId">{{ description() }}</p>
578
- }
579
- </div>
580
- @if (showCloseButton()) {
581
- <button
582
- type="button"
583
- class="rv-modal-close"
584
- (click)="onCloseButton()"
585
- aria-label="Close dialog"
586
- >
587
- <span aria-hidden="true">&times;</span>
588
- </button>
589
- }
590
- </div>
591
- }
592
- <div class="rv-modal-body">
593
- <ng-content></ng-content>
594
- </div>
595
- @if (hasCustomFooter()) {
596
- <div class="rv-modal-footer">
597
- <ng-content select="[rv-modal-footer]"></ng-content>
598
- </div>
599
- }
600
- </dialog>
601
- `,
498
+ template: "<dialog\n #dialog\n tabindex=\"-1\"\n class=\"rv-modal\"\n [attr.data-size]=\"size()\"\n [attr.data-position]=\"position()\"\n [attr.data-animation]=\"animation()\"\n [attr.data-state]=\"state()\"\n [attr.data-resizing]=\"resizing()\"\n [attr.aria-label]=\"computedLabel()\"\n [attr.aria-labelledby]=\"title() && !ariaLabel() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descriptionId : null\"\n (cancel)=\"onCancel($event)\"\n (click)=\"onBackdropClick($event)\"\n (keydown)=\"onKeydown($event)\"\n>\n @if (hasCustomHeader()) {\n <div class=\"rv-modal-header rv-modal-header-custom\">\n <ng-content select=\"[rv-modal-header]\"></ng-content>\n </div>\n } @else if (title() || showCloseButton()) {\n <div class=\"rv-modal-header\">\n <div class=\"rv-modal-heading\">\n @if (title()) {\n <h2 class=\"rv-modal-title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n @if (description()) {\n <p class=\"rv-modal-description\" [id]=\"descriptionId\">{{ description() }}</p>\n }\n </div>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"rv-modal-close\"\n (click)=\"onCloseButton()\"\n aria-label=\"Close dialog\"\n >\n <span aria-hidden=\"true\">&times;</span>\n </button>\n }\n </div>\n }\n <div class=\"rv-modal-body\">\n <ng-content></ng-content>\n </div>\n @if (hasCustomFooter()) {\n <div class=\"rv-modal-footer\">\n <ng-content select=\"[rv-modal-footer]\"></ng-content>\n </div>\n }\n</dialog>\n",
602
499
  styles: [".rv-modal{color-scheme:light dark;--rv-modal-pad: 20px;--rv-modal-gap: 12px;--rv-modal-width-sm: clamp(16rem, 40vw, 24rem);--rv-modal-width-md: clamp(20rem, 55vw, 32rem);--rv-modal-width-lg: clamp(24rem, 70vw, 48rem);--rv-modal-width-xl: clamp(28rem, 85vw, 64rem);--rv-modal-max-height: min(86dvh, 100%);--rv-modal-duration: .15s;--rv-modal-duration-in: var(--rv-modal-duration);--rv-modal-duration-out: .12s;--rv-modal-easing: ease-out;--rv-modal-easing-in: var(--rv-modal-easing);--rv-modal-easing-out: ease-in;--rv-modal-radius-sheet: 1.25rem;--rv-modal-width-panel: 24rem;padding:0;border:1px solid var(--rv-modal-border, var(--rv-border, #e0e0e0));border-radius:var(--rv-modal-radius, var(--rv-radius, 12px));background:var(--rv-modal-bg, var(--rv-bg, #ffffff));color:var(--rv-modal-fg, var(--rv-fg, #111111));box-shadow:var(--rv-modal-shadow, var(--rv-shadow, 0 24px 64px rgba(0, 0, 0, .28)));max-height:var(--rv-modal-max-height);width:var(--rv-modal-width-md);max-width:calc(100dvw - 2rem);transition:width var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),height var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),max-height var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),inset var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out),margin var(--rv-modal-size-duration, .18s) var(--rv-modal-easing, ease-out)}.rv-modal[data-resizing=true]{transition:none!important}.rv-modal-loading{display:flex;align-items:center;justify-content:center;gap:var(--rv-modal-loading-gap, .625rem);padding:var(--rv-modal-loading-padding, 2rem);min-height:var(--rv-modal-loading-min-height, 6rem);color:var(--rv-modal-muted, var(--rv-muted, #555555));font-size:var(--rv-modal-loading-size, .875rem)}.rv-modal-spinner{inline-size:var(--rv-modal-spinner-size, 1.125rem);block-size:var(--rv-modal-spinner-size, 1.125rem);border:2px solid currentColor;border-block-start-color:transparent;border-radius:50%;animation:rv-modal-spin var(--rv-modal-spinner-duration, .7s) linear infinite}@keyframes rv-modal-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.rv-modal-spinner{animation:none}}.rv-modal::backdrop{background:var(--rv-modal-backdrop, rgba(0, 0, 0, .5))}.rv-modal[data-size=sm]{width:var(--rv-modal-width-sm)}.rv-modal[data-size=lg]{width:var(--rv-modal-width-lg)}.rv-modal[data-size=xl]{width:var(--rv-modal-width-xl)}.rv-modal[data-size=full]{width:calc(100dvw - 2rem)}.rv-modal[data-size=auto]{width:auto}.rv-modal[data-position=top]{margin-block-start:8dvh}.rv-modal[data-position=bottom]{margin-block-start:auto;margin-block-end:8dvh}.rv-modal[data-position=top-start],.rv-modal[data-position=center-start]{margin-inline-start:1rem;margin-inline-end:auto}.rv-modal[data-position=top-end],.rv-modal[data-position=center-end]{margin-inline-start:auto;margin-inline-end:1rem}.rv-modal[data-position=bottom-start]{margin-block-start:auto;margin-inline-start:1rem}.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-inline-end:1rem}.rv-modal[data-position=fullscreen]{inset:0;width:100dvw;height:100dvh;max-width:none;max-height:none;border-radius:0}.rv-modal[data-position=side-start],.rv-modal[data-position=side-end]{height:100dvh;max-height:none;width:var(--rv-modal-width-panel);margin-block:0}.rv-modal[data-position=side-start]{margin-inline-start:0;margin-inline-end:auto;border-start-start-radius:0;border-end-start-radius:0}.rv-modal[data-position=side-end]{margin-inline-start:auto;margin-inline-end:0;border-start-end-radius:0;border-end-end-radius:0}@media(max-width:640px){.rv-modal[data-position=center],.rv-modal[data-position=top],.rv-modal[data-position=bottom],.rv-modal[data-position=bottom-start],.rv-modal[data-position=bottom-end]{margin-block-start:auto;margin-block-end:0;margin-inline:0;width:100dvw;max-width:none;border-end-end-radius:0;border-end-start-radius:0;border-start-start-radius:var(--rv-modal-radius-sheet);border-start-end-radius:var(--rv-modal-radius-sheet)}.rv-modal[data-position=center][data-state=open],.rv-modal[data-position=top][data-state=open],.rv-modal[data-position=bottom][data-state=open],.rv-modal[data-position=bottom-start][data-state=open],.rv-modal[data-position=bottom-end][data-state=open]{animation-name:rv-modal-in-bottom}}.rv-modal[data-animation]:not([data-animation=none])[data-state=open]{animation:var(--rv-modal-animation-in, rv-modal-in) var(--rv-modal-duration-in) var(--rv-modal-easing-in)}.rv-modal[data-animation=scale][data-state=open]{--rv-modal-animation-in: rv-modal-in-scale}.rv-modal[data-animation=slide-top][data-state=open]{--rv-modal-animation-in: rv-modal-in-top}.rv-modal[data-animation=slide-bottom][data-state=open]{--rv-modal-animation-in: rv-modal-in-bottom}.rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-animation=slide-end][data-state=open],[dir=rtl] .rv-modal[data-animation=slide-start][data-state=open]{--rv-modal-animation-in: rv-modal-in-end}[dir=rtl] .rv-modal[data-animation=slide-end][data-state=open]{--rv-modal-animation-in: rv-modal-in-start}.rv-modal[data-state=closing]{animation:rv-modal-out var(--rv-modal-duration-out) var(--rv-modal-easing-out) forwards}@keyframes rv-modal-in{0%{opacity:0}}@keyframes rv-modal-in-scale{0%{opacity:0;transform:translateY(8px) scale(.98)}}@keyframes rv-modal-in-top{0%{opacity:0;transform:translateY(-24px)}}@keyframes rv-modal-in-bottom{0%{opacity:0;transform:translateY(24px)}}@keyframes rv-modal-in-start{0%{opacity:0;transform:translate(-24px)}}@keyframes rv-modal-in-end{0%{opacity:0;transform:translate(24px)}}@keyframes rv-modal-out{to{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.rv-modal[data-animation]{animation:none}}.rv-modal-header{display:flex;align-items:flex-start;gap:var(--rv-modal-gap);padding:var(--rv-modal-pad) var(--rv-modal-pad) 0}.rv-modal-header-custom>:first-child{flex:1;min-width:0}.rv-modal-heading:empty{display:none}.rv-modal-title{margin:0;font-size:1.125rem;flex:1}.rv-modal-heading{flex:1;display:flex;flex-direction:column;gap:.25rem}.rv-modal-description{margin:0;font-size:.875rem;color:var(--rv-modal-muted, var(--rv-muted, #555555))}.rv-modal-close{margin-inline-start:auto;flex:none;border:1px solid var(--rv-modal-border, var(--rv-border, #e0e0e0));border-radius:.5rem;background:transparent;color:inherit;font-size:1.25rem;line-height:1;padding:.25rem .625rem;cursor:pointer}.rv-modal-close:focus-visible{outline:2px solid currentColor;outline-offset:2px}.rv-modal-body{padding:var(--rv-modal-pad);overflow:auto;max-height:inherit}.rv-modal-footer{display:flex;gap:var(--rv-modal-gap);justify-content:flex-end;padding:0 var(--rv-modal-pad) var(--rv-modal-pad)}.rv-modal-footer:empty{display:none}\n"]
603
500
  }]
604
501
  }],
@@ -869,7 +766,7 @@ var RiviniaModalHost = class RiviniaModalHost {
869
766
  }
870
767
  static ɵfac = i0.ɵɵngDeclareFactory({
871
768
  minVersion: "12.0.0",
872
- version: "22.2.2",
769
+ version: "22.2.3",
873
770
  ngImport: i0,
874
771
  type: RiviniaModalHost,
875
772
  deps: [],
@@ -877,7 +774,7 @@ var RiviniaModalHost = class RiviniaModalHost {
877
774
  });
878
775
  static ɵcmp = i0.ɵɵngDeclareComponent({
879
776
  minVersion: "17.0.0",
880
- version: "22.2.2",
777
+ version: "22.2.3",
881
778
  type: RiviniaModalHost,
882
779
  isStandalone: true,
883
780
  selector: "rv-modal-host",
@@ -926,55 +823,7 @@ var RiviniaModalHost = class RiviniaModalHost {
926
823
  }
927
824
  },
928
825
  ngImport: i0,
929
- template: `
930
- @for (instance of visible(); track instance.id) {
931
- @if (isCovered(instance)) {
932
- <!--
933
- Hidden by a dialog above it that asked to cover the others. It stays
934
- in the manager — only the rendering is skipped, so it comes back when
935
- the cover closes.
936
- -->
937
- } @else {
938
- <rv-modal-dialog
939
- [open]="true"
940
- [managed]="true"
941
- [closing]="instance.status === 'closing'"
942
- [title]="titleOfInstance(instance)"
943
- [size]="sizeOf(instance)"
944
- [attr.data-caller]="callerName(instance)"
945
- [showCloseButton]="showCloseButton()"
946
- [closeOnEscape]="instance.dismiss.closeOnEscape ?? true"
947
- [backdrop]="instance.dismiss.backdrop ?? 'close'"
948
- (dismissRequested)="onIntent(instance.id, $event)"
949
- (exitDone)="onExitDone(instance.id)"
950
- >
951
- @if (isLoading(instance)) {
952
- <!--
953
- The data has not arrived yet. A loader says so; an empty dialog
954
- looks broken.
955
- -->
956
- <div class="rv-modal-loading" role="status" aria-live="polite">
957
- <span class="rv-modal-spinner" aria-hidden="true"></span>
958
- <span>{{ loadingLabel() }}</span>
959
- </div>
960
- } @else if (instance.content.kind === 'template') {
961
- <ng-container
962
- *ngTemplateOutlet="instance.content.template; context: templateContext(instance)"
963
- ></ng-container>
964
- } @else {
965
- <ng-container
966
- *ngComponentOutlet="
967
- instance.content.component;
968
- inputs: instance.content.inputs;
969
- injector: contextInjector(instance)
970
- "
971
- ></ng-container>
972
- }
973
- </rv-modal-dialog>
974
- }
975
- }
976
- `,
977
- isInline: true,
826
+ template: "@for (instance of visible(); track instance.id) {\n @if (isCovered(instance)) {\n <!--\n Hidden by a dialog above it that asked to cover the others. It stays\n in the manager — only the rendering is skipped, so it comes back when\n the cover closes.\n -->\n } @else {\n <rv-modal-dialog\n [open]=\"true\"\n [managed]=\"true\"\n [closing]=\"instance.status === 'closing'\"\n [title]=\"titleOfInstance(instance)\"\n [size]=\"sizeOf(instance)\"\n [attr.data-caller]=\"callerName(instance)\"\n [showCloseButton]=\"showCloseButton()\"\n [closeOnEscape]=\"instance.dismiss.closeOnEscape ?? true\"\n [backdrop]=\"instance.dismiss.backdrop ?? 'close'\"\n (dismissRequested)=\"onIntent(instance.id, $event)\"\n (exitDone)=\"onExitDone(instance.id)\"\n >\n @if (isLoading(instance)) {\n <!--\n The data has not arrived yet. A loader says so; an empty dialog\n looks broken.\n -->\n <div class=\"rv-modal-loading\" role=\"status\" aria-live=\"polite\">\n <span class=\"rv-modal-spinner\" aria-hidden=\"true\"></span>\n <span>{{ loadingLabel() }}</span>\n </div>\n } @else if (instance.content.kind === 'template') {\n <ng-container\n *ngTemplateOutlet=\"instance.content.template; context: templateContext(instance)\"\n ></ng-container>\n } @else {\n <ng-container\n *ngComponentOutlet=\"\n instance.content.component;\n inputs: instance.content.inputs;\n injector: contextInjector(instance)\n \"\n ></ng-container>\n }\n </rv-modal-dialog>\n }\n}\n",
978
827
  dependencies: [
979
828
  {
980
829
  kind: "component",
@@ -1032,7 +881,7 @@ var RiviniaModalHost = class RiviniaModalHost {
1032
881
  };
1033
882
  i0.ɵɵngDeclareClassMetadata({
1034
883
  minVersion: "12.0.0",
1035
- version: "22.2.2",
884
+ version: "22.2.3",
1036
885
  ngImport: i0,
1037
886
  type: RiviniaModalHost,
1038
887
  decorators: [{
@@ -1044,54 +893,7 @@ i0.ɵɵngDeclareClassMetadata({
1044
893
  NgComponentOutlet,
1045
894
  NgTemplateOutlet
1046
895
  ],
1047
- template: `
1048
- @for (instance of visible(); track instance.id) {
1049
- @if (isCovered(instance)) {
1050
- <!--
1051
- Hidden by a dialog above it that asked to cover the others. It stays
1052
- in the manager — only the rendering is skipped, so it comes back when
1053
- the cover closes.
1054
- -->
1055
- } @else {
1056
- <rv-modal-dialog
1057
- [open]="true"
1058
- [managed]="true"
1059
- [closing]="instance.status === 'closing'"
1060
- [title]="titleOfInstance(instance)"
1061
- [size]="sizeOf(instance)"
1062
- [attr.data-caller]="callerName(instance)"
1063
- [showCloseButton]="showCloseButton()"
1064
- [closeOnEscape]="instance.dismiss.closeOnEscape ?? true"
1065
- [backdrop]="instance.dismiss.backdrop ?? 'close'"
1066
- (dismissRequested)="onIntent(instance.id, $event)"
1067
- (exitDone)="onExitDone(instance.id)"
1068
- >
1069
- @if (isLoading(instance)) {
1070
- <!--
1071
- The data has not arrived yet. A loader says so; an empty dialog
1072
- looks broken.
1073
- -->
1074
- <div class="rv-modal-loading" role="status" aria-live="polite">
1075
- <span class="rv-modal-spinner" aria-hidden="true"></span>
1076
- <span>{{ loadingLabel() }}</span>
1077
- </div>
1078
- } @else if (instance.content.kind === 'template') {
1079
- <ng-container
1080
- *ngTemplateOutlet="instance.content.template; context: templateContext(instance)"
1081
- ></ng-container>
1082
- } @else {
1083
- <ng-container
1084
- *ngComponentOutlet="
1085
- instance.content.component;
1086
- inputs: instance.content.inputs;
1087
- injector: contextInjector(instance)
1088
- "
1089
- ></ng-container>
1090
- }
1091
- </rv-modal-dialog>
1092
- }
1093
- }
1094
- `
896
+ template: "@for (instance of visible(); track instance.id) {\n @if (isCovered(instance)) {\n <!--\n Hidden by a dialog above it that asked to cover the others. It stays\n in the manager — only the rendering is skipped, so it comes back when\n the cover closes.\n -->\n } @else {\n <rv-modal-dialog\n [open]=\"true\"\n [managed]=\"true\"\n [closing]=\"instance.status === 'closing'\"\n [title]=\"titleOfInstance(instance)\"\n [size]=\"sizeOf(instance)\"\n [attr.data-caller]=\"callerName(instance)\"\n [showCloseButton]=\"showCloseButton()\"\n [closeOnEscape]=\"instance.dismiss.closeOnEscape ?? true\"\n [backdrop]=\"instance.dismiss.backdrop ?? 'close'\"\n (dismissRequested)=\"onIntent(instance.id, $event)\"\n (exitDone)=\"onExitDone(instance.id)\"\n >\n @if (isLoading(instance)) {\n <!--\n The data has not arrived yet. A loader says so; an empty dialog\n looks broken.\n -->\n <div class=\"rv-modal-loading\" role=\"status\" aria-live=\"polite\">\n <span class=\"rv-modal-spinner\" aria-hidden=\"true\"></span>\n <span>{{ loadingLabel() }}</span>\n </div>\n } @else if (instance.content.kind === 'template') {\n <ng-container\n *ngTemplateOutlet=\"instance.content.template; context: templateContext(instance)\"\n ></ng-container>\n } @else {\n <ng-container\n *ngComponentOutlet=\"\n instance.content.component;\n inputs: instance.content.inputs;\n injector: contextInjector(instance)\n \"\n ></ng-container>\n }\n </rv-modal-dialog>\n }\n}\n"
1095
897
  }]
1096
898
  }],
1097
899
  propDecorators: {