@dile/ui 2.0.1

package/components/input/src/DileInputMoney.js

@@ -0,0 +1,72 @@
+import { LitElement, html, css } from 'lit';
+import { DileInput } from './DileInput';
+
+export class DileInputMoney extends DileInput {
+    static styles = [
+        DileInput.styles,
+        css`
+            :host {
+                display: block;
+            }
+            input {
+              text-align: var(--dile-input-money-text-align, var(--dile-input-text-align, right));
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        decimalSeparator: { type: String }
+      };
+    }
+
+    constructor() {
+        super();
+        this.decimalSeparator = '.';
+    }
+
+    doBlur(e) {
+        let num = e.target.value;
+        if(num.length > 0) {
+            num = this.formatMoney(num);
+        }
+        if(num != e.target.value || this.changed) {
+            this.value = num;
+            this.emmitChange();
+            this.changed = false;
+        }
+    }
+
+    set(value) {
+        this.value = value;
+        this.doFormat();
+    }
+
+    doFormat() {
+        this.value = this.formatMoney(this.value.toString());
+    }
+
+    formatMoney(num) {
+        num = num.replace(this.decimalSeparator, '.');
+        num = parseFloat(num);
+        if(isNaN(num)) {
+            return '0.00';
+        } else {
+            return num.toFixed(2);
+        }
+    }
+
+    updated(changedProperties) { 
+        if(changedProperties.has('value') && this.value) {
+            this.changed = true;
+        }
+    }
+
+    computeValue(value) {
+        if(value) {
+            value = value.toString();
+            return value.replace('.', this.decimalSeparator);
+        }
+        return '';
+    }
+}

package/components/input/src/DileInputNumberMask.js

@@ -0,0 +1,83 @@
+import { LitElement, html } from 'lit';
+import { DileInput } from '../../input/index.js';
+import { Mask } from './Mask';
+
+export class DileInputNumberMask extends DileInput {
+
+  static get properties() {
+    return {
+      mask: { type: String },
+      maskedValue: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.mask = ''; 
+  }
+
+  firstUpdated() {
+    this.content = '';
+    this.maskedValue = '';
+    this.createMaskController(this.mask);
+  }
+
+  createMaskController(mask) {
+    this.maskController = new Mask(mask);
+    this.maxChars = this.maskController.getNumberCharactersOnPattern();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('mask')) {
+      this.maskController.setPattern(this.mask);
+      this.updateValue();
+    }
+    if (changedProperties.has('value')) {
+      this.content = this.value.slice(0, this.maxChars);
+      this.updateValue();
+    }
+  }
+
+  updateValue() {
+    this.maskedValue = this.maskController.maskIt(this.content);
+  }
+
+  render() {
+    return html`
+    <div>
+      ${this.label
+        ? html`<label for="textField">${this.label}</label>`
+        : ''
+      }
+      <input
+        type="text"
+        id="textField"
+        name="${this.name}"
+        placeholder="${this.placeholder}"
+        ?disabled="${this.disabled}"
+        @keypress="${this._lookForEnter}"
+        @keydown="${this.doKeyDown}"
+        .value="${this.maskedValue}"
+        class="${ this.errored ? 'errored' : '' }">
+    </div>
+    `;
+  }
+
+  doKeyDown(e) {
+    e.preventDefault();
+    if (this.isNumeric(e.key) && this.content.length < this.maxChars) {
+      this.content += e.key;
+    }
+    if (e.keyCode == 8) {
+      if (this.content.length > 0) {
+        this.content = this.content.substr(0, this.content.length - 1);
+      }
+    }
+    this.updateValue();
+  }
+
+  isNumeric(char) {
+    return !isNaN(char - parseInt(char));
+  }
+
+}

package/components/input/src/DileInputPercentage.js

@@ -0,0 +1,57 @@
+import { LitElement, html, css } from 'lit';
+import { DileInput } from './DileInput';
+
+export class DileInputPercentage extends DileInput {
+    static styles = [
+        DileInput.styles,
+        css`
+            :host {
+                display: block;
+            }
+        `
+    ];
+
+    static get properties() {
+        return {
+            decimalSeparator: { type: String }
+        };
+    }
+
+    constructor() {
+        super();
+        this.labelRight = '%';
+        this.decimalSeparator = '.';
+    }
+    
+    doBlur(e) {
+        let num = e.target.value;
+        if(num.length > 0) {
+            num = this.formatFloat(num);
+        }
+        if(num != e.target.value || this.changed) {
+            this.value = num;
+            this.emmitChange();
+            this.changed = false;
+        }
+    }
+
+    doFormat() {
+        this.value = this.formatFloat(this.value);
+    }
+
+    formatFloat(num) {
+        num = num.replace(this.decimalSeparator, '.');
+        num = parseFloat(num);
+        return isNaN(num) ? '0' : num;
+    }
+
+    updated(changedProperties) { 
+        if(changedProperties.has('value') && this.value) {
+            this.changed = true;
+        }
+    }
+
+    computeValue(value) {
+        return value.toString().replace('.', this.decimalSeparator);
+    }
+}

package/components/input/src/DileInputSearch.js

@@ -0,0 +1,145 @@
+import { LitElement, html, css } from 'lit';
+import '../../icon/icon.js';
+import { searchIcon, clearIcon } from '@dile/icons/index.js';
+
+export class DileInputSearch extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            div {
+                display: flex;
+                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);
+                padding: var(--dile-input-padding, 5px);
+                width: var(--dile-input-width, 100%);
+                background-color: var(--dile-input-background-color, #fff);
+            }
+            div:focus-within {
+                border-color: var(--dile-input-focus-border-color, #6af);
+            }
+            input {
+                flex-grow: 1;
+                border: none;
+                outline: none;
+                color: var(--dile-input-color, #303030);
+                font-size: var(--dile-input-font-size, 1em);
+                line-height: var(--dile-input-line-height, 1.5em);
+                background-color: var(--dile-input-background-color, #fff);
+            }
+            input::placeholder {
+              color: var(--dile-input-placeholder-color, #ccc);
+            }
+            dile-icon {
+                margin-left: 1px;
+                display: flex;
+            }
+            :host([disabled]) {
+                opacity: 0.5;
+            }
+            .errored {
+                border-color: var(--dile-input-error-border-color, #c00);
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        delay: { type: Number },
+        placeholder: { type: String },
+        value: { type: String },
+        disabled: { type: Boolean },
+        readOnly: { type: Boolean },
+        errored: { type: Boolean },
+      };
+    }
+
+    constructor() {
+        super();
+        this.delay = 300;
+        this.timeout = null;
+        this.value = '';
+        this.readOnly = false;
+        this.errored = false;
+    }
+
+    firstUpdated() {
+        this.input = this.shadowRoot.getElementById('elinput');
+    }
+
+    render() {
+        return html`
+        <div class="${this.errored ? "errored" : ""}">
+            <input 
+                id="elinput"
+                type="text" 
+                placeholder="${this.placeholder}" 
+                @input=${this.inputHandler}
+                autocomplete="off"
+                .value="${this.value}"
+                ?disabled="${this.disabled}"
+                ?readonly="${this.readOnly}"
+            >
+            <dile-icon 
+              @click=${this.iconClick}
+              .icon="${this.value.length ? clearIcon : searchIcon}"
+            ></dile-icon>
+        </div>
+        `;
+    }
+
+    inputHandler(e) {
+        this.value = e.target.value;
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+        this.timeout = setTimeout(() => {
+            this.dispatchSearch(this.value);
+        }, this.delay);
+    }
+
+    iconClick(e) {
+        this.clear();
+        this.input.focus();
+    }
+
+    dispatchSearch(key) {
+        this.dispatchEvent(new CustomEvent('dile-input-search', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                keyword: key
+            }
+        }));
+    }
+
+    dispatchClear() {
+        this.dispatchEvent(new CustomEvent('dile-input-search-cleared', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+
+    clear() {
+        if(this.value.length) {
+            this.value = '';
+            this.dispatchSearch(this.value);
+            this.dispatchClear();
+        }
+    }
+
+    focus() {
+        this.input.focus();
+    }
+
+    set(value) {
+        if (this.input) {
+            this.value = value;
+            this.dispatchSearch(value);
+        } else {
+            setTimeout( () => this.set(value), 200);
+        }
+    }
+}

package/components/input/src/Mask.js

@@ -0,0 +1,37 @@
+export class Mask {
+  constructor(pattern) {
+    this.pattern = pattern;
+  }
+
+  setPattern(newPattern) {
+    this.pattern = newPattern;
+  }
+
+  maskIt(value) {
+    let position = 0;
+    let masked = '';
+    let currentChar = 0;
+    while (position < this.pattern.length && currentChar < value.length) {
+      if (this.pattern[position] === '0') {
+        masked += value[currentChar];
+        currentChar++;
+      } else {
+        masked += this.pattern[position];
+      }
+      position++;
+    }
+    return masked;
+  }
+
+  getNumberCharactersOnPattern() {
+    let numberChars = 0;
+    for (let i = 0; i < this.pattern.length; i++) {
+      if (this.pattern[i] === '0') {
+        numberChars++;
+      }
+    }
+    return numberChars;
+  }
+
+  
+}

package/components/input/src/message-styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+export const messageStyles = css`
+  .message span {
+    display: block;
+    padding-top: var(--dile-input-message-padding-top, 4px);
+    font-size: var(--dile-input-message-font-size, 0.875rem);
+    color: var(--dile-input-message-color, #888);
+
+  }
+  .errored-msg span {
+    color: var(--dile-input-message-error-color, #c00);
+  }
+`;

package/components/menu-hamburger/index.js

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

package/components/menu-hamburger/menu-hamburger.js

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

package/components/menu-hamburger/src/DileMenuHamburger.js

@@ -0,0 +1,89 @@
+import { html, css, LitElement } from "lit";
+import '../../app-drawer/app-drawer.js';
+import '../../hamburger/hamburger.js';
+
+export class DileMenuHamburger extends LitElement {
+  static get properties() {
+    return {
+      direction: {
+        type: String,
+        reflect: true
+      },
+      opened: {
+        type: Boolean,
+        reflect: true
+      },
+      hamburgerAlwaysVisible: {
+        type: Boolean,
+        reflect: true
+      }
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      :host([hamburgerAlwaysVisible]) dile-hamburger {
+        position: relative;
+        z-index: 100020;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.direction = 'top';
+    this.opened = false;
+    this.hamburgerAlwaysVisible = false;
+  }
+
+  firstUpdated() {
+    this.drawer = this.shadowRoot.getElementById('drawer');
+    let menu = this.querySelector('[dile-cloak]');
+    if(menu) {
+      menu.removeAttribute('dile-cloak');
+    }
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('opened')) {
+      let theEvent = this.opened ? 'dile-menu-hamburger-opened' : 'dile-menu-hamburger-closed';
+      this.dispatchEvent(new CustomEvent(theEvent, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          opened: this.opened,
+        }
+      }));
+    }
+  }
+
+  render() {
+    return html`
+      <dile-hamburger @click="${this.toggle}" ?active="${this.opened}"></dile-hamburger>
+      <dile-app-drawer 
+        id="drawer" 
+        ?opened="${this.opened}" 
+        direction="${this.direction}"
+        @dile-app-drawer-closed="${this.close}"
+      >
+        <slot name="menu"></slot>
+      </dile-app-drawer>
+    `;
+  }
+
+  toggle() {
+    this.opened = ! this.opened;
+  }
+
+  open() {
+    this.opened = true;
+  }
+
+  close() {
+    this.opened = false;
+  }
+}

package/components/menu-overlay/index.js

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

package/components/menu-overlay/menu-overlay.js

@@ -0,0 +1,3 @@
+import { DileMenuOverlay } from './src/DileMenuOverlay.js';
+
+customElements.define("dile-menu-overlay", DileMenuOverlay);

package/components/menu-overlay/src/DileMenuOverlay.js

@@ -0,0 +1,71 @@
+import { LitElement, html, css } from "lit";
+import { DileOverlay } from "../../../mixins/overlay/index.js"
+import { DileCloseDocumentClick } from "../../../mixins/close-document-click";
+
+export class DileMenuOverlay extends DileOverlay(DileCloseDocumentClick(LitElement)) {
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        position: relative;
+        box-sizing: border-box;
+      }
+      #overlay {
+        box-sizing: border-box;
+        color: var(--dile-menu-overlay-color, #303030);
+        z-index: var(--dile-menu-overlay-z-index, 999);
+        background-color: var(--dile-menu-overlay-background-color, #fff);
+        border-radius: var(--dile-menu-overlay-border-radius, 5px);
+        width: var(--dile-menu-overlay-width, 280px);
+        max-width: var(--dile-menu-overlay-max-width, 300px);
+        box-shadow: var(--dile-menu-overlay-box-shadow, 0 0 20px rgba(102, 102, 102, 0.5));
+        padding: var(--dile-menu-overlay-padding, 1px);
+        display: none;
+        position: absolute;
+        opacity: 0;
+        transition: var(--dile-menu-overlay-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 {
+      closeOnClickInside: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.closeOnClickInside = false;
+  }
+
+  render() {
+    return html`
+      <span @click="${this.toggle}" id="trigger">
+        <slot name="trigger"></slot>
+      </span>
+      <div
+        id="overlay"
+        class="${this._overlayClass}"
+        @click="${this.clickHandler}"
+      >
+        <slot name="content"></slot>
+      </div>
+    `;
+  }
+
+  clickHandler(e) {
+    if(! this.closeOnClickInside) {
+      e.stopPropagation();
+    }
+  }
+}

package/components/message/index.js

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

package/components/message/message.js

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