feat(ui): non-closeable modal support (#236)

* feat(ui): non-closeable modal support * feat: changes from PR
e-gov · Oct 29, 2024 · dc38053 · dc38053
1 parent b6ca21e
commit dc38053
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts b/libs/ui/src/lib/confirmation-modal/confirmation-modal.component.stories.ts
@@ -20,6 +20,7 @@ export default {
     confirmButtonText: 'Confirm',
     cancelButtonText: 'Cancel',
     open: false,
+    closeable: true,
   },
 } as Meta<ConfirmationModalComponent>;
 
@@ -38,7 +39,7 @@ export const Default = {
           <br><p>All will be lost!!!</p>
         </cvi-ng-confirmation-modal>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="open" dataAttribute="test-button">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="open" [closeable]="closeable" dataAttribute="test-button">Open modal</cvi-ng-button>
     `,
   }),
 };

diff --git a/libs/ui/src/lib/modal/modal.component.html b/libs/ui/src/lib/modal/modal.component.html
@@ -1,7 +1,7 @@
 <div class="cvi-modal__dialog" role="dialog" [attr.aria-label]="title" cdkTrapFocus>
-  <button class="cvi-modal__close" (click)="closeModal()" dataAttribute="close-modal-button" aria-label="Close">
+  <button *ngIf="closeable" class="cvi-modal__close" (click)="closeModal()" dataAttribute="close-modal-button" aria-label="Close">
     <cvi-ng-icon [name]="'close'" [height]="14"></cvi-ng-icon>
   </button>
   <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ $implicit: this, title }"></ng-template>
 </div>
-<div class="cvi-modal__backdrop" dataAttribute="modal-backdrop" (click)="closeModal()"></div>
+<div class="cvi-modal__backdrop" dataAttribute="modal-backdrop" (click)="closeable && closeModal()"></div>
diff --git a/libs/ui/src/lib/modal/modal.component.stories.ts b/libs/ui/src/lib/modal/modal.component.stories.ts
@@ -4,6 +4,9 @@ import { ModalComponent } from './modal.component';
 export default {
   title: 'Angular/Modal/Modal',
   component: ModalComponent,
+  args: {
+    closeable: true,
+  },
 } as Meta<ModalComponent>;
 
 export const Default = {
@@ -15,7 +18,7 @@ export const Default = {
         <h1>{{ testModalTitle }}</h1>
         <p dataAttribute="test-content">Modal content</p>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" modalTitle="Some title" dataAttribute="test-button">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" modalTitle="Some title" [closeable]="closeable" dataAttribute="test-button">Open modal</cvi-ng-button>
     `,
   }),
 };

diff --git a/libs/ui/src/lib/modal/modal.component.ts b/libs/ui/src/lib/modal/modal.component.ts
@@ -17,6 +17,7 @@ export class ModalComponent implements OnDestroy {
   templateRef!: TemplateRef<any>;
 
   title!: string;
+  closeable = true;
 
   @Output() closed = new EventEmitter();
 

diff --git a/libs/ui/src/lib/modal/modal.directive.stories.ts b/libs/ui/src/lib/modal/modal.directive.stories.ts
@@ -20,6 +20,7 @@ export default {
   args: {
     modalTitle: 'Hey, I am Modal, how are you?',
     modalOpen: false,
+    closeable: true,
   },
 } as Meta;
 
@@ -32,7 +33,7 @@ export const Default = {
         <h2 *ngIf="testModalTitle">{{ testModalTitle }}</h2>
         <p>Modal content</p>
       </ng-template>
-      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="modalOpen">Open modal</cvi-ng-button>
+      <cvi-ng-button [cviNgModal]="modal" [modalTitle]="modalTitle" [open]="modalOpen" [closeable]="closeable">Open modal</cvi-ng-button>
     `,
   }),
 };
@@ -64,7 +65,7 @@ export const ModalOpenWithoutButton = {
       <ng-template #modal>
         <p>Modal content</p>
       </ng-template>
-      <ng-container [cviNgModal]="modal" [open]="true"></ng-container>
+      <ng-container [cviNgModal]="modal" [open]="true" [closeable]="closeable"></ng-container>
     `,
   }),
   parameters: {

diff --git a/libs/ui/src/lib/modal/modal.directive.ts b/libs/ui/src/lib/modal/modal.directive.ts
@@ -19,6 +19,7 @@ export class ModalDirective implements OnInit {
   @Input() cviNgModal!: TemplateRef<any>;
   @Input() modalTitle!: string;
   @Input() open = false;
+  @Input() closeable = true;
 
   private componentRef: ComponentRef<ModalComponent> | null = null;
 
@@ -47,6 +48,7 @@ export class ModalDirective implements OnInit {
     this.componentRef = this.viewContainerRef.createComponent(ModalComponent);
     this.componentRef.instance.templateRef = this.cviNgModal;
     this.componentRef.instance.title = this.modalTitle;
+    this.componentRef.instance.closeable = this.closeable;
     this.componentRef.instance.closed.subscribe(() => this.hideModal());
   }