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

package/src/tab-bar/indicator/mdc-tab-indicator.html

@@ -0,0 +1,9 @@
+<template class="
+    mdc-tab-indicator
+    ${fade ? 'mdc-tab-indicator--fade' : ''}
+    ${active ? 'mdc-tab-indicator--active' : ''}
+  ">
+  <span
+    class="mdc-tab-indicator__content mdc-tab-indicator__content--${icon ? 'icon' : 'underline'} ${icon ? 'material-icons' : ''}"
+    aria-hidden="true" element.ref="content"><span if.bind="icon">${icon}</span></span>
+</template>

package/src/tab-bar/indicator/mdc-tab-indicator.ts

@@ -0,0 +1,51 @@
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTabIndicatorFoundation, MDCTabIndicatorAdapter, MDCFadingTabIndicatorFoundation, MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-indicator.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-indicator', template })
+export class MdcTabIndicator extends MdcComponent<MDCTabIndicatorFoundation> {
+  private content: HTMLElement; // assigned in html
+
+  @bindable({ set: booleanAttr })
+  fade: boolean;
+
+  @bindable({ set: booleanAttr })
+  active: boolean;
+
+  @bindable()
+  icon: string;
+
+  computeContentClientRect(): ClientRect {
+    return this.foundation!.computeContentClientRect();
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabIndicatorAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      computeContentClientRect: () => this.content.getBoundingClientRect(),
+      setContentStyleProperty: (prop, value) => this.content.style.setProperty(prop, value),
+    };
+
+    if (this.root.classList.contains(
+      MDCTabIndicatorFoundation.cssClasses.FADE)) {
+      return new MDCFadingTabIndicatorFoundation(adapter);
+    }
+
+    // Default to the sliding indicator
+    return new MDCSlidingTabIndicatorFoundation(adapter);
+  }
+
+  activate(previousIndicatorClientRect?: ClientRect) {
+    this.foundation?.activate(previousIndicatorClientRect);
+  }
+
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+}

package/src/tab-bar/mdc-tab-bar.html

@@ -0,0 +1,6 @@
+<template class="mdc-tab-bar" role="tablist" keydown.trigger="handleKeyDown_($event)"
+  mdctab:interacted.trigger="handleTabInteraction_($event)">
+  <div as-element="mdc-tab-scroller" component.ref="tabScroller_" align.bind="align">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/tab-bar/mdc-tab-bar.ts

@@ -0,0 +1,119 @@
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCTabBarFoundation, MDCTabBarAdapter, MDCTabBarActivatedEventDetail, strings } from '@material/tab-bar';
+import { IMdcTabElement } from './tab/mdc-tab';
+import { MdcTabScroller } from './scroller/mdc-tab-scroller';
+import { MDCTabInteractionEvent, MDCTabFoundation } from '@material/tab';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab-bar.html?raw';
+
+// aurelia is case insensitive
+MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
+strings.TAB_ACTIVATED_EVENT = strings.TAB_ACTIVATED_EVENT.toLowerCase();
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-bar', template })
+export class MdcTabBar extends MdcComponent<MDCTabBarFoundation> {
+  private tabScroller_?: MdcTabScroller; // assigned in html
+
+  @bindable({ set: booleanAttr })
+  focusOnActivate: boolean;
+  focusOnActivateChanged() {
+    this.tabScroller_?.tabs.forEach((tab) => tab.focusOnActivate = this.focusOnActivate);
+  }
+
+  @bindable({ set: booleanAttr })
+  useAutomaticActivation: boolean;
+  useAutomaticActivationChanged() {
+    this.foundation?.setUseAutomaticActivation(this.useAutomaticActivation);
+  }
+
+  @bindable()
+  align: MdcTabScroller['align'];
+
+  initialSyncWithDOM() {
+    this.focusOnActivateChanged();
+    this.useAutomaticActivationChanged();
+    for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+      if (this.tabScroller_!.tabs[i].active) {
+        this.scrollIntoView(i);
+        break;
+      }
+    }
+  }
+
+  handleKeyDown_(evt: KeyboardEvent) {
+    this.foundation?.handleKeyDown(evt);
+    return true;
+  }
+
+  handleTabInteraction_(evt: MDCTabInteractionEvent) {
+    this.foundation?.handleTabInteraction(evt);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabBarAdapter = {
+      scrollTo: (scrollX) => this.tabScroller_!.scrollTo(scrollX),
+      incrementScroll: (scrollXIncrement) => this.tabScroller_!.incrementScroll(scrollXIncrement),
+      getScrollPosition: () => this.tabScroller_!.getScrollPosition(),
+      getScrollContentWidth: () => this.tabScroller_!.getScrollContentWidth(),
+      getOffsetWidth: () => this.root.offsetWidth,
+      isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',
+      setActiveTab: (index) => this.foundation?.activateTab(index),
+      activateTabAtIndex: (index, clientRect) => this.tabScroller_!.tabs[index].activate(clientRect),
+      deactivateTabAtIndex: (index) => this.tabScroller_!.tabs[index].deactivate(),
+      focusTabAtIndex: (index) => this.tabScroller_!.tabs[index].focus(),
+      getTabIndicatorClientRectAtIndex: (index) => this.tabScroller_!.tabs[index].computeIndicatorClientRect(),
+      getTabDimensionsAtIndex: (index) => this.tabScroller_!.tabs[index].computeDimensions(),
+      getPreviousActiveTabIndex: () => {
+        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+          if (this.tabScroller_!.tabs[i].isActive()) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      getFocusedTabIndex: () => {
+        const tabElements = this.getTabElements_();
+        const activeElement = document.activeElement! as IMdcTabElement;
+        return tabElements.indexOf(activeElement);
+      },
+      getIndexOfTabById: (id) => {
+        for (let i = 0; i < this.tabScroller_!.tabs.length; i++) {
+          if (this.tabScroller_!.tabs[i].id === id) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      getTabListLength: () => this.tabScroller_!.tabs.length,
+      notifyTabActivated: (index) => this.emit<MDCTabBarActivatedEventDetail>(strings.TAB_ACTIVATED_EVENT, { index }, true),
+    };
+    return new MDCTabBarFoundation(adapter);
+  }
+
+  /**
+   * Activates the tab at the given index
+   * @param index The index of the tab
+   */
+  activateTab(index: number) {
+    this.foundation?.activateTab(index);
+  }
+
+  /**
+   * Scrolls the tab at the given index into view
+   * @param index THe index of the tab
+   */
+  scrollIntoView(index: number) {
+    this.foundation?.scrollIntoView(index);
+  }
+
+  /**
+   * Returns all the tab elements in a nice clean array
+   */
+  private getTabElements_(): IMdcTabElement[] {
+    return [].slice.call(this.root.querySelectorAll(strings.TAB_SELECTOR)) as IMdcTabElement[];
+  }
+
+}

package/src/tab-bar/scroller/mdc-tab-scroller.html

@@ -0,0 +1,11 @@
+<template class="mdc-tab-scroller
+  ${align ? 'mdc-tab-scroller--align-' + align : ''}
+  " wheel.trigger="handleInteraction_()" touchstart.trigger="handleInteraction_()"
+  pointerdown.trigger="handleInteraction_()" mousedown.trigger="handleInteraction_()"
+  keydown.trigger="handleInteraction_()" transitionend.trigger="handleTransitionEnd_($event)">
+  <div class="mdc-tab-scroller__scroll-area" element.ref="area_">
+    <div class="mdc-tab-scroller__scroll-content" element.ref="content_">
+      <au-slot></au-slot>
+    </div>
+  </div>
+</template>

package/src/tab-bar/scroller/mdc-tab-scroller.ts

@@ -0,0 +1,85 @@
+import { MdcComponent } from '../../base';
+import { MDCTabScrollerFoundation, MDCTabScrollerAdapter, util } from '@material/tab-scroller';
+import { matches } from '@material/dom/ponyfill';
+import { MdcTab } from '../tab/mdc-tab';
+import { inject, customElement, bindable, CustomElement, slotted } from 'aurelia';
+import template from './mdc-tab-scroller.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-tab-scroller', template })
+export class MdcTabScroller extends MdcComponent<MDCTabScrollerFoundation> {
+  private content_: HTMLElement; // assigned in html
+  private area_: HTMLElement; // assigned in html
+
+  @bindable()
+  align: 'start' | 'end' | 'center';
+
+  @slotted({ query: 'mdc-tab' })
+  tabElements: HTMLElement[];
+
+  get tabs(): MdcTab[] {
+    return this.tabElements.map(x => CustomElement.for<MdcTab>(x).viewModel);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabScrollerAdapter = {
+      eventTargetMatchesSelector: (evtTarget, selector) => matches(evtTarget as Element, selector),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      addScrollAreaClass: (className) => this.area_.classList.add(className),
+      setScrollAreaStyleProperty: (prop, value) => this.area_.style.setProperty(prop, value),
+      setScrollContentStyleProperty: (prop, value) => this.content_.style.setProperty(prop, value),
+      getScrollContentStyleValue: (propName) => window.getComputedStyle(this.content_).getPropertyValue(propName),
+      setScrollAreaScrollLeft: (scrollX) => this.area_.scrollLeft = scrollX,
+      getScrollAreaScrollLeft: () => this.area_.scrollLeft,
+      getScrollContentOffsetWidth: () => this.content_.offsetWidth,
+      getScrollAreaOffsetWidth: () => this.area_.offsetWidth,
+      computeScrollAreaClientRect: () => this.area_.getBoundingClientRect(),
+      computeScrollContentClientRect: () => this.content_.getBoundingClientRect(),
+      computeHorizontalScrollbarHeight: () => util.computeHorizontalScrollbarHeight(document),
+    };
+    return new MDCTabScrollerFoundation(adapter);
+  }
+
+  handleInteraction_() {
+    this.foundation?.handleInteraction();
+    return true;
+  }
+
+  handleTransitionEnd_(evt: Event) {
+    this.foundation?.handleTransitionEnd(evt);
+    return true;
+  }
+
+  /**
+   * Returns the current visual scroll position
+   */
+  getScrollPosition(): number {
+    return this.foundation!.getScrollPosition();
+  }
+
+  /**
+   * Returns the width of the scroll content
+   */
+  getScrollContentWidth(): number {
+    return this.content_.offsetWidth;
+  }
+
+  /**
+   * Increments the scroll value by the given amount
+   * @param scrollXIncrement The pixel value by which to increment the scroll value
+   */
+  incrementScroll(scrollXIncrement: number) {
+    this.foundation?.incrementScroll(scrollXIncrement);
+  }
+
+  /**
+   * Scrolls to the given pixel position
+   * @param scrollX The pixel value to scroll to
+   */
+  scrollTo(scrollX: number) {
+    this.foundation?.scrollTo(scrollX);
+  }
+}

package/src/tab-bar/tab/mdc-tab.html

@@ -0,0 +1,20 @@
+<template class="
+    mdc-tab
+    ${active ? 'mdc-tab--active' : ''}
+    ${minWidth ? 'mdc-tab--min-width' : ''}
+    ${stacked ? 'mdc-tab--stacked' : ''}
+  " role="tab" aria-selected="false" tabindex="-1" mdc-ripple="no-class.bind: true"
+  click.trigger="handleClick_()">
+  <span class="mdc-tab__content" element.ref="content_">
+    <span class="mdc-tab__icon material-icons" aria-hidden="true" if.bind="icon">${icon}</span>
+    <span class="mdc-tab__text-label" if.bind="label">${label}</span>
+    <au-slot></au-slot>
+    <mdc-tab-indicator if.bind="fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
+      icon.bind="indicatorIcon">
+    </mdc-tab-indicator>
+  </span>
+  <mdc-tab-indicator if.bind="!fixed" active.bind="active" fade.bind="fade" component.ref="tabIndicator_"
+    icon.bind="indicatorIcon">
+  </mdc-tab-indicator>
+  <span class="mdc-tab__ripple" ref="rippleSurface"></span>
+</template>

package/src/tab-bar/tab/mdc-tab.ts

@@ -0,0 +1,118 @@
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTabFoundation, MDCTabAdapter, MDCTabInteractionEventDetail, MDCTabDimensions } from '@material/tab';
+import { MdcTabIndicator } from '../indicator/mdc-tab-indicator';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-tab.html?raw';
+
+let tabId = 0;
+
+MDCTabFoundation.strings.INTERACTED_EVENT = MDCTabFoundation.strings.INTERACTED_EVENT.toLowerCase();
+
+@inject(Element)
+@customElement({ name: 'mdc-tab', template })
+export class MdcTab extends MdcComponent<MDCTabFoundation> {
+  private tabIndicator_: MdcTabIndicator; // assigned in initialize();
+  private content_: HTMLElement; // assigned in initialize();
+
+  @bindable()
+  id: string = `mdc-tab-${++tabId}`;
+
+  @bindable({ set: booleanAttr })
+  fixed: boolean;
+
+  @bindable({ set: booleanAttr })
+  active: boolean;
+
+  @bindable()
+  icon: string;
+
+  @bindable()
+  label: string;
+
+  @bindable({ set: booleanAttr })
+  minWidth: boolean;
+
+  @bindable({ set: booleanAttr })
+  fade: boolean;
+
+  @bindable({ set: booleanAttr })
+  stacked: boolean;
+
+  @bindable()
+  indicatorIcon: string;
+
+  handleClick_() {
+    this.foundation?.handleClick();
+    return true;
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCTabAdapter = {
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
+      deactivateIndicator: () => this.tabIndicator_.deactivate(),
+      notifyInteracted: () => this.emit<MDCTabInteractionEventDetail>(MDCTabFoundation.strings.INTERACTED_EVENT, { tabId: this.id }, true /* bubble */),
+      getOffsetLeft: () => this.root.offsetLeft,
+      getOffsetWidth: () => this.root.offsetWidth,
+      getContentOffsetLeft: () => this.content_.offsetLeft,
+      getContentOffsetWidth: () => this.content_.offsetWidth,
+      focus: () => this.root.focus(),
+    };
+    return new MDCTabFoundation(adapter);
+  }
+
+  isActive(): boolean {
+    return this.foundation!.isActive();
+  }
+
+  set focusOnActivate(focusOnActivate: boolean) {
+    this.foundation?.setFocusOnActivate(focusOnActivate);
+  }
+
+  /**
+   * Activates the tab
+   */
+  activate(computeIndicatorClientRect?: ClientRect) {
+    this.foundation?.activate(computeIndicatorClientRect);
+  }
+
+  /**
+   * Deactivates the tab
+   */
+  deactivate() {
+    this.foundation?.deactivate();
+  }
+
+  /**
+   * Returns the indicator's client rect
+   */
+  computeIndicatorClientRect(): ClientRect {
+    return this.tabIndicator_.computeContentClientRect();
+  }
+
+  computeDimensions(): MDCTabDimensions {
+    return this.foundation!.computeDimensions();
+  }
+
+  /**
+   * Focuses the tab
+   */
+  focus() {
+    this.root.focus();
+  }
+
+}
+
+/** @hidden */
+export interface IMdcTabElement extends HTMLElement {
+  au: {
+    controller: {
+      viewModel: MdcTab;
+    };
+  };
+}