@dile/ui 2.0.1

package/components/tooltip/src/DileTooltip.js

@@ -0,0 +1,195 @@
+import { html, css, LitElement } from 'lit';
+
+export class DileTooltip extends LitElement {
+
+  static get styles() {
+    return css`/* Tooltip container */
+      :host {
+        display: inline-block;
+      }
+      .tooltip {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
+  
+      .tooltiptext {
+        visibility: hidden;
+        width: var(--dile-tooltip-width, 120px);
+        background-color: var(--dile-tooltip-background-color, #e74c3c);
+        color: var(--dile-tooltip-color, #fff);
+        font-size: var(--dile-tooltip-font-size, 16px);
+        text-align: var(--dile-tooltip-text-align, center);
+        border-radius: var(--dile-tooltip-border-radius, 6px);;
+        padding: var(--dile-tooltip-padding, 5px);
+      }
+
+      .tooltip-top {
+        position: absolute;
+        z-index: 1;
+        bottom: 150%;
+        left: 50%;
+        margin-left: -60px;
+      }
+
+      .arrow-top::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: var(--dile-tooltip-background-color, #e74c3c) transparent transparent transparent;
+      }
+
+      .tooltip-left {
+        position: absolute;
+        z-index: 1;
+        top: -5px;
+        right: 105%;
+      }
+
+      .arrow-left::after {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        left: 100%; /* To the right of the tooltip */
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent transparent var(--dile-tooltip-background-color, #e74c3c);
+      }
+
+      .tooltip-right {
+        position: absolute;
+        z-index: 1;
+        top: -5px;
+        left: 105%;
+      }
+
+      .arrow-right::after {
+        content: " ";
+        position: absolute;
+        top: 50%;
+        right: 100%; /* To the left of the tooltip */
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent var(--dile-tooltip-background-color, #e74c3c) transparent transparent;
+      }
+
+      .arrow-right::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 100%;
+        margin-top: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent var(--dile-tooltip-background-color, #e74c3c) transparent transparent;
+      }
+
+      .tooltip-bottom {
+        position: absolute;
+        z-index: 1;
+        top: 150%;
+        left: 50%;
+        margin-left: -60px;
+      }
+
+      .arrow-bottom::after {
+        content: "";
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: transparent transparent var(--dile-tooltip-background-color, #e74c3c) transparent;
+      }
+      
+      .animation{
+        opacity: 0;
+        transition: opacity var(--dile-tooltip-time-transition, 0.5s) ease-in;
+      }
+
+      .show {
+        visibility: visible !important;
+        opacity: 1;
+      }
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      /** text will be displayed when the mouse hover text */
+      tooltip: { type: String },
+      
+      /** Position where the tooltip where be displayed */
+      position: { type: String },
+
+      /** Adds an arrow design to the tooltip */
+      arrow: { type: Boolean },
+      
+      /** Adds a fade in animation */
+      fadeIn: { type: Boolean },
+
+      /** Private property to control mouseovers and mouseouts */
+      _isMouseover: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.tooltip = 'Tooltip text';
+    this.position = 'top'
+    this.arrow = false;
+    this.fadeIn = false;
+    this._isMouseover = false;
+  }
+
+  classPosition(position) {
+    let className = 'tooltip-top';
+    if (position == 'left') { return 'tooltip-left' };
+    if (position == 'right') { return 'tooltip-right' };
+    if (position == 'bottom') { return 'tooltip-bottom' };
+    return className;
+  }
+
+  arrowPosition(arrow, position) {
+    return arrow ? `arrow-${position}` : '';
+  }
+
+  animation(fadeIn) {
+    return fadeIn ? 'animation' : '';
+  }
+
+  showOrNot(isMouseover) {
+    return isMouseover ? 'show' : '';
+  }
+
+  render() {
+    return html`
+      <div 
+        class="tooltip"
+        @mouseover="${this.doMouseover}"
+        @mouseout="${this.doMouseout}"
+      >
+        <slot></slot>
+        <span 
+          class="tooltiptext ${this.classPosition(this.position)} ${this.arrowPosition(this.arrow, this.position)} ${this.animation(this.fadeIn)} ${this.showOrNot(this._isMouseover)}"
+        >${this.tooltip}</span>
+      </div>
+    `;
+  }
+
+  doMouseover() {
+    this._isMouseover = true;
+  }
+
+  doMouseout() {
+    this._isMouseover = false;
+  }
+}

package/components/tooltip/tooltip.js

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

package/mixins/close-document-click/index.js

@@ -0,0 +1 @@
+export { DileCloseDocumentClick } from "./src/DileCloseDocumentClick.js";

package/mixins/close-document-click/src/DileCloseDocumentClick.js

@@ -0,0 +1,67 @@
+/**
+ *
+ * # DileCloseDocumentClick
+ *
+ * Custom Element Mixin offers a way to close elements when the user clicks in any area of the document.
+ *
+ * To use it you olny need to extend your custom element class with it.
+ *
+ * Only depends on a close() method in the extended custom element.
+ *
+ */
+export const DileCloseDocumentClick = (SuperClass) =>
+  class extends SuperClass {
+    constructor() {
+      super();
+      this.closeDocumentHandler = this.closeAll.bind(this);
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      if (!DileCloseDocumentClick.elements) {
+        DileCloseDocumentClick.elements = [];
+        document.addEventListener("click", this.closeDocumentHandler);
+      }
+      DileCloseDocumentClick.elements.push(this);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      DileCloseDocumentClick.elements = DileCloseDocumentClick.elements.filter(
+        (item) => item != this
+      );
+      if (DileCloseDocumentClick.elements.length == 0) {
+        DileCloseDocumentClick.elements = null;
+        document.removeEventListener("click", this.closeDocumentHandler);
+      }
+    }
+
+    /**
+     * Close all the elements of this type
+     */
+    closeAll() {
+      for (let ele of DileCloseDocumentClick.elements) {
+        ele.close();
+      }
+    }
+
+    /**
+     * Close the other items of this type (distinct to this)
+     */
+    closeOthers() {
+      DileCloseDocumentClick.elements.forEach((item) => {
+        if (item != this) {
+          item.close();
+        }
+      });
+    }
+
+    /**
+     * This method only alerts the developer to create the close() method in his component
+     */
+    close() {
+      console.log(
+        "DileCloseDocumentClick needs a close() method in the component"
+      );
+    }
+  };

package/mixins/close-on-esc-pressed/index.js

@@ -0,0 +1 @@
+export { DileCloseOnEscPressed } from "./src/DileCloseOnEscPressed.js";

package/mixins/close-on-esc-pressed/src/DileCloseOnEscPressed.js

@@ -0,0 +1,31 @@
+/*
+Mixin for close something when the user press the esc key.
+
+Needs a close() method implemented on the component you are extend from this mixin.
+*/
+export const DileCloseOnEscPressed = (SuperClass) =>
+  class extends SuperClass {
+    constructor() {
+      super();
+      this.closeOnEscHandler = this.escClose.bind(this);
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      window.addEventListener("keydown", this.closeOnEscHandler);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      window.removeEventListener("keydown", this.closeOnEscHandler);
+    }
+
+    escClose(e) {
+      if (e.key === "Escape" && this.opened) {
+        this.close();
+      }
+    }
+
+    close() {
+      console.log('You need to implement a close method!');
+    }
+  };

package/mixins/form/index.js

@@ -0,0 +1,3 @@
+export { DileForm } from "./src/DileForm.js";
+export { DileFormChangeDetect } from "./src/DileFormChangeDetect.js";
+export { DileEmmitChange } from "./src/DileEmmitChange.js";

package/mixins/form/src/DileEmmitChange.js

@@ -0,0 +1,22 @@
+/**
+ *
+ * # DileEmmitChange
+ *
+ * Mixin to detect changes in form components
+ *
+ */
+
+ export const DileEmmitChange = (superclass) => class extends superclass {
+
+    emmitChange() {
+        this.dispatchEvent(new CustomEvent('element-changed', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            name: this.name,
+            value: this.value
+          }
+        }));
+      }
+      
+  }

package/mixins/form/src/DileForm.js

@@ -0,0 +1,116 @@
+/**
+ *
+ * # DileForm
+ *
+ * Mixin to apply functionality to form components
+ *
+ */
+
+export const DileForm = (superclass) => class extends superclass {
+
+
+  constructor() {
+    super();
+    this.firstValue = null;
+  }
+
+  static get properties() {
+    return {
+      setOnInit: { type: Object }
+    };
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.firstValue = this.getData();
+    if(this.setOnInit) {
+      this.setData(this.setOnInit);
+    }
+  }
+
+  getData() {
+    let data = {};
+    this.allNodeElements.forEach(node => {
+      data[node.getAttribute('name')] = node.value;
+    });
+    return data;
+  }
+
+  setData(data) {
+    this.allNodeElements.forEach(node => {
+      if(data[node.getAttribute('name')]  !== undefined && data[node.getAttribute('name')] !== null) {
+        if (typeof node.set === "function") {
+          node.set(data[node.getAttribute('name')]);
+        } else {
+          node.value = data[node.getAttribute('name')];
+        }
+
+      }
+    });
+  }
+
+  clearData() {
+    this.allNodeElements.forEach(node => {
+      if (typeof node.clear === "function") {
+        node.clear();
+      } else {
+        node.value = '';
+      }
+    });
+  }
+
+  get allNodeElements() {
+    return this.shadowRoot.querySelectorAll('[name]');
+  }
+
+  getNodeElement(name) {
+    return this.shadowRoot.querySelector('[name="' + name + '"]');
+  }
+
+  resetData() {
+    this.setData(this.firstValue);
+  }
+
+  resetField(name) {
+    if(this.firstValue.hasOwnProperty(name)) {
+      let value = this.firstValue[name];
+      let node = this.getNodeElement(name);
+      node.value = value;
+    }
+  }
+
+  showError(name, error) {
+    let node = this.getNodeElement(name);
+    node.errored = true;
+    node.message = error;
+  }
+
+  showErrors(errors) {
+    for(let name in errors) {
+      this.showError(name, errors[name]);
+    } 
+  }
+
+  clearErrors() {
+    this.allNodeElements.forEach(node => {
+      node.errored = false;
+      node.message = '';
+    });
+  }
+
+  isDirty() {
+    const currentData = this.getData();
+    const originProperties = Object.keys(this.firstValue);
+    const currentProperties = Object.keys(currentData);
+    if (originProperties.length !== currentProperties.length) {
+      return true;
+    }
+    for (let prop of originProperties) {
+      if (this.firstValue[prop] != currentData[prop]) {
+          return true; // Si alguna propiedad no coincide, retorna false
+      }
+    }
+    return false;
+  }
+
+}

package/mixins/form/src/DileFormChangeDetect.js

@@ -0,0 +1,34 @@
+/**
+ *
+ * # DileFormChangeDetect
+ *
+ * Mixin to detect changes in form components
+ *
+ */
+
+export const DileFormChangeDetect = (superclass) => class extends superclass {
+
+  constructor() {
+    super();
+    this.changeHandler = this.detectChange.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('element-changed', this.changeHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('element-changed', this.changeHandler);
+  }
+
+  detectChange(e) {
+    this.dispatchEvent(new CustomEvent('dile-form-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          data: this.getData()
+        }
+    }));
+  }
+}

package/mixins/overlay/index.js

@@ -0,0 +1 @@
+export { DileOverlay } from "./src/DileOverlay.js";

package/mixins/overlay/src/DileOverlay.js

@@ -0,0 +1,171 @@
+export const DileOverlay = function(superClass) {
+  return class extends superClass {
+    
+    static get properties() {
+      return {
+        _opening: {
+          type: Boolean,
+        },
+        moveTop: {
+          type: Number,
+        },
+        moveLeft: {
+          type: Number,
+        },
+        /**
+         * The css class to show or hide the overlay
+         * @type {String}
+         */
+        _overlayClass: {
+          state: true,
+          type: String,
+        },
+        /**
+         * The position of the overlay: left, right or center.
+         * @type {String}
+         */
+        horizontalAlign: {
+          type: String,
+        },
+        /**
+         * The position of the overlay: bottom, top or center.
+         * @type {String}
+         */
+        verticalAlign: {
+          type: String,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+      this._opening = false;
+      this.moveTop = 0;
+      this.moveLeft = 0;
+      this._overlayClass = '';
+      this.horizontalAlign = 'under_left';
+      this.verticalAlign = 'bottom';
+      this.delayId = null;
+    }
+
+    firstUpdated() {
+      this.overlay = this.shadowRoot.getElementById('overlay');
+      this.trigger = this.shadowRoot.getElementById('trigger');
+    }
+
+    /**
+    * toggles the overlay
+    */
+    toggle(e) {
+      //e.stopPropagation();
+      if(this._overlayClass) {
+        this.close()
+      } else {
+        this.open();
+      }
+    }
+    cancelDelay() {
+      if(this.reardo) {
+        clearTimeout(this.delayId);
+      }
+      this.delayId = null;
+    }
+    /**
+    * closes the overlay
+    */
+    close() {
+      this.dispatchEvent(new CustomEvent('overlay-closed', {
+        bubbles: true,
+        composed: true,
+      }));
+      if(!this._opening && this._overlayClass=='opened') {
+        this._overlayClass = '';
+        this.cancelDelay();
+        this.delayId = setTimeout(() => {
+          this.overlay.style.display = 'none'
+        }, 500);
+      }
+    }
+    /**
+    * opens the overlay
+    */
+    open() {
+      this.dispatchEvent(new CustomEvent('overlay-opened', {
+        bubbles: true,
+        composed: true,
+      }));
+      if(!this._opening) {
+        this._opening = true;
+        this.updatePosition();
+        if(this.closeAll) {
+          this.closeAll();
+        };
+        this.overlay.style.display = 'block';
+        this.cancelDelay();
+        this.delayId = setTimeout(() => {
+          this._overlayClass = 'opened'
+          this._opening = false;
+          this.overlay.style.display = 'block';
+        }, 50);
+      }
+    }
+
+    updatePosition() {
+      let triggerWidth = parseInt(this.trigger.offsetWidth);
+      let triggerHeight = parseInt(this.trigger.offsetHeight);
+      let moveTop = parseInt(this.moveTop);
+      let moveLeft = parseInt(this.moveLeft);
+      
+      let lastDisplay = this.overlay.style.display;
+      this.overlay.style.top = "-1000px";
+      this.overlay.style.display = 'block';
+      
+      let overlayWidth = parseInt(this.overlay.offsetWidth);
+      let overlayHeight = parseInt(this.overlay.offsetHeight);
+      
+      switch(this.verticalAlign) {
+        case 'top':
+          this.overlay.style.top = (0 - overlayHeight + moveTop) + 'px';
+          break;
+        case 'center':
+          this.overlay.style.top = '-' + (((overlayHeight - (triggerHeight / 2)) / 2) + moveTop) + 'px';
+          break;
+        default:
+          this.overlay.style.top = (triggerHeight + 10 + moveTop) + 'px';
+      }
+      switch(this.horizontalAlign) {
+        case 'under_left':
+          this.setOverlayStyleLeft('0px');
+          break;
+          case 'under_right':
+            this.setOverlayStyleLeft(`-${overlayWidth - triggerWidth}px`);
+            break;
+        case 'left':
+          this.setOverlayStyleLeft('-' + (overlayWidth + moveLeft) + 'px');
+          break;
+        case 'right':
+            this.setOverlayStyleLeft((triggerWidth + moveLeft) + 'px');
+          break;
+        default:
+            this.setOverlayStyleLeft('-' + (((overlayWidth - triggerWidth) / 2) + moveLeft) + 'px');
+      }
+      this.overlay.style.display = lastDisplay;
+    }
+    
+    setOverlayStyleLeft(pos) {
+      this.overlay.style.left = pos;
+      var rect = this.overlay.getBoundingClientRect();
+      let posLeft = parseInt(this.overlay.style.left);
+      if (rect.left < 0) {
+        this.overlay.style.left = (posLeft - rect.left + 10) + 'px';
+      }
+      let pageWidth = document.querySelector('html').clientWidth;
+      if (rect.left + rect.width > pageWidth) {
+        let displacement = posLeft - (rect.right - pageWidth) - 15;  
+        this.overlay.style.left = (displacement ) + 'px';
+      }
+    }
+  }
+
+}
+

package/mixins/selectable/index.js

@@ -0,0 +1,2 @@
+export { DileSelectable } from "./src/DileSelectable.js";
+export { DileSelectableItem } from "./src/DileSelectableItem.js";