@pictogrammers/components 0.3.1

package/pg/scroll/index.ts

@@ -0,0 +1,3 @@
+import PgScroll from './scroll';
+
+export default PgScroll;

package/pg/scroll/scroll.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+div {
+  transform: translateY(0);
+}

package/pg/scroll/scroll.html

@@ -0,0 +1,3 @@
+<div part="scroll">
+  <slot></slot>
+</div>

package/pg/scroll/scroll.ts

@@ -0,0 +1,158 @@
+import { Component, Prop, Part, Local } from '@pictogrammers/element';
+import { throttle } from 'lodash-es';
+
+import template from './scroll.html';
+import style from './scroll.css';
+
+declare const ResizeObserver;
+
+@Component({
+  selector: 'pg-scroll',
+  style,
+  template
+})
+export default class PgScroll extends HTMLElement {
+
+  @Prop() height: string | number = 0;
+
+  @Part() $scroll: HTMLDivElement;
+
+  scrollElement;
+  currentHeight = -1;
+  columns = 10;
+  size = 44;
+  visible = false;
+  y = -1;
+  width = 0;
+
+  resizeObserver = new ResizeObserver(
+    throttle(
+      (entries) => {
+        const { width } = entries[0].contentRect;
+        this.columns = Math.floor(width / (this.size + 20));
+        this.y = -1;
+        this.width = width;
+        this.calculateScroll();
+      },
+      100
+    )
+  );
+
+  connectedCallback() {
+    this.resizeObserver.observe(this.$scroll);
+  }
+
+  getInnerHeight() {
+    let parentElement = this.parentElement;
+    while (parentElement) {
+      if (parentElement.style.overflow === 'auto') {
+        return parentElement.getBoundingClientRect().height;
+      }
+      parentElement = parentElement.parentElement;
+    }
+    return window.innerHeight;
+  }
+
+  get isWindow() {
+    return this.scrollElement === window;
+  }
+
+  getView() {
+    const innerHeight = this.getInnerHeight();
+    const container = this.getBoundingClientRect();
+    const { y, height } = this.isWindow
+      ? { y: container.top, height: container.height }
+      : {
+        y: container.top - this.scrollElement.getBoundingClientRect().top,
+        height: container.height
+       };
+    const top = y < 0 ? -1 * y : 0;
+    const calcY = height - top - innerHeight < 0
+      ? height - innerHeight < 0 ? 0 : height - innerHeight
+      : top;
+    const calcHeight = height < innerHeight
+      ? height
+      : y + height - innerHeight > 0
+        ? innerHeight
+        : y + height - innerHeight;
+    return {
+      visible: (y < innerHeight && height + y > 0) || !this.isWindow,
+      y: calcY,
+      height: calcHeight < 0 ? innerHeight : calcHeight,
+      atEnd: calcHeight < 0
+    }
+  }
+
+  calculateScroll() {
+    const { visible, y, height } = this.getView();
+    if (visible) {
+      this.$scroll.style.transform = `translateY(${y}px)`;
+      this.$scroll.style.height = `${height}px`;
+    }
+    if (this.visible !== visible) {
+      this.visible = visible;
+      if (this.visible) {
+        this.enterView();
+      } else {
+        this.leaveView();
+      }
+    }
+    if (this.visible && this.y !== y) {
+      this.dispatchEvent(
+        new CustomEvent('calculate', {
+          detail: {
+            offsetY: y,
+            viewWidth: this.width,
+            viewHeight: height,
+            height: this.height
+          }
+        }
+      ));
+      this.y = y;
+    }
+  }
+
+  enterView() {
+    this.dispatchEvent(new CustomEvent('enter'));
+  }
+
+  leaveView() {
+    this.dispatchEvent(new CustomEvent('leave'));
+  }
+
+  getParentElement() {
+    let parentElement = this.parentElement;
+    while (parentElement) {
+      if (parentElement.style.overflow === 'auto') {
+        return parentElement;
+      }
+      parentElement = parentElement.parentElement;
+    }
+    return window;
+  }
+
+  updateHeight() {
+    this.scrollElement = this.getParentElement();
+    this.scrollElement.addEventListener('scroll',
+      throttle(
+        () => {
+          this.calculateScroll();
+        },
+        100
+      )
+    );
+    this.style.height = `${this.currentHeight}px`;
+    this.y = -1;
+    this.calculateScroll();
+  }
+
+  render(changes) {
+    console.log('changes', changes)
+    const height = parseInt(`${this.height}`, 10);
+    console.log('set', this.height);
+    if (this.currentHeight !== height) {
+      this.currentHeight = height;
+      this.updateHeight();
+    }
+  }
+}

package/pg/search/README.md

@@ -0,0 +1,59 @@
+# `<pg-search>`
+
+The `pg-search` component allows a standard way to search all content on the site.
+
+- Search Guides
+- Search General Pages
+- Search Icons by Name
+
+```typescript
+import '@pictogrammers/components/pgSearch.js';
+```
+
+```html
+<pg-search></pg-search>
+```
+
+| Attribute | Required | Description |
+| --------- | -------- | ----------- |
+| icons     | Required | Pass in icon array. |
+| items     | -        | Pass in other items. |
+
+| Events     | Tested   | Description |
+| ---------- | -------- | ----------- |
+| onsearch   |          | Called on enter key. |
+
+## Schemas
+
+### Icons
+
+```json
+[
+  {
+    "id": "uuid1",
+    "name": "account",
+    "aliases": [
+      {
+        "name": "user"
+      }
+    ]
+  }
+]
+```
+
+### Items
+
+```json
+[
+  {
+    "name": "Web Component",
+    "url": "/getting-started/web-component",
+    "type": "Documentation"
+  }
+]
+```
+
+## Accessibility
+
+- Keyboard Navigation with Up/Down
+- Focus States

package/pg/search/__examples__/basic/basic.html

@@ -0,0 +1,3 @@
+<div class="example">
+  <pg-search part="search"></pg-search>
+</div>

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

@@ -0,0 +1,29 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+import PgSearch from '../../search';
+import { mdiAccount, mdiAccountBox, mdiAccountCircle } from './constants';
+
+import template from './basic.html';
+
+@Component({
+  selector: 'x-pg-search-basic',
+  template
+})
+export default class XPgSearchBasic extends HTMLElement {
+  @Part() $search: PgSearch;
+
+  connectedCallback() {
+    this.$search.items = [
+      { 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;
+  }
+}

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

@@ -0,0 +1,3 @@
+export const mdiAccount = 'M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z';
+export const mdiAccountBox = 'M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z';
+export const mdiAccountCircle = 'M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z';

package/pg/search/index.ts

@@ -0,0 +1,3 @@
+import PgSearch from './search';
+
+export default PgSearch;

package/pg/search/search.css

@@ -0,0 +1,188 @@
+:host {
+  display: block;
+  align-self: center;
+  font-family: var(--pg-font-family);
+}
+
+div {
+  display: grid;
+  grid-template-columns: 1fr 0;
+  grid-template-rows: 1fr 0;
+}
+input {
+  grid-row: 1;
+  grid-column: 1;
+  border-radius: 0.25rem;
+  border: 0;
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  outline: none;
+  width: calc(100% - 1rem);
+  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));
+}
+input:focus {
+  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));
+}
+.active input + svg path {
+  fill: #453C4F;
+}
+svg {
+  grid-row: 1;
+  grid-column: 2;
+  width: 1.5rem;
+  height: 1.5rem;
+  justify-self: right;
+  margin-right: 0.25rem;
+  pointer-events: none;
+  align-self: center;
+}
+svg > path {
+  transition: fill 0.3s ease-in-out;
+}
+[part=menu] {
+  display: none;
+  background: #FFF;
+  grid-row: 2;
+  grid-column: 1 / span 2;
+  z-index: 1;
+}
+ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.4);
+}
+ul > li {
+  color: #222;
+}
+ul > li > a {
+  display: flex;
+  padding: 0.25rem 0.5rem;
+  background: #FFF;
+  border-left: 1px solid #DDD;
+  border-right: 1px solid #DDD;
+}
+ul > li > a:hover,
+ul > li > a:active,
+ul > li > a:focus {
+  background: #DAF4FB;
+}
+ul > li.item:first-child > a {
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+ul > li.item:not(:first-child) > a {
+  border-bottom: 1px solid #DDD;
+}
+ul > li.item:last-child > a {
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+ul > li > a {
+  text-decoration: none;
+  color: #222;
+}
+ul > li > a strong {
+  color: #453C4F;
+}
+.section {
+  color: #FFF;
+  padding: 0.25rem 0.5rem;
+  font-weight: bold;
+  background: #453C4F;
+  border-radius: 0.25rem 0.25rem 0 0;
+  cursor: default;
+}
+.section + li a {
+  border-radius: 0;
+}
+
+li + .section {
+  border-radius: 0;
+}
+
+.type {
+  background-color: #453C4F;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  color: #fff;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  margin: 0.125rem 0 0.125rem 0.25rem;
+  align-self: end;
+}
+
+.icon {
+  background-color: #453C4F;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.icon.first > a {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.icon.last {
+  padding-bottom: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.icon.last > a {
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+.icon svg {
+  color: #453C4F;
+  margin-right: 0.345rem;
+  margin-left: -0.25rem;
+}
+
+.all {
+  background-color: #453C4F;
+  padding: 0 0.25rem 0.25rem 0.25rem;
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+
+.all a {
+  border-radius: 0.25rem;
+}
+
+[part~=empty] {
+  background: #453C4F;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.4);
+}
+[part~=empty] strong {
+  color: #fff;
+  padding: 0 0.25rem;
+}
+[part~=empty] a {
+  display: block;
+  background: #fff;
+  color: #453C4F;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  margin-top: 0.25rem;
+}
+[part~=empty] a:hover,
+[part~=empty] a:active,
+[part~=empty] a:focus {
+  background: #DAF4FB;
+}
+[part~=empty] a svg {
+  vertical-align: middle;
+  width: 1.5rem;
+  height: 1.5rem;
+  float: right;
+  margin: -0.125rem -0.25rem 0 0;
+}
+
+.hide {
+  display: none;
+}

package/pg/search/search.html

@@ -0,0 +1,18 @@
+<div part="grid">
+  <input part="input" type="text" />
+  <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>
+  <div part="menu">
+    <ul part="list"></ul>
+    <section part="empty">
+      <strong>No Results</strong>
+      <a part="reqIcon" href="https://github.com/Templarian/MaterialDesign/issues/new?labels=Icon+Request&template=1_icon_request.md&title=" target="_blank">
+        Request an Icon
+        <svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>
+      </a>
+      <a part="reqDoc" href="https://github.com/Templarian/MaterialDesign/issues/new?labels=Documentation&template=6_doc_guide_request.md&title=" target="_blank">
+        Request Documentation
+        <svg viewBox="0 0 24 24"><path fill="currentColor" d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>
+      </a>
+    </section>
+  </div>
+</div>