@dile/ui 2.0.1

package/components/textarea/src/DileTextarea.js

@@ -0,0 +1,166 @@
+import { LitElement, html, css } from 'lit';
+import { messageStyles } from '../../input/index.js';
+
+export class DileTextarea extends LitElement {
+
+  static get styles() {
+    return [
+      messageStyles, 
+      css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      label {
+        margin-bottom: var(--dile-textarea-label-margin-bottom, 4px);
+        color: var(--dile-textarea-label-color, #59e);
+        font-size: var(--dile-textarea-label-font-size, 1em);
+        font-weight: var(--dile-textarea-label-font-weight, normal);
+      }
+
+      textarea {
+        border: var(--dile-textarea-border, 1px solid #888);
+        border-radius: var(--dile-textarea-border-radius, 5px);
+        padding: var(--dile-textarea-padding, 5px);
+        background-color: var(--dile-textarea-background-color, #fff);
+        color: var(--dile-textarea-color, #000);
+        font-size: var(--dile-textarea-font-size, 1em);
+        font-family: var(--dile-textarea-font-family, sans-serif);
+        width: 100%;
+        box-sizing: border-box; 
+        line-height: 1.5rem;
+      }
+
+      textarea::placeholder {
+        color: var(--dile-textarea-placeholder-color, #999);
+      }
+
+      :host([disabled]) textarea {
+        background-color: var(--dile-textarea-disabled-background-color, #ebebeb);
+        border-color: var(--dile-textarea-disabled-border-color, #ccc);
+      }
+      
+      .errored {
+        border-color: var(--dile-input-error-border-color, #c00);
+      }
+      .for-input {
+        display: flex;
+      }
+      
+    `];
+  }
+
+  static get properties() {
+    return {
+      name: { type: String },
+      label: { type: String },
+      errored: { 
+        type: Boolean,
+        reflect: true
+      },
+      message: { type: String },
+      hideErrorOnInput: { type: Boolean },
+      value: { type: String },
+      placeholder: { type: String },
+      rows: { type: Number },
+      maxRows: { type: Number },
+      readonly: { type: Boolean },
+      disabled: { 
+        type: Boolean,
+        reflect: true,
+       },
+    };
+  }
+
+  constructor() {
+    super();
+    this.errored = false;
+    this.hideErrorOnInput = false;
+    this.value = '';
+    this.rows = 3;
+    this.maxRows = 10;
+    this._maxHeight = 100;
+  }
+
+  firstUpdated() {
+    this.eltextarea = this.shadowRoot.getElementById('textArea');
+    this.resizeTextarea();
+  }
+
+  placeCursorAtEnd() {
+    this.eltextarea.setSelectionRange(this.eltextarea.value.length, this.eltextarea.value.length);
+    this.eltextarea.focus();
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('maxRows')) {
+      this.calculateMaxHeight();
+    }
+  }
+  
+  render() {
+    return html`
+      <main>
+        ${this.label
+          ? html`<label for="textArea">${this.label}</label>`
+          : ""}
+         <section class="for-input">
+          <textarea
+            rows="${this.rows}"
+            id="textArea"
+            name="${this.name}"
+            placeholder="${this.placeholder}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readonly}"
+            autocomplete="${this.disableAutocomplete ? "off" : "on"}"
+            .value="${this.value}"
+            class="${this.errored ? 'errored' : ''}"
+            @keypress="${this._lookForEnter}"
+            @input="${this.onInput}"
+            @blur="${this.doBlur}"
+            @focus="${this.doFocus}"
+          ></textarea> 
+          ${this.labelRight 
+            ? html`<span class="labelright">${this.labelRight}</span>`
+            : ''
+          }
+        </section>
+        ${this.message 
+          ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+          : ''
+        }
+      </main>
+    `;
+  }
+
+  onInput(e) {
+    if(this.hideErrorOnInput && this.errored) {
+      this.errored = false;
+      this.message = '';
+    }
+    this._resizeTextarea();
+    this.value = this.eltextarea.value;
+  }
+
+  _resizeTextarea() {
+    this.eltextarea.style.height = 'auto';
+    let scrollHeight = this.eltextarea.scrollHeight;
+    if(scrollHeight == 0) {
+      scrollHeight = this.lineHeight * this.rows;
+    }
+    let height = Math.min(scrollHeight, this._maxHeight);
+    this.eltextarea.style.height = height + 'px';
+  }
+
+  resizeTextarea() {
+    this.updateComplete.then(() => this._resizeTextarea());
+  }
+
+  get lineHeight() {
+    return parseInt(getComputedStyle(this.eltextarea).lineHeight, 10);
+  }
+  calculateMaxHeight() {
+    this._maxHeight = this.lineHeight * this.maxRows;
+  }
+
+}

package/components/textarea/textarea.js

@@ -0,0 +1,3 @@
+import { DileTextarea } from './src/DileTextarea.js';
+
+window.customElements.define('dile-textarea', DileTextarea);

package/components/toast/index.js

@@ -0,0 +1,3 @@
+export { DileToast } from "./src/DileToast.js";
+export { DileToastItem } from "./src/DileToastItem.js";
+export { DileToastPersistent } from './src/DileToastPersistent.js';

package/components/toast/src/DileToast.js

@@ -0,0 +1,95 @@
+import { LitElement, html, css } from "lit";
+
+export class DileToast extends LitElement {
+  static get properties() {
+    return {
+      /* Messages array: Array of objects. You usually will not touch directly this array, instead of it, use the open() method */
+      messages: { type: Array },
+      /* Miliseconds the feedback message remains on the screen */
+      duration: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.messages = [];
+    this.duration = 3000;
+    this.cleanTimeout = false;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column-reverse;
+        position: fixed;
+        bottom: 20px;
+        left: 15px;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.messages.map(
+        (msg) => html`
+          <dile-toast-item
+            .msg="${msg}"
+            duration="${this.duration}"
+          ></dile-toast-item>
+        `
+      )}
+    `;
+  }
+
+  /**
+   * Send a message to show in the screen
+   * @param text the text of the message
+   * @param toastType the status of the message (success, error, neutral)
+   */
+  open(text, toastType = "neutral") {
+    this.messages = [
+      ...this.messages,
+      {
+        text,
+        toastType,
+        hidden: false,
+        opening: true,
+      },
+    ];
+    this._programMessageClean();
+    this._programMessageHide();
+  }
+
+  /**
+   * Programs the hiding of the last message, after it's duration time
+   */
+  _programMessageHide() {
+    setTimeout(() => {
+      let foundItemToHide = false;
+      this.messages = this.messages.map((item) => {
+        if (!foundItemToHide && !item.hidden) {
+          foundItemToHide = true;
+          return {
+            ...item,
+            hidden: true,
+          };
+        } else {
+          return item;
+        }
+      });
+    }, this.duration);
+  }
+
+  /**
+   * Programs the cleaning of the array of messages, removing the hidden messages elements
+   */
+  _programMessageClean() {
+    if (this.cleanTimeout) {
+      clearTimeout(this.cleanTimeout);
+    }
+    this.cleanTimeout = setTimeout(() => {
+      this.messages = this.messages.filter((item) => !item.hidden);
+    }, this.duration + 1000);
+  }
+}

package/components/toast/src/DileToastItem.js

@@ -0,0 +1,92 @@
+import { LitElement, html, css } from "lit";
+
+export class DileToastItem extends LitElement {
+  static get properties() {
+    return {
+      msg: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.msg = {
+      msg: "",
+      toastType: "neutral",
+      hidden: false,
+      opening: true,
+    };
+  }
+
+  static get styles() {
+    return css`
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+      }
+      div {
+        color: var(--dile-toast-text-color, #fff);
+        padding: var(--dile-toast-padding, 10px 15px);
+        margin-top: 10px;
+        position: relative;
+        top: 0;
+        opacity: 1;
+        width: var(--dile-toast-width, 280px);
+        overflow: hidden;
+        transition: all 0.4s ease;
+        z-index: var(--dile-toast-z-index, 1001);
+        font-size: var(--dile-toast-font-size, 1em);
+        font-weight: var(--dile-toast-font-weight, normal);
+        border-radius: var(--dile-toast-border-radius, 0);
+      }
+      .hidden {
+        top: 20px;
+        opacity: 0;
+        height: 0;
+        padding: 0;
+      }
+      .error {
+        background-color: var(--dile-toast-error-color, #e74c3c);
+      }
+      .success {
+        background-color: var(--dile-toast-success-color, #27ae60);
+      }
+      .neutral {
+        background-color: var(--dile-toast-neutral-color, #303030);
+      }
+      .opening {
+        top: -20px;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <div
+        class="${this.msg.hidden ? "hidden" : ""} ${this.msg.opening
+          ? "opening"
+          : ""} ${this.getClassType(this.msg.toastType)}"
+      >
+        ${this.msg.text}
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.msg.opening = false;
+      this.requestUpdate();
+    }, 20);
+  }
+
+  getClassType(toastType) {
+    switch (toastType) {
+      case "error":
+      case "success":
+        return toastType;
+      default:
+        return "neutral";
+    }
+  }
+}

package/components/toast/src/DileToastPersistent.js

@@ -0,0 +1,100 @@
+import { LitElement, html, css } from "lit";
+import { DileOverlay } from "../../../mixins/overlay/index.js"
+
+export class DileToastPersistent extends DileOverlay(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+        position: relative;
+        box-sizing: border-box;
+      }
+      span {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        
+        width: 0;
+        height: 0;
+      }
+      :host([opened]) section {
+        transform: translateX(0);
+      }
+      :host([right]) span {
+        right: 0px;
+        left: auto;
+      }
+      #overlay {
+        box-sizing: border-box;
+        color: var(--dile-toast-persistent-color, #fff);
+        z-index: var(--dile-toast-persistent-z-index, 999);
+        background-color: var(--dile-toast-persistent-background-color, #0e6ff6);
+        border-radius: var(--dile-toast-persistent-border-radius, 0);
+        width: var(--dile-toast-persistent-width, 300px);
+        max-width: var(--dile-toast-persistent-max-width, 300px);
+        box-shadow: var(--dile-toast-persistent-box-shadow, 0 0 2px rgba(200, 200, 200, 0.5));
+        padding: var(--dile-toast-persistent-padding, 1px);
+        display: none;
+        position: absolute;
+        opacity: 0;
+        transition: var(--dile-toast-persistent-transition, ease 0.5s);
+        transition-property: transform, opacity;
+        transform: translateY(-10px);
+      }
+      #overlay.opened {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      #trigger {
+        display: flex;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      right: { 
+        type: Boolean,
+        reflect: true
+      },
+      openOnInit: {
+        type: Boolean,
+      }
+    };
+  }
+
+  constructor() {
+    super();
+    this.horizontalAlign = 'left';
+    this.verticalAlign = 'top';
+    this.moveLeft = -10;
+    this.moveTop = -16;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    if(this.openOnInit) {
+      setTimeout( () => this.open(), 200);
+    }
+  }
+  
+  updated(changedProperties) {
+    if(changedProperties.has('right') && this.right !== undefined) {
+      this.horizontalAlign = this.right ? 'left' : 'right';
+    }
+  }
+
+  render() {
+    return html`
+      <span id="trigger">
+        <div
+          id="overlay"
+          class="${this._overlayClass}"
+        >
+          <slot></slot>
+        </div>
+      </span>
+    `;
+  }
+
+}

package/components/toast/toast-item.js

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

package/components/toast/toast-persistent.js

@@ -0,0 +1,3 @@
+import { DileToastPersistent } from './src/DileToastPersistent.js';
+
+customElements.define("dile-toast-persistent", DileToastPersistent);

package/components/toast/toast.js

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

package/components/tooltip/chip-tooltip.js

@@ -0,0 +1,3 @@
+import { DileChipTooltip } from './src/DileChipTooltip.js';
+
+window.customElements.define('dile-chip-tooltip', DileChipTooltip);

package/components/tooltip/index.js

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

package/components/tooltip/src/DileChipTooltip.js

@@ -0,0 +1,86 @@
+import { LitElement, html, css } from 'lit';
+import '../tooltip.js';
+import '../../icon/icon.js';
+import { infoIcon } from '@dile/icons/index.js';
+
+export class DileChipTooltip  extends LitElement {
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        --dile-tooltip-width: var(--dile-chip-tooltip-width, 165px);
+        --dile-tooltip-time-transition: 0.3s;
+      }
+      .box {
+        display: flex;
+        align-items: center;
+      }
+      .chip {
+        font-size: var(--dile-chip-tooltip-font-size, 0.9rem);
+        font-weight: bold;
+        display: flex;
+        padding: var(--dile-chip-tooltip-padding, 0.2rem 0.7rem);
+        border-radius: 1rem;
+        background-color: var(--dile-chip-tooltip-background-color, #7BB93D);
+        color: var(--dile-chip-tooltip-text-color, #fff);
+        --dile-icon-color: var(--dile-chip-tooltip-icon-color, #fff);
+        --dile-icon-size: var(--dile-chip-tooltip-icon-size, 22px);
+        transition: background-color 0.3s ease-in-out;
+      }
+      .chip:hover {
+        background-color: var(--dile-chip-tooltip-hover-background-color, #303030);
+      }
+      .label {
+          display: inline-block;
+          position: relative;
+          top: 1px;
+          margin-right: 0.3rem;
+      }
+      @media(min-width: 350px) {
+          :host {
+            --dile-tooltip-width: var(--dile-chip-tooltip-width, 190px);
+          }
+      }
+      @media(min-width: 490px) {
+          :host {
+            --dile-tooltip-width: var(--dile-chip-tooltip-width, 240px);
+          }
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+        label: { type: String },
+        message: { type: String },
+        position: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.position = "bottom";
+  }
+
+  render() {
+    return html`
+    <div class="box">
+      <dile-tooltip 
+          tooltip="${this.message}"
+          position="${this.position}"
+          fadeIn
+          
+      >
+        <span class="chip">
+          ${this.label
+            ? html`<span class="label">${this.label}</span>`
+            : ''
+          }
+          <dile-icon .icon=${infoIcon} class="info"></dile-icon>
+        </span>
+      </dile-tooltip>
+    </div>
+    `;
+  }
+}