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

package/dist/checkbox/mdc-checkbox.js

@@ -0,0 +1,219 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { MdcComponent, booleanAttr } from '../base';
+import { MDCCheckboxFoundation } from '@material/checkbox';
+import { getCorrectEventName } from '@material/animation/util';
+import { customElement, inject, bindable, BindingMode, CustomElement } from 'aurelia';
+import template from './mdc-checkbox.html?raw';
+let checkboxId = 0;
+/**
+ * @selector mdc-checkbox
+ * @emits change | Event dispatched on checked change.
+ */
+let MdcCheckbox = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-checkbox', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _touch_decorators;
+    let _touch_initializers = [];
+    let _touch_extraInitializers = [];
+    let _disableRipple_decorators;
+    let _disableRipple_initializers = [];
+    let _disableRipple_extraInitializers = [];
+    let _indeterminateToChecked_decorators;
+    let _indeterminateToChecked_initializers = [];
+    let _indeterminateToChecked_extraInitializers = [];
+    let _indeterminate_decorators;
+    let _indeterminate_initializers = [];
+    let _indeterminate_extraInitializers = [];
+    var MdcCheckbox = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _touch_decorators = [bindable({ set: booleanAttr })];
+            _disableRipple_decorators = [bindable({ set: booleanAttr })];
+            _indeterminateToChecked_decorators = [bindable({ set: booleanAttr })];
+            _indeterminate_decorators = [bindable({ set: booleanAttr, mode: BindingMode.twoWay })];
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _touch_decorators, { kind: "field", name: "touch", static: false, private: false, access: { has: obj => "touch" in obj, get: obj => obj.touch, set: (obj, value) => { obj.touch = value; } }, metadata: _metadata }, _touch_initializers, _touch_extraInitializers);
+            __esDecorate(null, null, _disableRipple_decorators, { kind: "field", name: "disableRipple", static: false, private: false, access: { has: obj => "disableRipple" in obj, get: obj => obj.disableRipple, set: (obj, value) => { obj.disableRipple = value; } }, metadata: _metadata }, _disableRipple_initializers, _disableRipple_extraInitializers);
+            __esDecorate(null, null, _indeterminateToChecked_decorators, { kind: "field", name: "indeterminateToChecked", static: false, private: false, access: { has: obj => "indeterminateToChecked" in obj, get: obj => obj.indeterminateToChecked, set: (obj, value) => { obj.indeterminateToChecked = value; } }, metadata: _metadata }, _indeterminateToChecked_initializers, _indeterminateToChecked_extraInitializers);
+            __esDecorate(null, null, _indeterminate_decorators, { kind: "field", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcCheckbox = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(root) {
+            super(root);
+            __runInitializers(this, _indeterminate_extraInitializers);
+            defineMdcCheckboxElementApis(this.root);
+        }
+        nativeControl_;
+        id = `mdc-checkbox-${++checkboxId}-input`;
+        /**
+         * Disables the component.
+         */
+        disabled = __runInitializers(this, _disabled_initializers, void 0);
+        disabledChanged() {
+            if (this.nativeControl_) {
+                this.nativeControl_.disabled = this.disabled;
+            }
+        }
+        /**
+         * Set the component touch target to 48 x 48 px.
+         */
+        touch = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _touch_initializers, void 0));
+        /**
+         * Whether ripple ink is disabled.
+         */
+        disableRipple = (__runInitializers(this, _touch_extraInitializers), __runInitializers(this, _disableRipple_initializers, void 0));
+        /**
+         * Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.
+         */
+        indeterminateToChecked = (__runInitializers(this, _disableRipple_extraInitializers), __runInitializers(this, _indeterminateToChecked_initializers, true));
+        initialChecked = __runInitializers(this, _indeterminateToChecked_extraInitializers);
+        get checked() {
+            if (this.nativeControl_) {
+                return this.nativeControl_.checked;
+            }
+            else {
+                return this.initialChecked ?? false;
+            }
+        }
+        /**
+         * Whether the checkbox is checked.
+         */
+        set checked(checked) {
+            if (this.nativeControl_) {
+                this.nativeControl_.checked = checked;
+            }
+            else {
+                this.initialChecked = checked;
+            }
+        }
+        /**
+         * Represent a checkbox with three states (e.g. a nested list of checkable items).
+         */
+        indeterminate = __runInitializers(this, _indeterminate_initializers, void 0);
+        indeterminateChanged() {
+            if (this.nativeControl_) {
+                this.nativeControl_.indeterminate = this.indeterminate;
+            }
+            this.foundation?.handleChange();
+        }
+        get value() {
+            return this.nativeControl_.value;
+        }
+        set value(value) {
+            this.nativeControl_.value = value;
+        }
+        attaching() {
+            this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+            if (this.root.hasAttribute('checked')) {
+                const attributeValue = this.root.getAttribute('checked');
+                if (attributeValue || attributeValue === '') {
+                    this.root.checked = true;
+                }
+            }
+            if (this.root.hasAttribute('indeterminate')) {
+                const attributeValue = this.root.getAttribute('indeterminate');
+                if (attributeValue || attributeValue === '') {
+                    this.root.indeterminate = true;
+                }
+            }
+        }
+        initialSyncWithDOM() {
+            this.disabledChanged();
+            if (this.initialChecked !== undefined) {
+                this.checked = this.initialChecked;
+            }
+        }
+        destroy() {
+            this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+        }
+        handleChange_() {
+            if (this.indeterminate) {
+                this.indeterminate = false;
+                this.checked = this.indeterminateToChecked;
+            }
+            this.foundation?.handleChange();
+        }
+        handleAnimationEnd_() {
+            this.foundation?.handleAnimationEnd();
+        }
+        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 = {
+                addClass: (className) => this.root.classList.add(className),
+                forceLayout: () => (this.root).offsetWidth,
+                hasNativeControl: () => !!this.nativeControl_,
+                isAttachedToDOM: () => Boolean(this.root.parentNode),
+                isChecked: () => this.checked,
+                isIndeterminate: () => this.indeterminate,
+                removeClass: (className) => {
+                    this.root.classList.remove(className);
+                },
+                removeNativeControlAttr: (attr) => {
+                    this.nativeControl_.removeAttribute(attr);
+                },
+                setNativeControlAttr: (attr, value) => {
+                    this.nativeControl_.setAttribute(attr, value);
+                },
+                setNativeControlDisabled: (disabled) => {
+                    this.nativeControl_.disabled = disabled;
+                },
+            };
+            return new MDCCheckboxFoundation(adapter);
+        }
+        /**
+         * Set focus to the checkbox.
+         */
+        focus() {
+            this.nativeControl_.focus();
+        }
+        /**
+         * Moves focus from the checkbox.
+         */
+        blur() {
+            this.nativeControl_.blur();
+        }
+    };
+    return MdcCheckbox = _classThis;
+})();
+export { MdcCheckbox };
+function defineMdcCheckboxElementApis(element) {
+    Object.defineProperties(element, {
+        type: {
+            value: 'checkbox',
+        },
+        checked: {
+            get() {
+                return CustomElement.for(this).viewModel.checked;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.checked = value;
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.blur();
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=mdc-checkbox.js.map

package/dist/checkbox/mdc-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-checkbox.js","sourceRoot":"","sources":["../../src/checkbox/mdc-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { MdcComponent, booleanAttr } from '../base';\nimport { MDCCheckboxFoundation, MDCCheckboxAdapter } from '@material/checkbox';\nimport { getCorrectEventName } from '@material/animation/util';\nimport { customElement, inject, bindable, BindingMode, CustomElement } from 'aurelia';\nimport template from './mdc-checkbox.html?raw';\n\nlet checkboxId = 0;\n\n/**\n * @selector mdc-checkbox\n * @emits change | Event dispatched on checked change.\n */\n@inject(Element)\n@customElement({ name: 'mdc-checkbox', template })\nexport class MdcCheckbox extends MdcComponent<MDCCheckboxFoundation> {\n  constructor(root: IMdcCheckboxElement) {\n    super(root);\n    defineMdcCheckboxElementApis(this.root);\n  }\n\n  nativeControl_: HTMLInputElement;\n\n  id = `mdc-checkbox-${++checkboxId}-input`;\n\n  /**\n   * Disables the component.\n   */\n  @bindable({ set: booleanAttr })\n  disabled: boolean;\n  disabledChanged() {\n    if (this.nativeControl_) {\n      this.nativeControl_.disabled = this.disabled;\n    }\n  }\n\n  /**\n   * Set the component touch target to 48 x 48 px.\n   */\n  @bindable({ set: booleanAttr })\n  touch: boolean;\n\n  /**\n   * Whether ripple ink is disabled.\n   */\n  @bindable({ set: booleanAttr })\n  disableRipple: boolean;\n\n  /**\n   * Whether the checkbox should go to checked state or unchecked when toggled from indeterminate state.\n   */\n  @bindable({ set: booleanAttr })\n  indeterminateToChecked: boolean = true;\n\n  initialChecked?: boolean;\n\n  get checked(): boolean {\n    if (this.nativeControl_) {\n      return this.nativeControl_.checked;\n    } else {\n      return this.initialChecked ?? false;\n    }\n  }\n\n  /**\n   * Whether the checkbox is checked.\n   */\n  set checked(checked: boolean) {\n    if (this.nativeControl_) {\n      this.nativeControl_.checked = checked;\n    } else {\n      this.initialChecked = checked;\n    }\n  }\n\n  /**\n   * Represent a checkbox with three states (e.g. a nested list of checkable items).\n   */\n  @bindable({ set: booleanAttr, mode: BindingMode.twoWay })\n  indeterminate: boolean;\n  indeterminateChanged() {\n    if (this.nativeControl_) {\n      this.nativeControl_.indeterminate = this.indeterminate;\n    }\n    this.foundation?.handleChange();\n  }\n\n  get value(): string {\n    return this.nativeControl_.value;\n  }\n\n  set value(value: string) {\n    this.nativeControl_.value = value;\n  }\n\n  attaching() {\n    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);\n\n    if (this.root.hasAttribute('checked')) {\n      const attributeValue = this.root.getAttribute('checked');\n\n      if (attributeValue || attributeValue === '') {\n        (this.root as IMdcCheckboxElement).checked = true;\n      }\n    }\n\n    if (this.root.hasAttribute('indeterminate')) {\n      const attributeValue = this.root.getAttribute('indeterminate');\n\n      if (attributeValue || attributeValue === '') {\n        (this.root as IMdcCheckboxElement).indeterminate = true;\n      }\n    }\n  }\n\n  initialSyncWithDOM() {\n    this.disabledChanged();\n    if (this.initialChecked !== undefined) {\n      this.checked = this.initialChecked;\n    }\n  }\n\n  destroy() {\n    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);\n  }\n\n  handleChange_() {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = this.indeterminateToChecked;\n    }\n    this.foundation?.handleChange();\n  }\n\n  handleAnimationEnd_() {\n    this.foundation?.handleAnimationEnd();\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCCheckboxAdapter = {\n      addClass: (className) => this.root.classList.add(className),\n      forceLayout: () => (this.root).offsetWidth,\n      hasNativeControl: () => !!this.nativeControl_,\n      isAttachedToDOM: () => Boolean(this.root.parentNode),\n      isChecked: () => this.checked,\n      isIndeterminate: () => this.indeterminate,\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      removeNativeControlAttr: (attr) => {\n        this.nativeControl_.removeAttribute(attr);\n      },\n      setNativeControlAttr: (attr, value) => {\n        this.nativeControl_.setAttribute(attr, value);\n      },\n      setNativeControlDisabled: (disabled) => {\n        this.nativeControl_.disabled = disabled;\n      },\n    };\n    return new MDCCheckboxFoundation(adapter);\n  }\n\n  /**\n   * Set focus to the checkbox.\n   */\n  focus() {\n    this.nativeControl_.focus();\n  }\n\n  /**\n   * Moves focus from the checkbox.\n   */\n  blur() {\n    this.nativeControl_.blur();\n  }\n}\n\n/** @hidden */\nexport interface IMdcCheckboxElement extends HTMLElement {\n  checked: boolean;\n  indeterminate: boolean;\n  $au: {\n    'au:resource:custom-element': {\n      viewModel: MdcCheckbox;\n    };\n  };\n}\n\nfunction defineMdcCheckboxElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    type: {\n      value: 'checkbox',\n    },\n    checked: {\n      get(this: IMdcCheckboxElement) {\n        return CustomElement.for<MdcCheckbox>(this).viewModel.checked;\n      },\n      set(this: IMdcCheckboxElement, value: boolean) {\n        CustomElement.for<MdcCheckbox>(this).viewModel.checked = value;\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IMdcCheckboxElement) {\n        CustomElement.for<MdcCheckbox>(this).viewModel.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IMdcCheckboxElement) {\n        CustomElement.for<MdcCheckbox>(this).viewModel.blur();\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/chips/mdc-chip/mdc-chip.html

@@ -0,0 +1,24 @@
+<template class="
+    mdc-evolution-chip
+    ${filter ? 'mdc-evolution-chip--selectable' : ''}
+    ${disabled ? 'mdc-evolution-chip--disabled' : ''}
+    ${icon ? 'mdc-evolution-chip--with-primary-icon' : ''}
+  " role="row" mdcchipaction:interaction.trigger="handleActionInteraction($event)"
+  mdcchipaction:navigation.trigger="handleActionNavigation($event)" animationend.trigger="handleAnimationEnd($event)"
+  transitionend.trigger="handleTransitionEnd()">
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
+    <au-slot name="primary-action">
+      <button mdc-chip-action selectable.bind="filter" disabled.bind="disabled"
+        icon.bind="icon">
+        <au-slot></au-slot>
+      </button>
+    </au-slot>
+  </span>
+
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing" role="gridcell">
+    <au-slot name="trailing-action"></au-slot>
+  </span>
+
+  <au-slot name="non-navigable-trailing-action"></au-slot>
+</template>

package/dist/chips/mdc-chip/mdc-chip.js

@@ -0,0 +1,274 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { inject, customElement, bindable } from 'aurelia';
+import { MdcComponent, booleanAttr } from '../../base';
+import { processContent, CustomElement } from '@aurelia/runtime-html';
+import { MDCChipFoundation } from '@material/chips/chip/foundation';
+import { MDCChipEvents, MDCChipActionType } from '@material/chips';
+import template from './mdc-chip.html?raw';
+MDCChipEvents.INTERACTION = MDCChipEvents.INTERACTION.toLowerCase();
+MDCChipEvents.ANIMATION = MDCChipEvents.ANIMATION.toLowerCase();
+MDCChipEvents.NAVIGATION = MDCChipEvents.NAVIGATION.toLowerCase();
+let chipId = 0;
+/**
+ * @selector mdc-chip
+ * @emits mdcchip:interaction | Indicates the chip was interacted with (via click/tap or Enter key)
+ * @emits mdcchip:removal | Indicates the chip removal event from a chip set
+ * @emits mdcchip:selection | Indicates a selection event has occurred on a chip
+ */
+let MdcChip = (() => {
+    let _classDecorators = [inject(Element), customElement({ name: 'mdc-chip', template }), processContent(function processContent(node, platform) {
+            const element = node;
+            const primaryAction = element.querySelector('[as-element="mdc-chip-action"]:not([trailing])');
+            if (primaryAction) {
+                primaryAction.setAttribute('au-slot', 'primary-action');
+                primaryAction.remove();
+            }
+            const trailingAction = element.querySelector('[as-element="mdc-chip-action"][trailing]');
+            if (trailingAction) {
+                trailingAction.setAttribute('au-slot', trailingAction.hasAttribute('non-navigable') ? 'non-navigable-trailing-action' : 'trailing-action');
+                trailingAction.remove();
+            }
+            const template = platform.document.createElement('template');
+            template.setAttribute('au-slot', '');
+            template.innerHTML = element.innerHTML;
+            element.innerHTML = '';
+            element.appendChild(template);
+            if (primaryAction) {
+                element.appendChild(primaryAction);
+            }
+            if (trailingAction) {
+                element.appendChild(trailingAction);
+            }
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _filter_decorators;
+    let _filter_initializers = [];
+    let _filter_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    var MdcChip = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _filter_decorators = [bindable({ set: booleanAttr })];
+            _icon_decorators = [bindable()];
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _filter_decorators, { kind: "field", name: "filter", static: false, private: false, access: { has: obj => "filter" in obj, get: obj => obj.filter, set: (obj, value) => { obj.filter = value; } }, metadata: _metadata }, _filter_initializers, _filter_extraInitializers);
+            __esDecorate(null, null, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcChip = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor(root) {
+            super(root);
+            defineMdcChipElementApis(this.root);
+            this.root.id = `mdc-chip-${++chipId}`;
+        }
+        _selected;
+        /**
+         * @return Whether the chip is selected.
+         */
+        get selected() {
+            return this.foundation?.isActionSelected(MDCChipActionType.PRIMARY) ?? this._selected;
+        }
+        /** Sets selected state on the chip. */
+        set selected(selected) {
+            this._selected = selected;
+            this.foundation?.setActionSelected(MDCChipActionType.PRIMARY, selected);
+        }
+        /** Marks the chip as disabled. */
+        disabled = __runInitializers(this, _disabled_initializers, void 0);
+        /** Marks the chip as a filter chip. */
+        filter = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _filter_initializers, void 0));
+        filterChanged() {
+            if (this.filter) {
+                this.root.setAttribute('role', 'presentation');
+            }
+            else {
+                this.root.setAttribute('role', 'row');
+            }
+        }
+        icon = (__runInitializers(this, _filter_extraInitializers), __runInitializers(this, _icon_initializers, void 0));
+        actions = __runInitializers(this, _icon_extraInitializers);
+        beforeFoundationCreated() {
+            this.actions = new Map();
+            const primaryAction = CustomElement.for(this.root.querySelector('.mdc-evolution-chip__action--primary')).viewModel;
+            this.actions.set(MDCChipActionType.PRIMARY, primaryAction);
+            const trailingAction = this.root.querySelector('.mdc-evolution-chip__action--trailing');
+            if (trailingAction) {
+                this.actions.set(MDCChipActionType.TRAILING, CustomElement.for(trailingAction).viewModel);
+            }
+        }
+        initialSyncWithDOM() {
+            this.filterChanged();
+            if (this._selected !== undefined) {
+                this.selected = this._selected;
+            }
+        }
+        /** Set focus to the chip. */
+        focus() {
+            this.root.focus();
+        }
+        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 = {
+                addClass: (className) => {
+                    this.root.classList.add(className);
+                },
+                emitEvent: (eventName, eventDetail) => {
+                    this.emit(eventName, eventDetail, true /* shouldBubble */);
+                },
+                getActions: () => {
+                    const actions = [];
+                    for (const [key] of this.actions) {
+                        actions.push(key);
+                    }
+                    return actions;
+                },
+                getAttribute: (attrName) => this.root.getAttribute(attrName),
+                getElementID: () => this.root.id,
+                getOffsetWidth: () => {
+                    return this.root.offsetWidth;
+                },
+                hasClass: (className) => this.root.classList.contains(className),
+                isActionSelectable: (actionType) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        return action.selectable;
+                    }
+                    return false;
+                },
+                isActionSelected: (actionType) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        return action.selected;
+                    }
+                    return false;
+                },
+                isActionFocusable: (actionType) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        return action.isFocusable();
+                    }
+                    return false;
+                },
+                isActionDisabled: (actionType) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        return action.disabled;
+                    }
+                    return false;
+                },
+                isRTL: () => window.getComputedStyle(this.root).getPropertyValue('direction') === 'rtl',
+                removeClass: (className) => {
+                    this.root.classList.remove(className);
+                },
+                setActionDisabled: (actionType, isDisabled) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        action.disabled = isDisabled;
+                    }
+                },
+                setActionFocus: (actionType, behavior) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        action.setFocus(behavior);
+                    }
+                },
+                setActionSelected: (actionType, isSelected) => {
+                    const action = this.actions.get(actionType);
+                    if (action) {
+                        if (action.selected !== isSelected) {
+                            action.selected = isSelected;
+                        }
+                    }
+                },
+                setStyleProperty: (prop, value) => {
+                    this.root.style.setProperty(prop, value);
+                },
+            };
+            // Default to the primary foundation
+            return new MDCChipFoundation(adapter);
+        }
+        handleActionInteraction(event) {
+            this.foundation?.handleActionInteraction(event);
+            this.emit('change', {}, true);
+        }
+        handleActionNavigation(event) {
+            this.foundation?.handleActionNavigation(event);
+        }
+        handleAnimationEnd(event) {
+            this.foundation?.handleAnimationEnd(event);
+        }
+        handleTransitionEnd() {
+            this.foundation?.handleTransitionEnd();
+        }
+        getActions() {
+            return this.foundation?.getActions() ?? [];
+        }
+        getElementID() {
+            return this.foundation?.getElementID() ?? '';
+        }
+        isActionFocusable(action) {
+            return this.foundation.isActionFocusable(action);
+        }
+        isActionSelectable(action) {
+            return this.foundation.isActionSelectable(action);
+        }
+        isActionSelected(action) {
+            return this.foundation.isActionSelected(action);
+        }
+        setActionFocus(action, focus) {
+            this.foundation.setActionFocus(action, focus);
+        }
+        setActionSelected(action, isSelected) {
+            this.foundation.setActionSelected(action, isSelected);
+        }
+        startAnimation(animation) {
+            this.foundation.startAnimation(animation);
+        }
+        remove() {
+            const parent = this.root.parentNode;
+            if (parent !== null) {
+                parent.removeChild(this.root);
+            }
+        }
+    };
+    return MdcChip = _classThis;
+})();
+export { MdcChip };
+function defineMdcChipElementApis(element) {
+    Object.defineProperties(element, {
+        type: {
+            value: 'checkbox',
+        },
+        checked: {
+            get() {
+                const chip = CustomElement.for(this).viewModel;
+                return chip.selected;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.selected = value;
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.focus();
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=mdc-chip.js.map

package/dist/chips/mdc-chip/mdc-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-chip.js","sourceRoot":"","sources":["../../../src/chips/mdc-chip/mdc-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { inject, customElement, INode, IPlatform, bindable } from 'aurelia';\nimport { MdcComponent, booleanAttr } from '../../base';\nimport { processContent, CustomElement } from '@aurelia/runtime-html';\nimport { MdcChipAction } from '../mdc-chip-action/mdc-chip-action';\nimport { MDCChipFoundation } from '@material/chips/chip/foundation';\nimport { MDCChipEvents, MDCChipAdapter, MDCChipActionType, MDCChipActionFocusBehavior, MDCChipAnimation } from '@material/chips';\nimport { ActionInteractionEvent, ActionNavigationEvent } from '@material/chips/chip/types';\nimport template from './mdc-chip.html?raw';\n\n(MDCChipEvents as Record<string, string>).INTERACTION = MDCChipEvents.INTERACTION.toLowerCase();\n(MDCChipEvents as Record<string, string>).ANIMATION = MDCChipEvents.ANIMATION.toLowerCase();\n(MDCChipEvents as Record<string, string>).NAVIGATION = MDCChipEvents.NAVIGATION.toLowerCase();\n\nlet chipId = 0;\n\n/**\n * @selector mdc-chip\n * @emits mdcchip:interaction | Indicates the chip was interacted with (via click/tap or Enter key)\n * @emits mdcchip:removal | Indicates the chip removal event from a chip set\n * @emits mdcchip:selection | Indicates a selection event has occurred on a chip\n */\n@inject(Element)\n@customElement({ name: 'mdc-chip', template })\n@processContent(function processContent(node: INode, platform: IPlatform) {\n  const element = node as HTMLElement;\n\n  const primaryAction = element.querySelector('[as-element=\"mdc-chip-action\"]:not([trailing])');\n  if (primaryAction) {\n    primaryAction.setAttribute('au-slot', 'primary-action');\n    primaryAction.remove();\n  }\n\n  const trailingAction = element.querySelector('[as-element=\"mdc-chip-action\"][trailing]');\n  if (trailingAction) {\n    trailingAction.setAttribute('au-slot', trailingAction.hasAttribute('non-navigable') ? 'non-navigable-trailing-action' : 'trailing-action');\n    trailingAction.remove();\n  }\n\n  const template = platform.document.createElement('template');\n  template.setAttribute('au-slot', '');\n  template.innerHTML = element.innerHTML;\n  element.innerHTML = '';\n  element.appendChild(template);\n\n  if (primaryAction) {\n    element.appendChild(primaryAction);\n  }\n  if (trailingAction) {\n    element.appendChild(trailingAction);\n  }\n}\n)\nexport class MdcChip extends MdcComponent<MDCChipFoundation> {\n  constructor(root: IMdcChipElement) {\n    super(root);\n    defineMdcChipElementApis(this.root);\n    this.root.id = `mdc-chip-${++chipId}`;\n  }\n\n  _selected: boolean;\n  /**\n   * @return Whether the chip is selected.\n   */\n  get selected(): boolean {\n    return this.foundation?.isActionSelected(MDCChipActionType.PRIMARY) ?? this._selected;\n  }\n\n  /** Sets selected state on the chip. */\n  set selected(selected: boolean) {\n    this._selected = selected;\n    this.foundation?.setActionSelected(MDCChipActionType.PRIMARY, selected);\n  }\n\n  /** Marks the chip as disabled. */\n  @bindable({ set: booleanAttr })\n  disabled: boolean;\n\n  /** Marks the chip as a filter chip. */\n  @bindable({ set: booleanAttr })\n  filter: boolean;\n  filterChanged() {\n    if (this.filter) {\n      this.root.setAttribute('role', 'presentation');\n    } else {\n      this.root.setAttribute('role', 'row');\n    }\n  }\n\n  @bindable()\n  icon: string;\n\n  actions: Map<MDCChipActionType, MdcChipAction>;\n\n  beforeFoundationCreated() {\n    this.actions = new Map();\n    const primaryAction = CustomElement.for<MdcChipAction>(this.root.querySelector('.mdc-evolution-chip__action--primary')!).viewModel;\n    this.actions.set(MDCChipActionType.PRIMARY, primaryAction);\n    const trailingAction = this.root.querySelector('.mdc-evolution-chip__action--trailing');\n    if (trailingAction) {\n      this.actions.set(MDCChipActionType.TRAILING, CustomElement.for<MdcChipAction>(trailingAction).viewModel);\n    }\n  }\n\n  initialSyncWithDOM() {\n    this.filterChanged();\n    if (this._selected !== undefined) {\n      this.selected = this._selected;\n    }\n  }\n\n  /** Set focus to the chip. */\n  focus() {\n    this.root.focus();\n  }\n\n  getDefaultFoundation() {\n    // DO NOT INLINE this variable. For backward compatibility, foundations take\n    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any\n    // methods, we need a separate, strongly typed adapter variable.\n    const adapter: MDCChipAdapter = {\n      addClass: (className) => {\n        this.root.classList.add(className);\n      },\n      emitEvent: (eventName, eventDetail) => {\n        this.emit(eventName, eventDetail, true /* shouldBubble */);\n      },\n      getActions: () => {\n        const actions: MDCChipActionType[] = [];\n        for (const [key] of this.actions) {\n          actions.push(key);\n        }\n        return actions;\n      },\n      getAttribute: (attrName) => this.root.getAttribute(attrName),\n      getElementID: () => this.root.id,\n      getOffsetWidth: () => {\n        return this.root.offsetWidth;\n      },\n      hasClass: (className) => this.root.classList.contains(className),\n      isActionSelectable: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.selectable;\n        }\n        return false;\n      },\n      isActionSelected: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.selected;\n        }\n        return false;\n      },\n      isActionFocusable: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.isFocusable();\n        }\n        return false;\n      },\n      isActionDisabled: (actionType: MDCChipActionType) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          return action.disabled;\n        }\n        return false;\n      },\n      isRTL: () => window.getComputedStyle(this.root).getPropertyValue(\n        'direction') === 'rtl',\n      removeClass: (className) => {\n        this.root.classList.remove(className);\n      },\n      setActionDisabled: (actionType: MDCChipActionType, isDisabled: boolean) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          action.disabled = isDisabled;\n        }\n      },\n      setActionFocus: (actionType: MDCChipActionType, behavior: MDCChipActionFocusBehavior) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          action.setFocus(behavior);\n        }\n      },\n      setActionSelected: (actionType: MDCChipActionType, isSelected: boolean) => {\n        const action = this.actions.get(actionType);\n        if (action) {\n          if (action.selected !== isSelected) {\n            action.selected = isSelected;\n          }\n        }\n      },\n      setStyleProperty: (prop: string, value: string) => {\n        this.root.style.setProperty(prop, value);\n      },\n    };\n\n    // Default to the primary foundation\n    return new MDCChipFoundation(adapter);\n  }\n\n  handleActionInteraction(event: ActionInteractionEvent): void {\n    this.foundation?.handleActionInteraction(event);\n    this.emit('change', {}, true);\n  }\n\n  handleActionNavigation(event: ActionNavigationEvent): void {\n    this.foundation?.handleActionNavigation(event);\n  }\n\n  handleAnimationEnd(event: AnimationEvent) {\n    this.foundation?.handleAnimationEnd(event);\n  }\n\n  handleTransitionEnd() {\n    this.foundation?.handleTransitionEnd();\n  }\n\n  getActions(): MDCChipActionType[] {\n    return this.foundation?.getActions() ?? [];\n  }\n\n  getElementID(): string {\n    return this.foundation?.getElementID() ?? '';\n  }\n\n  isActionFocusable(action: MDCChipActionType): boolean {\n    return this.foundation!.isActionFocusable(action);\n  }\n\n  isActionSelectable(action: MDCChipActionType): boolean {\n    return this.foundation!.isActionSelectable(action);\n  }\n\n  isActionSelected(action: MDCChipActionType): boolean {\n    return this.foundation!.isActionSelected(action);\n  }\n\n  setActionFocus(action: MDCChipActionType, focus: MDCChipActionFocusBehavior) {\n    this.foundation!.setActionFocus(action, focus);\n  }\n\n  setActionSelected(action: MDCChipActionType, isSelected: boolean) {\n    this.foundation!.setActionSelected(action, isSelected);\n  }\n\n  startAnimation(animation: MDCChipAnimation) {\n    this.foundation!.startAnimation(animation);\n  }\n\n  remove() {\n    const parent = this.root.parentNode;\n    if (parent !== null) {\n      parent.removeChild(this.root);\n    }\n  }\n}\n\n/** @hidden */\nexport interface IMdcChipElement extends HTMLElement {\n  $au: {\n    'au:resource:custom-element': {\n      viewModel: MdcChip;\n    };\n  };\n}\n\nfunction defineMdcChipElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    type: {\n      value: 'checkbox',\n    },\n    checked: {\n      get(this: IMdcChipElement) {\n        const chip = CustomElement.for<MdcChip>(this).viewModel;\n        return chip.selected;\n      },\n      set(this: IMdcChipElement, value: boolean) {\n        CustomElement.for<MdcChip>(this).viewModel.selected = value;\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IMdcChipElement) {\n        CustomElement.for<MdcChip>(this).viewModel.focus();\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/chips/mdc-chip-action/enhance-mdc-chip-action.js

@@ -0,0 +1,24 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { templateCompilerHooks } from 'aurelia';
+let EnhanceMdcChipAction = (() => {
+    let _classDecorators = [templateCompilerHooks];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var EnhanceMdcChipAction = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            EnhanceMdcChipAction = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        compiling(template) {
+            template.innerHTML = template.innerHTML.replaceAll('mdc-chip-action=""', 'as-element="mdc-chip-action"');
+        }
+    };
+    return EnhanceMdcChipAction = _classThis;
+})();
+export { EnhanceMdcChipAction };
+//# sourceMappingURL=enhance-mdc-chip-action.js.map

package/dist/chips/mdc-chip-action/enhance-mdc-chip-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhance-mdc-chip-action.js","sourceRoot":"","sources":["../../../src/chips/mdc-chip-action/enhance-mdc-chip-action.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;IAGnC,oBAAoB;4BADhC,qBAAqB;;;;;;;;YACtB,6KAIC;;;YAJY,uDAAoB;;QAC/B,SAAS,CAAC,QAA2C;YACnD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,oBAAoB,EAAC,8BAA8B,CAAC,CAAC;QAC1G,CAAC;;;;SAHU,oBAAoB","sourcesContent":["import { templateCompilerHooks } from 'aurelia';\n\n@templateCompilerHooks\nexport class EnhanceMdcChipAction {\n  compiling(template: HTMLElement | HTMLTemplateElement) {\n    template.innerHTML = template.innerHTML.replaceAll('mdc-chip-action=\"\"','as-element=\"mdc-chip-action\"');\n  }\n}\n"]}

package/dist/chips/mdc-chip-action/mdc-chip-action.html

@@ -0,0 +1,25 @@
+<template class="
+    mdc-evolution-chip__action
+    ${trailing ? 'mdc-evolution-chip__action--trailing' : 'mdc-evolution-chip__action--primary'}
+  " click.trigger="handleClick()" keydown.trigger="handleKeydown($event)"
+  mdc-ripple="no-class.bind: true; compute-bounding-rect.bind: computeRippleClientRect">
+  <span class="
+      mdc-evolution-chip__ripple
+      ${trailing ? 'mdc-evolution-chip__ripple--trailing' : 'mdc-evolution-chip__ripple--primary'}
+    "></span>
+  <span class="mdc-evolution-chip__icon mdc-evolution-chip__icon--trailing material-icons"
+    if.bind="trailing && icon">${icon}</span>
+  <span class="mdc-evolution-chip__graphic" if.bind="!trailing && (icon || selectable)">
+    <span if.bind="icon"
+      class="mdc-evolution-chip__icon ${trailing ? '' : 'mdc-evolution-chip__icon--primary'} material-icons">${icon}</span>
+    <span class="mdc-evolution-chip__checkmark" if.bind="selectable">
+      <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30">
+        <path class="mdc-evolution-chip__checkmark-path" fill="none" stroke="black"
+          d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+      </svg>
+    </span>
+  </span>
+  <span class="mdc-evolution-chip__text-label">
+    <au-slot></au-slot>
+  </span>
+</template>