@pictogrammers/components 0.5.4 → 0.5.6

package/package.json

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

package/pg/inputText/inputText.ts

@@ -21,6 +21,10 @@ export default class PgInputText extends HTMLElement {
     this.$input.addEventListener('change', this.handleChange.bind(this));
   }
 
+  focus() {
+    this.$input.focus();
+  }
+
   skipValue = false;
 
   render(changes) {

package/pg/modalConfirm/index.ts

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

package/pg/modalConfirm/modalConfirm.ts

@@ -57,5 +57,11 @@ export default class PgModalConfirm extends PgOverlay {
     if (changes.message) {
       this.$message.textContent = this.message;
     }
+    if (changes.okay) {
+      this.$okay.textContent = this.okay;
+    }
+    if (changes.cancel) {
+      this.$cancel.textContent = this.cancel;
+    }
   }
 }

package/pg/overlay/overlay.ts

@@ -3,9 +3,13 @@ import { Component, Prop } from '@pictogrammers/element';
 const layers: Set<HTMLElement> = new Set();
 const promises: Map<HTMLElement, (value: any) => void> = new Map();
 
+type OmitByPrefix<T, Prefix extends string> = {
+  [K in keyof T as K extends `${Prefix}${string}` ? never : K]: T[K];
+};
+
 @Component()
 export default class PgOverlay extends HTMLElement {
-  static open<T extends typeof PgOverlay>(this: T, props: Partial<Omit<InstanceType<T>, keyof PgOverlay>>): Promise<any> {
+  static open<T extends typeof PgOverlay>(this: T, props: Partial<OmitByPrefix<Omit<InstanceType<T>, keyof PgOverlay>, '$'>>): Promise<any> {
     var ele = document.createElement(this.name);
     props && Object.assign(ele, props);
     document.body.appendChild(ele);

package/pg/modalAlert copy/modalAlert.css

@@ -1,40 +0,0 @@
-.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;
-}

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;
-    }
-  }
-}