@aurelia-mdc-web/all 9.2.3-au2 → 9.3.0-au2

package/src/tooltip/mdc-default-tooltip-configuration.ts

@@ -0,0 +1,5 @@
+export class MdcDefaultTooltipConfiguration {
+  showDelay?: number;
+  hideDelay?: number;
+  scrollHost?: HTMLElement | string;
+}

package/src/tooltip/mdc-tooltip-attribute.ts

@@ -0,0 +1,118 @@
+import { customAttribute, bindable, IAurelia, IAppRoot, inject } from 'aurelia';
+import { XPosition, YPosition, AnchorBoundaryType } from '@material/tooltip';
+import { booleanAttr, number } from '../base';
+import { MdcDefaultTooltipConfiguration } from './mdc-default-tooltip-configuration';
+
+/**
+ * @selector [mdc-tooltip]
+ */
+@inject(Element, MdcDefaultTooltipConfiguration, IAurelia)
+@customAttribute('mdc-tooltip')
+export class MdcTooltipAttribute {
+  constructor(root: HTMLElement, private defaultConfiguration: MdcDefaultTooltipConfiguration, private readonly au: IAurelia) {
+    this.root = root;
+    this.scrollHost = this.defaultConfiguration.scrollHost;
+  }
+
+  root: HTMLElement;
+
+  @bindable({ primary: true })
+  value: string;
+  valueChanged() {
+    this.context.value = this.value;
+  }
+
+  @bindable({ set: booleanAttr })
+  rich: boolean;
+  richChanged() {
+    this.context.rich = this.rich;
+  }
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean;
+  persistenthanged() {
+    this.context.persistent = this.persistent;
+  }
+
+  /** Sets the horizontal alignment of the tooltip */
+  @bindable()
+  xPosition: keyof typeof XPosition;
+  xPositionChanged() {
+    this.context.xPosition = this.xPosition;
+  }
+
+  /** Sets the vertical alignment of the tooltip */
+  @bindable()
+  yPosition: keyof typeof YPosition;
+  yPositionChanged() {
+    this.context.yPosition = this.yPosition;
+  }
+
+  /** Specifies whether the anchor element is bounded (element has an identifiable boundary such as a button) or unbounded (element does not have a visually declared boundary such as a text link).
+   * Tooltips are placed closer to bounded anchor elements compared to unbounded anchor elements. If no type is specified, defaults to BOUNDED.
+   **/
+  @bindable()
+  boundaryType: keyof typeof AnchorBoundaryType;
+  boundaryTypeChanged() {
+    this.context.boundaryType = this.boundaryType;
+  }
+
+  @bindable({ set: number })
+  showDelay: number;
+  showDelayChanged() {
+    this.context.showDelay = this.showDelay;
+  }
+
+  @bindable({ set: number })
+  hideDelay: number;
+  hideDelayChanged() {
+    this.context.hideDelay = this.hideDelay;
+  }
+
+  @bindable()
+  scrollHost?: HTMLElement | string;
+  scrollHostChanged() {
+    this.context.scrollHost = this.scrollHost;
+  }
+
+  tooltip: HTMLElement;
+  controller: IAppRoot<any>;
+  context: Partial<{
+    root: HTMLElement;
+    value: string;
+    rich: boolean;
+    persistent: boolean;
+    xPosition: keyof typeof XPosition;
+    yPosition: keyof typeof YPosition;
+    boundaryType: keyof typeof AnchorBoundaryType;
+    showDelay: number;
+    hideDelay: number;
+    scrollHost?: HTMLElement | string;
+  }>;
+
+  async attached() {
+    this.tooltip = document.createElement('div');
+    this.tooltip.innerHTML = '<mdc-tooltip anchor-elem.bind="root" x-position.bind="xPosition" y-position.bind="yPosition" boundary-type.bind="boundaryType" rich.bind="rich" persistent.bind="persistent" show-delay.bind="showDelay" hide-delay.bind="hideDelay" scroll-host.bind="scrollHost">${value}</mdc-tooltip>';
+    this.context = {
+      root: this.root,
+      value: this.value,
+      rich: this.rich,
+      persistent: this.persistent,
+      xPosition: this.xPosition,
+      yPosition: this.yPosition,
+      boundaryType: this.boundaryType,
+      showDelay: this.showDelay,
+      hideDelay: this.hideDelay,
+      scrollHost: this.scrollHost
+    };
+    this.controller = await this.au.enhance({
+      component: this.context, host: this.tooltip
+    });
+    document.body.appendChild(this.tooltip);
+  }
+
+  detached() {
+    this.controller.deactivate();
+    this.tooltip.remove();
+  }
+}

package/src/tooltip/mdc-tooltip.html

@@ -0,0 +1,7 @@
+<template class="mdc-tooltip
+  ${rich ? 'mdc-tooltip--rich' : ''}
+" role="tooltip" aria-hidden="true" transitionend.trigger="handleTransitionEnd()">
+  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/tooltip/mdc-tooltip.ts

@@ -0,0 +1,303 @@
+import { MdcComponent, booleanAttr, number } from '../base';
+import { MDCTooltipFoundation, MDCTooltipAdapter, events, XPosition, YPosition, AnchorBoundaryType, attributes, CssClasses, PositionWithCaret, numbers } from '@material/tooltip';
+import { inject, customElement, bindable } from 'aurelia';
+import { MdcDefaultTooltipConfiguration } from './mdc-default-tooltip-configuration';
+import template from './mdc-tooltip.html?raw';
+
+/**
+ * @selector mdc-tooltip
+ */
+@inject(Element, MdcDefaultTooltipConfiguration)
+@customElement({ name: 'mdc-tooltip', template })
+export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements EventListenerObject {
+  constructor(root: HTMLElement, private defaultConfiguration: MdcDefaultTooltipConfiguration) {
+    super(root);
+    this.showDelay = this.defaultConfiguration.showDelay;
+    this.hideDelay = this.defaultConfiguration.hideDelay;
+    this.scrollHost = this.defaultConfiguration.scrollHost;
+  }
+
+  /** Sets the anchor element */
+  @bindable()
+  anchorElem?: HTMLElement;
+
+  @bindable({ set: booleanAttr })
+  rich: boolean;
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean;
+
+  /** Sets the horizontal alignment of the tooltip */
+  @bindable()
+  xPosition?: keyof typeof XPosition;
+  xPositionChanged() {
+    if (this.xPosition !== undefined) {
+      this.foundation?.setTooltipPosition({ xPos: XPosition[this.xPosition] });
+    }
+  }
+
+  /** Sets the vertical alignment of the tooltip */
+  @bindable()
+  yPosition?: keyof typeof YPosition;
+  yPositionChanged() {
+    if (this.yPosition !== undefined) {
+      this.foundation?.setTooltipPosition({ yPos: YPosition[this.yPosition] });
+    }
+  }
+
+  /** Sets the caret position relative to the tooltip */
+  @bindable()
+  withCaretPos?: keyof typeof PositionWithCaret;
+  async withCaretPosChanged() {
+    if (this.withCaretPos !== undefined) {
+      await this.initialised;
+      this.foundation?.setTooltipPosition({ withCaretPos: PositionWithCaret[this.withCaretPos] });
+    }
+  }
+
+  /** Specifies whether the anchor element is bounded (element has an identifiable boundary such as a button) or unbounded (element does not have a visually declared boundary such as a text link).
+   * Tooltips are placed closer to bounded anchor elements compared to unbounded anchor elements. If no type is specified, defaults to BOUNDED.
+   **/
+  @bindable()
+  boundaryType?: keyof typeof AnchorBoundaryType;
+  boundaryTypeChanged() {
+    if (this.boundaryType !== undefined) {
+      this.foundation?.setAnchorBoundaryType(AnchorBoundaryType[this.boundaryType]);
+    }
+  }
+
+  /** Sets show delay */
+  @bindable({ set: number })
+  showDelay?: number;
+  async showDelayChanged() {
+    await this.initialised;
+    this.foundation?.setShowDelay(this.showDelay ?? numbers.SHOW_DELAY_MS);
+  }
+
+  /** Sets hide delay */
+  @bindable({ set: number })
+  hideDelay?: number;
+  async hideDelayChanged() {
+    await this.initialised;
+    this.foundation?.setHideDelay(this.hideDelay ?? numbers.HIDE_DELAY_MS);
+  }
+
+  @bindable()
+  scrollHost?: HTMLElement | string;
+
+  beforeFoundationCreated() {
+    if (this.persistent) {
+      this.root.setAttribute(attributes.PERSISTENT, 'true');
+    }
+  }
+
+  initialSyncWithDOM() {
+    this.xPositionChanged();
+    this.yPositionChanged();
+    this.boundaryTypeChanged();
+    if (this.rich && this.persistent) {
+      this.anchorElem?.addEventListener('click', this);
+    } else {
+      this.anchorElem?.addEventListener('mouseenter', this);
+      // TODO(b/157075286): Listening for a 'focus' event is too broad.
+      this.anchorElem?.addEventListener('focus', this);
+      this.anchorElem?.addEventListener('mouseleave', this);
+      this.anchorElem?.addEventListener('touchstart', this);
+      this.anchorElem?.addEventListener('touchend', this);
+    }
+
+    if (typeof (this.scrollHost) === 'string') {
+      this.scrollHost = document.querySelector<HTMLElement>(this.scrollHost) ?? undefined;
+    }
+
+    if (this.scrollHost) {
+      const scrollHost = this.scrollHost;
+      this.foundation!.attachScrollHandler((event, listener) => scrollHost.addEventListener(event, listener));
+      this.foundation!.removeScrollHandler((event, listener) => scrollHost.removeEventListener(event, listener));
+    }
+  }
+
+  destroy() {
+    if (!this.anchorElem) {
+      return;
+    }
+
+    if (this.rich && this.persistent) {
+      this.anchorElem.removeEventListener('click', this);
+    } else {
+      this.anchorElem.removeEventListener('mouseenter', this);
+      this.anchorElem.removeEventListener('focus', this);
+      this.anchorElem.removeEventListener('mouseleave', this);
+      this.anchorElem.removeEventListener('touchstart', this);
+      this.anchorElem.removeEventListener('touchend', this);
+    }
+  }
+
+  handleEvent(evt: Event): void {
+    switch (evt.type) {
+      case 'click': this.handleClick(); break;
+      case 'mouseenter': this.handleMouseEnter(); break;
+      case 'focus': this.handleFocus(evt as FocusEvent); break;
+      case 'mouseleave': this.handleMouseLeave(); break;
+      case 'touchstart': this.handleTouchstart(); break;
+      case 'touchend': this.handleTouchend(); break;
+    }
+  }
+
+  handleMouseEnter() {
+    this.foundation?.handleAnchorMouseEnter();
+  }
+
+  handleFocus(evt: FocusEvent) {
+    this.foundation?.handleAnchorFocus(evt);
+  }
+
+  handleMouseLeave() {
+    this.foundation?.handleAnchorMouseLeave();
+  }
+
+  handleTouchstart() {
+    this.foundation?.handleAnchorTouchstart();
+  }
+
+  handleTouchend() {
+    this.foundation?.handleAnchorTouchend();
+  }
+
+  handleClick() {
+    this.foundation?.handleAnchorClick();
+  }
+
+  handleTransitionEnd() {
+    this.foundation?.handleTransitionEnd();
+  }
+
+  getDefaultFoundation() {
+    const adapter: MDCTooltipAdapter = {
+      getAttribute: (attr) => this.root.getAttribute(attr),
+      setAttribute: (attr, value) => {
+        this.root.setAttribute(attr, value);
+      },
+      removeAttribute: (attr) => {
+        this.root.removeAttribute(attr);
+      },
+      addClass: (className) => {
+        this.root.classList.add(className);
+      },
+      hasClass: (className) => this.root.classList.contains(className),
+      removeClass: (className) => {
+        this.root.classList.remove(className);
+      },
+      getComputedStyleProperty: (propertyName) => {
+        return window.getComputedStyle(this.root).getPropertyValue(
+          propertyName);
+      },
+      setStyleProperty: (propertyName, value) => {
+        this.root.style.setProperty(propertyName, value);
+      },
+      setSurfaceAnimationStyleProperty: (propertyName, value) => {
+        const surface = this.root.querySelector<HTMLElement>(
+          `.${CssClasses.SURFACE_ANIMATION}`);
+        surface?.style.setProperty(propertyName, value);
+      },
+      getViewportWidth: () => window.innerWidth,
+      getViewportHeight: () => window.innerHeight,
+      getTooltipSize: () => {
+        return {
+          width: this.root.offsetWidth,
+          height: this.root.offsetHeight
+        };
+      },
+      getAnchorBoundingRect: () => {
+        return this.anchorElem ? this.anchorElem.getBoundingClientRect() : null;
+      },
+      getParentBoundingRect: () => {
+        return this.root.parentElement?.getBoundingClientRect() ?? null;
+      },
+      getAnchorAttribute: (attr) => {
+        return this.anchorElem ? this.anchorElem.getAttribute(attr) : null;
+      },
+      setAnchorAttribute: (attr, value) => {
+        this.anchorElem?.setAttribute(attr, value);
+      },
+      isRTL: () => getComputedStyle(this.root).direction === 'rtl',
+      anchorContainsElement: (element) => {
+        return !!this.anchorElem?.contains(element);
+      },
+      tooltipContainsElement: (element) => {
+        return this.root.contains(element);
+      },
+      focusAnchorElement: () => {
+        this.anchorElem?.focus();
+      },
+      registerEventHandler: (evt, handler) => {
+        if (this.root instanceof HTMLElement) {
+          this.root.addEventListener(evt, handler);
+        }
+      },
+      deregisterEventHandler: (evt, handler) => {
+        if (this.root instanceof HTMLElement) {
+          this.root.removeEventListener(evt, handler);
+        }
+      },
+      registerAnchorEventHandler: (evt, handler) => {
+        this.anchorElem?.addEventListener(evt, handler);
+      },
+      deregisterAnchorEventHandler: (evt, handler) => {
+        this.anchorElem?.addEventListener(evt, handler);
+      },
+      registerDocumentEventHandler: (evt, handler) => {
+        document.body.addEventListener(evt, handler);
+      },
+      deregisterDocumentEventHandler: (evt, handler) => {
+        document.body.removeEventListener(evt, handler);
+      },
+      registerWindowEventHandler: (evt, handler) => {
+        window.addEventListener(evt, handler);
+      },
+      deregisterWindowEventHandler: (evt, handler) => {
+        window.removeEventListener(evt, handler);
+      },
+      notifyHidden: () => {
+        this.emit(events.HIDDEN, {});
+      },
+      getTooltipCaretBoundingRect: () => {
+        const caret = this.root.querySelector<HTMLElement>(
+          `.${CssClasses.TOOLTIP_CARET_TOP}`);
+        if (!caret) {
+          return null;
+        }
+
+        return caret.getBoundingClientRect();
+      },
+      setTooltipCaretStyle: (propertyName, value) => {
+        const topCaret = this.root.querySelector<HTMLElement>(
+          `.${CssClasses.TOOLTIP_CARET_TOP}`);
+        const bottomCaret = this.root.querySelector<HTMLElement>(
+          `.${CssClasses.TOOLTIP_CARET_BOTTOM}`);
+
+        if (!topCaret || !bottomCaret) {
+          return;
+        }
+
+        topCaret.style.setProperty(propertyName, value);
+        bottomCaret.style.setProperty(propertyName, value);
+      },
+      clearTooltipCaretStyles: () => {
+        const topCaret = this.root.querySelector<HTMLElement>(`.${CssClasses.TOOLTIP_CARET_TOP}`);
+        const bottomCaret = this.root.querySelector<HTMLElement>(`.${CssClasses.TOOLTIP_CARET_BOTTOM}`);
+
+        if (!topCaret || !bottomCaret) {
+          return;
+        }
+        topCaret.removeAttribute('style');
+        bottomCaret.removeAttribute('style');
+      },
+      getActiveElement: () => {
+        return document.activeElement;
+      },
+    };
+
+    return new MDCTooltipFoundation(adapter);
+  }
+}