@dile/ui 2.0.1

package/components/rating/src/DileRating.js

@@ -0,0 +1,119 @@
+import { html, css, LitElement } from "lit";
+
+export class DileRating extends LitElement {
+  static get properties() {
+    return {
+      value: { type: Number },
+      disableChanges: { type: Boolean },
+      _mouseInside: { type: Boolean },
+      _starValues: { type: Array },
+      _temporalValue: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        section {
+          display: flex;
+          align-items: center;
+          gap: var(--dile-rating-gap, 0);
+          flex-wrap: nowrap;
+        }
+        section.undefined {
+          --dile-star-color: var(--dile-rating-undefined-color, #ddd); 
+        }
+        section.interactive dile-star {
+          cursor: pointer;
+        }
+      `
+    ];
+  }
+
+  constructor() {
+    super();
+    this._mouseInside = false;
+    this.disableChanges = false;
+    this.value = 0;
+    this._starValues = [1, 1, 1, 1, 1];
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value') || changedProperties.has('_temporalValue')) {
+      setTimeout(() => this.updateStarValues(), 100);
+    }
+  }
+
+  render() {
+    return html`
+      <section 
+        @mouseenter=${this.doMouseEnter}
+        @mouseleave=${this.doMouseLeave}
+        class="${this.value === 0 && this._temporalValue === undefined ? 'undefined' : ''} ${this.disableChanges ? '' : 'interactive'}"
+      >
+        ${this._starValues.map((value, index) => html`
+          <dile-star 
+            value="${value}" 
+            index="${index}"
+            @dile-star-selected=${this.starSelected}
+            @dile-star-enter=${this.starEnter}
+          ></dile-star>
+        `)}
+      </section>
+    `;
+  }
+
+  updateStarValues() {
+    if (this._mouseInside) {
+      this._starValues = this.generateValuesArray(this._temporalValue);  
+    } else {
+      this._starValues = this.generateValuesArray(this.value);  
+    }
+  }
+
+  generateValuesArray(value) {
+    let values = [];
+    for (let i = 0; i < 5; i++) {
+      let current = 0;
+      if (value - i >= 1) {
+        current = 1;
+      } else if (value - i > 0) {
+        current = value - i;
+      }
+      values.push(current);
+    }
+    return values;
+  }
+
+  starSelected(e) {
+    if (! this.disableChanges) {
+      this.value = e.detail.index + 1;
+      this.dispatchEvent(new CustomEvent('dile-rating-selected', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: this.value
+        }
+      }));
+    }
+  }
+
+  starEnter(e) {
+    this._temporalValue = e.detail.index + 1;
+  }
+
+  doMouseEnter() {
+    if (! this.disableChanges) {
+      this._mouseInside = true;
+    }
+  }
+
+  doMouseLeave() {
+    this._mouseInside = false;
+    this._temporalValue = undefined;
+  }
+}

package/components/rating/src/DileStar.js

@@ -0,0 +1,63 @@
+import { LitElement, html, css } from 'lit';
+import '../../icon/icon.js';
+import { starIcon, starBorderIcon, starHalfIcon } from '@dile/icons/index.js';
+
+export class DileStar extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        --dile-icon-color: var(--dile-star-color, #FFA41C);
+        --dile-icon-size: var(--dile-star-size, 32px);
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      value: { type: Number },
+      halfBreak: { type: Number },
+      completeBreak: { type: Number },
+      index: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.value = 0.4;
+    this.halfBreak = 0.25;
+    this.completeBreak = 0.6;
+  }
+
+  render() {
+    return html`
+      <dile-icon 
+        .icon="${this.computeIcon(this.value, this.halfBreak, this.completeBreak)}"
+        @click=${this.doClick}
+        @mouseenter=${this.doMouseEnter}
+      ></dile-icon>
+    `;
+  }
+
+  doClick() {
+    this.dispatchEvent(new CustomEvent('dile-star-selected', { 
+      detail: { index: this.index }
+    }));
+  }
+
+  doMouseEnter() {
+    this.dispatchEvent(new CustomEvent('dile-star-enter', {
+      detail: { index: this.index }
+    }));
+  }
+
+  computeIcon(value, halfBreak, completeBreak) {
+    if(value < halfBreak) {
+      return starBorderIcon;
+    } else if(value < completeBreak) {
+      return starHalfIcon;
+    }
+    return starIcon;
+  }
+}

package/components/rating/star.js

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

package/components/rating-scale-question/index.js

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

package/components/rating-scale-question/rating-scale-option.js

@@ -0,0 +1,3 @@
+import { DileRatingScaleOption } from "./src/DileRatingScaleOption.js";
+
+window.customElements.define("dile-rating-scale-option", DileRatingScaleOption);

package/components/rating-scale-question/rating-scale-question.js

@@ -0,0 +1,3 @@
+import { DileRatingScaleQuestion } from "./src/DileRatingScaleQuestion.js";
+
+window.customElements.define("dile-rating-scale-question", DileRatingScaleQuestion);

package/components/rating-scale-question/src/DileRatingScaleOption.js

@@ -0,0 +1,184 @@
+import { LitElement, html, css } from 'lit';
+import { doneIcon } from '@dile/icons/index.js';
+import '../../icon/icon.js';
+
+export class DileRatingScaleOption extends LitElement {
+    static styles = [
+        css`
+            :host {
+                display: block;
+            }
+            span {
+                display: block;
+                margin-left: 0;
+            }
+            label {
+                position: relative;
+                overflow: hidden;
+                cursor: pointer;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: self-start;
+            }
+            input {
+                overflow: visible;
+                font-size: 100%;
+                font-family: inherit;
+                margin: 0;
+            }
+            input[type="radio"] {
+                cursor: pointer;
+                display: block;
+                position: absolute;
+                width: 30px;
+                height: 30px;
+                opacity: 0;
+                box-sizing: border-box;
+                padding: 0;
+            }
+            :host([selected]) .leftColor {
+                background-color: var(--dile-rating-scale-color-left,#4db6ac);
+            }
+            :host([selected])  .neutralColor {
+                background-color: var(--dile-rating-scale-color-neutral,#9b9faa);
+            }
+            :host([selected])  .rightColor {
+                background-color: var(--dile-rating-scale-color-right,#ff8a65);
+            }
+            span:hover .leftColor {
+                background-color: var(--dile-rating-scale-color-left,#4db6ac);
+            }
+            span:hover .neutralColor {
+                background-color: var(--dile-rating-scale-color-neutral,#9b9faa);
+            }
+            span:hover .rightColor {
+                background-color: var(--dile-rating-scale-color-right,#ff8a65);
+            }
+            .leftColor {
+                border-color: var(--dile-rating-scale-color-left, #4db6ac);
+            }
+            .neutralColor {
+                border-color: var(--dile-rating-scale-color-neutral,#9b9faa);
+            }
+            .rightColor {
+                border-color: var(--dile-rating-scale-color-right,#ff8a65);
+            }
+            .sizeBigger{
+                height: var(--dile-rating-scale-option-size-bigger, 45px);
+	            width: var(--dile-rating-scale-option-size-bigger, 45px);
+            }
+            .sizeBig{
+                height: var(--dile-rating-scale-option-size-big, 35px);
+	            width: var(--dile-rating-scale-option-size-big, 35px);
+            }
+            .sizeSmall{
+                height: var(--dile-rating-scale-option-size-small, 28px);
+	            width: var(--dile-rating-scale-option-size-small, 28px);
+            }
+            .sizeSmaller{
+                height: var(--dile-rating-scale-option-size-smaller, 25px);
+	            width: var(--dile-rating-scale-option-size-smaller, 25px);
+            }
+            .radio_tick {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0px 10px;
+                text-align: center;
+                box-shadow: inset 0 1px rgba(81,89,106,.05);
+                border-width: 2px;
+                border-style: solid;
+                border-radius: 50%;
+                background-color: #fff;
+                transition: all .2s ease-in-out;
+            }
+            .radio_label {
+                position: absolute;
+                width: 30px;
+                height: 30px;
+                opacity: 0;
+                display: inline-flex;
+                align-items: center;
+                transition: all .2s ease-in-out;
+                font-size: 1rem;
+                line-height: 1.5rem;
+            }
+            .radio_spinner {
+                display: flex;
+            }
+            .noChecked{
+                display: none;
+            }
+            .checked{
+                --dile-icon-color: var(--dile-rating-scale-option-checked-color, #fff);
+            }
+            .sizeBiggerChecked{
+                --dile-icon-size: var(--dile-rating-scale-option-size-bigger, 45px);
+            }
+            .sizeBigChecked{
+                --dile-icon-size: var(--dile-rating-scale-option-size-big, 35px);
+            }
+            .sizeSmallChecked{
+                --dile-icon-size: var(--dile-rating-scale-option-size-small, 28px);
+            }
+            .sizeSmallerChecked{
+                --dile-icon-size: var(--dile-rating-scale-option-size-smaller, 25px);
+            }
+            @media (min-width: 992px){
+                .radio_tick {
+                    border-width: 3px;
+                }
+            }
+        `
+    ];
+
+    static get properties() {
+      return {
+        label: { type: String },
+        value: { type: String },
+        size: { type: String },
+        color: { type: String },
+        selected: {
+            type: Boolean,
+            reflect: true
+        },
+      };
+    }
+
+    constructor() {
+        super();
+        this.label = '';
+        this.value = '';
+        this.size = 'sizeSmaller';
+        this.color = 'neutralColor';
+        this.selected = false;
+    }
+
+    render() {
+        return html`
+            <span @click=${this.select}>
+                <label>
+                    <input type="radio" >
+                    <span class="radio_tick ${this.size} ${this.color}">
+                        <span class="radio_spinner"><dile-icon class="${this.checked()}" .icon="${doneIcon}"></dile-icon></span>
+                    </span>
+                    <span class="radio_label">${this.label}</span>
+                </label>
+            </span>
+        `;
+    }
+
+    select() {
+        this.dispatchEvent(new CustomEvent('dile-rating-scale-option-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value
+            }
+        }));
+    }
+
+    checked(){
+        return this.selected ? `${this.size}Checked checked`: 'noChecked';
+    }
+}

package/components/rating-scale-question/src/DileRatingScaleQuestion.js

@@ -0,0 +1,252 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+
+export class DileRatingScaleQuestion extends DileEmmitChange(LitElement)  {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+      :host([disabled]) {
+        opacity: .3;
+      }
+      * {
+        box-sizing: border-box;
+        scrollbar-width: thin;
+      }
+      fieldset {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: none;
+        //border-bottom: 1px solid #dddfe2;
+        max-width: 400px;
+        min-width: 0;
+        margin: 35px 0 0;
+        padding: 0 0 20px;
+        transition: opacity .5s ease-in-out;
+        width: 100%;
+      }
+      legend {
+        display: table;
+        scrollbar-width: thin;
+        text-align: center;
+        box-sizing: border-box;
+        color: inherit;
+        max-width: 100%;
+        padding: 0;
+        white-space: normal;
+        font-weight: 600;
+        font-size: 1.125rem;
+        line-height: 1.5;
+        margin-bottom: 0;
+      }
+      legend span {
+        color: #576071;
+        font-weight: 600;
+        line-height: 1.5;
+        text-align: center;
+      }
+      .group_options {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        margin: 30px 0 0;
+      }
+      .radios {
+        flex: 0 0 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .captions {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        flex-grow: 1;
+        margin: 15px 0;
+        text-transform: uppercase;
+      }
+      .caption-mobile {
+        font-size: .8em;
+        letter-spacing: 0;
+        line-height: normal;
+        max-width: 47%;
+        font-weight: 600;
+      }
+      .caption-desktop {
+        display: none;
+      }
+      .text-leftColor {
+        color: var(--dile-rating-scale-color-left,#4db6ac);
+      }
+      .text-rightColor {
+        color: var(--dile-rating-scale-color-right,#ff8a65);
+      }
+
+      @media (min-width: 768px){
+        fieldset {
+          max-width: none;
+        }
+        .group_options {
+           flex-wrap: nowrap;
+           margin-bottom: 20px;
+        }
+        .caption-mobile {
+          display: none;
+        }
+        .caption-desktop{
+          display: block;
+          font-size: 1em;
+          letter-spacing: 0;
+          line-height: normal;
+          font-weight: 600;
+          flex-shrink:0;
+        }
+        .radios {
+          flex: 0 0 10rem;
+          margin: 0 30px;
+        }
+        legend span {
+          font-size: 1.2em;
+        }
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      label: { type: String },
+      value: { type: String },
+      name: { type: String },
+      scale_left_label: { type: String },
+      scale_neutral_label: { type: String },
+      scale_right_label: { type: String },
+      scale_point: { type: Number },
+      disabled: { 
+        type: Boolean,
+        reflect: true
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.init = false;
+    this.disabled = false;
+    this.scale_left_label="Agree";
+    this.scale_neutral_label = "Neutral";
+    this.scale_right_label="Disagree";
+    this.scale_point=7; //7, 5, 3
+  }
+
+  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() {
+    this.getOptions();
+    return html`<fieldset @dile-rating-scale-option-selected=${this.changeValue}>
+                    <legend><span>${this.label}</span></legend>
+                    <div class="group_options">
+                    <div class="caption-desktop text-leftColor">${this.scale_left_label}</div>
+                    <div class="radios">
+                      ${this.options.map( (option) => html`
+                            <dile-rating-scale-option label="${option.label}" value="${option.value}" size="${option.size}" color="${option.color}"></dile-rating-scale-option>`
+                      )}
+                    </div>
+                    <div class="caption-desktop text-rightColor">${this.scale_right_label}</div>
+                    <div class="captions">
+                      <div class="caption-mobile text-leftColor">${this.scale_left_label}</div>
+                      <div class="caption-mobile text-rightColor">${this.scale_right_label}</div>
+                    </div>
+                  </div>
+                </fieldset>
+    `;
+  }
+
+  getOptions(){
+    let values = [3];
+    if (this.scale_point>3){
+      values.unshift(5);
+    }
+    if (this.scale_point>5){
+      values.unshift(7);
+    }
+    let sizes = ["sizeBigger", "sizeBig", "sizeSmall", "sizeSmaller"];
+    let sizeIndex = 0;
+    this.options = []
+    for(let i = 0; i < values.length; i++ ){
+      this.options.push({
+        label: '',
+        value: values[i],
+        size: sizes[sizeIndex],
+        color: "leftColor"
+      });
+      sizeIndex++;
+    }
+    this.options[0].label = this.scale_left_label;
+
+    this.options.push({
+      label: this.scale_neutral_label,
+      value: 0,
+      size: sizes[sizeIndex],
+      color: "neutralColor"
+    });
+    sizeIndex--;
+
+    for(let i = values.length-1; i >= 0; i--){
+      this.options.push({
+        label: '',
+        value: values[i]*-1,
+        size: sizes[sizeIndex],
+        color: "rightColor"
+      });
+      sizeIndex--;
+    }
+    this.options[this.options.length-1].label = this.scale_right_label;
+  }
+
+  changeValue(e) {
+    if(!this.disabled) {
+      this.value = e.detail.value;
+    }
+  }
+
+  doSelection(newValue) {
+    this.shadowRoot.querySelectorAll('dile-rating-scale-option').forEach(option => {
+      if (option.value === newValue) {
+        option.selected = true;
+      } else {
+        option.selected = false;
+      }
+    });
+  }
+
+  dispatchChangeEvent() {
+    this.dispatchEvent(new CustomEvent('dile-rating-scale-question-changed', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        name: this.name,
+        value: this.value
+      }
+    }));
+  }
+}

package/components/select/index.js

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

package/components/select/select-ajax.js

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

package/components/select/select.js

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