@pictogrammers/components 0.3.2 → 0.4.0

package/pg/overlayMenu/overlayMenu.css

@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+
+[part="overlay"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  top: calc(anchor(bottom) - 0.25rem);
+  left: anchor(left);
+  min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
+  translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
+  overflow: visible;
+}

package/pg/overlayMenu/overlayMenu.html

@@ -0,0 +1,3 @@
+<div part="overlay">
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/overlayMenu/overlayMenu.ts

@@ -0,0 +1,67 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../menu/menu';
+import PgOverlay from '../overlay/overlay';
+
+import template from './overlayMenu.html';
+import style from './overlayMenu.css';
+
+@Component({
+  selector: 'pg-overlay-menu',
+  template,
+  style
+})
+export default class PgOverlayMenu extends PgOverlay {
+  @Part() $overlay: HTMLDivElement;
+  @Part() $menu: PgMenu;
+
+  @Prop() source: HTMLElement | null = null;
+  @Prop() default: any = null;
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+
+  render(changes) {
+
+  }
+
+  connectedCallback() {
+    this.$menu.items = this.items;
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$overlay.popover = 'auto';
+    if (this.source !== null) {
+      // @ts-ignore
+      this.$overlay.showPopover({
+        source: this.source
+      });
+    }
+    this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    // Position
+    const rect = this.source?.getBoundingClientRect();
+    let x = 0, y = 0;
+    const value = this.value === null || typeof this.value !== 'object'
+      ? this.value
+      : this.value.value;
+    // value is an item in the items list
+    const index = this.value === null
+      ? 0
+      : this.items.findIndex(x => x.value === value);
+    // Focus
+    this.$menu.focus(index);
+  }
+
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      this.close();
+      this.source?.focus();
+    }
+  }
+
+  disconnectedCallback() {
+  }
+
+  #handleSelect(e: any) {
+    e.detail.item.index = e.detail.index;
+    this.close(e.detail.item);
+    this.source?.focus();
+  }
+}

package/pg/overlaySelectMenu/README.md

@@ -0,0 +1,33 @@
+# Overlay Menu
+
+The `PgOverlaySelectMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+
+Components that use `PgOverlaySelectMenu` include:
+
+- `pg-input-select`
+
+## Usage
+
+```typescript
+import PgMenuItem from '@pictogrammers/components/pg/menuItem';
+
+#isOpen: false;
+handleSourceClick() {
+  if (this.#isOpen) { return; }
+  this.#isOpen = true;
+  const result = await PgOverlayMenu.open({
+    source: this.$element,
+    items: [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    }, {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    }]
+  });
+  this.#isOpen = false;
+  console.log(result);
+}
+```

package/pg/overlaySelectMenu/__examples__/basic/basic.css

@@ -0,0 +1,3 @@
+p {
+  margin: 0.5rem 0;
+}

package/pg/overlaySelectMenu/__examples__/basic/basic.html

@@ -0,0 +1,5 @@
+<div class="example">
+  <button part="button">Create Menu Overlay</button>
+  <p>Result: <code part="result"></code></p></p>
+  <p>input: <code part="input"></code></p></p>
+</div>

package/pg/overlaySelectMenu/__examples__/basic/basic.ts

@@ -0,0 +1,62 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenuItem from '../../../menuItem/menuItem';
+import PgMenuDivider from '../../../menuDivider/menuDivider';
+import PgOverlaySelectMenu from '../../overlaySelectMenu';
+
+import template from './basic.html';
+import style from './basic.css';
+
+@Component({
+  selector: 'x-pg-overlay-select-menu-basic',
+  template,
+  style
+})
+export default class XPgOverlaySelectMenuBasic extends HTMLElement {
+  @Part() $button: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+  @Part() $input: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+  }
+
+  #value = null;
+
+  #menuOpen = false;
+  async #handleClick() {
+    if (this.#menuOpen) { return; }
+    const items = [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    },
+    {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 3',
+      value: 'item3',
+      type: PgMenuItem
+    }];
+    this.#menuOpen = true;
+    const result = await PgOverlaySelectMenu.open({
+      source: this.$button,
+      value: this.#value,
+      items,
+      oninput: (value) => {
+        this.$input.textContent = value;
+      }
+    });
+    if (result !== undefined) {
+      this.#value = result;
+    }
+    this.$result.textContent = result;
+    this.#menuOpen = false;
+  }
+}

package/pg/overlaySelectMenu/index.ts

@@ -0,0 +1,3 @@
+import PgOverlaySelectMenu from './overlaySelectMenu';
+
+export default PgOverlaySelectMenu;

package/pg/overlaySelectMenu/overlaySelectMenu.css

@@ -0,0 +1,17 @@
+:host {
+  display: contents;
+}
+
+[part="overlay"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+  --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  top: anchor(top);
+  left: anchor(left);
+  min-width: calc(anchor-size(width) + calc(2 * var(--pg-menu-padding, 0.25rem)));
+  margin: var(--pg-overlay-menu-_y, 0) 0 0 var(--pg-overlay-menu-_x, 0);
+  overflow: visible;
+}

package/pg/overlaySelectMenu/overlaySelectMenu.html

@@ -0,0 +1,3 @@
+<div part="overlay">
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -0,0 +1,96 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../menu/menu';
+import PgOverlay from '../overlay/overlay';
+
+import template from './overlaySelectMenu.html';
+import style from './overlaySelectMenu.css';
+
+@Component({
+  selector: 'pg-overlay-select-menu',
+  template,
+  style
+})
+export default class PgOverlaySelectMenu extends PgOverlay {
+  @Part() $overlay: HTMLDivElement;
+  @Part() $menu: PgMenu;
+
+  @Prop() source: HTMLElement | null = null;
+  @Prop() default: any = null;
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+
+  render(changes) {
+    if (changes.items) {
+      if (this.value !== null) {
+        this.items.forEach(item => item.checked = false);
+        this.items.find(item => item.value === this.value.value).checked = true;
+      }
+    }
+  }
+
+  connectedCallback() {
+    // Pass throughs are binded once, do not do this in render
+    this.$menu.items = this.items;
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$overlay.popover = 'auto';
+    if (this.source !== null) {
+      // @ts-ignore
+      this.$overlay.showPopover({
+        source: this.source
+      });
+    }
+    this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    // Position
+    const rect = this.source?.getBoundingClientRect();
+    let x = 0, y = 0;
+    const value = this.value === null || typeof this.value !== 'object'
+      ? this.value
+      : this.value.value;
+    // value is an item in the items list
+    const index = this.value === null
+      ? -1
+      : this.items.findIndex(x => x.value === value);
+    if (index !== -1) {
+      const height = this.$menu.getItemHeight(index);
+      // Overlap item
+      y -= this.$menu.getItemOffset(0, index);
+      if (rect?.height !== height && rect?.height) {
+        y += (rect.height - height) / 2;
+      }
+    } else if (this.items.length > 0) {
+      // insert default if defined
+      if (this.default) {
+        this.default.checked = true;
+        this.$menu.items.unshift(this.default);
+      }
+      // focus first item
+      const height = this.$menu.getItemHeight(0);
+      y -= this.$menu.getItemOffset(0, 0);
+      if (rect?.height !== height && rect?.height) {
+        y += (rect.height - height) / 2;
+      }
+    }
+    // ToDo: update to CSS Variables
+    this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
+    this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
+    // Focus
+    this.$menu.focus(index);
+  }
+
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      this.close();
+      this.source?.focus();
+    }
+  }
+
+  disconnectedCallback() {
+  }
+
+  #handleSelect(e: any) {
+    e.detail.item.index = e.detail.index;
+    this.close(e.detail.item);
+    this.source?.focus();
+  }
+}

package/pg/overlaySubMenu/README.md

@@ -0,0 +1,35 @@
+# Overlay Menu
+
+The `PgOverlaySubMenu` creates an overlay menu above a source element. For standard menu lists use the `PgMenuItem` for the check.
+
+Components that use `PgOverlaySubMenu` include:
+
+- `pg-input-select`
+
+## Usage
+
+```typescript
+import PgMenuItem from '@pictogrammers/components/pg/overlaySubMenu';
+
+#isOpen: false;
+handleSourceClick(e: MouseEvent) {
+  if (this.#isOpen) { return; }
+  this.#isOpen = true;
+  const result = await PgOverlaySubMenu.open({
+    source: this.$element,
+    x: e.clientX,
+    y: e.clientY,
+    items: [{
+      label: 'Item 1',
+      value: 'item1',
+      type: PgMenuItem
+    }, {
+      label: 'Item 2',
+      value: 'item2',
+      type: PgMenuItem
+    }]
+  });
+  this.#isOpen = false;
+  console.log(result);
+}
+```

package/pg/overlaySubMenu/index.ts

@@ -0,0 +1,3 @@
+import PgOverlaySubMenu from './overlaySubMenu';
+
+export default PgOverlaySubMenu;

package/pg/overlaySubMenu/overlaySubMenu.css

@@ -0,0 +1,27 @@
+:host {
+  display: contents;
+}
+
+[part="overlay"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+  --pg-menu-box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+  top: calc(anchor(top) - 0.25rem);
+  left: calc(anchor(right) - 0.25rem);
+  min-width: 10rem;
+  translate: var(--pg-overlay-menu-_x, 0) var(--pg-overlay-menu-_y, 0);
+  position-try-fallbacks: --custom-right, --custom-left;
+}
+
+@position-try --custom-right {
+  top: calc(anchor(top) - 0.25rem);
+  left: calc(anchor(right) - 0.25rem);
+}
+
+@position-try --custom-left {
+  top: calc(anchor(top) - 0.25rem);
+  left: calc(anchor(left) - anchor-size(width) + 0.25rem);
+}

package/pg/overlaySubMenu/overlaySubMenu.html

@@ -0,0 +1,3 @@
+<div part="overlay">
+  <pg-menu part="menu"></pg-menu>
+</div>

package/pg/overlaySubMenu/overlaySubMenu.ts

@@ -0,0 +1,103 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import PgMenu from '../menu/menu';
+import PgOverlay from '../overlay/overlay';
+
+import template from './overlaySubMenu.html';
+import style from './overlaySubMenu.css';
+
+// Only allow a single open context menu
+const stack: PgOverlaySubMenu[] = [];
+const stack2: PgOverlaySubMenu[] = [];
+
+@Component({
+  selector: 'pg-overlay-sub-menu',
+  template,
+  style
+})
+export default class PgOverlaySubMenu extends PgOverlay {
+  @Part() $overlay: HTMLDivElement;
+  @Part() $menu: PgMenu;
+
+  @Prop() source: HTMLElement | null = null;
+  @Prop() x: number = 0;
+  @Prop() y: number = 0;
+  @Prop() default: any = null;
+  @Prop() items: any[] = [];
+  @Prop() value: any = null;
+
+  render(changes) {
+    if (changes.items) {
+      //if (this.value !== null) {
+      //  this.items.forEach(item => item.checked = false);
+      //  this.items.find(item => item.value === this.value.value).checked = true;
+      //}
+      this.$menu.items = this.items;
+    }
+  }
+
+  connectedCallback() {
+    stack.pop()?.close();
+    stack.push(this);
+    stack2.push(this);
+    this.$menu.addEventListener('select', this.#handleSelect.bind(this));
+    this.$menu.addEventListener('close', this.#handleClose.bind(this));
+    this.$overlay.popover = 'auto';
+    if (this.source !== null) {
+      // @ts-ignore
+      this.$overlay.showPopover({
+        source: this.source
+      });
+    }
+    this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    // Position
+    const rect = this.source?.getBoundingClientRect();
+    const x = 0, y = 0; // this.x - (rect?.left || 0),
+    //  y = this.y - (rect?.top || 0);
+    // ToDo: update to CSS Variables
+    this.$overlay.style.setProperty('--pg-overlay-menu-_x', `${x}px`);
+    this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
+    // Focus
+    this.$menu.focus(0);
+    // Should return focus
+    this.#handleDown = this.#down.bind(this);
+    document.addEventListener('pointerdown', this.#handleDown);
+  }
+
+  #ignore = false;
+  #handleDown;
+  #down(e: MouseEvent) {
+    this.#ignore = e.composedPath().includes(this.source as any);
+  }
+
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      //this.close();
+      if (stack2.length === 0 && this.#ignore) {
+        console.log(e);
+        this.source?.focus();
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    stack2.pop();
+    document.removeEventListener('pointerdown', this.#handleDown);
+  }
+
+  #handleClose(e: any) {
+    const { depth } = e.detail;
+    console.log('close', depth);
+    if (depth === 1) {
+      this.close(null);
+    } else {
+      this.close();
+    }
+  }
+
+  #handleSelect(e: any) {
+    e.detail.item.index = e.detail.index;
+    this.close(e.detail.item);
+    this.source?.focus();
+  }
+}

package/pg/picker/picker.ts

@@ -1,7 +1,6 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 import PgButton from '../button/button';
 import PgGrid from '../grid/grid';
-import { createPopper } from '@popperjs/core';
 
 import template from './picker.html';
 import style from './picker.css';
@@ -24,24 +23,7 @@ export default class PgPicker extends HTMLElement { // extends PgButton = bug in
 
   isVisible = false;
   connectedCallback() {
-    /*createPopper(this.$button, 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';
     this.$button.addEventListener('click', () => {
       this.$popover.style.visibility = this.isVisible ? 'hidden' : 'visible';

package/pg/scroll/__examples__/basic/basic.ts

@@ -70,7 +70,7 @@ export default class XPgScrollBasic extends HTMLElement {
       }
       this.$scrollList.style.transform = `translateY(${-1 * offsetY % 44}px)`;
     });
-    function overflow(overflowText) {
+    const overflow = (overflowText) => {
       if (overflowText === 'auto') {
         this.$overflowContainer.style.overflow = 'auto';
         this.$overflowContainer.style.height = '300px';

package/pg/search/__examples__/basic/basic.ts

@@ -3,6 +3,8 @@ import PgSearch from '../../search';
 import { mdiAccount, mdiAccountBox, mdiAccountCircle } from './constants';
 
 import template from './basic.html';
+import { Alias } from '../../../shared/models/alias';
+import { Icon } from '../../../shared/models/icon';
 
 @Component({
   selector: 'x-pg-search-basic',
@@ -12,18 +14,19 @@ export default class XPgSearchBasic extends HTMLElement {
   @Part() $search: PgSearch;
 
   connectedCallback() {
-    this.$search.items = [
+    this.$search.items.push(
       { type: 'Documentation', name: 'Android', url: '/getting-started/android' },
       { type: 'Documentation', name: 'Angular', url: '/getting-started/angular' },
       { type: 'Documentation', name: 'AngularJS', url: '/getting-started/angularjs' },
       { type: 'Documentation', name: 'Bootstrap', url: '/getting-started/bootstrap' },
       { type: 'Documentation', name: 'How to Play Football', url: '/getting-started/football' },
       { type: 'Documentation', name: 'Foo Angular Foo Angular', url: '/getting-started/bootstraps' }
-    ];
-    this.$search.icons = [
-      { name: 'account', data: mdiAccount, aliases: [{ name: 'user' }] },
-      { name: 'account-box', data: mdiAccountBox, aliases: [{ name: 'user-box' }] },
-      { name: 'account-circle', data: mdiAccountCircle, aliases: [{ name: 'user-circle' }] }
-    ] as any;
+    );
+    // fix types later
+    this.$search.icons.push(
+      //(new Icon()).from({ name: 'account', data: mdiAccount, aliases: [(new Alias()).from({ name: 'user' })] }),
+      //{ name: 'account-box', data: mdiAccountBox, aliases: [(new Alias()).from({ name: 'user-box' })] },
+      //{ name: 'account-circle', data: mdiAccountCircle, aliases: [(new Alias()).from({ name: 'user-circle' })] }
+     );
   }
 }

package/pg/search/search.css

@@ -21,10 +21,10 @@ input {
   border: .0625rem solid var(--pg-search-border-color);
 }
 input:active {
-  box-shadow: 0 0 0 3px var(--pg-search-active-glow, rgb(79, 143, 249, 0.6));
+  box-shadow: 0 0 0 3px var(--pg-search-active-glow, rgba(79, 143, 249, 0.6));
 }
 input:focus {
-  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, rgba(79, 143, 249, 0.5));
 }
 .active input + svg path {
   fill: #453C4F;

package/pg/shared/models/user.ts

@@ -2,7 +2,6 @@ export class User {
 
   public id: string | null = null;
   public github: string | null = null;
-  public twitter: string | null = null;
   public name: string | null = null;
   public base64: string | null = null;
   public iconCount: number | null = null;
@@ -15,7 +14,6 @@ export class User {
   from(user: User): User {
       this.id = user.id;
       this.github = user.github;
-      this.twitter = user.twitter;
       this.name = user.name;
       if (typeof user.base64 === 'string') {
           if (user.base64.match(/^data/)) {

package/pg/tab/tab.ts

@@ -3,13 +3,6 @@ import { Component, Prop, Part } from '@pictogrammers/element';
 import template from './tab.html';
 import style from './tab.css';
 
-function uuid() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-    return v.toString(16);
-  });
-}
-
 @Component({
   selector: 'pg-tab',
   style,
@@ -21,8 +14,6 @@ export default class PgTab extends HTMLElement {
 
   @Part() $tab: HTMLDivElement;
 
-  uuid = uuid();
-
   connectedCallback() {
 
   }
@@ -40,7 +31,6 @@ export default class PgTab extends HTMLElement {
       this.dispatchEvent(
         new CustomEvent('tab', {
           detail: {
-            id: this.uuid,
             label: this.label
           },
           bubbles: true

package/pg/tabs/partials/tab.css

@@ -0,0 +1,42 @@
+
+[part="button"] {
+  position: relative;
+  display: flex;
+  line-height: calc(2.5rem - 0.5px);
+  border-top: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-bottom: 0;
+  border-left: 1px solid transparent;
+  border-radius: 0.25rem 0.25rem 0 0;
+  padding: 0 0.75rem;
+  text-decoration: none;
+  color: var(--pg-tab-border, #453C4F);
+  align-items: center;
+  align-content: center;
+  box-sizing: border-box;
+  outline: none;
+  background: transparent;
+}
+
+[part="button"].selected {
+  border-color: var(--pg-tab-border, #453C4F);
+  font-weight: bold;
+  background: #fff;
+  cursor: default;
+  height: calc(2.5rem + 0.5px);
+}
+
+[part="button"]:not(.selected):hover {
+  border-color: var(--pg-tab-border, #453C4F);
+}
+
+[part="button"].selected:focus-visible {
+  color: #197BE0;
+  border-color: rgb(79, 143, 249);
+}
+
+[part="button"]:not(.selected):focus-visible {
+  background: var(--pg-focus-color, rgb(79, 143, 249, 0.15));
+  border-color: rgb(79, 143, 249);
+  color: #197BE0;
+}