@decidables/decidables-elements 0.0.1

package/src/slider.js

@@ -0,0 +1,333 @@
+
+import {ifDefined} from 'lit/directives/if-defined.js'; /* eslint-disable-line import/extensions */
+import {html, css, unsafeCSS} from 'lit';
+
+import DecidablesElement from './decidables-element';
+
+export default class DecidablesSlider extends DecidablesElement {
+  static get properties() {
+    return {
+      disabled: {
+        attribute: 'disabled',
+        type: Boolean,
+        reflect: true,
+      },
+      max: {
+        attribute: 'max',
+        type: Number,
+        reflect: true,
+      },
+      min: {
+        attribute: 'min',
+        type: Number,
+        reflect: true,
+      },
+      step: {
+        attribute: 'step',
+        type: Number,
+        reflect: true,
+      },
+      value: {
+        attribute: 'value',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.disabled = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.step = undefined;
+    this.value = undefined;
+  }
+
+  changed(event) {
+    this.value = event.target.value;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        value: this.value,
+      },
+      bubbles: true,
+    }));
+  }
+
+  inputted(event) {
+    this.value = event.target.value;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---shadow-2-rotate: var(--shadow-2-rotate, ${unsafeCSS(this.cssBoxShadow(2, true, false))});
+          ---shadow-4-rotate: var(--shadow-4-rotate, ${unsafeCSS(this.cssBoxShadow(4, true, false))});
+          ---shadow-8-rotate: var(--shadow-8-rotate, ${unsafeCSS(this.cssBoxShadow(8, true, false))});
+
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: center;
+          justify-content: center;
+        }
+
+        label {
+          margin: 0.25rem 0.25rem 0;
+        }
+
+        .range {
+          display: inline-block;
+
+          width: 3.5rem;
+          height: 4.75rem;
+          margin: 0 0.25rem 0.25rem;
+        }
+
+        decidables-spinner {
+          --decidables-spinner-input-width: 3.5rem;
+
+          margin: 0 0.25rem 0.25rem;
+        }
+
+        /* Adapted from http://danielstern.ca/range.css/#/ */
+        /* Overall */
+        input[type=range] {
+          width: 4.75rem;
+          height: 3.5rem;
+          padding: 0;
+          margin: 0;
+
+          background-color: unset;
+
+          transform: rotate(-90deg);
+          transform-origin: 2.375rem 2.375rem;
+
+          /* stylelint-disable-next-line property-no-vendor-prefix */
+          -webkit-appearance: none;
+        }
+
+        input[type=range]:enabled {
+          cursor: ns-resize;
+        }
+
+        input[type=range]:focus {
+          outline: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-ms-tooltip {
+          display: none;
+        }
+
+        /* Track */
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-webkit-slider-runnable-track {
+          width: 100%;
+          height: 4px;
+
+          background: var(---color-element-disabled);
+          border: 0;
+          border-radius: 2px;
+          box-shadow: none;
+        }
+
+        input[type=range]:focus::-webkit-slider-runnable-track {
+          background: var(---color-element-disabled);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-moz-range-track {
+          width: 100%;
+          height: 4px;
+
+          background: var(---color-element-disabled);
+          border: 0;
+          border-radius: 2px;
+          box-shadow: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-ms-track {
+          width: 100%;
+          height: 4px;
+
+          color: transparent;
+
+          background: transparent;
+          border-color: transparent;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-ms-fill-lower {
+          background: #cccccc;
+          /* background: var(---color-element-disabled); */
+          border: 0;
+          border-radius: 2px;
+          box-shadow: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-ms-fill-upper {
+          background: #cccccc;
+          /* background: var(---color-element-disabled); */
+          border: 0;
+          border-radius: 2px;
+          box-shadow: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:focus::-ms-fill-lower {
+          background: var(---color-element-disabled);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:focus::-ms-fill-upper {
+          background: var(---color-element-disabled);
+        }
+
+        /* Thumb */
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-webkit-slider-thumb {
+          width: 10px;
+          height: 20px;
+          margin-top: -8px;
+
+          border: 0;
+          border-radius: 4px;
+
+          /* stylelint-disable-next-line property-no-vendor-prefix */
+          -webkit-appearance: none;
+        }
+
+        input[type=range]:disabled::-webkit-slider-thumb {
+          background: var(---color-element-disabled);
+          box-shadow: none;
+        }
+
+        input[type=range]:enabled::-webkit-slider-thumb {
+          background: var(---color-element-enabled);
+          box-shadow: var(---shadow-2-rotate);
+        }
+
+        input[type=range]:enabled:hover::-webkit-slider-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        input[type=range]:enabled:active::-webkit-slider-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+
+        :host(.keyboard) input[type=range]:enabled:focus::-webkit-slider-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        :host(.keyboard) input[type=range]:focus:active::-webkit-slider-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-moz-range-thumb {
+          width: 10px;
+          height: 20px;
+
+          border: 0;
+          border-radius: 4px;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:disabled::-moz-range-thumb {
+          background: var(---color-element-disabled);
+          box-shadow: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled::-moz-range-thumb {
+          background: var(---color-element-enabled);
+          box-shadow: var(---shadow-2-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled:hover::-moz-range-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled:active::-moz-range-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+
+        :host(.keyboard) input[type=range]:enabled:focus::-moz-range-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        :host(.keyboard) input[type=range]:enabled:focus:active::-moz-range-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]::-ms-thumb {
+          width: 10px;
+          height: 20px;
+          margin-top: 0;
+
+          background: #999999;
+          /* background: var(---color-element-enabled); */
+          border: 0;
+          border-radius: 4px;
+          box-shadow: var(---shadow-2-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:disabled::-ms-thumb {
+          background: var(---color-element-disabled);
+          box-shadow: none;
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled::-ms-thumb {
+          background: var(---color-element-enabled);
+          box-shadow: var(---shadow-2-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled:hover::-ms-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        input[type=range]:enabled:active::-ms-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+
+        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
+        :host(.keyboard) input[type=range]:enabled:focus::-ms-thumb {
+          box-shadow: var(---shadow-4-rotate);
+        }
+
+        :host(.keyboard) input[type=range]:enabled:focus:active::-ms-thumb {
+          box-shadow: var(---shadow-8-rotate);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <label for=${`${this.uniqueId}-slider`}>
+        <slot></slot>
+      </label>
+      <div class="range">
+        <input type="range" id=${`${this.uniqueId}-slider`} min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @change=${this.changed.bind(this)} @input=${this.inputted.bind(this)}>
+      </div>
+      <decidables-spinner min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @input=${this.inputted.bind(this)}></decidables-spinner>
+    `;
+  }
+}
+
+customElements.define('decidables-slider', DecidablesSlider);

package/src/spinner.js

@@ -0,0 +1,149 @@
+
+import {ifDefined} from 'lit/directives/if-defined.js'; /* eslint-disable-line import/extensions */
+import {html, css} from 'lit';
+
+import DecidablesElement from './decidables-element';
+
+export default class DecidablesSpinner extends DecidablesElement {
+  static get properties() {
+    return {
+      disabled: {
+        attribute: 'disabled',
+        type: Boolean,
+        reflect: true,
+      },
+      max: {
+        attribute: 'max',
+        type: Number,
+        reflect: true,
+      },
+      min: {
+        attribute: 'min',
+        type: Number,
+        reflect: true,
+      },
+      step: {
+        attribute: 'step',
+        type: Number,
+        reflect: true,
+      },
+      value: {
+        attribute: 'value',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.disabled = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.step = undefined;
+    this.value = undefined;
+  }
+
+  inputted(event) {
+    this.value = event.target.value;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          ---decidables-spinner-font-size: var(--decidables-spinner-font-size, 1.125rem);
+          ---decidables-spinner-input-width: var(--decidables-spinner-input-width, 4rem);
+          ---decidables-spinner-prefix: var(--decidables-spinner-prefix, "");
+
+          display: block;
+        }
+
+        label {
+          position: relative;
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: center;
+
+          margin: 0;
+
+          font-size: 0.75rem;
+        }
+
+        label::before {
+          position: absolute;
+          bottom: 1px;
+          left: calc(50% - var(---decidables-spinner-input-width) / 2 + 0.25rem);
+
+          font-size: var(---decidables-spinner-font-size);
+          line-height: normal;
+
+          content: var(---decidables-spinner-prefix);
+        }
+
+        input[type=number] {
+          width: var(---decidables-spinner-input-width);
+
+          font-family: var(---font-family-base);
+          font-size: var(---decidables-spinner-font-size);
+          color: inherit;
+          text-align: right;
+
+          background: none;
+          border: 0;
+          border-radius: 0;
+          outline: none;
+          box-shadow: var(---shadow-2);
+
+          -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+        }
+
+        input[type=number]:hover {
+          box-shadow: var(---shadow-4);
+        }
+
+        input[type=number]:focus,
+        input[type=number]:active {
+          box-shadow: var(---shadow-8);
+        }
+
+        input[type=number]:disabled {
+          color: var(---color-text);
+
+          border: 0;
+          box-shadow: none;
+
+          /* HACK: Use correct text color in Safari */
+          -webkit-opacity: 1;
+          /* HACK: Hide spinners in disabled input for Firefox and Safari */
+          -moz-appearance: textfield; /* stylelint-disable-line property-no-vendor-prefix */
+          /* HACK: Use correct text color in Safari */
+          -webkit-text-fill-color: var(---color-text);
+        }
+
+        /* HACK: Hide spinners in disabled input for Firefox and Safari */
+        input[type=number]:disabled::-webkit-outer-spin-button,
+        input[type=number]:disabled::-webkit-inner-spin-button {
+          margin: 0;
+          -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <label>
+        <slot></slot>
+        <input ?disabled=${this.disabled} type="number" min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @input=${this.inputted.bind(this)}>
+      </label>
+    `;
+  }
+}
+
+customElements.define('decidables-spinner', DecidablesSpinner);

package/src/switch.js

@@ -0,0 +1,179 @@
+
+import {html, css} from 'lit';
+
+import DecidablesElement from './decidables-element';
+
+export default class DecidablesSwitch extends DecidablesElement {
+  static get properties() {
+    return {
+      checked: {
+        attribute: 'checked',
+        type: Boolean,
+        reflect: true,
+      },
+      disabled: {
+        attribute: 'disabled',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.checked = false;
+    this.disabled = false;
+  }
+
+  changed(event) {
+    this.checked = event.target.checked;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        checked: this.checked,
+      },
+      bubbles: true,
+    }));
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: center;
+          justify-content: center;
+        }
+
+        /* Adapted from https://codepen.io/guuslieben/pen/YyPRVP */
+        input[type=checkbox] {
+          /* visuallyhidden: https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/css.md */
+          position: absolute;
+
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+
+          white-space: nowrap;
+
+          border: 0;
+          clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
+        }
+
+        input[type=checkbox] + label {
+          order: 1;
+
+          margin: 0 0.25rem 0.25rem;
+
+          font-weight: 400;
+        }
+
+        input[type=checkbox] + label + label {
+          position: relative;
+
+          min-width: 24px;
+          padding: 0 0 36px;
+          margin: 0.25rem 0.25rem 0;
+
+          font-weight: 400;
+
+          outline: none;
+        }
+
+        input[type=checkbox] + label + label::before,
+        input[type=checkbox] + label + label::after {
+          position: absolute;
+
+          left: 50%;
+
+          margin: 0;
+
+          content: "";
+
+          outline: 0;
+
+          transition: all var(---transition-duration) ease;
+          transform: translate(-50%, 0);
+        }
+
+        input[type=checkbox] + label + label::before {
+          bottom: 1px;
+
+          width: 8px;
+          height: 34px;
+
+          background-color: var(---color-element-disabled);
+          border-radius: 4px;
+        }
+
+        input[type=checkbox] + label + label::after {
+          bottom: 0;
+
+          width: 18px;
+          height: 18px;
+
+          background-color: var(---color-element-enabled);
+          border-radius: 50%;
+          box-shadow: var(---shadow-2);
+        }
+
+        input[type=checkbox]:checked + label + label::after {
+          transform: translate(-50%, -100%);
+        }
+
+        input[type=checkbox]:disabled + label + label::after {
+          background-color: var(---color-element-disabled);
+          box-shadow: none;
+        }
+
+        input[type=checkbox]:enabled + label,
+        input[type=checkbox]:enabled + label + label {
+          cursor: pointer;
+        }
+
+        input[type=checkbox]:enabled + label:hover + label::after,
+        input[type=checkbox]:enabled + label + label:hover::after {
+          box-shadow: var(---shadow-4);
+        }
+
+        input[type=checkbox]:enabled + label:active + label::after,
+        input[type=checkbox]:enabled + label + label:active::after {
+          box-shadow: var(---shadow-8);
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors */
+        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label::after {
+          box-shadow: var(---shadow-4);
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors */
+        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label:active::after,
+        :host(.keyboard) input[type=checkbox]:enabled:focus:active + label + label::after {
+          box-shadow: var(---shadow-8);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <input type="checkbox" id=${`${this.uniqueId}-checkbox`} ?checked=${this.checked} ?disabled=${this.disabled} @change=${this.changed.bind(this)}>
+      <label for=${`${this.uniqueId}-checkbox`}>
+        <slot name="off-label"></slot>
+      </label>
+      <label for=${`${this.uniqueId}-checkbox`}>
+        <slot></slot>
+      </label>
+    `;
+  }
+}
+
+customElements.define('decidables-switch', DecidablesSwitch);