@pictogrammers/components 0.5.3 → 0.5.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.3",
+    "version": "0.5.5",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/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>

package/pg/modalConfirm/index.ts

@@ -0,0 +1,3 @@
+import PgModalConfirm from './modalConfirm';
+
+export default PgModalConfirm;

package/pg/modalAlert copy/modalAlert.html

@@ -1,22 +0,0 @@
-<div class="backdrop">
-  <div class="dialog"
-    role="dialog"
-    id="dialog1"
-    aria-labelledby="dialog_label"
-    aria-modal="true">
-    <header part="header">
-      <h2 id="dialog_label"
-        class="dialog_label"
-        part="headerText">
-        Add Delivery Address
-      </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>
-    </footer>
-  </div>
-</div>

package/pg/modalAlert copy/modalAlert.ts

@@ -1,59 +0,0 @@
-import { Component, Prop, Part } from '@pictogrammers/element';
-
-import template from './modalAlert.html';
-import style from './modalAlert.css';
-
-import PgOverlay from '../overlay/overlay';
-import PgButton from '../button/button';
-
-@Component({
-  selector: 'pg-modal-alert',
-  template,
-  style
-})
-export default class PgModalAlert extends PgOverlay {
-  @Prop() header: string = 'Are you sure?';
-  @Prop() message: string = 'Are you sure?';
-
-  @Part() $header: HTMLDivElement;
-  @Part() $headerText: HTMLHeadingElement;
-  @Part() $message: HTMLDivElement;
-  @Part() $yes: PgButton;
-  @Part() $no: PgButton;
-
-  #cacheKeydownHandler: any;
-
-  connectedCallback() {
-    this.$yes.addEventListener('click', this.#handleYes.bind(this));
-    this.$no.addEventListener('click', this.#handleNo.bind(this));
-    this.#cacheKeydownHandler ??= this.#handleKeyDown.bind(this);
-    document.addEventListener('keydown', this.#cacheKeydownHandler);
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('keydown', this.#cacheKeydownHandler);
-  }
-
-  #handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      this.close(null);
-    }
-  }
-
-  #handleYes() {
-    this.close(true);
-  }
-
-  #handleNo() {
-    this.close(false);
-  }
-
-  render(changes) {
-    if (changes.header) {
-      this.$headerText.innerText = this.header;
-    }
-    if (changes.message) {
-      this.$message.innerText = this.message;
-    }
-  }
-}