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

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

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

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

@@ -1,118 +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();
-  }
-}
+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

@@ -1,7 +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>
+<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

@@ -1,20 +1,20 @@
 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';
+import { MdcConfiguration } from '../mdc-configuration';
 
 /**
  * @selector mdc-tooltip
  */
-@inject(Element, MdcDefaultTooltipConfiguration)
+@inject(Element, MdcConfiguration)
 @customElement({ name: 'mdc-tooltip', template })
 export class MdcTooltip extends MdcComponent<MDCTooltipFoundation> implements EventListenerObject {
-  constructor(root: HTMLElement, private defaultConfiguration: MdcDefaultTooltipConfiguration) {
+  constructor(root: HTMLElement, private configuration: MdcConfiguration) {
     super(root);
-    this.showDelay = this.defaultConfiguration.showDelay;
-    this.hideDelay = this.defaultConfiguration.hideDelay;
-    this.scrollHost = this.defaultConfiguration.scrollHost;
+    this.showDelay = this.configuration.tooltip.showDelay;
+    this.hideDelay = this.configuration.tooltip.hideDelay;
+    this.scrollHost = this.configuration.tooltip.scrollHost;
   }
 
   /** Sets the anchor element */

package/src/top-app-bar/enhance-top-app-bar-actions.ts

@@ -1,9 +1,9 @@
-import { templateCompilerHooks } from 'aurelia';
-
-@templateCompilerHooks
-export class EnhanceTopAppBarActions {
-  compiling(template: HTMLElement | HTMLTemplateElement) {
-    template.innerHTML = template.innerHTML.replaceAll('mdc-top-app-bar-action-item=""','mdc-top-app-bar-action-item="" mdc-ripple="unbounded.bind: true"');
-    template.innerHTML = template.innerHTML.replaceAll('mdc-top-app-bar-nav-icon=""','mdc-top-app-bar-nav-icon="" mdc-ripple="unbounded.bind: true"');
-  }
-}
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceTopAppBarActions {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-top-app-bar-action-item=""','mdc-top-app-bar-action-item="" mdc-ripple="unbounded.bind: true"');
+    template.innerHTML = template.innerHTML.replaceAll('mdc-top-app-bar-nav-icon=""','mdc-top-app-bar-nav-icon="" mdc-ripple="unbounded.bind: true"');
+  }
+}

package/src/top-app-bar/mdc-top-app-bar-action-item.ts

@@ -1,12 +1,12 @@
-import { customAttribute, inject } from 'aurelia';
-
-@inject(Element)
-@customAttribute('mdc-top-app-bar-action-item')
-export class MdcTopAppBarActionItem {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    this.root.setAttribute('role', 'button');
-    this.root.classList.add('mdc-top-app-bar__action-item', 'mdc-icon-button');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+@inject(Element)
+@customAttribute('mdc-top-app-bar-action-item')
+export class MdcTopAppBarActionItem {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.setAttribute('role', 'button');
+    this.root.classList.add('mdc-top-app-bar__action-item', 'mdc-icon-button');
+  }
+}

package/src/top-app-bar/mdc-top-app-bar-fixed-adjust.ts

@@ -1,13 +1,13 @@
-import { customAttribute, inject } from 'aurelia';
-
-@inject(Element)
-@customAttribute('mdc-top-app-bar-fixed-adjust')
-export class MdcTopAppBarFixedAdjust {
-  constructor(private root: HTMLElement) { }
-
-  value: 'prominent' | 'dense' | 'dense-prominent' | 'short';
-
-  attached() {
-    this.root.classList.add(this.value ? `mdc-top-app-bar--${this.value}-fixed-adjust` : 'mdc-top-app-bar--fixed-adjust');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+@inject(Element)
+@customAttribute('mdc-top-app-bar-fixed-adjust')
+export class MdcTopAppBarFixedAdjust {
+  constructor(private root: HTMLElement) { }
+
+  value: 'prominent' | 'dense' | 'dense-prominent' | 'short';
+
+  attached() {
+    this.root.classList.add(this.value ? `mdc-top-app-bar--${this.value}-fixed-adjust` : 'mdc-top-app-bar--fixed-adjust');
+  }
+}

package/src/top-app-bar/mdc-top-app-bar-nav-icon.ts

@@ -1,12 +1,12 @@
-import { customAttribute, inject } from 'aurelia';
-
-@inject(Element)
-@customAttribute('mdc-top-app-bar-nav-icon')
-export class MdcTopAppBarNavIcon {
-  constructor(private root: HTMLElement) { }
-
-  attached() {
-    this.root.setAttribute('role', 'button');
-    this.root.classList.add('mdc-top-app-bar__navigation-icon', 'mdc-icon-button');
-  }
-}
+import { customAttribute, inject } from 'aurelia';
+
+@inject(Element)
+@customAttribute('mdc-top-app-bar-nav-icon')
+export class MdcTopAppBarNavIcon {
+  constructor(private root: HTMLElement) { }
+
+  attached() {
+    this.root.setAttribute('role', 'button');
+    this.root.classList.add('mdc-top-app-bar__navigation-icon', 'mdc-icon-button');
+  }
+}

package/src/top-app-bar/mdc-top-app-bar-row.ts

@@ -1,7 +1,7 @@
-import { customElement } from 'aurelia';
-
-@customElement({
-  name: 'mdc-top-app-bar-row',
-  template: '<template class="mdc-top-app-bar__row"><au-slot></au-slot></template>'
-})
-export class MdcTopAppBarRow { }
+import { customElement } from 'aurelia';
+
+@customElement({
+  name: 'mdc-top-app-bar-row',
+  template: '<template class="mdc-top-app-bar__row"><au-slot></au-slot></template>'
+})
+export class MdcTopAppBarRow { }

package/src/top-app-bar/mdc-top-app-bar-section/mdc-top-app-bar-section.html

@@ -1,3 +1,3 @@
-<template class="mdc-top-app-bar__section mdc-top-app-bar__section--align-${end ? 'end' : 'start'}" role="toolbar">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-top-app-bar__section mdc-top-app-bar__section--align-${end ? 'end' : 'start'}" role="toolbar">
+  <au-slot></au-slot>
+</template>

package/src/top-app-bar/mdc-top-app-bar-section/mdc-top-app-bar-section.ts

@@ -1,9 +1,9 @@
-import { booleanAttr } from '../../base';
-import { customElement, bindable } from 'aurelia';
-import template from './mdc-top-app-bar-section.html?raw';
-
-@customElement({ name: 'mdc-top-app-bar-section', template })
-export class MdcTopAppBarSection {
-  @bindable({ set: booleanAttr })
-  end: boolean;
-}
+import { booleanAttr } from '../../base';
+import { customElement, bindable } from 'aurelia';
+import template from './mdc-top-app-bar-section.html?raw';
+
+@customElement({ name: 'mdc-top-app-bar-section', template })
+export class MdcTopAppBarSection {
+  @bindable({ set: booleanAttr })
+  end: boolean;
+}

package/src/top-app-bar/mdc-top-app-bar-title.ts

@@ -1,7 +1,7 @@
-import { customElement } from 'aurelia';
-
-@customElement({
-  name: 'mdc-top-app-bar-title',
-  template: '<template class="mdc-top-app-bar__title"><au-slot></au-slot></template>'
-})
-export class MdcTopAppBarTitle { }
+import { customElement } from 'aurelia';
+
+@customElement({
+  name: 'mdc-top-app-bar-title',
+  template: '<template class="mdc-top-app-bar__title"><au-slot></au-slot></template>'
+})
+export class MdcTopAppBarTitle { }

package/src/top-app-bar/mdc-top-app-bar.html

@@ -1,9 +1,9 @@
-<template class="mdc-top-app-bar
-  ${short ? 'mdc-top-app-bar--short' : ''}
-  ${short && collapsed ? 'mdc-top-app-bar--short-collapsed' : ''}
-  ${fixed ? 'mdc-top-app-bar--fixed' : ''}
-  ${prominent ? 'mdc-top-app-bar--prominent' : ''}
-  ${dense ? 'mdc-top-app-bar--dense' : ''}
-  ${hasActionItems ? 'mdc-top-app-bar--short-has-action-item' : ''}">
-  <au-slot></au-slot>
-</template>
+<template class="mdc-top-app-bar
+  ${short ? 'mdc-top-app-bar--short' : ''}
+  ${short && collapsed ? 'mdc-top-app-bar--short-collapsed' : ''}
+  ${fixed ? 'mdc-top-app-bar--fixed' : ''}
+  ${prominent ? 'mdc-top-app-bar--prominent' : ''}
+  ${dense ? 'mdc-top-app-bar--dense' : ''}
+  ${hasActionItems ? 'mdc-top-app-bar--short-has-action-item' : ''}">
+  <au-slot></au-slot>
+</template>