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

package/dist/select/mdc-select.js

@@ -0,0 +1,461 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { MdcComponent, booleanAttr } from '../base';
+import { cssClasses, strings } from '@material/select';
+import { inject, customElement, IPlatform, bindable } from 'aurelia';
+import { mdcIconStrings } from './mdc-select-icon';
+import { mdcHelperTextCssClasses } from './mdc-select-helper-text/mdc-select-helper-text';
+import { MDCSelectFoundationAurelia } from './mdc-select-foundation-aurelia';
+import { processContent, BindingMode, CustomElement, CustomAttribute } from '@aurelia/runtime-html';
+import { MdcDefaultSelectConfiguration } from './mdc-default-select-configuration';
+import template from './mdc-select.html?raw';
+strings.CHANGE_EVENT = strings.CHANGE_EVENT.toLowerCase();
+let selectId = 0;
+/**
+ * @selector mdc-select
+ * @emits mdcselect:change | Emitted if user changed the value
+ */
+let MdcSelect = (() => {
+    let _classDecorators = [inject(Element, IPlatform, MdcDefaultSelectConfiguration), customElement({ name: 'mdc-select', template }), processContent(function processContent(node, platform) {
+            const el = node;
+            const leadingIcon = el.querySelector(`[${mdcIconStrings.ATTRIBUTE}]`);
+            leadingIcon?.remove();
+            const template = platform.document.createElement('template');
+            template.setAttribute('au-slot', '');
+            template.innerHTML = el.innerHTML;
+            el.innerHTML = '';
+            el.appendChild(template);
+            // move icon to the slot - this allows omitting slot specification
+            if (leadingIcon) {
+                const div = platform.document.createElement('div');
+                div.appendChild(leadingIcon);
+                const iconTemplate = platform.document.createElement('template');
+                iconTemplate.setAttribute('au-slot', 'leading-icon');
+                iconTemplate.innerHTML = div.innerHTML;
+                el.appendChild(iconTemplate);
+            }
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = MdcComponent;
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _outlined_decorators;
+    let _outlined_initializers = [];
+    let _outlined_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _hoistToBody_decorators;
+    let _hoistToBody_initializers = [];
+    let _hoistToBody_extraInitializers = [];
+    let _fixed_decorators;
+    let _fixed_initializers = [];
+    let _fixed_extraInitializers = [];
+    let _anchorMargin_decorators;
+    let _anchorMargin_initializers = [];
+    let _anchorMargin_extraInitializers = [];
+    let _naturalWidth_decorators;
+    let _naturalWidth_initializers = [];
+    let _naturalWidth_extraInitializers = [];
+    var MdcSelect = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _label_decorators = [bindable()];
+            _outlined_decorators = [bindable({ set: booleanAttr })];
+            _required_decorators = [bindable({ set: booleanAttr })];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _hoistToBody_decorators = [bindable({ set: booleanAttr, mode: BindingMode.oneTime })];
+            _fixed_decorators = [bindable({ set: booleanAttr, mode: BindingMode.oneTime })];
+            _anchorMargin_decorators = [bindable()];
+            _naturalWidth_decorators = [bindable({ set: booleanAttr })];
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _outlined_decorators, { kind: "field", name: "outlined", static: false, private: false, access: { has: obj => "outlined" in obj, get: obj => obj.outlined, set: (obj, value) => { obj.outlined = value; } }, metadata: _metadata }, _outlined_initializers, _outlined_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __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, _hoistToBody_decorators, { kind: "field", name: "hoistToBody", static: false, private: false, access: { has: obj => "hoistToBody" in obj, get: obj => obj.hoistToBody, set: (obj, value) => { obj.hoistToBody = value; } }, metadata: _metadata }, _hoistToBody_initializers, _hoistToBody_extraInitializers);
+            __esDecorate(null, null, _fixed_decorators, { kind: "field", name: "fixed", static: false, private: false, access: { has: obj => "fixed" in obj, get: obj => obj.fixed, set: (obj, value) => { obj.fixed = value; } }, metadata: _metadata }, _fixed_initializers, _fixed_extraInitializers);
+            __esDecorate(null, null, _anchorMargin_decorators, { kind: "field", name: "anchorMargin", static: false, private: false, access: { has: obj => "anchorMargin" in obj, get: obj => obj.anchorMargin, set: (obj, value) => { obj.anchorMargin = value; } }, metadata: _metadata }, _anchorMargin_initializers, _anchorMargin_extraInitializers);
+            __esDecorate(null, null, _naturalWidth_decorators, { kind: "field", name: "naturalWidth", static: false, private: false, access: { has: obj => "naturalWidth" in obj, get: obj => obj.naturalWidth, set: (obj, value) => { obj.naturalWidth = value; } }, metadata: _metadata }, _naturalWidth_initializers, _naturalWidth_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MdcSelect = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        platform;
+        defaultConfiguration;
+        constructor(root, platform, defaultConfiguration) {
+            super(root);
+            this.platform = platform;
+            this.defaultConfiguration = defaultConfiguration;
+            this.outlined = this.defaultConfiguration.outlined;
+            defineMdcSelectElementApis(this.root);
+            this.root.id = this.id;
+        }
+        id = `mdc-select-${++selectId}`;
+        menu;
+        selectAnchor;
+        selectedText;
+        menuElement;
+        get items() {
+            return this.menu.list_?.items;
+        }
+        leadingIcon;
+        helperText;
+        lineRipple;
+        mdcLabel;
+        outline;
+        errors = new Map();
+        /** Sets the select label */
+        label = __runInitializers(this, _label_initializers, void 0);
+        labelChanged() {
+            this.platform.domQueue.queueTask(() => this.foundation?.layout());
+        }
+        /** Styles the select as an outlined select */
+        outlined = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _outlined_initializers, void 0));
+        outlinedChanged() {
+            this.platform.domQueue.queueTask(() => this.foundation?.layout());
+        }
+        /** Makes the value required */
+        required = (__runInitializers(this, _outlined_extraInitializers), __runInitializers(this, _required_initializers, void 0));
+        requiredChanged() {
+            if (this.required) {
+                this.selectAnchor?.setAttribute('aria-required', 'true');
+            }
+            else {
+                this.selectAnchor?.removeAttribute('aria-required');
+            }
+            this.foundation?.setRequired(this.required ?? false);
+            this.platform.domWriteQueue.queueTask(() => this.foundation?.layout());
+        }
+        /** Enables/disables the select */
+        disabled = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _disabled_initializers, void 0));
+        disabledChanged() {
+            if (this.disabled !== undefined) {
+                this.foundation?.setDisabled(this.disabled);
+            }
+        }
+        /** Hoists the select DOM to document.body */
+        hoistToBody = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _hoistToBody_initializers, void 0));
+        /** Sets the select DOM position to fixed */
+        fixed = (__runInitializers(this, _hoistToBody_extraInitializers), __runInitializers(this, _fixed_initializers, void 0));
+        /** Sets the margin between the select input and the dropdown */
+        anchorMargin = (__runInitializers(this, _fixed_extraInitializers), __runInitializers(this, _anchorMargin_initializers, void 0));
+        /** Sets the select dropdown width to match content */
+        naturalWidth = (__runInitializers(this, _anchorMargin_extraInitializers), __runInitializers(this, _naturalWidth_initializers, void 0));
+        _value = __runInitializers(this, _naturalWidth_extraInitializers);
+        get value() {
+            if (this.foundation) {
+                return this.foundation.getValue();
+            }
+            else {
+                return this._value;
+            }
+        }
+        set value(value) {
+            this.setValue(value);
+        }
+        setValue(value, skipNotify = false) {
+            this._value = value;
+            if (this.foundation) {
+                this.foundation.setValue(value, skipNotify);
+                this.foundation.layout();
+            }
+        }
+        get valid() {
+            return this.foundation?.isValid() ?? true;
+        }
+        set valid(value) {
+            this.foundation?.setValid(value);
+        }
+        get selectedIndex() {
+            return this.foundation.getSelectedIndex();
+        }
+        set selectedIndex(selectedIndex) {
+            this.foundation?.setSelectedIndex(selectedIndex, /** closeMenu */ true);
+        }
+        addError(error) {
+            this.errors.set(error, true);
+            this.valid = false;
+        }
+        removeError(error) {
+            this.errors.delete(error);
+            this.valid = this.errors.size === 0;
+        }
+        renderErrors() {
+            if (this.helperText) {
+                this.helperText.errors = Array.from(this.errors.keys()).filter(x => x.message !== null).map(x => x.message);
+            }
+        }
+        async attaching() {
+            const nextSibling = this.root.nextElementSibling;
+            if (nextSibling?.tagName === mdcHelperTextCssClasses.ROOT.toUpperCase()) {
+                this.helperText = CustomElement.for(nextSibling).viewModel;
+                await this.helperText.initialised;
+            }
+        }
+        beforeFoundationCreated() {
+            const leadingIconEl = this.root.querySelector(`${strings.LEADING_ICON_SELECTOR}`);
+            if (leadingIconEl) {
+                this.leadingIcon = CustomAttribute.for(leadingIconEl, mdcIconStrings.ATTRIBUTE)?.viewModel;
+            }
+            this.menu.list_.singleSelection = true;
+        }
+        initialSyncWithDOM() {
+            // set initial value without emitting change events
+            this.foundation?.setValue(this._value, true);
+            this.foundation?.layout();
+            this.errors = new Map();
+            this.valid = true;
+            this.labelChanged();
+            this.disabledChanged();
+            this.outlinedChanged();
+            this.requiredChanged();
+        }
+        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 = {
+                ...this.getSelectAdapterMethods(),
+                ...this.getCommonAdapterMethods(),
+                ...this.getOutlineAdapterMethods(),
+                ...this.getLabelAdapterMethods(),
+            };
+            return new MDCSelectFoundationAurelia(adapter, this.getFoundationMap());
+        }
+        getSelectAdapterMethods() {
+            return {
+                setSelectedText: (text) => {
+                    this.selectedText.textContent = text;
+                },
+                isSelectAnchorFocused: () => document.activeElement === this.selectAnchor,
+                getSelectAnchorAttr: (attr) => this.selectAnchor.getAttribute(attr),
+                setSelectAnchorAttr: (attr, value) => {
+                    this.selectAnchor.setAttribute(attr, value);
+                },
+                removeSelectAnchorAttr: (attr) => {
+                    this.selectAnchor.removeAttribute(attr);
+                },
+                addMenuClass: (className) => {
+                    this.menuElement?.classList.add(className);
+                },
+                removeMenuClass: (className) => {
+                    this.menuElement?.classList.remove(className);
+                },
+                openMenu: () => {
+                    this.menu.open = true;
+                    this.menu.root.style.minWidth = this.menu.root.style.maxWidth = (this.hoistToBody || this.fixed) && !this.naturalWidth
+                        ? `${this.root.clientWidth}px`
+                        : '';
+                },
+                closeMenu: () => { this.menu.open = false; },
+                getAnchorElement: () => this.root.querySelector(strings.SELECT_ANCHOR_SELECTOR),
+                setMenuAnchorElement: (anchorEl) => {
+                    this.menu.anchor = anchorEl;
+                },
+                setMenuAnchorCorner: (anchorCorner) => {
+                    this.menu.setAnchorCorner(anchorCorner);
+                },
+                setMenuWrapFocus: (wrapFocus) => {
+                    this.menu.wrapFocus = wrapFocus;
+                },
+                getSelectedIndex: () => {
+                    const index = this.menu.selectedIndex;
+                    return index instanceof Array ? index[0] : index;
+                },
+                setSelectedIndex: (index) => {
+                    this.menu.selectedIndex = index;
+                },
+                removeAttributeAtIndex: (index, attributeName) => {
+                    this.menu.items[index].removeAttribute(attributeName);
+                },
+                focusMenuItemAtIndex: (index) => {
+                    this.menu.items[index].focus();
+                },
+                getMenuItemCount: () => this.menu.items.length,
+                getMenuItemValues: () => this.menu.items.map(x => CustomElement.for(x).viewModel.value),
+                getMenuItemTextAtIndex: (index) => this.menu.getPrimaryTextAtIndex(index),
+                isTypeaheadInProgress: () => this.menu.typeaheadInProgress,
+                typeaheadMatchItem: (nextChar, startingIndex) => this.menu.typeaheadMatchItem(nextChar, startingIndex),
+            };
+        }
+        getCommonAdapterMethods() {
+            return {
+                addClass: (className) => {
+                    this.root.classList.add(className);
+                },
+                removeClass: (className) => {
+                    this.root.classList.remove(className);
+                },
+                hasClass: (className) => this.root.classList.contains(className),
+                setRippleCenter: (normalizedX) => this.lineRipple?.setRippleCenter(normalizedX),
+                activateBottomLine: () => this.lineRipple?.activate(),
+                deactivateBottomLine: () => this.lineRipple?.deactivate(),
+                notifyChange: (value) => {
+                    const index = this.selectedIndex;
+                    this.emit(strings.CHANGE_EVENT, { value, index }, true /* shouldBubble  */);
+                    this.emit('change', { value, index }, true /* shouldBubble  */);
+                },
+            };
+        }
+        getOutlineAdapterMethods() {
+            return {
+                hasOutline: () => Boolean(this.outline),
+                notchOutline: (labelWidth) => this.outline?.notch(labelWidth),
+                closeOutline: () => this.outline?.closeNotch(),
+            };
+        }
+        getLabelAdapterMethods() {
+            return {
+                hasLabel: () => !!this.mdcLabel,
+                floatLabel: (shouldFloat) => this.mdcLabel?.float(shouldFloat),
+                getLabelWidth: () => this.mdcLabel ? this.mdcLabel.getWidth() : 0,
+                setLabelRequired: (isRequired) => this.mdcLabel?.setRequired(isRequired),
+            };
+        }
+        handleChange() {
+            this.foundation?.handleChange();
+            this.emit('change', {}, true);
+        }
+        handleFocus() {
+            this.foundation?.handleFocus();
+        }
+        handleBlur() {
+            this.foundation?.handleBlur();
+            // if class is set it means the menu is open,
+            // do not emit blur since "conceptually" the element is still active
+            if (!this.root.classList.contains(cssClasses.FOCUSED)) {
+                this.emit('blur', {}, true);
+            }
+        }
+        handleClick(evt) {
+            this.selectAnchor.focus();
+            this.foundation?.handleClick(this.getNormalizedXCoordinate(evt));
+        }
+        handleKeydown(evt) {
+            this.foundation?.handleKeydown(evt);
+            return true;
+        }
+        handleMenuItemAction(evt) {
+            this.foundation?.handleMenuItemAction(evt.detail.index);
+        }
+        handleMenuOpened() {
+            this.foundation?.handleMenuOpened();
+        }
+        handleMenuClosed() {
+            this.foundation?.handleMenuClosed();
+            if (!this.root.classList.contains(cssClasses.FOCUSED)) {
+                this.emit('blur', {}, true);
+            }
+        }
+        handleItemsChanged() {
+            this.foundation?.layoutOptions();
+            this.foundation?.layout();
+        }
+        focus() {
+            this.selectAnchor.focus();
+        }
+        blur() {
+            this.selectAnchor.blur();
+        }
+        /**
+         * @hidden
+         * Calculates where the line ripple should start based on the x coordinate within the component.
+         */
+        getNormalizedXCoordinate(evt) {
+            const targetClientRect = evt.target.getBoundingClientRect();
+            const xCoordinate = this.isTouchEvent(evt) ? evt.touches[0].clientX : evt.clientX;
+            return xCoordinate - targetClientRect.left;
+        }
+        isTouchEvent(evt) {
+            return Boolean(evt.touches);
+        }
+        /**
+         * @hidden
+         * Returns a map of all subcomponents to subfoundations.
+         */
+        getFoundationMap() {
+            return {
+                helperText: this.helperText?.foundation,
+                leadingIcon: this.leadingIcon?.foundation
+            };
+        }
+    };
+    return MdcSelect = _classThis;
+})();
+export { MdcSelect };
+function defineMdcSelectElementApis(element) {
+    Object.defineProperties(element, {
+        value: {
+            get() {
+                return CustomElement.for(this).viewModel.value;
+            },
+            set(value) {
+                // aurelia binding converts "undefined" and "null" into empty string
+                // this does not translate well into "empty" menu items when several selects are bound to the same field
+                CustomElement.for(this).viewModel.value = value === '' ? undefined : value;
+            },
+            configurable: true
+        },
+        options: {
+            get() {
+                return CustomElement.for(this).viewModel.root.querySelectorAll('.mdc-list-item');
+            },
+            configurable: true
+        },
+        selectedIndex: {
+            get() {
+                return CustomElement.for(this).viewModel.selectedIndex;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.selectedIndex = value;
+            },
+            configurable: true
+        },
+        valid: {
+            get() {
+                return CustomElement.for(this).viewModel.valid;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.valid = value;
+            },
+            configurable: true
+        },
+        addError: {
+            value(error) {
+                CustomElement.for(this).viewModel.addError(error);
+            },
+            configurable: true
+        },
+        removeError: {
+            value(error) {
+                CustomElement.for(this).viewModel.removeError(error);
+            },
+            configurable: true
+        },
+        renderErrors: {
+            value() {
+                CustomElement.for(this).viewModel.renderErrors();
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.blur();
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=mdc-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-select.js","sourceRoot":"","sources":["../../src/select/mdc-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { MdcComponent, IValidatedElement, IError, booleanAttr } from '../base';\nimport { cssClasses, MDCSelectFoundationMap, MDCSelectEventDetail, strings } from '@material/select';\nimport { inject, customElement, INode, IPlatform, bindable } from 'aurelia';\nimport { MdcSelectIcon, IMdcSelectIconElement, mdcIconStrings } from './mdc-select-icon';\nimport { MdcSelectHelperText, mdcHelperTextCssClasses } from './mdc-select-helper-text/mdc-select-helper-text';\nimport { MDCNotchedOutline } from '@material/notched-outline';\nimport { MDCMenuItemEvent, Corner } from '@material/menu';\nimport { MDCSelectFoundationAurelia } from './mdc-select-foundation-aurelia';\nimport { MDCSelectAdapterAurelia } from './mdc-select-adapter-aurelia';\nimport { MDCMenuDistance } from '@material/menu-surface';\nimport { processContent, BindingMode, CustomElement, CustomAttribute } from '@aurelia/runtime-html';\nimport { MdcDefaultSelectConfiguration } from './mdc-default-select-configuration';\nimport template from './mdc-select.html?raw';\nimport { MdcFloatingLabel } from '../floating-label/mdc-floating-label';\nimport { MdcLineRipple } from '../line-ripple/mdc-line-ripple';\nimport { MdcListItem } from '../list/mdc-list-item/mdc-list-item';\nimport { MdcMenu } from '../menu/mdc-menu';\n\nstrings.CHANGE_EVENT = strings.CHANGE_EVENT.toLowerCase();\n\nlet selectId = 0;\n\n/**\n * @selector mdc-select\n * @emits mdcselect:change | Emitted if user changed the value\n */\n@inject(Element, IPlatform, MdcDefaultSelectConfiguration)\n@customElement({ name: 'mdc-select', template })\n@processContent(function processContent(node: INode, platform: IPlatform) {\n  const el = node as Element;\n\n  const leadingIcon = el.querySelector(`[${mdcIconStrings.ATTRIBUTE}]`);\n  leadingIcon?.remove();\n\n  const template = platform.document.createElement('template');\n  template.setAttribute('au-slot', '');\n  template.innerHTML = el.innerHTML;\n  el.innerHTML = '';\n  el.appendChild(template);\n\n  // move icon to the slot - this allows omitting slot specification\n  if (leadingIcon) {\n    const div = platform.document.createElement('div');\n    div.appendChild(leadingIcon);\n    const iconTemplate = platform.document.createElement('template');\n    iconTemplate.setAttribute('au-slot', 'leading-icon');\n    iconTemplate.innerHTML = div.innerHTML;\n    el.appendChild(iconTemplate);\n  }\n}\n)\nexport class MdcSelect extends MdcComponent<MDCSelectFoundationAurelia> {\n  constructor(root: HTMLElement, private platform: IPlatform, private defaultConfiguration: MdcDefaultSelectConfiguration) {\n    super(root);\n    this.outlined = this.defaultConfiguration.outlined;\n    defineMdcSelectElementApis(this.root);\n    this.root.id = this.id;\n  }\n\n  id: string = `mdc-select-${++selectId}`;\n  public menu: MdcMenu;\n  private selectAnchor: HTMLElement;\n  private selectedText: HTMLElement;\n\n  private menuElement?: Element;\n\n  get items(): MdcListItem[] | undefined {\n    return this.menu.list_?.items;\n  }\n\n  private leadingIcon?: MdcSelectIcon;\n\n  private helperText?: MdcSelectHelperText;\n  private lineRipple?: MdcLineRipple;\n  private mdcLabel: MdcFloatingLabel;\n  private outline?: MDCNotchedOutline;\n  errors = new Map<IError, boolean>();\n\n  /** Sets the select label */\n  @bindable()\n  label: string;\n  labelChanged() {\n    this.platform.domQueue.queueTask(() => this.foundation?.layout());\n  }\n\n  /** Styles the select as an outlined select */\n  @bindable({ set: booleanAttr })\n  outlined?: boolean;\n  outlinedChanged() {\n    this.platform.domQueue.queueTask(() => this.foundation?.layout());\n  }\n\n  /** Makes the value required */\n  @bindable({ set: booleanAttr })\n  required: boolean;\n  requiredChanged() {\n    if (this.required) {\n      this.selectAnchor?.setAttribute('aria-required', 'true');\n    } else {\n      this.selectAnchor?.removeAttribute('aria-required');\n    }\n    this.foundation?.setRequired(this.required ?? false);\n    this.platform.domWriteQueue.queueTask(() => this.foundation?.layout());\n  }\n\n  /** Enables/disables the select */\n  @bindable({ set: booleanAttr })\n  disabled?: boolean;\n  disabledChanged() {\n    if (this.disabled !== undefined) {\n      this.foundation?.setDisabled(this.disabled);\n    }\n  }\n\n  /** Hoists the select DOM to document.body */\n  @bindable({ set: booleanAttr, mode: BindingMode.oneTime })\n  hoistToBody: boolean;\n\n  /** Sets the select DOM position to fixed */\n  @bindable({ set: booleanAttr, mode: BindingMode.oneTime })\n  fixed: boolean;\n\n  /** Sets the margin between the select input and the dropdown */\n  @bindable()\n  anchorMargin: Partial<MDCMenuDistance>;\n\n  /** Sets the select dropdown width to match content */\n  @bindable({ set: booleanAttr })\n  naturalWidth: boolean;\n\n  private _value: unknown;\n  get value(): unknown {\n    if (this.foundation) {\n      return this.foundation.getValue();\n    } else {\n      return this._value;\n    }\n  }\n\n  set value(value: unknown) {\n    this.setValue(value);\n  }\n\n  setValue(value: unknown, skipNotify: boolean = false) {\n    this._value = value;\n    if (this.foundation) {\n      this.foundation.setValue(value, skipNotify);\n      this.foundation.layout();\n    }\n  }\n\n  get valid(): boolean {\n    return this.foundation?.isValid() ?? true;\n  }\n\n  set valid(value: boolean) {\n    this.foundation?.setValid(value);\n  }\n\n  get selectedIndex(): number {\n    return this.foundation!.getSelectedIndex();\n  }\n\n  set selectedIndex(selectedIndex: number) {\n    this.foundation?.setSelectedIndex(selectedIndex, /** closeMenu */ true);\n  }\n\n  addError(error: IError) {\n    this.errors.set(error, true);\n    this.valid = false;\n  }\n\n  removeError(error: IError) {\n    this.errors.delete(error);\n    this.valid = this.errors.size === 0;\n  }\n\n  renderErrors() {\n    if (this.helperText) {\n      this.helperText.errors = Array.from(this.errors.keys()).filter(x => x.message !== null).map(x => x.message!);\n    }\n  }\n\n  async attaching() {\n    const nextSibling = this.root.nextElementSibling;\n    if (nextSibling?.tagName === mdcHelperTextCssClasses.ROOT.toUpperCase()) {\n      this.helperText = CustomElement.for<MdcSelectHelperText>(nextSibling).viewModel;\n      await this.helperText.initialised;\n    }\n  }\n\n  beforeFoundationCreated() {\n    const leadingIconEl = this.root.querySelector<IMdcSelectIconElement>(`${strings.LEADING_ICON_SELECTOR}`);\n    if (leadingIconEl) {\n      this.leadingIcon = CustomAttribute.for<MdcSelectIcon>(leadingIconEl, mdcIconStrings.ATTRIBUTE)?.viewModel;\n    }\n    this.menu.list_!.singleSelection = true;\n  }\n\n  initialSyncWithDOM() {\n    // set initial value without emitting change events\n    this.foundation?.setValue(this._value, true);\n    this.foundation?.layout();\n    this.errors = new Map<IError, boolean>();\n    this.valid = true;\n\n    this.labelChanged();\n    this.disabledChanged();\n    this.outlinedChanged();\n    this.requiredChanged();\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: MDCSelectAdapterAurelia = {\n      ...this.getSelectAdapterMethods(),\n      ...this.getCommonAdapterMethods(),\n      ...this.getOutlineAdapterMethods(),\n      ...this.getLabelAdapterMethods(),\n    };\n    return new MDCSelectFoundationAurelia(adapter, this.getFoundationMap());\n  }\n\n  private getSelectAdapterMethods() {\n    return {\n      setSelectedText: (text: string) => {\n        this.selectedText.textContent = text;\n      },\n      isSelectAnchorFocused: () => document.activeElement === this.selectAnchor,\n      getSelectAnchorAttr: (attr: string) => this.selectAnchor.getAttribute(attr),\n      setSelectAnchorAttr: (attr: string, value: string) => {\n        this.selectAnchor.setAttribute(attr, value);\n      },\n      removeSelectAnchorAttr: (attr: string) => {\n        this.selectAnchor.removeAttribute(attr);\n      },\n      addMenuClass: (className: string) => {\n        this.menuElement?.classList.add(className);\n      },\n      removeMenuClass: (className: string) => {\n        this.menuElement?.classList.remove(className);\n      },\n      openMenu: () => {\n        this.menu.open = true;\n        this.menu.root.style.minWidth = this.menu.root.style.maxWidth = (this.hoistToBody || this.fixed) && !this.naturalWidth\n          ? `${this.root.clientWidth}px`\n          : '';\n      },\n      closeMenu: () => { this.menu.open = false; },\n      getAnchorElement: () => this.root.querySelector(strings.SELECT_ANCHOR_SELECTOR)!,\n      setMenuAnchorElement: (anchorEl: HTMLElement) => {\n        this.menu.anchor = anchorEl;\n      },\n      setMenuAnchorCorner: (anchorCorner: Corner) => {\n        this.menu.setAnchorCorner(anchorCorner);\n      },\n      setMenuWrapFocus: (wrapFocus: boolean) => {\n        this.menu.wrapFocus = wrapFocus;\n      },\n      getSelectedIndex: () => {\n        const index = this.menu.selectedIndex;\n        return index instanceof Array ? index[0] : index;\n      },\n      setSelectedIndex: (index: number) => {\n        this.menu.selectedIndex = index;\n      },\n      removeAttributeAtIndex: (index: number, attributeName: string) => {\n        this.menu.items[index].removeAttribute(attributeName);\n      },\n      focusMenuItemAtIndex: (index: number) => {\n        (this.menu.items[index] as HTMLElement).focus();\n      },\n      getMenuItemCount: () => this.menu.items.length,\n      getMenuItemValues: () => this.menu.items.map(x => CustomElement.for<MdcListItem>(x).viewModel.value),\n      getMenuItemTextAtIndex: (index: number) => this.menu.getPrimaryTextAtIndex(index),\n      isTypeaheadInProgress: () => this.menu.typeaheadInProgress,\n      typeaheadMatchItem: (nextChar: string, startingIndex: number) => this.menu.typeaheadMatchItem(nextChar, startingIndex),\n    };\n  }\n\n  private getCommonAdapterMethods() {\n    return {\n      addClass: (className: string) => {\n        this.root.classList.add(className);\n      },\n      removeClass: (className: string) => {\n        this.root.classList.remove(className);\n      },\n      hasClass: (className: string) => this.root.classList.contains(className),\n      setRippleCenter: (normalizedX: number) => this.lineRipple?.setRippleCenter(normalizedX),\n      activateBottomLine: () => this.lineRipple?.activate(),\n      deactivateBottomLine: () => this.lineRipple?.deactivate(),\n      notifyChange: (value: string) => {\n        const index = this.selectedIndex;\n        this.emit<MDCSelectEventDetail>(strings.CHANGE_EVENT, { value, index }, true /* shouldBubble  */);\n        this.emit<MDCSelectEventDetail>('change', { value, index }, true /* shouldBubble  */);\n      },\n    };\n  }\n\n  private getOutlineAdapterMethods() {\n    return {\n      hasOutline: () => Boolean(this.outline),\n      notchOutline: (labelWidth: number) => this.outline?.notch(labelWidth),\n      closeOutline: () => this.outline?.closeNotch(),\n    };\n  }\n\n  private getLabelAdapterMethods() {\n    return {\n      hasLabel: () => !!this.mdcLabel,\n      floatLabel: (shouldFloat: boolean) => this.mdcLabel?.float(shouldFloat),\n      getLabelWidth: () => this.mdcLabel ? this.mdcLabel.getWidth() : 0,\n      setLabelRequired: (isRequired: boolean) => this.mdcLabel?.setRequired(isRequired),\n    };\n  }\n\n  handleChange() {\n    this.foundation?.handleChange();\n    this.emit('change', {}, true);\n  }\n\n  handleFocus() {\n    this.foundation?.handleFocus();\n  }\n\n  handleBlur() {\n    this.foundation?.handleBlur();\n    // if class is set it means the menu is open,\n    // do not emit blur since \"conceptually\" the element is still active\n    if (!this.root.classList.contains(cssClasses.FOCUSED)) {\n      this.emit('blur', {}, true);\n    }\n  }\n\n  handleClick(evt: MouseEvent) {\n    this.selectAnchor.focus();\n    this.foundation?.handleClick(this.getNormalizedXCoordinate(evt));\n  }\n\n  handleKeydown(evt: KeyboardEvent) {\n    this.foundation?.handleKeydown(evt);\n    return true;\n  }\n\n  handleMenuItemAction(evt: MDCMenuItemEvent) {\n    this.foundation?.handleMenuItemAction(evt.detail.index);\n  }\n\n  handleMenuOpened() {\n    this.foundation?.handleMenuOpened();\n  }\n\n  handleMenuClosed() {\n    this.foundation?.handleMenuClosed();\n    if (!this.root.classList.contains(cssClasses.FOCUSED)) {\n      this.emit('blur', {}, true);\n    }\n  }\n\n  handleItemsChanged() {\n    this.foundation?.layoutOptions();\n    this.foundation?.layout();\n  }\n\n  focus() {\n    this.selectAnchor.focus();\n  }\n\n  blur() {\n    this.selectAnchor.blur();\n  }\n\n  /**\n   * @hidden\n   * Calculates where the line ripple should start based on the x coordinate within the component.\n   */\n  private getNormalizedXCoordinate(evt: MouseEvent | TouchEvent): number {\n    const targetClientRect = (evt.target as Element).getBoundingClientRect();\n    const xCoordinate =\n      this.isTouchEvent(evt) ? evt.touches[0].clientX : evt.clientX;\n    return xCoordinate - targetClientRect.left;\n  }\n\n  private isTouchEvent(evt: MouseEvent | TouchEvent): evt is TouchEvent {\n    return Boolean((evt as TouchEvent).touches);\n  }\n\n  /**\n   * @hidden\n   * Returns a map of all subcomponents to subfoundations.\n   */\n  private getFoundationMap(): Partial<MDCSelectFoundationMap> {\n    return {\n      helperText: this.helperText?.foundation,\n      leadingIcon: this.leadingIcon?.foundation\n    };\n  }\n}\n\n/** @hidden */\nexport interface IMdcSelectElement extends IValidatedElement {\n  $au: {\n    'au:resource:custom-element': {\n      viewModel: MdcSelect;\n    };\n  };\n  value: unknown;\n}\n\nfunction defineMdcSelectElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    value: {\n      get(this: IMdcSelectElement) {\n        return CustomElement.for<MdcSelect>(this).viewModel.value;\n      },\n      set(this: IMdcSelectElement, value: unknown) {\n        // aurelia binding converts \"undefined\" and \"null\" into empty string\n        // this does not translate well into \"empty\" menu items when several selects are bound to the same field\n        CustomElement.for<MdcSelect>(this).viewModel.value = value === '' ? undefined : value;\n      },\n      configurable: true\n    },\n    options: {\n      get(this: IMdcSelectElement) {\n        return CustomElement.for<MdcSelect>(this).viewModel.root.querySelectorAll('.mdc-list-item');\n      },\n      configurable: true\n    },\n    selectedIndex: {\n      get(this: IMdcSelectElement) {\n        return CustomElement.for<MdcSelect>(this).viewModel.selectedIndex;\n      },\n      set(this: IMdcSelectElement, value: number) {\n        CustomElement.for<MdcSelect>(this).viewModel.selectedIndex = value;\n      },\n      configurable: true\n    },\n    valid: {\n      get(this: IMdcSelectElement) {\n        return CustomElement.for<MdcSelect>(this).viewModel.valid;\n      },\n      set(this: IMdcSelectElement, value: boolean) {\n        CustomElement.for<MdcSelect>(this).viewModel.valid = value;\n      },\n      configurable: true\n    },\n    addError: {\n      value(this: IMdcSelectElement, error: IError) {\n        CustomElement.for<MdcSelect>(this).viewModel.addError(error);\n      },\n      configurable: true\n    },\n    removeError: {\n      value(this: IMdcSelectElement, error: IError) {\n        CustomElement.for<MdcSelect>(this).viewModel.removeError(error);\n      },\n      configurable: true\n    },\n    renderErrors: {\n      value(this: IMdcSelectElement): void {\n        CustomElement.for<MdcSelect>(this).viewModel.renderErrors();\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IMdcSelectElement) {\n        CustomElement.for<MdcSelect>(this).viewModel.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IMdcSelectElement) {\n        CustomElement.for<MdcSelect>(this).viewModel.blur();\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/slider/mdc-slider-foundation-aurelia.js

@@ -0,0 +1,12 @@
+import { MDCSliderFoundation } from '@material/slider';
+// overriding lets the rest of the foundation to always get a fresh bounding rect
+// otherwise resizing a container, or moving an element ruins interaction
+// @ts-expect-error rect is private in base class
+export class MdcSliderFoundationAurelia extends MDCSliderFoundation {
+    get rect() {
+        return this.adapter.getBoundingClientRect();
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    set rect(_) { }
+}
+//# sourceMappingURL=mdc-slider-foundation-aurelia.js.map

package/dist/slider/mdc-slider-foundation-aurelia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdc-slider-foundation-aurelia.js","sourceRoot":"","sources":["../../src/slider/mdc-slider-foundation-aurelia.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,iFAAiF;AACjF,yEAAyE;AACzE,iDAAiD;AACjD,MAAM,OAAO,0BAA2B,SAAQ,mBAAmB;IACjE,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC9C,CAAC;IAED,gEAAgE;IAChE,IAAI,IAAI,CAAC,CAAa,IAAI,CAAC;CAC5B","sourcesContent":["import { MDCSliderFoundation } from '@material/slider';\n\n// overriding lets the rest of the foundation to always get a fresh bounding rect\n// otherwise resizing a container, or moving an element ruins interaction\n// @ts-expect-error rect is private in base class\nexport class MdcSliderFoundationAurelia extends MDCSliderFoundation {\n  get rect(): ClientRect {\n    return this.adapter.getBoundingClientRect();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  set rect(_: ClientRect) { }\n}\n"]}

package/dist/slider/mdc-slider.html

@@ -0,0 +1,36 @@
+<template class="mdc-slider
+  ${range ? 'mdc-slider--range' : ''}
+  ${discrete ? 'mdc-slider--discrete' : ''}
+  ${discrete && tickMarks ? 'mdc-slider--tick-marks' : ''}
+  ">
+  <input class="mdc-slider__input" type="range" min="0" max="100" value="0" if.bind="range" ref="startInput">
+  <input class="mdc-slider__input" type="range" min="0" max="100" value="0" ref="endInput">
+  <div class="mdc-slider__track">
+    <div class="mdc-slider__track--inactive"></div>
+    <div class="mdc-slider__track--active">
+      <div class="mdc-slider__track--active_fill" ref="trackActive"></div>
+    </div>
+    <div class="mdc-slider__tick-marks" if.bind="discrete && tickMarks">
+      <div repeat.for="s of tickMarkStatuses"
+        class="mdc-slider__tick-mark--${s === TickMark.ACTIVE ? 'active' : 'inactive' }"></div>
+    </div>
+  </div>
+  <div class="mdc-slider__thumb" mdc-ripple="unbounded.bind: true" mdc-ripple.ref="startRipple" if.bind="range"
+    ref="startThumb">
+    <div class="mdc-slider__value-indicator-container" if.bind="discrete">
+      <div class="mdc-slider__value-indicator">
+        <span class="mdc-slider__value-indicator-text"></span>
+      </div>
+    </div>
+    <div class="mdc-slider__thumb-knob"></div>
+  </div>
+  <div class="mdc-slider__thumb" mdc-ripple="unbounded.bind: true" mdc-ripple.ref="endRipple" ref="endThumb"
+    style="overflow: visible;">
+    <div class="mdc-slider__value-indicator-container" if.bind="discrete">
+      <div class="mdc-slider__value-indicator">
+        <span class="mdc-slider__value-indicator-text"></span>
+      </div>
+    </div>
+    <div class="mdc-slider__thumb-knob"></div>
+  </div>
+</template>