Modal button is now toggle-able

projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html

@@ -1,40 +1,41 @@
 <wvr-modal-wrapper #animationRoot>
 
-  <wvre-button
+  <wvr-button-component
+    *ngIf="btnVisible === 'true'"
     [btnTxt]="btnText"
     [dispatchAction]="'Modal.openModal'"
     [dispatchActionProps]="openProps"
     [themeVariant]="btnThemeVariant">
-  </wvre-button>
-  
+  </wvr-button-component>
+
   <ng-template #modalTemplate let-modal>
     <modal-content></modal-content>
   </ng-template>
-  
+
   <modal-container #modalContent class="wvr-hidden wvr-bootstrap">
     <ng-container *ngTemplateOutlet="modalHeader"></ng-container>
     <ng-container *ngTemplateOutlet="modalBody"></ng-container>
     <ng-container *ngTemplateOutlet="modalFooter"></ng-container>
   </modal-container>
-  
+
   <!-- modalHeader -->
   <ng-template #modalHeader>
     <div class="modal-header {{additionalClasses('header')}}">
       <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
     </div>
   </ng-template>
-  
+
   <!-- modalBody -->
   <ng-template #modalBody>
     <div class="modal-body">
       <ng-content select="wvre-modal-body"></ng-content>
     </div>
   </ng-template>
-  
+
   <!-- modalFooter -->
   <ng-template #modalFooter>
     <div class="modal-footer {{additionalClasses('footer')}}">
       <ng-content select="wvre-modal-footer"></ng-content>
     </div>
-  </ng-template>  
+  </ng-template>
 </wvr-modal-wrapper>

projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts

@@ -20,15 +20,28 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit, After
 
   modalRef: NgbModalRef;
 
+  /** This allows for the modal button to be toggle able. */
+  @Input() btnVisible: 'true' | 'false' = 'true';
+
+  /** The header title value to be displayed as a modal title. */
   @Input() title: string;
 
+  /** The text value to be displayed for the button launching the modal. */
   @Input() btnText: string;
 
+  /** This defines the modal id. */
   modalId: string;
 
+  /** Allows for the override of theme variant for modal component. */
   @Input() themeVariant: ThemeVariantName = 'primary';
+
+  /** Allows for the override of theme variant for the button launching the modal component. */
   @Input() btnThemeVariant: ThemeVariantName;
+
+  /** Allows for the override of theme variant for modal header. */
   @Input() modalHeaderThemeVariant: ThemeVariantName;
+
+  /** Allows for the override of theme variant for modal footer. */
   @Input() modalFooterThemeVariant: ThemeVariantName = 'light';
 
   get openProps(): string {
@@ -95,6 +108,7 @@ export class WvrModalComponent extends WvrBaseComponent implements OnInit, After
     this.store.dispatch(ModalActions.openModal({id: this.modalId}));
   }
 
+  /** This provides background, border and text color properties based on the them variant provided . */
   additionalClasses(value): string {
     let additionalClasses = '';
     switch (value) {

src/index.html

@@ -183,6 +183,16 @@
         </wvre-button>
       </wvre-modal-footer>
     </wvre-modal>
+
+    <wvre-modal title="Weaver Modal2" btn-text="Launch Modal2" btn-visible="false">
+      <wvre-modal-body>
+        <wvre-text value="Message in the Body"></wvre-text>
+      </wvre-modal-body>
+      <wvre-modal-footer>
+        <wvre-button btn-txt="cancel" theme-variant="success" dispatch-action="Modal.closeModal" dispatch-action-props="{id: 'Weaver Modal2'}">
+        </wvre-button>
+      </wvre-modal-footer>
+    </wvre-modal>
   </div>
 
   <wvre-button id="my-button" btn-txt="cancel" theme-variant="secondary" emit-event="myEvent" data-somevalue="HELLOOOOO">
@@ -199,7 +209,7 @@
     <wvre-wysiwyg id="wysiwygEditor" skin="oxide-dark" initial-value="Hello, World!" emit-save-event="wysiwygsave"></wvre-wysiwyg>
   </div>
 
-  
+
   <script>
     // const wysiwyg = document.querySelector('#wysiwygEditor');
     // wysiwyg.addEventListener('wysiwygsave', e => {