kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/snackbar/_toast.scss

@@ -0,0 +1,68 @@
+@use '../../sass/variables' as *;
+@use '../../sass/global' as *;
+
+#toast-container {
+  display:block;
+  position: fixed;
+  z-index: 10000;
+
+  @media #{$small-and-down} {
+    min-width: 100%;
+    bottom: 0%;
+  }
+  @media #{$medium-only} {
+    left: 5%;
+    bottom: 7%;
+    max-width: 90%;
+  }
+  @media #{$large-and-up} {
+    top: 10%;
+    right: 7%;
+    max-width: 86%;
+  }
+}
+
+.toast {
+  @extend .z-depth-3;
+  border-radius: 4px;
+  top: 35px;
+  width: auto;
+  margin-top: 10px;
+  position: relative;
+  max-width: 100%;
+  height: auto;
+  min-height: 48px;
+  
+  //line-height: 1.5em;
+  //padding: 10px 25px;
+  padding-left: 16px;
+  padding-right: 12px;
+
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+
+  color: var(--md-sys-color-inverse-on-surface);
+  background-color: var(--md-sys-color-inverse-surface);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+
+  .toast-action {
+    color: var(--md-sys-color-inverse-primary);
+    font-weight: 500;
+    margin-right: -25px;
+    margin-left: 3rem;
+  }
+
+  &.rounded{
+    border-radius: 24px;
+  }
+
+  @media #{$small-and-down} {
+    width: 100%;
+    border-radius: 0;
+  }
+}

package/components/snackbar/toastSpec.js

@@ -0,0 +1,132 @@
+describe('Toasts:', () => {
+  afterEach(() => {
+    // Toast state (containers, pending dismiss timers) is static/shared across
+    // instances, and specs run in a random order. Without a hard reset here,
+    // a toast/container left over from one spec (or still mid-dismiss) leaks
+    // into the next one, making failures depend on run order.
+    M.Toast._toasts.forEach((toast) => toast.el.remove());
+    M.Toast._toasts = [];
+    M.Toast._removeContainer();
+    document.querySelectorAll('#toast-container').forEach((el) => el.remove());
+  });
+
+  describe('Toast javascript functions', () => {
+    it('should display and remove a toast', (done) => {
+      const instance = new M.Toast({
+        text: 'Test toast',
+        inDuration: 20,
+        displayLength: 100,
+        outDuration: 20
+      });
+      const wrapperWasCreated = document.querySelectorAll('#toast-container').length === 1;
+      expect(wrapperWasCreated).toEqual(true, 'because toast was created');
+      const toast = instance.el;
+      setTimeout(() => {
+        // is visible?
+        //const toasts = document.querySelectorAll('.toast');
+        //const toast = toasts[0];
+        //expect(toasts.length).toBe(1, 'because one toast was created');
+        expect(toast.getAttribute('role')).toBe('alert');
+        expect(toast.getAttribute('aria-live')).toBe('assertive');
+        expect(toast.getAttribute('aria-atomic')).toBe('true');
+        expect(toast).toBeVisible();
+        expect(toast.innerText).toBe('Test toast');
+        setTimeout(() => {
+          //const toasts = document.querySelectorAll('.toast');
+          expect(toast).toBeVisible();
+          //expect(toasts.length).toBe(1, 'because toast duration still on going');
+          setTimeout(() => {
+            //const toasts = document.querySelectorAll('.toast');
+            //console.log();
+            expect(typeof toast.el).toBe('undefined', 'because toast should be removed by now');
+            done();
+          }, 150);
+        }, 30);
+      }, 10);
+    });
+
+    // it('Opens a toast with HTML content', function(done) {
+    //   let toastContent = document.createElement("span");
+    //   toastContent.innerText = 'I am toast content';
+    //   M.toast({html: toastContent.outerHTML, displayLength: 400});
+    //   let toastSpan = document.querySelector('.toast span');
+    //   expect(toastSpan.innerText).toBe('I am toast content');
+    //   expect(toastSpan.innerText).not.toBe('I am toast');
+    //   setTimeout(function() {
+    //     done();
+    //   }, 490);
+    // });
+
+    it('Toasts should call the callback function when dismissed', (done) => {
+      let wasCalled = false;
+      const callback = () => (wasCalled = true);
+      new M.Toast({
+        text: 'I am a toast',
+        inDuration: 10,
+        displayLength: 50,
+        outDuration: 10,
+        completeCallback: callback
+      });
+      setTimeout(() => {
+        expect(wasCalled).toBe(true, 'because the callback set it to true');
+        done();
+      }, 100);
+    });
+
+    it('should apply classes to toast', (done) => {
+      new M.Toast({
+        text: 'Hi',
+        displayLength: 100,
+        inDuration: 10,
+        outDuration: 10,
+        classes: 'round flat'
+      });
+      setTimeout(() => {
+        const toastFlat = document.querySelectorAll('.toast.round.flat');
+        expect(toastFlat.length).toBe(1, 'because the class parameter was passed with two classes');
+        done();
+      }, 20);
+    });
+  });
+
+  describe('Toast _container null guard', () => {
+    afterEach(() => {
+      // Reset shared static state so other specs are unaffected
+      M.Toast.dismissAll();
+      M.Toast._removeContainer();
+    });
+
+    it('should not throw when _removeContainer is called with a null container', () => {
+      M.Toast._container = null;
+      expect(() => M.Toast._removeContainer()).not.toThrow();
+      expect(M.Toast._container).toBeNull('because there was no container to remove');
+    });
+
+    it('should not throw when _removeContainer is called twice', () => {
+      // First call removes a freshly created container, second call hits the guard.
+      M.Toast._createContainer();
+      expect(M.Toast._container).not.toBeNull('because a container was just created');
+
+      expect(() => M.Toast._removeContainer()).not.toThrow();
+      expect(M.Toast._container).toBeNull('because the container was just removed');
+
+      expect(() => M.Toast._removeContainer()).not.toThrow('because the guard protects the second call');
+      expect(M.Toast._container).toBeNull();
+    });
+
+    it('should not throw building a toast while _container is null', () => {
+      // Create a first toast so the container exists and _toasts is non-empty,
+      // then null the container to force the inconsistent state the guard handles
+      // (a second toast skips _createContainer because _toasts.length !== 0).
+      const first = new M.Toast({ text: 'First', displayLength: 50, inDuration: 10, outDuration: 10 });
+      expect(first.el).toBeDefined();
+      M.Toast._container = null;
+
+      let instance;
+      expect(() => {
+        instance = new M.Toast({ text: 'No container', displayLength: 50, inDuration: 10, outDuration: 10 });
+      }).not.toThrow('because _createToast guards the null container');
+      expect(instance.el).toBeDefined('because the toast element is still created without a container');
+    });
+  });
+});

package/components/snackbar/toasts.ts

@@ -0,0 +1,312 @@
+import { BaseOptions } from '../../src/component';
+
+export interface ToastOptions extends BaseOptions {
+  /**
+   * The content of the Toast.
+   * @default ""
+   */
+  text: string;
+  /**
+   * Element Id for the tooltip.
+   * @default ""
+   */
+  toastId?: string;
+  /**
+   * Length in ms the Toast stays before dismissal.
+   * @default 4000
+   */
+  displayLength: number;
+  /**
+   * Transition in duration in milliseconds.
+   * @default 300
+   */
+  inDuration: number;
+  /**
+   * Transition out duration in milliseconds.
+   * @default 375
+   */
+  outDuration: number;
+  /**
+   * Classes to be added to the toast element.
+   * @default ""
+   */
+  classes: string;
+  /**
+   * Callback function called when toast is dismissed.
+   * @default null
+   */
+  completeCallback: () => void;
+  /**
+   * The percentage of the toast's width it takes fora drag
+   * to dismiss a Toast.
+   * @default 0.8
+   */
+  activationPercent: number;
+}
+
+const _defaults: ToastOptions = {
+  text: '',
+  displayLength: 4000,
+  inDuration: 300,
+  outDuration: 375,
+  classes: '',
+  completeCallback: null,
+  activationPercent: 0.8
+};
+
+export class Toast {
+  /** The toast element. */
+  el: HTMLElement;
+  /**
+   * The remaining amount of time in ms that the toast
+   * will stay before dismissal.
+   */
+  timeRemaining: number;
+  /**
+   * Describes the current pan state of the Toast.
+   */
+  panning: boolean;
+  options: ToastOptions;
+  message: string;
+  counterInterval: NodeJS.Timeout | number;
+  wasSwiped: boolean;
+  startingXPos: number;
+  xPos: number;
+  time: number;
+  deltaX: number;
+  velocityX: number;
+
+  static _toasts: Toast[];
+  private static _container: HTMLElement | null;
+  static _draggedToast: Toast;
+
+  constructor(options: Partial<ToastOptions>) {
+    this.options = {
+      ...Toast.defaults,
+      ...options
+    };
+    this.message = this.options.text;
+    this.panning = false;
+    this.timeRemaining = this.options.displayLength;
+    if (!Toast._container) {
+      Toast._createContainer();
+    }
+    // Create new toast
+    Toast._toasts.push(this);
+    const toastElement = this._createToast();
+    toastElement['M_Toast'] = this;
+    this.el = toastElement;
+    this._animateIn();
+    this._setTimer();
+  }
+
+  static get defaults(): ToastOptions {
+    return _defaults;
+  }
+
+  static getInstance(el: HTMLElement): Toast {
+    return el['M_Toast'];
+  }
+
+  static _createContainer() {
+    const container = document.createElement('div');
+    container.setAttribute('id', 'toast-container');
+    // Add event handler
+    container.addEventListener('touchstart', Toast._onDragStart);
+    container.addEventListener('touchmove', Toast._onDragMove);
+    container.addEventListener('touchend', Toast._onDragEnd);
+    container.addEventListener('mousedown', Toast._onDragStart);
+    document.addEventListener('mousemove', Toast._onDragMove);
+    document.addEventListener('mouseup', Toast._onDragEnd);
+    document.body.appendChild(container);
+    Toast._container = container;
+  }
+
+  static _removeContainer() {
+    document.removeEventListener('mousemove', Toast._onDragMove);
+    document.removeEventListener('mouseup', Toast._onDragEnd);
+    if (Toast._container) {
+      Toast._container.remove();
+      Toast._container = null;
+    }
+  }
+
+  static _onDragStart(e: TouchEvent | MouseEvent) {
+    if (e.target && (<HTMLElement>e.target).closest('.toast')) {
+      const toastElem = (<HTMLElement>e.target).closest('.toast');
+      const toast: Toast = toastElem['M_Toast'];
+      toast.panning = true;
+      Toast._draggedToast = toast;
+      toast.el.classList.add('panning');
+      toast.el.style.transition = '';
+      toast.startingXPos = Toast._xPos(e);
+      toast.time = Date.now();
+      toast.xPos = Toast._xPos(e);
+    }
+  }
+
+  static _onDragMove(e: TouchEvent | MouseEvent) {
+    if (!!Toast._draggedToast) {
+      e.preventDefault();
+      const toast = Toast._draggedToast;
+      toast.deltaX = Math.abs(toast.xPos - Toast._xPos(e));
+      toast.xPos = Toast._xPos(e);
+      toast.velocityX = toast.deltaX / (Date.now() - toast.time);
+      toast.time = Date.now();
+
+      const totalDeltaX = toast.xPos - toast.startingXPos;
+      const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+      toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+      toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+    }
+  }
+
+  static _onDragEnd() {
+    if (!!Toast._draggedToast) {
+      const toast = Toast._draggedToast;
+      toast.panning = false;
+      toast.el.classList.remove('panning');
+
+      const totalDeltaX = toast.xPos - toast.startingXPos;
+      const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+      const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+
+      // Remove toast
+      if (shouldBeDismissed) {
+        toast.wasSwiped = true;
+        toast.dismiss();
+        // Animate toast back to original position
+      } else {
+        toast.el.style.transition = 'transform .2s, opacity .2s';
+        toast.el.style.transform = '';
+        toast.el.style.opacity = '';
+      }
+      Toast._draggedToast = null;
+    }
+  }
+
+  static _xPos(e: TouchEvent | MouseEvent) {
+    if (e.type.startsWith('touch') && (e as TouchEvent).targetTouches.length >= 1) {
+      return (e as TouchEvent).targetTouches[0].clientX;
+    }
+    // mouse event
+    return (e as MouseEvent).clientX;
+  }
+
+  /**
+   * dismiss all toasts.
+   */
+  static dismissAll() {
+    for (const toastIndex in Toast._toasts) {
+      Toast._toasts[toastIndex].dismiss();
+    }
+  }
+
+  _createToast() {
+    let toast: HTMLElement = this.options.toastId
+      ? document.getElementById(this.options.toastId)
+      : document.createElement('div');
+    if (toast instanceof HTMLTemplateElement) {
+      const node = (toast as HTMLTemplateElement).content.cloneNode(true);
+      toast = (node as HTMLElement).firstElementChild as HTMLElement;
+    }
+    toast.classList.add('toast');
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'assertive');
+    toast.setAttribute('aria-atomic', 'true');
+    // Add custom classes onto toast
+    if (this.options.classes.length > 0) {
+      toast.classList.add(...this.options.classes.split(' '));
+    }
+    if (this.message) toast.innerText = this.message;
+    if (Toast._container) {
+      Toast._container.appendChild(toast);
+    }
+    return toast;
+  }
+
+  _animateIn() {
+    // Animate toast in
+    this.el.style.display = '';
+    this.el.style.opacity = '0';
+    // easeOutCubic
+    this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+    setTimeout(() => {
+      this.el.style.top = '0';
+      this.el.style.opacity = '1';
+    }, 1);
+  }
+
+  /**
+   * Create setInterval which automatically removes toast when timeRemaining >= 0
+   * has been reached.
+   */
+  _setTimer() {
+    if (this.timeRemaining !== Infinity) {
+      this.counterInterval = setInterval(() => {
+        // If toast is not being dragged, decrease its time remaining
+        if (!this.panning) {
+          this.timeRemaining -= 20;
+        }
+        // Animate toast out
+        if (this.timeRemaining <= 0) {
+          this.dismiss();
+        }
+      }, 20);
+    }
+  }
+
+  /**
+   * Dismiss toast with animation.
+   */
+  dismiss() {
+    clearInterval(this.counterInterval);
+    const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+
+    if (this.wasSwiped) {
+      this.el.style.transition = 'transform .05s, opacity .05s';
+      this.el.style.transform = `translateX(${activationDistance}px)`;
+      this.el.style.opacity = '0';
+    }
+
+    // easeOutExpo
+    this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+
+    setTimeout(() => {
+      this.el.style.opacity = '0';
+      this.el.style.marginTop = '-40px';
+    }, 1);
+
+    setTimeout(() => {
+      // Call the optional callback
+      if (typeof this.options.completeCallback === 'function') {
+        this.options.completeCallback();
+      }
+      // Remove toast from DOM
+      if (this.el.id != this.options.toastId) {
+        this.el.remove();
+        const toastIndex = Toast._toasts.indexOf(this);
+        // indexOf returns -1 if this toast is no longer tracked (e.g. the
+        // static state was already reset elsewhere); splice(-1, 1) would
+        // otherwise silently remove an unrelated, still-active toast.
+        if (toastIndex !== -1) {
+          Toast._toasts.splice(toastIndex, 1);
+        }
+        if (Toast._toasts.length === 0) {
+          Toast._removeContainer();
+        }
+      }
+    }, this.options.outDuration);
+  }
+
+  static {
+    Toast._toasts = [];
+    Toast._container = null;
+    Toast._draggedToast = null;
+  }
+}

package/components/switch/_switches.scss

@@ -0,0 +1,121 @@
+.switch {
+  --track-height: 32px;
+  --track-width: 52px;
+  --border-width: 2px;
+  --size-off: 16px;
+  --size-on: 24px;
+  --icon-size: 16px;
+  --gap-on: calc(((var(--track-height) - var(--size-on)) / 2) - var(--border-width));
+  --gap-off: calc(((var(--track-height) - var(--size-off)) / 2) - var(--border-width));
+}
+
+.switch,
+.switch * {
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.switch label {
+  cursor: pointer;
+}
+
+.switch label input[type=checkbox] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  // CHECKED
+  // Track
+  &:checked + .lever{
+    background-color: var(--md-sys-color-primary);
+    border-color:  var(--md-sys-color-primary);
+  }
+  // Dot
+  &:checked + .lever {
+    &:before, &:after {
+      top: var(--gap-on);
+      left: calc(var(--track-width) - var(--size-on) - var(--gap-on) - 2 * var(--border-width));
+      width: var(--size-on);
+      height: var(--size-on);
+    }
+    &:after {
+      background-color: var(--md-sys-color-surface);
+    }
+  }
+}
+
+.switch label .lever {
+  content: "";
+  display: inline-block;
+  position: relative;
+  width: var(--track-width);
+  height: var(--track-height);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--md-sys-color-outline);
+
+  //@extend .surface-variant;
+  background-color: var(--md-sys-color-surface-variant);
+
+  border-radius: 15px;
+  margin-right: 10px;
+  transition: background 0.3s ease;
+  vertical-align: middle;
+  margin: 0 16px;
+
+  // DOT
+  &:before, &:after {
+    content: "";
+    position: absolute;
+    display: inline-block;
+    width: var(--size-off);
+    height: var(--size-off);
+    border-radius: 50%;
+
+    left: var(--gap-off);
+    top: var(--gap-off);
+
+    transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
+  }
+
+  // NOT CHECKED [DOT]
+  &:after {
+    background-color: var(--md-sys-color-outline);
+    height: var(--size-off);
+    width: var(--size-off);
+    //@extend .surface-variant;
+    //box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before,
+input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
+    transform: scale(2.4);
+}
+
+input[type=checkbox]:checked:not(:disabled) ~ .lever:hover::before {
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
+}
+
+// Switch active style
+input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
+input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 18%);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:hover::before {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+input[type=checkbox]:not(:disabled) ~ .lever:active:before,
+input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+// Disabled Styles
+.switch input[type=checkbox][disabled] + .lever {
+  cursor: default;
+  opacity: 0.5;
+}
+