Merge 1dd4e74 into 0c4b8a7

TAMULib · Apr 13, 2021 · 0ae7512 · 0ae7512
2 parents 0c4b8a7 + 1dd4e74
commit 0ae7512
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html b/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.html
@@ -1,6 +1,7 @@
 <wvr-modal-wrapper #animationRoot>
 
   <wvr-button-component
+    *ngIf="btnVisible === 'true'"
     [btnTxt]="btnText"
     [dispatchAction]="'Modal.openModal'"
     [dispatchActionProps]="openProps"

diff --git a/projects/wvr-elements/src/lib/wvr-modal/wvr-modal.component.ts b/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) {

diff --git a/src/index.html b/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 => {