@dile/ui 2.0.1

package/components/icon-switch/src/DileIconSwitch.js

@@ -0,0 +1,54 @@
+import { html, css, LitElement } from "lit";
+import '../../icon/icon.js';
+
+export class DileIconSwitch extends LitElement {
+  static get properties() {
+    return {
+      icon: { type: Object },
+      active: { 
+        type: Boolean,
+        reflect: true,
+      },
+      name: { type: String },
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: inline-block;
+        }
+        dile-icon {
+          --dile-icon-color: var(--dile-icon-switch-inactive-color, #303030);
+        }
+        :host([active]) dile-icon{
+          --dile-icon-color: var(--dile-icon-switch-active-color, #7BB93D);
+        }
+        .flex {
+          display: flex;
+          align-items: center;
+        }
+    `];
+  }
+
+  render() {
+    return html`
+      <div class="flex">
+        <dile-icon .icon="${this.icon}" @click=${this.clickHandler}></dile-icon>
+      </div>
+    `;
+  }
+
+  clickHandler() {
+    this.active = ! this.active;
+    this.dispatchEvent(new CustomEvent('dile-icon-switch-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        active: this.active,
+        name: this.name,
+      }
+    }));
+  }
+}

package/components/icon-switch/src/DileIconSwitchGroup.js

@@ -0,0 +1,38 @@
+import { LitElement, html, css } from 'lit';
+import '../icon-switch';
+
+export class DileIconSwitchGroup extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      .flex {
+        display: flex;
+        align-items: center;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+    <div class="flex" @dile-icon-switch-changed=${this.processChanged}>
+      <slot></slot>
+    </div>
+    `;
+  }
+
+  processChanged(e) {
+    this.querySelectorAll('dile-icon-switch').forEach( element => {
+      if(element.name != e.detail.name) {
+        element.active = false;
+      } else {
+        if(element.active == false) {
+          element.active = true;
+          e.stopPropagation();
+        }
+      }
+    });
+  }
+}
+

package/components/info-box/index.js

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

package/components/info-box/info-box.js

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

package/components/info-box/src/DileInfoBox.js

@@ -0,0 +1,118 @@
+import { LitElement, html, css } from 'lit';
+import { DileSlideDown } from '../../../mixins/slide-down';
+import { closeIcon, infoIcon, warningIcon, iconStyles } from '@dile/icons/index.js';
+
+export class DileInfoBox  extends DileSlideDown(LitElement) {
+
+  static get styles() {
+    return [iconStyles, css`
+      :host {
+        display: block;
+      }
+      #box {
+        transition: height 0.3s ease-in;
+        overflow: hidden;
+      }
+      section {
+        box-sizing: border-box;
+        display: flex;
+        align-items: flex-start;
+        border-radius: var(--dile-info-box-border-radius, 0px);
+        padding: var(--dile-info-box-padding, 1rem);
+        background-color: var(--dile-info-box-background-color, #ddd);
+        color: var(--dile-info-box-text-color, #303030);
+      }
+      .content {
+        flex-grow: 1;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .info {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        --dile-icon-size: 36px;
+      }
+      main {
+        flex-grow: 1;
+      }
+      .close {
+        padding-top: 0.5rem;
+        display: flex;
+        align-items: flex-start;
+        --dile-icon-color: var(--dile-info-box-close-icon-color, #f33);
+      }
+      button {
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+      }
+      .title {
+        margin-bottom: var(--dile-info-box-title-margin-bottom, 0.5rem);;
+        font-size: var(--dile-info-box-title-font-size, 1.3rem);
+        font-weight: var(--dile-info-box-title-font-weight, bold);
+        color: var(--dile-info-box-title-text-color, inherit);
+      }
+      @media(min-width: 400px) {
+        .content {
+          flex-direction: row;
+          align-items: center;
+        }
+        .info {
+          margin: 0 1rem 0 0;
+          --dile-icon-size: 28px;
+        }
+        .close {
+          padding-top: 0;
+        }
+      }
+      @media(min-width: 500px) {
+        .info {
+          --dile-icon-size: 36px;
+        }
+      }
+    `];
+  }
+
+  static get properties() {
+    return {
+      showCloseButton: { type: Boolean },
+      title: { type: String },
+      isError: { type: Boolean}
+    };
+  }
+
+  render() {
+    return html`
+      <div id="box">
+        <section>
+          <div class="content">
+            <span class="info">${this.showIcon(this.isError)}</span>
+            <main>
+              ${this.title
+                  ? html`<div class="title">${this.title}</div>`
+                  : ''
+              }
+              <slot></slot>
+            </main>
+          </div>
+          ${this.showCloseButton 
+            ? html`
+              <div class="close">
+                <button @click="${this.close}">${closeIcon}</button>
+              </div>` : ''}
+        </section>
+      </div>
+    `;
+  }
+
+  close() {
+    let elem = this.shadowRoot.getElementById('box');
+    this.slideHide(elem);
+  }
+
+  showIcon(isError) {
+    return isError ? html`${warningIcon}` : html`${infoIcon}`
+  }
+}

package/components/inline-feedback/index.js

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

package/components/inline-feedback/inline-feedback.js

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

package/components/inline-feedback/src/DileInlineFeedback.js

@@ -0,0 +1,96 @@
+import { LitElement, html, css } from "lit";
+import { DileSlideDown } from '../../../mixins/slide-down';
+
+export class DileInlineFeedback extends DileSlideDown(LitElement) {
+  static get properties() {
+    return {
+      msg: { type: String },
+      status: { type: String },
+      opened: { type: Boolean },
+    }
+  }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      section {
+        box-sizing: border-box;
+        font-size: 0.9em;
+        border-radius: 5px;
+        text-align: center;
+        background-color: #ddd;
+        height: 0px;
+        overflow: hidden;
+        transition: all 0.3s ease-in;
+        -webkit-transition: all 0.3s ease-in;
+      }
+      section p {
+        margin: 0;
+        padding: 12px 5px;
+        overflow: hidden;
+      }
+      .error {
+        background-color: rgba(220, 60, 60, 0.3);
+        box-shadow: inset 0 0 0 2px rgba(220, 60, 60, 0.5);
+      }
+      .success {
+        background-color: rgba(30, 220, 99, 0.3);
+        box-shadow: inset 0 0 0 2px rgba(30, 220, 99, 0.5);
+      }
+      .neutral {
+        background-color: rgba(30, 100, 250, 0.2);
+        box-shadow: inset 0 0 0 2px rgba(30, 100, 220, 0.5);
+      }
+      @media(min-width: 850px) {
+        section {
+          font-size: 0.8em;
+        }
+      }
+    `;
+  }
+
+  render() {
+    return html`
+    <section id="msg" class="${this.status}">
+      <p>
+        ${this.msg}
+      </p>
+    </section>
+    `;
+  }
+
+  firstUpdated() {
+    this.msgElement = this.shadowRoot.getElementById('msg');
+  }
+
+  doFeeedback(msg, status) {
+    if(this.opened) {
+      this.clear();
+      setTimeout(() => this.doFeeedback(msg, status), 300);
+      return;
+    }
+    this.msg = msg;
+    this.status = status;
+    setTimeout(() => {
+      this.slideShow(this.msgElement);
+      this.opened = true
+    }, 100);
+    
+  }
+  positiveFeedback(msg) {
+    this.doFeeedback(msg, 'success');
+  }
+  negativeFeedback(msg) {
+    this.doFeeedback(msg, 'error');
+  }
+  neutralFeedback(msg) {
+    this.doFeeedback(msg, 'neutral');    
+  }
+  clear() {
+    this.slideHide(this.msgElement);
+    this.msg = '';
+    this.status = '';
+    this.opened = false;
+  }
+}

package/components/input/index.js

@@ -0,0 +1,9 @@
+export { DileInput } from './src/DileInput.js';
+export { DileInputInteger } from './src/DileInputInteger.js';
+export { DileInputMessage } from './src/DileInputMessage.js';
+export { DileInputMoney } from './src/DileInputMoney.js';
+export { DileInputNumberMask } from './src/DileInputNumberMask.js';
+export { DileInputPercentage } from './src/DileInputPercentage.js';
+export { DileInputSearch } from './src/DileInputSearch.js';
+export { messageStyles } from './src/message-styles.js';
+export { Mask } from './src/Mask.js';

package/components/input/input-integer.js

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

package/components/input/input-message.js

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

package/components/input/input-money.js

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

package/components/input/input-number-mask.js

@@ -0,0 +1,3 @@
+import { DileInputNumberMask } from './src/DileInputNumberMask.js';
+
+window.customElements.define('dile-input-number-mask', DileInputNumberMask);

package/components/input/input-percentage.js

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

package/components/input/input-search.js

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

package/components/input/input.js

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

package/components/input/src/DileInput.js

@@ -0,0 +1,245 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { messageStyles } from './message-styles.js';
+
+export class DileInput extends DileEmmitChange(LitElement) {
+
+    /**
+     * Fired when user press enter key.
+     *
+     * @event enter-pressed
+     */
+
+    /**
+     * Liten to the native input event to recive text input updates
+     *
+     * @event input
+     */
+
+    static get properties() {
+        return {
+          /** Label to the element */
+          label: { type: String },
+
+          /** Input type */
+          type: { type: String },
+
+          /** Set a placeholder to the input element */
+          placeholder: { type: String },
+
+          /** Disable the input field */
+          disabled: { type: Boolean },
+
+          /** Set initial value to the input. This property syncs to the input field value property */
+          value: { type: String },
+
+          /** Name for this input field */
+          name: { type: String },
+
+          /** Has error on this input field */
+          errored: { type: Boolean },
+
+          /** Disable the autocomplete of the input field */
+          disableAutocomplete: { type: Boolean },
+
+          /** ReadOnly attribute */
+          readonly: { type: Boolean },
+
+          /** Select all content on focus */
+          selectOnFocus: { type: Boolean },
+
+          /** Message Displayed */
+          message: { type: String },
+
+          /** Text placed on the right side of the input  */
+          labelRight: { type: String },
+
+          /** Hide errors on input */
+          hideErrorOnInput: { type: Boolean },
+
+          /** Set the application focus to this the input component after the initialization */
+          focusOnStart: { type: Boolean },
+        };
+    }
+
+    firstUpdated() {
+      if(this.focusOnStart) {
+        this.focus();
+      }
+    }
+
+    updated(changedProperties) {
+      if(changedProperties.has('value')) {
+        this.emmitChange();
+      }
+    }
+
+    constructor() {
+        super();
+        this.placeholder = '';
+        this.label = '';
+        this.labelRight = '';
+        this.value = '';
+        this.disabled = false;
+        this.disableAutocomplete = false;
+        this.name = '';
+        this.type = 'text';
+        this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];     
+    }
+
+    static get styles() {
+        return [
+          messageStyles,
+          css`
+            * {
+              box-sizing: border-box;
+            }
+            :host {
+              display: block;
+              margin-bottom: 10px;
+            }
+            :host([type="hidden"]) {
+              display: none;
+            }
+            main {
+              width: var(--dile-input-section-width, 100%);
+            }
+            label {
+              display: block;
+              margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+              font-size: var(--dile-input-label-font-size, 1em);
+              color: var(--dile-input-label-color, #59e);
+              font-weight: var(--dile-input-label-font-weight, normal);
+            }
+            input {
+              box-sizing: border-box;
+              border-radius: var(--dile-input-border-radius, 5px);
+              border: var(--dile-input-border-width, 1px) solid var(--dile-input-border-color, #888);
+              font-size: var(--dile-input-font-size, 1em);
+              line-height: var(--dile-input-line-height, 1.5em);
+              padding: var(--dile-input-padding, 5px);
+              background-color: var(--dile-input-background-color, #fff);
+              color: var(--dile-input-color, #303030);
+              text-align: var(--dile-input-text-align, left);
+              width: 100%;
+              flex-grow: 1;
+            }
+            input:focus {
+              outline: none;
+              border-color: var(--dile-input-focus-border-color, #6af)
+            }
+            input::placeholder {
+              color: var(--dile-input-placeholder-color, #ccc);
+            }
+            input:disabled {
+              background-color: #f5f5f5;
+              border-color: var(--dile-input-disabled-border-color, #eee);
+            }
+            .errored {
+              border-color: var(--dile-input-error-border-color, #c00);
+            }
+            section.for-input {
+              display: flex;
+              align-items: center;
+              width: 100%;
+            }
+            .labelright {
+              margin-left: var(--dile-input-label-right-margin-left, 10px);
+              color: var(--dile-input-label-color, #59e);
+              font-size: var(--dile-input-label-right-font-size, 1.2em);
+            }
+          `
+        ];
+    }
+    
+    render() {
+        return html`
+          <main>
+            ${this.label
+              ? html`<label for="textField">${this.label}</label>`
+              : ""}
+             <section class="for-input">
+              <input
+                type="${this.availableType(this.type)}"
+                id="textField"
+                name="${this.name}"
+                placeholder="${this.placeholder}"
+                ?disabled="${this.disabled}"
+                ?readonly="${this.readonly}"
+                autocomplete="${this.disableAutocomplete ? "off" : "on"}"
+                .value="${this.computeValue(this.value)}"
+                class="${this.errored ? 'errored' : ''}"
+                @keypress="${this._lookForEnter}"
+                @input="${this._input}"
+                @blur="${this.doBlur}"
+                @focus="${this.doFocus}"
+              /> 
+              ${this.labelRight 
+                ? html`<span class="labelright">${this.labelRight}</span>`
+                : ''
+              }
+            </section>
+            ${this.messageTemplate}
+          </main>
+        `;
+    }
+
+    get messageTemplate() {
+      return html`
+        ${this.message 
+          ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+          : ''
+        }
+      `
+    }
+
+    /**
+     * Private method to dispatch events on enter key pressed
+     */
+    _lookForEnter(e) {
+        let keycode = (e.keyCode ? e.keyCode : e.which);
+        if (keycode == '13') {
+            this.dispatchEvent(new CustomEvent('enter-pressed'));
+        }
+    }
+    _input(e) {
+        this.value = e.target.value;
+        if (this.hideErrorOnInput && this.errored) {
+          this.clearError();  
+        }
+    }
+    
+    clearError() {
+      this.errored = false;
+      this.message = '';
+    }
+
+    availableType(type) {
+        if(this.types.includes(type)) {
+            return type;
+        }
+        return 'text';
+    }
+
+    get el() {
+        return this.shadowRoot.querySelector('input');
+    }
+
+    doBlur() {
+      //
+    }
+
+    doFocus() {
+      if(this.selectOnFocus) {
+        this.el.select();
+      }
+    }
+
+    computeValue(value) {
+      return value;
+    }
+
+    focus() {
+      this.el.focus();
+    }
+}

package/components/input/src/DileInputInteger.js

@@ -0,0 +1,45 @@
+import { LitElement, html, css } from 'lit';
+import { DileInput } from './DileInput';
+
+export class DileInputInteger extends DileInput {
+    static styles = [
+        DileInput.styles,
+        css`
+            :host {
+                display: block;
+            }
+            input {
+              text-align: var(--dile-input-integer-text-align, var(--dile-input-text-align, right));
+            }
+        `
+    ];
+
+    constructor() {
+        super();
+        this.changed = false;
+    }
+    
+    doBlur(e) {
+        let num = e.target.value;
+        if(num.length > 0) {
+            num = this.formatInteger(num);
+        }
+        if(num != e.target.value || this.changed) {
+            this.el.value = num;
+            this.value = num;
+            this.emmitChange();
+            this.changed = false;
+        }
+    }
+
+    formatInteger(num) {
+        num = parseInt(num);
+        return isNaN(num) ? '0' : num;
+    }
+
+    updated(changedProperties) { 
+        if(changedProperties.has('value') && this.value) {
+            this.changed = true;
+        }
+    }
+}

package/components/input/src/DileInputMessage.js

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+import { DileInput } from "./DileInput";
+
+export class DileInputMessage extends DileInput {
+  
+  render() {
+    return html`
+      ${this.messageTemplate}  
+    `
+  }
+
+}