@pictogrammers/components 0.3.2 → 0.4.0

package/pg/menuItemIcon/README.md

@@ -0,0 +1,32 @@
+# `<pg-menu>`
+
+The `PgMenuItemIcon` is the `PgMenuItem` with icon support. The `pg-menu` can use both in the same list, but this component has the overhead of includig `PgIcon`.
+
+## Usage
+
+```typescript
+import '@pictogrammers/components/pgMenuItemIcon.js';
+```
+
+```typescript
+this.$items = [{
+  type: PgMenuItemIcon,
+  icon: '',
+  label: 'Item 1'
+}];
+```
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| `label`    |          | Item label. |
+| `icon`     |          | Item icon. |
+| `checked`  |          | Item checked. |
+| `disabled` |          | Item disabled. |
+
+## Events
+
+```typescript
+this.$item.addEventListener('select', (e: any) => {
+  const { index } = e.detail;
+});
+```

package/pg/menuItemIcon/__examples__/basic/basic.html

@@ -0,0 +1,34 @@
+<div class="example">
+  <pg-menu-item-icon part="item"></pg-menu-item-icon>
+</div>
+<div>
+  <table style="border: 1px solid #ddd;margin-block-start: 0.5rem;">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Value</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>icon</code></td>
+        <td part="iconValue"></td>
+        <td>
+          <button part="iconFile">File</button>
+          <button part="iconFolder">Folder</button>
+        </td>
+      </tr>
+      <tr>
+        <td><code>checked</code></td>
+        <td part="checkedValue"></td>
+        <td><input part="checkedToggle" type="checkbox"/></td>
+      </tr>
+      <tr>
+        <td><code>disabled</code></td>
+        <td part="disabledValue"></td>
+        <td><input part="disabledToggle" type="checkbox"/></td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/pg/menuItemIcon/__examples__/basic/basic.ts

@@ -0,0 +1,55 @@
+import { Component, Part } from '@pictogrammers/element';
+
+import PgMenuItem from '../../menuItemIcon';
+
+import template from './basic.html';
+
+const IconFile = 'M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z';
+const IconFolder = 'M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z';
+
+@Component({
+  selector: 'x-pg-menu-item-icon-basic',
+  template
+})
+export default class XPgMenuItemIconBasic extends HTMLElement {
+  @Part() $item: PgMenuItem;
+  @Part() $checkedToggle: HTMLInputElement;
+  @Part() $disabledToggle: HTMLInputElement;
+  @Part() $iconFile: HTMLButtonElement;
+  @Part() $iconFolder: HTMLButtonElement;
+  @Part() $checkedValue: HTMLDivElement;
+  @Part() $disabledValue: HTMLDivElement;
+
+  connectedCallback() {
+    this.$item.icon = IconFile;
+    this.$item.label = 'Item 1';
+    this.$item.checked = false;
+    this.$item.disabled = false;
+
+    this.$checkedValue.textContent = `${this.$item.checked}`;
+    this.$disabledValue.textContent = `${this.$item.disabled}`;
+
+    this.$item.addEventListener('select', (e: any) => {
+      this.$checkedToggle.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$iconFile.addEventListener('click', () => {
+      this.$item.icon = IconFile;
+    });
+
+    this.$iconFolder.addEventListener('click', () => {
+      this.$item.icon = IconFolder;
+    });
+
+    this.$checkedToggle.addEventListener('change', (e: any) => {
+      this.$item.checked = e.target.checked;
+      this.$checkedValue.textContent = `${this.$item.checked}`;
+    });
+
+    this.$disabledToggle.addEventListener('change', (e: any) => {
+      this.$item.disabled = e.target.checked;
+      this.$disabledValue.textContent = `${this.$item.disabled}`;
+    });
+  }
+}

package/pg/menuItemIcon/index.ts

@@ -0,0 +1,3 @@
+import PgMenuItemIcon from './menuItemIcon';
+
+export default PgMenuItemIcon;

package/pg/menuItemIcon/menuItemIcon.css

@@ -0,0 +1,106 @@
+:host {
+  display: contents;
+}
+
+[part=button] {
+  outline: none;
+  display: flex;
+  align-items: center;
+  font-family: var(--pg-font-family);
+  text-align: var(--pg-menu-item-text-align, left);
+  background: var(--pg-menu-item-background, transparent);
+  padding: var(--pg-menu-item-padding, 0.25rem 0.5rem 0.25rem 0.5rem);
+  border-color: transparent;
+  border-width: 0;
+  border-style: solid;
+  border-top-left-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
+  border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
+  color: var(--pg-menu-item-color, #453C4F);
+}
+
+[part=button]:not(:disabled):active,
+[part=button]:not(:disabled):hover {
+  background: var(--pg-menu-item-selected-background, #453C4F);
+  color: #FFFFFF;
+  --pg-icon-color: #FFFFFF;
+}
+
+[part=button]:not(:disabled):active {
+  background: var(--pg-menu-item-active-background, #5f516e);
+}
+
+[part=button]:disabled {
+  color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));
+  --pg-icon-color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));
+}
+
+@container style(--pg-menu-_has-check: true) {
+  [part=button] {
+    padding-inline-start: 1.5rem;
+  }
+
+  [part=button].checked::before {
+    position: absolute;
+    translate: -1.5rem 0;
+    content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79)' /></svg>"));
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  [part=button].checked:active::before,
+  [part=button].checked:hover::before {
+    content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='white' /></svg>"));
+  }
+
+  [part=button].checked:disabled::before {
+    content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+  }
+}
+
+[part=button]:focus-visible {
+  position: relative;
+}
+
+[part=button]:focus-visible::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
+}
+
+[part=button]:focus-visible:not(:hover)::after {
+  background: var(--pg-focus-background-color, rgb(79, 143, 249, 0.1));
+}
+
+[part=icon] {
+  margin-inline-end: 0.5rem;
+}
+
+[part=button].more [part=label]::after {
+  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79)' /></svg>"));
+  width: 1.5rem;
+  height: 1.5rem;
+  vertical-align: middle;
+  translate: 0.25rem 0;
+}
+
+[part=button].more:active [part=label]::after,
+[part=button].more:hover [part=label]::after {
+  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='white' /></svg>"));
+}
+
+[part=button].more:disabled [part=label]::after {
+  content: var(--pg-menu-item-disabled-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+}
+
+[part=label] {
+  display: flex;
+  align-items: center;
+}

package/pg/menuItemIcon/menuItemIcon.html

@@ -0,0 +1,4 @@
+<button part="button">
+  <pg-icon part="icon"></pg-icon>
+  <span part="label"></span>
+</button>

package/pg/menuItemIcon/menuItemIcon.ts

@@ -0,0 +1,156 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgOverlaySubMenu from '../overlaySubMenu/overlaySubMenu'
+import PgIcon from '../icon/icon';
+
+import template from './menuItemIcon.html';
+import style from './menuItemIcon.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu-item-icon',
+  style,
+  template
+})
+export default class PgMenuItemIcon extends HTMLElement {
+  static delegatesFocus = true;
+
+  @Prop() index: number;
+  @Prop() icon: string = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
+  @Prop() label: string = '';
+  @Prop() checked: boolean = false;
+  @Prop() disabled: boolean = false;
+  @Prop() items: any[] = [];
+
+  @Part() $icon: PgIcon;
+  @Part() $button: HTMLButtonElement;
+  @Part() $label: HTMLSpanElement;
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon;
+    }
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.disabled) {
+      this.$button.disabled = this.disabled;
+    }
+    if (changes.checked) {
+      this.$button.classList.toggle('checked', this.checked);
+    }
+    if (changes.items) {
+      this.$button.classList.toggle('more', this.items.length > 0);
+    }
+    if (changes.checked) {
+      if (this.checked === true) {
+        this.dispatchEvent(new CustomEvent('hasCheck', { bubbles: true }));
+      }
+    }
+  }
+
+  connectedCallback() {
+    this.$button.addEventListener('click', async () => {
+      if (this.items.length > 0) {
+        const result = await PgOverlaySubMenu.open({
+          source: this.$button,
+          x: 0,
+          y: 0,
+          value: this.items[0],
+          items: this.items
+        });
+        if (result === null) {
+          this.focus();
+        } else if (result) {
+          this.dispatchEvent(new CustomEvent('select', {
+            detail: {
+              item: result
+            }
+          }));
+        } else {
+          this.dispatchEvent(new CustomEvent('close', {
+            detail: {
+              depth: -1
+            }
+          }));
+        }
+      } else {
+        this.dispatchEvent(new CustomEvent('select', {
+          detail: {
+            index: this.index,
+            item: this.items[this.index]
+          }
+        }));
+      }
+    });
+    this.$button.addEventListener('keydown', async (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          this.dispatchEvent(new CustomEvent('down', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'ArrowUp':
+          this.dispatchEvent(new CustomEvent('up', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'ArrowLeft':
+          this.dispatchEvent(new CustomEvent('close', {
+            detail: {
+              depth: 1
+            }
+          }));
+          e.preventDefault();
+          break;
+        case 'ArrowRight':
+          if (this.items.length > 0) {
+            const result = await PgOverlaySubMenu.open({
+              source: this.$button,
+              x: 0,
+              y: 0,
+              value: this.items[0],
+              items: this.items
+            });
+            if (result === null) {
+              this.focus();
+            } else if (result) {
+              this.dispatchEvent(new CustomEvent('select', {
+                detail: {
+                  item: result
+                }
+              }));
+            } else {
+              this.dispatchEvent(new CustomEvent('close', {
+                detail: {
+                  depth: -1
+                }
+              }));
+            }
+          }
+          e.preventDefault();
+          break;
+        case 'Escape':
+          this.dispatchEvent(new CustomEvent('close', {
+            detail: {
+              depth: -1
+            }
+          }));
+          e.preventDefault();
+          break;
+      }
+    });
+  }
+
+  focus() {
+    this.$button.focus();
+  }
+
+  getHeight(): number {
+    return this.$label.getBoundingClientRect().height;
+  }
+
+}

package/pg/modalAlert/__examples__/basic/basic.ts

@@ -21,7 +21,7 @@ export default class XPgModalAlertBasic extends HTMLElement {
       header: 'Delete Item',
       message: 'Are you sure you want to delete the item?'
     });
-    this.$result.innerText = `${result}`;
+    this.$result.textContent = `${result}`;
   }
 
 }

package/pg/modalAlert/modalAlert.css

@@ -36,8 +36,5 @@ footer {
   border-top: 1px solid #ccc;
   background: #f1f1f1;
   justify-content: flex-end;
-}
-
-[part="no"] {
-  margin-right: 0.5rem;
+  gap: 0.5rem;
 }

package/pg/modalAlert/modalAlert.ts

@@ -21,16 +21,30 @@ export default class PgModalAlert extends PgOverlay {
   @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.$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() {
+  #handleYes() {
     this.close(true);
   }
 
-  handleNo() {
+  #handleNo() {
     this.close(false);
   }
 

package/pg/modification/__examples__/basic/basic.ts

@@ -47,8 +47,7 @@ export default class XPgModificationBasic extends HTMLElement {
           "user": {
               "id": "c4ea5584-07e3-11e4-bf19-842b2b6cfe1b",
               "name": "Austin Andrews",
-              "github": "templarian",
-              "twitter": "Templarian"
+              "github": "templarian"
           },
           "icon": null,
           "version": {