@dile/ui 2.0.1

package/components/select/src/DileSelect.js

@@ -0,0 +1,172 @@
+import { html, css, LitElement } from "lit";
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { messageStyles } from '../../input/index.js';
+
+export class DileSelect extends DileEmmitChange(LitElement) {
+  static get styles() {
+    return [
+      messageStyles,
+      css`
+      :host {
+        display: block;
+        margin-bottom: 10px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      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);
+      }
+      ::slotted(select) {
+        box-sizing: border-box;
+        width: var(--dile-input-width, 100%);
+        padding: var(--dile-input-padding,  7px 5px);
+        line-height: var(--dile-input-line-height, 1.5em);
+        font-size: var(--dile-select-font-size, 0.875em);
+        border-radius: var(--dile-input-border-radius, 5px);
+        border: var(--dile-input-border-width, 1px) solid var(--dile-input-border-color, #888);
+        background-color: var(--dile-input-background-color, #fff);
+        color: var(--dile-input-color, #303030);
+        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23303030%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
+        background-position: right 10px center;
+        background-repeat: no-repeat;
+        background-size: auto 50%;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      ::slotted(select.dark) {
+        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
+      }
+      ::slotted(select):focus {
+        outline: none;
+        border-color: var(--dile-input-focus-border-color, #6af);
+      }
+      ::slotted(select.errored) {
+        border-color: var(--dile-input-error-border-color, #c00);
+      }
+      ::slotted(select.disabled) {
+        background-color: #f5f5f5;
+        border-color: var(--dile-input-disabled-border-color, #eee);
+      }
+    `];
+  }
+
+  static get properties() {
+    return {
+      label: { type: String },
+      value: { type: String },
+      name: { type: String },
+      disabled: { type: Boolean },
+      errored: { type: Boolean },
+      message: { type: String },
+      hideErrorOnInput: { type: Boolean },
+      quietOnStart: { type: Boolean },
+    };
+  }
+
+  render() {
+    return html`
+      <div>
+        ${this.label
+          ? html`<label for="textField">${this.label}</label>`
+          : ""
+        }
+        <slot name="select"></slot>
+      </div>
+      ${this.message 
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `;
+  }
+
+  get elselect() {
+    return this.querySelector("select");
+  }
+
+  constructor() {
+    super();
+    this.errored = false;
+    this.hideErrorOnInput = false;
+    this.changeHandler = this.onChange.bind(this);
+    this.quiet = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.elselect) {
+      throw new Error('Use dile-select with a select element in the slot "select"');
+    } else {
+      this.elselect.addEventListener("change", this.changeHandler);
+      this.value = this.elselect.value;
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.elselect) {
+      this.elselect.removeEventListener("change", this.changeHandler);
+    }
+  }
+
+  onChange(e) {
+    this.value = e.target.value;
+    if (this.hideErrorOnInput && this.errored) {
+      this.errored = false;
+      this.message = '';
+    }
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has("value")) {
+      this.elselect.value = this.value;
+      if (this.quiet) {
+        this.quiet = false;
+      } else {
+        this.emmitChange();
+      }
+    }
+    if(changedProperties.has("disabled")) {
+      this.elselect.disabled = this.disabled;
+      this.elselect.classList.toggle("disabled", this.disabled);
+    }
+    if(changedProperties.has("errored")) {
+      this.elselect.classList.toggle("errored", this.errored);
+    }
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.quiet = this.quietOnStart;
+    if(this.value) {
+      this.elselect.value = this.value;
+    } else {
+      this.value = this.elselect.value;
+    } 
+  }
+
+  clear() {
+    this.value = undefined;
+  }
+
+  getOptionByValue(id) {
+    let options = this.elselect.options;
+    for(let i = 0; i < options.length; i++) {
+      if(options[i].value === id) {
+        return options[i];
+      }
+    }
+  }
+
+  quietChange(value) {
+    if (value != this.value) {
+      this.quiet = true;
+      this.value = value;
+    }
+  }
+}

package/components/select/src/DileSelectAjax.js

@@ -0,0 +1,338 @@
+import { LitElement, html, css } from 'lit';
+import '../../input/input-search.js';
+import '../../spinner/spinner-horizontal.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../select.js';
+
+export class DileSelectAjax  extends DileEmmitChange(LitElement) {
+
+  static get styles() {
+    return css`
+      * {
+        box-sizing: border-box;
+      }
+      :host {
+        display: block;
+        position: relative;
+        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);
+      }
+      .anchor {
+        margin-top: 0.5rem;
+        position: relative;
+      }
+      section {
+        min-height: 2.5rem;
+        width: var(--dile-input-width, 100%);
+        border-radius: var(--dile-input-border-radius, 5px);
+        padding: var(--dile-input-padding,  7px 5px);
+        display: none;
+        position: absolute;
+        background-color: #fff;
+        border: 1px solid #ccc;
+        border: var(--dile-input-border-width, 1px) solid var(--dile-input-border-color, #888);
+        flex-direction: column;
+        justify-content: center;
+      }
+      p {
+        margin: 0;
+      }
+      .opened {
+        display: flex;
+      }
+      dile-select {
+        margin-bottom: 0;
+        --dile-input-width: 100%;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /* Allows to set a text for the default option, that is a empty option and do not selects nothing in the interface. */
+      selectDefaultPlaceholder: { type: String },
+      endpoint: { type: String },
+      label: { type: String },
+      value: { type: String },
+      name: { type: String },
+      disabled: { type: Boolean },
+      errored: { type: Boolean },
+      data: { type: Array },
+      placeholder: { type: String },
+      emptyMessage: { type: String },
+      selectedText: { type: String },
+      ajaxErrorMessage: { type: String },
+      ajaxError: { type: Boolean },
+      queryStringVariable: { type: String },
+      /** Use resultDataProperty to declare witch property in the JSON object returned by the endpoint has the data to assign to the select options. Left it blank if the result JSON has directly the array with the data */
+      resultDataProperty: { type: String },
+      displayProperty: { type: String },
+      idProperty: { type: String },
+      delay: { type: Number },
+      opened: { 
+        type: Boolean,
+        state: true,
+      },
+      keyword: { 
+        type: String,
+        state: true,
+       },
+      loading: {
+        type: Boolean,
+        state: true,
+      },
+      isSelected: {
+        type: Object,
+        state: true,
+      },
+      /* When static is true there is no posibility to search, then all the options are displayed on the select on initialization */
+      static: {
+        type: Boolean,
+      } 
+    };
+  }
+
+  updated(changedProperties) {
+    if(changedProperties.has("value")) {
+      this.emmitChange();
+    }
+  }
+
+  constructor() {
+    super();
+    this.placeholder = "Search to choose...";
+    this.selectDefaultPlaceholder = "Select an option...";
+    this.emptyMessage = "No results found";
+    this.ajaxErrorMessage = "Error loading data";
+    this.data = [];
+    this.keyword = '';
+    this.loading = false;
+    this.errored = false;
+    this.ajaxError = false;
+    this.isSelected = false;
+    this.static = false;
+    this.blurHandler = this.close.bind(this);
+    this.queryStringVariable = 'q';
+    this.delay = 300;
+    this.idProperty = 'id';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('blur', this.blurHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('blur', this.blurHandler);
+  }
+
+  firstUpdated() {
+    if(this.value) {
+      this.isSelected = true;
+      this.searchValueInitial();
+    }
+    if(this.static) {
+      this.loadData();
+    }
+  }
+
+  searchValueInitial() {
+    fetch(`${this.endpoint}/${this.value}`)
+      .then(response => response.json())
+      .then(json => this.registerText(json))
+      .catch(error => this.registerError(error));
+  }
+  
+  registerText(json) {
+    this.selectedText = json[this.displayProperty]; 
+    this.loading = false;
+  }
+
+
+  get search() {
+    return this.shadowRoot.getElementById('search');
+  }
+
+  get select() {
+    return this.shadowRoot.getElementById('elselect');
+  }
+
+  render() {
+    return html`
+      <div>
+        ${this.label
+          ? html`<label for="textField">${this.label}</label>`
+          : ""}
+        ${this.isSelected
+          ? this.selectedTemplate
+          : this.static ? this.loadingOrLoadedTemplate : this.searchTemplate
+        }
+      </div>
+    `;
+  }
+
+  get selectedTemplate() {
+    return html`
+      <dile-input-search 
+        id="result"
+        ?errored=${this.errored} 
+        ?disabled=${this.disabled}
+        value="${this.selectedText}"
+        readOnly
+        @dile-input-search-cleared=${this.onClearSelected}
+      ></dile-input-search>
+    `;
+  }
+
+  get searchTemplate() {
+    return html`
+      <dile-input-search 
+        id="search"
+        placeholder="${this.placeholder}" 
+        label="${this.label}" 
+        ?errored=${this.errored} 
+        ?disabled=${this.disabled}
+        @focus=${this.onFocus}
+        @dile-input-search=${this.onTextInput}
+        delay="${this.delay}"
+      ></dile-input-search>
+      <div class="anchor">
+        <section class="${this.opened && this.keyword.length > 0 ? 'opened' : ''}">
+          ${this.loadingOrLoadedTemplate}
+        </section>
+      </div>
+    `;
+  }
+
+  get loadingOrLoadedTemplate() {
+    return html`
+      ${this.loading
+        ? this.loadingTemplate
+        : this.loadedTemplate
+      }
+    `;
+  }
+
+  get loadingTemplate() {
+    return html`<dile-spinner-horizontal active></dile-spinner-horizontal>`;
+  }
+
+  get loadedTemplate() {
+    return html`
+      ${this.ajaxError
+        ? html`<p>${this.ajaxErrorMessage}</p>`
+        : html`
+          ${this.data.length == 0
+            ? this.emptyTemplate
+            : this.dataTemplate
+          }
+        `
+      }
+    `;
+  }
+
+  get emptyTemplate() {
+    return html`
+      <p>
+        ${this.emptyMessage}
+      </p>
+    `;
+  }
+
+  get dataTemplate() {
+    return html`
+        <dile-select 
+          id="elselect" 
+          @element-changed=${this.doSelected}
+          name="generated-select-field"
+        >
+          <select slot="select">
+            <option value="">${this.selectDefaultPlaceholder}</option>
+            ${this.data.map(item => html`
+              <option value="${item[this.idProperty]}">${item[this.displayProperty]}</option>
+            `)}
+          </select>
+        </dile-select> 
+    `;
+  }
+
+  onFocus() {
+    this.opened = true;
+  }
+
+  onTextInput(e) {
+    this.keyword = e.detail.keyword;
+    this.loadData();
+  }
+
+  loadData() {
+    this.loading = true;
+    this.ajaxError = false;
+    fetch(`${this.endpoint}?${this.queryStringVariable}=${this.keyword}`)
+      .then(response => response.json())
+      .then(json => this.registerData(json))
+      .catch(error => this.registerError(error));
+  }
+
+  registerError(err) {
+    this.ajaxError = true;
+    this.loading = false;
+  }
+  
+  registerData(json) {
+    if(this.resultDataProperty === undefined || this.resultDataProperty === '') {
+      this.data = json;
+    } else {
+      this.data = json[this.resultDataProperty];
+    }
+    this.updateComplete.then( () => this.loading = false )
+  }
+
+  doSelected(e) {
+    let value = e.detail.value;
+    if(e.detail.name === 'generated-select-field' && value !== '') {
+      this.selectedText = this.select.getOptionByValue(value).innerText;
+      this.value = value;
+      this.isSelected = true;
+    }
+    e.stopPropagation();
+  }
+
+  onClearSelected() {
+    this.value = undefined;
+    this.isSelected = false;
+    if(! this.static) {
+      this.keyword = '';
+      this.selectedText = '';
+      this.data = [];
+      this.updateComplete.then(() => {
+        this.search.focus();
+      });
+    }
+  }
+
+  close() {
+    this.opened = false;
+  }
+
+  clear() {
+    this.isSelected = false;
+    this.value = undefined;
+    this.selectedText = '';
+  }
+
+  set(value) {
+    this.value = value;
+    if(value) {
+      this.isSelected = true;
+      this.searchValueInitial();
+    }
+  }
+}

package/components/selector/index.js

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

package/components/selector/selector-item.js

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

package/components/selector/selector.js

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

package/components/selector/src/DileSelector.js

@@ -0,0 +1,12 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectable }  from "../../../mixins/selectable/index.js";
+
+export class DileSelector extends DileSelectable(LitElement) {
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+}

package/components/selector/src/DileSelectorItem.js

@@ -0,0 +1,94 @@
+import { html, css, LitElement } from "lit";
+import { DileSelectableItem } from "../../../mixins/selectable/index.js";
+
+const icons = {
+  "navigate_next": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>`,
+  "arrow_forward": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`,
+  "star": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#f26"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>`,
+  "label_important": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3.5 18.99l11 .01c.67 0 1.27-.33 1.63-.84L20.5 12l-4.37-6.16c-.36-.51-.96-.84-1.63-.84l-11 .01L8.34 12 3.5 18.99z"/></svg>`,
+  "add": html`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`,
+}
+
+export class DileSelectorItem  extends DileSelectableItem(LitElement) {
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        cursor: pointer;
+      }
+      article {
+        display: flex;
+        align-items: center;
+        padding-top: var(--dile-selector-padding-y, 0.2rem); 
+        padding-bottom: var(--dile-selector-padding-y, 0.2rem); 
+        padding-left:  var(--dile-selector-padding-x, 0.5rem); 
+        padding-right:  var(--dile-selector-padding-x, 0.5rem); 
+        background-color: var(--dile-selector-background-color, transparent);
+        color: var(--dile-selector-text-color, #000);
+        transition: all 0.3s ease-in;
+      }
+      .selected {
+        background-color: var(--dile-selector-selected-background-color, #039be5);
+        color: var(--dile-selector-selected-text-color, #fff);
+        font-weight: var(--dile-selector-selected-font-weight, normal);
+        border-radius: var(--dile-selector-selected-border-radius, 0);
+      }
+      .icon {
+        margin-right: 0.3rem;
+        display: flex;
+        align-items: center;
+      }
+      .icon svg {
+        color: red;
+        fill: var(--dile-selector-icon-color, #039be5);
+        width: var(--dile-selector-icon-size, 20px);
+        height: var(--dile-selector-icon-size, 20px);
+      }
+      .selected .icon svg {
+        fill: var(--dile-selector-selected-icon-color, #fff);
+      }
+      a {
+        display: block;
+        text-decoration: var(--dile-selector-text-decoration, none);
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      icon: { type: String },
+      href: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.href = '';
+  }
+
+  render() {
+    return html`
+      ${this.href == '' 
+        ? this.itemTemplate
+        : html`<a href="${this.href}">${this.itemTemplate}</a>`
+       }
+    `;
+  }
+
+  get itemTemplate() {
+    return html`
+      <article @click='${this.select}' class="${this.selected ? 'selected' : ''}">
+        ${this.icon
+          ? html`<div class="icon">${this.iconElement(this.icon)}</div>`
+          : ''
+        }
+        <div class="line"><slot></slot></div>
+      </article>
+    `;
+  }
+  iconElement(icon) {
+    return icons[icon];
+  }
+
+}

package/components/slide-show/index.js

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

package/components/slide-show/slide-show.js

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