@pictogrammers/components 0.3.1

package/pg/inputText/__examples__/basic/basic.ts

@@ -0,0 +1,30 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputText from '../../inputText';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-text-basic',
+  template
+})
+export default class XPgInputTextBasic extends HTMLElement {
+
+  @Part() $input: PgInputText;
+  @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.innerText = value;
+  }
+
+  handleInput(e: CustomEvent) {
+    const { value } = e.detail;
+    this.$value2.innerText = value;
+  }
+}

package/pg/inputText/index.ts

@@ -0,0 +1,3 @@
+import PgInputText from './inputText';
+
+export default PgInputText;

package/pg/inputText/inputText.css

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  font-family: var(--pg-font-family);
+}
+
+[part="input"] {
+  border: 1px solid var(--pg-input-text-border-color, #453C4F);
+  border-radius: 0.125rem;
+  padding: calc(0.5rem - 1px) 0.75rem;
+  font-size: 1rem;
+  outline: none;
+  width: calc(100% - 1.5rem - 2px);
+}
+
+[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/inputText/inputText.html

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

package/pg/inputText/inputText.spec.ts

@@ -0,0 +1,59 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './inputText';
+import PgInputText from './inputText';
+
+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 = getAttributes(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/inputText/inputText.ts

@@ -0,0 +1,59 @@
+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 = '';
+
+  @Part() $input: HTMLInputElement;
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  skipValue = false;
+
+  render(changes) {
+    if (changes.value && !this.skipValue) {
+      this.$input.value = this.value;
+    }
+    if (changes.placeholder) {
+      this.$input.placeholder = this.placeholder;
+    }
+    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/inputTextIcon/README.md

@@ -0,0 +1,26 @@
+# `<pg-input-text>`
+
+The `pg-input-text` component creates an input that accepts text input.
+
+```typescript
+import '@pictogrammers/components/pgInputText';
+import { PgInputRange } from '@pictogrammers/components/pgInputText';
+```
+
+```html
+<pg-input-text value="50"></pg-input-text>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| name       |          | Unique name in `pg-form` |
+| value      |          | Field value |
+
+## Events
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| change     |          | `{ detail: { value }` |
+| input      |          | `{ detail: { value }` |

package/pg/inputTextIcon/index.ts

@@ -0,0 +1,3 @@
+import PgInputTextIcon from './inputTextIcon';
+
+export default PgInputTextIcon;

package/pg/inputTextIcon/inputTextIcon.css

@@ -0,0 +1,24 @@
+:host {
+  display: block;
+}
+
+[part="grid"] {
+  display: grid;
+  grid-template-columns: auto 1.5rem;
+}
+
+[part="icon"] {
+  grid-row: 1;
+  grid-column: 2;
+  pointer-events: none;
+  transform: translate(calc(-0.35rem + 1px), calc(0.25rem + 1px));
+}
+
+[part="input"] {
+  grid-row: 1;
+  grid-column: 1 / span 2;
+}
+
+[part="input"]:focus + [part="icon"] {
+  --pg-icon-color: #4f8ff9;
+}

package/pg/inputTextIcon/inputTextIcon.html

@@ -0,0 +1,4 @@
+<div part="grid">
+  <parent/>
+  <pg-icon part="icon"></pg-icon>
+</div>

package/pg/inputTextIcon/inputTextIcon.spec.ts

@@ -0,0 +1,44 @@
+import { selectComponent, getAttributes } from '@pictogrammers/element';
+
+import './inputTextIcon';
+import PgInputTextIcon from './inputTextIcon';
+
+const PG_INPUT_TEXT_ICON = 'pg-input-text-icon';
+
+describe('pg-input-text-icon', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_INPUT_TEXT_ICON);
+    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_ICON)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getAttributes(PG_INPUT_TEXT_ICON);
+    expect(props).toContain('path');
+  });
+
+  it('should default path to square icon', () => {
+    const component = selectComponent<PgInputTextIcon>(PG_INPUT_TEXT_ICON);
+    const { $icon } = component;
+    expect($icon.path).toEqual('M3,3V21H21V3');
+  });
+
+  it('should set path to circle', () => {
+    const circle = 'M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z';
+    const component = selectComponent<PgInputTextIcon>(PG_INPUT_TEXT_ICON);
+    component.path = circle;
+    const { $icon } = component;
+    expect($icon.path).toEqual(circle);
+  });
+
+});

package/pg/inputTextIcon/inputTextIcon.ts

@@ -0,0 +1,26 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './inputTextIcon.html';
+import style from './inputTextIcon.css';
+
+import '../inputText/inputText';
+import PgInputText from '../inputText/inputText';
+import '../icon/icon';
+import PgIcon from '../icon/icon';
+
+@Component({
+  selector: 'pg-input-text-icon',
+  style,
+  template
+})
+export default class PgInputTextIcon extends PgInputText {
+  @Prop() path: string = 'M3,3V21H21V3';
+
+  @Part() $icon: PgIcon;
+
+  render(changes) {
+    if (changes.path) {
+      this.$icon.path = this.path;
+    }
+  }
+}

package/pg/inputUserSelect/README.md

@@ -0,0 +1,31 @@
+# `<pg-input-user-select>`
+
+The `pg-input-user-select` component creates an select drop down.
+
+```typescript
+import '@pictogrammers/components/pgInputUserSelect';
+import { PgInputUserSelect } '@mdi/components/pgInputUserSelect';
+```
+
+```html
+<pg-input-user-select></pg-input-user-select>
+```
+
+## Attributes
+
+| Attributes | Tested   | Description |
+| ---------- | -------- | ----------- |
+| options    |          | `[User, ...]` |
+| value      |          | `world` |
+
+## Events
+
+| Event     | Tested   | Detail |
+| --------- | -------- | ----------- |
+| change    |          | `User` |
+
+## Models
+
+```yaml
+$ref: '#/api/model/user'
+```

package/pg/inputUserSelect/__examples__/basic/basic.html

@@ -0,0 +1,4 @@
+<div class="example">
+  <pg-input-user-select part="input"></pg-input-user-select>
+  <code>onchange: <span part="value"></span></code>
+</div>

package/pg/inputUserSelect/__examples__/basic/basic.ts

@@ -0,0 +1,25 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgInputUserSelect from '../../inputUserSelect';
+import { users } from './constants';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-input-user-select-basic',
+  template
+})
+export default class XPgInputUserSelectBasic extends HTMLElement {
+
+  @Part() $input: PgInputUserSelect;
+  @Part() $value: HTMLSpanElement;
+
+  connectedCallback() {
+    this.$input.options = users;
+    this.$input.addEventListener('change', this.handleChange.bind(this));
+  }
+
+  handleChange(e: CustomEvent) {
+    const { name, value } = e.detail;
+    this.$value.innerText = `${name} - ${value}`;
+  }
+}

package/pg/inputUserSelect/__examples__/basic/constants.ts

@@ -0,0 +1,33 @@
+import { User } from "../../../shared/models/user";
+
+const AVATAR = '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';
+
+export const users: User[] = [
+  {
+    "id": "14ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+    "base64": AVATAR,
+    "name": "First Last 1",
+    "twitter": "templarian",
+    "github": "Templarian",
+    "website": "http://templarian.com",
+    "iconCount": 1000
+  },
+  {
+    "id": "24ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+    "base64": AVATAR,
+    "name": "First Last 2",
+    "twitter": "templarian",
+    "github": "Templarian",
+    "website": "http://templarian.com",
+    "iconCount": 0
+  },
+  {
+    "id": "34ea5584-07e3-11e4-bf19-842b2b6cfe1b",
+    "base64": AVATAR,
+    "name": "First Last 3",
+    "twitter": "templarian",
+    "github": "Templarian",
+    "website": "http://templarian.com",
+    "iconCount": 9999
+  }
+].map(u => new User().from(u as any));

package/pg/inputUserSelect/index.ts

@@ -0,0 +1,3 @@
+import PgInputUserSelect from './inputUserSelect';
+
+export default PgInputUserSelect;

package/pg/inputUserSelect/inputUserSelect.css

@@ -0,0 +1,174 @@
+:host {
+  display: block;
+}
+
+[part="wrapper"] {
+  display: grid;
+  grid-template-rows: auto 0;
+  grid-template-columns: 100%;
+}
+
+[part="select"] {
+  display: grid;
+  grid-template-columns: 3.5rem 1.75rem auto 2.75rem 1fr 1.5rem;
+  grid-template-rows: 1.5rem 1.5rem;
+  grid-row: 1;
+  grid-column: 1;
+  border: 1px solid var(--pg-input-select-border-color, #453C4F);
+  border-radius: 0.25rem;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  width: 100%;
+  font-size: 1rem;
+  outline: 0;
+  text-align: left;
+  background: var(--pg-input-select-background, #fff);
+}
+
+[part="select"]:focus {
+  box-shadow: 0 0 0 3px rgba(79, 143, 249, 0.5);
+}
+
+[part="select"]:disabled {
+  border: 1px solid var(--pg-input-select-disabled-border-color, rgba(69, 60, 79, 0.6));
+  color: var(--pg-input-select-disabled-color, rgba(69, 60, 79, 0.6));
+}
+
+[part="chevron"] {
+  grid-row: 1 / span 2;
+  grid-column: 6;
+  pointer-events: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+}
+
+.githubIcon,
+[part="githubIcon"] {
+  grid-row: 2;
+  grid-column: 2;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+  color: var(--pg-input-select-border-color, #453C4F);
+}
+
+.avatar,
+[part="selectedAvatar"] {
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  border: 1px solid var(--pg-input-select-border-color, #453C4F);
+}
+
+.name,
+[part="selectedName"] {
+  grid-row: 1;
+  grid-column: 2 / span 4;
+  align-self: center;
+}
+
+.github,
+[part="selectedGithub"] {
+  grid-row: 2;
+  grid-column: 3;
+  align-self: center;
+}
+
+.countIcon,
+[part="countIcon"] {
+  grid-row: 2;
+  grid-column: 4;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-self: center;
+  margin-left: 1rem;
+  color: var(--pg-input-select-border-color, #453C4F);
+}
+
+.iconCount,
+[part="selectedCount"] {
+  grid-row: 2;
+  grid-column: 5;
+  align-self: center;
+  font-weight: bold;
+}
+
+[part="dropdown"].open {
+  display: flex;
+}
+
+[part="dropdown"] {
+  grid-row: 2;
+  grid-column: 1;
+  display: none;
+  flex-direction: column;
+  border: 1px solid var(--pg-input-select-border-color, #453C4F);
+  border-radius: 0.25rem;
+  background: #fff;
+  z-index: 1;
+  position: absolute;
+  max-height: 16.5rem;
+  overflow: auto;
+}
+
+[part="dropdown"] button {
+  display: grid;
+  grid-template-columns: 3.5rem 1.75rem auto 2.75rem 1fr;
+  grid-template-rows: auto;
+  border: 0;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  background: #fff;
+}
+
+[part="dropdown"] button:hover,
+[part="dropdown"] button:focus {
+  color: #fff;
+  background: #1E90FF;
+}
+
+[part="dropdown"] button:hover .githubIcon,
+[part="dropdown"] button:hover .countIcon,
+[part="dropdown"] button:focus .githubIcon,
+[part="dropdown"] button:focus .countIcon {
+  color: #fff;
+}
+
+[part="loading"] {
+  width: 3rem;
+  height: 3rem;
+  animation: spin 2s infinite linear;
+  grid-row: 1 / span 2;;
+  grid-column: 1;
+  pointer-events: none;
+  align-self: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+[part="loadingText"] {
+  grid-row: 1 / span 2;
+  grid-column: 2 / span 3;
+  align-self: center;
+}
+
+[part="noData"] {
+  grid-row: 1 / span 2;
+  grid-column: 1 / span 4;
+  align-self: center;
+}
+
+[part="noSelection"] {
+  grid-row: 1 / span 2;
+  grid-column: 1 / span 4;
+  align-self: center;
+}

package/pg/inputUserSelect/inputUserSelect.html

@@ -0,0 +1,18 @@
+<div part="wrapper">
+  <button part="select">
+    <img part="selectedAvatar" />
+    <span part="selectedName">First Last</span>
+    <svg part="githubIcon" viewBox="0 0 24 24"><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>
+    <span part="selectedGithub">GitHub</span>
+    <svg part="countIcon" viewBox="0 0 24 24"><path fill="currentColor" d="M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z" /></svg>
+    <span part="selectedCount">9999</span>
+    <svg part="loading" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /></svg>
+    <span part="loadingText">Loading...</span>
+    <svg part="chevron" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+    <span part="noData">Empty Users List</span>
+    <span part="noSelection">Select a User</span>
+  </button>
+  <div part="dropdownContainer">
+    <div part="dropdown"></div>
+  </div>
+</div>