@pictogrammers/components 0.3.1

package/pg/menuIcon/menuIcon.css

@@ -0,0 +1,168 @@
+
+[part~=contextMenu] {
+  position: relative;
+  background: #737E9E;
+  border-radius: 0.25rem;
+  width: 12rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
+}
+
+[part~=contextMenu] > div.section {
+  color: #FFF;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  cursor: default;
+  font-weight: bold;
+}
+
+[part~=contextMenu] > div.section:not(:first-child) {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  margin-top: 0.5rem;
+}
+
+[part~=contextMenu] > div.group {
+  margin: 0 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+[part~=contextMenu] > div.row > div.group {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow: hidden;
+}
+
+[part~=contextMenu] > div.row > div.group:first-child {
+  margin-left: 0.5rem;
+  margin-right: 0.25rem;
+}
+
+[part~=contextMenu] > div.row > div.group:last-child {
+  margin-right: 0.5rem;
+}
+
+[part~=contextMenu] > div.group > button,
+[part~=contextMenu] > div.row > div.group > button {
+  display: flex;
+  flex: 1;
+  padding: 0.25rem;
+  justify-content: center;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  color: #FFF;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  align-items: center;
+  outline: none;
+}
+
+[part~=contextMenu] > button,
+[part~=contextMenu] > a {
+  display: flex;
+  border: 0;
+  margin: 0;
+  padding: 0.125rem 0.5rem;
+  background: transparent;
+  text-align: left;
+  color: #FFF;
+  font-size: 1rem;
+  text-decoration: none;
+  cursor: default;
+  outline: none;
+}
+
+[part~=contextMenu] > div.group > button.active,
+[part~=contextMenu] > div.row > div.group > button.active {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) inset;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+[part~=contextMenu] > div.group > button.active:hover,
+[part~=contextMenu] > div.row > div.group > button.active:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+[part~=contextMenu] > div.group > button:not(:first-child),
+[part~=contextMenu] > div.row > div.group > button:not(:first-child) {
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[part~=contextMenu] > div.row > div.group > button > svg,
+[part~=contextMenu] > div.group > button > svg,
+[part~=contextMenu] > div.row > button > svg,
+[part~=contextMenu] > button > svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+}
+
+[part~=contextMenu] > div.row > div.group > button:hover,
+[part~=contextMenu] > div.group > button:hover,
+[part~=contextMenu] > button:hover,
+[part~=contextMenu] > a:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+[part~=contextMenu] > div.row > div.group > button:active,
+[part~=contextMenu] > div.group > button:active {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) inset;
+  background: rgba(0, 0, 0, 0.2);
+}
+[part~=contextMenu] > button:active,
+[part~=contextMenu] > a:active {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.row {
+  display: flex;
+}
+
+.divider {
+  border-top: 1px solid rgba(255, 255, 255, 0.3);
+  margin-top: 0.5rem;
+  height: 0.4375rem;
+}
+
+.black {
+  display: inline-flex;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background: #000;
+}
+
+.white {
+  display: inline-flex;
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+  background: #FFF;
+}
+
+.download svg {
+  margin-bottom: -0.125rem;
+  margin-left: 0.25rem;
+}
+
+[part~=color] {
+  visibility: hidden;
+  position: absolute;
+  padding: 0.25rem;
+  background: #737E9E;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
+}
+
+[part~=colorHexRgb] {
+  margin-bottom: 0.25rem;
+}

package/pg/menuIcon/menuIcon.html

@@ -0,0 +1,64 @@
+<div part="contextMenu">
+  <a part="newTab" href="">Open icon in New Tab</a>
+  <button part="copyIconName">Copy Icon Name</button>
+  <div class="section">Download PNG</div>
+  <div class="group">
+    <button part="png24">24</button>
+    <button part="png36">36</button>
+    <button part="png48">48</button>
+    <button part="png96">96</button>
+  </div>
+  <div class="row" style="margin-top: 0.25rem;">
+    <div class="group">
+      <button part="pngBlack"><span class="black"></span></button>
+      <button part="pngWhite"><span class="white"></span></button>
+      <button part="pngColor">
+        <svg viewBox="0 0 24 24">
+          <path fill="#fff" d="M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"/>
+          <path fill="currentColor" d="M12.97 8L15.8 10.85L7.67 19L3.71 20.68L3.15 20.11L4.84 16.15L12.97 8Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="group">
+      <button part="pngDownload" class="download">
+        PNG
+        <svg viewBox="0 0 24 24">
+          <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div class="section">SVG</div>
+  <div class="row" style="margin-bottom: 0.25rem;">
+    <div class="group">
+      <button part="svgBlack" class="active"><span class="black"></span></button>
+      <button part="svgWhite"><span class="white"></span></button>
+      <button part="svgColor">
+        <svg viewBox="0 0 24 24">
+          <path fill="#fff" d="M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z"/>
+          <path fill="currentColor" d="M12.97 8L15.8 10.85L7.67 19L3.71 20.68L3.15 20.11L4.84 16.15L12.97 8Z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="group">
+      <button part="svgDownload" class="download">
+        SVG
+        <svg viewBox="0 0 24 24">
+          <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <button part="copySvgInline">Copy HTML SVG Inline</button>
+  <button part="copySvgFile">Copy SVG File Contents</button>
+  <button part="copySvgPath">Copy SVG Path Data</button>
+  <div class="section">Desktop Font</div>
+  <button part="copyUnicode">Copy Unicode Character</button>
+  <button part="copyCodepoint">Copy Codepoint</button>
+  <div class="divider"></div>
+  <button part="copyPreview">Copy GitHub Preview</button>
+  <div part="color">
+    <pg-input-hex-rgb part="colorHexRgb"></pg-input-hex-rgb>
+    <pg-color part="colorPicker"></pg-color>
+  </div>
+</div>

package/pg/menuIcon/menuIcon.ts

@@ -0,0 +1,271 @@
+import { Component, Prop, Part, Local } from '@pictogrammers/element';
+
+import template from './menuIcon.html';
+import style from './menuIcon.css'
+import { copyText, getCopySvgInline } from '../shared/copy';
+import { addInfoToast } from '../shared/toast';
+import { Icon } from '../shared/models/icon';
+
+@Component({
+  selector: 'pg-menu-icon',
+  style,
+  template
+})
+export default class PgMenuIcon extends HTMLElement {
+  @Part() $contextMenu: HTMLDivElement;
+  @Part() $newTab: HTMLAnchorElement;
+  @Part() $copyIconName: HTMLButtonElement;
+  @Part() $pngBlack: HTMLButtonElement;
+  @Part() $pngWhite: HTMLButtonElement;
+  @Part() $pngColor: HTMLButtonElement;
+  @Part() $png24: HTMLButtonElement;
+  @Part() $png36: HTMLButtonElement;
+  @Part() $png48: HTMLButtonElement;
+  @Part() $png96: HTMLButtonElement;
+  @Part() $pngDownload: HTMLButtonElement;
+  @Part() $svgBlack: HTMLButtonElement;
+  @Part() $svgWhite: HTMLButtonElement;
+  @Part() $svgColor: HTMLButtonElement;
+  @Part() $svgDownload: HTMLButtonElement;
+  @Part() $copySvgInline: HTMLButtonElement;
+  @Part() $copySvgFile: HTMLButtonElement;
+  @Part() $copySvgPath: HTMLButtonElement;
+  @Part() $copyUnicode: HTMLButtonElement;
+  @Part() $copyCodepoint: HTMLButtonElement;
+  @Part() $copyPreview: HTMLButtonElement;
+
+  @Part() $color: any;
+  @Part() $colorPicker: any;
+  @Part() $colorHexRgb: any;
+
+  @Local('#000000') cachePngColor: string;
+  @Local('24') cachePngSize: string;
+  @Local('#000000') cacheSvgColor: string;
+
+  color = 'svg';
+  @Prop() currentIndex: 0;
+  @Prop() icon: Icon = new Icon();
+
+  connectedCallback() {
+    // Wire Up Context Menu
+    this.$copyIconName.addEventListener('click', this.handleCopyIconName.bind(this));
+    this.$svgBlack.addEventListener('click', () => {
+      this.cacheSvgColor = '#000000';
+      this.render();
+    });
+    this.$svgWhite.addEventListener('click', () => {
+      this.cacheSvgColor = '#FFFFFF';
+      this.render();
+    });
+    let preventSvgColor = false;
+    this.$svgColor.addEventListener('click', () => {
+      if (preventSvgColor) { preventSvgColor = false; return; }
+      this.color = 'svg';
+      this.$colorPicker.value = this.cacheSvgColor;
+      this.$colorHexRgb.value = this.cacheSvgColor;
+      const self = this;
+      //createPopper(this.$svgColor, this.$color, {
+      //  placement: 'bottom-start'
+      //});
+      this.$color.style.visibility = 'visible';
+      let outside = true;
+      function handleMouseDown(e) {
+        if (outside) {
+          self.$color.style.visibility = 'hidden';
+          document.removeEventListener('mousedown', handleMouseDown);
+          preventSvgColor = true;
+          self.render();
+          setTimeout(() => preventSvgColor = false, 500);
+        }
+      }
+      this.$color.addEventListener('mouseenter', () => outside = false);
+      this.$color.addEventListener('mouseleave', () => outside = true);
+      document.addEventListener('mousedown', handleMouseDown);
+    });
+    this.$pngBlack.addEventListener('click', () => {
+      this.cachePngColor = '#000000';
+      this.render();
+    });
+    this.$pngWhite.addEventListener('click', () => {
+      this.cachePngColor = '#FFFFFF';
+      this.render();
+    });
+    let preventPngColor = false;
+    this.$pngColor.addEventListener('click', () => {
+      if (preventPngColor) { preventPngColor = false; return; }
+      this.color = 'png';
+      this.$colorPicker.value = this.cachePngColor;
+      this.$colorHexRgb.value = this.cachePngColor;
+      const self = this;
+      //createPopper(this.$pngColor, this.$color, {
+      //  placement: 'bottom-start'
+      //});
+      this.$color.style.visibility = 'visible';
+      let outside = true;
+      function handleMouseDown(e) {
+        if (outside) {
+          self.$color.style.visibility = 'hidden';
+          document.removeEventListener('mousedown', handleMouseDown);
+          preventPngColor = true;
+          self.render();
+          setTimeout(() => preventPngColor = false, 500);
+        }
+      }
+      this.$color.addEventListener('mouseenter', () => outside = false);
+      this.$color.addEventListener('mouseleave', () => outside = true);
+      document.addEventListener('mousedown', handleMouseDown);
+    });
+    this.$png24.addEventListener('click', () => {
+      this.cachePngSize = '24';
+      this.render();
+    });
+    this.$png36.addEventListener('click', () => {
+      this.cachePngSize = '36';
+      this.render();
+    });
+    this.$png48.addEventListener('click', () => {
+      this.cachePngSize = '48';
+      this.render();
+    });
+    this.$png96.addEventListener('click', () => {
+      this.cachePngSize = '96';
+      this.render();
+    });
+    this.$svgDownload.addEventListener('click', () => {
+      alert(`SVG ${this.cacheSvgColor}`);
+    });
+    this.$pngDownload.addEventListener('click', () => {
+      alert(`SVG ${this.cachePngSize} ${this.cachePngColor}`);
+    });
+    this.$copySvgInline.addEventListener('click', () => {
+      const icon = this.icon;
+      copyText(getCopySvgInline(icon));
+      this.hideContextMenu();
+      addInfoToast(`Copied inline SVG "${icon.name}" to clipboard.`);
+    });
+    this.$copySvgFile.addEventListener('click', () => {
+
+    });
+    this.$copySvgPath.addEventListener('click', () => {
+
+    });
+    this.$copyUnicode.addEventListener('click', () => {
+
+    });
+    this.$copyCodepoint.addEventListener('click', () => {
+
+    });
+    this.$copyPreview.addEventListener('click', () => {
+
+    });
+  }
+
+  handleCopyIconName() {
+    const icon = this.icon;
+    if (icon && icon.name) {
+      copyText(icon.name);
+      addInfoToast(`Copied "${icon.name}" to clipboard.`);
+    }
+    this.hideContextMenu();
+  }
+
+  hideContextMenu() {
+
+  }
+
+  showContextMenu(index: number, x: number, y: number) {
+    this.dispatchEvent(new CustomEvent('closemenu'));
+    /*const gridRect = this.$grid.getBoundingClientRect();
+    const cmRect = this.$contextMenu.getBoundingClientRect();
+    if (y + gridRect.top + cmRect.height + 4 > window.innerHeight
+      && x + gridRect.left + cmRect.width + 24 > window.innerWidth) {
+      y = y - cmRect.height;
+      x -= x + gridRect.left + cmRect.width + 24 - window.innerWidth;
+     } else if (y + gridRect.top + cmRect.height + 4 > window.innerHeight) {
+      y -= y + gridRect.top + cmRect.height + 4 - window.innerHeight;
+    } else if (x + gridRect.left + cmRect.width + 24 > window.innerWidth) {
+      x -= x + gridRect.left + cmRect.width + 24 - window.innerWidth;
+    }
+    this.currentIndex = index;
+    var icon = this.icons[index];
+    this.$newTab.href = `icons/${icon.name}`;
+    this.$contextMenu.style.left = `${x}px`;
+    this.$contextMenu.style.top = `${y}px`;
+    this.$contextMenu.style.visibility = 'visible';
+    this.hideTooltip();
+    this.canOpenTooltip = false;
+    const self = this;
+    this.$contextMenu.addEventListener('mouseenter', () => {
+      this.preventClose = true;
+    });
+    this.$contextMenu.addEventListener('mouseleave', () => {
+      this.preventClose = false;
+    });
+    function handleMouseDown(e) {
+      if (!self.preventClose) {
+        self.hideContextMenu();
+        document.removeEventListener('mousedown', handleMouseDown);
+      }
+    }
+    this.preventClose = false;
+    document.addEventListener('mousedown', handleMouseDown);
+    this.$color.style.visibility = 'hidden';*/
+  }
+
+  render() {
+    // Context Menu
+    this.$svgBlack.classList.toggle('active', this.cacheSvgColor === '#000000');
+    this.$svgWhite.classList.toggle('active', this.cacheSvgColor === '#FFFFFF');
+    this.$svgColor.classList.toggle('active', this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF');
+    this.$pngBlack.classList.toggle('active', this.cachePngColor === '#000000');
+    this.$pngWhite.classList.toggle('active', this.cachePngColor === '#FFFFFF');
+    this.$pngColor.classList.toggle('active', this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF');
+    this.$png24.classList.toggle('active', this.cachePngSize === '24');
+    this.$png36.classList.toggle('active', this.cachePngSize === '36');
+    this.$png48.classList.toggle('active', this.cachePngSize === '48');
+    this.$png96.classList.toggle('active', this.cachePngSize === '96');
+    this.$colorPicker.addEventListener('select', this.handleColorSelect.bind(this));
+    this.$colorHexRgb.addEventListener('change', this.handleHexRgbChange.bind(this));
+    this.syncEyedropper();
+  }
+
+  handleColorSelect(e) {
+    switch(this.color) {
+      case 'svg':
+        this.cacheSvgColor = e.detail.hex;
+        break;
+      case 'png':
+        this.cachePngColor = e.detail.hex;
+        break;
+    }
+    this.$colorHexRgb.value = e.detail.hex;
+    this.syncEyedropper();
+  }
+
+  handleHexRgbChange(e) {
+    switch(this.color) {
+      case 'svg':
+        this.cacheSvgColor = e.detail.hex;
+        break;
+      case 'png':
+        this.cachePngColor = e.detail.hex;
+        break;
+    }
+    this.$colorPicker.value = e.detail.hex;
+    this.syncEyedropper();
+  }
+
+  syncEyedropper() {
+    if (this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF') {
+      this.$pngColor.style.color = this.cachePngColor;
+    } else {
+      this.$pngColor.style.color = 'transparent';
+    }
+    if (this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF') {
+      this.$svgColor.style.color = this.cacheSvgColor;
+    } else {
+      this.$svgColor.style.color = 'transparent';
+    }
+  }
+
+}

package/pg/modalAlert/README.md

@@ -0,0 +1,17 @@
+# `PgModalAlert`
+
+The `PgModalAlert` creates a alert box above everything.
+
+```typescript
+import PgModalAlert from '@pictogrammers/components/pgModalAlert';
+```
+
+```typescript
+const result = await PgModalAlert.open({
+  header: 'Delete Item',
+  message: 'Are you sure you want to delete the item?'
+});
+if (result) {
+  console.log('Item has been deleted.');
+}
+```

package/pg/modalAlert/__examples__/basic/basic.html

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

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

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

package/pg/modalAlert/index.ts

@@ -0,0 +1,3 @@
+import PgModalAlert from './modalAlert';
+
+export default PgModalAlert;

package/pg/modalAlert/modalAlert.css

@@ -0,0 +1,43 @@
+.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;
+}
+
+[part="no"] {
+  margin-right: 0.5rem;
+}

package/pg/modalAlert/modalAlert.html

@@ -0,0 +1,22 @@
+<div class="backdrop">
+  <div class="dialog"
+    role="dialog"
+    id="dialog1"
+    aria-labelledby="dialog1_label"
+    aria-modal="true">
+    <header part="header">
+      <h2 id="dialog1_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">Yes</pg-button>
+    </footer>
+  </div>
+</div>

package/pg/modalAlert/modalAlert.ts

@@ -0,0 +1,45 @@
+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;
+
+  connectedCallback() {
+    this.$yes.addEventListener('click', this.handleYes.bind(this));
+    this.$no.addEventListener('click', this.handleNo.bind(this));
+  }
+
+  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;
+    }
+  }
+}