@dile/ui 2.0.1

package/components/pages/src/DilePages.js

@@ -0,0 +1,178 @@
+import { LitElement, html, css } from 'lit';
+
+export class DilePages extends LitElement {
+  static get properties() {
+    return {
+      /** Attribute in the page element, to match the selected property value */
+      attrForSelected: { type: String },
+      /** Set the selected page */
+      selected: { type: String },
+      /** A selector interface to change the tabs */
+      selectorId: { type: String },
+      /** Display to the element that is shown */
+      showDisplay: { type: String },
+    };
+  }
+  render() {
+    return html`
+    <slot></slot>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.transitionTime = 1000;
+    this.selected = 0;
+    this._pageInitialization();
+    this._onSelectorIdChangedHandler = this._onSelectorIdChanged.bind(this);
+    this.showDisplay = 'block';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+  /**
+   * Private method to process the light DOM and it's elements, creating and updating necesary styles 
+   *
+   * @return {void}
+   */
+  _pageInitialization() {
+    this.pages = [];
+
+    let pages = this.children;
+    for (let ele of pages) {
+      ele.style.display = 'none';
+      ele.style.transition = `opacity ${this.transitionTime}ms`;
+      ele.style.opacity = '0';
+      this.pages.push(ele);
+    }
+  }
+
+  /**
+   * Call this method to attach other HTML in the component, to use it as pages, instead of the light DOM
+   *
+   * @return {void}
+   */
+  initializeExternalPages(htmlElements) {
+    this.innerHTML = htmlElements;
+    this._pageInitialization();
+  }
+
+  /**
+   * Livecycle method to ensure the view of the correct page in start 
+   *
+   * @return {void}
+   */
+  firstUpdated() {
+    let page = this._selectPage(this.selected, this.attrForSelected);
+    if (page) {
+      page.style.display = this.showDisplay;
+    }
+    if(this.selectorId) {
+      document.addEventListener('dile-selected-changed', this._onSelectorIdChangedHandler);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if(this.selectorId) {
+      document.removeEventListener('dile-selected-changed', this._onSelectorIdChangedHandler);
+    }
+  }
+
+  /**
+   * Livecycle method. Listening changes in selected and attrForSelected properties
+   *
+   * @return {void}
+   */
+  updated(changedProperties) {
+    if (this._updatedAndNotUndefined(changedProperties, 'selected') || this._updatedAndNotUndefined(changedProperties, 'attrForSelected')) {
+      let lastSelected = this._getLastValueProperty(changedProperties, 'selected');
+      let lastAttrForSelected = this._getLastValueProperty(changedProperties, 'attrForSelected');
+      this.hidePage(lastSelected, lastAttrForSelected);
+    }
+    this._showCurrentPage();
+  }
+
+  /**
+   * Private method to get the current active page
+   *
+   * @return {page}
+   */
+  _selectPage(selected, attrForSelected) {
+    let page;
+    if (!attrForSelected) {
+      page = this.pages[selected];
+    } else {
+      for (let ele of this.pages) {
+        if (ele.getAttribute(attrForSelected) == selected) {
+          page = ele;
+          break;
+        }
+      }
+    }
+    return page;
+  }
+
+  /**
+   * Private method to show the current active page
+   *
+   * @return {page}
+   */
+  _showCurrentPage() {
+    let page = this._selectPage(this.selected, this.attrForSelected)
+    if (page) {
+      page.style.display = this.showDisplay;
+      setTimeout(() => {
+        page.style.opacity = '1';
+      }, 50);
+    }
+  }
+
+  /**
+   * Hide a page, sending arbitrary data as parameters.  
+   *
+   * @param {selected} the page to hide
+   * @param {attrForSelected} the attribute to match the selected value
+   * @return {void}
+   */
+  hidePage(selected, attrForSelected) {
+    let page = this._selectPage(selected, attrForSelected)
+    if (page) {
+      page.style.display = 'none';
+      page.style.opacity = '0';
+    }
+  }
+
+  /**
+   * Private method to know when a property is changed, and its value is not undefined
+   * 
+   * @param {changedProperties} map of the properties changed (same as you get in updated livecycle method)
+   * @param {field} the name of the property you need to know is updated
+   * @return {boolean}
+   */
+  _updatedAndNotUndefined(changedProperties, field) {
+    return (changedProperties.has(field) && changedProperties.get(field) != undefined)
+  }
+
+  /**
+   * Private method to get the last value of a property
+   * 
+   * @param {changedProperties} map of the properties changed (same as you get in updated livecycle method)
+   * @param {field} the name of the property you need to know it's last value
+   * @return {boolean}
+   */
+  _getLastValueProperty(changedProperties, field) {
+    return (changedProperties.has(field)) ? changedProperties.get(field) : this[field];
+  }
+
+  _onSelectorIdChanged(e) {
+    if(e.detail.selectorId == this.selectorId) {
+      this.selected = e.detail.selected;
+    }
+  }
+}

package/components/password/index.js

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

package/components/password/password.js

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

package/components/password/src/DilePassword.js

@@ -0,0 +1,34 @@
+import { LitElement, html } from 'lit';
+import { DileInput } from '../../input/index.js';
+
+export class DilePassword extends DileInput {
+
+  render() {
+    return html`
+    <div>
+      ${this.label
+        ? html`<label for="textField">${this.label}</label>`
+        : ''
+      }
+      <section class="for-input">
+        <input
+          type="password"
+          id="textField"
+          name="${this.name}"
+          placeholder="${this.placeholder}"
+          ?disabled="${this.disabled}"
+          @keypress="${this._lookForEnter}"
+          @input="${this._input}"
+          .value="${this.value}"
+          class="${ this.errored ? 'errored' : '' }"
+        >
+      </section>
+      ${this.message
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    </div>
+    `;
+  }
+
+}

package/components/progress-bar/index.js

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

package/components/progress-bar/progress-bar.js

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

package/components/progress-bar/src/DileProgressBar.js

@@ -0,0 +1,89 @@
+import { LitElement, html, css } from "lit";
+
+export class DileProgressBar extends LitElement {
+  static get styles() {
+    return css`
+      .progress-bar-title {
+        margin-top: var(--dile-progress-bar-title-margin-top, 0px);
+        margin-right: var(--dile-progress-bar-title-margin-right, 0px);
+        margin-bottom: var(--dile-progress-bar-title-margin-bottom, 10px);
+        margin-left: var(--dile-progress-bar-title-margin-left, 0px);
+      }
+
+      .progress {
+        background: var(--dile-progress-background, #e9ecef);
+        border-radius: var(--dile-progress-border-radius, 20px);
+      }
+
+      .progress-bar {
+        min-height: var(--dile-progress-bar-min-height, 20px);
+        display: flex;
+        justify-content: var(--dile-progress-bar-align, flex-start);
+        background: var(--dile-progress-bar-background, #b8b9b9);
+        border-radius: var(--dile-progress-bar-border-radius, 20px);
+      }
+
+      .progress-bar span {
+        font-size: var(--dile-progress-bar-percentage-font-size, 14px);
+        font-weight: var(--dile-progress-bar-percentage-font-weight, 500);
+        color: var(--dile-progress-bar-percentage-color, #eaeaea);
+        padding-top: var(--dile-progres-bar-percentage-padding-top, 6px);
+        padding-right: var(--dile-progres-bar-percentage-padding-right, 6px);
+        padding-bottom: var(--dile-progres-bar-percentage-padding-bottom, 6px);
+        padding-left: var(--dile-progres-bar-percentage-padding-left, 10px);
+        transition: 5s width;
+      }
+
+      .progress-bar.animated {
+        animation: progress 1500ms ease-in 1;
+      }
+
+      @keyframes progress {
+        from {
+          width: 0;
+        }
+      }
+    `;
+  }
+
+  static properties = {
+    title: { type: String },
+    value: { type: Number },
+    animated: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.value = "80";
+  }
+
+  render() {
+    return html` ${this.titleTemplate} ${this.progressTemplate} `;
+  }
+
+  get titleTemplate() {
+    return this.title
+      ? html`<p class="progress-bar-title">${this.title}</p>`
+      : "";
+  }
+
+  get valueTemplate() {
+    return this.value
+      ? html`<span>${this.value}%</span>`
+      : "";
+  }
+
+  get progressTemplate() {
+    return html`
+      <div class="progress">
+        <div
+          class="progress-bar ${this.animated ? "animated" : ""}"
+          style="width: ${this.value}%;"
+        >
+          ${this.valueTemplate}
+        </div>
+      </div>
+    `;
+  }
+}

package/components/radio-group/index.js

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

package/components/radio-group/radio-group.js

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

package/components/radio-group/radio.js

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

package/components/radio-group/src/DileRadio.js

@@ -0,0 +1,79 @@
+import { LitElement, html, css } from 'lit';
+import { radioCheckedIcon, circleBorderIcon } from '@dile/icons/index.js';
+import '../../icon/icon.js';
+
+export class DileRadio extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            article {
+                display: flex;
+                align-items: center;
+            }
+            .radio {
+                margin-right: var(--dile-radio-space-between-label-and-icon, 0.4rem);
+                display: flex;
+                --dile-icon-size: var(--dile-radio-icon-size, 1.2rem);
+                --dile-icon-color: var(--dile-radio-icon-color, #303030);
+            }
+            .label {
+                font-size: var(--dile-radio-label-font-size, 1rem);
+                color: var(--dile-radio-label-color, #303030);
+            }
+            :host([selected]) .radio {
+                --dile-icon-color: var(--dile-radio-selected-icon-color, var(--dile-radio-icon-color, #303030));
+            }
+            :host([selected]) .label {
+                color: var(--dile-radio-selected-label-color, var(--dile-radio-label-color, #303030));
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        label: { type: String },
+        value: { type: String },
+        selected: { 
+            type: Boolean,
+            reflect: true
+        },
+      };
+    }
+
+    constructor() {
+        super();
+        this.label = '';
+        this.value = '';
+        this.selected = false;
+    }
+
+    render() {
+        return html`
+            <article @click=${this.select}>
+                <span class="radio">
+                    <dile-icon .icon="${this.computeIcon(this.selected)}"></dile-icon>
+                </span>
+                <span class="label">
+                    ${this.label}
+                </span>
+            </article>
+        `;
+    }
+
+    select() {
+        this.dispatchEvent(new CustomEvent('dile-radio-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value,
+                label: this.label
+            }
+        }));
+    }
+
+    computeIcon(selected) {
+        return selected ? radioCheckedIcon : circleBorderIcon;
+    }
+}

package/components/radio-group/src/DileRadioGroup.js

@@ -0,0 +1,102 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+
+export class DileRadioGroup extends DileEmmitChange(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      .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);
+      }
+      :host([disabled]) {
+        --dile-radio-icon-color: var(--dile-radio-disabled-icon-color, #ccc);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      label: { type: String },
+      value: { type: String },
+      name: { type: String },
+      disabled: { 
+        type: Boolean,
+        reflect: true
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.init = false;
+    this.disabled = false;
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has('value') && this.init) {
+      this.doSelection(this.value);
+      this.emmitChange();
+      this.dispatchChangeEvent();
+    }
+  }
+
+  firstUpdated() {
+    this.init = true;
+    if(this.value !== undefined) {
+      setTimeout(() => {
+        this.doSelection(this.value);
+      }, 200);
+    }
+  }
+  
+  render() {
+    return html`
+      <div @dile-radio-selected=${this.changeValue}>
+        ${this.label
+            ? html`<span class="label">${this.label}</span>`
+            : ""
+        }
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  changeValue(e) {
+    if(!this.disabled) {
+      this.value = e.detail.value;
+    }
+  }
+
+  doSelection(newValue) {
+    let numSelected = 0;
+    this.querySelectorAll('dile-radio').forEach(radio => {
+      if (radio.value === newValue) {
+        radio.selected = true;
+        numSelected++;
+      } else {
+        radio.selected = false;
+      }
+    });
+    if (numSelected > 1) {
+      throw new Error('More than one radio selected because have same value')
+    }
+  }
+
+  dispatchChangeEvent() {
+    this.dispatchEvent(new CustomEvent('dile-radio-group-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        name: this.name,
+        value: this.value
+      }
+    }));
+  }
+}

package/components/range/index.js

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

package/components/range/range.js

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

package/components/range/src/DileRange.js

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+
+export class DileRange extends DileEmmitChange(LitElement) {
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      /*********** Baseline, reset styles ***********/
+      input[type="range"] {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+            appearance: none;
+        background: transparent;
+        cursor: pointer;
+        width: 100%;
+      }
+
+      /* Removes default focus */
+      input[type="range"]:focus {
+        outline: none;
+      }
+
+      /******** Chrome, Safari, Opera and Edge Chromium styles ********/
+      /* slider track */
+      input[type="range"]::-webkit-slider-runnable-track {
+        background-color: var(--dile-range-line-color, #7BB93D);
+        border-radius: 0.5rem;
+        height: var(--dile-range-line-height, 0.5rem);
+      }
+
+      /* slider thumb */
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none; /* Override default look */
+        appearance: none;
+        margin-top: var(--dile-range-thumb-margin-top, -8px); /* Centers thumb on the track */
+        background-color: var(--dile-range-thumb-color, #303030);
+        border-radius: var(--dile-range-thumb-border-radius, 2rem);
+        height: var(--dile-range-thumb-height, 1.5rem);
+        width: var(--dile-range-thumb-width, 1.5rem);
+      }
+
+      input[type="range"]:focus::-webkit-slider-thumb {
+        outline: 3px solid var(--dile-range-thumb-color, #303030);
+        outline-offset: 0.125rem;
+      }
+
+      /*********** Firefox styles ***********/
+      /* slider track */
+      input[type="range"]::-moz-range-track {
+        background-color: var(--dile-range-line-color, #7BB93D);
+        border-radius: 0.5rem;
+        height: var(--dile-range-line-height, 0.5rem);
+      }
+
+      /* slider thumb */
+      input[type="range"]::-moz-range-thumb {
+        background-color: var(--dile-range-thumb-color, #303030);
+        border: none; /*Removes extra border that FF applies*/
+        border-radius: var(--dile-range-thumb-border-radius, 2rem);
+        height: var(--dile-range-thumb-height, 1.5rem);
+        width: var(--dile-range-thumb-width, 1.5rem);
+      }
+
+      input[type="range"]:focus::-moz-range-thumb{
+        outline: 3px solid var(--dile-range-thumb-color, #303030);
+        outline-offset: 0.125rem;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      max: { type: Number },
+      min: { type: Number },
+      step: { type: Number },
+      value: { type: Number },
+      name: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.name = "";
+    this.max = 10;
+    this.min = 0;
+    this.step = 1;
+    this.value = 1;
+  }
+
+  render() {
+    return html`
+      <input 
+        type="range" 
+        id="${this.name}" 
+        name="${this.name}" 
+        min="${this.min}" 
+        max="${this.max}" 
+        step="${this.step}" 
+        value="${this.value}"
+        @input="${this.rangeChanged}"
+      >
+    `;
+  }
+
+  rangeChanged(e) {
+    this.value = e.target.value;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.emmitChange();
+    }
+  }
+  
+}

package/components/rating/index.js

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

package/components/rating/rating.js

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