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

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

@@ -1,27 +1,30 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { MdcComponent } from '../base';
-import { MDCSelectIconFoundation, strings } from '@material/select';
-import { inject, customAttribute } from 'aurelia';
-export const mdcIconStrings = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MdcSelectIcon = exports.mdcIconStrings = void 0;
+const tslib_1 = require("tslib");
+const base_1 = require("../base");
+const select_1 = require("@material/select");
+const aurelia_1 = require("aurelia");
+exports.mdcIconStrings = {
     ATTRIBUTE: 'mdc-select-icon'
 };
 let MdcSelectIcon = (() => {
-    let _classDecorators = [inject(Element), customAttribute(mdcIconStrings.ATTRIBUTE)];
+    let _classDecorators = [(0, aurelia_1.inject)(Element), (0, aurelia_1.customAttribute)(exports.mdcIconStrings.ATTRIBUTE)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
-    let _classSuper = MdcComponent;
+    let _classSuper = base_1.MdcComponent;
     var MdcSelectIcon = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             MdcSelectIcon = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
         }
         attaching() {
-            this.root.classList.add(strings.LEADING_ICON_SELECTOR.replace('.', ''));
+            this.root.classList.add(select_1.strings.LEADING_ICON_SELECTOR.replace('.', ''));
         }
         getDefaultFoundation() {
             // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
@@ -35,12 +38,12 @@ let MdcSelectIcon = (() => {
                 },
                 registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),
                 deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),
-                notifyIconAction: () => this.emit(MDCSelectIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),
+                notifyIconAction: () => this.emit(select_1.MDCSelectIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),
             };
-            return new MDCSelectIconFoundation(adapter);
+            return new select_1.MDCSelectIconFoundation(adapter);
         }
     };
     return MdcSelectIcon = _classThis;
 })();
-export { MdcSelectIcon };
+exports.MdcSelectIcon = MdcSelectIcon;
 //# sourceMappingURL=mdc-select-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mdc-select-icon.js","sourceRoot":"","sources":["../../src/select/mdc-select-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,uBAAuB,EAAwB,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;IAIW,aAAa;4BAFzB,MAAM,CAAC,OAAO,CAAC,EACf,eAAe,CAAC,cAAc,CAAC,SAAS,CAAC;;;;sBACP,YAAY;6BAApB,SAAQ,WAAqC;;;;YAAxE,6KAqBC;;;YArBY,uDAAa;;QACxB,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,oBAAoB;YAClB,sGAAsG;YACtG,yGAAyG;YACzG,MAAM,OAAO,GAAyB;gBACpC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC/C,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;gBAC7D,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACrD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;oBACtB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;gBAClC,CAAC;gBACD,0BAA0B,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC;gBAC/E,4BAA4B,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;gBACnF,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,CAAC;aACzH,CAAC;YACF,OAAO,IAAI,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;;;;SApBU,aAAa","sourcesContent":["import { MdcComponent } from '../base';\nimport { MDCSelectIconFoundation, MDCSelectIconAdapter, strings } from '@material/select';\nimport { inject, customAttribute } from 'aurelia';\n\nexport const mdcIconStrings = {\n  ATTRIBUTE: 'mdc-select-icon'\n};\n\n@inject(Element)\n@customAttribute(mdcIconStrings.ATTRIBUTE)\nexport class MdcSelectIcon extends MdcComponent<MDCSelectIconFoundation> {\n  attaching() {\n    this.root.classList.add(strings.LEADING_ICON_SELECTOR.replace('.', ''));\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: MDCSelectIconAdapter = {\n      getAttr: (attr) => this.root.getAttribute(attr),\n      setAttr: (attr, value) => this.root.setAttribute(attr, value),\n      removeAttr: (attr) => this.root.removeAttribute(attr),\n      setContent: (content) => {\n        this.root.textContent = content;\n      },\n      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),\n      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),\n      notifyIconAction: () => this.emit(MDCSelectIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),\n    };\n    return new MDCSelectIconFoundation(adapter);\n  }\n}\n\n/** @hidden */\nexport interface IMdcSelectIconElement extends HTMLElement {\n  $au: {\n    'au:resource:custom-attribute:mdc-select-icon': {\n      viewModel: MdcSelectIcon;\n    };\n  };\n}\n"]}
+{"version":3,"file":"mdc-select-icon.js","sourceRoot":"","sources":["../../src/select/mdc-select-icon.ts"],"names":[],"mappings":";;;;AAAA,kCAAuC;AACvC,6CAA0F;AAC1F,qCAAkD;AAErC,QAAA,cAAc,GAAG;IAC5B,SAAS,EAAE,iBAAiB;CAC7B,CAAC;IAIW,aAAa;4BAFzB,IAAA,gBAAM,EAAC,OAAO,CAAC,EACf,IAAA,yBAAe,EAAC,sBAAc,CAAC,SAAS,CAAC;;;;sBACP,mBAAY;6BAApB,SAAQ,WAAqC;;;;YAAxE,qLAqBC;;;YArBY,+DAAa;;QACxB,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,oBAAoB;YAClB,sGAAsG;YACtG,yGAAyG;YACzG,MAAM,OAAO,GAAyB;gBACpC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBAC/C,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;gBAC7D,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACrD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;oBACtB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;gBAClC,CAAC;gBACD,0BAA0B,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC;gBAC/E,4BAA4B,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;gBACnF,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAuB,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,CAAC;aACzH,CAAC;YACF,OAAO,IAAI,gCAAuB,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC;;;;AApBU,sCAAa","sourcesContent":["import { MdcComponent } from '../base';\r\nimport { MDCSelectIconFoundation, MDCSelectIconAdapter, strings } from '@material/select';\r\nimport { inject, customAttribute } from 'aurelia';\r\n\r\nexport const mdcIconStrings = {\r\n  ATTRIBUTE: 'mdc-select-icon'\r\n};\r\n\r\n@inject(Element)\r\n@customAttribute(mdcIconStrings.ATTRIBUTE)\r\nexport class MdcSelectIcon extends MdcComponent<MDCSelectIconFoundation> {\r\n  attaching() {\r\n    this.root.classList.add(strings.LEADING_ICON_SELECTOR.replace('.', ''));\r\n  }\r\n\r\n  getDefaultFoundation() {\r\n    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.\r\n    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.\r\n    const adapter: MDCSelectIconAdapter = {\r\n      getAttr: (attr) => this.root.getAttribute(attr),\r\n      setAttr: (attr, value) => this.root.setAttribute(attr, value),\r\n      removeAttr: (attr) => this.root.removeAttribute(attr),\r\n      setContent: (content) => {\r\n        this.root.textContent = content;\r\n      },\r\n      registerInteractionHandler: (evtType, handler) => this.listen(evtType, handler),\r\n      deregisterInteractionHandler: (evtType, handler) => this.unlisten(evtType, handler),\r\n      notifyIconAction: () => this.emit(MDCSelectIconFoundation.strings.ICON_EVENT, {} /* evtData */, true /* shouldBubble */),\r\n    };\r\n    return new MDCSelectIconFoundation(adapter);\r\n  }\r\n}\r\n\r\n/** @hidden */\r\nexport interface IMdcSelectIconElement extends HTMLElement {\r\n  $au: {\r\n    'au:resource:custom-attribute:mdc-select-icon': {\r\n      viewModel: MdcSelectIcon;\r\n    };\r\n  };\r\n}\r\n"]}

package/dist/select/mdc-select-value-observer.js

@@ -1,6 +1,9 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { subscriberCollection, AccessorType, } from '@aurelia/runtime';
-import { CustomElement } from '@aurelia/runtime-html';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MdcSelectValueObserver = void 0;
+const tslib_1 = require("tslib");
+const runtime_1 = require("@aurelia/runtime");
+const runtime_html_1 = require("@aurelia/runtime-html");
 // const hasOwn = Object.prototype.hasOwnProperty;
 const childObserverOptions = {
     childList: true,
@@ -8,7 +11,7 @@ const childObserverOptions = {
     characterData: true
 };
 let MdcSelectValueObserver = (() => {
-    let _classDecorators = [subscriberCollection()];
+    let _classDecorators = [(0, runtime_1.subscriberCollection)()];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
@@ -16,10 +19,10 @@ let MdcSelectValueObserver = (() => {
         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);
+            tslib_1.__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             MdcSelectValueObserver = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
+            tslib_1.__runInitializers(_classThis, _classExtraInitializers);
         }
         currentValue = void 0;
         oldValue = void 0;
@@ -28,7 +31,7 @@ let MdcSelectValueObserver = (() => {
         hasChanges = false;
         // ObserverType.Layout is not always true
         // but for simplicity, always treat as such
-        type = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout);
+        type = (runtime_1.AccessorType.Node | runtime_1.AccessorType.Observer | runtime_1.AccessorType.Layout);
         arrayObserver = void 0;
         nodeObserver = void 0;
         observing = false;
@@ -44,7 +47,7 @@ let MdcSelectValueObserver = (() => {
             // do not pass the value to the element if options has never been set
             // the value will be passed on when options do arrive
             if (this.optionsWereSet) {
-                CustomElement.for(this.obj).viewModel.setValue(this.currentValue, skipNotify);
+                runtime_html_1.CustomElement.for(this.obj).viewModel.setValue(this.currentValue, skipNotify);
             }
         }
         getValue() {
@@ -57,6 +60,7 @@ let MdcSelectValueObserver = (() => {
                 : this.obj.value;
         }
         setValue(newValue) {
+            this.oldValue = this.currentValue;
             this.currentValue = newValue;
             this.hasChanges = newValue !== this.oldValue;
             // this.observeArray(newValue instanceof Array ? newValue : null);
@@ -131,7 +135,7 @@ let MdcSelectValueObserver = (() => {
             //    3. assign `value` to `this.currentValue`
             //    4. return `true` to signal value has changed
             const obj = this.obj;
-            const options = CustomElement.for(obj).viewModel.items ?? [];
+            const options = runtime_html_1.CustomElement.for(obj).viewModel.items ?? [];
             const len = options.length;
             // const currentValue = this.currentValue;
             let i = 0;
@@ -185,7 +189,7 @@ let MdcSelectValueObserver = (() => {
             */
             // B. single select
             // B.1
-            let value = null;
+            let value = undefined;
             while (i < len) {
                 const option = options[i];
                 if (option.value === this.obj.value) {
@@ -203,7 +207,7 @@ let MdcSelectValueObserver = (() => {
             return true;
         }
         start() {
-            const vm = CustomElement.for(this.obj).viewModel;
+            const vm = runtime_html_1.CustomElement.for(this.obj).viewModel;
             vm.initialised.then(() => {
                 (this.nodeObserver = new this.obj.ownerDocument.defaultView.MutationObserver(records => this.handleNodeChange(records)))
                     .observe(vm.menu.root, childObserverOptions);
@@ -279,5 +283,5 @@ let MdcSelectValueObserver = (() => {
     };
     return MdcSelectValueObserver = _classThis;
 })();
-export { MdcSelectValueObserver };
+exports.MdcSelectValueObserver = MdcSelectValueObserver;
 //# sourceMappingURL=mdc-select-value-observer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mdc-select-value-observer.js","sourceRoot":"","sources":["../../src/select/mdc-select-value-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  subscriberCollection,\r\n  AccessorType,\r\n} from '@aurelia/runtime';\r\n\r\nimport type {\r\n  ICollectionObserver,\r\n  IndexMap,\r\n  IObserver,\r\n  IObserverLocator,\r\n  ISubscriber,\r\n  ISubscriberCollection,\r\n} from '@aurelia/runtime';\r\n\r\nimport { INode, CustomElement } from '@aurelia/runtime-html';\r\nimport { IMdcSelectElement, MdcSelect } from './mdc-select';\r\n\r\n// const hasOwn = Object.prototype.hasOwnProperty;\r\nconst childObserverOptions = {\r\n  childList: true,\r\n  subtree: true,\r\n  characterData: true\r\n};\r\n\r\n// function defaultMatcher(a: unknown, b: unknown): boolean {\r\n//   return a === b;\r\n// }\r\n\r\nexport interface IOptionElement extends HTMLOptionElement {\r\n  model?: unknown;\r\n}\r\n\r\nexport interface MdcSelectValueObserver extends\r\n  ISubscriberCollection { }\r\n\r\nexport interface INodeObserverConfigBase {\r\n  /**\r\n   * Indicates the list of events can be used to observe a particular property\r\n   */\r\n  readonly events: string[];\r\n  /**\r\n   * Indicates whether this property is readonly, so observer wont attempt to assign value\r\n   * example: input.files\r\n   */\r\n  readonly readonly?: boolean;\r\n  /**\r\n   * A default value to assign to the corresponding property if the incoming value is null/undefined\r\n   */\r\n  readonly default?: unknown;\r\n}\r\n\r\n\r\nexport interface INodeObserver extends IObserver {\r\n  /**\r\n   * Instruct this node observer event observation behavior\r\n   */\r\n  useConfig(config: INodeObserverConfigBase): void;\r\n}\r\n\r\n@subscriberCollection()\r\nexport class MdcSelectValueObserver implements INodeObserver {\r\n  public currentValue: unknown = void 0;\r\n  public oldValue: unknown = void 0;\r\n\r\n  public readonly obj: IMdcSelectElement;\r\n  public config: INodeObserverConfigBase;\r\n\r\n  public hasChanges: boolean = false;\r\n  // ObserverType.Layout is not always true\r\n  // but for simplicity, always treat as such\r\n  public type: AccessorType = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout) as AccessorType;\r\n\r\n  public arrayObserver?: ICollectionObserver<'array'> = void 0;\r\n  public nodeObserver?: MutationObserver = void 0;\r\n\r\n  private observing: boolean = false;\r\n  private listened: boolean = false;\r\n\r\n  public constructor(\r\n    obj: INode,\r\n    // deepscan-disable-next-line\r\n    _key: PropertyKey,\r\n    config: INodeObserverConfigBase,\r\n    _: IObserverLocator\r\n  ) {\r\n    this.obj = obj as unknown as IMdcSelectElement;\r\n    this.config = config;\r\n  }\r\n\r\n  optionsWereSet: boolean;\r\n\r\n  setElementValue(skipNotify: boolean) {\r\n    // do not pass the value to the element if options has never been set\r\n    // the value will be passed on when options do arrive\r\n    if (this.optionsWereSet) {\r\n      CustomElement.for<MdcSelect>(this.obj).viewModel.setValue(this.currentValue, skipNotify);\r\n    }\r\n  }\r\n\r\n  public getValue(): unknown {\r\n    // is it safe to assume the observer has the latest value?\r\n    // todo: ability to turn on/off cache based on type\r\n    return this.observing\r\n      ? this.currentValue\r\n      // : this.obj.multiple\r\n      //   ? Array.from(this.obj.options).map(o => o.value)\r\n      : this.obj.value;\r\n  }\r\n\r\n  public setValue(newValue: unknown): void {\r\n    this.currentValue = newValue;\r\n    this.hasChanges = newValue !== this.oldValue;\r\n    // this.observeArray(newValue instanceof Array ? newValue : null);\r\n    if (this.optionsWereSet) {\r\n      this.flushChanges();\r\n    }\r\n  }\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n  public flushChanges(): void {\r\n    if (this.hasChanges) {\r\n      this.hasChanges = false;\r\n      this.synchronizeOptions();\r\n    }\r\n  }\r\n\r\n  public handleCollectionChange(): void {\r\n    // always sync \"selected\" property of <options/>\r\n    // immediately whenever the array notifies its mutation\r\n    this.synchronizeOptions();\r\n  }\r\n\r\n  public notify(): void {\r\n    const oldValue = this.oldValue;\r\n    const newValue = this.currentValue;\r\n    if (newValue === oldValue) {\r\n      return;\r\n    }\r\n    this.subs.notify(newValue, oldValue);\r\n  }\r\n\r\n  public handleEvent(): void {\r\n    const shouldNotify = this.synchronizeValue();\r\n    if (shouldNotify) {\r\n      this.subs.notify(this.currentValue, this.oldValue);\r\n    }\r\n  }\r\n\r\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n  public synchronizeOptions(_indexMap?: IndexMap): void {\r\n    this.setElementValue(true);\r\n    // const { currentValue, obj } = this;\r\n    //   // const isArray = Array.isArray(currentValue);\r\n    //   // const matcher = obj.matcher !== void 0 ? obj.matcher : defaultMatcher;\r\n    //   // const matcher = defaultMatcher;\r\n    //   const options = CustomElement.for<MdcSelect>(obj).viewModel.items;\r\n    //   let i = options.length;\r\n\r\n    //   while (i-- > 0) {\r\n    //     // const option = options[i];\r\n    //     // const optionValue = hasOwn.call(option, 'model') ? option.model : option.value;\r\n    //     // const optionValue = option.value;\r\n    //     // if (isArray) {\r\n    //     //   option.selected = (currentValue as unknown[]).findIndex(item => !!matcher(optionValue, item)) !== -1;\r\n    //     //   continue;\r\n    //     // }\r\n    //     if (!this.optionsWereSet) {\r\n    //       this.optionsWereSet = true;\r\n    //       this.setElementValue(true);\r\n    //     }\r\n    //     // option.selected = !!matcher(optionValue, currentValue);\r\n    //   }\r\n  }\r\n\r\n  public synchronizeValue(): boolean {\r\n    // Spec for synchronizing value from `<select/>`  to `SelectObserver`\r\n    // When synchronizing value to observed <select/> element, do the following steps:\r\n    // A. If `<select/>` is multiple\r\n    //    1. Check if current value, called `currentValue` is an array\r\n    //      a. If not an array, return true to signal value has changed\r\n    //      b. If is an array:\r\n    //        i. gather all current selected <option/>, in to array called `values`\r\n    //        ii. loop through the `currentValue` array and remove items that are nolonger selected based on matcher\r\n    //        iii. loop through the `values` array and add items that are selected based on matcher\r\n    //        iv. Return false to signal value hasn't changed\r\n    // B. If the select is single\r\n    //    1. Let `value` equal the first selected option, if no option selected, then `value` is `null`\r\n    //    2. assign `this.currentValue` to `this.oldValue`\r\n    //    3. assign `value` to `this.currentValue`\r\n    //    4. return `true` to signal value has changed\r\n    const obj = this.obj;\r\n    const options = CustomElement.for<MdcSelect>(obj).viewModel.items ?? [];\r\n    const len = options.length;\r\n    // const currentValue = this.currentValue;\r\n    let i = 0;\r\n\r\n    /*\r\n    if (obj.multiple) {\r\n      // A.\r\n      if (!(currentValue instanceof Array)) {\r\n        // A.1.a\r\n        return true;\r\n      }\r\n      // A.1.b\r\n      // multi select\r\n      let option: IOptionElement;\r\n      const matcher = obj.matcher ?? defaultMatcher;\r\n      // A.1.b.i\r\n      const values: unknown[] = [];\r\n      while (i < len) {\r\n        option = options[i];\r\n        if (option.selected) {\r\n          values.push(hasOwn.call(option, 'model')\r\n            ? option.model\r\n            : option.value\r\n          );\r\n        }\r\n        ++i;\r\n      }\r\n      // A.1.b.ii\r\n      i = 0;\r\n      while (i < currentValue.length) {\r\n        const a = currentValue[i];\r\n        // Todo: remove arrow fn\r\n        if (values.findIndex(b => !!matcher(a, b)) === -1) {\r\n          currentValue.splice(i, 1);\r\n        } else {\r\n          ++i;\r\n        }\r\n      }\r\n      // A.1.b.iii\r\n      i = 0;\r\n      while (i < values.length) {\r\n        const a = values[i];\r\n        // Todo: remove arrow fn\r\n        if (currentValue.findIndex(b => !!matcher(a, b)) === -1) {\r\n          currentValue.push(a);\r\n        }\r\n        ++i;\r\n      }\r\n      // A.1.b.iv\r\n      return false;\r\n    }\r\n    */\r\n    // B. single select\r\n    // B.1\r\n    let value: unknown = null;\r\n    while (i < len) {\r\n      const option = options[i];\r\n      if (option.value === this.obj.value) {\r\n        // value = hasOwn.call(option, 'model') ? option.model : option.value;\r\n        value = option.value;\r\n        break;\r\n      }\r\n      ++i;\r\n    }\r\n    // B.2\r\n    this.oldValue = this.currentValue;\r\n    // B.3\r\n    this.currentValue = value;\r\n    // B.4\r\n    return true;\r\n  }\r\n\r\n  private start(): void {\r\n    const vm = CustomElement.for<MdcSelect>(this.obj).viewModel;\r\n    vm.initialised.then(() => {\r\n      (this.nodeObserver = new this.obj.ownerDocument.defaultView!.MutationObserver(records => this.handleNodeChange(records)))\r\n        .observe(vm.menu.root, childObserverOptions);\r\n      // this.observeArray(this.currentValue instanceof Array ? this.currentValue : null);\r\n      this.observing = true;\r\n      if (vm.items?.length) {\r\n        this.optionsWereSet = true;\r\n        this.synchronizeOptions();\r\n      }\r\n    });\r\n  }\r\n\r\n  private stop(): void {\r\n    this.optionsWereSet = false;\r\n    this.nodeObserver?.disconnect();\r\n    this.arrayObserver?.unsubscribe(this);\r\n    this.nodeObserver\r\n      = this.arrayObserver\r\n      = void 0;\r\n    this.observing = false;\r\n  }\r\n\r\n  // todo: observe all kind of collection\r\n  // private observeArray(array: unknown[] | null): void {\r\n  //   this.arrayObserver?.unsubscribe(this);\r\n  //   this.arrayObserver = void 0;\r\n  //   if (array !== null) {\r\n  //     if (!this.obj.multiple) {\r\n  //       throw new Error('Only null or Array instances can be bound to a multi-select.');\r\n  //     }\r\n  //     (this.arrayObserver = this.observerLocator.getArrayObserver(array)).subscribe(this);\r\n  //   }\r\n  // }\r\n\r\n  public handleNodeChange(records: MutationRecord[]): void {\r\n    if (records.find(x => x.type === 'childList'\r\n      && (Array.from(x.addedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM')\r\n        || Array.from(x.removedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM'))\r\n    )) {\r\n      this.optionsWereSet = true;\r\n      this.synchronizeOptions();\r\n      const shouldNotify = this.synchronizeValue();\r\n      if (shouldNotify) {\r\n        this.notify();\r\n      }\r\n    }\r\n  }\r\n\r\n  public subscribe(subscriber: ISubscriber): void {\r\n    if (this.subs.add(subscriber) && this.subs.count === 1) {\r\n      for (const e of this.config.events) {\r\n        this.obj.addEventListener(e, this);\r\n      }\r\n      this.listened = true;\r\n      this.start();\r\n    }\r\n  }\r\n\r\n  public unsubscribe(subscriber: ISubscriber): void {\r\n    if (this.subs.remove(subscriber) && this.subs.count === 0) {\r\n      for (const e of this.config.events) {\r\n        this.obj.removeEventListener(e, this);\r\n      }\r\n      this.listened = false;\r\n      this.stop();\r\n    }\r\n  }\r\n\r\n  useConfig(config: INodeObserverConfigBase): void {\r\n    this.config = config;\r\n    if (this.listened) {\r\n      for (const e of this.config.events) {\r\n        this.obj.removeEventListener(e, this);\r\n      }\r\n      for (const e of this.config.events) {\r\n        this.obj.addEventListener(e, this);\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"mdc-select-value-observer.js","sourceRoot":"","sources":["../../src/select/mdc-select-value-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  subscriberCollection,\n  AccessorType,\n} from '@aurelia/runtime';\n\nimport type {\n  ICollectionObserver,\n  IndexMap,\n  IObserver,\n  IObserverLocator,\n  ISubscriber,\n  ISubscriberCollection,\n} from '@aurelia/runtime';\n\nimport { INode, CustomElement } from '@aurelia/runtime-html';\nimport { IMdcSelectElement, MdcSelect } from './mdc-select';\n\n// const hasOwn = Object.prototype.hasOwnProperty;\nconst childObserverOptions = {\n  childList: true,\n  subtree: true,\n  characterData: true\n};\n\n// function defaultMatcher(a: unknown, b: unknown): boolean {\n//   return a === b;\n// }\n\nexport interface IOptionElement extends HTMLOptionElement {\n  model?: unknown;\n}\n\nexport interface MdcSelectValueObserver extends\n  ISubscriberCollection { }\n\nexport interface INodeObserverConfigBase {\n  /**\n   * Indicates the list of events can be used to observe a particular property\n   */\n  readonly events: string[];\n  /**\n   * Indicates whether this property is readonly, so observer wont attempt to assign value\n   * example: input.files\n   */\n  readonly readonly?: boolean;\n  /**\n   * A default value to assign to the corresponding property if the incoming value is null/undefined\n   */\n  readonly default?: unknown;\n}\n\n\nexport interface INodeObserver extends IObserver {\n  /**\n   * Instruct this node observer event observation behavior\n   */\n  useConfig(config: INodeObserverConfigBase): void;\n}\n\n@subscriberCollection()\nexport class MdcSelectValueObserver implements INodeObserver {\n  public currentValue: unknown = void 0;\n  public oldValue: unknown = void 0;\n\n  public readonly obj: IMdcSelectElement;\n  public config: INodeObserverConfigBase;\n\n  public hasChanges: boolean = false;\n  // ObserverType.Layout is not always true\n  // but for simplicity, always treat as such\n  public type: AccessorType = (AccessorType.Node | AccessorType.Observer | AccessorType.Layout) as AccessorType;\n\n  public arrayObserver?: ICollectionObserver<'array'> = void 0;\n  public nodeObserver?: MutationObserver = void 0;\n\n  private observing: boolean = false;\n  private listened: boolean = false;\n\n  public constructor(\n    obj: INode,\n    // deepscan-disable-next-line\n    _key: PropertyKey,\n    config: INodeObserverConfigBase,\n    _: IObserverLocator\n  ) {\n    this.obj = obj as unknown as IMdcSelectElement;\n    this.config = config;\n  }\n\n  optionsWereSet: boolean;\n\n  setElementValue(skipNotify: boolean) {\n    // do not pass the value to the element if options has never been set\n    // the value will be passed on when options do arrive\n    if (this.optionsWereSet) {\n      CustomElement.for<MdcSelect>(this.obj).viewModel.setValue(this.currentValue, skipNotify);\n    }\n  }\n\n  public getValue(): unknown {\n    // is it safe to assume the observer has the latest value?\n    // todo: ability to turn on/off cache based on type\n    return this.observing\n      ? this.currentValue\n      // : this.obj.multiple\n      //   ? Array.from(this.obj.options).map(o => o.value)\n      : this.obj.value;\n  }\n\n  public setValue(newValue: unknown): void {\n    this.oldValue = this.currentValue;\n    this.currentValue = newValue;\n    this.hasChanges = newValue !== this.oldValue;\n    // this.observeArray(newValue instanceof Array ? newValue : null);\n    if (this.optionsWereSet) {\n      this.flushChanges();\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public flushChanges(): void {\n    if (this.hasChanges) {\n      this.hasChanges = false;\n      this.synchronizeOptions();\n    }\n  }\n\n  public handleCollectionChange(): void {\n    // always sync \"selected\" property of <options/>\n    // immediately whenever the array notifies its mutation\n    this.synchronizeOptions();\n  }\n\n  public notify(): void {\n    const oldValue = this.oldValue;\n    const newValue = this.currentValue;\n    if (newValue === oldValue) {\n      return;\n    }\n    this.subs.notify(newValue, oldValue);\n  }\n\n  public handleEvent(): void {\n    const shouldNotify = this.synchronizeValue();\n    if (shouldNotify) {\n      this.subs.notify(this.currentValue, this.oldValue);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public synchronizeOptions(_indexMap?: IndexMap): void {\n    this.setElementValue(true);\n    // const { currentValue, obj } = this;\n    //   // const isArray = Array.isArray(currentValue);\n    //   // const matcher = obj.matcher !== void 0 ? obj.matcher : defaultMatcher;\n    //   // const matcher = defaultMatcher;\n    //   const options = CustomElement.for<MdcSelect>(obj).viewModel.items;\n    //   let i = options.length;\n\n    //   while (i-- > 0) {\n    //     // const option = options[i];\n    //     // const optionValue = hasOwn.call(option, 'model') ? option.model : option.value;\n    //     // const optionValue = option.value;\n    //     // if (isArray) {\n    //     //   option.selected = (currentValue as unknown[]).findIndex(item => !!matcher(optionValue, item)) !== -1;\n    //     //   continue;\n    //     // }\n    //     if (!this.optionsWereSet) {\n    //       this.optionsWereSet = true;\n    //       this.setElementValue(true);\n    //     }\n    //     // option.selected = !!matcher(optionValue, currentValue);\n    //   }\n  }\n\n  public synchronizeValue(): boolean {\n    // Spec for synchronizing value from `<select/>`  to `SelectObserver`\n    // When synchronizing value to observed <select/> element, do the following steps:\n    // A. If `<select/>` is multiple\n    //    1. Check if current value, called `currentValue` is an array\n    //      a. If not an array, return true to signal value has changed\n    //      b. If is an array:\n    //        i. gather all current selected <option/>, in to array called `values`\n    //        ii. loop through the `currentValue` array and remove items that are nolonger selected based on matcher\n    //        iii. loop through the `values` array and add items that are selected based on matcher\n    //        iv. Return false to signal value hasn't changed\n    // B. If the select is single\n    //    1. Let `value` equal the first selected option, if no option selected, then `value` is `null`\n    //    2. assign `this.currentValue` to `this.oldValue`\n    //    3. assign `value` to `this.currentValue`\n    //    4. return `true` to signal value has changed\n    const obj = this.obj;\n    const options = CustomElement.for<MdcSelect>(obj).viewModel.items ?? [];\n    const len = options.length;\n    // const currentValue = this.currentValue;\n    let i = 0;\n\n    /*\n    if (obj.multiple) {\n      // A.\n      if (!(currentValue instanceof Array)) {\n        // A.1.a\n        return true;\n      }\n      // A.1.b\n      // multi select\n      let option: IOptionElement;\n      const matcher = obj.matcher ?? defaultMatcher;\n      // A.1.b.i\n      const values: unknown[] = [];\n      while (i < len) {\n        option = options[i];\n        if (option.selected) {\n          values.push(hasOwn.call(option, 'model')\n            ? option.model\n            : option.value\n          );\n        }\n        ++i;\n      }\n      // A.1.b.ii\n      i = 0;\n      while (i < currentValue.length) {\n        const a = currentValue[i];\n        // Todo: remove arrow fn\n        if (values.findIndex(b => !!matcher(a, b)) === -1) {\n          currentValue.splice(i, 1);\n        } else {\n          ++i;\n        }\n      }\n      // A.1.b.iii\n      i = 0;\n      while (i < values.length) {\n        const a = values[i];\n        // Todo: remove arrow fn\n        if (currentValue.findIndex(b => !!matcher(a, b)) === -1) {\n          currentValue.push(a);\n        }\n        ++i;\n      }\n      // A.1.b.iv\n      return false;\n    }\n    */\n    // B. single select\n    // B.1\n    let value: unknown = undefined;\n    while (i < len) {\n      const option = options[i];\n      if (option.value === this.obj.value) {\n        // value = hasOwn.call(option, 'model') ? option.model : option.value;\n        value = option.value;\n        break;\n      }\n      ++i;\n    }\n    // B.2\n    this.oldValue = this.currentValue;\n    // B.3\n    this.currentValue = value;\n    // B.4\n    return true;\n  }\n\n  private start(): void {\n    const vm = CustomElement.for<MdcSelect>(this.obj).viewModel;\n    vm.initialised.then(() => {\n      (this.nodeObserver = new this.obj.ownerDocument.defaultView!.MutationObserver(records => this.handleNodeChange(records)))\n        .observe(vm.menu.root, childObserverOptions);\n      // this.observeArray(this.currentValue instanceof Array ? this.currentValue : null);\n      this.observing = true;\n      if (vm.items?.length) {\n        this.optionsWereSet = true;\n        this.synchronizeOptions();\n      }\n    });\n  }\n\n  private stop(): void {\n    this.optionsWereSet = false;\n    this.nodeObserver?.disconnect();\n    this.arrayObserver?.unsubscribe(this);\n    this.nodeObserver\n      = this.arrayObserver\n      = void 0;\n    this.observing = false;\n  }\n\n  // todo: observe all kind of collection\n  // private observeArray(array: unknown[] | null): void {\n  //   this.arrayObserver?.unsubscribe(this);\n  //   this.arrayObserver = void 0;\n  //   if (array !== null) {\n  //     if (!this.obj.multiple) {\n  //       throw new Error('Only null or Array instances can be bound to a multi-select.');\n  //     }\n  //     (this.arrayObserver = this.observerLocator.getArrayObserver(array)).subscribe(this);\n  //   }\n  // }\n\n  public handleNodeChange(records: MutationRecord[]): void {\n    if (records.find(x => x.type === 'childList'\n      && (Array.from(x.addedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM')\n        || Array.from(x.removedNodes).find(y => (y as HTMLElement).tagName === 'MDC-LIST-ITEM'))\n    )) {\n      this.optionsWereSet = true;\n      this.synchronizeOptions();\n      const shouldNotify = this.synchronizeValue();\n      if (shouldNotify) {\n        this.notify();\n      }\n    }\n  }\n\n  public subscribe(subscriber: ISubscriber): void {\n    if (this.subs.add(subscriber) && this.subs.count === 1) {\n      for (const e of this.config.events) {\n        this.obj.addEventListener(e, this);\n      }\n      this.listened = true;\n      this.start();\n    }\n  }\n\n  public unsubscribe(subscriber: ISubscriber): void {\n    if (this.subs.remove(subscriber) && this.subs.count === 0) {\n      for (const e of this.config.events) {\n        this.obj.removeEventListener(e, this);\n      }\n      this.listened = false;\n      this.stop();\n    }\n  }\n\n  useConfig(config: INodeObserverConfigBase): void {\n    this.config = config;\n    if (this.listened) {\n      for (const e of this.config.events) {\n        this.obj.removeEventListener(e, this);\n      }\n      for (const e of this.config.events) {\n        this.obj.addEventListener(e, this);\n      }\n    }\n  }\n}\n"]}

package/dist/select/mdc-select.html

@@ -1,38 +1,38 @@
-<template class="
-    mdc-select
-    mdc-select--${outlined ? 'outlined' : 'filled'}
-    ${leadingIcon ? 'mdc-select--with-leading-icon' : ''}
-    ${required ? 'mdc-select--required' : ''}
-  " role="button" aria-haspopup="listbox">
-  <div class="mdc-select__anchor" ref="selectAnchor" mdc-ripple="no-class.bind: true;" change.trigger="handleChange()"
-    focus.trigger="handleFocus()" blur.trigger="handleBlur()" keydown.trigger="handleKeydown($event)"
-    click.trigger="handleClick($event)">
-    <span class="mdc-select__ripple" if.bind="!outlined"></span>
-    <au-slot name="leading-icon"></au-slot>
-    <span class="mdc-select__selected-text-container">
-      <span class="mdc-select__selected-text" ref="selectedText"></span>
-    </span>
-    <span class="mdc-select__dropdown-icon">
-      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
-        <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
-        </polygon>
-        <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
-        </polygon>
-      </svg>
-    </span>
-    <mdc-floating-label if.bind="label && !outlined" for="${id}" component.ref="mdcLabel">${label}
-    </mdc-floating-label>
-    <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple"></mdc-line-ripple>
-    <mdc-notched-outline if.bind="outlined" component.ref="outline">
-      <mdc-floating-label if.bind="label" for="${id}" component.ref="mdcLabel">${label}</mdc-floating-label>
-    </mdc-notched-outline>
-  </div>
-
-  <mdc-menu class="mdc-select__menu ${naturalWidth || hoistToBody || fixed ? '' : 'mdc-menu-surface--fullwidth'}"
-    component.ref="menu" ref="menuElement" typeahead mdcmenusurface:closed.trigger="handleMenuClosed()"
-    anchor-margin.bind="anchorMargin" mdcmenusurface:opened.trigger="handleMenuOpened()"
-    mdcmenu:selected.trigger="handleMenuItemAction($event)" mdclist:itemschanged.trigger="handleItemsChanged($event)"
-    hoist-to-body.bind="hoistToBody" fixed.bind="fixed">
-    <au-slot></au-slot>
-  </mdc-menu>
-</template>
+<template class="
+    mdc-select
+    mdc-select--${outlined ? 'outlined' : 'filled'}
+    ${leadingIcon ? 'mdc-select--with-leading-icon' : ''}
+    ${required ? 'mdc-select--required' : ''}
+  " role="button" aria-haspopup="listbox">
+  <div class="mdc-select__anchor" ref="selectAnchor" mdc-ripple="no-class.bind: true;" change.trigger="handleChange()"
+    focus.trigger="handleFocus()" blur.trigger="handleBlur()" keydown.trigger="handleKeydown($event)"
+    click.trigger="handleClick($event)">
+    <span class="mdc-select__ripple" if.bind="!outlined"></span>
+    <au-slot name="leading-icon"></au-slot>
+    <span class="mdc-select__selected-text-container">
+      <span class="mdc-select__selected-text" ref="selectedText"></span>
+    </span>
+    <span class="mdc-select__dropdown-icon">
+      <svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
+        <polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
+        </polygon>
+        <polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
+        </polygon>
+      </svg>
+    </span>
+    <mdc-floating-label if.bind="label && !outlined" for="${id}" component.ref="mdcLabel">${label}
+    </mdc-floating-label>
+    <mdc-line-ripple if.bind="!outlined" component.ref="lineRipple"></mdc-line-ripple>
+    <mdc-notched-outline if.bind="outlined" component.ref="outline">
+      <mdc-floating-label if.bind="label" for="${id}" component.ref="mdcLabel">${label}</mdc-floating-label>
+    </mdc-notched-outline>
+  </div>
+
+  <mdc-menu class="mdc-select__menu ${naturalWidth || hoistToBody || fixed ? '' : 'mdc-menu-surface--fullwidth'}"
+    component.ref="menu" ref="menuElement" typeahead mdcmenusurface:closed.trigger="handleMenuClosed()"
+    anchor-margin.bind="anchorMargin" mdcmenusurface:opened.trigger="handleMenuOpened()"
+    mdcmenu:selected.trigger="handleMenuItemAction($event)" mdclist:itemschanged.trigger="handleItemsChanged($event)"
+    hoist-to-body.bind="hoistToBody" fixed.bind="fixed">
+    <au-slot></au-slot>
+  </mdc-menu>
+</template>