npm - @pictogrammers/components - Versions diffs - 0.5.14 → 0.5.17 - Mend

@pictogrammers/components 0.5.14 → 0.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/package.json +1 -1
package/pg/autocompleteItem/__examples__/basic/basic.html +3 -0
package/pg/autocompleteItem/autocompleteItem.css +55 -0
package/pg/autocompleteItem/autocompleteItem.html +1 -0
package/pg/autocompleteItem/autocompleteItem.ts +65 -0
package/pg/button/button.css +5 -0
package/pg/buttonMenu/buttonMenu.ts +1 -1
package/pg/inputCombobox/__examples__/basic/basic.ts +33 -0
package/pg/inputCombobox/inputCombobox.ts +158 -0
package/pg/inputCombobox/inputCombobox.ts.tmp.44252.751480cb81cc +158 -0
package/pg/inputCombobox/inputCombobox.ts.tmp.44252.dcea847c40a8 +156 -0
package/pg/inputNumber/inputNumber.ts +31 -13
package/pg/inputPill/inputPill.html +6 -0
package/pg/inputPill/inputPill.html.tmp.26852.84ac63f4c46f +6 -0
package/pg/inputPill/inputPill.ts +41 -0
package/pg/inputPills/__examples__/basic/basic.html +9 -0
package/pg/inputPills/__examples__/basic/basic.html.tmp.26852.4771e4cad5b7 +9 -0
package/pg/inputPills/__examples__/basic/basic.ts.tmp.26852.d8fe41df18bd +0 -0
package/pg/inputPixelEditor/README.md +104 -69
package/pg/inputPixelEditor/README.md.tmp.42596.658de5f0a6f5 +0 -0
package/pg/inputPixelEditor/__examples__/basic/basic.ts +6 -5
package/pg/inputPixelEditor/inputPixelEditor.ts +95 -23
package/pg/inputPixelEditor/inputPixelEditor.ts.tmp.38516.96529dd82670 +1703 -0
package/pg/inputPixelEditor/inputPixelEditor.ts.tmp.42596.48ecc3ad9c72 +1724 -0
package/pg/inputPixelEditor/utils/bitmapToMask.ts +113 -79
package/pg/inputPixelEditor/utils/getLassoPixels.ts +51 -0
package/pg/inputRange/inputRange.css +7 -0
package/pg/inputSelect/__examples__/basic/basic.ts +2 -2
package/pg/inputSelect/inputSelect.css +1 -1
package/pg/inputSelect/inputSelect.ts +62 -5
package/pg/inputText/README.md +6 -6
package/pg/inputText/__examples__/basic/basic.ts +1 -1
package/pg/inputText/inputText.css +2 -2
package/pg/inputText copy/README.md +38 -0
package/pg/inputText copy/inputText.css +41 -0
package/pg/inputText copy/inputText.html +1 -0
package/pg/inputText copy/inputText.spec.ts +59 -0
package/pg/inputText copy/inputText.ts +67 -0
package/pg/inputTextarea/README.md +39 -0
package/pg/inputTextarea/__examples__/basic/basic.html +9 -0
package/pg/inputTextarea/__examples__/basic/basic.ts +30 -0
package/pg/inputTextarea/inputTextarea.ts +121 -0
package/pg/inputTextarea copy/README.md +39 -0
package/pg/inputTextarea copy/inputTextarea.css +41 -0
package/pg/inputTextarea copy/inputTextarea.html +1 -0
package/pg/inputTextarea copy/inputTextarea.spec.ts +59 -0
package/pg/inputTextarea copy/inputTextarea.ts +79 -0
package/pg/inputTextareaAutocomplete/README.md +70 -0
package/pg/inputTextareaAutocomplete/__examples__/basic/basic.ts +67 -0
package/pg/inputTextareaAutocomplete/inputTextareaAutocomplete.ts +267 -0
package/pg/node/README.md +35 -0
package/pg/node/__examples__/basic/basic.ts +34 -0
package/pg/node/index.ts +3 -0
package/pg/node/node.css +53 -0
package/pg/node/node.html +5 -0
package/pg/node/node.ts +270 -0
package/pg/nodeEditorLink/nodeEditorLink.css +69 -0
package/pg/nodeEditorLink/nodeEditorLink.css.tmp.1408.09e961fd0dcc +69 -0
package/pg/nodeEditorLink/nodeEditorLink.html +9 -0
package/pg/nodeEditorNumber/nodeEditorNumber.css +59 -0
package/pg/nodeEditorNumber/nodeEditorNumber.ts +57 -0
package/pg/nodeEditorRange/nodeEditorRange.css +23 -0
package/pg/nodeEditorRange/nodeEditorRange.ts +69 -0
package/pg/nodeEditorText/__examples__/basic/basic.html +9 -0
package/pg/nodeEditorText/__examples__/basic/basic.ts +30 -0
package/pg/nodeEditorText/nodeEditorText.css +17 -0
package/pg/nodeEditorText/nodeEditorText.html +4 -0
package/pg/nodeEditorText/nodeEditorText.ts +57 -0
package/pg/nodeEditorText copy/README.md +35 -0
package/pg/nodeEditorText copy/nodeEditorText.css +49 -0
package/pg/nodeEditorText copy/nodeEditorText.html +4 -0
package/pg/nodeEditorText copy/nodeEditorText.ts +50 -0
package/pg/nodeEditorTextArray/nodeEditorTextArray.css +68 -0
package/pg/nodeEditorTextArray/nodeEditorTextArray.html +9 -0
package/pg/nodeEditorTextArray/nodeEditorTextArray.ts +162 -0
package/pg/nodeEntry/nodeEntry.css +61 -0
package/pg/nodeEntry/nodeEntry.ts +164 -0
package/pg/nodeEntry/nodeEntry.ts.tmp.28724.dda67762bca5 +164 -0
package/pg/nodeInputText/nodeInputText.css +75 -0
package/pg/nodeInputText/nodeInputText.html +4 -0
package/pg/nodeInputText/nodeInputText.ts +105 -0
package/pg/nodeOutput/nodeOutput.css +32 -0
package/pg/nodeResize/README.md +3 -0
package/pg/nodeResize/THINKING.md +81 -0
package/pg/nodeResize/THINKING.md.tmp.24812.99a70ba81062 +81 -0
package/pg/nodeResize/basic/basic.ts +17 -0
package/pg/nodeResize/dragUtil.ts +105 -0
package/pg/nodeResize/dragUtil.ts.tmp.34372.787464c73309 +75 -0
package/pg/nodeResize/nodeResize.css +187 -0
package/pg/nodeResize/nodeResize.html +9 -0
package/pg/nodeResize/nodeResize.ts +156 -0
package/pg/nodes/README.md +177 -0
package/pg/nodes/__examples__/basic/basic.html +33 -0
package/pg/nodes/__examples__/basic/basic.ts +716 -0
package/pg/nodes/__examples__/basic/exampleNodes.ts +129 -0
package/pg/nodes/__examples__/basic/exampleScripts.ts +129 -0
package/pg/nodes/__examples__/basic/keystore.ts +38 -0
package/pg/nodes/executeInSandbox.ts +32 -0
package/pg/nodes/index.ts +3 -0
package/pg/nodes/nodes.css +69 -0
package/pg/nodes/nodes.html +6 -0
package/pg/nodes/nodes.ts +1240 -0
package/pg/nodes copy/nodes.css +41 -0
package/pg/nodes copy/nodes.html +1 -0
package/pg/overlayContextMenu/__examples__/filter/filter.ts +87 -0
package/pg/overlayContextMenu/overlayContextMenu.css +14 -0
package/pg/overlayContextMenu/overlayContextMenu.html +4 -3
package/pg/overlayContextMenu/overlayContextMenu.ts +6 -2
package/pg/overlayContextMenu/overlayContextMenu.ts.tmp.37088.530ff1c0a321 +0 -0
package/pg/overlayMenu/overlayMenu.css +3 -1
package/pg/overlayMenu/overlayMenu.ts +11 -2
package/pg/overlayMenu/overlayMenu.ts.tmp.44252.9bb22fd59ede +80 -0
package/pg/overlaySelectMenu/overlaySelectMenu.css +2 -0
package/pg/overlaySubMenu/overlaySubMenu.css +8 -6
package/pg/poco/README.md +22 -0
package/pg/poco/__examples__/basic/basic.html +11 -0
package/pg/poco/__examples__/basic/basic.ts +95 -0
package/pg/poco/__examples__/basic/examples.ts +258 -0
package/pg/poco/__examples__/basic/myFont.ts +1300 -0
package/pg/poco/index.ts +3 -0
package/pg/poco/mockPoco.ts +640 -0
package/pg/poco/poco.css +7 -0
package/pg/poco/poco.html +1 -0
package/pg/poco/poco.ts +75 -0
package/pg/popover/README.md +47 -0
package/pg/popover/__examples__/basic/basic.html +3 -0
package/pg/popover/popover.html +3 -0
package/pg/popover/popover.ts +44 -0
package/pg/popoverAutocomplete/__examples__/basic/basic.html +4 -0
package/pg/popoverAutocomplete/__examples__/basic/basic.ts +46 -0
package/pg/popoverAutocomplete/popoverAutocomplete.css +25 -0
package/pg/popoverAutocomplete/popoverAutocomplete.html +1 -0
package/pg/popoverAutocomplete/popoverAutocomplete.ts +134 -0
package/pg/popoverAutocompleteItem/popoverAutocompleteItem.css +69 -0
package/pg/popoverAutocompleteItem/popoverAutocompleteItem.ts +90 -0
package/pg/table/__examples__/basic/basic.ts +1 -0
package/pg/tableCellFileLocal/tableCellFileLocal.html +3 -0
package/pg/tableCellFileLocal/tableCellFileLocal.html.tmp.20484.68ee2e30710e +3 -0
package/pg/tableCellFileLocal/tableCellFileLocal.ts +44 -0
package/pg/tableCellSelect/tableCellSelect.html +3 -0
package/pg/tableCellSelect/tableCellSelect.html.tmp.41808.99c1a6f14340 +3 -0
package/pg/tableCellSelect/tableCellSelect.ts +51 -0
package/pg/tree/__examples__/basic/basic.ts +12 -5
package/pg/tree/tree.html +1 -1
package/pg/tree/tree.ts +385 -227
package/pg/tree/tree.ts.tmp.38376.07d376a04f41 +343 -0
package/pg/tree/tree.ts.tmp.38376.2a04599ade9f +361 -0
package/pg/tree/tree.ts.tmp.38376.6cb2c663d476 +0 -0
package/pg/tree/tree.ts.tmp.38376.ac5af1aff2b0 +393 -0
package/pg/tree/tree.ts.tmp.38376.ac9acfc4f95f +324 -0
package/pg/treeItem/treeItem.ts +536 -558
package/pg/treeItem/treeItem.ts.tmp.38376.145d3121d648 +530 -0
package/pg/treeItem/treeItem.ts.tmp.38376.b5224d48e5c0 +0 -0

package/pg/poco/poco.ts ADDED Viewed

@@ -0,0 +1,75 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import { MockBitmap, MockPoco, MockResource, MockParseBMP, MockParseBMF } from './mockPoco';
+import template from './poco.html';
+import style from './poco.css';
+import { FntFont } from '@pictogrammers/fnt/dist/shared';
+@Component({
+  selector: 'pg-poco',
+  style,
+  template,
+})
+export default class PgPoco extends HTMLElement {
+  @Prop() width: number = 400;
+  @Prop() height: number = 240;
+  @Part() $canvas: HTMLCanvasElement;
+  #poco: MockPoco;
+  connectedCallback() {
+    this.$canvas.width = this.width;
+    this.$canvas.height = this.height;
+    this.$canvas.style.width = `${this.width}px`;
+    this.$canvas.style.height = `${this.height}px`;
+    this.#poco = new MockPoco(this.$canvas);
+  }
+  get poco() {
+    return this.#poco;
+  }
+  get Resource() {
+    return MockResource;
+  }
+  get parseBMP() {
+    return MockParseBMP;
+  }
+  get parseBMF() {
+    return MockParseBMF;
+  }
+  setResourceBMP(
+    fileName: string,
+    buffer: any,
+  ) {
+    MockResource.setBMP(fileName, MockBitmap.from(buffer));
+  }
+  setResourceBMPCanvas(
+    fileName: string,
+    width: number,
+    height: number,
+    create: (ctx: CanvasRenderingContext2D, w: number, h: number) => void,
+  ) {
+    MockResource.setBMP(fileName, MockBitmap.create(width, height, create));
+  }
+  setResourceBMF(
+    fileName: string,
+    buffer:  ArrayBuffer | Uint8Array<ArrayBufferLike>,
+  ) {
+    MockResource.setBMF(fileName, buffer);
+  }
+  setResourceBMFJSON(
+    fileName: string,
+    json: FntFont,
+  ) {
+    MockResource.setBMFJSON(fileName, json);
+  }
+}

package/pg/popover/README.md ADDED Viewed

@@ -0,0 +1,47 @@
+# `PgPopover`
+The `PgPopover` class provides a way to create a non-modal element on the body element. Unlike `PgOverlay`, `PgPopover` does not trap focus and `create` returns the created instance directly rather than a Promise.
+Elements that should be attached at the body root without blocking interaction (tooltips, dropdowns, context menus) should extend `PgPopover`.
+| Method | Description |
+| ------ | ----------- |
+| `destroy()` | Destroy |
+| `hide()` | Hide |
+| `show()` | Show |
+## Example Tooltip
+```typescript
+import { Component, Prop } from '@pictogrammers/element';
+import PgPopover from '@pictogrammers/components/pgPopover';
+import template from './tooltip.html';
+import style from './tooltip.css';
+@Component({
+  selector: 'my-tooltip',
+  template,
+  style
+})
+export default class MyTooltip extends PgPopover {
+  // This will render attached to the body.
+  // To close call this.close();
+  @Prop() message: string = '';
+}
+```
+The `create` method creates an instance, attaches it to the `<body>` tag, and returns it synchronously.
+```typescript
+import MyTooltip from './../tooltip/tooltip';
+const tooltip = PgTooltip.create({
+  source: this.$trigger,
+  message: 'Hello!',
+});
+// Later, dismiss it:
+tooltip.destroy();
+```

package/pg/popover/__examples__/basic/basic.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div class="example">
+  <p>Extend <code>PgPopover</code> to create popovers. View the readme for details.</p>
+</div>

package/pg/popover/popover.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div part="popover" popover="manual">
+  <child/>
+</div>

package/pg/popover/popover.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import template from './popover.html';
+const layers: Set<HTMLElement> = new Set();
+type OmitByPrefix<T, Prefix extends string> = {
+  [K in keyof T as K extends `${Prefix}${string}` ? never : K]: T[K];
+};
+@Component({
+  template,
+})
+export default class PgPopover extends HTMLElement {
+  static create<T extends typeof PgPopover>(this: T, props: Partial<OmitByPrefix<Omit<InstanceType<T>, Exclude<keyof PgPopover, 'source'>>, '$'>>): InstanceType<T> {
+    var ele = document.createElement(this.name) as InstanceType<T>;
+    props && Object.assign(ele, props);
+    document.body.appendChild(ele);
+    layers.add(ele);
+    return ele;
+  }
+  @Prop() source: HTMLElement | null = null;
+  @Part() $popover: PgPopover;
+  visible = false;
+  hide() {
+    this.$popover.hidePopover();
+    this.visible = false;
+  }
+  show() {
+    // @ts-ignore
+    this.$popover.showPopover({ source: this.source });
+    this.visible = true;
+  }
+  destroy() {
+    this.remove();
+    layers.delete(this);
+  }
+}

package/pg/popoverAutocomplete/__examples__/basic/basic.html ADDED Viewed

@@ -0,0 +1,4 @@
+<div class="example">
+  <input type="text" part="trigger" placeholder="Type a fruit" />
+  <p>Selected: <span part="result">none</span></p>
+</div>

package/pg/popoverAutocomplete/__examples__/basic/basic.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgPopoverAutocomplete from '../../popoverAutocomplete';
+import template from './basic.html';
+import style from './basic.css';
+@Component({
+  selector: 'x-pg-popover-autocomplete-basic',
+  template,
+  style,
+})
+export default class XPgPopoverAutocompleteBasic extends HTMLElement {
+  @Part() $trigger: HTMLButtonElement;
+  @Part() $result: HTMLSpanElement;
+  #popover: PgPopoverAutocomplete | null = null;
+  connectedCallback() {
+    this.$trigger.addEventListener('focus', () => {
+      if (this.#popover) {
+        this.#popover.show();
+        return;
+      };
+      this.#popover = PgPopoverAutocomplete.create({
+        source: this.$trigger,
+        items: [
+          { label: 'Apple', value: 'apple' },
+          { label: 'Banana', value: 'banana' },
+          { label: 'Cherry', value: 'cherry' },
+          { label: 'Grape', value: 'grape' },
+          { label: 'Mango', value: 'mango' },
+        ],
+      });
+      this.#popover.show();
+      this.#popover.addEventListener('select', (e: any) => {
+        const { label, value } = e.detail;
+        this.$result.textContent = `${label} (${value})`;
+      });
+      this.#popover.addEventListener('dismiss', () => {
+        this.#popover?.destroy();
+        this.#popover = null;
+      }, { once: true });
+    });
+  }
+}

package/pg/popoverAutocomplete/popoverAutocomplete.css ADDED Viewed

@@ -0,0 +1,25 @@
+:host {
+  display: contents;
+}
+[part="popover"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  top: calc(anchor(bottom) - 1px);
+  left: anchor(left);
+  min-width: anchor-size(width);
+  overflow: visible;
+}
+[part="items"] {
+  display: flex;
+  flex-direction: column;
+  border-width: var(--pg-autocomplete-border-width, 1px);
+  border-color: var(--pg-autocomplete-border-color, #453C4F);
+  border-style: solid;
+  border-radius: 0.25rem;
+  background-color: var(--pg-autocomplete-background-color, #FFFFFF);
+  box-shadow: var(--pg-autocomplete-box-shadow, 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25));
+}

package/pg/popoverAutocomplete/popoverAutocomplete.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <div part="items"></div>

package/pg/popoverAutocomplete/popoverAutocomplete.ts ADDED Viewed

@@ -0,0 +1,134 @@
+import { Component, Prop, Part, forEach } from '@pictogrammers/element';
+import PgPopover from '../popover/popover';
+import PgPopoverAutocompleteItem from '../popoverAutocompleteItem/popoverAutocompleteItem';
+import template from './popoverAutocomplete.html';
+import style from './popoverAutocomplete.css';
+@Component({
+  selector: 'pg-popover-autocomplete',
+  style,
+  template
+})
+export default class PgPopoverAutocomplete extends PgPopover {
+  @Part() $items: HTMLDivElement;
+  @Prop() items: { label: string; value: string }[] = [];
+  #index: number = -1;
+  #ignore: boolean = false;
+  connectedCallback() {
+    forEach({
+      container: this.$items,
+      items: this.items,
+      type: () => PgPopoverAutocompleteItem,
+      create: ($item: PgPopoverAutocompleteItem, _item: { label: string; value: string }) => {
+        $item.addEventListener('ignore', (e: any) => {
+          this.#ignore = true;
+          this.#focusItem(e.detail.index);
+        });
+        $item.addEventListener('select', (e: any) => {
+          this.dispatchEvent(new CustomEvent('select', { detail: e.detail }));
+          this.hide();
+          this.#ignore = false;
+        });
+        $item.addEventListener('left', (e: any) => {
+          this.dispatchEvent(new CustomEvent('dismiss'));
+        });
+        $item.addEventListener('right', (e: any) => {
+          this.dispatchEvent(new CustomEvent('dismiss'));
+        });
+        $item.addEventListener('up', (e: any) => {
+          this.#focusItem(e.detail.index - 1);
+        });
+        $item.addEventListener('down', (e: any) => {
+          this.#focusItem(e.detail.index + 1);
+        });
+        $item.addEventListener('close', () => {
+          this.hide();
+          this.source?.focus();
+        });
+      }
+    });
+    this.$popover.addEventListener('toggle', this.#toggle.bind(this));
+    this.#focusItem(0);
+  }
+  render(changes) {
+    if (changes.source) {
+      this.source?.addEventListener('keydown', this.handleKeydown);
+      this.source?.addEventListener('blur', this.handleBlur);
+    }
+  }
+  handleBlur = (e: FocusEvent) => {
+    if (this.#ignore) {
+      return;
+    }
+    this.hide();
+  }
+  handleKeydown = (e: KeyboardEvent) => {
+    switch(e.key) {
+      case 'Tab':
+        this.dispatchEvent(new CustomEvent('dismiss'));
+        break;
+      case 'ArrowUp':
+        this.#focusItem(this.#index - 1);
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        if (this.visible) {
+          this.#focusItem(this.#index + 1);
+        } else {
+          // recreate autocomplete
+        }
+        e.preventDefault();
+        break;
+      case 'Enter':
+        const item = this.$items.children[this.#index] as any;
+        item?.click();
+        e.preventDefault();
+        break;
+      case 'Escape':
+        this.hide();
+        e.preventDefault();
+        break;
+    }
+  }
+  #toggle(e: ToggleEvent) {
+    if (e.newState === 'closed') {
+      this.dispatchEvent(new CustomEvent('dismiss'));
+    }
+  }
+  #focusItem(index: number) {
+    //if (index === initIndex) return;
+    //if (index < 0) return this.#focusItem(this.items.length - 1, fallback, initIndex);
+    //if (index >= this.items.length) return this.#focusItem(0, fallback, initIndex);
+    if (this.#index === index) {
+      return;
+    }
+    if (index < 0) {
+      index = this.items.length - 1;
+    }
+    if (index >= this.items.length) {
+      index = 0;
+    }
+    const item = this.$items.children[index] as any;
+    item?.focus();
+    const previous = this.$items.children[this.#index] as any;
+    previous?.blur();
+    this.#index = index;
+  }
+  disconnectedCallback() {
+    this.source?.removeEventListener('keydown', this.handleKeydown);
+  }
+}

package/pg/popoverAutocompleteItem/popoverAutocompleteItem.css ADDED Viewed

@@ -0,0 +1,69 @@
+:host {
+  display: contents;
+}
+[part=label] {
+  outline: none;
+  display: flex;
+  align-items: center;
+  font-family: var(--pg-font-family, system-ui);
+  text-align: var(--pg-popover-autocomplete-item-text-align, left);
+  background-color: var(--pg-popover-autocomplete-item-background, transparent);
+  padding: var(--pg-popover-autocomplete-item-padding, 0.125rem 0.25rem);
+  border-color: transparent;
+  border-width: 0;
+  border-style: solid;
+  color: var(--pg-popover-autocomplete-item-color, #453C4F);
+  width: 100%;
+  cursor: pointer;
+}
+:host(:first-child) [part=label] {
+  border-top-left-radius: var(--pg-popover-autocomplete-item-border-radius, 0.125rem);
+  border-top-right-radius: var(--pg-popover-autocomplete-item-border-radius, 0.125rem);
+}
+:host(:last-child) [part=label] {
+  border-top-left-radius: var(--pg-popover-autocomplete-item-border-radius, 0.125rem);
+  border-top-right-radius: var(--pg-popover-autocomplete-item-border-radius, 0.125rem);
+}
+[part=label]:not(:disabled):not(.focus):hover {
+  background: var(--pg-popover-autocomplete-hover-background-color, rgba(79, 143, 249, 0.1));
+}
+[part=label]:not(:disabled):active {
+  background-color: var(--pg-popover-autocomplete-item-active-background, #5f516e);
+  color: #FFFFFF;
+}
+[part=label]:disabled {
+  color: var(--pg-popover-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-popover-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 {
+  background-color: var(--pg-focus-background-color, #453C4F);
+  color: #FFFFFF;
+}
+[part=label]:active {
+  background-color: var(--pg-focus-background-color, #453C4F) !important;
+  color: #FFFFFF;
+}

package/pg/popoverAutocompleteItem/popoverAutocompleteItem.ts ADDED Viewed

@@ -0,0 +1,90 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import template from './popoverAutocompleteItem.html';
+import style from './popoverAutocompleteItem.css';
+@Component({
+  selector: 'pg-popover-autocomplete-item',
+  style,
+  template
+})
+export default class PgPopoverAutocompleteItem extends HTMLElement {
+  static delegatesFocus = true;
+  @Prop() index: number;
+  @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('mousedown', () => {
+      this.dispatchEvent(new CustomEvent('ignore', {
+        detail: { index: this.index }
+      }));
+    });
+    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 'ArrowLeft':
+          this.dispatchEvent(new CustomEvent('left', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'ArrowRight':
+          this.dispatchEvent(new CustomEvent('right', {
+            detail: { index: this.index }
+          }));
+          e.preventDefault();
+          break;
+        case 'Escape':
+          this.dispatchEvent(new CustomEvent('close'));
+          e.preventDefault();
+          break;
+      }
+    });
+  }
+  click() {
+    this.$label.click();
+  }
+  focus() {
+    this.$label.classList.toggle('focus', true);
+  }
+  blur() {
+    this.$label.classList.toggle('focus', false);
+  }
+  getHeight(): number {
+    return this.$label.getBoundingClientRect().height;
+  }
+}

package/pg/table/__examples__/basic/basic.ts CHANGED Viewed

@@ -91,6 +91,7 @@ export default class XPgTableBasic extends HTMLElement {
   newCount = 0;
   handlePushData() {
     this.$table.data.push(createTableItem({
+      selected: false,
       name: `new ${this.newCount++}`,
       age: this.newCount,
       favorite: {

package/pg/tableCellFileLocal/tableCellFileLocal.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-file-local part="input"></pg-input-file-local>
+</div>

package/pg/tableCellFileLocal/tableCellFileLocal.html.tmp.20484.68ee2e30710e ADDED Viewed

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-file-local part="input"></pg-input-file-local>
+</div>

package/pg/tableCellFileLocal/tableCellFileLocal.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgInputFileLocal from '../inputFileLocal/inputFileLocal';
+import template from './tableCellFileLocal.html';
+import style from './tableCellFileLocal.css';
+@Component({
+  selector: 'pg-table-cell-file-local',
+  style,
+  template
+})
+export default class PgTableCellFileLocal extends HTMLElement {
+  @Prop() value: any = null;
+  @Prop() key: string = '';
+  @Prop() acceptsFileType: string = '';
+  @Part() $input: PgInputFileLocal;
+  #initialized: boolean = false;
+  connectedCallback() {
+    // Reconnects re-invoke connectedCallback; guard against duplicate listeners.
+    if (this.#initialized) return;
+    this.#initialized = true;
+    this.$input.addEventListener('change', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: {
+            value: e.detail.value,
+            name: e.detail.name,
+            event: 'change',
+          }
+        })
+      );
+    });
+  }
+  render(changes) {
+    if (changes.acceptsFileType) {
+      this.$input.acceptsFileType = this.acceptsFileType;
+    }
+  }
+}

package/pg/tableCellSelect/tableCellSelect.html ADDED Viewed

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-select part="input"></pg-input-select>
+</div>

package/pg/tableCellSelect/tableCellSelect.html.tmp.41808.99c1a6f14340 ADDED Viewed

@@ -0,0 +1,3 @@
+<div part="cell">
+  <pg-input-select part="input"></pg-input-select>
+</div>

package/pg/tableCellSelect/tableCellSelect.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import PgInputSelect from '../inputSelect/inputSelect';
+import template from './tableCellSelect.html';
+import style from './tableCellSelect.css';
+@Component({
+  selector: 'pg-table-cell-select',
+  style,
+  template
+})
+export default class PgTableCellSelect extends HTMLElement {
+  @Prop() value: string = '';
+  @Prop() key: string = '';
+  @Prop() editable: boolean = false;
+  @Prop() options: any[] = [];
+  @Part() $input: PgInputSelect;
+  #initialized: boolean = false;
+  connectedCallback() {
+    // Reconnects re-invoke connectedCallback; guard against duplicate listeners.
+    if (this.#initialized) return;
+    this.#initialized = true;
+    this.$input.addEventListener('change', (e: any) => {
+      this.dispatchEvent(
+        new CustomEvent('action', {
+          detail: {
+            value: e.detail.value,
+            event: 'change',
+          }
+        })
+      );
+    });
+  }
+  render(changes) {
+    // options before value; the label is resolved from options when value is set
+    if (changes.options) {
+      this.$input.options = this.options;
+    }
+    if (changes.value) {
+      this.$input.value = this.value;
+    }
+    if (changes.editable) {
+      this.$input.readOnly = !this.editable;
+    }
+  }
+}