Fix confirm and alert dialogs.

Author: Templarian

element.config.ts

@@ -10,7 +10,7 @@ export default {
   }, {
     label: 'Modals',
     extends: ['PgModal'],
-    include: ['PgModal', 'PgModalAlert'],
+    include: ['PgModal', 'PgModalAlert', 'PgModalConfirm'],
   }],
   themes: [{
     label: 'UI3',

src/components/pg/modal/__examples__/basic/basic.ts

@@ -9,6 +9,10 @@ import template from './basic.html';
 })
 export class XMyModal extends PgModal {
 
+  @Prop() header: string = '';
+  @Prop() message: string = '';
+
+
   @Part() $close: HTMLButtonElement;
 
   connectedCallback() {
@@ -34,7 +38,7 @@ export default class XPgModalBasic extends HTMLElement {
   async handleClick() {
     const result = await XMyModal.open({
       header: 'Delete Item',
-      message: 'Are you sure you want to delete the item?'
+      message: 'Are you sure you want to delete the item?',
     });
     this.$result.textContent = `${result}`;
   }

src/components/pg/modalAlert/README.md

@@ -1,17 +1,16 @@
 # `PgModalAlert`
 
-The `PgModalAlert` creates a alert box above everything.
+The `PgModalAlert` creates a alert box dialog. For options like okay/cancel use `PgModalConfirm`.
 
 ```typescript
-import PgModalAlert from '@pictogrammers/components/pgModalAlert';
+import PgModalConfirm from '@pictogrammers/components/pg/modalAlert';
 ```
 
 ```typescript
 const result = await PgModalAlert.open({
-  header: 'Delete Item',
-  message: 'Are you sure you want to delete the item?'
+  header: 'Something Went Wrong',
+  message: 'Some information to alert about.',
 });
-if (result) {
-  console.log('Item has been deleted.');
-}
+// we don't care about result
+console.log('Okay was clicked');
 ```

src/components/pg/modalAlert/__examples__/basic/basic.ts

@@ -18,8 +18,8 @@ export default class XPgModalAlertBasic extends HTMLElement {
 
   async handleClick() {
     const result = await PgModalAlert.open({
-      header: 'Delete Item',
-      message: 'Are you sure you want to delete the item?'
+      header: 'Something Went Wrong',
+      message: 'Some information to alert about.',
     });
     this.$result.textContent = `${result}`;
   }

src/components/pg/modalAlert/modalAlert.html

@@ -8,15 +8,14 @@
       <h2 id="dialog_label"
         class="dialog_label"
         part="headerText">
-        Add Delivery Address
+        Alert
       </h2>
     </header>
     <main>
       <p part="message"></p>
     </main>
     <footer>
-      <pg-button part="no">No</pg-button>
-      <pg-button part="yes" variant="brand">Yes</pg-button>
+      <pg-button part="okay" variant="brand">Okay</pg-button>
     </footer>
   </div>
 </div>

src/components/pg/modalAlert/modalAlert.ts

@@ -18,14 +18,12 @@ export default class PgModalAlert extends PgOverlay {
   @Part() $header: HTMLDivElement;
   @Part() $headerText: HTMLHeadingElement;
   @Part() $message: HTMLDivElement;
-  @Part() $yes: PgButton;
-  @Part() $no: PgButton;
+  @Part() $okay: PgButton;
 
   #cacheKeydownHandler: any;
 
   connectedCallback() {
-    this.$yes.addEventListener('click', this.#handleYes.bind(this));
-    this.$no.addEventListener('click', this.#handleNo.bind(this));
+    this.$okay.addEventListener('click', this.#handleOkay.bind(this));
     this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
     document.addEventListener('keydown', this.#cacheKeydownHandler);
   }
@@ -40,20 +38,16 @@ export default class PgModalAlert extends PgOverlay {
     }
   }
 
-  #handleYes() {
-    this.close(true);
-  }
-
-  #handleNo() {
-    this.close(false);
+  #handleOkay() {
+    this.close();
   }
 
   render(changes) {
     if (changes.header) {
-      this.$headerText.innerText = this.header;
+      this.$headerText.textContent = this.header;
     }
     if (changes.message) {
-      this.$message.innerText = this.message;
+      this.$message.textContent = this.message;
     }
   }
 }

src/components/pg/modalConfirm/README.md

@@ -0,0 +1,19 @@
+# `PgModalConfirm`
+
+The `PgModalConfirm` creates a confirm box dialog.
+
+```typescript
+import PgModalConfirm from '@pictogrammers/components/pg/modalConfirm';
+```
+
+```typescript
+const result = await PgModalConfirm.open({
+  header: 'Delete Item',
+  message: 'Are you sure you want to delete the item?',
+  okay: 'Delete',
+  cancel: 'Keep Item',
+});
+if (result) {
+  console.log('Item has been deleted.');
+}
+```

src/components/pg/modalConfirm/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <button part="button">Launch Confirm Modal</button>
+  <div><code>Result: </code><code part="result"></code></div>
+</div>

src/components/pg/modalConfirm/__examples__/basic/basic.ts

@@ -0,0 +1,29 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgModalConfirm from '../../modalConfirm';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-modal-confirm-basic',
+  template
+})
+export default class XPgModalConfirmBasic extends HTMLElement {
+
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  async handleClick() {
+    const result = await PgModalConfirm.open({
+      header: 'Delete Item',
+      message: 'Are you sure you want to delete the item?',
+      okay: 'Delete',
+      cancel: 'Keep Item',
+    });
+    this.$result.textContent = `${result}`;
+  }
+
+}

src/components/pg/modalConfirm/modalConfirm.css

@@ -0,0 +1,40 @@
+.backdrop {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+}
+.dialog {
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  min-width: 15rem;
+}
+header {
+  border-bottom: 1px solid #ccc;
+  background: #f1f1f1;
+  padding: 0.75rem 1rem;
+}
+header h2 {
+  font-size: 1.25rem;
+  margin: 0;
+  font-weight: normal;
+}
+main {
+  padding: 0.5rem 1rem;
+}
+footer {
+  display: flex;
+  flex-direction: row;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #ccc;
+  background: #f1f1f1;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}