@dile/ui 2.0.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2019 EscuelaIT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dile/ui
+
+Web Components to create various user interfaces

package/components/app-drawer/app-drawer.js

@@ -0,0 +1,3 @@
+import { DileAppDrawer } from "./src/DileAppDrawer.js";
+
+customElements.define("dile-app-drawer", DileAppDrawer);

package/components/app-drawer/index.js

@@ -0,0 +1 @@
+export { DileAppDrawer, DILE_APP_DRAWER_EVENT_CLOSED, DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE } from './src/DileAppDrawer.js';

package/components/app-drawer/src/DileAppDrawer.js

@@ -0,0 +1,153 @@
+import { LitElement, html, css } from "lit";
+import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js';
+
+export const DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE = 'dile-app-drawer-click-outside';
+export const DILE_APP_DRAWER_EVENT_CLOSED = 'dile-app-drawer-closed';
+
+export class DileAppDrawer extends DileCloseOnEscPressed(LitElement) {
+  static get properties() {
+    return {
+      direction: {
+        type: String,
+        reflect: true
+      },
+      opened: {
+        type: Boolean,
+        reflect: true
+      },
+      noModal: {
+        type: Boolean,
+        attribute: 'no-modal'
+      }
+    };
+  }
+
+  constructor() {
+    super();
+    this.direction = 'top';
+    this.opened = false;
+    this._documentClose = this._documentClose.bind(this);
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .modal {
+        display: none;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        z-index: var(--dile-app-drawer-modal-z-index, var(--dile-app-drawer-z-index, 10000));
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        background-color: var(
+          --dile-app-drawer-modal-background-color,
+          rgba(20, 20, 20, 0.7)
+        );
+      }
+
+      .menu {
+        position: fixed;
+        box-sizing: border-box;
+        z-index: var(--dile-app-drawer-z-index, 10000);
+        background-color: var(--dile-app-drawer-background-color, #ddd);
+        transition: transform 0.3s ease;
+        overflow: auto;
+      }
+
+      section {
+        transform: translateX(-100vw);
+        transition: transform 0.2s ease 0.3s;
+      }
+
+      :host([opened]) .modal {
+        display: block;
+        opacity: 1;
+      }
+
+      :host([opened]) .menu {
+        display: block;
+      }
+
+      :host([opened]) section {
+        transform: translateX(0);
+      }
+
+      :host([direction="top"]) .menu {
+        top: var(--dile-app-drawer-closed-top, -100vh);
+        left: var(--dile-app-drawer-closed-left, 0);
+        height: var(--dile-app-drawer-content-height, auto);
+        width: var(--dile-app-drawer-content-width, 100vw);
+        box-shadow: var(--dile-app-drawer-box-shadow, 0 1px 8px #000);
+      }
+
+      :host([direction="left"]) .menu {
+        top: var(--dile-app-drawer-closed-top, 0);
+        left: var(--dile-app-drawer-closed-left, -100vw);
+        height: var(--dile-app-drawer-content-height, 100vh);
+        width: var(--dile-app-drawer-content-width, auto);
+        box-shadow: var(--dile-app-drawer-box-shadow, 1px 0 8px #000);
+      }
+
+      :host([direction="top"][opened]) .menu {
+        transform: translateY(100vh);
+      }
+
+      :host([direction="left"][opened]) .menu {
+        transform: translateX(100vw);
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.modalTemplate}
+      <div class="menu" @click="${this._contentClick}">
+        <section>
+          <slot></slot>
+        </section>
+      </div>
+    `;
+  }
+
+  get modalTemplate() {
+    return this.noModal ? '' : html`<div class="modal" @click=${this._documentClose}></div>`;
+  }
+
+  _documentClose() {
+    if (this.opened) {
+      this.close();
+      this.dispatchEvent(
+        new CustomEvent(DILE_APP_DRAWER_EVENT_CLOSE_OUTSIDE, {
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  toggle() {
+    this.opened = !this.opened;
+  }
+
+  open() {
+    this.opened = true;
+  }
+
+  close() {
+    this.opened = false;
+    this.dispatchEvent(new CustomEvent(DILE_APP_DRAWER_EVENT_CLOSED, {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  _contentClick(e) {
+    e.stopPropagation();
+  }
+}

package/components/avatar/avatar.js

@@ -0,0 +1,3 @@
+import { DileAvatar } from "./src/DileAvatar.js";
+
+window.customElements.define("dile-avatar", DileAvatar);

package/components/avatar/index.js

@@ -0,0 +1 @@
+export { DileAvatar } from './src/DileAvatar.js';

package/components/avatar/src/DileAvatar.js

@@ -0,0 +1,78 @@
+import { LitElement, html, css } from "lit";
+
+let defaultIcon = `data:image/svg+xml;utf8,<svg style="fill:%23888;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`;
+
+export class DileAvatar extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      div {
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-position: center;
+        line-height: var(--dile-avatar-size, 36px);
+        width: var(--dile-avatar-size, 36px);
+        height: var(--dile-avatar-size, 36px);
+        border-radius: var(--dile-avatar-size, 36px);
+        background-size: var(--dile-avatar-size, 36px);
+        background-color: var(--dile-avatar-background-color, #ddd);
+        color: var(--dile-avatar-color, #888);
+        text-align: center;
+        font-size: calc(var(--dile-avatar-size, 36px) - 11px);
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+    `;
+  }
+  static get properties() {
+    return {
+      src: { type: String },
+      initial: { type: String },
+    };
+  }
+  constructor() {
+    super();
+    this.src = "";
+    this.initial = "";
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("initial") && typeof this.initial == "string" && this.initial.length > 0) {
+      this.initial = this.initial.charAt(0);
+    }
+  }
+
+  render() {
+    return html`
+      ${this.src == "" && this.initial != "" && this.initial.length == 1
+        ? this.initialTemplate
+        : this.imageTemplate
+      }
+    `;
+  }
+
+  get imageTemplate() {
+    return html`<div
+        id="img"
+        role="img"
+        style="background-image: url('${this._asignImage(this.src)}');"
+      >&nbsp;</div>`;
+  }
+
+  get initialTemplate() {
+    return html`<div
+        id="img"
+        role="img"
+        class="initial"
+      >${this.initial}</div>`;
+  }
+
+  _asignImage(src) {
+    if (src == "" || !src) {
+      return defaultIcon;
+    }
+    return src;
+  }
+}

package/components/breadcrumbs/breadcrumbs-item.js

@@ -0,0 +1,3 @@
+import { DileBreadcrumbsItem } from "./src/DileBreadcrumbsItem";
+
+window.customElements.define("dile-breadcrumbs-item", DileBreadcrumbsItem);

package/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,4 @@
+import './breadcrumbs-item.js';
+import { DileBreadcrumbs } from "./src/DileBreadcrumbs.js";
+
+window.customElements.define("dile-breadcrumbs", DileBreadcrumbs);

package/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export { DileBreadcrumbs } from './src/DileBreadcrumbs.js';
+export { DileBreadcrumbsItem } from './src/DileBreadcrumbsItem.js';

package/components/breadcrumbs/src/DileBreadcrumbs.js

@@ -0,0 +1,76 @@
+import { html, css, LitElement } from "lit";
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+export class DileBreadcrumbs extends LitElement {
+  static get properties() {
+    return {
+      items: { type: Array },
+      separator: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.items = [];
+    this.separator = '/'
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      ::slotted(dile-breadcrumbs-item.separator) {
+        padding-left: var(--dile-breadcrumbs-separator-width, 0.5rem);
+      }
+      ::slotted(dile-breadcrumbs-item.separator)::before {
+        padding-right: var(--dile-breadcrumbs-separator-width, 0.5rem);
+        font-size: var(--dile-breadcrumbs-font-size, 1rem);
+        color: var(--dile-breadcrumbs-text-color, #303030);
+      }
+      .separator {
+        padding-left: var(--dile-breadcrumbs-separator-width, 0.5rem);
+      }
+      .separator::before {
+        padding-right: var(--dile-breadcrumbs-separator-width, 0.5rem);
+        font-size: var(--dile-breadcrumbs-font-size, 1rem);
+        color: var(--dile-breadcrumbs-text-color, #000);
+      }  
+    `;
+  }
+
+  firstUpdated() {
+    this.querySelectorAll('dile-breadcrumbs-item').forEach( (item, index) => {
+      if(index > 0) {
+        item.classList.add('separator');
+      }
+    })
+  }
+
+  render() {
+    return html`
+      <style>
+        .separator::before,
+        ::slotted(dile-breadcrumbs-item.separator)::before {
+          content: "${this.separator}";
+        }          
+      </style>
+      ${this.items.length > 0
+        ? this.arrayTemplate
+        : html`<slot></slot>`
+      }
+    `;
+  }
+
+  get arrayTemplate() {
+    return html`
+      ${this.items.map((item, index) => html`
+          <dile-breadcrumbs-item 
+            class="${ index != 0 ? 'separator' : '' }" 
+            href="${ifDefined(item.href)}"
+            name="${ifDefined(item.name)}"
+            >${item.text}</dile-breadcrumbs-item>`                      
+      )}                
+    `;
+  }
+}

package/components/breadcrumbs/src/DileBreadcrumbsItem.js

@@ -0,0 +1,51 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileBreadcrumbsItem extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: inline-block;
+                font-size: var(--dile-breadcrumbs-font-size, 1rem);
+            }
+            a, .named {
+                text-decoration: var(--dile-breadcrumbs-text-decoration, none);
+                color: var(--dile-breadcrumbs-link-color, #39c);
+            }  
+            .named {
+                cursor: pointer;
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        href: { type: String },
+        name: { type: String },
+      };
+    }
+
+    render() {
+        return html`
+            ${this.href 
+                ? html`<a href="${this.href}">${this.contentTemplate}</a>`
+                : html`<span class="${this.name ? 'named' : ''}" @click=${this.dispatchClick}>${this.contentTemplate}</span>`
+            }
+        `;
+    }
+
+    get contentTemplate() {
+        return html`<slot></slot>`;
+    }
+
+    dispatchClick(e) {
+        if(this.name) {
+            this.dispatchEvent(new CustomEvent('dile-breadcrumbs-click', { 
+                bubbles: true,
+                composed: true,
+                detail: {
+                    name: this.name,
+                }
+            }));
+        }
+    }
+}

package/components/button/button-icon.js

@@ -0,0 +1,3 @@
+import { DileButtonIcon } from "./src/DileButtonIcon.js";
+
+window.customElements.define("dile-button-icon", DileButtonIcon);

package/components/button/button.js

@@ -0,0 +1,3 @@
+import { DileButton } from "./src/DileButton.js";
+
+window.customElements.define("dile-button", DileButton);

package/components/button/index.js

@@ -0,0 +1,2 @@
+export { DileButton } from './src/DileButton.js';
+export { DileButtonIcon } from './src/DileButtonIcon.js';

package/components/button/src/DileButton.js

@@ -0,0 +1,86 @@
+import { html, css, LitElement } from "lit";
+
+export class DileButton extends LitElement {
+  static get properties() {
+    return {
+      disabled: { type: Boolean },
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.disabled = false;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        cursor: pointer;
+        padding-top: var(--dile-button-padding-y, 0.5rem);
+        padding-bottom: var(--dile-button-padding-y, 0.5rem);
+        padding-right: var(--dile-button-padding-x, 0.8rem);
+        padding-left: var(--dile-button-padding-x, 0.8rem);
+        border-radius: var(--dile-button-border-radius, 2rem);
+        border-width:  var(--dile-button-border-width, 3px);
+        border-color:  var(--dile-button-border-color, #07193b);
+        background-color: var(--dile-button-background-color, #7BB93D);
+        transition-property: background-color, color;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in-out;
+        border-style: solid;
+        color: var(--dile-button-text-color, #fff); 
+        font-size: var(--dile-button-font-size, 1rem);
+        font-weight: var(--dile-button-font-weight, bold);
+        text-transform: var(--dile-button-text-transform, none);
+        letter-spacing: var(--dile-button-letter-spacing, 0);
+      }
+      button:hover {
+        background-color: var(--dile-button-hover-background-color, #f3f3ae);
+        color: var(--dile-button-hover-text-color, #303030);
+        border-color:  var(--dile-button-hover-border-color, #666666);
+      }
+      button:focus {
+        outline: none;
+        box-shadow: 0 0 0 calc(0px + var(--dile-button-ring-offset-width, 3px)) var(--dile-button-ring-color, #12c9e9);
+        border-color: var(--dile-button-ring-color, #12c9e9);
+      }
+
+      :host([disabled]) button {
+        cursor: auto;
+        background-color: var(--dile-button-disabled-background-color, #ccc);
+        color: var(--dile-button-disabled-text-color, #999);
+        border-color: var(--dile-button-disabled-border-color, #bbb);
+      }
+      :host([disabled]) button:focus {
+        outline: none;
+        box-shadow: none;
+
+      }
+      :host([disabled]) button:active {
+        outline: none;
+        border-color: #aaa;
+        box-shadow: none;
+      }
+      button {
+        user-select: none;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <button @click="${this.doClick}"><slot></slot></button>
+    `;
+  }
+
+  doClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+}

package/components/button/src/DileButtonIcon.js

@@ -0,0 +1,38 @@
+import { html, css, LitElement } from "lit";
+import { DileButton } from './DileButton.js';
+import '../../icon/icon.js';
+
+export class DileButtonIcon extends DileButton {
+  static get properties() {
+    return {
+      icon: { type: Object },
+    };
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        button {
+          display: flex;
+          align-items: center;
+        }
+        dile-icon {
+          margin-right: var(--dile-button-icon-separation, 0.3rem);
+        }
+        button:hover {
+          --dile-icon-color: var(--dile-button-icon-hover-color, #303030);
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <button @click="${this.doClick}">
+          <dile-icon .icon=${this.icon}></dile-icon>
+          <slot></slot>
+      </button>
+    `;
+  }
+}

package/components/card/card.js

@@ -0,0 +1,3 @@
+import { DileCard } from "./src/DileCard.js";
+
+window.customElements.define("dile-card", DileCard);

package/components/card/index.js

@@ -0,0 +1 @@
+export { DileCard } from './src/DileCard.js';

package/components/card/src/DileCard.js

@@ -0,0 +1,111 @@
+import { LitElement, html, css } from 'lit';
+
+export class DileCard extends LitElement {
+    static styles = [
+      css`
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+          align-items: stretch;
+        }
+        section {
+          border: var(--dile-card-border, 1px solid #ccc);
+          border-radius: var(--dile-card-border-radius, 0.5rem);
+          background-color: var(--dile-card-background-color, #fff);
+          color: var(--dile-card-text-color, #303030);
+          width: 100%;
+          text-align: var(--dile-card-text-align, left);
+          font-weight: var(--dile-card-font-weight, normal);
+          box-shadow: var(--dile-card-box-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
+        }
+        h1, main, footer {
+          padding-right: var(--dile-card-padding-x, 1rem);
+          padding-left: var(--dile-card-padding-x, 1rem);
+        }
+        h1 {
+          padding-top: var(--dile-card-padding-y, 1rem);
+          font-size: var(--dile-card-title-font-size, 1.5rem);
+          font-weight: var(--dile-card-title-font-weight, 300);
+          color: var(--dile-card-title-color, var(--dile-card-text-color, #303030));
+          margin: 0;
+          margin-bottom: var(--dile-card-title-margin-bottom, 0);
+        }
+        main {
+          padding-top: var(--dile-card-padding-y, 1rem);
+          padding-bottom: var(--dile-card-padding-y, 1rem);
+        }
+        footer {
+          border-top: var(--dile-card-footer-border-separator, 1px solid #ccc);
+          padding-top: var(--dile-card-footer-padding-top, 0.75rem);
+          padding-bottom: var(--dile-card-padding-y, 1rem);
+          background-color: var(--dile-card-footer-background-color, transparent);
+          overflow: hidden;
+          border-bottom-left-radius: var(--dile-card-border-radius, 0.5rem);
+          border-bottom-right-radius: var(--dile-card-border-radius, 0.5rem);
+        }
+        :host([shadow-none]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 0 #0000);
+        }
+        :host([shadow-sm]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+        }
+        :host([shadow-md]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+        }
+        :host([shadow-lg]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
+        }
+        :host([shadow-xl]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+        }
+        :host([shadow-2xl]) section {
+          box-shadow: var(--dile-card-box-shadow, 0 25px 50px -12px rgb(0 0 0 / 0.25));
+        }
+
+      `
+    ];
+
+    static get properties() {
+      return {
+        title: { type: String }
+      };
+    }
+
+    render() {
+      return html`
+        <section>
+          ${this.titleTemplate}
+          <main>
+            <slot></slot>
+          </main>
+          ${this.footerTemplate}
+        </section>
+      `;
+    }
+
+    get titleTemplate() {
+      return this.title 
+          ? html`<h1>${this.title}</h1>`
+          : ''
+    }
+
+
+    get footerTemplate() {
+      return html`
+        ${this.hasSlot('footer') 
+          ? html`
+            <footer>
+                <slot name="footer"></slot>
+            </footer>
+            `
+          : ''
+        }
+      `;
+    }
+    
+    hasSlot(name) {
+        return this.querySelector(`[slot="${name}"]`) !== null;
+    }
+}

package/components/checkbox/checkbox.js

@@ -0,0 +1,3 @@
+import { DileCheckbox } from "./src/DileCheckbox.js";
+
+window.customElements.define("dile-checkbox", DileCheckbox);

package/components/checkbox/index.js

@@ -0,0 +1 @@
+export { DileCheckbox } from './src/DileCheckbox.js';