kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/search/autocompleteSpec.js

@@ -0,0 +1,321 @@
+describe('Autocomplete Plugin', () => {
+  const fixture = `<div class="row">
+  <div class="col s12">
+    <div class="row">
+      <div class="input-field col s12">
+        <input type="text" id="normal-autocomplete" class="autocomplete">
+        <label for="normal-autocomplete">Autocomplete</label>
+      </div>
+    </div>
+  </div>
+  <div class="col s12">
+    <div class="row">
+      <div class="input-field col s12">
+        <input type="text" id="limited-autocomplete" class="autocomplete">
+        <label for="limited-autocomplete">Autocomplete</label>
+      </div>
+    </div>
+  </div>
+</div>`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    M.Autocomplete.init(document.querySelectorAll('input.autocomplete'), {
+      dropdownOptions: {
+        inDuration: 0,
+        outDuration: 0
+      },
+      data: [
+        { id: 12, text: 'Apple' },
+        { id: 13, text: 'Microsoft' },
+        {
+          id: 42,
+          text: 'Google',
+          image:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
+        }
+      ]
+    });
+  });
+  afterEach(() => XunloadFixtures());
+
+  describe('Autocomplete', () => {
+    function resetAutocomplete(autocompleteElement, data) {
+      M.Autocomplete.getInstance(autocompleteElement).destroy();
+      return M.Autocomplete.init(autocompleteElement, {
+        data: data,
+        minLength: 0,
+        dropdownOptions: {
+          inDuration: 0,
+          outDuration: 0
+        }
+      });
+    }
+
+    function openDropdownAndSelectFirstOption(autocomplete, onFinish) {
+      click(autocomplete);
+      keyup(autocomplete, 9); // works
+      setTimeout(() => {
+        const firstOption = autocomplete.parentNode.querySelector('.autocomplete-content li');
+        click(firstOption);
+        setTimeout(() => onFinish(), 10);
+      }, 10); // error caused by setTimeout in autocomplete component
+    }
+
+    it('should work with multiple initializations', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      M.Autocomplete.init(normal, { hi: null });
+      M.Autocomplete.init(normal, { hi: null });
+      M.Autocomplete.init(normal, { hi: null });
+      M.Autocomplete.init(normal, {
+        data: [
+          { id: 12, text: 'Apple' },
+          { id: 13, text: 'Microsoft' },
+          {
+            id: 42,
+            text: 'Google',
+            image:
+              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
+          }
+        ]
+      });
+      const autocompleteEl = normal.parentNode.querySelectorAll('.autocomplete-content');
+      expect(autocompleteEl.length).toEqual(
+        1,
+        'Should dynamically generate autocomplete structure.'
+      );
+      done();
+    });
+
+    it('should limit results in search function', (done) => {
+      const limited = document.querySelector('#limited-autocomplete');
+      const data = [];
+      for (let i = 100; i >= 0; i--) {
+        const randString = 'a' + Math.random().toString(36).substring(2);
+        data.push({ id: randString });
+      }
+      const limitedInstance = M.Autocomplete.getInstance(limited);
+      const limit = 20;
+      limitedInstance.options.onSearch = () => {
+        const filteredItems = data.slice(0, limit);
+        limitedInstance.setMenuItems(filteredItems);
+      };
+      focus(limited);
+      limited.value = 'a';
+      keyup(limited, 65);
+      setTimeout(() => {
+        const autocompleteEl = limitedInstance.container;
+        expect(autocompleteEl.children.length).toEqual(
+          20,
+          'Results should be at max the set limit'
+        );
+        done();
+      }, 10);
+    });
+
+    it('should open correctly from typing', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+      focus(normal);
+      normal.value = 'e';
+      keyup(normal, 69);
+      setTimeout(() => {
+        expect(autocompleteEl.children.length).toEqual(
+          2,
+          'Results should show dropdown on text input'
+        );
+        done();
+      }, 10);
+    });
+
+    it('should open correctly from keyboard focus', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+      normal.value = 'e';
+      keyup(normal, 9);
+      focus(normal);
+      setTimeout(() => {
+        expect(autocompleteEl.children.length).toEqual(
+          2,
+          'Results should show dropdown on text input'
+        );
+        done();
+      }, 10);
+    });
+
+    it('should select option on click', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      M.Autocomplete.init(normal, {
+        data: [{ id: 'Value A' }],
+        minLength: 0,
+        dropdownOptions: {
+          inDuration: 0,
+          outDuration: 0
+        }
+      });
+      openDropdownAndSelectFirstOption(normal, () => {
+        expect(normal.value).toEqual('Value A', 'Value should equal chosen option.');
+        done();
+      });
+    });
+
+    it('should select proper options on both autocompletes', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const limited = document.querySelector('#limited-autocomplete');
+      M.Autocomplete.init(normal, {
+        data: [{ id: 'Value A' }],
+        minLength: 0,
+        dropdownOptions: {
+          inDuration: 0,
+          outDuration: 0
+        }
+      });
+      M.Autocomplete.init(limited, {
+        data: [{ id: 'Value B' }],
+        minLength: 0,
+        dropdownOptions: {
+          inDuration: 0,
+          outDuration: 0
+        }
+      });
+      openDropdownAndSelectFirstOption(normal, () => {
+        openDropdownAndSelectFirstOption(limited, () => {
+          expect(normal.value).toEqual('Value A', 'Value should equal chosen option.');
+          expect(limited.value).toEqual('Value B', 'Value should equal chosen option.');
+          done();
+        });
+      });
+    });
+
+    it('destroy method should properly dispose autocomplete component', () => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const limited = document.querySelector('#limited-autocomplete');
+      expect(normal.parentNode.querySelector('.autocomplete-content')).not.toBeNull();
+      expect(limited.parentNode.querySelector('.autocomplete-content')).not.toBeNull();
+      const normalInstance = M.Autocomplete.getInstance(normal);
+      const limitedInstance = M.Autocomplete.getInstance(limited);
+      normalInstance.destroy();
+      limitedInstance.destroy();
+      expect(normal.parentNode.querySelector('.autocomplete-content')).toBeNull();
+      expect(limited.parentNode.querySelector('.autocomplete-content')).toBeNull();
+    });
+
+    it('selectOption method should chose only from showed dropdown', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteInstance = resetAutocomplete(normal, [
+        { id: 'Value Q1' },
+        { id: 'Value Q' },
+        { id: 'Value R' }
+      ]);
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+
+      focus(normal);
+      normal.value = 'Q';
+      keyup(normal, 81);
+
+      setTimeout(() => {
+        expect(autocompleteEl.children.length).toBe(2);
+        const dropdownAutocompleteIds = Array.from(autocompleteEl.querySelectorAll('li')).map(
+          (liElement) => liElement.getAttribute('data-id')
+        );
+        expect(dropdownAutocompleteIds).toEqual(['Value Q1', 'Value Q']);
+
+        autocompleteInstance.selectOption('Value R');
+        expect(normal.value)
+          .withContext('Only options from dropdown can be selected through selectOption')
+          .toBe('Q');
+        autocompleteInstance.selectOption('Value Q');
+        expect(normal.value)
+          .withContext('Only options from dropdown can be selected through selectOption')
+          .toBe('Value Q');
+        done();
+      }, 10);
+    });
+
+    it('setValues method should chose from any init data entry', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      const autocompleteInstance = resetAutocomplete(normal, [
+        { id: 'Value Q1' },
+        { id: 'Value Q' },
+        { id: 'Value R' }
+      ]);
+      const autocompleteEl = normal.parentNode.querySelector('.autocomplete-content');
+
+      focus(normal);
+      normal.value = 'Q';
+      keyup(normal, 81);
+
+      setTimeout(function () {
+        expect(autocompleteEl.children.length).toBe(2);
+        const dropdownAutocompleteIds = Array.from(autocompleteEl.querySelectorAll('li')).map(
+          (liElement) => liElement.getAttribute('data-id')
+        );
+        expect(dropdownAutocompleteIds).toEqual(['Value Q1', 'Value Q']);
+
+        autocompleteInstance.setValues([{ id: 'Value R' }]);
+        expect(normal.value)
+          .withContext('Any option from init data can be selected through setValues')
+          .toBe('Value R');
+        autocompleteInstance.setValues([{ id: 'Value Q' }]);
+        expect(normal.value)
+          .withContext('Any option from init data can be selected through setValues')
+          .toBe('Value Q');
+        done();
+      }, 10);
+    });
+
+    it('selected options should preselect option in single select', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      M.Autocomplete.getInstance(normal).destroy();
+      M.Autocomplete.init(normal, {
+        data: [{ id: 'Value A', text: 'Text 1' }, { id: 'Value B', text: 'Text 2' }],
+        selected: ['Value B'],
+      });
+
+      setTimeout(() => {
+        expect(normal.value)
+          .withContext('Value should equal chosen option.')
+          .toBe('Text 2');
+        done();
+      }, 10);
+    });
+
+    it('selected options should preselect options in multi select', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      M.Autocomplete.getInstance(normal).destroy();
+      M.Autocomplete.init(normal, {
+        data: [{ id: 'Value A', text: 'Text 1' }, { id: 'Value B', text: 'Text 2' }, { id: 'Value C', text: 'Text 3' }],
+        selected: ['Value A', 'Value B']
+      });
+      const instance = M.Autocomplete.getInstance(normal);
+
+      setTimeout(() => {
+        const dropdownAutocompleteIds = Array.from(instance.selectedValues).map(
+          (selectedValue) => selectedValue.id
+        );
+        expect(dropdownAutocompleteIds)
+          .withContext('Value should equal chosen option.')
+          .toEqual(['Value A', 'Value B']);
+        done();
+      }, 10);
+    });
+
+    it('selectOptions should select multiple options', (done) => {
+      const normal = document.querySelector('#normal-autocomplete');
+      resetAutocomplete(normal, [
+        { id: 1, text: 'Value A' },
+        { id: 2, text: 'Value B' },
+        { id: 3, text: 'Value C' }
+      ]);
+      const selectOptions = [2, 3];
+      const autocomplete = M.Autocomplete.getInstance(normal)
+      autocomplete.selectOptions(selectOptions);
+      setTimeout(() => {
+        expect(autocomplete.selectedValues.filter((value) => !(selectOptions.indexOf(value.id) === -1)).length === selectOptions.length)
+          .withContext('filtered selectValues based on selectOptions should match')
+          .toBe(true);
+        done();
+      }, 10)
+    });
+  });
+});

package/components/slider/_range.scss

@@ -0,0 +1,157 @@
+@use '../../sass/global' as *;
+
+.range-field {
+  position: relative;
+}
+
+input[type=range],
+input[type=range] + .thumb {
+  @extend .no-select;
+  cursor: pointer;
+}
+
+input[type=range] {
+  position: relative;
+  background: linear-gradient(var(--md-sys-color-outline-variant), var(--md-sys-color-outline-variant));
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: 15px 0;
+  padding: 0;
+  height: 3px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+input[type=range] + .thumb {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  border: none;
+  height: 0;
+  width: 0;
+  border-radius: 50%;
+  background-color: var(--md-sys-color-primary);
+  margin-left: 7px;
+
+  transform-origin: 50% 50%;
+  transform: rotate(-45deg);
+
+  .value {
+    display: block;
+    width: 30px;
+    text-align: center;
+    color: var(--md-sys-color-primary);
+    font-size: 0;
+    transform: rotate(45deg);
+  }
+
+  &.active {
+    border-radius: 50% 50% 50% 0;
+
+    .value {
+      color: var(--md-sys-color-on-primary);
+      margin-left: -1px;
+      margin-top: 8px;
+      font-size: 10px;
+    }
+  }
+}
+
+// Shared
+@mixin range-track {
+  height: 3px;
+  background-color: var(--md-sys-color-surface-variant);
+  border: none;
+}
+
+@mixin range-thumb {
+  border: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  transition: box-shadow .3s;
+}
+
+// WebKit
+input[type=range] {
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  @include range-track;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  @include range-thumb;
+  -webkit-appearance: none;
+  background-color: var(--md-sys-color-primary);
+  transform-origin: 50% 50%;
+  margin: -5px 0 0 0;
+
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
+}
+
+// FireFox
+input[type=range] {
+  /*required for proper track sizing in FF*/
+}
+
+input[type=range]::-moz-range-track {
+  @include range-track;
+}
+
+input[type=range]::-moz-focus-inner {
+  border: 0;
+}
+
+input[type=range]::-moz-range-thumb {
+  @include range-thumb;
+  margin-top: -5px;
+}
+
+// hide the outline behind the border
+input[type=range]:-moz-focusring {
+  outline: 1px solid #fff;
+  outline-offset: -1px;
+}
+
+.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb {
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
+}
+
+//------------------------------- Remove this?
+// IE 10+
+input[type=range]::-ms-track {
+  height: 3px;
+  // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
+  background: transparent;
+  // leave room for the larger thumb to overflow with a transparent border */
+  border-color: transparent;
+  border-width: 6px 0;
+  /*remove default tick marks*/
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower,
+input[type=range]::-moz-range-progress {
+  background: var(--md-sys-color-primary);
+}
+input[type=range]::-ms-fill-upper,
+input[type=range]::-moz-range-track {
+  background: var(--md-sys-color-shadow-light);
+}
+input[type=range]::-ms-thumb {
+  @include range-thumb;
+}
+//--------------------------------
+
+.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb {
+  box-shadow: 0 0 0 10px color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
+}

package/components/slider/range.ts

@@ -0,0 +1,216 @@
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface RangeOptions extends BaseOptions {}
+
+const _defaults: RangeOptions = {};
+
+// TODO: !!!!!
+
+export class Range extends Component<RangeOptions> {
+  declare el: HTMLInputElement;
+  private _mousedown: boolean;
+  value: HTMLElement;
+  thumb: HTMLElement;
+
+  constructor(el: HTMLInputElement, options: Partial<RangeOptions>) {
+    super(el, options, Range);
+    this.el['M_Range'] = this;
+
+    this.options = {
+      ...Range.defaults,
+      ...options
+    };
+
+    this._mousedown = false;
+    this._setupThumb();
+    this._setupEventHandlers();
+  }
+
+  static get defaults(): RangeOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Range.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLInputElement, options?: Partial<RangeOptions>): Range;
+  /**
+   * Initializes instances of Range.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<RangeOptions>
+  ): Range[];
+  /**
+   * Initializes instances of Range.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<RangeOptions> = {}
+  ): Range | Range[] {
+    return super.init(els, options, Range);
+  }
+
+  static getInstance(el: HTMLInputElement): Range {
+    return el['M_Range'];
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    this._removeThumb();
+    this.el['M_Range'] = undefined;
+  }
+
+  _setupEventHandlers() {
+    this.el.addEventListener('change', this._handleRangeChange);
+    this.el.addEventListener('mousedown', this._handleRangeMousedownTouchstart);
+    this.el.addEventListener('touchstart', this._handleRangeMousedownTouchstart);
+    this.el.addEventListener('input', this._handleRangeInputMousemoveTouchmove);
+    this.el.addEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+    this.el.addEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+    this.el.addEventListener('mouseup', this._handleRangeMouseupTouchend);
+    this.el.addEventListener('touchend', this._handleRangeMouseupTouchend);
+    this.el.addEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+    this.el.addEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+    this.el.addEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('change', this._handleRangeChange);
+    this.el.removeEventListener('mousedown', this._handleRangeMousedownTouchstart);
+    this.el.removeEventListener('touchstart', this._handleRangeMousedownTouchstart);
+    this.el.removeEventListener('input', this._handleRangeInputMousemoveTouchmove);
+    this.el.removeEventListener('mousemove', this._handleRangeInputMousemoveTouchmove);
+    this.el.removeEventListener('touchmove', this._handleRangeInputMousemoveTouchmove);
+    this.el.removeEventListener('mouseup', this._handleRangeMouseupTouchend);
+    this.el.removeEventListener('touchend', this._handleRangeMouseupTouchend);
+    this.el.removeEventListener('blur', this._handleRangeBlurMouseoutTouchleave);
+    this.el.removeEventListener('mouseout', this._handleRangeBlurMouseoutTouchleave);
+    this.el.removeEventListener('touchleave', this._handleRangeBlurMouseoutTouchleave);
+  }
+
+  _handleRangeChange = () => {
+    this.value.innerHTML = this.el.value;
+    if (!this.thumb.classList.contains('active')) {
+      this._showRangeBubble();
+    }
+    const offsetLeft = this._calcRangeOffset();
+    this.thumb.classList.add('active');
+    this.thumb.style.left = offsetLeft + 'px';
+  };
+
+  _handleRangeMousedownTouchstart = (e: MouseEvent | TouchEvent) => {
+    // Set indicator value
+    this.value.innerHTML = this.el.value;
+    this._mousedown = true;
+    this.el.classList.add('active');
+    if (!this.thumb.classList.contains('active')) {
+      this._showRangeBubble();
+    }
+    if (e.type !== 'input') {
+      const offsetLeft = this._calcRangeOffset();
+      this.thumb.classList.add('active');
+      this.thumb.style.left = offsetLeft + 'px';
+    }
+  };
+
+  _handleRangeInputMousemoveTouchmove = () => {
+    if (this._mousedown) {
+      if (!this.thumb.classList.contains('active')) {
+        this._showRangeBubble();
+      }
+      const offsetLeft = this._calcRangeOffset();
+      this.thumb.classList.add('active');
+      this.thumb.style.left = offsetLeft + 'px';
+      this.value.innerHTML = this.el.value;
+    }
+  };
+
+  _handleRangeMouseupTouchend = () => {
+    this._mousedown = false;
+    this.el.classList.remove('active');
+  };
+
+  _handleRangeBlurMouseoutTouchleave = () => {
+    if (!this._mousedown) {
+      const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
+      const marginLeftText = 7 + paddingLeft + 'px';
+      if (this.thumb.classList.contains('active')) {
+        const duration = 100;
+        // from
+        this.thumb.style.transition = 'none';
+        setTimeout(() => {
+          this.thumb.style.transition = `
+            height ${duration}ms ease,
+            width ${duration}ms ease,
+            top ${duration}ms ease,
+            margin ${duration}ms ease
+          `;
+          // to
+          this.thumb.style.height = '0';
+          this.thumb.style.width = '0';
+          this.thumb.style.top = '0';
+          this.thumb.style.marginLeft = marginLeftText;
+        }, 1);
+      }
+      this.thumb.classList.remove('active');
+    }
+  };
+
+  _setupThumb() {
+    this.thumb = document.createElement('span');
+    this.value = document.createElement('span');
+    this.thumb.classList.add('thumb');
+    this.value.classList.add('value');
+    this.thumb.append(this.value);
+    this.el.after(this.thumb);
+  }
+
+  _removeThumb() {
+    this.thumb.remove();
+  }
+
+  _showRangeBubble() {
+    const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
+    const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+    const duration = 300;
+    // easeOutQuint
+    this.thumb.style.transition = `
+      height ${duration}ms ease,
+      width ${duration}ms ease,
+      top ${duration}ms ease,
+      margin ${duration}ms ease
+    `;
+    // to
+    this.thumb.style.height = '30px';
+    this.thumb.style.width = '30px';
+    this.thumb.style.top = '-30px';
+    this.thumb.style.marginLeft = marginLeftText;
+  }
+
+  _calcRangeOffset(): number {
+    const width = this.el.getBoundingClientRect().width - 15;
+    const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
+    const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
+    const percent = (parseFloat(this.el.value) - min) / (max - min);
+    return percent * width;
+  }
+
+  /**
+   * Initializes every range input in the current document.
+   */
+  static Init() {
+    if (typeof document !== 'undefined')
+      Range.init(
+        document?.querySelectorAll('input[type=range]') as NodeListOf<HTMLInputElement>,
+        {}
+      );
+  }
+}