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

package/src/segmented-button/mdc-segmented-button-segment/enhance-mdc-segmented-button-segment.ts

@@ -0,0 +1,8 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcSegmentedButtonSegment {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replaceAll('mdc-segmented-button-segment=""', 'as-element="mdc-segmented-button-segment" mdc-segmented-button-segment-element');
+  }
+}

package/src/segmented-button/mdc-segmented-button-segment/mdc-segmented-button-segment.html

@@ -0,0 +1,11 @@
+<template class="
+    mdc-segmented-button__segment
+    ${touch ? 'mdc-segmented-button--touch' : ''}
+  " mdc-ripple="no-class.bind: true" click.trigger="handleClick()">
+  <div class="mdc-segmented-button__touch" if.bind="touch"></div>
+  <div class="mdc-segmented-button__ripple"></div>
+  <i class="material-icons mdc-segmented-button__icon" if.bind="icon">${icon}</i>
+  <div class="mdc-segmented-button__label">
+    <au-slot></au-slot>
+  </div>
+</template>

package/src/segmented-button/mdc-segmented-button-segment/mdc-segmented-button-segment.ts

@@ -0,0 +1,170 @@
+import { booleanAttr, MdcComponent } from '../../base';
+import { CustomElement } from '@aurelia/runtime-html';
+import { inject, customElement, bindable } from 'aurelia';
+import { MDCSegmentedButtonSegmentAdapter, MDCSegmentedButtonSegmentFoundation, SegmentDetail } from '@material/segmented-button';
+import { events } from '@material/segmented-button/segmented-button/constants';
+import template from './mdc-segmented-button-segment.html?raw';
+import { MdcSegmentedButton } from '../mdc-segmented-button';
+
+/**
+ * @selector button[mdc-segmented-button-segment]
+ */
+@inject(Element, MdcSegmentedButton)
+@customElement({ name: 'mdc-segmented-button-segment', template })
+export class MdcSegmentedButtonSegment extends MdcComponent<MDCSegmentedButtonSegmentFoundation> {
+  constructor(root: IMdcSegmentedButtonSegmentElement) {
+    super(root);
+    defineMdcSegmentedButtonSegmentElementApis(root);
+  }
+
+  private isSingleSelect: boolean;
+  private index: number;
+
+  /** Indicates the segment has touch target support */
+  @bindable({ set: booleanAttr })
+  touch: boolean;
+
+  /** Sets an icon in the segment */
+  @bindable()
+  icon: string;
+
+  private _checked?: boolean;
+  /** Use to verify the checked value */
+  get checked(): boolean {
+    if (this.foundation) {
+      return this.foundation?.isSelected();
+    } else {
+      return this._checked ?? false;
+    }
+  }
+
+  /**
+   * Whether the segment is checked.
+   */
+  set checked(value: boolean) {
+    this._checked = value;
+    if (value) {
+      this.foundation?.setSelected();
+    } else {
+      this.foundation?.setUnselected();
+    }
+  }
+
+  handleClick() {
+    this.foundation?.handleClick();
+  }
+
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async beforeFoundationCreated() {
+    if (this.root.hasAttribute('checked')) {
+      const attributeValue = this.root.getAttribute('checked');
+
+      if (attributeValue || attributeValue === '') {
+        this.checked = true;
+      }
+    }
+  }
+
+  initialSyncWithDOM() {
+    if (this._checked !== undefined) {
+      this.checked = this._checked;
+    }
+  }
+
+  getDefaultFoundation(): MDCSegmentedButtonSegmentFoundation {
+    // 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.
+    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+    const adapter: MDCSegmentedButtonSegmentAdapter = {
+      isSingleSelect: () => {
+        return this.isSingleSelect;
+      },
+      getAttr: (attrName) => {
+        return this.root.getAttribute(attrName);
+      },
+      setAttr: (attrName, value) => {
+        this.root.setAttribute(attrName, value);
+      },
+      addClass: (className) => {
+        this.root.classList.add(className);
+      },
+      removeClass: (className) => {
+        this.root.classList.remove(className);
+      },
+      hasClass: (className) => {
+        return this.root.classList.contains(className);
+      },
+      notifySelectedChange: selected => this.notifySelectedChange(events.SELECTED, selected),
+      getRootBoundingClientRect: () => {
+        return this.root.getBoundingClientRect();
+      }
+    };
+    return new MDCSegmentedButtonSegmentFoundation(adapter);
+  }
+
+  notifySelectedChange(event: string, selected: boolean) {
+    this.emit<SegmentDetail>(
+      event, {
+      index: this.index,
+      selected,
+      segmentId: this.getSegmentId()
+    }, true /* shouldBubble */);
+  }
+
+  setIsSingleSelect(isSingleSelect: boolean) {
+    this.isSingleSelect = isSingleSelect;
+    this.root.setAttribute('role', isSingleSelect ? 'radio' : '');
+  }
+
+  /**
+   * Sets segment's index value
+   *
+   * @hidden
+   * @param index Segment's index within wrapping segmented button
+   */
+  setIndex(index: number) {
+    this.index = index;
+  }
+
+  /**
+   * @hidden
+   * @return Returns segment's segmentId if it was set by client
+   */
+  getSegmentId(): string | undefined {
+    return this.foundation?.getSegmentId();
+  }
+}
+
+/** @hidden */
+export interface IMdcSegmentedButtonSegmentElement extends HTMLElement {
+  checked: boolean;
+  indeterminate: boolean;
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcSegmentedButtonSegment;
+    };
+  };
+}
+
+function defineMdcSegmentedButtonSegmentElementApis(element: IMdcSegmentedButtonSegmentElement) {
+  Object.defineProperties(element, {
+    type: {
+      value: 'checkbox'
+    },
+    tagName: {
+      get() {
+        return 'MDC-SEGMENTED-BUTTON-SEGMENT';
+      }
+    },
+    checked: {
+      get(this: IMdcSegmentedButtonSegmentElement) {
+        return CustomElement.for<MdcSegmentedButtonSegment>(this).viewModel.checked;
+      },
+      set(this: IMdcSegmentedButtonSegmentElement, value: boolean) {
+        CustomElement.for<MdcSegmentedButtonSegment>(this).viewModel.checked = value;
+      },
+      configurable: true
+    }
+  });
+}

package/src/segmented-button/mdc-segmented-button.html

@@ -0,0 +1,3 @@
+<template class="mdc-segmented-button ${single ? 'mdc-segmented-button--single-select' : ''}"
+  selected.trigger="handleSelected($event)"><au-slot></au-slot>
+</template>

package/src/segmented-button/mdc-segmented-button.ts

@@ -0,0 +1,89 @@
+import { booleanAttr, MdcComponent } from '../base';
+import { MDCSegmentedButtonAdapter, MDCSegmentedButtonFoundation, SegmentDetail } from '@material/segmented-button';
+import { events } from '@material/segmented-button/segmented-button/constants';
+import { inject, customElement, bindable, slotted, CustomElement } from 'aurelia';
+import { MdcSegmentedButtonSegment } from './mdc-segmented-button-segment/mdc-segmented-button-segment';
+import template from './mdc-segmented-button.html?raw';
+
+/**
+ * @selector mdc-segmented-button
+ */
+@inject(Element)
+@customElement({ name: 'mdc-segmented-button', template })
+export class MdcSegmentedButton extends MdcComponent<MDCSegmentedButtonFoundation> {
+
+  /** Indicates the segmented button only allows one segment to be selected at a time */
+  @bindable({ set: booleanAttr })
+  single: boolean;
+  singleChanged() {
+    this.root.setAttribute('role', this.single ? 'radiogroup' : 'group');
+  }
+
+  @slotted({ query: 'button' })
+  segmentElements!: HTMLElement[];
+
+  get segmentsList(): MdcSegmentedButtonSegment[] {
+    return this.segmentElements.map(x => CustomElement.for<MdcSegmentedButtonSegment>(x).viewModel);
+  }
+
+  initialSyncWithDOM() {
+    const isSingleSelect = this.foundation!.isSingleSelect();
+    for (let i = 0; i < this.segmentsList.length; i++) {
+      const segment = this.segmentsList[i];
+      segment.setIndex(i);
+      segment.setIsSingleSelect(isSingleSelect);
+    }
+  }
+
+  handleSelected(event: CustomEvent<SegmentDetail>) {
+    this.foundation?.handleSelected(event.detail);
+  }
+
+  getDefaultFoundation(): MDCSegmentedButtonFoundation {
+    const adapter: MDCSegmentedButtonAdapter = {
+      hasClass: (className) => {
+        return this.root.classList.contains(className);
+      },
+      getSegments: () => {
+        return this.mappedSegments();
+      },
+      selectSegment: (indexOrSegmentId) => {
+        const segmentDetail = this.mappedSegments().find(
+          (detail) => detail.index === indexOrSegmentId ||
+            detail.segmentId === indexOrSegmentId);
+        if (segmentDetail) {
+          this.segmentsList[segmentDetail.index].checked = true;
+        }
+      },
+      unselectSegment: (indexOrSegmentId) => {
+        const segmentDetail = this.mappedSegments().find(
+          (detail) => detail.index === indexOrSegmentId ||
+            detail.segmentId === indexOrSegmentId);
+        if (segmentDetail) {
+          this.segmentsList[segmentDetail.index].checked = false;
+          this.segmentsList[segmentDetail.index].notifySelectedChange('unselected', false);
+        }
+      },
+      notifySelectedChange: (detail) => {
+        this.emit<SegmentDetail>(
+          events.CHANGE, detail, true /* shouldBubble */
+        );
+      }
+    };
+    return new MDCSegmentedButtonFoundation(adapter);
+  }
+
+  /**
+   * @return Returns child segments mapped to readonly SegmentDetail list
+   */
+  private mappedSegments(): readonly SegmentDetail[] {
+    return this.segmentsList.map(
+      (segment: MdcSegmentedButtonSegment, index: number) => {
+        return {
+          index,
+          selected: segment.checked,
+          segmentId: segment.getSegmentId()
+        };
+      });
+  }
+}