@pictogrammers/components 0.5.15 → 0.5.17

package/package.json

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

package/pg/autocompleteItem/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <p>Used internally by <code>PgPopoverAutocomplete</code>.</p>
+</div>

package/pg/autocompleteItem/autocompleteItem.css

@@ -0,0 +1,55 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  outline: none;
+  display: flex;
+  align-items: center;
+  font-family: var(--pg-font-family, system-ui);
+  text-align: var(--pg-autocomplete-item-text-align, left);
+  background-color: var(--pg-autocomplete-item-background, transparent);
+  padding: var(--pg-autocomplete-item-padding, 0.25rem 0.5rem);
+  border-color: transparent;
+  border-width: 0;
+  border-style: solid;
+  border-radius: var(--pg-autocomplete-item-border-radius, 0.25rem);
+  color: var(--pg-autocomplete-item-color, #453C4F);
+  width: 100%;
+  cursor: pointer;
+}
+
+[part=label]:not(:disabled):hover {
+  background-color: var(--pg-autocomplete-item-selected-background, #453C4F);
+  color: #FFFFFF;
+}
+
+[part=label]:not(:disabled):active {
+  background-color: var(--pg-autocomplete-item-active-background, #5f516e);
+  color: #FFFFFF;
+}
+
+[part=label]:disabled {
+  color: var(--pg-autocomplete-item-disabled-color, rgba(69, 60, 79, 0.75));
+  cursor: default;
+}
+
+[part=label]:focus-visible {
+  position: relative;
+}
+
+[part=label]:focus-visible::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: var(--pg-autocomplete-item-border-radius, 0.25rem);
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgba(79, 143, 249, 0.5));
+}
+
+[part=label]:focus-visible:not(:hover)::after {
+  background-color: var(--pg-focus-background-color, rgba(79, 143, 249, 0.1));
+}

package/pg/autocompleteItem/autocompleteItem.html

@@ -0,0 +1 @@
+<button part="label"></button>

package/pg/autocompleteItem/autocompleteItem.ts

@@ -0,0 +1,65 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './autocompleteItem.html';
+import style from './autocompleteItem.css';
+
+@Component({
+  selector: 'pg-autocomplete-item',
+  style,
+  template
+})
+export default class PgAutocompleteItem extends HTMLElement {
+  static delegatesFocus = true;
+
+  @Prop() index: number = 0;
+  @Prop() label: string = '';
+  @Prop() value: any = null;
+  @Prop() disabled: boolean = false;
+
+  @Part() $label: HTMLButtonElement;
+
+  render(changes) {
+    if (changes.label) {
+      this.$label.textContent = this.label;
+    }
+    if (changes.disabled) {
+      this.$label.disabled = this.disabled;
+    }
+  }
+
+  connectedCallback() {
+    this.$label.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { index: this.index, label: this.label, value: this.value }
+      }));
+    });
+    this.$label.addEventListener('keydown', (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 'Escape':
+          this.dispatchEvent(new CustomEvent('close'));
+          e.preventDefault();
+          break;
+      }
+    });
+  }
+
+  focus() {
+    this.$label.focus();
+  }
+
+  getHeight(): number {
+    return this.$label.getBoundingClientRect().height;
+  }
+}

package/pg/button/button.css

@@ -3,6 +3,11 @@
   width: fit-content;
 }
 
+:host:has(button.block) {
+  display: flex;
+  width: unset;
+}
+
 [part=button] {
   display: flex;
   align-items: center;

package/pg/buttonMenu/buttonMenu.ts

@@ -48,7 +48,7 @@ export default class PgButtonMenu extends HTMLElement {
       source: this,
       default: this.default ?? this.items[0],
       value: this.items.find(x => x.value === this.value) ?? null,
-      items: this.items
+      items: this.items,
     });
     this.$icon.path = IconExpand;
     if (result !== undefined) {

package/pg/inputCombobox/__examples__/basic/basic.ts

@@ -0,0 +1,33 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgInputCombobox from '../../inputCombobox';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-combobox-basic',
+  template
+})
+export default class XPgInputComboboxBasic extends HTMLElement {
+
+  @Part() $input: PgInputCombobox;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.options = [
+      { label: 'Dipper Pines', value: 'Dipper Pines' },
+      { label: 'Mabel Pines', value: 'Mabel Pines' },
+      { label: 'Stanley "Grunkle Stan" Pines', value: 'Stanley Pines' },
+      { label: 'Soos Ramirez', value: 'Soos Ramirez' },
+      { label: 'Wendy Corduroy', value: 'Wendy Corduroy' },
+      { label: 'Bill Cipher', value: 'Bill Cipher' },
+      { label: 'Stanford Pines', value: 'Stanford Pines' },
+    ];
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+  }
+
+  #handleChange(e: any) {
+    const { value } = e.detail;
+    this.$input.value = value;
+    this.$value.textContent = value;
+  }
+}

package/pg/inputCombobox/inputCombobox.ts

@@ -0,0 +1,158 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
+import PgMenuItem from '../menuItem/menuItem';
+
+import template from './inputCombobox.html';
+import style from './inputCombobox.css';
+
+interface InputComboboxItem {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pg-input-combobox',
+  style,
+  template
+})
+export default class PgInputCombobox extends HTMLElement {
+  @Prop() options: InputComboboxItem[] = [];
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+  @Prop() placeholder: string = '';
+
+  @Part() $container: HTMLDivElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$container.addEventListener('mousedown', this.#handleMousedown.bind(this));
+    this.$input.addEventListener('pointerdown', this.#handlePointerdown.bind(this));
+    this.$input.addEventListener('focus', this.#handleFocus.bind(this));
+    this.$input.addEventListener('click', this.#handleClick.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+    this.$input.addEventListener('keydown', this.#handleKeydown.bind(this));
+  }
+
+  render(changes) {
+    if (changes.value) {
+      const item = this.options.find(x => x.value === this.value);
+      this.$input.value = item ? item.label : '';
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+  }
+
+  #menuOpen = false;
+  #activeOverlay: PgOverlayMenu | null = null;
+  #pointerOnInput = false;
+
+  #toMenuItems(items: InputComboboxItem[]) {
+    return items.map(item => ({
+      label: item.label,
+      value: item.value,
+      type: PgMenuItem,
+    }));
+  }
+
+  #getFilteredItems(): InputComboboxItem[] {
+    const query = this.$input.value.toLowerCase().trim();
+    if (!query) return [...this.options];
+    return this.options.filter(x => x.label.toLowerCase().includes(query));
+  }
+
+  async #openMenu() {
+    if (this.#menuOpen || this.options.length === 0) return;
+    this.#menuOpen = true;
+
+    const filtered = this.#getFilteredItems();
+    const menuItems = this.#toMenuItems(filtered);
+
+    const prevMenus = new Set(Array.from(document.querySelectorAll('pg-overlay-menu')));
+    const promise = PgOverlayMenu.open({
+      source: this.$container,
+      items: menuItems,
+      preventFocus: true,
+    });
+    const newEl = Array.from(document.querySelectorAll('pg-overlay-menu')).find(
+      el => !prevMenus.has(el as PgOverlayMenu)
+    ) as PgOverlayMenu | null;
+    this.#activeOverlay = newEl ?? null;
+
+    const result = await promise;
+    this.#menuOpen = false;
+    this.#activeOverlay = null;
+
+    if (result !== undefined) {
+      const { item } = result;
+      if (item) {
+        this.$input.value = item.label;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: { value: item.value, label: item.label }
+        }));
+      }
+    }
+  }
+
+  #handleMousedown(e: MouseEvent) {
+    if (e.target !== this.$input) {
+      e.preventDefault();
+      this.$input.focus();
+    }
+  }
+
+  #handleFocus() {
+    // Defer past the click event: focus fires on mousedown, but the click that
+    // triggered it would otherwise be seen as an outside-click by popover="auto"
+    setTimeout(() => {
+      if (!this.#menuOpen) {
+        this.#openMenu();
+      }
+    }, 0);
+  }
+
+  #handleClick() {
+    // Handles the case where the input is already focused (no focus event fires)
+    if (!this.#menuOpen) {
+      this.#openMenu();
+    }
+  }
+
+  #handleInput() {
+    if (this.#menuOpen && this.#activeOverlay) {
+      const filtered = this.#getFilteredItems();
+      if (filtered.length === 0) {
+        this.#activeOverlay.close(undefined);
+        return;
+      }
+      const menuItems = (this.#activeOverlay as any).$menu?.items;
+      if (menuItems) {
+        menuItems.splice(0, menuItems.length, ...this.#toMenuItems(filtered));
+      }
+    } else {
+      this.#openMenu();
+    }
+  }
+
+  #handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (this.#activeOverlay) {
+          (this.#activeOverlay as any).$menu?.focus(0);
+        } else {
+          this.#openMenu();
+        }
+        break;
+      case 'Escape':
+        if (this.#activeOverlay) {
+          this.#activeOverlay.close(undefined);
+        }
+        break;
+    }
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/inputCombobox/inputCombobox.ts.tmp.44252.751480cb81cc

@@ -0,0 +1,158 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
+import PgMenuItem from '../menuItem/menuItem';
+
+import template from './inputCombobox.html';
+import style from './inputCombobox.css';
+
+interface InputComboboxItem {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pg-input-combobox',
+  style,
+  template
+})
+export default class PgInputCombobox extends HTMLElement {
+  @Prop() options: InputComboboxItem[] = [];
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+  @Prop() placeholder: string = '';
+
+  @Part() $container: HTMLDivElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$container.addEventListener('mousedown', this.#handleMousedown.bind(this));
+    this.$input.addEventListener('pointerdown', this.#handlePointerdown.bind(this));
+    this.$input.addEventListener('focus', this.#handleFocus.bind(this));
+    this.$input.addEventListener('click', this.#handleClick.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+    this.$input.addEventListener('keydown', this.#handleKeydown.bind(this));
+  }
+
+  render(changes) {
+    if (changes.value) {
+      const item = this.options.find(x => x.value === this.value);
+      this.$input.value = item ? item.label : '';
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+  }
+
+  #menuOpen = false;
+  #activeOverlay: PgOverlayMenu | null = null;
+  #pointerOnInput = false;
+
+  #toMenuItems(items: InputComboboxItem[]) {
+    return items.map(item => ({
+      label: item.label,
+      value: item.value,
+      type: PgMenuItem,
+    }));
+  }
+
+  #getFilteredItems(): InputComboboxItem[] {
+    const query = this.$input.value.toLowerCase().trim();
+    if (!query) return [...this.options];
+    return this.options.filter(x => x.label.toLowerCase().includes(query));
+  }
+
+  async #openMenu() {
+    if (this.#menuOpen || this.options.length === 0) return;
+    this.#menuOpen = true;
+
+    const filtered = this.#getFilteredItems();
+    const menuItems = this.#toMenuItems(filtered);
+
+    const prevMenus = new Set(Array.from(document.querySelectorAll('pg-overlay-menu')));
+    const promise = PgOverlayMenu.open({
+      source: this.$container,
+      items: menuItems,
+      preventFocus: true,
+    });
+    const newEl = Array.from(document.querySelectorAll('pg-overlay-menu')).find(
+      el => !prevMenus.has(el as PgOverlayMenu)
+    ) as PgOverlayMenu | null;
+    this.#activeOverlay = newEl ?? null;
+
+    const result = await promise;
+    this.#menuOpen = false;
+    this.#activeOverlay = null;
+
+    if (result !== undefined) {
+      const { item } = result;
+      if (item) {
+        this.$input.value = item.label;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: { value: item.value, label: item.label }
+        }));
+      }
+    }
+  }
+
+  #handleMousedown(e: MouseEvent) {
+    if (e.target !== this.$input) {
+      e.preventDefault();
+      this.$input.focus();
+    }
+  }
+
+  #handleFocus() {
+    // Defer past the click event: focus fires on mousedown, but the click that
+    // triggered it would otherwise be seen as an outside-click by popover="auto"
+    setTimeout(() => {
+      if (!this.#menuOpen) {
+        this.#openMenu();
+      }
+    }, 0);
+  }
+
+  #handleClick() {
+    // Handles the case where the input is already focused (no focus event fires)
+    if (!this.#menuOpen) {
+      this.#openMenu();
+    }
+  }
+
+  #handleInput() {
+    if (this.#menuOpen && this.#activeOverlay) {
+      const filtered = this.#getFilteredItems();
+      if (filtered.length === 0) {
+        this.#activeOverlay.close(undefined);
+        return;
+      }
+      const menuItems = (this.#activeOverlay as any).$menu?.items;
+      if (menuItems) {
+        menuItems.splice(0, menuItems.length, ...this.#toMenuItems(filtered));
+      }
+    } else {
+      this.#openMenu();
+    }
+  }
+
+  #handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (this.#activeOverlay) {
+          (this.#activeOverlay as any).$menu?.focus(0);
+        } else {
+          this.#openMenu();
+        }
+        break;
+      case 'Escape':
+        if (this.#activeOverlay) {
+          this.#activeOverlay.close(undefined);
+        }
+        break;
+    }
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/inputCombobox/inputCombobox.ts.tmp.44252.dcea847c40a8

@@ -0,0 +1,156 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgOverlayMenu from '../overlayMenu/overlayMenu';
+import PgMenuItem from '../menuItem/menuItem';
+
+import template from './inputCombobox.html';
+import style from './inputCombobox.css';
+
+interface InputComboboxItem {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pg-input-combobox',
+  style,
+  template
+})
+export default class PgInputCombobox extends HTMLElement {
+  @Prop() options: InputComboboxItem[] = [];
+  @Prop() value: string = '';
+  @Prop() name: string = '';
+  @Prop() placeholder: string = '';
+
+  @Part() $container: HTMLDivElement;
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$container.addEventListener('mousedown', this.#handleMousedown.bind(this));
+    this.$input.addEventListener('focus', this.#handleFocus.bind(this));
+    this.$input.addEventListener('click', this.#handleClick.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+    this.$input.addEventListener('keydown', this.#handleKeydown.bind(this));
+  }
+
+  render(changes) {
+    if (changes.value) {
+      const item = this.options.find(x => x.value === this.value);
+      this.$input.value = item ? item.label : '';
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+  }
+
+  #menuOpen = false;
+  #activeOverlay: PgOverlayMenu | null = null;
+
+  #toMenuItems(items: InputComboboxItem[]) {
+    return items.map(item => ({
+      label: item.label,
+      value: item.value,
+      type: PgMenuItem,
+    }));
+  }
+
+  #getFilteredItems(): InputComboboxItem[] {
+    const query = this.$input.value.toLowerCase().trim();
+    if (!query) return [...this.options];
+    return this.options.filter(x => x.label.toLowerCase().includes(query));
+  }
+
+  async #openMenu() {
+    if (this.#menuOpen || this.options.length === 0) return;
+    this.#menuOpen = true;
+
+    const filtered = this.#getFilteredItems();
+    const menuItems = this.#toMenuItems(filtered);
+
+    const prevMenus = new Set(Array.from(document.querySelectorAll('pg-overlay-menu')));
+    const promise = PgOverlayMenu.open({
+      source: this.$container,
+      items: menuItems,
+      preventFocus: true,
+    });
+    const newEl = Array.from(document.querySelectorAll('pg-overlay-menu')).find(
+      el => !prevMenus.has(el as PgOverlayMenu)
+    ) as PgOverlayMenu | null;
+    this.#activeOverlay = newEl ?? null;
+
+    const result = await promise;
+    this.#menuOpen = false;
+    this.#activeOverlay = null;
+
+    if (result !== undefined) {
+      const { item } = result;
+      if (item) {
+        this.$input.value = item.label;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: { value: item.value, label: item.label }
+        }));
+      }
+    }
+  }
+
+  #handleMousedown(e: MouseEvent) {
+    if (e.target !== this.$input) {
+      e.preventDefault();
+      this.$input.focus();
+    }
+  }
+
+  #handleFocus() {
+    // Defer past the click event: focus fires on mousedown, but the click that
+    // triggered it would otherwise be seen as an outside-click by popover="auto"
+    setTimeout(() => {
+      if (!this.#menuOpen) {
+        this.#openMenu();
+      }
+    }, 0);
+  }
+
+  #handleClick() {
+    // Handles the case where the input is already focused (no focus event fires)
+    if (!this.#menuOpen) {
+      this.#openMenu();
+    }
+  }
+
+  #handleInput() {
+    if (this.#menuOpen && this.#activeOverlay) {
+      const filtered = this.#getFilteredItems();
+      if (filtered.length === 0) {
+        this.#activeOverlay.close(undefined);
+        return;
+      }
+      const menuItems = (this.#activeOverlay as any).$menu?.items;
+      if (menuItems) {
+        menuItems.splice(0, menuItems.length, ...this.#toMenuItems(filtered));
+      }
+    } else {
+      this.#openMenu();
+    }
+  }
+
+  #handleKeydown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (this.#activeOverlay) {
+          (this.#activeOverlay as any).$menu?.focus(0);
+        } else {
+          this.#openMenu();
+        }
+        break;
+      case 'Escape':
+        if (this.#activeOverlay) {
+          this.#activeOverlay.close(undefined);
+        }
+        break;
+    }
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+}

package/pg/inputPill/inputPill.html

@@ -0,0 +1,6 @@
+<span part="label"></span>
+<button part="remove" type="button" aria-label="Remove">
+  <svg part="removeIcon" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+  </svg>
+</button>

package/pg/inputPill/inputPill.html.tmp.26852.84ac63f4c46f

@@ -0,0 +1,6 @@
+<span part="label"></span>
+<button part="remove" type="button" aria-label="Remove">
+  <svg part="removeIcon" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+  </svg>
+</button>