@pictogrammers/components 0.3.2 → 0.4.0

package/pg/app/app.ts

@@ -0,0 +1,45 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './app.html';
+import style from './app.css';
+
+@Component({
+  selector: 'pg-app',
+  style,
+  template
+})
+export default class PgApp extends HTMLElement {
+  @Part() $logo: HTMLButtonElement;
+  @Part() $home: HTMLDivElement;
+  @Part() $side: HTMLDivElement;
+  @Part() $resize: HTMLButtonElement;
+
+  connectedCallback() {
+    this.$logo.addEventListener('click', this.#handleClick.bind(this));
+    this.$resize.addEventListener('pointerdown', this.#handlePointerDown.bind(this));
+  }
+
+  #handleClick() {
+    this.$logo.classList.toggle('selected');
+    this.$home.classList.toggle('hide');
+  }
+
+  #handlePointerDown(e: PointerEvent) {
+    const { clientX } = e;
+    this.$resize.classList.add('dragging');
+    const currentWidth = this.$side.getBoundingClientRect().width;
+    let currentX = clientX;
+    const handlePointerMove = (ee: PointerEvent) => {
+      const x = currentX - ee.clientX;
+      const width = currentWidth - x;
+      this.$side.style.width = `${width}px`;
+    }
+    const handlePointerUp = () => {
+      this.$resize.classList.remove('dragging');
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+    }
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerUp);
+  }
+}

package/pg/app/index.ts

@@ -0,0 +1,3 @@
+import PgApp from './app';
+
+export default PgApp;

package/pg/avatar/__examples__/basic/basic.ts

@@ -33,9 +33,11 @@ export default class XPgAvatarBasic extends HTMLElement {
   handleTooltip(e) {
     const { visible, rect, text, position } = e.detail;
     this.$tooltip.visible = visible;
-    this.$tooltip.rect = rect;
-    this.$tooltip.text = text;
-    this.$tooltip.position = position;
+    if (visible) {
+      this.$tooltip.rect = rect;
+      this.$tooltip.text = text;
+      this.$tooltip.position = position;
+    }
     e.stopPropagation();
   }
 }

package/pg/button/README.md

@@ -38,6 +38,9 @@ import PgButton from '@pictogrammers/components/pg/button';
 | `--pg-button-active-color` | `#fff`  | `active` Text color      |
 | `--pg-button-active-background-color` | `#453C4F`  | `active` Background color      |
 | `--pg-button-active-border-color` | `#453C4F`  | `active` Border color      |
+| `--pg-button-padding` | `0.25rem 0.5rem` | Padding. |
+| `--pg-button-font-size` | `1rem` | Font size. |
+| `--pg-button-line-height` | `1.5rem` | Line height. |
 
 ### Slots
 

package/pg/button/button.css

@@ -1,19 +1,19 @@
 :host {
-  display: flex;
+  display: contents;
 }
 
 [part="button"] {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   align-content: center;
   font-family: var(--pg-font-family);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: var(--pg-button-font-size, 1rem);
+  line-height: var(--pg-button-line-height, 1.5rem);
   border: 1px solid var(--pg-button-border-color, #453C4F);
-  background-color: var(--pg-button-background-color, #fff);
+  background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
   padding: var(--pg-button-padding, 0.25rem 0.5rem);
-  border-radius: 0.25rem;
+  border-radius: var(--pg-button-border-radius, 0.25rem);
   outline: none;
   --pg-icon-color: var(--pg-button-color, #453C4F);
 }
@@ -21,8 +21,8 @@
 [part="button"]:hover {
   border: 1px solid var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
-  color: var(--pg-button-hover-color, #fff);
-  --pg-icon-color: var(--pg-button-hover-color, #fff);
+  color: var(--pg-button-hover-color, #FFFFFF);
+  --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);
 }
 
 [part="button"]:active {
@@ -41,18 +41,19 @@
   right: -1px;
   bottom: -1px;
   left: -1px;
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  border-radius: var(--pg-button-border-radius, 0.25rem);
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 [part="button"]:focus::before {
+  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-search-focus-glow, rgb(79, 143, 249, 0.5));
+  border-radius: var(--pg-button-border-radius, 0.25rem);
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="button"].start {

package/pg/button/button.spec.ts

@@ -0,0 +1,35 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './button';
+import PgButton from './button';
+
+const PG_BUTTON = 'pg-button';
+
+describe('pg-button', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_BUTTON);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_BUTTON)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_BUTTON);
+    expect(props.length).toBe(5);
+    expect(props).toContain('active');
+    expect(props).toContain('block');
+    expect(props).toContain('start');
+    expect(props).toContain('center');
+    expect(props).toContain('end');
+  });
+
+});

package/pg/button/button.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part, Prop, normalizeBoolean } from '@pictogrammers/element';
 
 import template from './button.html';
 import style from './button.css';
@@ -9,13 +9,15 @@ import style from './button.css';
   template
 })
 export default class PgButton extends HTMLElement {
-  @Prop() active: string | boolean = false;
-  @Prop() block: string | boolean = false;
-  @Prop() start: string | boolean = false;
-  @Prop() center: string | boolean = false;
-  @Prop() end: string | boolean = false;
+  @Prop(normalizeBoolean) active: boolean = false;
+  @Prop(normalizeBoolean) block: boolean = false;
+  @Prop(normalizeBoolean) start: boolean = false;
+  @Prop(normalizeBoolean) center: boolean = false;
+  @Prop(normalizeBoolean) end: boolean = false;
 
   @Part() $button: HTMLButtonElement;
+  @Part() $number: HTMLSpanElement;
+  @Part() $bar: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', (e) => {
@@ -25,21 +27,24 @@ export default class PgButton extends HTMLElement {
   }
 
   render(changes) {
-    const t = [true, 'true', ''];
     if (changes.active) {
-      this.$button.classList.toggle('active', t.includes(this.active));
+      this.$button.classList.toggle('active', this.active);
     }
     if (changes.start) {
-      this.$button.classList.toggle('start', t.includes(this.start));
+      this.$button.classList.toggle('start', this.start);
     }
     if (changes.end) {
-      this.$button.classList.toggle('end', t.includes(this.end));
+      this.$button.classList.toggle('end', this.end);
     }
     if (changes.center) {
-      this.$button.classList.toggle('center', t.includes(this.center));
+      this.$button.classList.toggle('center', this.center);
     }
     if (changes.block) {
-      this.$button.classList.toggle('block', t.includes(this.block));
+      this.$button.classList.toggle('block', this.block);
     }
   }
+
+  getBoundingClientRect(): DOMRect {
+    return this.$button.getBoundingClientRect();
+  }
 }

package/pg/buttonLink/buttonLink.css

@@ -46,9 +46,10 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
 }
 [part="button"]:focus::before {
+  pointer-events: none;
   content: '';
   position: absolute;
   top: -1px;
@@ -56,7 +57,7 @@
   bottom: -1px;
   left: -1px;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }
 
 [part="button"].start {

package/pg/buttonMenu/README.md

@@ -0,0 +1,54 @@
+# `<pg-button-toggle>`
+
+The `pg-button-toggle` component is essentially just a button with swappable slotted content. Commonly used with icons, but using `span` elements will allow assigning text content.
+
+```typescript
+import '@pictogrammers/components/pg/buttonToggle';
+import PgButtonToggle from '@pictogrammers/components/pg/buttonToggle';
+```
+
+```html
+<pg-button-toggle>
+  <pg-icon slot="active" path="M...Z"></pg-icon>
+  <pg-icon slot="inactive" path="M...Z"></pg-icon>
+</pg-button-toggle>
+```
+
+| Slots       | Tested   | Description |
+| ----------- | -------- | ----------- |
+| default     | &#x2705; | Button contents. |
+
+| Attribute  | Tested   | Description |
+| ---------- | -------- | ----------- |
+| block      |          | block sizing |
+| active     |          | Depressed visual state. |
+| start      |          | Internal Only |
+| end        |          | Internal Only |
+| center     |          | Internal Only |
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| click      | &#x2705; | Standard click. |
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-button-color` | `#453C4F` | Text color       |
+| `--pg-button-background-color` | `#fff` | Background color       |
+| `--pg-button-border-color` | `#453C4F`  | Border color       |
+| `--pg-button-hover-color` | `#fff`  | `:hover` Text color      |
+| `--pg-button-hover-background-color` | `#453C4F`  | `:hover` Background color      |
+| `--pg-button-hover-border-color` | `#453C4F`  | `:hover` Border color      |
+| `--pg-button-active-color` | `#fff`  | `active` Text color      |
+| `--pg-button-active-background-color` | `#453C4F`  | `active` Background color      |
+| `--pg-button-active-border-color` | `#453C4F`  | `active` Border color      |
+
+### Slots
+
+Special styling is applied for `pg-icon`.
+
+```html
+<pg-button-toggle>
+  <pg-icon slot="active" path="M...Z"></pg-icon>
+  <pg-icon slot="inactive" path="M...Z"></pg-icon>
+</pg-button-toggle>
+```

package/pg/buttonMenu/__examples__/basic/basic.html

@@ -0,0 +1,6 @@
+<div class="example">
+  <pg-button-menu part="menu"></pg-button-menu>
+  <div>
+    <code>value: <code part="value"></code></code>
+  </div>
+</div>

package/pg/buttonMenu/__examples__/basic/basic.ts

@@ -0,0 +1,43 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgButtonMenu from '../../buttonMenu';
+import PgMenuItemIcon from '../../../menuItemIcon/menuItemIcon';
+
+import template from './basic.html';
+
+const IconAccount = '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';
+
+@Component({
+  selector: 'x-pg-button-menu-basic',
+  template
+})
+export default class XPgButtonMenuBasic extends HTMLElement {
+
+  @Part() $menu: PgButtonMenu;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$menu.label = 'Options';
+    this.$menu.items = [{
+      value: 'item1',
+      label: 'Item 1',
+      icon: IconAccount,
+      type: PgMenuItemIcon,
+      items: [{
+        value: 'subitem1',
+        label: 'Sub Item 1',
+        icon: IconAccount,
+        type: PgMenuItemIcon
+      }]
+    }, {
+      value: 'item2',
+      label: 'Item 2'
+    }];
+    this.$menu.value = this.$menu.items[0];
+    this.$menu.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e: any) {
+    const { active } = e.detail;
+    this.$value.textContent = `${active}`;
+  }
+}

package/pg/buttonMenu/buttonMenu.css

@@ -0,0 +1,12 @@
+:host {
+  display: inline-flex;
+}
+
+span {
+  align-self: center;
+  display: flex;
+}
+
+[part=collapse] {
+  display: none;
+}

package/pg/buttonMenu/buttonMenu.html

@@ -0,0 +1,4 @@
+<pg-button part="button">
+  <span part="label"></span>
+  <pg-icon part="icon" path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
+</pg-button>

package/pg/buttonMenu/buttonMenu.ts

@@ -0,0 +1,63 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenuItem from '../menuItem/menuItem';
+import PgIcon from '../icon/icon';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
+
+import '../button/button';
+import PgButton from '../button/button';
+
+import template from './buttonMenu.html';
+import style from './buttonMenu.css';
+
+const IconExpand = 'M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z';
+const IconCollapse = 'M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z';
+
+@Component({
+  selector: 'pg-button-menu',
+  style,
+  template
+})
+export default class PgButtonMenu extends HTMLElement {
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+  @Prop() label: string = '';
+  @Prop() default: any = null;
+
+  @Part() $button: PgButton;
+  @Part() $icon: PgIcon;
+  @Part() $label: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+  }
+
+  #menuOpen = false;
+  async #handleClick() {
+    this.#menuOpen = !this.#menuOpen;
+    this.$icon.path = this.#menuOpen ? IconCollapse : IconExpand;
+    if (!this.#menuOpen) { return; }
+    // Create Menu
+    const result = await PgOverlayMenu.open({
+      source: this,
+      default: this.default ?? this.items[0],
+      value: this.items.find(x => x.value === this.value) ?? null,
+      items: this.items
+    });
+    this.$icon.path = IconExpand;
+    if (result !== undefined) {
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: {
+          value: result.value
+        }
+      }));
+    }
+    this.#menuOpen = false;
+  }
+}

package/pg/buttonMenu/index.ts

@@ -0,0 +1,3 @@
+import PgButtonMenu from './buttonMenu';
+
+export default PgButtonMenu;

package/pg/buttonToggle/__examples__/basic/basic.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part } from '@pictogrammers/element';
 import PgButtonToggle from '../../buttonToggle';
 
 import template from './basic.html';
@@ -18,6 +18,6 @@ export default class XPgButtonToggleBasic extends HTMLElement {
 
   handleClick(e) {
     const { active } = e.detail;
-    this.$value.innerText = `${active}`;
+    this.$value.textContent = `${active}`;
   }
 }

package/pg/buttonToggle/__examples__/persist/persist.html

@@ -0,0 +1,10 @@
+<div class="example">
+  <p>click to toggle and persist state in LocalStorage</p>
+  <pg-button-toggle part="button">
+    <pg-icon slot="inactive" path="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></pg-icon>
+    <pg-icon slot="active" path="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"></pg-icon>
+  </pg-button-toggle>
+  <div>
+    <code>button onclick: <code part="value"></code></code>
+  </div>
+</div>

package/pg/buttonToggle/__examples__/persist/persist.ts

@@ -0,0 +1,35 @@
+import { Component, Local, Part } from '@pictogrammers/element';
+import PgButtonToggle from '../../buttonToggle';
+
+import template from './persist.html';
+
+@Component({
+  selector: 'x-pg-button-toggle-persist',
+  template
+})
+export default class XPgButtonTogglePersist extends HTMLElement {
+
+  @Part() $button: PgButtonToggle;
+  @Part() $value: HTMLSpanElement;
+
+  // Get shared example store
+  @Local('example') #store = new Map<string, any>([
+    // example:toggle defaults to false
+    ['toggle', false]
+  ]);
+
+  connectedCallback() {
+    // replace with toggle event??? and throw for click events
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+    if (this.#store.get('toggle')) {
+      this.$button.active = true;
+      this.$value.textContent = 'true';
+    }
+  }
+
+  #handleClick(e: any) {
+    const { active } = e.detail;
+    this.$value.textContent = `${active}`;
+    this.#store.set('toggle', active);
+  }
+}

package/pg/cardUser/__examples__/basic/basic.ts

@@ -20,7 +20,6 @@ export default class XPgCardUserBasic extends HTMLElement {
       "description": "Hello, I am a developer that gets bored and makes icons, then websites for icons, then more icons. Open Source is pretty awesome.",
       "base64": AVATAR,
       "github": "Templarian",
-      "twitter": "Templarian",
       "iconCount": 928,
       "website": "http:\/\/templarian.com",
       "sponsored": true,

package/pg/cardUser/cardUser.css

@@ -43,8 +43,7 @@
   font-weight: bold;
 }
 
-[part="github"] svg,
-[part="twitter"] svg {
+[part="github"] svg {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -55,13 +54,6 @@
   color: #333;
 }
 
-[part="twitter"] {
-  grid-row: 2;
-  grid-column: 3;
-  color: #333;
-}
-
-[part="github"]:hover,
-[part="twitter"]:hover {
+[part="github"]:hover {
   color: #4f8ff9;
 }

package/pg/cardUser/cardUser.html

@@ -14,10 +14,5 @@
         <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
       </svg>
     </a>
-    <a part="twitter">
-      <svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
-      </svg>
-    </a>
   </div>
 </pg-card>

package/pg/cardUser/cardUser.ts

@@ -21,7 +21,6 @@ export default class PgCardUser extends HTMLElement {
   @Part() $user: HTMLDivElement;
   @Part() $name: HTMLDivElement;
   @Part() $github: HTMLAnchorElement;
-  @Part() $twitter: HTMLAnchorElement;
   @Part() $iconCountValue: HTMLDivElement;
   @Part() $avatar: PgAvatar;
 
@@ -29,9 +28,6 @@ export default class PgCardUser extends HTMLElement {
     addTooltip(this.$github, () => {
       return `View ${this.user?.github} on GitHub`;
     });
-    addTooltip(this.$twitter, () => {
-      return `View ${this.user?.twitter} on Twitter`;
-    });
   }
 
   render(changes) {
@@ -41,8 +37,6 @@ export default class PgCardUser extends HTMLElement {
       this.$iconCountValue.innerText = `${this.user.iconCount}`;
       this.$github.href = `https://github.com/${this.user.github}`;
       this.$github.style.setProperty('display', this.user.github ? null : 'none');
-      this.$twitter.href = `https://github.com/${this.user.twitter}`;
-      this.$twitter.style.setProperty('display', this.user.twitter ? null : 'none');
       this.$user.style.setProperty('display', null);
       this.$loading.style.setProperty('display', 'none');
     } else {

package/pg/database/README.md

@@ -3,7 +3,7 @@
 Out of all the components this is the most useful one as it controls the local cache of icon data. From a high level this component gives access to a `DatabaseService` instance.
 
 ```typescript
-import '@pictogrammers/components/pgAnnoy.js';
+import '@pictogrammers/components/pgDatabase.js';
 ```
 
 ## Usage

package/pg/database/__examples__/basic/basic.html

@@ -1,5 +1,6 @@
 <div class="example">
-  <pg-database part="database"></pg-database>
+  <!-- disable for now -->
+  <!--<pg-database part="database"></pg-database>-->
   <div>
     Total Icons: <code part="count"></code>
   </div>

package/pg/database/__examples__/basic/basic.ts

@@ -12,7 +12,7 @@ export default class XPgDatabaseBasic extends HTMLElement {
 
   @Prop() fontId = 'D051337E-BC7E-11E5-A4E9-842B2B6CFE1B';
 
-  @Part() $database: PgDatabase;
+  //@Part() $database: PgDatabase;
 
   @Part() $count: HTMLSpanElement;
   @Part() $total: HTMLSpanElement;
@@ -20,8 +20,8 @@ export default class XPgDatabaseBasic extends HTMLElement {
   icons: Icon[] = [];
 
   connectedCallback() {
-    this.$database.addEventListener('sync', this.handleSync.bind(this));
-    this.$database.font = this.fontId;
+    //this.$database.addEventListener('sync', this.handleSync.bind(this));
+    //this.$database.font = this.fontId;
   }
 
   async handleSync(e: CustomEvent) {

package/pg/dropdown/dropdown.ts

@@ -1,5 +1,4 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
-import { createPopper } from '@popperjs/core';
 
 import template from './dropdown.html';
 import style from './dropdown.css';
@@ -28,24 +27,6 @@ export default class PgDropdown extends HTMLElement {
   }
 
   wireUpPopover(node) {
-    createPopper(node, this.$popover, {
-      placement: 'bottom-start',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [-4, 8],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            element: this.$arrow,
-            padding: 0,
-          },
-        },
-      ]
-    });
     this.$popover.style.visibility = 'hidden';
     node.addEventListener('click', (e) => {
       this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';

package/pg/grid/__examples__/basic/basic.html

@@ -22,8 +22,8 @@
   </label>
 </p>
 <div class="example">
-  <pg-database part="database"></pg-database>
+  <!--<pg-database part="database"></pg-database>
   <pg-grid part="grid">
     <p>No Icons Found! default slot content</p>
-  </pg-grid>
+  </pg-grid>-->
 </div>