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

package/src/text-field/enhance-mdc-text-field.ts

@@ -0,0 +1,12 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceMdcTextfield {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    if (template.innerHTML.includes('<mdc-text-field')) {
+      template.innerHTML = template.innerHTML
+        .replaceAll('<mdc-text-field ', '<label as-element="mdc-text-field" mdc-text-field-element ')
+        .replaceAll('</mdc-text-field>', '</label>');
+    }
+  }
+}

package/src/text-field/mdc-default-text-field-configuration.ts

@@ -0,0 +1,3 @@
+export class MdcDefaultTextFieldConfiguration {
+  outlined?: boolean;
+}

package/src/text-field/mdc-text-field-character-counter.ts

@@ -0,0 +1,32 @@
+import { inject, customElement } from 'aurelia';
+import { MDCTextFieldCharacterCounterFoundation, MDCTextFieldCharacterCounterAdapter, characterCountCssClasses } from '@material/textfield';
+import { MdcComponent } from '../base';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-character-counter', template: `<template class="${characterCountCssClasses.ROOT}"></template>` })
+export class MdcTextFieldCharacterCounter extends MdcComponent<MDCTextFieldCharacterCounterFoundation> {
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCTextFieldCharacterCounterFoundation {
+    return this.foundation!;
+  }
+
+  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: MDCTextFieldCharacterCounterAdapter = {
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+    };
+    return new MDCTextFieldCharacterCounterFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldCharacterCounterElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldCharacterCounter;
+    };
+  };
+}

package/src/text-field/mdc-text-field-helper-line/mdc-text-field-helper-line.html

@@ -0,0 +1,7 @@
+<template class="mdc-text-field-helper-line ${errors.length ? 'mdc-text-field-helper-line--with-errors' : ''}">
+  <au-slot></au-slot>
+  <!-- DO NOT FORMAT THIS FILE! ANY SPACE BEFORE <SLOT> BREAKS HELPER TEXT ALIGNMENT! -->
+  <!-- beautify ignore:start -->
+  <mdc-text-field-helper-text if.bind="errors.length" validation class="mdc-text-field-helper-text--errors"><span class="mdc-text-field-helper-text__error" repeat.for="e of errors">${e}<br/></span></mdc-text-field-helper-text>
+  <!-- beautify ignore:end -->
+</template>

package/src/text-field/mdc-text-field-helper-line/mdc-text-field-helper-line.ts

@@ -0,0 +1,37 @@
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-text-field-helper-line.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-helper-line', template })
+export class MdcTextFieldHelperLine {
+  constructor() {
+    this.attachedPromise = this.createAttachedPromise();
+  }
+
+  @bindable()
+  errors: string[];
+
+  attachedPromise: Promise<unknown>
+  protected attachedPromiseResolve: (value?: unknown) => void;
+
+  private async createAttachedPromise() {
+    return new Promise(r => this.attachedPromiseResolve = r);
+  }
+
+  attached() {
+    this.attachedPromiseResolve();
+  }
+
+  detached() {
+    this.attachedPromise = this.createAttachedPromise();
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldHelperLineElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldHelperLine;
+    };
+  };
+}

package/src/text-field/mdc-text-field-helper-text/mdc-text-field-helper-text.html

@@ -0,0 +1,6 @@
+<!-- DO NOT FORMAT THIS FILE! ANY SPACE BETWEEN <TEMPLATE> BREAKS HELPER TEXT ALIGNMENT! -->
+<!-- beautify ignore:start -->
+<template class="
+    ${helperTextCssClasses.ROOT} ${persistent ? helperTextCssClasses.ROOT + '--persistent' : ''}
+    ${validation ? helperTextCssClasses.ROOT + '--validation-msg' : ''}"><au-slot></au-slot></template>
+<!-- beautify ignore:end -->

package/src/text-field/mdc-text-field-helper-text/mdc-text-field-helper-text.ts

@@ -0,0 +1,47 @@
+import { MdcComponent, booleanAttr } from '../../base';
+import { MDCTextFieldHelperTextFoundation, MDCTextFieldHelperTextAdapter, helperTextCssClasses } from '@material/textfield';
+import { inject, customElement, bindable } from 'aurelia';
+import template from './mdc-text-field-helper-text.html?raw';
+
+@inject(Element)
+@customElement({ name: 'mdc-text-field-helper-text', template })
+export class MdcTextFieldHelperText extends MdcComponent<MDCTextFieldHelperTextFoundation> {
+  helperTextCssClasses = helperTextCssClasses;
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean;
+
+  @bindable({ set: booleanAttr })
+  validation: boolean;
+
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCTextFieldHelperTextFoundation {
+    return this.foundation!;
+  }
+
+  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: MDCTextFieldHelperTextAdapter = {
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      hasClass: (className) => this.root.classList.contains(className),
+      getAttr: (attr) => this.root.getAttribute(attr),
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      removeAttr: (attr) => this.root.removeAttribute(attr),
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+    };
+    return new MDCTextFieldHelperTextFoundation(adapter);
+  }
+}
+
+/** @hidden */
+export interface IMdcTextFieldHelperTextElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-element': {
+      viewModel: MdcTextFieldHelperText;
+    };
+  };
+}

package/src/text-field/mdc-text-field-icon.ts

@@ -0,0 +1,59 @@
+import { MdcComponent } from '../base';
+import { MDCTextFieldIconFoundation, MDCTextFieldIconAdapter, iconCssClasses } from '@material/textfield';
+import { inject, customAttribute } from 'aurelia';
+import { strings } from '@material/textfield/icon/constants';
+
+export const mdcIconStrings = {
+  ATTRIBUTE: 'mdc-text-field-icon',
+  LEADING: 'leading',
+  TRAILING: 'trailing'
+};
+
+strings.ICON_EVENT = strings.ICON_EVENT.toLowerCase();
+
+@inject(Element)
+@customAttribute('mdc-text-field-icon')
+export class MdcTextFieldIcon extends MdcComponent<MDCTextFieldIconFoundation> {
+  attaching() {
+    this.root.classList.add(iconCssClasses.ROOT);
+    if (this.root.hasAttribute(mdcIconStrings.LEADING)) {
+      this.root.classList.add(`${iconCssClasses.ROOT}--${mdcIconStrings.LEADING}`);
+    }
+    if (this.root.hasAttribute(mdcIconStrings.TRAILING)) {
+      this.root.classList.add(`${iconCssClasses.ROOT}--${mdcIconStrings.TRAILING}`);
+    }
+  }
+
+  // Provided for access by MDCTextField component
+  get foundationForTextField(): MDCTextFieldIconFoundation {
+    return this.foundation!;
+  }
+
+  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: MDCTextFieldIconAdapter = {
+      getAttr: (attr) => this.root.getAttribute(attr),
+      setAttr: (attr, value) => this.root.setAttribute(attr, value),
+      removeAttr: (attr) => this.root.removeAttribute(attr),
+      setContent: (content) => {
+        this.root.textContent = content;
+      },
+      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
+      notifyIconAction: () => this.emit(
+        MDCTextFieldIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),
+    };
+    return new MDCTextFieldIconFoundation(adapter);
+  }
+
+}
+
+/** @hidden */
+export interface IMdcTextFieldIconElement extends HTMLElement {
+  $au: {
+    'au:resource:custom-attribute:mdc-text-field-icon': {
+      viewModel: MdcTextFieldIcon;
+    };
+  };
+}

package/src/text-field/mdc-text-field.html

@@ -0,0 +1,29 @@
+<template class="
+    mdc-text-field
+    ${textarea ? 'mdc-text-field--textarea' : ''}
+    ${endAligned ? 'mdc-text-field--end-aligned' : ''}
+    ${ltrText ? 'mdc-text-field--ltr-text' : ''}
+    ${label ? '' : 'mdc-text-field--no-label'}
+    mdc-text-field--${outlined ? 'outlined' : 'filled'}
+    ${leadingIcon_ ? 'mdc-text-field--with-leading-icon' : ''}
+    ${trailingIcon_ ? 'mdc-text-field--with-trailing-icon' : ''}
+  " mdc-ripple="no-class.bind: true; input.bind: input_">
+  <span class="mdc-text-field__ripple"></span>
+  <au-slot name="leading-icon"></au-slot>
+  <span class="mdc-text-field__affix mdc-text-field__affix--prefix" if.bind="prefix && !textarea">${prefix}</span>
+  <mdc-notched-outline if.bind="outlined" component.ref="outline_">
+    <mdc-floating-label if.bind="label" id.bind="id" component.ref="label_">${label}</mdc-floating-label>
+  </mdc-notched-outline>
+  <input if.bind="!textarea" class="mdc-text-field__input" type="text" aria-labelledby.bind="id" ref="input_"
+    focus.trigger="onFocus()" input.trigger="onInput($event)" change.trigger="onChange($event)" blur.trigger="onBlur()"
+    placeholder.bind="placeholder" keyup.trigger="onKeyup($event)">
+  <span if.bind="textarea" class="mdc-text-field__resizer">
+    <textarea class="mdc-text-field__input" aria-labelledby.bind="id" ref="input_"
+      focus.trigger="onFocus()" input.trigger="onInput($event)" change.trigger="onChange($event)"
+      blur.trigger="onBlur()" keyup.trigger="onKeyup($event)"></textarea>
+  </span>
+  <span class="mdc-text-field__affix mdc-text-field__affix--suffix" if.bind="suffix && !textarea">${suffix}</span>
+  <au-slot name="trailing-icon"></au-slot>
+  <mdc-floating-label if.bind="label && !outlined" id.bind="id" component.ref="label_">${label}</mdc-floating-label>
+  <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple_"></mdc-line-ripple>
+</template>