@pictogrammers/components 0.5.14 → 0.5.17

package/pg/inputText copy/inputText.ts

@@ -0,0 +1,67 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputText.html';
+import style from './inputText.css';
+
+@Component({
+  selector: 'pg-input-text',
+  style,
+  template
+})
+export default class PgInputText extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+}

package/pg/inputTextarea/README.md

@@ -0,0 +1,39 @@
+# `<pg-input-textarea>`
+
+The `pg-input-textarea` component creates an input that accepts multiline text. Additionally it can resize.
+
+```typescript
+import '@pictogrammers/components/pgInputTextarea';
+import { PgInputTextarea } from '@pictogrammers/components/pgInputTextarea';
+```
+
+```html
+<pg-input-textarea value="50"></pg-input-textarea>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |
+| caret      |          | `{ detail: { column, row }}` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-input-textarea-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-input-textarea-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-input-textarea-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-input-textarea-padding-block` | `0.25rem` | Padding block. |
+| `--pg-input-textarea-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputTextarea/__examples__/basic/basic.html

@@ -0,0 +1,9 @@
+<div class="example">
+  <pg-input-textarea part="input" value="Hello World!"></pg-input-textarea>
+  <div>
+    <code>onchange: <span part="value1"></span></code>
+  </div>
+  <div>
+    <code>oninput: <span part="value2"></span></code>
+  </div>
+</div>

package/pg/inputTextarea/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgInputTextarea from '../../inputTextarea';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-textarea-basic',
+  template,
+})
+export default class XPgInputTextareaBasic extends HTMLElement {
+
+  @Part() $input: PgInputTextarea;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+  }
+
+  #handleChange(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value1.textContent = value;
+  }
+
+  #handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.textContent = value;
+  }
+}

package/pg/inputTextarea/inputTextarea.ts

@@ -0,0 +1,121 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputTextarea.html';
+import style from './inputTextarea.css';
+
+function getCursorRowCol(
+  textArea: HTMLTextAreaElement
+): { row: number; col: number } {
+  // Get the character index of the cursor
+  const cursorIndex = textArea.selectionStart;
+
+  // Get the text content up to the cursor position
+  const textUpToCursor = textArea.value.substring(0, cursorIndex);
+
+  // Split the text by newline characters to get all lines
+  const lines = textUpToCursor.split('\n');
+
+  // The row (line number) is the number of lines (array length).
+  // Rows are typically 1-indexed, so we can return the length directly.
+  const row = lines.length - 1;
+
+  // The column is the length of the last line in the `lines` array.
+  const col = lines[lines.length - 1].length; // +1 to make it 1-indexed
+
+  return { row, col };
+}
+
+@Component({
+  selector: 'pg-input-textarea',
+  style,
+  template
+})
+export default class PgInputTextarea extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('focus', this.handleFocus.bind(this));
+    this.$input.addEventListener('focus', this.handleBlur.bind(this));
+
+    this.$input.addEventListener('input', this.handleCursorMove.bind(this));
+    this.$input.addEventListener('click', this.handleCursorMove.bind(this));
+    this.$input.addEventListener('keyup', this.handleCursorMove.bind(this));
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  #currentColumn = -1;
+  #currentRow = -1;
+  handleCursorMove(event: Event) {
+    const textArea = event.target as HTMLTextAreaElement;
+    const { row, col: column } = getCursorRowCol(textArea);
+    if (this.#currentColumn !== column && this.#currentRow !== row) {
+      this.dispatchEvent(new CustomEvent('caret', {
+        detail: {
+          column,
+          row
+        }
+      }));
+    }
+    console.log(`Cursor position: Row ${row}, Column ${column}`);
+  }
+
+  handleFocus(e: any) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('focus'));
+  }
+
+  handleBlur(e: any) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('blur'));
+  }
+}

package/pg/inputTextarea copy/README.md

@@ -0,0 +1,39 @@
+# `<pg-input-textarea>`
+
+The `pg-input-textarea` component creates an input that accepts multiline text. Additionally it can resize.
+
+```typescript
+import '@pictogrammers/components/pgInputTextarea';
+import { PgInputTextarea } from '@pictogrammers/components/pgInputTextarea';
+```
+
+```html
+<pg-input-textarea value="50"></pg-input-textarea>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |
+| caret      |          | `{ detail: { column, row }}` |
+
+## CSS Variables
+
+| CSS Variables       | Default   | Description |
+| ------------------- | --------- | ----------- |
+| `--pg-input-textarea-padding-inline` | `0.5rem` | Padding inline. |
+| `--pg-input-textarea-padding-inline-start` | `0.5rem` | Padding inline start. |
+| `--pg-input-textarea-padding-inline-end` | `0.5rem` | Padding inline end. |
+| `--pg-input-textarea-padding-block` | `0.25rem` | Padding block. |
+| `--pg-input-textarea-padding-block-start` | `0.25rem` | Padding block start. |
+| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |

package/pg/inputTextarea copy/inputTextarea.css

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family, system-ui);
+}
+
+[part=input] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
+  padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
+  font-family: var(--pg-input-text-font-family, var(--pg-font-family));
+  font-size: 1rem;
+  outline: none;
+  field-sizing: content;
+  min-width: calc(
+    100%
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  max-width: calc(
+    var(--pg-input-text-max-width, 100%)
+    - var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
+    - var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
+    - 2px
+  );
+  background-color: transparent;
+}
+
+[part=input]:read-only {
+  border-color: transparent;
+}
+
+[part=input]:active {
+  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
+}
+[part=input]:focus {
+  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
+}

package/pg/inputTextarea copy/inputTextarea.html

@@ -0,0 +1 @@
+<textarea part="input"></textarea>

package/pg/inputTextarea copy/inputTextarea.spec.ts

@@ -0,0 +1,59 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './inputTextarea';
+import PgInputText from './inputTextarea';
+
+const PG_INPUT_TEXT = 'pg-input-text';
+
+describe('pg-input-text', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_INPUT_TEXT);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_INPUT_TEXT)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_INPUT_TEXT);
+    expect(props.length).toBe(3);
+    expect(props).toContain('name');
+    expect(props).toContain('value');
+    expect(props).toContain('placeholder');
+  });
+
+  it('should default value to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.value).toEqual('');
+  });
+
+  it('should set value to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.value = 'Hello World!';
+    const { $input } = component;
+    expect($input.value).toEqual('Hello World!');
+  });
+
+  it('should default placeholder to empty', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    const { $input } = component;
+    expect($input.placeholder).toEqual('');
+  });
+
+  it('should set placeholder to "Hello World!"', () => {
+    const component = selectComponent<PgInputText>(PG_INPUT_TEXT);
+    component.placeholder = 'Hello World!';
+    const { $input } = component;
+    expect($input.placeholder).toEqual('Hello World!');
+  });
+
+});

package/pg/inputTextarea copy/inputTextarea.ts

@@ -0,0 +1,79 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputTextarea.html';
+import style from './inputTextarea.css';
+
+@Component({
+  selector: 'pg-input-textarea',
+  style,
+  template
+})
+export default class PgInputTextarea extends HTMLElement {
+  @Prop() name: string = '';
+  @Prop() value: string = '';
+  @Prop() placeholder: string = '';
+  @Prop() readOnly: boolean = false;
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+    this.$input.addEventListener('focus', this.handleFocus.bind(this));
+    this.$input.addEventListener('focus', this.handleBlur.bind(this));
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    if (changes.readOnly) {
+      this.$input.readOnly = this.readOnly;
+    }
+    this.skipValue = false;
+  }
+
+  handleInput(e) {
+    e.stopPropagation();
+    this.skipValue = true;
+    this.value = e.target.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleChange(e) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: e.target.value,
+          name: e.name
+        }
+      })
+    );
+  }
+
+  handleFocus(e: any) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('focus'));
+  }
+
+  handleBlur(e: any) {
+    e.preventDefault();
+    this.dispatchEvent(new CustomEvent('blur'));
+  }
+}

package/pg/inputTextareaAutocomplete/README.md

@@ -0,0 +1,70 @@
+# `<pg-input-textarea-autocomplete>`
+
+The `pg-input-textarea-autocomplete` component supports everything `pg-input-textarea` and adds tracking for the caret position implementing a list of options.
+
+```typescript
+import '@pictogrammers/components/pgInputTextareaAutocomplete';
+import { PgInputTextarea } from '@pictogrammers/components/pgInputTextareaAutocomplete';
+```
+
+```html
+<pg-input-textarea-autocomplete value="50"></pg-input-textarea-autocomplete>
+```
+
+## Attributes
+
+| Attributes  | Tested   | Description |
+| ----------- | -------- | ----------- |
+| name        |          | Unique name in `pg-form` |
+| value       |          | Field value |
+| placeholder |          | Placeholder text |
+| tokens      |          | Tokens array |
+
+## Tokens
+
+Tokens will match if the cursor is before, after, or in side of a token regex. The most common is `@` for usernames or `#` for tags.
+
+```typescript
+this.$input.tokens = [
+  /@([a-zA-Z]+\w+)?/, // @username
+  /#([a-zA-Z]+\w+)?/ // #TagName
+];
+```
+
+## Methods
+
+### `setOptions`
+
+```typescript
+this.$input.addEventListener('caret', (e: any) => {
+  const { matchIndex, setOptions } = e.detail;
+  switch(matchIndex) {
+    case 1: // @username
+      setOptions([{
+        label: 'Dipper',
+        value: 'Dipper',
+      }]);
+      break;
+    case 2: // #TagName
+      setOptions([{
+        label: 'Movie',
+        value: 'Movie',
+      }]);
+      break;
+    default:
+      setOptions([]);
+  }
+});
+```
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |
+| caret      |          | `{ detail: { column, row }}` |
+
+## CSS Variables
+
+See: `pg-textarea`.

package/pg/inputTextareaAutocomplete/__examples__/basic/basic.ts

@@ -0,0 +1,67 @@
+import { Component, Part } from '@pictogrammers/element';
+import PgInputTextareaAutocomplete from '../../inputTextareaAutocomplete';
+
+import template from './basic.html';
+
+const USERS = ['Dipper', 'Mable', 'Grunkle Stan', 'Wendy', 'Soos', 'Gideon', 'Ford', 'McGucket'];
+const TAGS = ['Mystery', 'Cipher', 'Paranormal', 'Gravity', 'Falls', 'Conspiracy', 'Gnomes'];
+
+@Component({
+  selector: 'x-pg-input-textarea-autocomplete-basic',
+  template,
+})
+export default class XPgInputTextareaBasic extends HTMLElement {
+
+  @Part() $input: PgInputTextareaAutocomplete;
+  @Part() $value1: HTMLSpanElement;
+  @Part() $value2: HTMLSpanElement;
+  @Part() $value3: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('change', this.#handleChange.bind(this));
+    this.$input.addEventListener('input', this.#handleInput.bind(this));
+    this.$input.addEventListener('caret', this.#handleCaret.bind(this));
+
+    this.$input.tokens = [
+      /@([a-zA-Z]+\w*)?/, // @username
+      /#([a-zA-Z]+\w*)?/  // #TagName
+    ];
+    this.$input.addEventListener('caret', (e: any) => {
+      const { matchIndex, matchText, setOptions } = e.detail;
+      const query = matchText.slice(1).toLowerCase();
+      switch (matchIndex) {
+        case 1: // @username
+          setOptions(
+            USERS
+              .filter(u => u.toLowerCase().startsWith(query))
+              .map(u => ({ label: u, value: u }))
+          );
+          break;
+        case 2: // #TagName
+          setOptions(
+            TAGS
+              .filter(t => t.toLowerCase().startsWith(query))
+              .map(t => ({ label: t, value: t }))
+          );
+          break;
+        default:
+          setOptions([]);
+      }
+    });
+  }
+
+  #handleChange(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value1.textContent = value;
+  }
+
+  #handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.textContent = value;
+  }
+
+  #handleCaret(e: CustomEvent) {
+    const { column, row } = e.detail;
+    this.$value3.textContent = `${column}, ${row}`;
+  }
+}