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

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

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

package/src/select/mdc-select-adapter-aurelia.ts

@@ -0,0 +1,213 @@
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import {Corner} from '@material/menu-surface/constants';
+
+/**
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ * @hidden
+ */
+export interface MDCSelectAdapterAurelia {
+  /**
+   * Adds class to select anchor element.
+   */
+  addClass(className: string): void;
+
+  /**
+   * Removes a class from the select anchor element.
+   */
+  removeClass(className: string): void;
+
+  /**
+   * Returns true if the select anchor element contains the given class name.
+   */
+  hasClass(className: string): boolean;
+
+  /**
+   * Activates the bottom line, showing a focused state.
+   */
+  activateBottomLine(): void;
+
+  /**
+   * Deactivates the bottom line.
+   */
+  deactivateBottomLine(): void;
+
+  /**
+   * Returns true if label exists, false if it doesn't.
+   */
+  hasLabel(): boolean;
+
+  /**
+   * Floats label determined based off of the shouldFloat argument.
+   */
+  floatLabel(shouldFloat: boolean): void;
+
+  /**
+   * Returns width of label in pixels, if the label exists.
+   */
+  getLabelWidth(): number;
+
+  /**
+   * Styles the label as required, if the label exists.
+   */
+  setLabelRequired(isRequired: boolean): void;
+
+  /**
+   * Returns true if outline element exists, false if it doesn't.
+   */
+  hasOutline(): boolean;
+
+  /**
+   * Only implement if outline element exists.
+   */
+  notchOutline(labelWidth: number): void;
+
+  /**
+   * Closes notch in outline element, if the outline exists.
+   */
+  closeOutline(): void;
+
+  /**
+   * Sets the line ripple transform origin center.
+   */
+  setRippleCenter(normalizedX: number): void;
+
+  /**
+   * Emits a change event when an element is selected.
+   * !!! MODIFIED FOR AURELIA !!!
+   */
+  notifyChange(value: unknown): void;
+
+  /**
+   * Sets the text content of the selectedText element to the given string.
+   */
+  setSelectedText(text: string): void;
+
+  /**
+   * Returns whether the select anchor is focused.
+   */
+  isSelectAnchorFocused(): boolean;
+
+  /**
+   * Gets the given attribute on the select anchor element.
+   */
+  getSelectAnchorAttr(attr: string): string|null;
+
+  /**
+   * Sets the given attribute on the select anchor element.
+   */
+  setSelectAnchorAttr(attr: string, value: string): void;
+
+  /**
+   * Removes the given attribute on the select anchor element.
+   */
+  removeSelectAnchorAttr(attr: string): void;
+
+  // Menu-related methods ======================================================
+  /**
+   * Adds class to the menu element.
+   */
+  addMenuClass(className: string): void;
+
+  /**
+   * Removes a class from the menu element.
+   */
+  removeMenuClass(className: string): void;
+
+  /**
+   * Opens the menu.
+   */
+  openMenu(): void;
+
+  /**
+   * Closes the menu.
+   */
+  closeMenu(): void;
+
+  /**
+   * Returns the select anchor element.
+   */
+  getAnchorElement(): Element | null;
+
+  /**
+   * Sets the menu anchor element.
+   */
+  setMenuAnchorElement(anchorEl: Element): void;
+
+  /**
+   * Sets the menu anchor corner.
+   */
+  setMenuAnchorCorner(anchorCorner: Corner): void;
+
+  /**
+   * Sets whether the menu should wrap focus.
+   */
+  setMenuWrapFocus(wrapFocus: boolean): void;
+
+  /**
+   * Focuses the menu item element at the given index.
+   */
+  focusMenuItemAtIndex(index: number): void;
+
+  /**
+   * Returns the number of menu items.
+   */
+  getMenuItemCount(): number;
+
+  /**
+   * Returns an array representing the VALUE_ATTR attributes of each menu item.
+   * !!! MODIFIED FOR AURELIA !!!
+   */
+  getMenuItemValues(): unknown[];
+
+  /**
+   * Gets the text content of the menu item element at the given index.
+   */
+  getMenuItemTextAtIndex(index: number): string;
+
+  /**
+   * Returns the selected index.
+   */
+  getSelectedIndex(): number;
+
+  /**
+   * Sets the selected index in the menu.
+   */
+  setSelectedIndex(index: number): void;
+
+  /**
+   * Returns whether typeahead is in progress in the menu.
+   */
+  isTypeaheadInProgress(): boolean;
+
+  /**
+   * Adds a character to the list typeahead buffer and returns index of the
+   * next item in the list matching the buffer.
+   */
+  typeaheadMatchItem(nextChar: string, startingIndex: number): number;
+}

package/src/select/mdc-select-foundation-aurelia.ts

@@ -0,0 +1,484 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import { MDCFoundation } from '@material/base/foundation';
+import { KEY, normalizeKey } from '@material/dom/keyboard';
+import { Corner } from '@material/menu-surface/constants';
+
+import { MDCSelectAdapterAurelia } from './mdc-select-adapter-aurelia';
+import { cssClasses, numbers, strings, MDCSelectIconFoundation, MDCSelectHelperTextFoundation, MDCSelectFoundationMap } from '@material/select';
+
+// !!! MODIFIED FOR AURELIA !!!
+export class MDCSelectFoundationAurelia extends MDCFoundation<MDCSelectAdapterAurelia> {
+  static get cssClasses() {
+    return cssClasses;
+  }
+
+  static get numbers() {
+    return numbers;
+  }
+
+  static get strings() {
+    return strings;
+  }
+
+  /**
+   * See {@link MDCSelectAdapter} for typing information on parameters and return types.
+   */
+  static get defaultAdapter(): MDCSelectAdapterAurelia {
+    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+    return {
+      addClass: () => undefined,
+      removeClass: () => undefined,
+      hasClass: () => false,
+      activateBottomLine: () => undefined,
+      deactivateBottomLine: () => undefined,
+      getSelectedIndex: () => -1,
+      setSelectedIndex: () => undefined,
+      hasLabel: () => false,
+      floatLabel: () => undefined,
+      getLabelWidth: () => 0,
+      setLabelRequired: () => undefined,
+      hasOutline: () => false,
+      notchOutline: () => undefined,
+      closeOutline: () => undefined,
+      setRippleCenter: () => undefined,
+      notifyChange: () => undefined,
+      setSelectedText: () => undefined,
+      isSelectAnchorFocused: () => false,
+      getSelectAnchorAttr: () => '',
+      setSelectAnchorAttr: () => undefined,
+      removeSelectAnchorAttr: () => undefined,
+      addMenuClass: () => undefined,
+      removeMenuClass: () => undefined,
+      openMenu: () => undefined,
+      closeMenu: () => undefined,
+      getAnchorElement: () => null,
+      setMenuAnchorElement: () => undefined,
+      setMenuAnchorCorner: () => undefined,
+      setMenuWrapFocus: () => undefined,
+      focusMenuItemAtIndex: () => undefined,
+      getMenuItemCount: () => 0,
+      getMenuItemValues: () => [],
+      getMenuItemTextAtIndex: () => '',
+      isTypeaheadInProgress: () => false,
+      typeaheadMatchItem: () => -1,
+    };
+    // tslint:enable:object-literal-sort-keys
+  }
+
+  private readonly leadingIcon: MDCSelectIconFoundation | undefined;
+  private readonly helperText: MDCSelectHelperTextFoundation | undefined;
+
+  // Disabled state
+  private disabled = false;
+  // isMenuOpen is used to track the state of the menu by listening to the
+  // MDCMenuSurface:closed event For reference, menu.open will return false if
+  // the menu is still closing, but isMenuOpen returns false only after the menu
+  // has closed
+  private isMenuOpen = false;
+  // By default, select is invalid if it is required but no value is selected.
+  private useDefaultValidation = true;
+  private customValidity = true;
+  private lastSelectedIndex = numbers.UNSET_INDEX;
+
+  /* istanbul ignore next: optional argument is not a branch statement */
+  /**
+   * @param adapter
+   * @param foundationMap Map from subcomponent names to their subfoundations.
+   */
+  constructor(adapter?: Partial<MDCSelectAdapterAurelia>, foundationMap: Partial<MDCSelectFoundationMap> = {}) {
+    super({ ...MDCSelectFoundationAurelia.defaultAdapter, ...adapter });
+
+    this.leadingIcon = foundationMap.leadingIcon;
+    this.helperText = foundationMap.helperText;
+  }
+
+  /** Returns the index of the currently selected menu item, or -1 if none. */
+  getSelectedIndex(): number {
+    return this.adapter.getSelectedIndex();
+  }
+
+  setSelectedIndex(index: number, closeMenu = false, skipNotify = false) {
+    if (index >= this.adapter.getMenuItemCount()) {
+      return;
+    }
+
+    // !!! MODIFIED FOR AURELIA TO SUPPORT TEXT IN "EMPTY" ITEMS !!!
+    const menuItemValues = this.adapter.getMenuItemValues();
+    if (index === numbers.UNSET_INDEX || menuItemValues[index] === undefined || menuItemValues[index] === null) {
+      this.adapter.setSelectedText('');
+    } else {
+      this.adapter.setSelectedText(
+        this.adapter.getMenuItemTextAtIndex(index).trim());
+    }
+
+    this.adapter.setSelectedIndex(index);
+
+    if (closeMenu) {
+      this.adapter.closeMenu();
+    }
+
+    if (!skipNotify && this.lastSelectedIndex !== index) {
+      this.handleChange();
+    }
+    this.lastSelectedIndex = index;
+  }
+
+  // !!! MODIFIED FOR AURELIA !!!
+  setValue(value: unknown, skipNotify = false) {
+    const index = this.adapter.getMenuItemValues().indexOf(value);
+    this.setSelectedIndex(index, /** closeMenu */ false, skipNotify);
+  }
+
+  // !!! MODIFIED FOR AURELIA !!!
+  getValue() {
+    const index = this.adapter.getSelectedIndex();
+    const menuItemValues = this.adapter.getMenuItemValues();
+    return index !== numbers.UNSET_INDEX ? menuItemValues[index] : undefined;
+  }
+
+  getDisabled() {
+    return this.disabled;
+  }
+
+  setDisabled(isDisabled: boolean) {
+    this.disabled = isDisabled;
+    if (this.disabled) {
+      this.adapter.addClass(cssClasses.DISABLED);
+      this.adapter.closeMenu();
+    } else {
+      this.adapter.removeClass(cssClasses.DISABLED);
+    }
+
+    if (this.leadingIcon) {
+      this.leadingIcon.setDisabled(this.disabled);
+    }
+
+    if (this.disabled) {
+      // Prevent click events from focusing select. Simply pointer-events: none
+      // is not enough since screenreader clicks may bypass this.
+      this.adapter.removeSelectAnchorAttr('tabindex');
+    } else {
+      this.adapter.setSelectAnchorAttr('tabindex', '0');
+    }
+
+    this.adapter.setSelectAnchorAttr('aria-disabled', this.disabled.toString());
+  }
+
+  /** Opens the menu. */
+  openMenu() {
+    this.adapter.addClass(cssClasses.ACTIVATED);
+    this.adapter.openMenu();
+    this.isMenuOpen = true;
+    this.adapter.setSelectAnchorAttr('aria-expanded', 'true');
+  }
+
+  /**
+   * @param content Sets the content of the helper text.
+   */
+  setHelperTextContent(content: string) {
+    if (this.helperText) {
+      this.helperText.setContent(content);
+    }
+  }
+
+  /**
+   * Re-calculates if the notched outline should be notched and if the label
+   * should float.
+   */
+  layout() {
+    if (this.adapter.hasLabel()) {
+      const optionHasValue = this.getValue() !== undefined; // !!! MODIFIED FOR AURELIA !!!
+      const isFocused = this.adapter.hasClass(cssClasses.FOCUSED);
+      const shouldFloatAndNotch = optionHasValue || isFocused;
+      const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);
+
+      this.notchOutline(shouldFloatAndNotch);
+      this.adapter.floatLabel(shouldFloatAndNotch);
+      this.adapter.setLabelRequired(isRequired);
+    }
+  }
+
+  /**
+   * Synchronizes the list of options with the state of the foundation. Call
+   * this whenever menu options are dynamically updated.
+   */
+  layoutOptions() {
+    const menuItemValues = this.adapter.getMenuItemValues();
+    const selectedIndex = menuItemValues.indexOf(this.getValue());
+    this.setSelectedIndex(
+      selectedIndex, /** closeMenu */ false, /** skipNotify */ true);
+  }
+
+  handleMenuOpened() {
+    if (this.adapter.getMenuItemValues().length === 0) {
+      return;
+    }
+
+    // Menu should open to the last selected element, should open to first menu item otherwise.
+    const selectedIndex = this.getSelectedIndex();
+    const focusItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    this.adapter.focusMenuItemAtIndex(focusItemIndex);
+  }
+
+  handleMenuClosed() {
+    this.adapter.removeClass(cssClasses.ACTIVATED);
+    this.isMenuOpen = false;
+    this.adapter.setSelectAnchorAttr('aria-expanded', 'false');
+
+    // Unfocus the select if menu is closed without a selection
+    if (!this.adapter.isSelectAnchorFocused()) {
+      this.blur();
+    }
+  }
+
+  /**
+   * Handles value changes, via change event or programmatic updates.
+   */
+  handleChange() {
+    this.layout();
+    this.adapter.notifyChange(this.getValue());
+
+    const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);
+    if (isRequired && this.useDefaultValidation) {
+      this.setValid(this.isValid());
+    }
+  }
+
+  handleMenuItemAction(index: number) {
+    this.setSelectedIndex(index, /** closeMenu */ true);
+  }
+
+  /**
+   * Handles focus events from select element.
+   */
+  handleFocus() {
+    this.adapter.addClass(cssClasses.FOCUSED);
+    this.layout();
+
+    this.adapter.activateBottomLine();
+  }
+
+  /**
+   * Handles blur events from select element.
+   */
+  handleBlur() {
+    if (this.isMenuOpen) {
+      return;
+    }
+    this.blur();
+  }
+
+  handleClick(normalizedX: number) {
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.isMenuOpen) {
+      this.adapter.closeMenu();
+      return;
+    }
+
+    this.adapter.setRippleCenter(normalizedX);
+
+    this.openMenu();
+  }
+
+  /**
+   * Handles keydown events on select element. Depending on the type of
+   * character typed, does typeahead matching or opens menu.
+   */
+  handleKeydown(event: KeyboardEvent) {
+    if (this.isMenuOpen || !this.adapter.hasClass(cssClasses.FOCUSED)) {
+      return;
+    }
+
+    const isEnter = normalizeKey(event) === KEY.ENTER;
+    const isSpace = normalizeKey(event) === KEY.SPACEBAR;
+    const arrowUp = normalizeKey(event) === KEY.ARROW_UP;
+    const arrowDown = normalizeKey(event) === KEY.ARROW_DOWN;
+
+    // Typeahead
+    if (!isSpace && event.key && event.key.length === 1 ||
+      isSpace && this.adapter.isTypeaheadInProgress()) {
+      const key = isSpace ? ' ' : event.key;
+      const typeaheadNextIndex =
+        this.adapter.typeaheadMatchItem(key, this.getSelectedIndex());
+      if (typeaheadNextIndex >= 0) {
+        this.setSelectedIndex(typeaheadNextIndex);
+      }
+      event.preventDefault();
+      return;
+    }
+
+    if (!isEnter && !isSpace && !arrowUp && !arrowDown) {
+      return;
+    }
+
+    // Increment/decrement index as necessary and open menu.
+    if (arrowUp && this.getSelectedIndex() > 0) {
+      this.setSelectedIndex(this.getSelectedIndex() - 1);
+    } else if (
+      arrowDown &&
+      this.getSelectedIndex() < this.adapter.getMenuItemCount() - 1) {
+      this.setSelectedIndex(this.getSelectedIndex() + 1);
+    }
+
+    this.openMenu();
+    event.preventDefault();
+  }
+
+  /**
+   * Opens/closes the notched outline.
+   */
+  notchOutline(openNotch: boolean) {
+    if (!this.adapter.hasOutline()) {
+      return;
+    }
+    const isFocused = this.adapter.hasClass(cssClasses.FOCUSED);
+
+    if (openNotch) {
+      const labelScale = numbers.LABEL_SCALE;
+      const labelWidth = this.adapter.getLabelWidth() * labelScale;
+      this.adapter.notchOutline(labelWidth);
+    } else if (!isFocused) {
+      this.adapter.closeOutline();
+    }
+  }
+
+  /**
+   * Sets the aria label of the leading icon.
+   */
+  setLeadingIconAriaLabel(label: string) {
+    if (this.leadingIcon) {
+      this.leadingIcon.setAriaLabel(label);
+    }
+  }
+
+  /**
+   * Sets the text content of the leading icon.
+   */
+  setLeadingIconContent(content: string) {
+    if (this.leadingIcon) {
+      this.leadingIcon.setContent(content);
+    }
+  }
+
+  setUseDefaultValidation(useDefaultValidation: boolean) {
+    this.useDefaultValidation = useDefaultValidation;
+  }
+
+  setValid(isValid: boolean) {
+    if (!this.useDefaultValidation) {
+      this.customValidity = isValid;
+    }
+
+    this.adapter.setSelectAnchorAttr('aria-invalid', (!isValid).toString());
+    if (isValid) {
+      this.adapter.removeClass(cssClasses.INVALID);
+      this.adapter.removeMenuClass(cssClasses.MENU_INVALID);
+    } else {
+      this.adapter.addClass(cssClasses.INVALID);
+      this.adapter.addMenuClass(cssClasses.MENU_INVALID);
+    }
+
+    this.syncHelperTextValidity(isValid);
+  }
+
+  isValid() {
+    if (this.useDefaultValidation &&
+      this.adapter.hasClass(cssClasses.REQUIRED) &&
+      !this.adapter.hasClass(cssClasses.DISABLED)) {
+      // See notes for required attribute under https://www.w3.org/TR/html52/sec-forms.html#the-select-element
+      // TL;DR: Invalid if no index is selected, or if the first index is selected and has an empty value.
+      return this.getSelectedIndex() !== numbers.UNSET_INDEX &&
+        (this.getSelectedIndex() !== 0 || Boolean(this.getValue()));
+    }
+    return this.customValidity;
+  }
+
+  setRequired(isRequired: boolean) {
+    if (isRequired) {
+      this.adapter.addClass(cssClasses.REQUIRED);
+    } else {
+      this.adapter.removeClass(cssClasses.REQUIRED);
+    }
+    this.adapter.setSelectAnchorAttr('aria-required', isRequired.toString());
+    this.adapter.setLabelRequired(isRequired);
+  }
+
+  getRequired() {
+    return this.adapter.getSelectAnchorAttr('aria-required') === 'true';
+  }
+
+  init() {
+    const anchorEl = this.adapter.getAnchorElement();
+    if (anchorEl) {
+      this.adapter.setMenuAnchorElement(anchorEl);
+      this.adapter.setMenuAnchorCorner(Corner.BOTTOM_START);
+    }
+    this.adapter.setMenuWrapFocus(false);
+
+    this.setDisabled(this.adapter.hasClass(cssClasses.DISABLED));
+    this.syncHelperTextValidity(!this.adapter.hasClass(cssClasses.INVALID));
+    this.layout();
+    this.layoutOptions();
+  }
+
+  /**
+   * Unfocuses the select component.
+   */
+  private blur() {
+    this.adapter.removeClass(cssClasses.FOCUSED);
+    this.layout();
+    this.adapter.deactivateBottomLine();
+
+    const isRequired = this.adapter.hasClass(cssClasses.REQUIRED);
+    if (isRequired && this.useDefaultValidation) {
+      this.setValid(this.isValid());
+    }
+  }
+
+  private syncHelperTextValidity(isValid: boolean) {
+    if (!this.helperText) {
+      return;
+    }
+
+    this.helperText.setValidity(isValid);
+
+    const helperTextVisible = this.helperText.isVisible();
+    const helperTextId = this.helperText.getId();
+
+    if (helperTextVisible && helperTextId) {
+      this.adapter.setSelectAnchorAttr(strings.ARIA_DESCRIBEDBY, helperTextId);
+    } else {
+      // Needed because screenreaders will read labels pointed to by
+      // `aria-describedby` even if they are `aria-hidden`.
+      this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);
+    }
+  }
+}
+
+// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
+export default MDCSelectFoundationAurelia;

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

@@ -0,0 +1,7 @@
+<!-- DO NOT FORMAT THIS FILE! ANY SPACE BEFORE <SLOT> OR <SPAN> BREAKS HELPER TEXT ALIGNMENT! -->
+<!-- beautify ignore:start -->
+<template class="
+    ${ROOT} ${persistent ? helperTextCssClasses.HELPER_TEXT_VALIDATION_MSG_PERSISTENT : ''}
+    ${validation ? helperTextCssClasses.HELPER_TEXT_VALIDATION_MSG : ''}"><au-slot></au-slot><span class="mdc-select-helper-text__error" repeat.for="e of errors">${e}<br/></span>
+</template>
+<!-- beautify ignore:end -->